HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<blockquote>
ブロック引用（Block Quotation）要素。他のソースから引用した長いコンテンツ（段落など）を示すために使用されます。
info
概要
<blockquote> 要素は、**別の情報源から引用されたテキストのブロック**を定義します。ブラウザは通常、インデント（字下げ）を伴うなど、特殊な表示スタイルを適用します。
インライン（短い）の引用には <q> 要素を使用します。
引用元のURLを示すには **`cite` 属性**を、引用元の情報を人間が読める形式で記述するには <footer> 要素や <cite> 要素を組み合わせることが推奨されます。
play_circle
デモ (静的表示)
HTML (Source)
<blockquote cite="https://example.com/source-doc">
<p>
ウェブを形作るハイパーテキストのネットワークは、
情報共有の歴史において最も革新的な技術の一つです。
</p>
<footer>-- <cite>Webの未来</cite>より</footer>
</blockquote>
Preview (Result)
ウェブを形作るハイパーテキストのネットワークは、 情報共有の歴史において最も革新的な技術の一つです。
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| cite | 引用元のドキュメントまたはメッセージのソースを示す **URL** を指定します。ブラウザに視覚的な変化は与えませんが、検索エンジンやアクセシビリティ技術に情報を提供します。 |
code
実用例
1. cite属性とcite要素を併用した引用
<blockquote cite="https://developer.mozilla.org/ja/docs/Web/HTML/Element/blockquote">
<p>
<q>ブロッククォート</q>要素は、他の情報源から引用されたセクションであることを示します。
</p>
<footer>
出典: <cite>MDN Web Docs</cite>
</footer>
</blockquote>
2. 段落タグ (<p>) を含む引用
<blockquote>
<p>最初の段落の引用文です。長い引用にはこのように段落を複数含めることができます。</p>
<p>これが二つ目の段落です。この要素はブロックレベル要素です。</p>
</blockquote>
3. 短い引用文（q要素との使い分け）
<!-- ブロック引用 (長い引用、改行を伴う場合) -->
<blockquote>引用文</blockquote>
<!-- インライン引用 (短い引用、文中に含める場合) -->
<p>彼は「<q>これは重要だ</q>」と言いました。</p>
lightbulb
知っておくべき重要事項
info
視覚的な装飾のための使用は避ける
<blockquote> 要素は、単にテキストをインデントして表示したいという視覚的な理由だけで使用しないでください。これはコンテンツの**意味（セマンティクス）**を示すための要素であり、スタイル（見た目）はCSSで制御すべきです。
accessibility_new
引用元の明記
引用元の情報（誰の発言か、どこからの引用か）を`
引用元の情報（誰の発言か、どこからの引用か）を`