目次に戻る

header要素:HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
  • 上記カテゴリー要素が置ける場所。
  • 下記の内容モデルの結果として、header要素祖先に持ってはならない。
内容モデル

W3C : HTML5.3header要素子孫たるSectioning content子孫としては、header要素及びfooter要素を含んでもよかった。

属性
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • main要素article要素aside要素nav要素もしくはsection要素、又は、roleに「mainarticlecomplimentarynavigationもしくはregion」が指定された要素子孫でない場合は、
    • デフォルトroleは、bannerデフォルトroleは、role属性値に指定すべきでない。
    • デフォルトrole以外では、grouppresentationnoneを指定可。
  • 上記以外の場合は、
    • デフォルトroleは、なし。
    • デフォルトrole以外では、grouppresentationnoneを指定可。
視覚系ブラウザデフォルトとして期待されるCSS

  header {
    display: block;
    unicode-bidi: isolate;
  }
  
意味・用法

導入部又はナビゲーション補助のグループを表す(必ずしも、直近の祖先Sectioning content等のヘッダ部分たる用途に限定されない)。

内容例→Heading contentによる見出し、目次、検索窓、ロゴ。

W3C : HTML5.3:直近の祖先main要素、又は直近の祖先Sectioning content(それがない場合は、直近の祖先Sectioning root)の導入部コンテンツを表すとされていた。

私見・補足

主な用法は、直近の祖先Sectioning content(それがない場合は、直近の祖先Sectioning root)のヘッダ部分を表すといったところだろう。

header要素それ自体はSectioning contentではないが、その中にSectioning content入れ子にすることはできる。header要素内にnav要素aside要素入れ子になっているということもありうるだろう。

header要素だからといって、セクションの上部に配置されてなければならないという決まりはない。当該セクションfooter要素がないなら下部配置でもかまわないし、footer要素の直前にheader要素を配置することもありうる。さすがに、セクションの上部にfooter要素、下部にheader要素を配置するのは、慣例に反するので望ましくはないだろうが。

header要素の用例

    <body>
      <header>
        <h1>○○プログラムの解説</h1>
        <dl>
          <dt>バージョン:</dt>
            <dd>3.01</dd>
          <dt>最終改訂:</dt>
            <dd>2015年10月22日</dd>
          <dt>ダウンロード:</dt>
            <dd><a href="example.js" download="example.js">example.js</a></dd>
        </dl>
      </header>
      <p>○○プログラムは、××のためのプログラムである。</p>
      <p>このプログラムは、ジャバスクリプトで記述されており、ウェブページで使用できる。</p>
      <p>......</p>
    </body>