HTMLで引用タグを正しく使う方法【長文・一部・引用元の書き方を解説】

ブログで他のサイトの文章を引用したいけど、どうやって書いたら良いんだろう？

引用タグの使い方を間違えると、SEOペナルティがあるって本当？

HTML引用タグの書き方を、初心者の僕にも分かりやすく教えてください。

こんな不安や疑問を解決します。

本記事を読めば、①長文を引用する方法、②一部を引用する方法、③引用元を明記する方法がわかるので、今後二度と引用の書き方について迷うことはありません。

HTMLの引用タグの使い方について、初心者にもわかりやすく基礎から解説します。

スポンサードサーチ

本記事のもくじ

引用に関するHTMLタグは3つ

HTMLで引用を使いたい場合に使うタグは下記の3つです。

<blockquote>：長文をブロックとして引用する
<q>：文章の中に引用文を書く
<cite>：引用元を明記する

引用は記事の信ぴょう性を高めるので、効果的に使えばSEOにも好影響があります。

しかし、必要な場面で引用タグを正しく使えていないと、著作権に関わる問題にも繋がりかねません。

プログラミング知識としてだけでなく、ネットビジネスのリテラシーとしてもしっかり覚えておきましょう。

【blockquoteタグとは】基本情報と正しい使い方

<blockquote>は長文をまとまりとして引用するときに使います。

blockquoteタグで引用する方法

<blockquote>
  <p>リンゴ（林檎、学名：Malus domestica, Malus pumila）は、バラ科リンゴ属の落葉高木樹。または、その果実のこと。植物学上はセイヨウリンゴと呼ぶ。春、白または薄紅の花が咲く。人との関わりは古く、紀元前から栽培されていたと見られ、16世紀以降に欧米での生産が盛んになり、日本においても平安時代には書物に記述がみられる。</p>
</blockquote>

“リンゴ”について、Wikipediaから長文を引用してみました。

上記のように、<blockquote>を使うときは、その中に<p>の段落を入れるのが一般的です。

blockquoteタグはブロックレベル要素

<blockquote>は、ブロックレベル要素です。

そのため、<blockquote>〜〜</blockquote>で囲った部分の上下には改行が入った状態で表示されます。

blockquoteタグは改行される

<h1>リンゴとは</h1>
<p>リンゴについて、Wikipediaには次のように書かれています。</p>
<blockquote>
<p>リンゴ（林檎、学名：Malus domestica, Malus pumila）は、バラ科リンゴ属の落葉高木樹。または、その果実のこと。植物学上はセイヨウリンゴと呼ぶ。春、白または薄紅の花が咲く。人との関わりは古く、紀元前から栽培されていたと見られ、16世紀以降に欧米での生産が盛んになり、日本においても平安時代には書物に記述がみられる。</p>
</blockquote>
<p>リンゴが紀元前から栽培されているなんて、少し驚きですよね。</p>

【quoteタグとは】基本情報と正しい使い方

<q>は、一部を引用するときに使われます。

ブロックレベル要素で前後に改行が入った<blockquote>と違い、<q>はインライン要素になります。

そのため、前後に改行が入りません。

quoteタグで引用する方法

<p>リンゴはバラ科リンゴ属の落葉高木樹で、一般的にはその果実のことを指します。上から見たら五角形に近いことから現代日本の美術界隈では、<q>リンゴは五角形</q>の愛称で親しまれています。</p>

このように<q>で一部を引用する場合、<p>で作った段落の中の一部に使います。

quoteタグはインライン要素

<q>はインライン要素です。もう説明不要かもしれませんが、インライン要素のタグで囲った部分には改行が入らず、前後の要素と同列で表示されます。

quoteタグは改行されない

<h1>リンゴとは</h1>
<p>リンゴはバラ科リンゴ属の落葉高木樹で、一般的にはその果実のことを指します。上から見たら五角形に近いことから現代日本の美術界隈では、<q>リンゴは五角形</q>の愛称で親しまれています。</p>

<q>で囲った部分は「””（ダブルクオテーション）」で挟まれて表示されます。

HTMLの言語設定を<html lang="ja">として、日本語設定にすることで「””」の代わりに、かぎ括弧「（）」で表示させることが可能です。

【citeタグとは】基本情報と正しい使い方

<cite>は引用元のタイトルや題名を表すHTMLタグです。

citeタグで引用元を示す

<h1>リンゴとは</h1>
<p>リンゴについて、<cite>Wikipedia</cite>には次のように書かれています。</p>
<blockquote>
<p>リンゴ（林檎、学名：Malus domestica, Malus pumila）は、バラ科リンゴ属の落葉高木樹。または、その果実のこと。植物学上はセイヨウリンゴと呼ぶ。春、白または薄紅の花が咲く。人との関わりは古く、紀元前から栽培されていたと見られ、16世紀以降に欧米での生産が盛んになり、日本においても平安時代には書物に記述がみられる。</p>
</blockquote>
<p>リンゴが紀元前から栽培されているなんて、少し驚きですよね。</p>

先ほどのリンゴに関する引用元はWikipediaなので、その部分を<cite>で囲ってみました。標準ブラウザでは、イタリック（斜体）で表示されるのが特徴です。

citeタグで囲める物

<cite>で囲める要素には次のようなものがあります。

書籍、論文、エッセイ、脚本
楽譜、楽曲、歌詞
映画、テレビ番組、ラジオ番組、YouTubeチャンネル
Webサイト
ゲーム
彫刻、絵画、その他アート

など…。

blockquoteタグ、quoteタグとの属性としても使用可能

<cite>は、<blockquote> <q>の属性として使うこともできます。

細かいことを言えば、HTMLタグとしての<cite>と属性の"cite"は別物なんですが、、、別にそこは重要じゃないので、citeはHTMLタグとしても属性としても使えると覚えておけばOKかと思います。

属性としてciteを使う

<blockquote cite="https://en.wikipedia.org/wiki/Apple">
  <p>リンゴ（林檎、学名：Malus domestica, Malus pumila）は、バラ科リンゴ属の落葉高木樹。または、その果実のこと。</p>
</blockquote>
<p><q cite="https://en.wikipedia.org/wiki/Apple">リンゴ（林檎、学名：Malus domestica, Malus pumila）</q>は、バラ科リンゴ属の落葉高木樹。または、その果実のこと。</p>

このように、属性でciteを使用した場合、ブラウザ表示上の見た目に変化はありません。

ですが、引用基がしっかり明記されていると検索エンジンのクローラーには好影響を与えるので、<blockquote> <q>を使うときは、cite属性を加えて、引用元の明記までしておくと良いと思います。

複数の引用を並列したい場合

複数の引用を並列すると、HTMLコードが読みづらくなることがあります。

複数の引用が並ぶと読みにくい

<blockquote cite="https://en.wikipedia.org/wiki/Apple">
  <p>リンゴ（林檎、学名：Malus domestica, Malus pumila）は、バラ科リンゴ属の落葉高木樹。または、その果実のこと。</p>
</blockquote>
<cite>Wikipedia</cite>
<blockquote cite="https://en.wikipedia.org/wiki/Citrus_unshiu">
　<p>ウンシュウミカン（温州蜜柑、学名：Citrus unshiu）は、ミカン科の常緑低木またはその果実のこと。様々な栽培品種があり、果実が食用にされる。</p>
</blockquote>
<cite>Wikipedia</cite>

解決方法

こんなときの解決方法が、<figure>です。

figureタグでまとまりを作る

<figure>
　<blockquote cite="https://en.wikipedia.org/wiki/Apple">
  　<p>リンゴ（林檎、学名：Malus domestica, Malus pumila）は、バラ科リンゴ属の落葉高木樹。または、その果実のこと。</p>
　</blockquote>
　<figcaption>
　　参照：<cite>Wikipedia</cite>
　</figcaption>
</figure>
<figure>
　<blockquote cite="https://en.wikipedia.org/wiki/Citrus_unshiu">
　　<p>ウンシュウミカン（温州蜜柑、学名：Citrus unshiu）は、ミカン科の常緑低木またはその果実のこと。様々な栽培品種があり、果実が食用にされる。</p>
　</blockquote>
　<figcaption>
　　参照：<cite>Wikipedia</cite>
　</figcaption>
<figure>

<figure>は独立したコンテンツを示す時に使われるHTMLタグでして、使用頻度は低いものの、使い方を覚えておくととでも便利なので、ついでに覚えておきましょう。

詳しくは下記の記事をどうぞ。

»【figureタグとは】使い方がイマイチわからないHTMLタグを解説