引用元のマークアップ

引用で引用元について明らかにすることは大切です。blockquote要素にはそのための属性としてciteが用意されていますが、ほとんど飾りのようなもので、効果的にその情報を表示することは出来ません。じゃどうすれば良いのかというような話です。

figcaption要素で引用元の情報をマークアップし、blockquote要素と共にfigure要素で括るというのがどうやら王道なようです。

<figure>
  <blockquote cite="http://example.com/">
    <p>Lorem ipsum dolor sit amet.</p>
  </blockquote>

  <figcaption>
    <p><cite><a href="http://example.com/">Example Website</a></cite></p>
  </figcaption>
</figure>

blockquote要素の内容は引用だけなどといった仕様に忠実で問題は特にありません(強いてあげるならスタイルが書きづらいくらい)。少し前までは仕様にこの例が載っていたような気がしますが、今はありません。

これに対して、現実世界ではクオートの中に引用元の情報があることが多いので、仕様がblockquote要素の内容を引用のみに制限しているのがおかしいんじゃないかという意見もあります。僕もこの意見はもっともだと思います。

教科書なんかを思い浮かべるとfigure要素を使うというのが適切だと考えられるんですが、引用はコンテンツ流れの中で読まれないと意味が通らないことが多いと思うので、「could be moved way」なfigure要素だとまずそうな気がします。コンテンツから参照する引用が脚注や別ページにあったりしたらおかしいですよね？

というわけで最近は以下のような感じで引用をマークアップしています。

<blockquote>
  <p>Lorem ipsum dolor sit amet.</p>

  <footer>
    <p><cite><a href="http://example.com/">Example Website</a></cite></p>
  </footer>
</blockquote>

最近一新されたTwitterのEmbedded Tweetsもこの形に近いですね。クラス名でhentryがついてたり色々実験的な感じです。主要コンテンツでhAtom使ってると、フィードがネストされることになるんですがどう解釈される(するべきな)んだろう……。

追記

rev6988でblockquote要素での引用元の表記について具体例が追加された。はっきりと「Attribution for the quotation, if any, must be placed outside the blockquote element.」と書かれたのでfooter要素を使って引用元を表記するのはまずそう(勿論blockquote要素内でfooter要素を使えないという話ではない)。普通に引用する場合はだいたいfigureとfigcaption要素を使ってマークアップするのが良さそう。

インデントは揃えたいので以下のようなスタイルを書いておいた。

blockquote,
blockquote + p,
blockquote + figcaption {
  margin-left: 2.5em;
}

隣接セレクタ使う機会も随分増えたなぁ。