ウェブランサー

<footer> セクションのフッタとなるグループを表す

取り扱い HTML5から追加された要素
カテゴリ フロー・コンテント
パルパブル・コンテント
親にできる要素 フロー・コンテンツが期待される場所
子にできる要素 フロー・コンテンツ
対応ブラウザ <footer>の対応状況を確認する

<footer>タグの説明

<footer>は、自身が所属するセクションのフッタとなるグループを表します。よく使われる場所として、ウェブページ最下部にあたる</body>直前や、<article>の文末が挙げられます。

例えば、ウェブページ最下部に<div id="footer">のような領域を用意してコピーライトを記述していた場合、これを置き換えることができます。また、メインコンテンツが置かれたセクションの最後に<footer>を用いて、その文章の作者や著作権者を記載することができます。

<footer>は、ウェブページの最後や、セクションの最後に置かれるイメージがありますが、記述する場所や設置する位置に制限はありません。

<footer>タグの特徴

<footer>は、ページ内に複数使うことができます。この要素自体を入れ子構造にすることはできません。

この要素はセクショニングコンテントではないので、アウトラインに影響を与えません。

<footer>タグに指定できる属性

グローバル属性
基本的に全てのHTML要素に共通で指定できる属性です。
イベントハンドラ
基本的に全てのHTML要素に指定することができるコンテンツ属性です。

<footer>タグの使い方とサンプル

以下の例は、ページの最下部にサイト全体のフッターにあたる情報を記述したものです。

HTML
<body>
	<header>
		<h1>サイト名</h1>
		<h2>このサイトのキャッチコピー</h2>
		<nav>
			<ul>
				<li><a href="home">ホーム</a></li>
				<li><a href="blog">ブログ</a></li>
				<li><a href="contents">コンテンツ</a></li>
				<li><a href="sitemap">サイトマップ</a></li>
				<li><a href="contact">コンタクト</a></li>
			</ul>
		</nav>
	</header>

	<main>
		<section>
			<h1>コンテンツの見出し</h1>
			<p>コンテンツの内容。コンテンツの内容。</p>
			<p>コンテンツの内容。コンテンツの内容。</p>
		</section>
	</main>

	<footer>
		<small>コピーライト</small>
	</footer>
</body>

続いて、<article>の中に<footer>を用いて、メインコンテンツのフッターを明確化した場合のサンプルです。

HTML
<article>
	<header>
		<h1>コンテンツの見出し</h1>
	</header>

	<section>
		<h1>セクションの見出し</h1>
		<p>コンテンツの内容。コンテンツの内容。</p>
		<p>コンテンツの内容。コンテンツの内容。</p>
	</section>

	<section>
		<h1>セクションの見出し</h1>
		<p>コンテンツの内容。コンテンツの内容。</p>
		<p>コンテンツの内容。コンテンツの内容。</p>
	</section>

	<footer>
		<cite><a href="https://twitter.com/xxxxxx">著者</a></cite>
		<time datetime="2045-10-10" pubdate>2045年10月10日</time>
	</footer>
</article>

<footer>に関連するHTMLタグ

セクション要素
<address> 連絡先(問い合わせ先)として扱う
<article> 自己完結した記事であることを示す
<aside> 本筋から分離しても問題のない余談や補足を表す
<body> ページ本体の表示領域
<footer> セクションのフッターを表す
<h1> 〜 <h6> 見出しを指定する
<header> セクションの先頭となるグループを表す
<hgroup> 見出しをグループ化してセクションのヘッダを表す
<nav> ページ上の主要なナビゲーションであることを表す
<section> ウェブページ内の文章構造におけるセクションを定義する