HTML REFERENCE
レイアウト・構造
ー セクションやページの導入部・見出し領域を表すセマンティック要素
<header> 要素は HTML5 で導入されたセマンティック要素で、「導入的なコンテンツのグループ」または「ナビゲーション補助のコンテンツ」を表します。最も一般的な使い方はページ全体のヘッダー（サイトロゴ、グローバルナビゲーション、検索フォームなど）ですが、それだけが用途ではありません。<article> や <section> の冒頭にも <header> を置くことができ、その場合は「その記事・セクションの見出し領域」という意味になります。
HTML5 以前は <div id="header"> や <div class="top"> のような表現が主流でしたが、<header> によって意味のあるマークアップが可能になりました。ページ全体の <header> はランドマークロール banner として扱われるため、スクリーンリーダーユーザーがページの主要ナビゲーションへ素早くアクセスできるようになります。
よくある誤解として「<head> と <header> は似ている」と思われることがありますが、<head> はブラウザへのメタ情報（title・meta・link など）を格納する非表示の要素であり、<header> はページに実際に表示されるコンテンツの導入部を表す全く別の要素です。両者は役割も配置場所も異なります。
サイトのロゴ・グローバルナビ・検索バーを束ねるページヘッダー、ブログ記事内のタイトル・著者・日付をまとめた記事ヘッダー、カードコンポーネントの上部タイトル領域など、「セクションの導入部」となる場面で使う。
♿ <header> がページのルートレベル（<body> の直下、または <main>・<aside>・<nav>・<article> の外側）に置かれた場合、暗黙的に ARIA ロール banner が付与されます。スクリーンリーダーはこれをサイト共通のバナー領域として認識し、ランドマーク一覧に表示します。<article> や <section> 内の <header> には banner ロールが付与されないため、ページ内に複数の <header> があっても banner として認識されるのは1つだけです。複数配置してもアクセシビリティ上の問題はありません。
📦 <header> はフローコンテンツを内包できますが、<footer> と <header> 自身をネストすることはできません。一般的な子要素は見出し（<h1>〜<h6>）、<nav>、<form>（検索フォーム）、<img>（ロゴ）、<p>（キャッチコピー）などです。<hgroup> を使って見出しとサブタイトルをグループ化することも有効です。
| 属性名 | 説明 |
|---|---|
HTMLカテゴリ |
フローコンテンツ、パルパブルコンテンツ |
親要素の制限 |
フローコンテンツを受け入れる要素（ただし <header>・<footer> の子孫にはなれない） |
ARIAロール |
banner（ページルートレベルの場合）/ generic（セクション内の場合） |
ネスト禁止 |
<header> 内に <header> および <footer> は配置不可 |
グローバル属性 |
すべてのグローバル属性が使用可能 |
HTML5 導入 |
HTML5（2014年 W3C 勧告）で追加 |
ロゴ・ナビゲーション・検索フォームを <header> でまとめた、最も一般的なページヘッダーのパターン。
.site-header { display: flex; align-items: center; gap: 24px; padding: 16px 24px; background: #0f172a; border-radius: 8px; flex-wrap: wrap; } .logo { color: #60a5fa; font-weight: 800; font-size: 20px; text-decoration: none; font-family: sans-serif; } .global-nav ul { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; } .global-nav a { color: #cbd5e1; text-decoration: none; font-size: 14px; font-family: sans-serif; } .global-nav a:hover { color: white; } .search-form { display: flex; gap: 8px; margin-left: auto; } .search-form input { padding: 6px 12px; border-radius: 6px; border: 1px solid #334155; background: #1e293b; color: white; font-size: 14px; } .search-form button { padding: 6px 14px; background: #1a56db; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }<header class="site-header">
<a href="/" class="logo">WebDictionary</a>
<nav class="global-nav">
<ul>
<li><a href="/html">HTML</a></li>
<li><a href="/css">CSS</a></li>
<li><a href="/js">JavaScript</a></li>
</ul>
</nav>
<form class="search-form" role="search">
<input type="search" placeholder="用語を検索..." aria-label="サイト内検索">
<button type="submit">検索</button>
</form>
</header>ブログ記事の冒頭に置くヘッダー。タイトル・著者・投稿日など記事メタ情報をまとめる。
.blog-post { font-family: sans-serif; max-width: 600px; } .post-header { border-bottom: 1px solid #e2e8f0; padding-bottom: 20px; margin-bottom: 20px; } .post-category { background: #e8f0fd; color: #1a56db; font-size: 12px; padding: 3px 10px; border-radius: 20px; font-weight: 700; } .post-title { font-size: 26px; margin: 12px 0 10px; line-height: 1.3; color: #1a1a2e; } .post-meta { display: flex; gap: 16px; font-size: 13px; color: #64748b; align-items: center; } .post-meta time { color: #64748b; } .post-body { color: #334155; line-height: 1.8; }<article class="blog-post">
<header class="post-header">
<span class="post-category">HTML / セマンティクス</span>
<h1 class="post-title">セマンティック HTML を今すぐ使うべき理由</h1>
<div class="post-meta">
<span class="post-author">きゃすぱ</span>
<time datetime="2024-11-10">2024年11月10日</time>
<span class="post-readtime">読了 5分</span>
</div>
</header>
<p class="post-body">セマンティックHTMLは…</p>
</article><header> を単なるレイアウト上の「上部エリア」として使い、視覚的な見た目だけで配置するのは誤り。また <header> の中に別の <header> や <footer> をネストすることは仕様違反。
<!-- ❌ 悪い例：意味のないラッパーとして使い、かつネストしている -->
<header>
<header class="inner-header">タイトルエリア</header>
<div>コンテンツ...</div>
</header>
<!-- ✅ 良い例：セクションの導入部として適切に使う -->
<header>
<h1>サービスのご紹介</h1>
<p>私たちが提供するサービスの一覧です。</p>
</header>