HTML - headerタグ

概要

headerタグはHTML5で導入された意味的要素の1つであり、ページやセクションの導入部分を表現するために使用される。

主な用途として、Webサイトのロゴ、メインナビゲーション、検索フォーム、見出し等の配置がある。
headerタグは一般的にページの最上部に配置されるが、articleタグやsectionタグ等のセクショニング要素内でも使用できる。

headerタグの特徴は、ページ全体のヘッダとしての役割とセクション固有のヘッダとしての役割の両方を持つ。
例えば、ブログ記事においては、Webサイト全体のヘッダと各記事のヘッダを別々に定義することができる。

アクセシビリティの観点からも重要であり、スクリーンリーダ等の支援技術がコンテンツの構造を理解することに役立つ。
また、検索エンジンもheaderタグ内のコンテンツを重要な情報として認識する。

 <!-- 基本的な実装例 -->
 
 <header>
    <h1>サイトタイトル</h1>
    <nav>
       <a href="/">ホーム</a>
       <a href="/about">概要</a>
    </nav>
 </header>

headerタグは他のHTML要素と組み合わせることにより、より構造化されたページを作成することができる。
ただし、footerタグ内やheaderタグ内に別のheaderタグを入れることはできないという制限がある。

複数のheaderタグ

HTMLにおいて、複数のheaderタグを使用することができる。
各headerタグが明確な文脈や階層構造を持つことが重要である。

以下に示すような2つのパターンで使用できる。

異なるセクション内で個別のheaderタグを使用

 <section>
    <header>セクション1のヘッダ</header>
    <p>コンテンツ</p>
 </section>
 <section>
    <header>セクション2のヘッダ</header>
    <p>コンテンツ</p>
 </section>

上部のheaderタグとセクション固有のheaderタグの組み合わせ

 <header>サイトのメインヘッダ</header>
 <article>
    <header>記事のヘッダ</header>
    <p>記事の内容</p>
 </article>