ヘッダーとフッター
HTML5には、セクションを表す要素の他にも、文書の構造を表す要素がいくつか追加されました。ここで紹介する新要素は、header要素、footer要素、hgroup要素です。
header要素とfooter要素は、名前の通り、ヘッダーやフッターを表します。しかし、ページのヘッダーやフッターだけでなく、ブログエントリーなどarticle要素で表されたコンテンツのヘッダーやフッターにも使えます。
hgroup要素は、見出しと副題をグループ化します。hgroup要素には、見出し要素（h1～h6要素）しか入れることはできません。見出しレベルが最も高い要素が見出しとなり、それ以外は副題という位置づけになります。
ヘッダーとフッターの利用例
では、ブログエントリーを想定したページをご覧頂きましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サイト名</title>
</head>
<body>
<!-- ページ・ヘッダー -->
<header>
<hgroup>
<h1>サイト名</h1>
<h2>サブタイトル</h2>
</hgroup>
<p>サイトの説明</p>
<nav>
<h2>サイト・ナビゲーション</h2>
<ul>
<li><a href="/">トップ</a></li>
<li><a href="/about/">運営者情報</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>
</header>
<!-- メイン・コンテンツ -->
<article>
<header>
<hgroup>
<h2>ブログ・エントリーのタイトル</h2>
<h3>ブログ・エントリーのサブタイトル</h3>
</hgroup>
</header>
<section>
<h3>見出し1</h3>
<p>本文</p>
</section>
<section>
<h3>見出し2</h3>
<p>本文</p>
</section>
</article>
<!-- サイトバー -->
<aside>
<h2>広告</h2>
<div>...</div>
</aside>
<!-- ページ・フッター -->
<footer>
<p><small>Copyright © 2010 Example.JP All Rights Reserved.</small></p>
</footer>
</body>
</html>
HTML4では、ヘッダー、フッター、見出しのグルーピングには、div要素を使わざるを得ませんでした。しかし、HTML5では、専用の要素を用意することで、HTMLの文書構造をはっきりと表すことができるようになったのです。
header要素、footer要素、hgroup要素のアウトラインへの影響
header要素、footer要素、hgroup要素はセクションを表すわけではありません。先ほどのHTMLがどのようなアウトラインを形成するのかを、HTML5 Outlinerを使って調べてみましょう。
ご覧の通り、header要素、footer要素、hgroup要素は文書構造を表す要素であるものの、アウトラインに全く影響を与えません。また、hgroup要素に入れられた見出しにも注目してください。
<hgroup> <h2>ブログ・エントリーのタイトル</h2> <h3>ブログ・エントリーのサブタイトル</h3> </hgroup>
hgroup要素には、h2要素とh3要素がマークアップされています。しかし、アウトラインには、h2要素で表された見出ししか現れません。h3要素で表された見出しは、あくまでも副題という位置づけで解釈されていることが分かります。
今回は、HTML5の文書構造を表す新要素の意味や使い方について解説しました。HTML5では、ウェブページの文書構造を機械的に把握しやすくなったのです。これにより、例えば、検索エンジンのロボットや、スクリーン・リーダーといったソフトウェアからも、適切にウェブページのコンテンツの構造を理解できるようになります。次回は、HTML4でも使われてきたものの、HTML5で再定義された要素や属性について解説します。
