header 要素

4.3.7 header 要素

カテゴリー:
フロー・コンテント
パルパブル・コンテント
この要素を使うことができるコンテキスト:
フロー・コンテントが期待される場所
コンテントモデル:
フロー・コンテント 、ただし、子孫に header, footer, main 要素がないこと。
コンテント属性:
グローバル属性
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
banner ロール (デフォルト - 指定不要) または presentation
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
HTMLElement を使う

header 要素は、直近の祖先にあたるセクショニング・コンテント、または、セクショニング・ルートの前置きのコンテンツを表します。header には、通常は、イントロダクションやナビゲーションの助けとなるグループを入れます。

直近の祖先に当たるセクショニング・コンテントセクショニング・ルートbody 要素のとき、それはページ全体の適用されます。

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

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

<header>
 <p>ようこそ...</p>
 <h1>ボイド戦争!</h1>
</header>

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

<header>
  <h1>スケーラブル・ベクター・グラフィクス (SVG) 1.2</h1>
  <p>W3C 草案 2004 年 10 月 27 日</p>
 <dl>
  <dt>本バージョン:</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>前バージョン:</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>SVG 1.2 の最新バージョン:</dt>
  <dd><a href="http://www.w3.org/TR/SVG12/">http://www.w3.org/TR/SVG12/</a></dd>
  <dt>最新 SVG 勧告:</dt>
  <dd><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></dd>
  <dt>編集者:</dt>
  <dd>Dean Jackson, W3C, <a href="mailto:dean@w3.org">dean@w3.org</a></dd>
  <dt>著者:</dt>
  <dd><a href="#authors">著者リスト</a>をご覧ください</dd>
 </dl>
 <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notic ...
</header>

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

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

<body>
 <header>
  <h1>銃を持つ小さな緑色の男</h1>
  <nav>
   <ul>
    <li><a href="/games">ゲーム</a>
    <li><a href="/forum">フォーラム</a>
    <li><a href="/download">ダウンロード</a>
   </ul>
  </nav>
  <h2>重要なニュース</h2> <!-- これは 2 つ目の副セクションを開始します -->
  <!-- これは "重要なニュース" とタイトルが付けられた副セクションの一部です -->
  <p>今日のゲームをプレイするには、クライアントをアップデートする必要があります。</p>
  <h2>ゲーム</h2> <!-- これは 3 つ目の副セクションを開始します -->
 </header>
 <p>3 つのアクティブなゲームがあります:</p>
 <!-- これもまだ "ゲーム" とタイトルが付けられた副セクションの一部です -->
 ...

※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-header-element