＜footer要素＞ - フッター

公開日: 2017/02/09

footer要素はフッターを表す要素です。コンテンツの著者、関連リンク、ライセンスなどの情報をまとめます。見出し、概要などの案内はheader要素に含めて下さい。

概要

名前

footer

カテゴリー

Flow content

Palpable content

配置できる場所

Flow contentが期待される場所。

コンテンツモデル

Flow content。ただし、header要素、footer要素、main要素の祖先になってはいけない。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLElement

デフォルトのスタイル

footer {
	display: block;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-footer-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

適用される範囲

footer要素は、最も近い祖先であるSectioning contentの要素(body要素、article要素、section要素など)に紐付きます。次の例では、footer要素はarticle要素に紐づくため、footer要素の内容はarticle要素全体の情報だとユーザーエージェントが解釈します。

HTML

<article>
	<section>
		<h2>1章</h2>
	</section>

	<section>
		<h2>2章</h2>
	</section>

	<!-- A氏は1章、2章の著者 -->
	<footer>
		<p>著者: A氏</p>
	</footer>
</article>

例えば、章ごとに著者が違う場合は次のようにマークアップすれば、footer要素の適用をsection要素の範囲に限定できます。

HTML

<article>
	<!-- A氏は1章の著者 -->
	<section>
		<h2>1章</h2>
		<footer>
			<p>著者: A氏</p>
		</footer>
	</section>

	<section>
		<h2>2章</h2>
	</section>

</article>

body要素に紐づければ、ページ全体の情報にできます。下記のfooter要素は、サイト全体の運営者情報になるでしょう。

HTML

<body>
<p>SYNCER</p>
	<article>
		<h1>〜の記事</h1>
		<section>
			<h1>1章</h1>
		</section>
		<section>
			<h1>2章</h1>
		</section>
	</article>

	<!-- A氏はページ全体の著者 -->
	<footer>
		<p>著者: A氏</p>
	</footer>
</body>

配置する場所

footer要素はセクションの最後に配置するのが一般的ですが、制約はないので最初に配置しても問題ありません。例えば、ブログエントリのコメント一覧は、デザインによっては次のようにマークアップできます。

HTML

<!-- コメント1 -->
<article>
	<footer>
		<p>投稿者: Aさん</p>
	</footer>
	<header>
		<p>投稿日時: 2017/08/09 21:21</p>
	</header>
	<p>この記事は素晴らしかった！感動した！</p>
</article>

<!-- コメント2 -->
<article>
	<footer>
		<p>投稿者: Bさん</p>
	</footer>
	<header>
		<p>投稿日時: 2017/08/21 21:21</p>
	</header>
	<p>参考になりました！</p>
</article>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜footer要素＞ - フッター</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/footer/">
		<style>
			body {
				background-color: #fff ;
			}

			footer {
				background-color: #ffeeff ;
			}
		</style>
	</head>
	<body>

<p>footer要素には、著者、関連リンク、ライセンスなどの補足情報を含めましょう。</p>

<article>
	<header>
		<h1>the pillows</h1>
		<p>the pillowsは3人組のロックバンドである。</p>
	</header>
	<section>
		<h2>私がthe pillowsを好きな理由</h2>
		<p>私がthe pillowsを好きになったのは25歳くらいの時だ。きっかけはMr.Childrenがカバーした…。</p>
	</section>
	<footer>
		<p>投稿者: A氏</p>
		<p>ライセンス: CC0</p>
	</footer>
</article>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/583/"> <meta charset="utf-8"> <title>【デモ】＜footer要素＞ - フッター</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/footer/"> </head> <body>

<p>footer要素には、著者、関連リンク、ライセンスなどの補足情報を含めましょう。</p> <article> <header> <h1>the pillows</h1> <p>the pillowsは3人組のロックバンドである。</p> </header> <section> <h2>私がthe pillowsを好きな理由</h2> <p>私がthe pillowsを好きになったのは25歳くらいの時だ。きっかけはMr.Childrenがカバーした…。</p> </section> <footer> <p>投稿者: A氏</p> <p>ライセンス: CC0</p> </footer> </article>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; } footer { background-color: #ffeeff ; }

</style>

</script>