header 要素ヘッダを表す
header 要素は文書やセクションのヘッダを表します。
header 要素には文書やセクションの冒頭となる見出しや概要、ナビゲーションのためのリンクなどが含まれる場合が多いでしょう。文書全体のヘッダに使用する場合、ウェブサイトのロゴや検索フォーム、メインのナビゲーションメニューなどが含まれるかもしれません。
header 要素の仕様
- カテゴリ
- コンテンツモデル
-
ただし、 header 要素、または footer 要素を子孫に持つことはできません。
- この要素を使用できる文脈
フロー・コンテンツが期待される場所
- この要素で使用できる属性
header 要素のサンプルソース
<header> <h1>文書全体の見出し</h1> <p>文書全体の概要</p> </header> <article> <h1>記事の見出し</h1> <p>…</p> …省略… </article>
<header>
<h1>ウェブサイトのタイトル</h1>
<nav aria-label="メインメニュー">
<ul>
<li><a href="/">トップ</a></li>
<li><a href="/blog">ブログ</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>
</header>
主要ブラウザの対応
| IE11 | ○ |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |