<footer></footer>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / パルパブル・コンテンツ
利用場所 フロー・コンテンツが置ける場所
内容 フロー・コンテンツ(ただし、header要素、footer要素、main要素は含められない / HTML 5.1では若干異なります 本文参照

footer要素は、文書、またはセクションのフッタを表します。


<footer>

フッタを表します

</footer>

footer要素の内容には、セクション(または文書全体)に関する情報を配置します。具体的には、次のような内容を配置することになります。

  • 著作者
  • 連絡先
  • 著作権
  • 発行日時(文書や記事の発行日時)
  • 関連文書へのリンク
  • 戻るリンク(前のページ、ページの先頭)

配置場所について

この要素をbody要素の子要素として配置した場合は、文書全体のフッタを表すことになります。

<body>

<h1>文書のタイトル</h1>

<p>文書の内容 ...</p>

...

<footer>

<ul>
<li><a href="rule.html">ご利用について</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>

<address>
山田 太郎(info@example.com)
</address>

<p><small>(c) 2011 TAG index.</small></p>

</footer>

</body>

セクション内に配置した場合は、そのセクションのフッタを表します。例えば、article要素の子要素として配置した場合は、その記事に対するフッタを表すことになります。

<article>

<h2>記事のタイトル</h2>

<p>記事の内容 ...</p>

...

<footer>

<p><time datetime="2011-11-22">平成23年11月22日</time></p>
<p><a href="#top">▲目次に戻る</a></p>

</footer>

</article>

フッタはセクション(または文書)の末尾に配置されるのが一般的ですが、必ずしもそうする必要はありません。次のように、セクションの冒頭に配置することもできます。

<h1>掲示板</h1>

<article>

<footer>
<p>投稿者:山田さん</p>
<p>[<time datetime="2011-11-18T12:35:50+09:00">2011/11/18 12:35</time>]</p>
</footer>

<p>こんにちは!初めての書き込みです。 ...</p>

</article>

...

また、1つのセクション内に複数のフッタを配置することも可能です。例えば、次のように文書の最初と最後に配置することもできます。

<body>

<footer>
<p><a href="index.html">目次に戻る</a></p>
</footer>

<h1>文書のタイトル</h1>

<p>文書の内容 ...</p>

...

<footer>
<p><a href="index.html">目次に戻る</a></p>
</footer>

</body>

セクションについて

footer要素はセクショニング・コンテンツではないため、新たなセクションを生成しません(アウトラインに影響しません)。

要素の内容に関して

HTML5ではfooter要素内に別のfooter要素やheader要素を含められませんが、HTML 5.1ではfooter要素内にセクショニング・コンテンツを配置している場合に限り、そのセクショニング・コンテンツの内容としてheader要素およびfooter要素を配置できるようになりました。

HTML 5.1における変更点
  • 条件付きとなりますが、footer要素の内容に別のfooter要素およびheader要素を配置できるようになりました。

使用例

文書全体と各記事に対してフッタを配置した例

<!DOCTYPE html>
<html>
<head>

<title>私のブログ</title>

</head>
<body>

<h1>私のブログ</h1>


<article>

<h2>記事のタイトル</h2>

<p>記事の内容 ...</p>

<footer>
<p><a href="entry-23.html">続きを見る</a></p>
</footer>

</article>


<article>

<h2>記事のタイトル</h2>

<p>記事の内容 ...</p>

<footer>
<p><a href="entry-22.html">続きを見る</a></p>
</footer>

</article>


<footer>

<address>
山田 太郎(info@example.com)
</address>

<p><small>(c) 2011 私のブログ.</small></p>

</footer>

</body>
</html>