KOJIKA17

HTML5の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#hLv3h2#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を目指していった方が良いかもしれません。