HTML

An element that represents the beginning of a webpage or section, typically containing the title and navigation.

header 要素

header 要素とは？

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

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

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

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

例えば、ページ全体のヘッダーとして使うこともできますし、記事ごとに個別の <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 role="main">
		<!-- ページ本文 -->
	</main>
</body>

記事専用のヘッダー

HTML

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

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

まとめ

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