headerタグの意味と使い方 複数置けるか headとの違い 使わない説の真偽

ホームページのソースを開くと、head と header という似た名前が並んでいた。

どちらもページの頭にあるように見える。片方はブラウザの画面に出ず、片方は画面の一番上に出る。違いを聞かれると、制作会社に任せきりで、誰も説明できない。そういう経営者やWeb担当者に向けて、この記事を書いています。

結論から言います。header 要素は、ページや区画の導入・案内の部品をまとめる、画面に見える側の箱です。head 要素は、ページの題名や文字コードなど、画面に出ない情報を入れる箱です。名前は似ていても、置く場所も役割も別のものです。

header を head の中に書くと、ブラウザは header 以降の部品を body の側へ追い出します。この動きは、ブラウザで実際に動かして測りました。

header は1ページに何個でも置けます。ただし、ページ全体の入口として読み上げソフトに伝わるのは、article や main の外に置いた header だけです。外側に2つ置くと、入口が2つあることになります。

使わなくても、仕様の上では誤りになりません。div で代用したページも、W3Cの検査サービスで警告が出ませんでした。失うのは、読み上げソフトに渡る入口の目印です。

Googleがこの要素を検索の判断に使うかどうかは、開いた公式文書に記載が見つかりませんでした。AI検索との関係も、公式に記載が見つかりませんでした。

この記事の軸は、「ページの頭のタグ1つの判断」です。header・head・h1・title の取り違えを解き、どこにどれを置くかを自分で決められるようにします。

先に答え：header要素について、確かめられたこと

先に、この記事の結論を表にまとめます。右端の列は、答えの根拠にした資料です。

疑問	答え	根拠にした資料
headerタグは何を表すか	導入や案内の部品をまとめる箱。見出しは入れても入れなくてもよい	HTMLの仕様（WHATWG）のheader要素の章
headタグと同じか	別物。head は画面に出ない情報の箱で、html の最初の子に置く	HTMLの仕様（WHATWG）のhead要素の章
複数置いてよいか	置ける。ただし header の中に header は置けない	HTMLの仕様（WHATWG）とW3Cの検査サービスの結果
ページの入口として伝わるのはどれか	article・aside・main・nav・section の外にある header	ARIA in HTML（W3C勧告）とChromiumでの計測
使わないと誤りか	誤りではない。div で代用しても検査は通った	W3Cの検査サービスの結果
h1は必ず中に置くか	置かなくてよい。仕様は「必須ではない」と書いている	HTMLの仕様（WHATWG）
Googleは評価に使うか	開いた公式文書に記載なし	Google 検索セントラルの2つの文書
AI検索との関係	公式に記載なし	Google・OpenAI・Anthropicの公式文書

この記事の読み方

表の「根拠にした資料」は、2026年11月10日に開いたものです。仕様書は更新され続けるため、日付を添えています。

ブラウザでの計測は、同じ日にChromium 145で行いました。ほかのブラウザでの結果は、この記事では確かめていません。

HTMLの検査は、W3Cが公開している検査サービス（Nu Html Checker）に、短いHTMLを渡して行いました。結果は、エラーと警告の件数と文面をそのまま書いています。

この記事の根拠にした資料

使った資料の一覧です。どれも標準化団体か、検索エンジンやAIサービス、WordPressの運営元が出している文書です。

資料	確かめたこと	開いた日
HTMLの仕様（WHATWG）の「header要素」「head要素」	定義、置ける場所、中に置けるもの	2026年11月10日
ARIA in HTML（W3C勧告、2026年8月11日付）とWAI-ARIA 1.2	header が読み上げに渡す役割。バナーの定義	2026年11月10日
W3Cの検査サービス（Nu Html Checker）	入れ子や置き場所の誤りの判定	2026年11月10日
WordPressの公式文書とソース	header.php の役割。ブロックの header	2026年11月10日
Google 検索セントラル「SEO スターター ガイド」「AI 機能とウェブサイト」	検索とAI機能に関する記述の有無	2026年11月10日
OpenAIとAnthropicのクローラーの公式文書	HTMLの書き方についての記述の有無	2026年11月10日
弊社の公開ページ31ページの実測	実際に出ている header の数と位置	2026年11月10日

この記事で使う言葉

似た名前が多いため、先に言葉を決めておきます。

言葉	指すもの	画面に出るか
head 要素	ページの題名・文字コード・読み込むファイルなどを入れる箱	出ない
header 要素	導入や案内の部品をまとめる箱。ロゴや案内リンクを入れることが多い	出る
h1 要素	ページの一番大きな見出し	出る
title 要素	ブラウザのタブに出るページの題名。head の中に置く	タブに出る
ヘッダー	画面の上部にある帯を指す、日常の言葉。HTMLの特定のタグを指さない	出る
header.php	WordPressのテーマにあるファイルの名前。HTMLのタグではない	出ない

最後の2行が、取り違えの原因になりがちです。「ヘッダー」という言葉は、画面の上の帯も、header 要素も、header.php というファイルも指してしまいます。

この記事では、HTMLのタグを指すときは、必ず header 要素と書きます。日常の言葉は「ヘッダー」とかな書きにして、使い分けます。

Q&Aサイトで見かけた「headerタグやfooterタグはbodyの中に書くのか」という質問

Q&Aサイトで、このような質問を拝見しました。

質問者は、header タグと footer タグを body の中に書けばよいのか、外に書くべきなのかを知りたいと書いていました。外に書いたら、文法的に間違いになるのかという疑問も添えられていました。

名前が head と似ているために、head や html の直下に置くのが正しいのではないか、と迷う気持ちは分かります。制作会社が書いたソースを読んで、同じ場所でつまずいた方は多いと思います。

回答に書かれていたこと

回答は2件ありました。

1件目は、header と footer は普通 body の中に書くものだと思う、という短い答えでした。

2件目は、body の中に書くべきだという答えです。HTMLは body の外に文字を書いても画面に反映されてしまうことがあるが、文法では body の中に本文、つまりブラウザに表示する内容を書くことになっている、と説明していました。

さらに、header と footer は囲んだ内容をヘッダーやフッターとして認識させるタグで、どちらも画面に表示する本文にあたるため、body の中に書かなければ文法的に間違いになる、と続いていました。

大筋は合っています。header が body の中の部品であることは、仕様書でも確かめられました。

回答のどこまでが確かめられるか

仕様書で確かめられたのは、header 要素の置ける場所が「フロー内容が置ける場所」と書かれている点です。body の中がその代表です。

「外に書いたら文法的に間違い」という点は、次の節以降で測りました。body の外に書いた header は、ブラウザが自動で body の中へ移します。画面の見た目は変わりません。

つまり、画面で確かめるだけでは、間違いに気づけません。W3Cの検査サービスにかけると、置き場所の誤りは、はっきり指摘されました。

質問から読み取れる3つの疑問

この質問の底には、3つの疑問があります。

1つ目は、header と head の違いです。名前が似ているために、取り違えが起きています。

2つ目は、header をどこに置いてよいか、何個まで置いてよいかです。

3つ目は、header を使わず、div に id="header" と付けた書き方との違いです。古いサイトには、いまもこの書き方が残っています。

先に短く答える

header は body の中に置きます。head の中に書くと、ブラウザが外へ追い出します。

複数置けます。ページ全体の入口として扱われるのは、区画の外にある header です。

使わなくても誤りではありませんが、読み上げの目印が1つ減ります。次の節から、1つずつ確かめていきます。

header要素とは何か：仕様に書かれた定義

まず、HTMLの仕様（WHATWG）が header 要素をどう定義しているかを確かめます。2026年11月10日に開いた版の内容です。

仕様の一文

仕様書は、header 要素を次のように定義しています。

「header要素は、導入的な内容、または案内の部品の集まりを表す。」（英語の原文を和訳）

仕様書は、導入や案内の部品の例として、区画の目次、検索の入力欄、ロゴを挙げています。

仕様書はこの一文に続けて、補足を書いています。header は、普通は見出し（h1 から h6、または hgroup）を含む想定だが、必須ではない、という内容です（英語の原文を和訳）。

つまり、header の中に見出しを入れるかどうかは、書く側が決めます。見出しを1つも入れなくても、仕様の上では誤りになりません。

仕様が挙げている例

仕様書には、使い方の例が載っています。

1つ目の例は、ゲームの題名の例です。段落で「〜へようこそ」と書き、その下に見出しで題名を置いています。ページの頭の導入が、そのまま header に収まっています。

もう1つの例は、仕様書そのものの頭の部分です。題名・最終更新日・参加方法のリンクをまとめています。

どちらの例も、サイト全体の入口とは限りません。1つの文書や、1つの区画の頭に置く部品として書かれています。

中に置けるもの、置けないもの

header 要素の内容モデル、つまり中に入れてよいものは、「フロー内容。ただし、子孫に header 要素と footer 要素を持たない」と書かれています（英語の原文を和訳）。

段落・見出し・リストなど、body の中に書けるものの多くは、入れて構いません。入れられないのは、header の中の header、header の中の footer です。

W3Cの検査サービスで、2026年11月10日に試した結果が次の表です。

試した書き方	検査サービスの判定
header の中に header を置く	エラー。「header要素は、header要素の子孫になってはならない」
header の中に div を挟んで、その中に header を置く	同じエラー。間に別の要素があっても、子孫なので禁止
footer の中に header を置く	エラー。「header要素は、footer要素の子孫になってはならない」
main の中に header を置く	指摘なし
nav の中に header を置く	指摘なし

「子孫」には、子だけでなく、間に別の要素を挟んだ先にある要素も含まれます。間に div を挟んでも、禁止は変わりません。

区画は作らない：header要素の位置づけ

仕様書は、header 要素について「区画を作る内容ではない」と書いています。新しい区画を始める働きがない、という意味です（英語の原文を和訳）。

section や article は、見出しを伴う区画を作ります。header は、区画の頭に添える部品で、それ自体は区画になりません。

この違いは、section 要素を扱った記事で詳しく書きました。区切りのタグを選ぶ順番は、sectionタグの記事にまとめています。今日の記事は、そのうちの header 1つに絞って掘ります。

タグの省略はできない

仕様書の「タグの省略」の項には、header 要素は開始タグも終了タグも省略できない、と書かれています。

head や body は、場合によって開始タグを省略できます。header は省略できないので、書かないとそこに header が無いことになります。

この違いが、次の節の取り違えにつながります。

「ページの頭」の4つを取り違えない

ページの頭に関わる4つの要素を、並べて整理します。取り違えを解くのが、この記事の中心です。

head要素とは何か

仕様書は、head 要素を「文書のメタデータの集まりを表す」と定義しています（英語の原文を和訳）。メタデータとは、文書についての情報のことです。

置ける場所は、「html 要素の最初の要素として」と書かれています。body の前に1つだけ置きます。

中に入れるのは、title（題名）、meta（文字コードなど）、link（読み込むファイル）といった、画面に出ない部品です。

title については、「ちょうど1つ」という決まりがあります。ただし、別の方法で題名が分かる場合は、省略できます。

4つを並べた表

次の表に、4つの要素の違いをまとめました。

要素	役割	置く場所	個数の決まり
head	画面に出ない情報の箱	html の最初の子	1つ
title	ブラウザのタブに出る題名	head の中	1つ（仕様上）
header	導入や案内の部品の箱	body の中	決まりなし。ただし入れ子は不可
h1	ページの主題を示す見出し	body の中	個数は見出しタグの記事を参照

見出しの個数については、見出しタグの記事で扱っています。この記事では、header との関係だけを書きます。

画面に出るかどうかで見分ける

迷ったときの見分け方は、画面に出るかどうかです。

ブラウザで開いて、ページの上の方にロゴや案内リンクが見えるなら、それは body の中にある部品です。header で囲まれているかもしれません。

ブラウザのタブに出る文字や、検索結果に出る題名は、head の中の title が元になっています。画面の本文の中には出てきません。

ページのソースを開いて、<head> と書かれた行から </head> までの間にあるものは、全部「画面に出ない側」です。その外側の <body> の中が、画面に出る側です。

titleとh1も、別の役割を持つ

ページの題名を決めるものが2つあり、これも取り違えの原因になります。title 要素と h1 要素です。

Googleの「SEO スターター ガイド」は、検索結果のタイトルリンクを作るときの情報源について、こう書いています。

「Google がこのタイトルリンクを生成する際に使用する情報源には、画面に出るかなければhead出すなら全体の入口かbody直下へ違うなら記事の頭か記事の中へ決めたら外側は1つか1つに絞る

順番の読み方

最初の問いは、「画面に出す情報か」です。出さないなら、head の中に書きます。題名・文字コード・読み込むファイルが、これにあたります。

画面に出すなら、次の問いは、「サイト全体に共通する入口か」です。共通するなら、body の直下に header を置きます。

その記事だけの頭なら、article の中に header を置きます。ページの主題を示す大きな見出しなら、h1 を使います。

判断のまとめ

足したいもの	置く要素	置く場所
ページの題名（タブ・検索結果に出る）	title	head の中
文字コードの宣言	meta	head の中
ロゴと案内リンクの帯	header	body の直下
記事の題名と公開日	header（と h1）	article の中
ページの一番大きな見出し	h1	body の中

複数置いてよいか：ページ全体と、区画ごと

検索のサジェストに出てくる「headerタグ 複数」という疑問に答えます。結論は、置けます。ただし、数え方が2つあります。

仕様の答え

仕様書は、header 要素について、個数を制限する決まりを書いていません。置ける場所は「フロー内容が置ける場所」で、禁止されているのは、header と footer の子孫になることだけです。

W3Cの検査サービスに、body の直下へ header を2つ置いたHTMLを渡しました。指摘は、ありませんでした。

つまり、仕様の上では、複数置けます。

ARIAの定義は、ページに1つを求める

読み上げの側に、別の決まりがあります。WAI-ARIA 1.2は、バナーの役割を次のように定義しています。

「サイト固有の内容を多く含むランドマーク。ページ固有の内容ではない。」（英語の原文を和訳）

ここでの「ランドマーク」とは、読み上げソフトの利用者がページ内を移動するときの目印のことです。

さらに同じ文書は、「1つの文書の中で、バナーの役割を付ける要素は1つまでにすることが望ましい」と書いています（英語の原文を和訳）。

「望ましい」という書き方です。仕様の上での禁止ではありません。

測った結果

2つの決まりを合わせると、どうなるか。Chromium 145で、body の直下に header を2つ置いたページの、読み上げの木構造を調べました。

結果は、2つとも「バナー」として出ました。1つ目は題名を含むバナー、2つ目は「お知らせ」の段落を含むバナーです。

仕様の上では誤りにならず、読み上げの定義では「望ましくない」状態です。このずれが、「複数置いてよいか」に1つの答えが出ない理由です。

区画ごとに置く場合

article の中に、記事ごとの header を置く場合は、別の話になります。ARIA in HTMLは、article・aside・main・nav・section の中に置いた header を、バナーにしないと定めています。

一覧ページで、記事を5件並べて、それぞれに header を置いても、バナーは増えません。

数え方の表

置き方	個数	読み上げの扱い
body の直下に1つ	1	バナー
body の直下に2つ	2	バナーが2つ（望ましくない）
article ごとに1つずつ（5件）	5	バナーにならない
body の直下に1つ、article ごとに1つ（5件）	6	バナーは1つだけ
header の中に header	入れ子	仕様の誤り（検査でエラー）

表の最後から2行目の組み合わせは、body の直下に1つ、article の中に5つ置いたページを、Chromium 145で測りました。バナーは1つだけで、記事の header 5つは、役割のない部品として扱われました。

「複数置けるか」への答えは、「区画ごとなら何個でも。ページ全体の入口は1つ」です。

読み上げから見たheader：バナーになる場合と、ならない場合

header 要素を使うと、何が変わるのか。画面の見た目は、CSSで決まります。header を使っても、使わなくても、同じ見た目にできます。

違いが出るのは、読み上げソフトなどの支援技術に渡る情報です。ここを、仕様と測定で確かめます。

ARIA in HTMLの定め

W3Cが2026年8月11日付で勧告にした「ARIA in HTML」は、HTMLの要素ごとに、支援技術へ渡す役割を決めています。header については、こう書かれています（英語の原文を和訳して要約）。

article・aside・main・nav・section のどれかの子孫でなければ、役割はバナー。そうでなければ、役割は「generic」、つまり特別な意味を持たない汎用の箱。

もう1つ、書き手向けの注意が添えられています。header に、バナーの役割を自分で書き足すのは「推奨しない」とあります。

W3Cの検査サービスに、header へ role="banner" を書き足したページを渡すと、警告が1件出ました。「バナーの役割は、header要素には不要」という内容です（英語の原文を和訳）。

ブラウザで測った8通り

header の置き場所を変えて、Chromium 145が支援技術へ渡す構造を調べました。結果の表です。

書き方	支援技術に渡る役割
body の直下に header	バナー
main の中に header	役割なし（見出しと本文だけが並ぶ）
article の中に header	役割なし
section の中に header	役割なし
body の直下の div の中に header	バナー（div を挟んでも変わらない）
body の直下に header を2つ	バナーが2つ
div class="header"（header を使わない）	役割なし。見出しだけが並ぶ
div role="banner"	バナー

2行目から4行目で、main・article・section の中に置くとバナーにならないことが、確かめられました。

5行目は、見落としやすい点です。div で包まれていても、article などの区画の中でなければ、バナーになります。仕様の条件は「区画の中かどうか」で、div の有無は関係がありません。

7行目と8行目が示すこと

7行目の、class="header" と名前を付けただけの div は、役割を持ちません。見た目は同じ帯でも、支援技術には「ただの箱」として渡ります。

8行目の、div に role="banner" を付けた書き方は、バナーとして渡りました。つまり、header を使わなくても、役割を書き足せば、同じ結果になります。

ただし、先に引いたとおり、header を使えば書き足しは不要です。書く量が減り、書き忘れも起きません。

読み上げの利用者に、何が起きるか

バナーは、読み上げソフトの利用者が、ページ内を移動するときの目印になります。WAI-ARIA 1.2は、バナーについて「ユーザーエージェント（ブラウザなど）は、役割がバナーの要素を、案内のための目印として扱うべきである」と書いています（英語の原文を和訳）。

目印があれば、利用者はロゴや案内の帯へ、一気に移動できます。目印が無ければ、ページの先頭から順に読み進めるしかありません。

読み上げソフトの利用者が、実際にどのキー操作で移動するかは、ソフトによって異なります。この記事では、個別のソフトでの操作は確かめていません。

「headerタグは使わない」という声の真偽

検索のサジェストに、「headerタグ 使わない」と出てきます。この声の背景を、先に確かめます。

声が出てくる背景

2026年11月10日に、Yahoo!検索で「headerタグ 使わない」を調べると、header 要素と div id="header" のどちらを使うのが推奨されるのかを尋ねる質問や、ヘッダーのロゴに h1 を使うべきかを論じた記事が出てきました。

古い書き方では、div に id="header" や class="header" を付けて、画面の上の帯を作りました。HTML5より前の書き方です。

いまも、その書き方のサイトは残っています。新しい書き方との違いが分からないために、「使わなくてよいのか」という疑問が出ています。

div で帯を作っても、誤りではない

この書き方でも、HTMLとしては誤りではありません。W3Cの検査サービスに、div id="header" で帯を作ったページを渡しました。エラーも警告も、出ませんでした。

見た目も、CSSで指定すれば、header と同じになります。

使わなかったときに失うもの

使わない場合に変わることを、表にしました。

項目	header を使う	div で代用する
HTMLの検査	通る	通る
画面の見た目	CSSで決まる	CSSで決まる
支援技術に渡る役割	置き場所で自動的に決まる	役割を書き足さなければ、渡らない
ソースを読む人への手がかり	要素名で分かる	class の名前に頼る
Googleの評価への影響	開いた公式文書に記載なし	開いた公式文書に記載なし

失うものは、支援技術に渡る目印と、ソースを読む人への手がかりです。検査と見た目は、変わりません。

必須ではないが、使うほうが手間が少ない

整理すると、header は、使わなくても誤りではありません。必須ではないのです。

ただし、使えば、置き場所に応じて役割が自動で決まります。使わないなら、role を書き足す手間が増えます。

使うか使わないかを迷う場合は、新しく作るページでは header を使い、既存のページを直すときは、見た目に影響が出ない範囲で div を置き換える、という進め方が現実的です。この進め方は、弊社の整理です。

h1との関係：headerの中に置くか、外に置くか

もう1つのよくある疑問は、ページの h1 を header の中に置くべきか、という点です。

仕様の答え

仕様書は、header は見出しを含むのが普通だが、必須ではない、と書いています。逆に、h1 を header の外に置いてはいけない、という決まりもありません。

どちらに置いても、仕様の上では誤りになりません。

ロゴを h1 にするか

Q&Aサイトや解説記事で、よく議論されるのが、サイトのロゴを h1 にするかどうかです。

Googleの「SEO スターター ガイド」は、見出しについて、こう書いています。

「見出しを意味的な順番にすることは、スクリーン リーダーにとっては素晴らしいことですが、Google 検索にとっては順番どおりに使われていなくても問題ありません。」

さらに、「Google 検索が HTML 規格に潜むセマンティックスの意味に依存することはめったにありません」とも書いています。ページごとに「魔法の見出し数や理想的な見出し数といったものが存在することもありません」という記述も、同じ項にあります。

ロゴを h1 にするかどうかを、直接扱った記述は、開いた2つの文書には見つかりませんでした。

弊社のサイトの場合

弊社の記事ページ7ページで確かめたところ、header の中にはロゴと案内リンクがあり、h1 はありませんでした。記事の h1 は、どのページも main の中の article にありました。

ロゴは、リンクの中の画像です。見出しにはしていません。

ロゴはどのページでも同じで、ページごとに主題が変わるのは記事の題名です。この作りは、仕様や公式文書が求めているものではありません。ロゴを h1 にするかどうかは、書く側が決めることです。

見出しの扱いは別の記事へ

見出しのレベルの順番や、h1 を何個置くかは、見出しタグの記事で詳しく書きました。今日の記事は、header との関係だけにとどめます。

nav・main・footerとの使い分け：区切りの判断は別の記事へ

header の隣に並ぶ要素との使い分けは、サジェストにも出てくる疑問です。ただし、区切りのタグ全体の判断は、別の記事で詳しく書きました。

仕様の例にある、headerの中のnav

仕様書の header の節には、header の中に nav（案内リンクの塊）を入れた例があります。題名の見出しと、リンクのリストを、1つの header にまとめています。

弊社のサイトも、同じ形です。header の中に、ロゴと nav があります。ブラウザで測ると、バナーの中にナビゲーションが入った構造で渡りました。

nav を header の外に置いても、誤りではありません。案内リンクの塊を、帯の外に出すか中に入れるかは、画面の作りで決めます。

4つの要素を、役割で見分ける

要素	表すもの	置く場所の目安
header	導入や案内の部品	body の直下、または区画の頭
nav	案内リンクの塊	header の中でも外でもよい
main	ページの中心の内容	body の中に1つ
footer	区画の終わりの情報	body の末尾、または区画の末尾

この表の中身は、section 要素の記事で詳しく書きました。区画を作る要素と、区画の外にある要素の違いは、sectionタグの記事で読めます。

箱そのものに意味が無い div との使い分けは、divタグの記事にまとめました。意味を持つ要素を先に考える、という順番の話です。

意味のある要素を使う理由は、別の記事で

ページの区切りに意味のある要素を使うことが、検索やAI検索にどう関係するかは、セマンティックSEOの記事で整理しています。

今日の記事で確かめた範囲では、header 要素そのものについて、Googleの2つの公式文書に記述が見つかりませんでした。詳しくは、後の節で表にします。

WordPressでは、headerがどのタグで出ているか

自社のサイトがWordPressで作られている場合、画面の上の帯が何のタグで出ているかは、使っているテーマで決まります。公式の文書とソースで、仕組みを確かめました。

従来のテーマ：header.phpが、ページの頭を作る

従来のテーマでは、get_header() という関数が、テーマの header.php を読み込みます。WordPressの公式文書は、テーマにこのファイルが無いときは、WordPress本体が持つ標準のヘッダーが読み込まれる、と書いています（英語の原文を和訳）。

先の節で引いたとおり、このファイルには、head の中身も含まれるのが普通です。ファイルの名前と、HTMLの header 要素は、別の話です。

帯の部分が header 要素か div かは、テーマの作りによります。ソースを開いて確かめるしかありません。

ブロックテーマ：テンプレートパーツの「ヘッダー」

ブロックテーマでは、画面の上の帯を、「テンプレートパーツ」というまとまりで作ります。WordPress本体のソースには、テンプレートパーツの種類ごとの定義があります。

「ヘッダー」の種類には、次の説明が付いています。

「ヘッダーのテンプレートは、題名・ロゴ・主な案内を含むのが普通の、ページの領域を定める。」（英語の原文を和訳）

同じ定義の中に、出力するタグの指定があり、ヘッダーの種類は header、フッターの種類は footer、一般の種類は div と書かれています。

つまり、ブロックテーマで「ヘッダー」の種類のテンプレートパーツを使えば、既定では header 要素で出る、とソースから読み取れます。

この記事では、実際にブロックテーマを動かして、出力されたHTMLを確かめてはいません。ソースを読んだ範囲の話で、実機での出力は未確認です。

グループブロックで、header要素を選ぶ

ブロックエディタの「グループ」ブロックには、「HTML要素」の選択欄があります。ソースには、選べる要素として header・main・section・article・aside・footer が並んでいます。標準は div です。

ここに header を選べば、グループで囲んだ部分が header 要素で出ます。ただし、置いた場所が article などの区画の中なら、バナーにはなりません。

WordPressの出力を確かめる表

仕組み	出る header	確かめ方
従来のテーマの header.php	テーマ次第	ソースを開く
ブロックテーマのヘッダーの種類	既定で header（ソースの記述。実機は未確認）	ソースを開く
グループブロックのHTML要素	選んだとおり。標準は div	ブロックの設定を見る

自分のサイトのソースで確かめる方法

パソコンのブラウザで、確かめたいページを開き、右クリックから「ページのソースを表示」を選びます。

出てきた画面で、検索機能を使い、<header と入力します。見つかった行が、帯の部分の始まりです。

見つからなければ、div の id や class に「header」と付いた箱で帯を作っています。誤りではありませんが、支援技術には役割が渡りません。

弊社のサイトで測った結果

弊社の公開ページで、header 要素がどう出ているかを、2026年11月10日に測りました。1本ずつ1秒以上の間隔を空けて、トップページと公開記事30本の、合わせて31ページのHTMLを取得しました。

数えたこと	結果
header 要素が1つだけのページ	31ページ中31ページ
head の中に header があるページ	0ページ
header が article・aside・main・nav・section の中にあるページ	0ページ
main 要素が1つのページ	31ページ中31ページ

どのページも、header が1つで、区画の外にあります。記事ページの1ページをブラウザで測ると、バナーとして渡り、その中にロゴと nav が入っていました。

記事ページ7ページでは、h1 が header の外、main の中の article にあることも確かめました。

この結果は、弊社のテーマの出力であり、他のサイトにそのまま当てはまるとは限りません。自社のサイトを確かめるときの、見本として読んでください。

検索エンジンとAIとの関係：公式に書いてあること

header 要素を使うと、検索やAI検索で有利になるのか。これも、公式の文書で確かめました。

Google 検索セントラルの2つの文書

「SEO スターター ガイド」（日本語版の最終更新は2025年12月18日）と、「AI 機能とウェブサイト」（同じく2025年12月31日）を、2026年11月10日に開きました。

どちらにも、header 要素や「ヘッダー」への記述は、見つかりませんでした。

「SEO スターター ガイド」には、HTMLの意味づけについて、次の記述があります。

「Google 検索が HTML 規格に潜むセマンティックスの意味に依存することはめったにありません。」

この文は、見出しの順番の項に書かれています。header を直接扱ったものではありません。ただし、意味づけのタグを使うことそのものが、検索の判断に使われるとは書かれていません。

「AI 機能とウェブサイト」には、こうあります。

「AI による概要や AI モードにコンテンツが表示されるための追加の要件はなく、別途特別な最適化を行う必要もありません。」

OpenAIとAnthropicの公式文書

OpenAIのクローラーの概要と、Anthropicのヘルプセンターにあるクローラーの説明（サイト運営者がブロックする方法を含む）を、同じ日に開きました。

どちらも、クローラーの名前と、robots.txtでの制御を説明する文書です。HTMLの要素や、header の書き方についての記述は、見つかりませんでした。

確かめた範囲を表にする

資料	header についての記述
Google 検索セントラル「SEO スターター ガイド」	見つからなかった
Google 検索セントラル「AI 機能とウェブサイト」	見つからなかった。追加の要件は無いと記載
OpenAIのクローラーの公式文書	見つからなかった
Anthropicのクローラーの公式文書	見つからなかった

「公式に記載なし」は、効果が無いという意味ではありません。確かめられなかった、という意味です。

読み上げの目印として働くことは、W3Cの文書とブラウザでの測定で確かめられました。AIとの関係は、弊社の整理として、「人間の読み手にも機械の読み手にも、同じ構造を見せられる」と考えるにとどめます。

ページの頭に、何を置くかを決める4つの問い

最後に、ページの頭を整えるときの判断を、4つの問いにまとめます。

問い1：画面に出す情報か

出さない情報は、head の中に書きます。題名・文字コード・読み込むファイルです。画面に出す部品を head の中に書くと、ブラウザが外へ移します。

問い2：サイト全体の入口か、その記事の頭か

サイト全体に共通する帯は、body の直下の header に入れます。記事ごとの題名や公開日は、article の中の header に入れます。

問い3：中に入れた header が、入れ子になっていないか

header の中に header を入れると、検査でエラーになります。間に div を挟んでも同じです。

問い4：外側の header が、1つだけか

article などの外にある header は、バナーとして渡ります。ページに1つにそろえます。

4つの問いの判定表

問い	はいの場合	いいえの場合
画面に出す情報か	次の問いへ	head の中に書く
サイト全体の入口か	body の直下に header	次の問いへ
その記事・区画の頭か	article や section の中に header	header は不要。見出しだけで足りる
外側の header は1つか	そのまま	1つにまとめる

書き直しの例

ありがちな誤りの例です。head の中に header を書いています。

<head><title>店名</title><header><h1>店名</h1></header><meta charset="utf-8"></head>

直すと、次のようになります。header は body の中へ移します。

<head><title>店名</title><meta charset="utf-8"></head><body><header><h1>店名</h1></header>

書き直したら、W3Cの検査サービスにかけて、エラーが消えたことを確かめます。

チームで決めておくとよいこと

制作会社や社内の担当者と、次の3点を決めておくと、行き違いが減ります。

1点目は、「ヘッダー」という言葉が指すものです。ファイル名か、画面の帯か、header 要素か、head の中身かを、毎回書き分けます。

2点目は、サイト全体の header の置き場所です。body の直下に、1つだけと決めます。

3点目は、記事の頭に header を使うかどうかです。使うなら、題名・公開日・書いた人の順番を、テンプレートに固定します。

よくある質問

Q1. headerタグとは何ですか

導入や案内の部品をまとめる、HTMLの要素です。ロゴや案内リンク、記事の題名と公開日などを入れます。

見出しを入れるかどうかは、書く側が決めます。必須ではありません。

Q2. headerタグとheadタグの違いは何ですか

head は、ページの題名や文字コードなど、画面に出ない情報の箱で、html の最初の子に置きます。

header は、画面に出る導入や案内の箱で、body の中に置きます。head の中に header を書くと、ブラウザが body の側へ移します。

Q3. headerタグは複数使えますか

使えます。仕様の上では個数の制限がありません。ただし、header の中に header は置けません。

ページ全体の入口として渡るのは、article・main などの外にある header です。これは1つにそろえるのが望ましいとされています。

Q4. headerタグを使わないと、誤りになりますか

誤りにはなりません。div id="header" で帯を作ったページも、W3Cの検査サービスで指摘が出ませんでした。

使わない場合、読み上げソフトへ渡るバナーの目印が付きません。必要なら、role="banner" を書き足します。

Q5. headerタグを使うと、SEOやAI検索に有利になりますか

Googleの公式文書に、header 要素への記述は見つかりませんでした。有利になるとは、確かめられていません。

OpenAIとAnthropicの公式文書にも、記述は見つかりませんでした。

まとめ：ページの頭は、置く場所で役割が決まる

head は画面に出ない情報の箱、header は画面に出る導入や案内の箱です。名前は似ていても、置く場所も役割も別です。

header は複数置けますが、入れ子にはできません。ページ全体の入口として渡るのは、区画の外にある header で、これは1つにそろえます。

使わなくても誤りではありません。ただし、支援技術に渡る目印は、書き足さない限り付きません。

検索やAI検索との関係は、公式に書いてある範囲までです。header 要素そのものについての記述は、開いた文書には見つかりませんでした。

今日できる点検

自社サイトのページの頭を、次の表の順に確かめてください。ソースの表示と、ブラウザの検索機能だけでできます。

点検すること	確かめ方	見つかったときの直し方
head の中に header や h1 が無いか	ソースで <head> から </head> までを見る	画面に出る部品は body の中へ移す
header の中に header が無いか	ソースで <header を探し、入れ子を見る	内側を div などに替える
区画の外の header が1つだけか	<header の数と、置き場所を数える	1つにまとめる
帯が div id="header" のままではないか	ソースで id="header" を探す	header に替えるか、role="banner" を書き足す
「ヘッダー」の指す先が共有できているか	制作会社に、どれを指すかを確かめる	ファイル名・帯・要素・head を書き分ける
検査サービスでエラーが出ないか	W3Cの検査サービスにページを渡す	エラーの出た行を直す

ページを増やしても問い合わせが来ないなら、原因はページの外にあります。その場合は、下の入口からご相談ください。