HTML5の要素「header」の使い方

2017年9月27日

HTML5で新たに追加された要素header
今回は、このheader要素について確認したのでメモ。

header要素の使い方

header要素は、内容がヘッダーのまとまりであることを表します。
一般的に、ページ内のヘッダーに使用されるほか、セクション内でヘッダーを表す場合にも用いられます。

具体的には、タイトル、ロゴ、見出し、ナビゲーション、その他セクションのヘッダー部分、検索フォームなどを含めることができます。
header要素は子要素として見出し(h1~h6)要素を含むことが多いですが、これは必ずしも入れる必要があるわけではありません。

わかりやすい使用のイメージとしては、従来以下のようにとマークアップしていたような箇所を、

<div id="header">...</div>

次のように変更する、といったケースが挙げられます。

<header>...</header>

header要素のコンテンツモデル

コンテンツカテゴリー

  • フローコンテンツ
  • パルパブルコンテンツ

含むことができるカテゴリー

  • フロー・コンテンツ
    • ただし、header要素やfooter要素を子孫要素として含めることはできない。