ホームページを運営する上で、他サイトの文章や発言を紹介したい場面は多くあります。しかし、単純なコピー＆ペーストで掲載してしまうと、著作権上の問題やSEOにおける重複コンテンツとみなされるリスクが生じます。そのため、Web上では「どこからが引用なのか」をHTMLとして正しく示すことが重要です。
HTMLには、文章の引用を意味的に表現するための要素として <blockquote>・<q>・<cite> の3つが用意されています。これらは見た目を整えるためのタグではなく、それぞれ「長い引用」「短い引用」「出典・作品名」といった役割を持ち、正しく使い分けることで、検索エンジンや閲覧者に対して明確な情報構造を伝えることができます。
ここでは、これら3つの引用関連タグの基本的な使い方から、実際の記述例、出典情報の正しい示し方までを初心者向けに分かりやすく解説します。
なお、イラストや写真などの「画像」を引用する方法は手順や注意点が異なるため、別記事にて詳しく紹介します。
HTMLで文章を引用する方法（タグの書き方）
他人が書いた文章を自分のホームページやブログに掲載する場合、検索エンジンやブラウザに「ここからここまでが引用文です」と正しく伝えるためのHTMLタグの<blockquote> や <q>、<cite>を使用する必要があります。
● 長い文章を引用する場合<blockquote></blockquote>
まとまった文章や段落ごとなど長い文章を引用する場合、引用する文章を<blockquote>と</blockquote>（ブロッククォートタグ）で囲みます。
| <p>近年の働き方の変化について、政府の報告書では次のように述べられています。</p> <blockquote cite=”https://example.com”> <p>テレワークの導入により、移動時間の削減だけでなく、業務の効率化や書類のデジタル化が急速に進展したと分析されています。</p> </blockquote> <p>出典：<cite><a href=”https://example.com/”>令和〇年 △△省白書</a></cite></p> |
<blockquote> は、ブロックレベル（改行を伴う独立した文章の塊）を引用するためのタグ で、HTMLにおける正式な引用表現です。
「ここからここまでが引用部分です」という区切りをブラウザと検索エンジンに伝える役割を持ちます。
上記コードのサイトでの表示は下記の様になります。
近年の働き方の変化について、政府の報告書では次のように述べられています。
出典：令和〇年 △△省白書 |
● cite属性：引用元URLを示す（画面には表示されない）
HTMLの標準仕様では、cite属性を使って引用元のURLを記述します。
<blockquote> の cite 属性（例：<blockquote cite="https://example.com">）は、その引用文の出典元となる文書やページのURLを示すための属性です。
この情報は主に検索エンジン、支援技術、文書解析ツールなどのプログラムが参照することを想定しており、通常のブラウザでは画面に表示されません。
利用者に出典を見せる場合は、<blockquote>と</blockquote>の外で、出典情報を併記するのが一般的です。
● 出典情報のcite要素の記載方法（画面に表示される）
cite 属性は利用者には表示されないため、出典を明示する場合は、通常は引用文の直後に「出典：」を付け、出典文書名を <cite> 要素で囲み、<a> 要素で元ページへリンクします。
書籍などWEBサイト以外からの引用の場合は、<a> 要素によるリンクはできません。
● 短いフレーズを文章の中で引用する場合<q></q>
短いフレーズを引用する場合は、文章の流れを壊さないように引用符（「 」や “ ”）で囲み、文中に自然に組み込むのが基本です。
日本語では「 」、英語では “ ” が一般的に使われますが、HTMLでは、こうした短い引用では、<blockquote> のようなブロック要素は使わず、インライン要素として <q> を使用します。
<q>引用フレーズ</q> と記述すると、ブラウザが自動的に引用符を補って表示する場合があります。
<p>彼は会議の中で、「<q cite=”https://example.com”>来期までに全プロセスの自動化を完了させる</q>（出典：<cite><a href=”https://example.com”>作品名</a></cite>）と強く宣言しました。</p>」 |
上記コードのサイトでの表示は下記の様になります。
来期までに全プロセスの自動化を完了させる（出典：作品名）と強く宣言しました。 |
● cite属性：引用元URLを示す（画面には表示されない）
<q> 要素にも cite 属性を付与することができ、これは <blockquote> と同様に機械向けの出典情報として扱われます。
<q cite="https://example.com">引用フレーズ</q> のように書くことで、検索エンジンや支援技術が引用元URLを参照できます。
● 出典情報のcite要素の記載方法（画面に表示される）
利用者に出典を明示する場合は、別途 <cite> 要素を用います。
<q cite="https://example.com">引用フレーズ</q> 出典：<cite><a href="https://example.com">作品名</a></cite> のように記述すると、機械可読な cite 属性と、人間向けの出典表示を併用できます。
このように <q> は短い引用をインラインで扱うための要素、cite 属性は機械向けの出典情報、<cite> は人間向けの出典名という役割分担になっています。
装飾目的の blockquote はNG
<blockquote> は、他の文書や発言からの「引用部分」であることを示すためのセマンティックな要素です。検索エンジンやスクリーンリーダー（画面読み上げソフト）はこのタグを認識し、「ここは外部または他者の引用である」と解釈します。つまり、単なる見た目の装飾ではなく、文書構造を意味的に示す重要な役割を持っています。
そのため、マークアップ言語のHTMLにおいて、本来の意味とは異なる用途でタグを使用することは、アクセシビリティや検索エンジンの理解に影響を与える可能性があるため注意が必要です。
その代表例が、引用を示す <blockquote> タグを、単に枠線や背景色で強調する「装飾目的」で使用するケースです。
<blockquote>タグを装飾目的で使用してはいけない理由
① アクセシビリティへの影響
スクリーンリーダーは <blockquote> を検出すると「引用」として読み上げます。そのため、実際には引用ではない内容に使用すると、利用者に誤解を与える可能性があります。
② 意味構造の誤認リスク
検索エンジンはHTMLの構造をもとにコンテンツを解析します。不適切に <blockquote> を使用すると、意図しない意味として解釈される可能性があり、コンテンツ評価や分類に影響することがあります。
③ 構造とデザインの混同
HTMLは文書の「意味構造」を定義するものであり、見た目のデザインはCSSで制御するのが原則です。装飾のために意味を持つタグを流用すると、HTML本来の「文書構造」が正しく表現されなくなり、内容の役割が曖昧になります。
正しい代替方法
特定の内容を視覚的に目立たせたい場合でも、HTMLのタグに見た目の役割を持たせるのではなく、構造はHTMLで正しく整理し、表示の強調はCSSで行うことが重要です。
| <!– HTMLは意味構造のみ –> <div class=“important-box”> 重要なポイント：締切は今週金曜日です。 </div>/* CSSで見た目を制御 */ <style> .important-box { background-color: #f9f9f9; border-left: 4px solid #007bff; padding: 10px; margin: 10px 0; } </style> |
上記コードのサイトでの表示は下記の様になります。
重要なポイント：締切は今週金曜日です。 |