footer要素

footer要素は、ドキュメントやセクションのフッターであることを示す要素。

カテゴリー フロー・コンテンツ。パルパブル・コンテンツ。
コンテキスト フロー・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル フロー・コンテンツを内包できる。
ただし、header要素、footer要素を子孫要素に持つことはできない。
属性 グローバル属性。
ブラウザ対応

要点

  • footer要素は、フッターであることを示す要素である。
  • footer要素内には、ドキュメント（文書）やセクションの著作権データ、作者、日時などを配置する。
  • footer要素は、ドキュメントやセクションの末尾に配置することが多いが、必須でなはい。先頭に配置しても構わない。
  • １つのドキュメントや１つのセクション内に、複数のfooter要素を配置しても構わない。
  • footer要素は、セクショニング・コンテンツではない。新たなセクションを区画することはない。
  • footer要素は、HTML5にて新たに導入された要素である。

フッターに含める主な内容

footer要素内に配置する具体的な例。

  • 著作権データ
  • 作者
  • 日時
  • 関連ドキュメントへのリンク
  • 付録
  • 索引
  • 連絡先

サンプルコード

<footer>
	フッター。
</footer>

サンプル

HTMLソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
</head>
<body>
	<header>
		<h1>ページタイトル</h1>
		<p>ページの概要。</p>
		<nav>グローバルナビゲーション</nav>
	</header>
	<article id="top">
		<header>
			<h2>記事タイトル</h2>
			<p>記事の概要。</p>
		</header>
		<footer>
			<p>記事セクションのフッター１。</p>
			<p>記事投稿日時</p>
		</footer>
		<section>
			<header>
				<h3>セクションの見出し</h3>
				<p>セクションの概要。</p>
			</header>
			<p>記事の内容。</p>
			<p>...</p>
		</section>
		<footer>
			<p>記事セクションのフッター２。</p>
			<p><a href="#top">この記事の先頭へ</a></p>
		</footer>
	</article> 
	<footer>
		<p>ドキュメントのフッター。</p>
		<p>(C) 2014 作者</p>
	</footer>
</body>
</html>

実際の表示