◀ 10.

HTML5 footer 要素の正しい使い方（複数配置可・SEO・ARIA role=contentinfo）

▶
編集
この記事の要点
  • はページや記事の末尾情報をマークアップするセマンティック要素
  • コピーライト・連絡先・関連リンク・著者情報を入れるのが典型
  • 1 ページに複数配置可能。article 内に置けば記事フッターになる
  • header と対。main の外側、body 直下が「サイト全体のフッター」
  • ARIA role="contentinfo" はサイト全体フッターに 1 つだけ

footer 要素とは

は HTML5 で導入されたセマンティック要素のひとつで、もっとも近い祖先のセクション要素（body / article / section / aside / nav）のフッター情報を表します。コピーライト、関連リンク、著者情報、連絡先などを入れます。

基本的な使い方（サイト全体のフッター）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプル</title>
</head>
<body>
  <header>
    <h1>サイトタイトル</h1>
    <nav>...</nav>
  </header>

  <main>
    <article>...</article>
  </main>

  <footer>
    <p>© 2026 Example Inc. All rights reserved.</p>
    <ul>
      <li><a href="/privacy">プライバシーポリシー</a></li>
      <li><a href="/terms">利用規約</a></li>
      <li><a href="/contact">お問い合わせ</a></li>
    </ul>
    <address>contact@example.com</address>
  </footer>
</body>
</html>

article 内の footer（記事の末尾）

記事末に著者・公開日・タグを入れる場合は article 内に footer を置きます。

<article>
  <header>
    <h2>HTML5 の新要素について</h2>
    <p>公開日: <time datetime="2026-06-11">2026-06-11</time></p>
  </header>

  <p>本文...</p>

  <footer>
    <p>著者: <a href="/author/taro">山田太郎</a></p>
    <p>タグ:
      <a href="/tag/html5">#HTML5</a>
      <a href="/tag/semantics">#Semantics</a>
    </p>
  </footer>
</article>

footer に入れて良いもの・入れない方が良いもの

OKNG / 注意
コピーライト表記主要ナビゲーション（基本は header / nav に）
関連リンク（プライバシー・利用規約）記事の本文（footer は補助情報）
連絡先（address 要素を使う）大量の検索リンク群（nav にする）
著者・公開日（article 内 footer）サイト識別ロゴ（header 推奨）
SNS リンク—

複数の footer を置ける

HTML5 では footer はページに 1 つだけではありません。例えば次のように記事ごと、セクションごと、サイト全体に分けて置けます。

<body>
  <main>
    <article>
      ...
      <footer>記事 1 のフッター（著者・タグ）</footer>
    </article>

    <article>
      ...
      <footer>記事 2 のフッター</footer>
    </article>
  </main>

  <footer>サイト全体のフッター（コピーライト）</footer>
</body>

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 つだけです。

<!-- 明示する場合 -->
<footer role="contentinfo">
  <p>© 2026 Example Inc.</p>
</footer>

<!-- 記事内 footer には付けない -->
<article>
  <footer>...</footer>  <!-- role 不要 -->
</article>

連絡先は address 要素を併用

<footer>
  <address>
    お問い合わせ:
    <a href="mailto:contact@example.com">contact@example.com</a><br>
    〒100-0001 東京都千代田区サンプル町 1-2-3<br>
    TEL: 03-xxxx-xxxx
  </address>
  <p>© 2026 Example Inc.</p>
</footer>

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: <div class="footer"> でも見た目は同じ。違いは？
A: スクリーンリーダー・クローラー・将来のツールが意味を理解できるかが違います。SEO とアクセシビリティに優位。

Q: footer 内に nav は置ける？
A: 可能です。フッターナビゲーション（プライバシー / 利用規約 / サイトマップ）は <nav> でくくると更にセマンティック。

Q: footer の中の見出しは h1〜h6 どれ？
A: セクションの階層に合わせて。footer 内見出しは多くの場合 h2〜h3 が自然です。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. html要素
  2. head要素
  3. body要素
  4. title要素
  5. base要素
  6. meta要素
  7. div要素
  8. span要素
  9. header要素
  10. HTML5 footer 要素の使い方（フッター・コピーライト・連絡先）
  11. main要素
  12. address要素
2026-06-11 07:12:00 guest 213

人気ページ

最近更新/作成されたページ