HTML

A semantic element used to display supplementary information or copyright at the end of a page or section.

footer 要素

<footer>要素とは？

HTMLの<footer>要素は、Webページ全体や各セクションの「終わりの部分（フッター）」を示すための、意味を持った（セマンティックな）要素です。これは、ただ見た目を整えるために使うのではなく、その位置がページやセクションの締めくくりであることを、ブラウザや検索エンジン、支援技術（たとえばスクリーンリーダー）に正しく伝えるためのものです。

この要素を使うことで、ページの構造が明確になり、検索エンジンに正しく内容を理解してもらえたり、視覚障害のあるユーザーがスクリーンリーダーでページを読み上げるときに、どこが終わりの部分なのかが分かりやすくなったりします。

<footer>要素は、ページ全体や個別のセクションの「フッター領域」を定義するために使います。その中には、たとえば以下のような情報を含めることがよくあります：

つまり、<footer>は単なるデザインではなく、「この情報はそのページやセクション全体に関わるまとめ情報です」といった意味を持たせる役割を担っています。

また、<footer>要素は1ページの中で何度使っても問題ありません。ただし、その使い方によって「どの範囲のフッターなのか」という意味が変わってくる点に注意が必要です。

たとえば、

<body>要素の中で直接<footer>を使った場合
それはページ全体のフッター情報になります。たとえばサイト全体の著作権表記や、全ページ共通のリンクなどに使います。
<article>要素や<section>要素の中で<footer>を使った場合
そのときの<footer>は、その記事やセクションに特有の情報（例：執筆者、投稿日、関連記事）をまとめた部分として扱われます。

このように、<footer>を使う場所によって「どの範囲に関するフッター情報なのか」が変わります。それぞれの文脈にふさわしい場所で使うようにしましょう。

初心者の方は特に、見た目の配置だけで<footer>を使ってしまいがちですが、大切なのは「意味のある場所に使う」という考え方です。Webページは人間だけでなく機械にも読まれていることを意識すると、正しい使い方が見えてきます。

<footer>の基本的な使い方

<footer>は、主にWebページの一番下に配置されます。以下のような内容を含むのが一般的です：

HTML

<footer>
	<p>© 2025 Yugien Inc. All rights reserved.</p>
	<nav>
		<a href="/privacy.html">プライバシーポリシー</a> |
		<a href="/terms.html">利用規約</a> |
		<a href="/contact.html">お問い合わせ</a>
	</nav>
</footer>

このように、<footer>内にはテキストやリンク、さらにはナビゲーション要素（<nav>）や画像などを自由に含めることができます。

<footer>の位置と使い分け

<footer>はページ全体だけでなく、セクションごとにも使用できます。

ページ全体の<footer>

ページの最後に、サイト全体に関わる情報をまとめるのが通例です。

HTML

<body>
	...
	<footer>
		サイト全体の情報
	</footer>
</body>

セクション内の<footer>

<article>や<section>などのセクション型要素の中でも<footer>は使えます。その場合は、そのセクションや記事に限定された補足情報（著者、投稿日など）を入れます。

HTML

<article>
	<h2>ニュースタイトル</h2>
	<p>記事本文...</p>
	<footer>
		<p>この記事は Yugien によって執筆されました（2025年6月6日）</p>
	</footer>
</article>

このように複数の<footer>要素が同一ページ内に存在しても問題ありません。各footerは「その直上のセクションまたはルート（body）」に属します。

<footer>は必ず「最後」に置く必要はない

<footer>要素は、構造上「セクションやページの終わりを示す」意味を持っていますが、必ずしもHTML文書の一番最後に置かなければならないという制約はありません。重要なのは、「どのコンテンツの補足情報か」が明確であることです。

つまり、該当するセクションや記事の流れの中で意味的に区切りがついていれば、その直後に<footer>を配置しても適切です。さらにその後に別のセクションを追加しても問題ありません。

実例：ブログ記事中での<footer>配置

次の例は、ブログ記事を表す<article>要素の中で、本文の直後に<footer>を置き、その後にコメントセクションを続けている構造です。

HTML

<article>
	<header>
		<!-- 記事のタイトルや著者など -->
	</header>

	<p>ここに記事本文が入ります。</p>

	<footer>
		<!-- 投稿日時、タグ、編集履歴などの補足情報 -->
	</footer>

	<section>
		<h2>コメント</h2>
		<article>...</article>
		<!-- コメントのリスト -->
	</section>
</article>

このように、<footer>要素は記事の補足情報を意味的に区切るために使われており、その後に配置されたコメントセクションとは論理的に別の役割を持っているため、構造的にも適切です。

理解のポイント

このように、HTMLの構造は「視覚的な順序」ではなく「論理的な関係性」を重視します。<footer>の位置についても、どのコンテンツを締めくくっているかを意識すれば、柔軟かつ適切なマークアップが可能になります。

<footer>とアクセシビリティ

スクリーンリーダーとの関係

支援技術は<footer>の意味を理解していますが、ランドマークナビゲーションの対象とするためには、<footer>にrole="contentinfo"を明示することで対応がより確実になります（ただし、最新の支援技術では省略可能）。

HTML

<footer role="contentinfo">
	...
</footer>

特に、複数の<footer>要素を使っている場合、ページ全体のfooterにはrole="contentinfo"を与え、他のfooterとの区別を明確にすることが望ましいです。

<footer>とSEO（検索エンジン最適化）

<footer>内のリンクは通常、SEOの評価対象になりますが、サイト全体の共通リンクや重複情報がある場合は、Googleが重視しないことがあります。以下の点を意識すると良いでしょう：

また、構造化データと組み合わせることで、検索エンジンに意味的に明示できます。

マイクロデータやJSON-LDによる意味づけ

<footer>内にある情報をマイクロデータや構造化データで補足することで、検索エンジンやAIによる理解が向上します。

例：マイクロデータによる組み込み

HTML

<footer itemscope itemtype="http://schema.org/Organization">
	<p>運営者：<span itemprop="name">Yugien Inc.</span></p>
	<p>連絡先：<a href="mailto:[email protected]" itemprop="email">[email protected]</a></p>
</footer>

このようにすることで、会社名やメールアドレスが構造化情報として認識されるようになります。

よくある誤解や注意点

実践ヒント：CSSで魅せるfooterデザイン

HTML構造だけでなく、CSSで魅力的なfooterを実現できます。

CSS

footer {
	background-color: #222;
	color: #fff;
	text-align: center;
	padding: 2rem 1rem;
	font-size: 0.9rem;
}
footer a {
	color: #ccc;
	text-decoration: none;
	margin: 0 0.5rem;
}
footer a:hover {
	color: #fff;
}

© 2025 Yugien Inc. All rights reserved.

まとめ