<header>タグは、ヘッダーを表す際に使用します。
header要素には、通常はh1–h6要素による見出しや、
hgroup要素による見出しグループが含まれることが意図されていますが、これらは必須ではありません。
ヘッダーの明確な定義はありませんが、一般的にはウェブページの導入部分やナビゲーションなどが含まれるかもしれません。
他にも、セクションの目次、検索フォーム、関連ロゴなどをまとめる際などにも使用できます。
header要素は、文書のアウトラインに影響を与えない要素であり、新しいセクションを生成しません。
以下のサンプルは、header要素の典型的な使用例です。
ウェブページの導入部分でheader要素を使用しており、そのなかにh1要素を配置しています。
<header>
<p>ゲームの国へようこそ...</p>
<h1>パズルゲーム</h1>
</header>ゲームの国へようこそ…
以下のサンプルは、ウェブページの見出しグループとナビゲーションの全体をheader要素に指定しています。
<header>
<hgroup>
<h1>フルスクリーン API</h1>
<p>Living Standard — 最終更新日 2015年10月19日<p>
</hgroup>
<dl>
<dt>参加方法:</dt>
<dd><a href="https://github.com/whatwg/fullscreen">GitHub whatwg/fullscreen</a></dd>
<dt>コミット:</dt>
<dd><a href="https://github.com/whatwg/fullscreen/commits">GitHub whatwg/fullscreen/commits</a></dd>
</dl>
</header>Living Standard — 最終更新日 2015年10月19日
以下のサンプルでは、header要素が新しいセクションを生成しないことをHTMLソースのコメントで解説しています。
header要素は、文書のアウトラインに影響を与えない要素であり、新しいセクションを生成しません。
そのため、header要素の後のコンテンツは、header要素で開始された最後のサブセクションの一部のままです。
<body>
<header>
<h1>ゲームの広場</h1>
<nav>
<ul>
<li><a href="https://htmqcom1.wpengine.com/games">ゲーム</a>
<li><a href="https://htmqcom1.wpengine.com/forum">フォーラム</a>
<li><a href="https://htmqcom1.wpengine.com/download">ダウンロード</a>
</ul>
</nav>
<h2>重要なお知らせ</h2>
<!-- このh2要素により、２番目のサブセクションが始まります -->
<p>今日のゲームをプレイするには、利用環境をアップデートする必要があります。</p>
<!-- ここは「重要なお知らせ」と題されたサブセクションの一部です -->
<h2>ゲーム</h2>
<!-- このh2要素により、３番目のサブセクションが始まります -->
</header>
<p>あなたがプレイ中のゲームが３つあります:</p>
<!-- ここはまだ「ゲーム」と題されたサブセクションの一部です -->
...
今日のゲームをプレイするには、利用環境をアップデートする必要があります。
あなたがプレイ中のゲームが３つあります:
…