header 要素

4.4.8 header 要素

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

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

header 要素は、通常は、セクションの見出し(h1h6 要素や 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