HTML 5での<section>要素と<article>要素の違い。
- 平成22年 3月11日 公開
- テーマ
HTML 5に於ける<section>要素と<article>要素の違いと使い分け方について。
<section>要素の位置付け。
HTML 5で導入される<section>要素は一般的なセクションです。
但し、HTML 5の仕様案では、他のセクショニング内容要素に該当しないセクションのみを<section>要素としてマークアップすべきであるとしております。
他のセクショニング内容要素とは、以下の三つです。
<article>要素とは。
HTML 5で導入される<article>要素とは、独立した記事のセクションです。
ウェブログやニュースサイトなら、複数の記事が一本のHTML文書に収まる事が多いので、記事毎に<arctile>要素とすれば良いでしょう。
ウェブログやニュースサイト以外のHTML文書の場合、或いは独立した記事が一本しかない場合であれば、文書の本文部分となるセクションを<article>要素とすれば良いでしょう。
<article>要素の入れ子。
<article>要素は、入れ子にする事も考えられます。
親記事に関連する子記事を掲載する場合。
例えば、ある記事について、関連する子記事を併せて紹介する場合、元の記事となる<article>要素の中にそれら関連記事を<article>要素として含める事が可能になります。
例えば、アイドル女優・堀北真希ちゃんがあるCMである事に初挑戦すると言う記事に対し、子記事として堀北真希ちゃんの発言が独立した記事となっていれば、以下のようにマークアップする事が考えられます。
<article><h1>堀北真希、○○のCMで××に挑戦！</h1>…<article><h2>「頑張ります」…××初挑戦の堀北</h2><p>○○のCMで××に挑戦する事となった堀北真希(21)は、△日、東京都内で記者会見を行い、「頑張ります」と抱負を述べた。</p>…</article></article>
ウェブログでのコメント。
ウェブログで、閲覧者から投稿されたコメントについて、これらを子記事と見立ててそれぞれ<article>要素とすると言う考えもあります。
- ウェブログのコメントが記事と言う発想は制作者にはありませんが…。
例えば、あるウェブログで以下のようにする事が考えられます。
<article><h1>堀北真希、○○のCMで××に挑戦！</h1>…<article class="comment"><h2>○○さんからのコメント</h2><p class="contributed-date"><time datetime="2010-03-11T22:18:00+09:00">平成22年 3月11日 22時18分</time> 投稿</p><p>それは楽しみですね。</p><p>十代の頃の堀北真希ちゃんは、男装させられたり、色物のような扱いでしたが、…。</p>…</article><article class="comment"><h2>△△さんからのコメント</h2><p class="contributed-date"><time datetime="2010-03-11T21:54:00+09:00">平成22年 3月11日 21時54分</time> 投稿</p>…</article></article>
<article>要素と<section>要素をどう使い分けるか。
<article>要素の定義で述べた通り、
- ウェブログやニュースサイトなら、各記事をそれぞれ
- その他のウェブサイトなら、文書のうち本文に相当するセクションを
<arctile>要素とすれば良いでしょう。
そして、その下位のセクションについては、ナヴィゲーションリンク(<nav>要素)或いは脚注や蛇足となる文章など本文と関連の薄いセクション(<aside>要素)以外は全て<section>要素とすれば良いのです。