blockquote + footer

コメントでの指摘を受け、新しく記事を起こしました: HTML5 での引用と引用元のマークアップ


HTML5 の 2010 年 3 月 4 日付 W3C 草案 で、footer 要素は以下のように定義されています:

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

4.4.9 The footer element — HTML 5

footer 要素は、直近の祖先にあたるセクショニング・コンテントまたはセクショニング・ルート要素に対するフッターを示します。フッターは一般的に、執筆者、関連文書へのリンク、著作権などといった、そのセクションについての情報を含みます」、といったところですね。たとえばおもにページの下部に入るサイトの著作権などのクレジットや、ブログ記事の執筆者や日付などをマークアップするのに使うことになると思います。

さて「セクショニング・コンテントまたはセクショニング・ルート要素に対するフッター」とのことですが、この「セクショニング・ルート」となる要素のひとつに blockquote 要素 があります。blockquote のフッターとなれば、引用元の情報を記述するのにうってつけではないでしょうか。というわけで、HTML5 における blockquote のマークアップを考えてみました:

<blockquote cite="http://ja.wikipedia.org/wiki/1Q84">
  <p>『1Q84』(いちきゅうはちよん)は、村上春樹の長編小説。</p>
  <p>2009年5月、書き下ろしとして新潮社から刊行された。2009年11月に第63回「毎日出版文化賞 文学・芸術部門」を受賞した。</p>
  <footer>
    出典: <cite>1Q84 - Wikipedia</cite>,
    <time datetime="2010-05-02">2010 年 5 月 2 日</time>
  </footer>
</blockquote>

blockquote 要素内の footer 要素に、引用元を示す cite 要素と情報の取得日時を示す time 要素を含めています。引用元の URI は blockquote 要素の cite 属性で示していますが、たとえば以下のように jQuery を使って、cite 属性値の URI を抽出して cite 要素にリンクを設定することもできます:

$(function () {
  $('blockquote[cite]').each(function () {
    var pattern = /^https?\:/i;
    var citeUrl = $(this).attr('cite');
    var citeElm = $(this).children('footer').children('cite');
    if (pattern.test(citeUrl) && citeElm) {
      citeElm.wrap('<a href="' + citeUrl + '"/>');
    };
  });
});

なお、HTML5 では cite 要素の定義がかなりきっちりしていて、人名をマークアップをするために使われるべきではないとされています:

The cite element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing.

A person’s name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people’s names. (In some cases, the b element might be appropriate for names; e.g. in a gossip article where the names of famous people are keywords rendered with a different style to draw attention to them. In other cases, if an element is really needed, the span element can be used.)

4.6.5 The cite element — HTML 5

よって、フッターの引用元の文言に人名などが含まれる場合、以下のようにマークアップするのが適切と思われます:

<blockquote>
  <p>エレベーターはきわめて緩慢な速度で上昇をつづけていた。おそらくエレベーターは上昇していたのだろうと私は思う。</p>
  <footer>
    村上春樹『<cite>世界の終りとハードボイルド・ワンダーランド</cite>』より
  </footer>
</blockquote>

マークアップする上で blockquote 要素と cite 要素というのはなかなか扱いの難いものだったと思います。たとえば blockquote 要素の中に cite 要素を含めるのは是か非かとか、blockquote 要素の外に cite 要素を置いた場合にどうやって両者を紐付けるかとか。

このあたり、footer 要素を使うことでかなりすっきりするのではないかと思うのですが、どうでしょうか。