HyperText Markup Language footer element.
footer要素は、ページまたはセクションのフッター領域を定義します。主に、そのセクションの著者情報や、関連ページへのリンク、著作権表記に使います。
footer要素はページの中で、何回使っても構いません。ただし、使う場所によって意味が変わってきます。body要素の直下で footer要素を使えば、ページ・フッターを表すことになります。また、ブログ記事など article要素の直下で footer要素を使えば、該当のブログ記事に関するフッター情報となります。それぞれの意味に適した場所で footer要素を使うようにしてください。
footer {
display: block;
}
ページ・フッターには、サイトナビゲーションや著作権表記などを入れる事が多いでしょう。このような場合は、次のようにマークアップする事ができます。
ページ・フッターのマークアップ例
<body>
:
:
:
<footer>
<ul>
<li><a href="" title="Home Page">Home Page</a></li>
<li><a href="http://jbbs.livedoor.jp/shop/2263/">Bulletin Board System</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="sitemap.html">Site Map</a></li>
</ul>
<p id="copyright">© Waste Of Time 2004-2011.</p>
</footer>
</body>
この例では、ブログ記事の一覧ページで、各記事ごとに footer要素を使って、該当記事の補足情報をマークアップしています。
セクション・フッターのマークアップ例
<article>
<header>
<h2><a href="foo.html">Canvasのアクセシビリティ</a></h2>
</header>
<p>先日の HTML5 3Days で「Canvas チュートリアル」を講演し...</p>
<div>
<p><a href="foo.html">続きを読む</a></p>
</div>
<footer>
<p><time datetime="2009-10-05T01:25:03+09:00">2009年10月5日</time> by YOU</p>
<p>カテゴリー : <a href="category/canvas/">Canvas</a> |
<a href="foo.html#comments">1件のコメント »</a></p>
</footer>
</article>
<article>
<header>
<h2><a href="bar.html">HTML5 3Days Tech Talk</a></h2>
</header>
<p>HTML5 3Days が終わりました。お越し頂いたみなさん、本当...</p>
<div>
<p><a href="bar.html">続きを読む</a></p>
</div>
<footer>
<p><time datetime="2009-10-04T00:48:43+09:00">2009年10月4日</time> by YOU</p>
<p>カテゴリー : <a href="category/infomation/">お知らせ</a> |
<a href="bar.html/#respond">コメントはまだありません »</a></p>
</footer>
</article>
通常、footer要素はページやセクションの最後に使う事が多いのですが、必ずしも最後で使わなければいけないわけではありません。該当のページやセクションの途中で footer要素を使っても構いません。
例えば、ブログ記事のフッター情報は記事コンテンツの後に来る事が多いと言えますが、さらにその後ろに、コメントの一覧をマークアップする事が可能です。
ブログ記事の footer要素の利用例
<article>
<header>
<!-- 記事ヘッダー情報 -->
</header>
<p>記事本文</p>
:
:
:
<footer>
<!-- 記事補足情報 -->
</footer>
<section>
<h2>コメント</h2>
<article>...</article>
:
:
:
</section>
</article>