<footer></footer>
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | フロー・コンテンツ / パルパブル・コンテンツ |
| 利用場所 | フロー・コンテンツが置ける場所 |
| 内容 | フロー・コンテンツ（ただし、header要素とfooter要素は含められない |
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) 2021 TAG index.</small></p>
</footer>
</body>
セクション内に配置した場合は、そのセクションのフッタを表します。例えば、article要素の子要素として配置した場合は、その記事に対するフッタを表すことになります。
<article>
<h2>記事のタイトル</h2>
<p>記事の内容 ...</p>
...
<footer>
<p><time datetime="2021-12-19">令和3年12月19日</time></p>
<p><a href="#top">▲目次に戻る</a></p>
</footer>
</article>
フッタはセクション（または文書）の末尾に配置されるのが一般的ですが、必ずしもそうする必要はありません。footer要素は意味的にフッタを表すものなので、次のようにセクションの冒頭に配置することもできます。
<h1>掲示板</h1>
<article>
<footer>
<p>投稿者：山田さん</p>
<p>［<time datetime="2021-12-19T12:35:50+09:00">2021/12/19 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要素はセクショニング・コンテンツではないため、新たなセクションを生成しません。
- 旧HTMLからの変更点
-
- HTML5：footer要素が定義されました。
- HTML5.1：条件付きで、footer要素の内容に別のfooter要素およびheader要素を配置できるようになりました。
- HTML LS：仕様書から上記（5.1）の内容が削除されました。現行の仕様では、header要素とfooter要素は含められない（意訳）とだけ書かれています。
使用例
<!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) 2021 私のブログ.</small></p>
</footer>
</body>
</html>