HTML <header>タグ：正しい理解と使い方

定義と使用方

<header>タグは
一般的に言うウェブページの最上部にあるグローバルヘッダーや、
記事やコンテンツの冒頭（序論／序文／導入部）を表す際に使用します。

グローバルヘッダー（Global Header）を表す場合

<header>タグは一般的にウェブページ上部にある全体的なヘッダー部分を表すために使用されます。この領域にはウェブページのタイトル、ロゴ、主要なナビゲーションメニューなどが含まれる場合があります。

HTML要素（Element）の拡張的な概念として、より明確なHTML要素の構造と意味を付与する役割を持つrole属性の値はbannerです。これはスクリーンリーダーを利用するユーザーのためにウェブアクセシビリティを考慮して使用されます。グローバルヘッダーであることを明示的に示すにはrole="banner"を使用してください。

次に示すのは、<header>タグがグローバルヘッダーとして使用される例です。

HTML <header>タグを使用して、グローバルヘッダーであることを示しました。

<header role="banner">
    <h1>ウェブサイトのタイトル</h1>
    .... ロゴ、ナビゲーション、検索 ....
</header>

<header>タグに明示的にrole属性の値がbannerとして指定されていない場合、ウェブアクセシビリティのためのスクリーンリーダーはHTML文書の文脈上、グローバルヘッダーであるかを判断します。

次に示すのは、<header>タグを使用せず、<div>タグにrole="banner"を指定してグローバルヘッダーであることを明示的に示す例です。

HTML <header>タグを使用せず、<div>タグにrole="banner"を指定してグローバルヘッダーであることを示しました。

<div role="banner">
    <h1>ウェブサイトのタイトル</h1>
    .... ロゴ、ナビゲーション、検索 ....
</div>

記事やコンテンツの冒頭（序論／序文／導入部）を表す場合

<header>タグは記事やコンテンツの冒頭を表すために使用されます。

<header>タグはグローバルヘッダーだけでなく、ウェブページの内容を開始する前の簡単な紹介、要約、または冒頭部分を表すために使用されます。これによりウェブページの内容をセマンティックにし、理解しやすくします。主に次の要素の子要素として使用されます。

<article>
<aside>
<main>
<nav>
<section>

これらの要素の子要素として<header>タグが使用される場合、グローバルヘッダーとは見なされません。role属性の値もbannerとは見なされません。

次に示すのは、<header>タグが記事やコンテンツの冒頭として使用される例です。

HTML <header>タグを使用して、記事の冒頭であることを示しました。

<article>
    <header>
        <h2>HTMLの紹介</h2>
        <p>
            <time datetime="2025-05-15">2025年5月15日</time> コーディングエブリバディ作成
        </p>
    </header>
    <p>
        HTML（HyperText Markup Language）は、ウェブページを作成するための最も基本的な言語として...
    </p>
    <p>
        <a href="https://example.com/html">さらに見る...</a>
    </p>
</article>

構文形式

1つのHTML文書に複数の<header>タグを持つことができます。

しかし、<header>タグには許可されていない子要素や許可されていない親要素があります。
これらのルールは、<header>タグが特定の状況で使用される場合にウェブページのコンテンツを把握するのが難しくなる可能性があるため設けられており、<header>タグを使用する際には必ず考慮する必要があります。

許可されていない子要素

<header>タグの子要素として使用できないタグです。

<header>
<footer>

許可されていない親要素

<header>タグの親要素として使用できないタグです。

<address>
<footer>
<header>

参考事項

<header>タグは通常、見出しタグ（<h1>〜<h6>）を含む傾向がありますが、これは必須条件ではありません。また、セクションの目次、検索フォーム、または関連するロゴを囲むために使用されることもあります。

HTML

<header>
    <!-- セクションの目次 -->
    <nav>
        <ul>
            <li><a href="#section1">セクション 1</a></li>
            <li><a href="#section2">セクション 2</a></li>
            <li><a href="#section3">セクション 3</a></li>
        </ul>
    </nav>
    
    <!-- 検索フォーム -->
    <form action="/search" method="get">
        <label for="search">検索語</label>
        <input id="search" type="text" name="q" placeholder="検索語を入力してください">
        <button type="submit">検索</button>
    </form>
    
    <!-- ロゴ -->
    <img src="logo.png" alt="ウェブページのロゴ">
</header>