Use <blockquote> to show a longer piece of text quoted from another source, and point to the source with a URL in the cite attribute plus a clear note in the text.
ほかの本や記事から持ってきた「引用のまとまり」を、ひと目で分かる形で見せるためのタグで、出典はURL（cite）と本文の注記で丁寧に示します。
<blockquote>要素とは<blockquote>要素は、引用文を表すためのHTML要素です。主に以下のような役割があります。
スクリーンリーダーなどの支援技術でも、<blockquote>要素は「引用文が始まった」ことを伝える役割を果たし、読み上げ時に発話内容として引用文であることが分かりやすくなるなどの効果があります。
<q>要素との違い<blockquote>と似た要素に<q>要素がありますが、大きな違いは以下の通りです。
<blockquote><q>例:
<blockquote><q>HTML
<blockquote>
これは引用文です。元の記事や書籍などから抜粋してきた内容を示しています。
</blockquote>これは引用文です。元の記事や書籍などから抜粋してきた内容を示しています。
最も基本的な使い方は、単純に<blockquote>タグの間に引用したい文章を入れるだけです。
cite属性の活用cite 属性には 出典の URL を指定します。多くのブラウザでは見た目に直接は使われませんが、HTMLのメタ情報（セマンティクス）として有用です。
HTML
<blockquote cite="https://www.example.com/original-article">
この部分は「Example.com」の記事からの引用です。
</blockquote>この部分は「Example.com」の記事からの引用です。
HTML4時代には<blockquote cite="URL">を使用することが推奨されていましたが、HTML5ではこの属性は省略可能とされています。実際のところ多くのデベロッパーは、引用元を別途リンクテキストなどで示すことが多いです。ただし cite は表示されない属性なので、本文側にも出典リンクや注記を置くと読者に親切です。
<blockquote>の表示とデフォルトスタイル<blockquote>は、ほとんどのブラウザでインデント(字下げ)表示になることが多いです。多くのUA（ブラウザ）の初期スタイルが「引用文をブロック要素として扱い、左右の余白を広げる」ためですが、細かな見え方はブラウザによって異なります。
ユーザーエージェント(ブラウザ)のスタイルシート(UA CSS)で、例えば以下のように定義されることが多いとされています。
CSS
blockquote {
display: block;
margin: 1em 40px;
}ただし、このスタイルはブラウザやユーザーエージェントによって多少異なる場合があります。
もし独自のデザインやレイアウトを行う場合、CSSで次のように調整可能です。
これは引用文です。元の記事や書籍などから抜粋してきた内容を示しています。
CSS
blockquote {
margin-left: 20px;
margin-right: 20px;
padding: 10px;
border-left: 5px solid #888; /* 左側に縦線を引いて引用っぽさを強調 */
font-style: italic; /* 斜体で強調 */
}注意:
独自に引用を表現するために文字色や背景色、境界線などを適用することはよくありますが、引用であることを伝える意味合いを壊さないようにしつつ、見やすさ・アクセシビリティも確保すると良いでしょう。
<blockquote>要素を使用すると、HTML文書内で「これは引用箇所です」という明確な意味付けを行えます。これにより、検索エンジンやスクリーンリーダーなどのツールが文書を解釈しやすくなり、SEO(検索エンジン最適化)やアクセシビリティの観点でメリットがあります。
<cite>要素(別要素)などを用いて、引用している内容を説明したり出典を明確にしたりする。<div>や<span>で囲ってスタイルだけで表現しないようにする。lang属性を追加するなどの工夫も考えられます。cite属性の代替<blockquote cite="...">を使用しない場合、引用元は文章中で明示したり、<cite>要素を併用して次のように書くこともあります。
HTML
<blockquote>
<p>
“この文章はサンプルとして引用しています。初心者向けのガイドラインより抜粋。”
</p>
<p>
<cite>サンプルガイドブック 第1章</cite>
</p>
</blockquote>“この文章はサンプルとして引用しています。初心者向けのガイドラインより抜粋。”
サンプルガイドブック 第1章
<cite> は作品タイトル向けで、人名には使いません。人名はプレーンテキストで十分です。著者名などを明示したい場合は、引用の直後に 「— 山田太郎」 のようにテキストで添えるか、<figcaption>（後述）でまとめると分かりやすくなります。
ウェブ上の記事を引用しているのであれば、引用元記事へのリンクを設置するとユーザーにとっても分かりやすいです。以下は実例の一例です。
HTML
<blockquote>
<p>
“HTML5で追加された要素は多岐にわたり、構造をより意味的に示せるものが多い。”
</p>
<p>
出典: <a href="https://www.example.com/articles/html5-new-elements">Example Blog HTML5解説記事</a>
</p>
</blockquote>アクセシビリティの観点から、リンクテキストに「詳しくはこちら」のような曖昧な表現でなく、どんな記事か分かるような文章を使うことを意識すると、より親切です。
<blockquote>を使いこなすための実践的なヒントテキスト以外にも、動画や音声の説明文を引用として用いるケースも考えられます。文脈によりますが、著作権や利用規約に注意しながら、引用が許される範囲内で<blockquote>を使いましょう。
HTML
<blockquote cite="https://www.example.com/video-orig">
この部分で、動画の概要や引用した内容を簡潔にまとめる...
</blockquote>文章が途中であっても、長めの引用箇所には<blockquote>を使用します。読者がその区切りで引用箇所と分かるようにすることで、文脈が明確化します。
HTML
<p>以下の引用はとても参考になるので紹介します。</p>
<blockquote>
<p>…ここに引用したい長めの文章…</p>
<p>…さらに続く引用…</p>
</blockquote>
<p>以上が引用でした。続きとしては…</p><blockquote>引用中にさらに別の引用が含まれることも考えられます。HTML上ではネスト(入れ子)して使うことも可能です。ただし、読み手にとって分かりづらくならないように気を付ける必要があります。
HTML
<blockquote>
メインの引用文です。
<blockquote>
さらに引用の中で別のソースを引用している場合
</blockquote>
</blockquote>このように二重、三重に引用が重なると可読性が大きく下がる場合があるため、実際には極力避けるのが一般的です。
<blockquote>で表現しているからといって、許可されていない文章を無断でコピーして良いわけではありません。著作権法の引用要件やライセンス、利用規約などをクリアする必要があります。<q>要素との取り違え<blockquote>と<q>は目的や表示形式が異なります。中級以上の方でもしばしば混同しがちですが、短いフレーズは<q>、段落レベルの引用は<blockquote>と使い分けるのが基本です。<div>などにインデントを付与したり枠線を付けたりして「引用風」に見せるケースがありますが、これではセマンティクスが失われます。本当に引用を意味する場合は<blockquote>を使いましょう。<blockquote>内の文章構造<blockquote>内では、段落や見出しなどのブロックレベル要素を自由に配置できます。引用元の文書構造をある程度再現する必要がある場合は、<p>や<h2>などを適切に使ってマークアップします。<blockquote>における拡張的な応用見た目をより豊かに表現する際、CSSカスタムプロパティ(変数) を活用することもできます。
CSS
:root {
--blockquote-border: 3px solid #ccc;
}
blockquote {
border-left: var(--blockquote-border);
padding-left: 1em;
margin-left: 2em;
}これにより、プロジェクト全体で引用デザインを統一しやすくなります。
::beforeや::afterの疑似要素を使い、“”や引用符など装飾文字を入れることもあります。例として以下のようにCSSを記述することで、視覚的に引用らしさを強調できます。
CSS
blockquote::before {
content: "“";
font-size: 2em;
position: relative;
left: -0.5em;
}
blockquote::after {
content: "”";
font-size: 2em;
position: relative;
right: -0.5em;
}これは引用文です。元の記事や書籍などから抜粋してきた内容を示しています。
<q> は多くのブラウザが引用符を自動付与しますが、<blockquote> は通常自動付与されません。疑似要素で装飾を足す場合、<q> の自動引用符の見え方を変えてしまうことがあるので、デザインとアクセシビリティの両面で注意しましょう。
中級者以上であれば、MDN(Mozilla Developer Network) や W3CのHTML仕様(WHATWG仕様)を直接確認してみるのもおすすめです。仕様変更の背景や互換性について詳しく記載されているため、より深い理解につながります。
<blockquote> ですか？<q> が向いています。段落として見せたい長めの引用は <blockquote> を使い分けます。cite 属性と <cite> の違いは？cite はURLを入れる属性（機械向けのメタ）。<cite> は作品タイトルを包む要素で、人名は対象外です。cite は表示されないので、読者向けに本文側にもリンクや注記を置くのが親切です。cite に文章を入れるcite は URL 専用。本文側で出典をテキスト＋リンクで示す。<cite> で人名を包む<cite> は作品名向け。人名は素のテキストで。<blockquote> を使う<q>。長い引用や段落は <blockquote>。<blockquote> を使わない。装飾は CSS で。