header 要素

4.4.8 header 要素

カテゴリー
フロー・コンテンツ
formatBlock 候補
この要素を使うことができるコンテキスト：
フロー・コンテンツが期待される場所
コンテンツ・モデル：
フロー・コンテンツ。ただし、子孫に header または footer 要素がないこと。
コンテンツ属性：
グローバル属性
DOMインタフェース：
HTMLElement を使う。

header 要素は、イントロダクションやナビゲーションの支援となるグループを表します。

header 要素は、通常は、セクションの見出し（h1–h6 要素や hgroup 要素）を入れることを想定しています。しかし、これは必須ではありません。header 要素は、セクションの目次や検索フォームや関連ロゴを囲むために使うこともできます。

これはヘッダーのサンプルです。この最初のサンプルはゲーム用です： 

<header>
 <p>Welcome to...</p>
 <h1>Voidwars!</h1>
</header>

次の抜粋は、仕様書のヘッダーをマークアップするために、どうやってこの要素を使うことができるのかを示しています：

<header>
 <hgroup>
  <h1>Scalable Vector Graphics (SVG) 1.2</h1>
  <h2>W3C Working Draft 27 October 2004</h2>
 </hgroup>
 <dl>
  <dt>This version:</dt>
  <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/">http://www.w3.org/TR/2004/WD-SVG12-20041027/</a></dd>
  <dt>Previous version:</dt>
  <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20040510/">http://www.w3.org/TR/2004/WD-SVG12-20040510/</a></dd>
  <dt>Latest version of SVG 1.2:</dt>
  <dd><a href="http://www.w3.org/TR/SVG12/">http://www.w3.org/TR/SVG12/</a></dd>
  <dt>Latest SVG Recommendation:</dt>
  <dd><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></dd>
  <dt>Editor:</dt>
  <dd>Dean Jackson, W3C, <a href="mailto:dean@w3.org">dean@w3.org</a></dd>
  <dt>Authors:</dt>
  <dd>See <a href="#authors">Author List</a></dd>
 </dl>
 <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notic ...
</header>

header 要素は、セクショニング・コンテンツではありません。この要素は、新たなセクションを導入することはありません。

この例では、ページに、h1 要素を使って与えられたページの見出しがあり、h2 要素を使って与えられた見出しを持つ2つの副セクションがあります。しかし、header 要素の後ろのコンテンツは、header 要素内で始まる最後の副セクションの一部となります。それは、その header 要素がアウトライン・アルゴリズムに参加しないからです。

<body>
 <header>
  <h1>Little Green Guys With Guns</h1>
  <nav>
   <ul>
    <li><a href="/games">Games</a>
    <li><a href="/forum">Forum</a>
    <li><a href="/download">Download</a>
   </ul>
  </nav>
  <h2>Important News</h2> <!-- this starts a second subsection -->
  <!-- this is part of the subsection entitled "Important News" -->
  <p>To play today's games you will need to update your client.</p>
  <h2>Games</h2> <!-- this starts a third subsection -->
 </header>
 <p>You have three active games:</p>
 <!-- this is still part of the subsection entitled "Games" -->
 ...

※ 原文：http://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-header-element