blockquote 要素

4.4.4 blockquote 要素

カテゴリー:
フロー・コンテント
セクショニング・ルート
パルパブル・コンテント
この要素を使うことができるコンテキスト:
フロー・コンテントが期待される場所
コンテントモデル:
フロー・コンテント
コンテント属性:
グローバル属性
cite - 引用元へのリンク
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
あらゆるロールの値
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
interface HTMLQuoteElement : HTMLElement {
           attribute DOMString cite;
};

HTMLQuoteElement インタフェースは q 要素でも使われます。

blockquote 要素は、他の情報源から引用されたコンテンツを表します。任意で出典を入れることができますが、それは footer または cite 要素の中に入れなければいけません。さらに任意で、注記や略記などの変更をインラインに入れることもできます。

blockquote 要素の中のコンテンツは、出典やインラインの変更を除いて、他の情報源から引用されなければいけません。その情報源のアドレスがあるのであれば、それは cite 属性の中で言及することができます。

ブログ投稿のコメントのように、複数の人からの寄稿がページに含まれる場合、'他の情報源' には、同じページにある他の人が書いたテキストを入れることができます。

cite 属性が存在するなら、それは潜在的にスペースによって囲まれた妥当な URL でなければいけません。対応する引用元のリンクを取得するために、この属性の値は、その要素に対して解決されなければいけません。ユーザーエージェントは、そのような引用元のリンクをユーザーがたどれるようにすることができますが、これは、読者用ではなく、主に私的利用(たとえば、サーバーサイドのスクリプトがサイトの引用の利用について統計情報を集める)を目的としたものです。

cite IDL 属性は、この要素の cite コンテンツ属性を反映しなければいけません。

blockquote のコンテンツは、省略したり、文脈を加えたり、注記を加えたりすることができます。引用テキストへの追加や変更は、そのテキストの中に(テキストレベルで)示されなければいけません。これは、"強調は筆者による。" のような、表記法や明示的な論評の利用を意味します。

たとえば、英語では、これを実現するために角括弧が伝統的に使われます。"フレッドはクラッカーを食べた。そしてリンゴと魚が好きだと言った。" という文が書かれたページを考えてみましょう。これは次のように引用することができるでしょう:

<blockquote>
 <p>[フレッド] そして [...] と魚が好きだと言った。</p>
</blockquote>

blockquote の中の引用テキストと注記をはっきりと区別できるようにしたいなら、引用符を使うことができます。

たとえば、これは著者が入れたインラインの注記です:

 <figure>
 <blockquote>
 "That monster custom, who all sense doth eat
 Of habit's devil," <abbr title="et cetera">&c.</abbr> not in Folio
 
 "What a falling off was there !
 From me, whose love was of that dignity
 That it went hand in hand even with the vow
 I made to her in marriage, and to decline
 Upon a wretch."
 </blockquote>
 <footer>
 — <cite class="title">Shakespeare manual</cite> by <cite class="author">Frederick Gard Fleay</cite>, 
 p19 (in Google Books)
 </footer>
 </figure>
 

上記の例では、figure 要素の footer の中に出典が入れられています。これによって、その引用に関する情報とその引用はグループ化され関連付けられます。この例では、出典はキャプションではないので、そのコンテナーとして figcaption 要素は使われていません。

引用の帰属は blockquote 要素の中に置くことはできますが、それは、テキストの中で cite 要素に入れるか、footer 要素の中に入れなければいけません。

たとえば、これは、引用テキストの後ろにある footer 要素の中に帰属を入れることで、引用を帰属にはっきりと結び付けています:

<blockquote>
 <p>私は、私達のどちらも無神論者だと強く主張している。私はあなた
 ほどに神を信じていないだけだ。なぜ自分が他の神を認めないのかを理解でき
 れば、なぜ私があなたの神を信じないのか分かるだろう。</p>
 <footer>— <cite>ステファン・ロバーツ</cite></footer>
 </blockquote>

ここでは、引用テキストの最後の行に cite 要素を入れて帰属を与えています。著者へのリンクも入れられている点に留意してください。

<blockquote>
 人々は日用品の中に自分自身を認識している。つまり、自動車や
 ハイ・ファイ・セットや乱平面造りの家や台所用品に自分の魂を見出すのです。 
 — <cite><a href="http://en.wikipedia.org/wiki/Herbert_Marcuse">ヘルベルト・マルクーゼ</a></cite>
 </blockquote>

ここでは、引用テキストの後ろにある footer の中に帰属が与えられています。そして、Microdata 構文を使って、その出典に関するメタ情報が追加されています(同じことを RDFA Lite を使ってマークアップすることでもできるでしょう)。

<blockquote>
 <p>... she said she would not sign any deposition containing the word "amorous" 
 instead of "advances". For her the difference was of crucial significance, 
 and one of the reasons she had separated from her husband was that he had never been 
 amorous but had consistently made advances.</p>
 
 <footer itemscope itemtype="http://schema.org/Book">
  <span itemprop="author">Heinrich Böll</span>,
  <span itemprop="name">The Lost Honor of Katharina Blum</span>, 
  <span itemprop="datePublished">January 1, 1974</span>
 </footer>
 </blockquote>
 

blockquote の中にあるマークアップが引用元からのものであることを示す公式な方法はありません。もし footer または cite 要素が入れられ、これらの要素が出典を識別するために blockquote の中で使われているなら、引用元からの要素は、たとえば、class 属性を使うなどして(定義済みの拡張性メカニズム)、オリジナルであることを識別するためのメタデータで注記することができるでしょう。

この例では、引用元に cite 要素が入れられており、class 属性を使って注記されています:

  <blockquote>
  <p>私の大好きな本は <cite class="from-source">At Swim-Two-Birds</cite>です</p>
  <footer>- <cite>マイク[tm]・スミス</cite></footer>
  </blockquote>
  

次の例では、帰属を見せるために別の方法が使われています。

ここでは、figure 要素と figcaption と組み合わせて、blockquote 要素が使われています。

<figure>
 <blockquote>
  <p>The truth may be puzzling. It may take some work to grapple with.
  It may be counterintuitive. It may contradict deeply held
  prejudices. It may not be consonant with what we desperately want to
  be true. But our preferences do not determine what's true. We have a
  method, and that method helps us to reach not absolute truth, only
  asymptotic approaches to the truth — never there, just closer
  and closer, always finding vast new oceans of undiscovered
  possibilities. Cleverly designed experiments are the key.</p>
 </blockquote>
 <figcaption><cite>Carl Sagan</cite>, in "<cite>Wonder and Skepticism</cite>", from
 the <cite>Skeptical Enquirer</cite> Volume 19, Issue 1 (January-February
 1995)</figcaption>
</figure>

次のこの例は、blockquote と並列に cite が使われている例を示しています:

<p>His next piece was the aptly named <cite>Sonnet 130</cite>:</p>
<blockquote cite="http://quotes.example.org/s/sonnet130.html">
  <p>My mistress' eyes are nothing like the sun,<br>
  Coral is far more red, than her lips red,<br>
  ...

この例は、blockquote を使って、ユーザーがどの投稿に対して返信したかを示すことができることを見せています。article 要素をそれぞれの投稿に対して使って、スレッドをマークアップしています。

<article>
 <h1><a href="http://bacon.example.com/?blog=109431">Bacon on a crowbar</a></h1>
 <article>
  <header><strong>t3yw</strong> 12 points 1 hour ago</header>
  <p>I bet a narwhal would love that.</p>
  <footer><a href="?pid=29578">permalink</a></footer>
  <article>
   <header><strong>greg</strong> 8 points 1 hour ago</header>
   <blockquote><p>I bet a narwhal would love that.</p></blockquote>
   <p>Dude narwhals don't eat bacon.</p>
   <footer><a href="?pid=29579">permalink</a></footer>
   <article>
    <header><strong>t3yw</strong> 15 points 1 hour ago</header>
    <blockquote>
     <blockquote><p>I bet a narwhal would love that.</p></blockquote>
     <p>Dude narwhals don't eat bacon.</p>
    </blockquote>
    <p>Next thing you'll be saying they don't get capes and wizard
    hats either!</p>
    <footer><a href="?pid=29580">permalink</a></footer>
    <article>
     <article>
      <header><strong>boing</strong> -5 points 1 hour ago</header>
      <p>narwhals are worse than ceiling cat</p>
      <footer><a href="?pid=29581">permalink</a></footer>
     </article>
    </article>
   </article>
  </article>
  <article>
   <header><strong>fred</strong> 1 points 23 minutes ago</header>
   <blockquote><p>I bet a narwhal would love that.</p></blockquote>
   <p>I bet they'd love to peel a banana too.</p>
   <footer><a href="?pid=29582">permalink</a></footer>
  </article>
 </article>
</article>

この例は、短い抜粋に対して blockquote を使う方法を示していますが、blockquote 要素の中で p 要素を使う必要がないことを見せています:

<p>He began his list of "lessons" with the following:</p>
<blockquote>One should never assume that his side of 
the issue will be recognized, let alone that it will 
be conceded to have merits.</blockquote>
<p>He continued with a number of similar points, ending with:</p>
<blockquote>Finally, one should be prepared for the threat 
of breakdown in negotiations at any given moment and not 
be cowed by the possibility.</blockquote>
<p>We shall now discuss these points...

会話を表す方法例は後述のセクションで説明されています。この目的で citeblockquote を使うのは適切ではありません。


※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-blockquote-element