タイトル: header要素
SEOタイトル: HTML header 要素の使い方（セクションのヘッダー / 複数配置 / nav header との関係）
| この記事の要点 |
|
header 要素とは
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 との違い
| 項目 | ||
|---|---|---|
| 意味 | ヘッダーであることを明示 | 意味なし（汎用コンテナ） |
| 支援技術（スクリーンリーダー） | 「バナー」「ヘッダー」として読み上げ | 単なるグループ |
| 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; を適用するだけ。意味づけと表示は別レイヤなので問題ない。