◀ 9.

HTML header 要素の使い方（セクションのヘッダー / 複数配置 / nav header との関係）

▶
編集
この記事の要点
  • <header> はもっとも近いセクションのヘッダー部分を表す HTML5 のセクショニング関連要素
  • 最も近いセクショニング要素が body ならページ全体のヘッダーになる
  • ページ内に複数配置できる（article ごと、section ごとに置ける）
  • 中身にはロゴ / 見出し / ナビ / 検索フォーム / 著者情報などを入れることが多い
  • <header> の中に別の <header> や <footer> を入れることはできない

header 要素とは

<header> は HTML5 で導入されたセマンティック要素で、もっとも近いセクション（article / section / aside / nav / body）のヘッダー領域を表します。最も近いセクショニング要素が body の場合はページ全体のヘッダーとして機能します。

基本構文

<header>
  <h1>サイト名</h1>
  <p>キャッチコピー</p>
  <nav>
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/about">概要</a></li>
    </ul>
  </nav>
</header>

header に入れる典型的なコンテンツ

  • サイトロゴ / サイト名（多くの場合 <h1>）
  • キャッチコピー / リード文
  • ナビゲーション（<nav>）
  • 検索フォーム
  • 著者情報 / 公開日（記事の場合）
  • パンくずリスト

複数配置パターン

HTML5 では 1 ページに複数の <header> を置けます。それぞれの最寄りのセクショニング要素に従属します。

<body>
  <header>            <!-- ページ全体のヘッダー -->
    <h1>技術ブログ</h1>
    <nav>...</nav>
  </header>

  <main>
    <article>
      <header>        <!-- 記事のヘッダー -->
        <h2>HTML5 セマンティック要素まとめ</h2>
        <p>公開日: 2026-06-11 / 著者: Alice</p>
      </header>
      <p>本文...</p>
      <footer>        <!-- 記事のフッター -->
        <p>タグ: HTML, Web</p>
      </footer>
    </article>
  </main>
</body>

制約事項

  • <header> 内に別の <header> を入れ子にすることはできない
  • <header> 内に <footer> を入れることもできない
  • <header> 自体はセクショニング要素ではないため、独自のアウトラインを作らない

div との違い

項目<header><div class="header">
意味ヘッダーであることを明示意味なし（汎用コンテナ）
支援技術（スクリーンリーダー）「バナー」「ヘッダー」として読み上げ単なるグループ
SEO / アクセシビリティ有利中立
CSS / JS から要素セレクタで指定可クラス指定が必要

アクセシビリティ

body 直下の <header> は ARIA の role="banner" 相当として扱われ、スクリーンリーダーで「バナー」ランドマークとして認識されます。ページ全体のヘッダーは 1 つに絞るのがベストプラクティスです。

関連要素

要素役割
<header>セクションのヘッダー
<footer>セクションのフッター
<nav>主要なナビゲーション
<main>ページの主要コンテンツ（1 ページに 1 つ）
<article>独立した記事 / 投稿
<section>意味のあるまとまり
<aside>補足情報 / サイドバー

FAQ

Q: ヘッダー画像（hero）はどこに入れる？
A: ページ全体の印象を作る hero は <header> に含めるのが自然。ただし装飾だけなら CSS の背景画像にしても良い。

Q: h1 は <header> の中に入れるべき？
A: 必須ではないが、セマンティクス上は外より中のほうがすっきりする。ページの主見出しは main 側に置く流派もある。

Q: スクロール追従の固定ヘッダーは？
A: <header> 要素に position: sticky; top: 0; を適用するだけ。意味づけと表示は別レイヤなので問題ない。

関連記事

編集
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:29:05 guest 196

人気ページ

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