<blockquote> …… 引用コンテンツであることを表す

<blockquote>タグは、引用コンテンツのセクションであることを表す際に使用します。

blockquote要素は、別の情報源から引用されたコンテンツであることを表します。 引用の出典に関する情報がある場合には、blockquote要素の内側ではなく外側に配置します。

引用元へのリンクがある場合には、cite属性の値に有効なURLを指定します。 blockquote要素のcite属性で指定するURLは、読者向けではありません。 例えば、引用に関する統計データをサーバー側スクリプトによって収集するなどの目的に利用されることが想定されています。

■使用例

以下のサンプルでは、blockquote要素で指定した引用ブロックの後に、引用の出典に関する情報が示されています。

<blockquote>
 <p>
 私だけかね…？　まだ勝てると思ってるのは…<br>
 あきらめたらそこで試合終了ですよ…？
 </p>
</blockquote>
<p>安西先生＠山王戦</p>

■属性

blockquote要素のcite属性とcite要素

blockquote要素のcite属性は、引用元へのリンクを指定する際に使用します。 cite要素は作品のタイトルを表す際に使用します。 blockquote要素のcite属性とcite要素は名前が似ていますが、意味や使い方が異なりますので混同しないようにしてください。

■使用例

以下のサンプルは、blockquote要素のcite属性とcite要素を併用した使用例です。

<p>彼の次作は <cite>Sonnet 130（小曲130番）</cite> でした:</p>
<blockquote cite="https://quotes.example.org/s/sonnet130.html">
  <p>
  彼女の目は太陽なんかじゃなく、<br>
  唇の色はサンゴみたいな赤じゃない、<br>
  ...
  </p>
</blockquote>

■使用例

以下のサンプルでは、 blockquote要素をfigure要素とそのfigcaption要素と組み合わせることで、 引用コンテンツとその出典情報を明確に関連付けています。 出典情報の部分は引用の一部ではないため、blockquote要素の外側に配置されています。

<figure>
 <blockquote>
  <p>
  真実は不可解かもしれません。
  取り組むには手間がかかるかもしれません。
  直感に反するかもしれません。
  根深い偏見にさらされるかもしれません。
  切実に望んだことと一致しないかもしれません。
  しかし、真実とは私たちの好みによって決定されるものではありません。
  私たちには“やり方”があります。
  絶対的な真実への到達というよりは、だんだん真実に近づいていく方法です。
  周到に設計された実験が鍵です。
  </p>
 </blockquote>
 <figcaption>
 カール・セーガン　「<cite>不思議と懐疑主義</cite>」<br>
 <cite>懐疑的な探究者</cite> 第19巻、第1号（1995年1-2月）より
 </figcaption>
</figure>

■使用例

以下のサンプルは、フォーラムにおけるユーザーの返信投稿を想定しています。 どの発言を引用しているのかを明確にするために、blockquote要素を使用しています。 入れ子が視覚的に分かりやすくなるように、article要素に赤色のアウトラインや余白のスタイルを指定しています。

<article>
 <h1><a href="https://bacon.example.com/?blog=109431">お題：ベーコン</a></h1>

 <article>

  <header><strong>ひでかず</strong> 3日前</header>
  <p>イルカはベーコン好きだ。間違いない。</p>
  <footer><a href="?pid=29578">固定リンク</a></footer>

  <article>
   <header><strong>たなか</strong> 2日前</header>
   <blockquote><p>イルカはベーコン好きだ。間違いない。</p></blockquote>
   <p>んなもん食わねーだろ！</p>
   <footer><a href="?pid=29579">固定リンク</a></footer>
   <article>
    <header><strong>ひでかず</strong> 5時間前</header>
    <blockquote>
     <blockquote><p>イルカはベーコン好きだ。間違いない。</p></blockquote>
     <p>んなもん食わねーだろ！</p>
    </blockquote>
    <p>んなもんイルカ！ でお願いします。</p>
    <footer><a href="?pid=29580">固定リンク</a></footer>
   </article>
  </article>

  <article>
   <header><strong>おおた</strong> 23分前</header>
   <blockquote><p>イルカはベーコン好きだ。間違いない。</p></blockquote>
   <p>塩分には気を付けろ。</p>
   <footer><a href="?pid=29582">固定リンク</a></footer>
   <article>
    <header><strong>たなか</strong> 22分前</header>
    <blockquote><p>塩分には気を付けろ。</p></blockquote>
    <p>いつも塩水まみれだろ！</p>
    <footer><a href="?pid=29579">固定リンク</a></footer>
   </article>
  </article>

 </article>

</article>

article {outline:solid 1px #f00; margin:4px; padding:4px;}

■使用例

以下のサンプルは、blockquote要素内では必ずしもp要素を使用する必要がないことを示しています。

<p>彼の説明は次のように始まった：</p>
<blockquote>
こちらの主張が認められると想定すべきではありません。
楽観的な見通しは排除しなくてはなりません。
</blockquote>
<p>話をしばらく続けたあとで、彼は次のように締めくくった：</p>
<blockquote>
つまり、交渉決裂に備える必要があり、その可能性に怯えてはなりません。
</blockquote>
<p>この件について、これから私たちで議論していきましょう...

誰かの話した言葉の引用する ≠ 会話を表す

blockquote要素は、誰かの話した言葉を引用する場合にも使用できます。 ただし、会話を表すことを目的に、blockquote要素やcite要素を使用するのは適切ではありません。

■関連項目

Sponsors