<header>: HEADER 要素
最終更新：2026-10-13
<header>HEADER 要素
導入コンテンツやナビゲーション領域を表します。ページやセクションの先頭（サイトタイトル・ロゴ・メインナビ）によく使われます。
| カテゴリ | セマンティック |
|---|---|
| コンテンツモデル | フローコンテンツ |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 必要 </header> タグ |
| ステータス | 標準 |
📝 構文
<header>ヘッダーコンテンツ</header>▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <header> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： header は役割・位置を表し、head とは混同しないようにしましょう。1 ページに複数の header（例：article ごと）を置けます。
❓ よくある質問
Qheader は1ページに1つしか置けないのですか？
Aいいえ。ページレベルの header は通常1つ（body の先頭）ですが、各
<article> や <section> も自分の <header> を持てます（そのセクションの見出しやメタ情報を置く）。なお、header を別の header や footer の中に入れ子にはできません。Qheader と h1 の違いは何ですか？
A
<h1> は見出しそのもの、<header> は「導入部分のコンテナ」です。ロゴ・検索ボックス・ナビ・見出しのグループなどを含められます。header の中に h1 を置くのは定番の組み合わせですが、ロゴとナビだけの header も完全に正当です。Qheader と head の違いは何ですか？
Aまったく別の2つの要素です。
<head> は文書のメタデータの入れ物で、画面には表示されず、title/meta/link を置きます。<header> はページ上に見えるヘッダー領域です。初学者が混同しやすい点です。head は head の中に、header は body の中に書きます。🏷️ 関連タグ
💡 関連ケース
📚 関連チュートリアル
