タイトル: HTML5 footer 要素の使い方（フッター・コピーライト・連絡先）
SEOタイトル: HTML5 footer 要素の正しい使い方（複数配置可・SEO・ARIA role=contentinfo）
| この記事の要点 |
|
footer 要素とは
は HTML5 で導入されたセマンティック要素のひとつで、もっとも近い祖先のセクション要素（body / article / section / aside / nav）のフッター情報を表します。コピーライト、関連リンク、著者情報、連絡先などを入れます。
基本的な使い方（サイト全体のフッター）
サンプル
サイトタイトル
...
article 内の footer（記事の末尾）
記事末に著者・公開日・タグを入れる場合は article 内に footer を置きます。
HTML5 の新要素について
公開日:
本文...
footer に入れて良いもの・入れない方が良いもの
| OK | NG / 注意 |
|---|---|
| コピーライト表記 | 主要ナビゲーション（基本は header / nav に） |
| 関連リンク（プライバシー・利用規約） | 記事の本文（footer は補助情報） |
| 連絡先（address 要素を使う） | 大量の検索リンク群（nav にする） |
| 著者・公開日（article 内 footer） | サイト識別ロゴ（header 推奨） |
| SNS リンク | — |
複数の footer を置ける
HTML5 では footer はページに 1 つだけではありません。例えば次のように記事ごと、セクションごと、サイト全体に分けて置けます。
...
...
header との関係
footer は header と対になるセマンティック要素です。section の冒頭に header、末尾に footer を置くのが基本構造です。
- header: 見出し・導入・ナビゲーション
- main: ページ主要部
- footer: 末尾情報
main 要素との関係
main 要素は 1 ページに 1 つだけで、ページの本筋を表します。サイト全体のフッターはmain の外側（body 直下）に置きます。サイドバーやヘッダ、グローバルフッターは main に含めません。
ARIA role="contentinfo"
ブラウザは body 直下の footer に対して暗黙的に role="contentinfo" を割り当てます。スクリーンリーダーで「フッターランドマーク」としてジャンプ可能になります。明示しても OK ですが、1 ページに contentinfo は 1 つだけです。
連絡先は address 要素を併用
address は近接するセクションの連絡先を表す要素。一般的な住所表記には使わず、サイト運営者や記事著者の連絡先に使います。
SEO 上の意義
- セマンティックな構造化はクローラーが文脈を理解する手がかりになる
- サイトリンクの抽出や Structured Data の整備に貢献
- フッターに過剰なキーワード詰込みはスパム扱いの対象
- 運営者情報・連絡先は E-E-A-T（信頼性評価）に重要
スタイリングの定番
/* sticky footer（コンテンツが少なくても footer を画面下に） */
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
footer {
background: #1f2937;
color: #d1d5db;
padding: 2rem 1rem;
text-align: center;
}
footer a {
color: #93c5fd;
}よくある間違い
- footer = ページ下部全部の div と思い込む → セマンティクス重視で必要な要素だけ
- main の中にサイト全体 footer を入れる → main の外側に
- 1 ページに
role="contentinfo"を複数 → 1 つだけ - footer 内に article を置く → 主要コンテンツは main へ
FAQ
Q: