<header>: ヘッダー要素
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<header> は HTML の要素で、導入的なコンテンツ、ふつうは導入部やナビゲーション補助のグループを表します。見出し要素だけでなく、ロゴ、検索フォーム、著者名、その他の要素を含むこともできます。
試してみましょう
<header>
<a class="logo" href="#">かわいい子犬急便！</a>
</header>
<article>
<header>
<h1>Beagles</h1>
<time>08.12.2014</time>
</header>
<p>
ビーグル犬が<em>実に</em>大好き！実に、めっちゃ。可愛くて、耳が実に、実にふわふわで気持ちいいの！
</p>
</article>
.logo {
background: left / cover
url("/shared-assets/images/examples/puppy-header.jpg");
display: flex;
height: 120px;
align-items: center;
justify-content: center;
font:
bold calc(1em + 2 * (100vw - 120px) / 100) "Dancing Script",
fantasy;
color: #ff0083;
text-shadow: black 2px 2px 0.2rem;
}
header > h1 {
margin-bottom: 0;
}
header > time {
font: italic 0.7rem sans-serif;
}
使用上のメモ
区分コンテンツ、<main>、またはこれらの要素の暗黙的な ARIA ロールとして同じ ARIA ロールのある要素の中に含まれていない限り、<header> 要素は、ウェブサイト全体の banner ランドマークロールと同じ意味を持ちます。これはグローバルサイトヘッダーを定義します。通常、ロゴ、会社名、検索機能、場合によってはグローバルナビゲーションやスローガンを含むことがあります。一般的にページの上部に配置されます。
そうでない場合、これらの要素内に内包されると、そのランドマークとしての地位を失い、周囲のセクションに対する導入部またはナビゲーション補助のグループを表します。通常、周囲のセクションの見出し（h1～h6 要素）とオプションのサブ見出しが含まれていますが、これは必須ではありません。
歴史的な使用法
<header> 要素は、もともと HTML の初期に見出しのために存在していました。これは the very first website に見られます。ある時点で見出しは <h1> ～ <h6> となり、<header> が自由に別なロールを担うことができるようになりました。
属性
この要素にはグローバル属性のみがあります。
アクセシビリティ
<header> 要素が banner ランドマークを定義するのは、そのコンテキストが <body> 要素のときです。
<article>、<main>、<section>、<nav>、<aside>、またはこれらの要素の暗黙の ARIA ロールと同じ ARIA ロールを持つ要素内に配置された場合、<header> 要素は代わりに generic ロールを持ち、ランドマークとはみなされなくなります。この場合、aria-label や aria-labelledby でラベル付けすることはできません。
例
ページのヘッダー
<header>
<h1>メインページのタイトル</h1>
<img src="mdn-logo-sm.png" alt="MDN ロゴ" />
</header>
結果
記事のヘッダー
<article>
<header>
<h2>プランテットアース</h2>
<p>
<time datetime="2017-10-04">2017 年 10 月 4 日</time>に Jane Smith が投稿
</p>
</header>
<p>
青緑の惑星に住む私たちは、まだ見ぬことが数多くあります。
</p>
<p><a href="https://example.com/the-planet-earth/">続きを読む…</a></p>
</article>
結果
技術的概要
| コンテンツカテゴリー | フローコンテンツ, 知覚可能コンテンツ |
|---|---|
| 許可されている内容 |
フローコンテンツ。但し、子孫に他の <header> や
<footer> がないこと。
|
| タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
| 許可されている親要素 |
フローコンテンツを受け入れるすべての要素。ただし、<address>、<footer>、他の
<header> 要素の子孫になることはできません。
|
| 暗黙の ARIA ロール |
banner,
または
article, aside, main, nav,
section
の各要素、または
article,
complementary,
main,
navigation,
region ロールの要素の子孫である場合は
generic
|
| 許可されている ARIA ロール |
group, presentation,
none
|
| DOM インターフェイス | HTMLElement |
仕様書
| Specification |
|---|
| HTML # the-header-element |