HTML

The HTML header element is a tag used to group the title, logo, navigation links and other introductory content at the top “header” area of a page or section.

header 要素

HTMLのheader要素（HTMLヘッダー）は、ページや記事のタイトル・ロゴ・ナビゲーションなど、画面の「顔」になる導入部分をひとまとめにするためのタグです。

HTMLのヘッダー（header 要素）とは？

<header> 要素は、いわゆる「HTMLヘッダー」と呼ばれる、ページやセクションの導入部分を表すために使います。ここには見出し（<h1>～<h6>）、ロゴ、ナビゲーション、検索フォームなど、そのページやセクションを理解するための手がかりとなる情報をまとめます。

多くの場合、ページやセクションの先頭に配置されますが、重要なのは「位置」ではなく「導入部」であることです。

どこを対象にした導入部？

<header> は直近のセクショニング要素（例：<section>, <article>）やセクショニング・ルート（例：<body>, <dialog>）の導入部を表します。

例えば、ページ全体のヘッダーとして使うこともできますし、記事ごとに個別の <header> を用意することも可能です。

含める内容の例

他の「ヘッダー」との違い

HTMLまわりでは、「ヘッダー」という言葉がいくつかの意味で使われますが、このページで扱っているのは <header> 要素（HTMLヘッダー）です。

<head> 要素は、タイトルやメタ情報など「ブラウザーや検索エンジン向けの設定」を書く場所で、画面上のヘッダーとは別物です。また、「CSSでページ上部にヘッダーを配置するレイアウト」や「HTTPヘッダー」とも役割が違います。

画面に表示される「ページの上部分」をマークアップしたいときは、ページ全体やセクションの導入部として <header> を使う、というイメージで捉えておくと混乱しにくくなります。

注意点

<header> は 見出しを必ず含む必要はありませんが、見出しと一緒に使うことが推奨される場合が多いです。見出しなしで、概要やナビゲーションだけをまとめても問題ありません。

ページの中で複数の <header> を使うことができます。ページ全体のものと、各記事やセクション専用のものを併用できます。

禁止されている配置があります。<header> は以下の要素の内側に入れてはいけません：

アクセシビリティの補足

<header> 自体にはランドマークロールは付きません。

ページ全体の共通ヘッダーをランドマーク化したい場合は、1 ページに 1 つだけ role="banner" を付けることを検討してください。

記事やセクションごとの <header> には通常ランドマークは不要です。

サンプルコード

ページ全体のヘッダー

HTML

<body>
	<header role="banner">
		<h1>私のブログ</h1>
		<nav>
			<a href="/">ホーム</a>
			<a href="/about">プロフィール</a>
		</nav>
		<form action="/search" role="search">
			<input name="q" aria-label="サイト内検索">
		</form>
	</header>

	<main>
		<!-- ページ本文 -->
	</main>
</body>

記事専用のヘッダー

HTML

<article>
	<header>
		<h2>最新のお知らせ</h2>
		<p>イベントやアップデートの概要をまとめています。</p>
		<nav>
			<a href="#events">イベント一覧</a>
			<a href="#updates">更新情報</a>
		</nav>
	</header>

	<p>…本文がここに続きます…</p>
</article>

まとめ

初心者の方はまず「ページや記事の“顔”を作る要素」と覚えるとわかりやすいです。

よくある質問（FAQ）

Q. ページには必ず <header> を付けないといけませんか？
A. いいえ、必須ではありません。ページの導入部分をまとめたいときに使う要素なので、ヘッダーが不要なシンプルなページなら省略しても問題ありません。
Q. <head> と <header> の違いは何ですか？
A. <head> はタイトルやメタ情報など「ページ設定」を書く場所、<header> は画面上に見える「導入部分」をまとめる要素です。役割も表示場所も別物です。
Q. ページに <header> は1つだけにした方が良いですか？
A. 1つだけにする必要はありません。サイト全体のヘッダーとは別に、記事ごと・セクションごとに <header> を置いてかまいません。
Q. サイト全体のヘッダーと記事内のヘッダーで、アクセシビリティ上の違いはありますか？
A. サイト全体のヘッダーには、ランドマークとして 1 ページに 1 箇所だけ role="banner" を付けることがよくあります。記事内の <header> には通常ランドマークは付けません。

よくあるエラー早見表

<footer> の中に <header> を入れてしまう
禁止されている入れ子です。サイト全体のフッター内にナビゲーションを置く場合は、<header> ではなく <nav> や <div> を使いましょう。
ページ全体のヘッダーと記事のヘッダー両方に role="banner" を付けてしまう
role="banner" は 1 ページに 1 箇所だけにします。サイト共通のヘッダーのみに付けるようにしましょう。
<head> の中に <header> を書いてしまう
<header> は本文側（<body> の中）に書きます。<head> の中にはメタ情報やタイトルなどだけを入れます。
ヘッダー以外のレイアウト枠にも何でもかんでも <header> を使ってしまう
<header> はあくまで「導入部分」のための要素です。サイドバーや単なる装飾の囲み枠は、<aside> や <div> など別の要素を使いましょう。