サイトをリデザインした のにともない、全体的にマークアップについても見直しているのですが、ちょっと悩んだのがホームやアーカイヴ・ページなどにある「ブログ記事の概要や抜粋のリスト」です。
よく見かけるのは以下のようなマークアップで、うちもリデザイン前はだいたいこんな感じでした:
<section class="articleExcerptList">
<h1>Recent articles</h1>
<article>
<h2><a href="...">ブログ記事リストのマークアップ</a></h2>
<time datetime="...">April 10, 2012</time>
<p><!-- 概要・抜粋 --></p>
<a href="...">Continue reading</a>
</article>
<article>
<h2><a href="...">リデザインしました!</a></h2>
<time datetime="...">April 8, 2012</time>
<p><!-- 概要・抜粋 --></p>
<a href="...">Continue reading</a>
</article>
. . .
</section>
各アイテムが記事ごとのタイトル、メタデータ (日付やタグなど)、適当な長さの概要・抜粋、「続きを読む」リンクといったものから構成されていて、それぞれが article 要素、というかたちです。よく見かけるというか、ざっと調べたところかなりの割合のブログがこうでしたね。
で、これって article でいいんだろうか、というのが気になったわけです。
article 要素について 仕様 にはこう書かれています:
The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
「article 要素は、ドキュメント、ページ、アプリケーション、またはサイトにおいてそれだけで機能する構成要素を表すもので、それは原理的にはたとえばフィードなどで独立して共有されたり再利用されたりすることが可能なものです。フォーラムの発言、雑誌や新聞の記事、ブログのエントリー、ユーザーの投稿したコメント、インタラクティヴなウィジェットやガジェット、そのほか独立した内容を持つアイテムがこれにあたるでしょう」といったところですね (オレオレ翻訳)。
リストの各項目の内容はたしかに “blog entry” のデータなので article 要素で間違いはないようにも思えますが、“self-contained composition in a document” かというとちょっと違う気がします。それぞれのリンク先の記事そのものは self-contained ですが、リストを含むドキュメント (たとえばホームページ) においてそれらはあくまで別のドキュメントの概要や抜粋であり、それだけで機能するとは言いがたいと思うのです。概要や抜粋のリストはいわば「目次」のようなものであり、記事そのものではありません。逆に、複数の記事が並んでいてもそれぞれ全文を掲載していれば article でもいいかなと思います。
というわけで、これらは article ではなく section のほうが良いのではないだろうか、と思うのですがどうでしょう:
<section class="articleExcerptList">
<h1>Recent articles</h1>
<section>
<h2><a href="...">ブログ記事リストのマークアップ</a></h2>
<time datetime="...">April 10, 2012</time>
<p><!-- 概要・抜粋 --></p>
<a href="...">Continue reading</a>
</section>
<section>
<h2><a href="...">リデザインしました!</a></h2>
<time datetime="...">April 8, 2012</time>
<p><!-- 概要・抜粋 --></p>
<a href="...">Continue reading</a>
</section>
. . .
</section>
また、概要などがなく、タイトルと日付ぐらいのリストなら ul がいいかなと思います:
<ul class="articleList">
<li>
<a href="...">ブログ記事リストのマークアップ</a>
<time datetime="2012-04-09">April 9, 2012</time>
</li>
<li>
<a href="...">リデザインしました!</a>
<time datetime="2012-04-08">April 8, 2012</time>
</li>
. . .
</ul>
HTML5 のセクショニングの基本的な考え方として、見出しがある (あるいはあってもおかしくない) ものはとりあえず section として、中身が (major な) ナビゲーションなら nav、それだけで機能するようなものなら article、本文とあんまり関係なければ aside、みたいな感じに考えるといいかなと思ってます最近は。