kojika17HTML5のarticleとsectionの違いを書いてみた
article要素とsection要素の違いについては、様々なブログなどで書かれている内容だとは思います。
ただ「もう少し内容があったら、他の人もわかりやすいのにな」とよく思っていたので、策定中止になったXHTML2.0にも触れつつ、HTML5のarticleとsectionの違いについて書いてみます。
HTML5とXHTML2.0
2009年までHTML5とXHTML2.0と策定が行われていましたが、XHTML2.0は策定中止となり、HTML5に統合されるという形になりました。
しかしsection要素を説明する上で、XHTML2.0の方が分かりやすいので、現在は策定は中止されていますが、XHTML2.0のsection要素の使い方を見て頂きます。
XHTML2.0のsection要素とh要素(策定は中止されています)
XHTML2.0ではh1～h6(以下、hxとします)までの見出しレベルに取って代わり、<section>と<h>という要素が導入され、より構造的にマークアップできるようになりました。
実際に例を見てみます。
HTML4.01やXHTML1.0など 従来のマークアップ
<body>
<h1>見出し1</h1>
<p>段落</p>
<h2>見出し2</h2>
<div class="section">
<h3>見出し3</h3>
<p>段落2</p>
</div><!-- .section -->
</body>
XHTML2.0 section要素とh要素を使ったマークアップ
<body>
<h>見出し1</h>
<p>段落</p>
<section class="lv1">
<h>見出し2</h>
<section class="lv2">
<h>見出し3</h>
<p>段落2</p>
</section><!-- .lv2 -->
</section><!-- .lv1 -->
</body>
section要素とh要素で階層構造にすることで、hxのように数字で見出しレベルを設定しなくても、文章構造を明示することができました。
逆にいうとh要素に見出しレベルを設定する場合には、section要素が必要ということになります。
HTML5のsection要素とhx要素
HTML5の場合は、h要素は無く、従来のhx要素がありますので通常通りマークアップすることが可能ですし、
またXHTML2.0のようにsection要素を使い、構造的にマークアップすることも可能です。
強引な方法かもしれませんが、以下のような例を出します。
HTML5 section要素のマークアップ例
<body>
<h1 id="hLv1">見出し1</h1>
<p>段落</p>
<h2 id="hLv2">見出し2</h2>
<section class="lv1">
<h1 id=hLv3">見出し3</h1>
<p>段落2</p>
</section><!-- .lv1 -->
</body>
上記の例では、h1#hLv1, h2#hLv2, h1#hLv3 と3つの見出しが存在します。
この場合は、h1#hLv1 が見出しレベルとして従来通り、一番高くなります。
そしてh1#hLv3 もh1要素ですが、section要素の中に入っているので、1ランク下がり、h1#hLv3 は h2#hLv2 と同じようなレベルの見出しに見られます。
このように同じhx要素であっても、section要素でマークアップすることにより、HTML文章を構造的に明示することができます。
ただしsection要素を使う場合は、1つのsection要素に属するhxが1つ以上必要になります。
以下のような場合には、section要素でマークアップしても良いかもしれません。
- hx要素が存在する
- 「章」として意味がなりたつ
- タブの中身
HTML5のarticle要素
article要素は、記事やページなど自己完結したものを表します。
section要素のようにhx要素は必須ではありませんが、自己完結した部分ですので、必然的にhx要素が入ってきます。
その場合は、article要素の中にheader要素を入れてhx要素を表示することも可能です。
またHTML5で追加されたtime要素で、article要素とtime要素が関係している場合は、pubdate属性を使用することで、article要素の発行日時を明示することができます。
追記:
pubdate属性は、2011-5-25の更新で削除されています。
以下のような場合には、article要素でマークアップしても良いかもしれません。
- 記事が自己完結している
- title要素とhx要素を一致させても問題ないか
- 発行日を入れられるか
- インタラクティブなウィジェットやガジェットとして扱えるか
- 著作者情報を入れられるか
hx要素を構造的に表示させるタグはsection要素以外にも、"セクショニング・コンテンツ"と呼ばれるカテゴリーで存在します。
しかし最初はarticle要素とsection要素に慣れてから、他のセクショニング・コンテンツを使用してセマンティックなHTMLを目指していった方が良いかもしれません。