この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:7
ページ更新者:guest
更新日時:2026-06-11 07:12:00

タイトル: HTML5 footer 要素の使い方（フッター・コピーライト・連絡先）
SEOタイトル: 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>&copy; 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=&quot;contentinfo&quot; を割り当てます。スクリーンリーダーで「フッターランドマーク」としてジャンプ可能になります。明示しても OK ですが、1 ページに contentinfo は 1 つだけです。

<!-- 明示する場合 -->
<footer role="contentinfo">
  <p>&copy; 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>&copy; 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=&quot;contentinfo&quot; を複数 → 1 つだけ
  • footer 内に article を置く → 主要コンテンツは main へ

FAQ

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

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

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