nav header との関係）

▶

この記事の要点

<header> はもっとも近いセクションのヘッダー部分を表す HTML5 のセクショニング関連要素
最も近いセクショニング要素が body ならページ全体のヘッダーになる
ページ内に複数配置できる（article ごと、section ごとに置ける）
中身にはロゴ / 見出し / ナビ / 検索フォーム / 著者情報などを入れることが多い
<header> の中に別の <header> や <footer> を入れることはできない

header 要素とは

<header> は HTML5 で導入されたセマンティック要素で、もっとも近いセクション（article / section / aside / nav / body）のヘッダー領域を表します。最も近いセクショニング要素が body の場合はページ全体のヘッダーとして機能します。

基本構文

<header>
  <h1>サイト名</h1>
  <p>キャッチコピー</p>
  <nav>
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/about">概要</a></li>
    </ul>
  </nav>
</header>

header に入れる典型的なコンテンツ

サイトロゴ / サイト名（多くの場合 <h1>）
キャッチコピー / リード文
ナビゲーション（<nav>）
検索フォーム
著者情報 / 公開日（記事の場合）
パンくずリスト

複数配置パターン

HTML5 では 1 ページに複数の <header> を置けます。それぞれの最寄りのセクショニング要素に従属します。

<body>
  <header>            <!-- ページ全体のヘッダー -->
    <h1>技術ブログ</h1>
    <nav>...</nav>
  </header>

  <main>
    <article>
      <header>        <!-- 記事のヘッダー -->
        <h2>HTML5 セマンティック要素まとめ</h2>
        <p>公開日: 2026-06-11 / 著者: Alice</p>
      </header>
      <p>本文...</p>
      <footer>        <!-- 記事のフッター -->
        <p>タグ: HTML, Web</p>
      </footer>
    </article>
  </main>
</body>

制約事項

<header> 内に別の <header> を入れ子にすることはできない
<header> 内に <footer> を入れることもできない
<header> 自体はセクショニング要素ではないため、独自のアウトラインを作らない

div との違い

項目	<header>	<div class="header">
意味	ヘッダーであることを明示	意味なし（汎用コンテナ）
支援技術（スクリーンリーダー）	「バナー」「ヘッダー」として読み上げ	単なるグループ
SEO / アクセシビリティ	有利	中立
CSS / JS から	要素セレクタで指定可	クラス指定が必要

アクセシビリティ

body 直下の <header> は ARIA の role="banner" 相当として扱われ、スクリーンリーダーで「バナー」ランドマークとして認識されます。ページ全体のヘッダーは 1 つに絞るのがベストプラクティスです。

要素	役割
`<header>`	セクションのヘッダー
`<footer>`	セクションのフッター
`<nav>`	主要なナビゲーション
`<main>`	ページの主要コンテンツ（1 ページに 1 つ）
`<article>`	独立した記事 / 投稿
`<section>`	意味のあるまとまり
`<aside>`	補足情報 / サイドバー

FAQ

Q: ヘッダー画像（hero）はどこに入れる？
A: ページ全体の印象を作る hero は <header> に含めるのが自然。ただし装飾だけなら CSS の背景画像にしても良い。

Q: h1 は <header> の中に入れるべき？
A: 必須ではないが、セマンティクス上は外より中のほうがすっきりする。ページの主見出しは main 側に置く流派もある。

Q: スクロール追従の固定ヘッダーは？
A: <header> 要素に position: sticky; top: 0; を適用するだけ。意味づけと表示は別レイヤなので問題ない。

編集

子ページ

子ページはありません

同階層のページ

2026-08-07 17:13:40 guest 207

最近更新/作成されたページ

【django】ログイン認証機能 2026-09-08 03:22:09
MySQL ERROR 1063 Incorrect column specifier for column｜原因と直し方 2026-09-08 03:11:09
Julia Genie ローカル開発サーバ起動完全ガイド 2026-09-07 07:46:04
【PHPエラー】Object of class stdClass could not be converted to string 2026-09-07 07:46:04
Javaの定数 2026-09-07 07:45:13
Oracle DROP USERでユーザー削除｜CASCADE・接続中ユーザーの対処 2026-09-07 07:45:13
Laravel 記事一覧55件｜環境構築・ルーティング・DB・エラー対処 2026-09-07 07:45:13
hostnameコマンドの使い方｜Windows・Linux・macOSでホスト名確認 2026-09-07 07:45:13
SQLとは｜DDL・DMLとリレーショナルデータベース操作の基本 2026-09-07 07:45:13
Linux whichコマンドの使い方｜絶対パス取得とtype・command -vの違い 2026-09-07 07:45:13
Spring Framework 記事一覧31件｜DI・設定・例外の対処 2026-09-07 07:45:13
JPEG（.jpg/.jpeg）画像形式の完全ガイド — 仕様・マジックナンバー・他形式との比較・EXIF 2026-09-07 07:45:13
NetBeansでTomcatを起動する手順｜サーバ登録・ポート・トラブル対処 2026-09-07 07:45:13
Laravelルートグループ｜prefix・middleware・nameで一括管理 2026-09-07 07:45:13
Linuxで複数ファイルの文字列を一括置換｜find・sed・xargsの安全手順 2026-09-07 07:45:13

ページ一覧

その他