← カテゴリ一覧に戻る

ヘッダー・フッター

header, footer

header と footer はページ全体だけでなく、article や section 内でもネストして使用できるセマンティック要素です。

デモ：ページレベルの header（ロゴ＋ナビ）

M
MyWebsite
… ページコンテンツ …

ページ全体の <header> は ARIA ランドマーク role="banner" として扱われます

デモ：article 内の header（ネストされたヘッダー）

Next.js 15 の新機能まとめ

著者: 山田 一郎··読了時間: 5分

Next.js 15 では React 19 のサポートが追加され、パフォーマンスが大幅に改善されました…

<article> 内の <header> と <footer> は role="banner" / role="contentinfo" にはなりません（ページ全体のみ適用）

デモ：ページレベルの footer（著作権情報）

… ページコンテンツ …

ページ全体の <footer> は ARIA ランドマーク role="contentinfo" として扱われます

コード例

<!DOCTYPE html>
<html lang="ja">
<body>

  <!-- ページレベルの header: role="banner" が自動付与 -->
  <header>
    <a href="/" aria-label="ホームへ">
      <img src="/logo.svg" alt="MyWebsite" width="120" />
    </a>
    <nav aria-label="メインナビゲーション">
      <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/articles">記事</a></li>
        <li><a href="/contact">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <!-- article内の header（role="banner" にはならない） -->
      <header>
        <h1>Next.js 15 の新機能まとめ</h1>
        <p>著者: 山田 一郎 · <time datetime="2024-11-01">2024年11月1日</time></p>
      </header>

      <p>本文…</p>

      <!-- article内の footer -->
      <footer>
        <p>タグ: Next.js, React</p>
      </footer>
    </article>
  </main>

  <!-- ページレベルの footer: role="contentinfo" が自動付与 -->
  <footer>
    <nav aria-label="フッターナビ">
      <a href="/privacy">プライバシーポリシー</a>
      <a href="/terms">利用規約</a>
    </nav>
    <small>© 2024 MyWebsite. All rights reserved.</small>
  </footer>

</body>
</html>

比較：header / footer vs div.header / div.footer

観点<header> / <footer><div class="header"> / <div class="footer">
セマンティクス✅ 意味を持つ❌ 意味なし（見た目のみ）
ARIA ランドマーク✅ 自動付与（ページ直下のみ）❌ 手動で role 属性が必要
スクリーンリーダー✅ ジャンプ先として認識❌ 認識されない
SEO✅ 構造を検索エンジンに伝える△ 伝わりにくい
ネスト✅ article/section 内にも使える✅ どこにでも使える

TipsARIA ランドマーク役割はページ直下の場合のみ

  • <body> の直接の子（または <main> 外）にある <header> は role="banner" として扱われる
  • <article> や <section> 内の <header> は単なるグループ化要素
  • 1ページに複数の <footer> があっても問題ない（各 article に footer を持てる）
  • ページ全体の footer は1つのみが推奨（role="contentinfo" は1ページに1つが原則）

🤖 AIプロンプトテンプレート

以下の要件を満たす、セマンティックHTMLレイアウトのHTML・CSSサンプルを作成してください。

- `<header>` / `<main>` / `<footer>` / `<nav>` / `<aside>` を適切に組み合わせること
- `<nav>` はサイトナビゲーションに使い、`aria-label` で役割を明示すること
- `<main>` は1ページに1つだけ配置し、主要コンテンツを囲むこと
- `<header>` と `<footer>` はページ全体とセクション内の両方で使える例を示すこと
- Flexbox または CSS Grid でヘッダー・メイン・フッターの基本レイアウトを実装すること

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo