◀ 10.

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

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

footer 要素とは

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

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




  
  サンプル


  

    
サイトタイトル

    
  


  

    
...

article 内の footer（記事の末尾）

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

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

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

複数の footer を置ける

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


  

    

      ...
      
記事 1 のフッター（著者・タグ）

    


    

      ...
      
記事 2 のフッター

    

  


  
サイト全体のフッター（コピーライト）

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




  
© 2026 Example Inc.







  
...

連絡先は address 要素を併用


  

    お問い合わせ:
    contact@example.com

    〒100-0001 東京都千代田区サンプル町 1-2-3

    TEL: 03-xxxx-xxxx
  

  
© 2026 Example Inc.

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:

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

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

2026-06-11 02:43:48 guest 213

人気ページ

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