<header>

ヘッダータグ（header）

ページや各セクションの「顔」となる導入部分を定義するセマンティック要素。

headerタグ＝ページの「顔」を作る

`

` は、HTML5で導入されたセマンティック要素で、ページ全体またはセクションの「導入部」を表します。多くのWebサイトでは、ロゴ、ナビゲーションメニュー、検索フォームなどがここに配置されます。

単なる `

` と違い、`
` タグを使うことで、ブラウザ、検索エンジン、スクリーンリーダーに対して「ここがページの始まり部分です」という明確な意味を伝えることができます。

基本的な使い方

<header>
  <h1>サイトタイトル</h1>
  <nav>
    <a href="/">ホーム</a>
    <a href="/about">会社概要</a>
  </nav>
</header>

headerタグに含めるべき要素

  • ロゴ: サイトのブランドアイデンティティを示す画像やテキスト
  • ナビゲーション: `
  • 検索フォーム: サイト内検索機能（大規模サイトの場合）
  • 見出し: ページやセクションのタイトル（`

    `〜`

    `）

複数のheaderタグを使う

1つのページに複数の `

` タグを配置することは完全に問題ありません。ページ全体のヘッダーだけでなく、各 `
` や `
` の中にそれぞれの `
` を置くことで、より論理的な構造になります。

複数ヘッダーの例

<header>
  <h1>ブログサイト</h1>
</header>

<article>
  <header>
    <h2>記事タイトル</h2>
    <p>投稿日: 2026年2月11日</p>
  </header>
  <p>記事本文...</p>
</article>

アクセシビリティへの貢献

`

` タグは、スクリーンリーダーにとって重要なランドマーク（目印）として機能します。視覚障害のあるユーザーは、このランドマークを使ってページ内を効率的にナビゲートできます。

さらに、ARIA属性 `role="banner"` を追加することで、メインヘッダーであることを明示的に示すこともできます（ただし、HTML5では `

` 自体が暗黙的にこの役割を持ちます）。

SEOへの影響

検索エンジンは `

` タグを見て、「このサイトの主要なナビゲーション構造はどうなっているか」を理解します。適切に構造化されたヘッダーは、サイト全体のSEO評価にプラスの影響を与えます。

まとめ

`

` タグは、ユーザーに安心感を与える重要なエリアです。ロゴとナビゲーションを適切に配置し、セマンティックな構造を意識することで、すべての人にとって使いやすいWebサイトを作りましょう。