<header> - ヘッダ

目次

概要

形式
<header></header>
サポート
https://caniuse.com/mdn-html_elements_header
カテゴリ
フローコンテンツ
パルパブルコンテンツ
親要素
フローコンテンツ を子要素に持てるもの
子要素
フローコンテンツ (ただし、header, footer, title, main要素を子孫として持つことはできない)
タグの省略
開始タグ:必須 / 終了タグ:必須
属性
グローバル属性

説明

文書の中でヘッダとなる情報を記述します。ヘッダには、タイトル、目次、検索フォーム、ロゴなどが含まれます。

Header
Main

header 要素が区分コンテンツ (<article>, <aside>, <nav>, <section>) に含まれる場合は区分コンテンツのヘッダ情報であることを示します。

属性

グローバル属性
詳細は グローバル属性 を参照してください。

使用例

HTML
<article>
  <header>
    <h1>HTML5最終勧告に対応しました</h1>
    <time datetime="2015-01-04 12:45+09:00">2015/01/04 12:45</time>
  </header>
  <p>...</p>
  <footer>
    <div>Posted by T. Yamada</div>
  </footer>
</article>

詳細

>header 要素の入れ子

HTML5 では、header や footer 要素を入れ子にすることは禁じられていましたが、HTML 5.1 では区分コンテンツ (article, aside, nav, section) で階層化されている場合には、header や footer 要素を入れ子にすることが可能となりました。

HTML
<article>
  <header>
    <h1>...</h1>
    <aside>
      <header>
        <h2>...</h2>
        <p><...</p>
      </header>
      <p>...</p>
    </aside>
  </header>
  <p>...</p>
</article>