blockquote - 他の情報源から引用されたセクション

blockquote要素の中のコンテンツは、他の情報源から引用されたものになります。また情報源のアドレスがあれば、cite属性で言及します。

blockquote要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
blockquote

blockquote要素のHTML4からHTML5への変更点

基本的に変更ありません。

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。
cite 引用元の妥当なURL

「基本」のサンプル

HTMLコード

<p>cite要素をつかた引用例 <cite>引用サイト</cite>:</p>
<blockquote cite="http://quotes.example.org/s/sonnet130.html">
  <p>引用されたテキストが表示され、cite属性には引用元のURLが指定されます。</p>
</blockquote>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「基本」のサンプルプレビューを確認

「掲示板での返信に対応した例」のサンプル

HTMLコード

<article>
 <h1><a href="http://bacon.example.com/?blog=109431">掲示板の返信に対するマークアップ例</a></h1>
 <article>
  <header><strong>hoge</strong> 12時間前</header>
  <p>【引用コメント】</p>
  <footer><a href="?pid=29578">パーマリンク</a></footer>
  <article>
   <header><strong>greg</strong> 8時間前</header>
   <blockquote><p>【引用コメント】</p></blockquote>
   <p>返信コメント1</p>
   <footer><a href="?pid=29579">パーマリンク</a></footer>
   <article>
    <header><strong>t3yw</strong> 1時間前</header>
    <blockquote>
     <blockquote><p>【引用コメント】</p></blockquote>
     <p>返信コメント1</p>
    </blockquote>
    <p>返信コメント2</p>
    <footer><a href="?pid=29580">パーマリンク</a></footer>
    <article>
     <article>
      <header><strong>boing</strong> 1時間前</header>
      <p>返信コメント3</p>
      <footer><a href="?pid=29581">パーマリンク</a></footer>
     </article>
    </article>
   </article>
  </article>
  <article>
   <header><strong>fred</strong> 23分前</header>
   <blockquote><p>【引用コメント】</p></blockquote>
   <p>返信コメント4</p>
   <footer><a href="?pid=29582">パーマリンク</a></footer>
  </article>
 </article>
</article>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「掲示板での返信に対応した例」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2010/WD-html5-20100624/grouping-content.html#the-blockquote-element)