Web ページを作りはじめるときに、ヘッダー部分を header 要素で“セクショニング”してようやっと『さて作るぞ！！』ってな感じで気持ちが入りますよね！そんなヘッダー部分の大枠を担う header 要素、私は『ヘッダーである』ということ以外は特に考えないで何気なく使っていました。
シンプルで使いやすい header 要素、でもちゃんと調べてみると、思いのほかユニークで、とても重要な要素ということがわかりました。そんな header 要素についてまとめてみました。
- header 要素の役割
- header 要素を使うときの注意点
目次
header 要素の役割
header 要素はセマンティック的には、
前置き部分やナビゲーション補助のグループを表します！
The header element represents a group of introductory or navigational aids.
HTML Standard
一般的な Web デザインで上部のタイトルやグローバルナビがある部分ですね。難しく考えずとも、なんとなくイメージできるかと思います。
注意
header 要素は、 head 要素とは意味や役割が全くの別物です。head 要素はメタ情報を記述するエリアです。初心者のうちは混乱しがちかもしれませんので注意しましょう！
バナーランドマークとして認識される
header 要素（Web ページ全体として１つだけの。）は、「バナーランドマーク」というものとして認識されます。この場合の「バナーランドマーク」とは、ロゴやサイト名、ナビゲーション、サイト内検索、スローガンなどを内包して、その Web サイトが“何を目的としているのか”（Web サイトの指向性）を示す役割を持つもののことを指します。
“旗印”って訳してしまったほうが、私たちにとってはピンとくるかもしれません！日本語的にも“頭（header）”というより“顔”の方がシックリくるかもしれませんね！
サイトの“顔”
的な！
アクセシビリティとして超重要
先述の通り「バナーランドマーク」としての役割が header 要素には込められており、アクセシビリティとしてめちゃくちゃ重要な要素なのです（暗黙の ARIA ロールなんてワードを見かけたこととがあるかもしれません。まさにそれが関わっているのです。ただし、初心者のうちはすこし混乱してしまうかもしれないので、ここでは詳しくは触れません。気になる方はググってみてください！）。
そして、スクリーンリーダーなどの支援技術は header 要素を「バナーランドマーク」として認識し、ナビゲーションの手助けをしてくれます。
MDN によれば、header 要素は、いにしえの HTML で元々、“見出し”のために存在していたということです。そしていつからか h1-h6 要素たちが見出しの役割を担うようになり、header 要素の役割も変化していき現在のような超重要な要素に進化していきました。そのような歴史的な背景を経て、現在（2025年4月）のような役割があるわけですね！
header 要素は
「Sectioning Content」
ではない
Web ページの骨組みとしてなんとな～く header、main、footer というように区分けして整理をすることも多いと思います。
しかし、この header 要素（main、footer 要素も同じく）、一見、“セクショニングコンテンツ”のように感じられますが、「Content Model」の考え方に基づいてみてみると実は、“セクション”を作る要素「Sectioning Content」ではないのです。
そのことを把握しておけば、
とりあえずOK！
で、
あるかもしれませんが、
もうちょっと掘り下げてみましょう！
これの何が問題なの？
別にセクショニングコンテンツだと思っていてもいいじゃない！
ぱっと見、キレイに区分けできてるし！
というふうに
思うかもしれません。
しかし、私たち人間たちにはキレイに整理されているように見えても、検索エンジンのクローラーなどのシステムさま方には、場合によってはチグハグな文章構造に見えている。なんてこともあるのです。そしてそれは SEO やアクセシビリティに悪影響を与える可能性があります。（実害としては、検索順位が下がるかもしれないということでしょうか。）
具体例としては、
こんな感じです。
<body>
<header>
<h1>すごい会社のホームページ</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">ブログ</a></li>
<li><a href="#">コンタクト</a></li>
</ul>
</nav>
<h2>おしらせ</h2>
<ul>
<li><a href="#">すごい商品の発売</a></li>
<li><a href="#">お詫び</a></li>
<li><a href="#">サイトオープン！</a></li>
</ul>
</header>
<div>
<p>ようこそ。私たちのすごい会社のホームページにお越しくださりありがとうございます。</p>
<p>めっちゃすごい商品がたくさんあります！！</p>
<p>...</p>
</div>
・・・
（略）
・・・
</body>
上記のコードは、ヘッダー部分を header 要素でまとめてあり、そのあとから本文をスタートさせたいという意図が読み取れると思います。
一見、特に問題ないように見えますが……
しかし、
先述の通り header 要素は「Sectioning Content」ではありません。ですので、厳密にはヘッダー部分は header 要素で囲われているだけという感じなのです。
この問題点としては ⇒ h1-h6 要素（Heading Content）の特性が悪影響を及ぼす可能性があるという点です。h1-h6 要素は文章の構造上のセクションとしてみなされるされる場合があります。詳しくは、下の記事でまとめていますのでよかったらご覧ください。
つまり、<h2>おしらせ</h2>部分が、header 要素の枠を貫通して、<p>ようこそ～の部分までも“お知らせセクション内”だとて認識されてしまう可能性があるというわけです。※ div 要素も「Sectioning Content」ではないので同様に貫通しています。
解決策の一つとしては、header 要素の直後を Section 要素や article 要素などの「Sectioning Content」からスタートさせる方法があります。言い換えれば、本文を「Sectioning Content」で囲って新たなセクションとして区分けしてあげます。
こんな感じ↓
<body>
<header>
<h1>すごい会社のホームページ</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">ブログ</a></li>
<li><a href="#">コンタクト</a></li>
</ul>
</nav>
<h2>おしらせ</h2>
<ul>
<li><a href="#">すごい商品の発売</a></li>
<li><a href="#">お詫び</a></li>
<li><a href="#">サイトオープン！</a></li>
</ul>
</header>
<section>
<div>
<p>ようこそ。私たちのすごい会社のホームページにお越しくださりありがとうございます。</p>
<p>めっちゃすごい商品がたくさんあります！！</p>
<p>...</p>
</div>
</section>
・・・
（略）
・・・
</body>もちろんこれが正解というわけではありません。
h1-h6 要素が“セクションを作る”というのであれば、header の続きを下記のように新たな見出しからスタートすれば、イケるのかもしれません。
<div>
<h2>ようこそ</h2>
<p>私たちのすごい会社のホームページにお越しくださりありがとうございます。</p>
<p>めっちゃすごい商品がたくさんあります！！</p>
<p>...</p>
</div>しかし、数あるブラウザやスクリーンリーダーの中には、意図したとおりに認識してくれない可能性があります。
そう、そのような可能性があること自体が問題なのですね！
Web ページ全体の
header 要素は
素のままでOK
header 要素は、「Sectioning Content」ではないということはわかりましたが、では、header 要素自身を「Sectioning Content」である要素で囲うべきなのか？という疑問がでてきますよね？
この疑問に対して、
header 要素は「Sectioning Content」で囲う必要性は薄いと考えます。
なぜ「Sectioning Content」で囲う必要がないのか？
header 要素を「Sectioning Content」で囲うと「バナーランドマーク」として認識されなくなります。これはアクセシビリティの観点から見てイマイチな結果です。そして『このヘッダーは特定のセクションに属している』という意味をもつことになります。ページ全体の header 要素は、サイトタイトルやナビゲーションなど『このヘッダーはページ全体に関する情報』を含むため、あえてセクショニングする必要性は薄いのです。
理屈がよくわからない場合、まずはとにかく他の多くのサイトを覗いてみてください！
そうするとページ全体の header 要素をわざわざ section 要素などの「Sectioning Content」で囲ったりしているサイトはそうそうないはずです！それが現在（2025年4月）の標準的な記述方法だと思います。初心者のうちはそう覚えておくのも一つの手だと思います。
header 要素は
各セクションにも
入れられる
さて、
セクション、セクション、せくしょん、sectionと……頭がこんがらがってしまいますが、、いったん深呼吸しましょう。
header 要素は、べつに『１つしか使えない』というルールはありません。むしろ『各セクションに含めることができる』のです！
例を見た方が早いかもしれませんね。
こんな使い方ができます↓
<body>
<header>
<h1>すごい会社のホームページ</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">ブログ</a></li>
<li><a href="#">コンタクト</a></li>
</ul>
</nav>
<h2>おしらせ</h2>
<ul>
<li><a href="#">すごい商品の発売</a></li>
<li><a href="#">お詫び</a></li>
<li><a href="#">サイトオープン！</a></li>
</ul>
</header>
<section>
<header>
<h2>ようこそ</h2>
<time>2025/04/03</time>
</header>
<div>
<p>ようこそ。私たちのすごい会社のホームページにお越しくださりありがとうございます。</p>
<p>めっちゃすごい商品がたくさんあります！！</p>
<p>...</p>
</div>
</section>
・・・
（略）
・・・
</body>このように section 要素のような「Sectioning Content」である要素内にも header 要素を入れることができるのです。
この場合の header 要素は「ページ全体のヘッダー」ではなく（バナーランドマークとしてみなされず）、そのセクション専用のヘッダーという扱いになります。
なお、この header 要素は、セクションごとに必ず入れなければいけないものではありません。『このセクションにはヘッダーが必要か？』を考えて適切に入れましょう。サイトや制作チームの方針、状況に合わせて決めましょう！
まとめ
ページ全体の header 要素は、「バナーランドマーク」としてみなされ、その Web サイトが“何を目的としているのか”（Web サイトの指向性）を示す役割をもち、アクセシビリティにおいてもとても重要な役割があります。
勘違いしがちなこととして、header 要素は「Sectioning Content」ではありません。header 要素内に h1-h6 要素を内包する場合、それが文章の構造上としてセクションとして扱われることがあるため、意図しない“セクショニング”に注意が必要です。
また、header 要素は『１つしか使えない』というルールはなく、状況に合わせて『各セクションに含めることができる』のです！
使い方自体は結構シンプルな header 要素ですが、実は結構ユニークでとても重要な要素だったのですね。知っているか知らないかで、アクセシビリティの向上や適切な HTML 構造の実現に差がつくところ！しっかり理解して、美しいコーディングを目指しましょう！
参考・出典
・HTML Standard. 「4.3.8 The header element」. https://html.spec.whatwg.org/#the-header-element, 2025年4月3日閲覧。
・W3C. 「4.4.8 The header element」. https://www.w3.org/TR/2011/WD-html5-author-20110809/the-header-element.html, 2025年3月29日閲覧。
・MDN. 「<header>」. https://developer.mozilla.org/ja/docs/Web/HTML/Element/header, 2025年3月29日閲覧。
・MDN. 「<h1>–<h6>: HTML の見出し要素」. https://developer.mozilla.org/ja/docs/Web/HTML/Element/Heading_Elements, 2025年4月3日閲覧。
