HTML 5では、ヘッダやセクションに関する要素がいくつか追加され、文書の構造をより明確にすることができるようになった。

ここで用いている「セクション」という言葉は、HTML文書を論理的に分割した単位のことである。1つの読み物における章や節などはセクションと言えるし、ブログサイトにおけるナビゲーションメニューと記事本体、記事に対するコメントなどもそれぞれ異なるセクションであると言えるだろう。

HTML 5から追加された、セクション関連のタグは以下の通りだ。

  • article …「記事」を表す。ブログサイトにおける個々のエントリのように、内容が単体で完結しているセクションを表す。articleが入れ子になっている場合、内側のarticleは外側のarticleと本質的に関連しているものだと考える
  • aside … このタグが記述された部分の外側の要素に対する、補足的な説明を表す。このタグは、セクション全体の内容に対する補足説明として用いる。
  • nav … Webサイトのナビゲーションリンクを配置するためのセクション。サイト内のページの中でも、とくに主要なページへのリンクを含めるのが適切
  • section … 上記のどれにも属さない、汎用的なセクション。文書で言えば「章」や「節」、Webアプリケーションで言えばタブで分割されたUIやダイアログなどを表すのに適切だ。CSSを用いたスタイルの適用を目的とした「コンテナ」的な用途にこの要素を用いるのは適切ではない。そういう場合はdivを使用するべきだ。目安としてはWebサイトの「アウトライン」を考えたときに、そこに含まれるかどうかでsectionとdivを使い分ければよいだろう

上記のタグはすべて「セクション」を生成する。またbody、blockquote、td、datagrid、 figureといったタグもセクションを生成するが、これらのタグは「セクションのルート」と呼ばれる。これらのタグの内部で構成されたセクション構造は、外側のセクション構造に影響を与えない。

以下のタグはセクション内で利用され、セクションの論理構造や付加情報を表す。

  • header … セクションのヘッダ
  • footer … セクションのフッタ
  • address … article/bodyに関する問い合わせ先アドレス

また、従来からあるh1、h2、…などのタグは、「セクションの見出し」を表す要素としてHTML5でも利用できる。見出しに関する要素で、新しく追加されたのが以下のタグだ。

  • hgroup … 複数の見出しをひとまとまりにする

アウトライン

上記のタグを用いてマークアップを行うことで、(HTML 4で行っていたような)divを多用したドキュメントよりも、文書の構造を明確化することができる。さらに文書構造の「アウトライン」を意識すれば、より人間にとってもプログラムにとっても理解しやすい文書構造を構築することが可能だ。

「アウトライン」とは、平たく言えばセクションの入れ子構造である。各セクションには見出し要素(h1 - h6)を用いてセクションタイトルを指定することができる。文書から目次を作成した場合、セクションの見出しが目次の各項目になり、アウトラインを視覚化できると考えればよい。

マークアップによって生成される文書のアウトラインを意識するためには、セクションが「明示的なセクション」と「暗黙的なセクション」から成ることを理解する必要がある。

明示的なセクション

明示的なセクションは、上記のsectionなどのタグを用いて明示的に生成したものだ。セクション内で見出し(h1 - h6、hgroup)を用いると、それはそのセクションの見出しとして取り扱われる。以下が明示的なセクションの例だ。 

<body>
  <h1>bodyで作られたセクションの見出し</h1>
  <p>セクション1の本文</p>
  <section>
    <h2>sectionで作られたセクションの見出し</h2>
    <p>セクション2の本文</p>
  </section>
</body>

暗黙的なセクション

暗黙的なセクションは、見出し(h1 - h6、hgroup)を記述することで自動的に生成されるセクションだ。セクション本文中に見出しが現れると、暗黙的なセクションが生成され、そのセクションの見出しとして扱われる。つまり、h1など見出しを表すタグは、常に何らかのセクションの見出しを表しているということだ。

以下の例は、明示的なセクションの例と同じセクション構成を表す。ただし、明示的にセクションを指定した方が理解しやすいのは言うまでもない。 

<body>
  <h1>bodyで作られたセクションの見出し</h1>
  <p>セクション1の本文</p>
  <!-- 下のh2タグにより暗黙的なセクションが生成される -->
  <h2>sectionで作られたセクションの見出し</h2>
  <p>セクション2の本文</p>
</body>

見出しのランク

見出しにはそれぞれランクがあり、h1が最高ランク、h6が最低ランクだ。暗黙的なセクションの生成には次のようなルールがあり、ランクによって動作が変化するので注意が必要だ。

  • 新たに指定された見出しが、直近で指定された見出しよりもランクが低い場合は、サブセクションが新しく生成される
  • 新たに指定された見出しが、直近で指定された見出しとランクが同じ、もしくは高い場合は、現在のセクションが終わり、新しいセクションが生成される

前者は、1つ前の「暗黙的なセクション」で示した例と同様。後者は混乱を招きやすい。たとえば以下のようなマークアップがあるとする。 

<body>
  <section>
    <h2>sectionで作られたセクションの見出し</h2>
    <p>セクション2の本文</p>
    <!-- 上の見出しよりもランクが高い -->
    <h1>これはセクション3の見出し</h1>
    <p>セクション3の本文</p>
  </section>
</body>

上のマークアップを明示的なセクション指定で書き直すと、以下のようになる。 

<body>
  <section>
    <h2>sectionで作られたセクションの見出し</h2>
    <p>セクション2の本文</p>
  </section>
  <section>
    <h1>これはセクション3の見出し</h1>
    <p>セクション3の本文</p>
  </section>
</body>

暗黙的なセクション生成では、DOMの構造とは異なるアウトラインが生成されてしまうというわけだ。混乱を招きやすいので、見出しを使用する際には常にセクションを明示的に指定したほうが無難だろう。

セクションが異なれば同じランクの見出しを使用できる

また、同じランクの見出しを異なるセクションで用いてもよい。たとえば、外側のセクションと内側のセクションのどちらでもh1を使っても問題はない。これにより、セクションごとに独立して見出しを設計できるため、以下のような「サイト全体の見出し」と「記事の見出し」のどちらも必要な場合などに便利だ。 

<body>
  <h1>サイト全体の見出し</h1>
  <article>
    <header>
      <hgroup>
        <h1>記事の見出し</h1>
        <h2>記事のサブ見出し</h2>
      </hgroup>
      <p>記事本文</p>
    </header>
  </article>
</body>

どうマークアップすればいいのか?

以上の点を踏まえて、セクションを意識したマークアップをどのように行っていけばいいかを考えてみよう。以下の画像に示すような、記事とそれに対するコメントがメインのコンテンツとなるサイトを例にあげて検討する。

この画面を、以下のような指針でマークアップしてみた。

  • 画面上部の見出しやナビゲーションメニューは、サイトのヘッダとしてheader要素に格納する。
  • ナビゲーションメニューはnav要素で表現する。
  • 画面下部のコピーライト表示は、footer要素に格納する。
  • メインのコンテンツ部分はarticle要素で実現する。
  • 記事に対するコメントは、入れ子になったarticle要素で実現する。

以下が、上の指針に沿って行ったマークアップの例である。 

<!DOCTYPE html>
<html>
<head>
  <title>セクション要素を用いたマークアップのサンプル</title>
  <meta charset="UTF-8">
</head>
<body>
  <!-- サイトヘッダ -->
  <header>
    <h1>サイト見出し</h1>
    <nav>
      <ul>
        <li><a href="top.html">トップ</a></li>
        <li><a href="help.html">ヘルプ</a></li>
      </ul>
    </nav>
  </header>
  <!-- 記事本文 -->
  <article>
    <hgroup>
      <h1>記事見出し</h1>
      <h2>記事サブ見出し</h2>
    </hgroup>
    <p>記事本文</p>
    <!-- 記事に対するコメント -->
    <section class="comments">
      <article>
        <h1>コメント1見出し</h1>
        <p>コメント1本文</p>
      </article>
    </section>
  </article>
  <!-- サイトフッタ -->
  <footer>
    <small>Copyright SomeCompany Inc.</small>
  </footer>
</body>
</html>

基本的なマークアップとしてはこんなところではないだろうか。あとは、これに必要なdivなどを追加してCSSで見た目を整えるだけだ。

補足 - 新要素を利用するためのTIPS

なお、こうしたブラウザが知らない新しいタグを用いてマークアップを行い、CSSを施して表示させるには、ちょっとした小技が必要だ。

まず、すべてのブラウザで以下のタグがブロックレベル要素として解釈されるよう、CSSを用いて以下のように宣言する。

/* HTML5の新要素をブロックレベル要素として宣言 */
article, aside, dialog, figure, footer, header, legend, nav, section {
  display: block;
}

またInternet Explorerは、未知の要素に対してはCSSがうまく機能しない。これを解決するには、新しい要素に対してdocument.createElement("要素名")を呼んでおくと、以降は既知の要素としてIEが取り扱ってくれるようになる。以下のコードをscriptタグに記述するとよい。

// IEでのみ実行されるよう、条件付きコンパイルを行う
//（http://msdn.microsoft.com/ja-jp/library/eb0w91wa%28VS.80%29.aspx）
/*@cc_on
(function() {
var newElements =
    ["article","aside","footer","header",
     "hgroup","nav","section","figure","source",
     "video","audio","canvas","output","details",
     "menu","bb","command","datagrid","datalist",
     "dialog","progress","meter","time","mark"];
for (var i = 0; i < newElements.length; i++)
  document.createElement(newElements[i]);
})();
@*/