前回の記事 で、HTML5 における引用と引用元のマークアップについて以下のような提案をしました:
<blockquote>
<p>エレベーターはきわめて緩慢な速度で上昇をつづけていた。おそらくエレベーターは上昇していたのだろうと私は思う。</p>
<footer>
村上春樹『<cite>世界の終りとハードボイルド・ワンダーランド</cite>』より
</footer>
</blockquote>
引用元についての情報を footer 要素でマークアップし、かつ blockquote 要素の中に置くというアプローチです。かなり気に入っていたのですが、はてなブックマークでこんなコメントをいただきました (ありがとうございます):
“Content inside a blockquote must be quoted from another source” なので引用文以外の情報を含めるのはアウト。（そういう場合は<figure>を使うってのがどこかで言われてたけど、どこだったっけ…）
（はてなブックマーク - vantguarde - 2010年5月6日）
HTML5 仕様書の blockquote の項にあたってみると、たしかにこうあります:
The blockquote element represents a section that is quoted from another source.
Content inside a blockquote must be quoted from another source, whose address, if it has one, should be cited in the cite attribute.
（4.5.5 The blockquote element — HTML5 [W3C Working Draft 4 March 2010）
見落としておりました。「blockquote の内容はほかのリソースからの引用でなければならず、引用元は cite 属性で言及されるべき」といったところでしょうか。HTML 4.01 ではゆるかったのが HTML5 ではきっちりしているようです。失礼いたしました…
というわけで、HTML5 において引用と引用元をマークアップするにはどうするのがよいか、再び考えてみました。以下、いくつかの案を挙げてみます。
1. div + p
<div class="quote">
<blockquote>
<p>エレベーターはきわめて緩慢な速度で上昇をつづけていた。おそらくエレベーターは上昇していたのだろうと私は思う。</p>
</blockquote>
<p class="cite">
村上春樹『<cite>世界の終りとハードボイルド・ワンダーランド</cite>』より
</p>
</div>
まず最初の案は、HTML5 の新しい要素タイプを使わないマークアップ。まあ、間違いではないですよね、少なくとも。でも引用と引用元の結びつきが弱いというか、セマンティックでないというか。やはりここはもう少し積極的に HTML5 の新要素を活かしたマークアップを模索したいところです。
2. article + footer
<article>
<blockquote>
<p>エレベーターはきわめて緩慢な速度で上昇をつづけていた。おそらくエレベーターは上昇していたのだろうと私は思う。</p>
</blockquote>
<footer>
村上春樹『<cite>世界の終りとハードボイルド・ワンダーランド</cite>』より
</footer>
</article>
ふたつめ、引用元を footer 要素で、blockquote 要素を含む全体を article 要素でマークアップ。前回の記事 で見たように、引用元を footer でマークアップするのは悪くないと思うんですが、引用を article と見なすのはやや無理がありそうな気がしますね。というわけで、次。
3. figure + figcaption
<figure>
<blockquote>
<p>エレベーターはきわめて緩慢な速度で上昇をつづけていた。おそらくエレベーターは上昇していたのだろうと私は思う。</p>
</blockquote>
<figcaption>
村上春樹『<cite>世界の終りとハードボイルド・ワンダーランド</cite>』より
</figcaption>
</figure>
今のところいちばん良さそうかなと思っているのがこれです。引用元を figcaption 要素で、bloclquote 要素を含む全体を figure 要素でマークアップします。HTML5 の 2010 年 3 月 4 日付 W3C 草案 での figure と figcaption の定義は以下のとおりです:
The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.
The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc, that are referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.
（4.5.12 The figure element — HTML5 [W3C Working Draft 4 March 2010]）
The figcaption element represents a caption or legend for the rest of the contents of the figcaption element’s parent figure element, if any.
（4.5.13 The figcaption element — HTML5 [W3C Working Draft 4 March 2010]）
引用元の情報はまさに引用のキャプションと見なすことができるので、かなりしっくりくる気がします。ただ、figure 要素は「主たるコンテントから切り離せる」ものとされているのに対し、引用は前後の文脈と密接に関連する場合が多いので、そのあたりがやや微妙かもしれません。
また上記草案では、figure と figcaption の用例として詩の一節を引用する場合を挙げています。blockquote 要素を用いていないのが気になりますが:
<figure>
<p>'Twas brillig, and the slithy toves<br>
Did gyre and gimble in the wabe;<br>
All mimsy were the borogoves,<br>
And the mome raths outgrabe.</p>
<figcaption>
<cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98
</figcaption>
</figure>
figure と figcaption の例をもうひとつ、HTML5 Doctor の記事 より。引用というよりソースコードとその注釈をマークアップするケースですが:
<figure>
<blockquote>
<p><code><small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-alike license</a></small></code></p>
</blockquote>
<figcaption>
Using <code><small></code> around a <a href="http://creativecommons.org/choose/" title="Choose a License">Creative Commons license</a> link with <code>rel="license"</code>
</figcaption>
</figure>
どうでしょうか。figure と figcaption でいけそうかなと思うんですが… いやー、難しい!