Widely available すべての主要ブラウザで対応済み。安心して使用可能。

<header> and <footer>

<footer> は HTML の要素で、直近の区分コンテンツまたは区分化ルート要素のフッターを表します。 <footer> には通常、そのセクションの著者に関する情報、関連文書へのリンク、著作権情報等を含めます。

セクショニング

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<header>

は HTML の要素で、導入的なコンテンツ、ふつうは導入部やナビゲーション補助のグループを表します。見出し要素だけでなく、ロゴ、検索フォーム、著者名、その他の要素を含むこともできます。
5
12
4
5
18
4.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML 
<header>
  <h1>Site Name</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">Overview</a>
  </nav>
</header>
<footer>
  <p>© 2024 Site Name</p>
</footer>

ライブデモ

ページヘッダーとフッター

header と footer でページの上下を構造化。

プレビュー全画面表示

記事のヘッダー・フッター

article 内で header / footer を使いメタ情報を整理。

プレビュー全画面表示

カードのヘッダー・フッター

カードUIでの header / footer の活用。

プレビュー全画面表示

実務での使いどころ

  • <header> and <footer> の活用

    <footer> は HTML の要素で、直近の区分コンテンツまたは区分化ルート要素のフッターを表します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク