サイト内検索

footer 要素 アップデート版

この記事は、html5doctor に掲載されている記事「The Footer Element Update」を日本語訳したものです。この記事では、footer 要素の正しい使い方が解説されています。

一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。

footer 要素 アップデート版

これは、以前の記事をアップデートしたものです。footer は header と同じコンテンツ・モデルを含んでも良いと、仕様が変更されたためです。

アップデート

私が数ヶ月前にこの記事の前バージョンを書いたとき、きっとみんなもそうだったと思うが、この要素は、HTML5 仕様の完成に近づくにつれ、変更されることにだるだろうと、分かっていた。その問題とは単純なものだ。footer 要素は他の要素に比べて柔軟性が与えられていなかったのだ。'完成' されたとは言えるものではなかったのだ。しかし、今はもう、この要素は変更されたのだ

要約すると、footer 要素のコンテンツ・モデルは、headernav のようなセクショニング・コンテンツを入れても良いとされたのだ。要するに、今は、この要素は header 要素とまったく同じように機能するのだ。しかし、重要なことがある。footer 要素はセクショニング・コンテンツではないし、新たにセクションを導入することもないのだ。

もし、あなたがサイトを運営しており、このすばらしい新 footer を組み込みこむなら、あなたならどうやってこの要素を使うのかを、気軽にコメントに投稿して、他の読者に見せてほしい。

以下は、オリジナルの記事をアップデートしたものだ。

古い記事

これまで長いこと、私たちは、ウェブページの下部に <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><article> にも <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 でしてきたような間違いをしないようにしよう。

もっと読む