footer 要素
footer のコンテンツモデルは、header のコンテンツモデルと同様に、アップデートされた点に注意してほしい。そのため、footer の中に nav と heading を入れることができるようになった。詳細については、私の記事「The Footer Element Update」を読んでほしい。あわせて、tracking note も読んでほしい。
これまで長いこと、私たちは、ウェブページの下部に <div id="footer"> を見ることに慣れてきた。しかし、HTML5 を導入することで、さよならを言うときが来た。新たに追加された <footer> 要素を使えば、もう、より多くの自由や柔軟性を手に入れられるのだ。
仕様によると
footer 要素は、それが割り当てられるセクションに対するフッターを表します。フッターは通常は、そのセクションに関する情報を含みます。例えば、誰が書いたのかとか、関連のドキュメントへのリンクや、著作権データや、その類です。
はじめよう
新しい要素を詳しく見ていく前に、基本について触れて、この記事を読むにあたっての基礎を固めよう。前述の通り、ほとんどの人はフッターを次のようにレイアウトしてきただろう。
<div id="footer">
<ul>
<li>著作権</li>
<li>サイトマップ</li>
<li>お問い合わせ</li>
<li>トップへ</li>
</ul>
<div>
しかし、HTML5 で作ると、こうはならない。ご存じの通り、もう <div> 要素は不要だ。私たちのケースでは、フッターであれば、適切なマークアップは <footer> だろう。
<footer>
<ul>
<li>著作権</li>
<li>サイトマップ</li>
<li>お問い合わせ</li>
<li>トップへ</li>
</ul>
</footer>
最初の段落で説明した通り、もともと私たちのページでは <footer> 要素を 1 回しか使わなかった。しかし、新要素を使えば、もう、そうする必要はない。今はもう、<footer> 要素を何回でも使って良いし、追加の情報を表示するために使っても良いのだ。
footer 要素を使う
重要なポイントは、サイトに <footer> を 1 つしか使ってはいけないという制約はない、ということだ。いくつでもフッターを使うことができる。そのフッターは、ドキュメントのセクションに対する <footer> となる。それゆえに、こうすることもできる。
Section
<section>
ここにセクションのコンテンツが入る。
<footer>
セクションに対するフッター情報。
</footer>
</section>
Article
<article>
ここに記事が入る。
<footer>
記事に対するフッター情報
</footer>
</article>
article/section の中に <footer> を入れると、ページがかなり良くなる。この記事をスクロール・ダウンすると、ライト・グレーのテキストのセクションに気づくだろう。それは、"もっと読む" の後ろにある。トラックバックや返答やタグやカテゴリに関する情報を提供するこのグレーのテキストのセクションには、footer 要素を使っているのだ。
Footer
前述の通りだ。
別の考え方
もちろん、私は当初この要素のプレゼンテーショナルな名前に面食らった。私は、これをページの最後に使ったわけではない。記事の最後ですらない。しかし、間違いなく規定に沿っているはずだ。それは、そのセクションに関する情報だし、著者名も含んでいるし、関連のドキュメント（コメント）へのリンクや、その類もある。ページに 1 個しか footer を入れることができないなどという理由はまったくない。仕様の説明では、"footer 要素は、それが適用するセクションに対するフッターを表す" と言っている。ページには多くのセクションを入れることができる。この仕様は、"フッターは、通常は、セクションの最後に現れますが、必ずしもそうする必要はありません。" とも言っている。
Bruce Lawson – http://www.brucelawson.co.uk/2009/marking-up-a-blog-with-html-5-part-2/
結論
footer 要素は、ウェブページを定義する機会を与えてくれる。ウェブページに、受けるにふさわしい正しいセマンティックなマークアップを授けるのだ。しかし、これらの新たなタグを想定通りに使うことが重要だ。私たちが table や div でしてきたような間違いをしないようにしよう。