html5から新しく採用された要素にheader要素とfooter要素があります。

これら2つの要素は、しばしばウェブページ全体のヘッダーとフッターというこれまでdiv要素で区分してきた部分を置き換えるものだという話を聞きます。私自身もそう考えていたのですが、今回改めて仕様書を見てみたところ、どうもそういう単純な話ではないようです。

自分用のメモ、という意味も込めて、ここで改めてheader要素とfooter要素について、整理しておきたいと思います。

header要素

まずheader要素です。html5のワーキングドラフトには以下のように書かれています。

The header element represents a group of introductory or navigational aids.（header要素は導入部ないしナビゲーションの補助を表します。）

Note:A header element is intended to usually contain the section’s heading (an h1-h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.（註: header要素は通常section要素の見出し（hx要素かhgroup要素）を含むことを想定されています。しかしこれは必須ではありません。header要素はセクションの目次、検索フォーム、あるいは関連するロゴを囲むためにも使えます。）

footer要素

一方で、footer要素は以下のように記述されています。

The footer element represents a footer for its nearest ancestor sectioning content. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.（footer要素は直近の祖先であるセクショニング・コンテントのフッターを表現します。フッターは普通、誰が書いたのか、関連文書へのリンク集、著作権データやその種の情報といったようなそのセクションに関する情報を含みます。）

Note:Contact information belongs in an address element, possibly itself inside a footer.（註: 連絡先情報はaddress要素に属します。（address要素）それ自体がフッターに置かれている可能性もあります。）

このようにheader要素もfooter要素も共にセクショニング・コンテント（article要素、nav要素、aside要素、section要素等見出しやフッターを表す範囲を決めるHTML要素のこと）を補助する役割を持っています。つまり、これらの要素は以下のような使い方になるでしょう。

<article>
	<header>
		<h1><code>header</code>要素</h1>
	</header>
	<p>html5から新しく採用された要素に<code>header</code>要素があります。(...)</p>
	<footer>
		<p>記事の投稿: Tyto</p>
	</footer>
</article>

2つの要素はセクショニング・コンテントを含まない

注意するべきはheader要素に関しても、footer要素に関しても、それ自体がセクションを含むべきではないとされていることです。

The header element is not sectioning content; it doesn’t introduce a new section.（header要素はセクショニング・コンテントではありません。つまりそれは新しいセクションを導入しません。）

The footer element is inappropriate for containing entire sections. For appendices, indexes, long colophons, verbose license agreements, and other such content which needs sectioning with headings and so forth, regular section elements should be used, not a footer.（footer要素はセクション全体を囲むには適当ではありません。見出しや付属書、索引、奥付、詳細なライセンス合意及び見出しを伴うセクショニングが必要なその種のその他のコンテントに関しては、footer要素ではなく通常のsection要素が用いられるべきです。）

ですから、よくhtml4あるいはxhtml1からhtml5に移行するに当たって、ページの区分上のdiv要素のid="header"属性や同じくid="footer"属性の代わりにheader要素やfooter要素を使うことができるという話を聞くわけですが、必ずしもそういうわけではなさそうです。ページ全体のヘッダーやフッターにheader要素やfooter要素を用いる場合は、このことに気をつける必要がありますね。

ということで、現在のSEOモードでのhtml5の使い方も「適当ではない」ということになります。私はページ全体のヘッダーとフッターにheader要素とfooter要素を用い、その中にnav要素で囲ったul要素を置いているわけですが、ここでnav要素は使えないということです。

nav要素でなくても、header要素やfooter要素は広告を配置したり、RSS情報を読み込んだりと、article要素やaside要素といったセクショニング・コンテントを含みたくなることは十分に考えられます。結果的にはfooter要素はdiv要素のid=”footer”に代わるものではないということは覚えておいたほうがよさそうです。

追記（2009年10月06日）

この記事を投稿後、html5.jpの羽田野氏からご指摘をいただきましたので、追記として記事の修正をいたします。

ご指摘いただいたのは上述したheader要素の「header要素はセクショニング・コンテントではありません。つまりそれは新しいセクションを導入しません。」という箇所についてで、この記述は「セクションを入れてはいけないという意味ではなく、アウトラインアルゴリズムにおいて、アウトラインレベルを落とすことはない」という意味でとらえることができるということです。

確かにW3C Working Draftでもheader要素内でnav要素を使ったサンプルが掲載されており、そこから考えると、header要素に関してはセクショニング・コンテントを入れてはいけないという意味ではなく、アウトライン・アルゴリズムとの関係で解釈したほうがすっきりするようです。つまり、header要素内にnav要素を使用することには問題がないということです。

一方でfooterに関してはnav要素を含むことがやはり現時点では不適切です。header要素とfooter要素のこの辺りの違いも、html5を採用する際には明確に意識しておく必要がありますよね。

いずれにせよ、html5に関してもっと勉強しなくてはいけないなと改めて思いました。こちらに来られている皆さんにもご迷惑をおかけしました。今後、より良い記事を書けるよう頑張ります。

さらに追記（2009年10月11日）

さらに追記です。この記事の投稿後、W3C Editor’s Draftのfooter要素の説明に変更が加えられました。

The footer element is inappropriate for containing entire sections. For appendices, indexes, long colophons, verbose license agreements, and other such content which needs sectioning with headings and so forth, regular section elements should be used, not a footer.（footer要素はセクション全体を囲むには適当ではありません。見出しや付属書、索引、奥付、詳細なライセンス合意及び見出しを伴うセクショニングが必要なその種のその他のコンテントに関しては、footer要素ではなく通常のsection要素が用いられるべきです。）

上記のように書かれていた記述が、以下のようにheader要素の説明と同じものに変更されました。

The footer element is not sectioning content; it doesn’t introduce a new section.（footer要素はセクショニング・コンテントではありません。つまりそれは新しいセクションを導入しません。）

これにより、footer要素内でもnav要素を使えるようになるはずです。同ページにはサンプルとしてfooter要素の中にnav要素を使うサイト全体にかかるfooter（site-wide footer）のサンプルが掲載されています。

『HTML5のheader要素とfooter要素はdiv要素の代わりではない』というタイトルがこれによって少し浮いてしまうことになりますが、HTML5はまだ策定中のものであり、こうした変化は今後も起きると思われます。

HTML5での方向性としてはheader要素やfooter要素をやはりdiv要素に代替するものと、いう方向で動いているようです。ただし、やはりそのまま置き換えるわけにもいかず色々な調整が行われているように思います。今後も変化がある可能性もありますし、W3Cの動きにも注目していきたいと思います。