目次に戻る

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

概要

カテゴリー
配置できる場所
  • 上記カテゴリーの要素が置ける場所。
  • 下記の内容モデルの結果として、header要素を祖先に持ってはならない。
内容モデル
属性
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • main要素、article要素、aside要素、nav要素もしくはsection要素、又は、roleに「main、article、complimentary、navigationもしくはregion」が指定された要素の子孫でない場合は、
    • デフォルトroleは、banner。デフォルトroleをrole属性値に指定することは、推奨されない。
    • デフォルトrole以外では、group、presentation、noneを指定可。
  • 上記以外の場合は、
    • デフォルトroleは、generic。デフォルトroleをrole属性値に指定することは、推奨されない。
    • デフォルトrole以外では、group、presentation、noneを指定可。
視覚系ブラウザのデフォルトとして期待されるCSS

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

導入部又はナビゲーション補助のグループを表す。

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

私見・補足

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

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>