Hatena::Groupweb

header

header

仕様書の定義

カテゴリー
Flow content
記述可能箇所
Flow contentを内容モデルに持つ要素内
内容モデル
Flow content。ただし、header要素、footer要素を子孫に持つ事はできない

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>

Note: header要素はsectioning contentではありません。つまり、この要素が新しいセクションを生成することはありません。

次の例では、ページの見出しがh1要素によって、そして2つのサブセクションがh2要素により生成されています。しかし、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" -->
 ...

メモ

ここでの「ヘッダー」は、Webサイトのヘッダーとして考えるよりも、印刷物などに見られる全ページに共通したページタイトルや日付の部分として考えた方がよいと思います。Webサイトの「ヘッダー」にはナビゲーションを含まれることが多いですが、現在のheader要素はナビゲーション(nav要素)を含む事はできません。

と、このような定義でしたが、2009年4月30日に、それまでheaderが持っていた「見出しのグループ化」という役割がhgroupという要素に分離されました。これをうけ、headerは広くWebで使われているdiv.headerに近い定義に改められています。詳細は「headerがhgroupとheaderに分離」を読んでください。