このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<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 href="#">Cute Puppies Express!</a></header><article> <header> <h1>Beagles</h1> <time>08.12.2014</time> </header> <p> I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and their ears are so, so snugly soft! </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: #000 2px 2px 0.2rem;}header > h1 { margin-bottom: 0;}header > time { font: italic 0.7rem sans-serif;}使用上の注意
<header> 要素は、区分コンテンツの中に含まれていない限り、ウェブサイト全体のbanner ランドマークロールと同じ意味を持ちます。区分コンテンツの中に含まれている場合、<header> 要素はランドマークではありません。
<header> 要素はグローバルなサイトヘッダーを定義することができ、アクセシビリティツリーではbanner として記述されます。通常、ロゴ、会社名、検索機能、そして場合によってはグローバルナビゲーションやスローガンを含みます。一般的にはページの上部に配置されます。
それ以外の場合は、アクセシビリティツリーのsection となり、通常は周囲のセクションの見出し（h1 -h6 要素）とオプションで小見出しを格納しますが、これは必須ではありません。
歴史的な使用法
<header> 要素は、もともと HTML の初期に見出しのために存在していました。これはthe very first website に見られます。ある時点で見出しは<h1> ～<h6> となり、<header> が自由に別なロールを担うことができるようになりました。
属性
この要素にはグローバル属性のみがあります。
例
ページのヘッダー
<header> <h1>Main Page Title</h1> <img src="mdn-logo-sm.png" alt="MDN logo" /></header>結果
記事のヘッダー
<article> <header> <h2>The Planet Earth</h2> <p> Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by Jane Smith </p> </header> <p> We live on a planet that's blue and green, with so many things still unseen. </p> <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p></article>結果
アクセシビリティ
<header> 要素がbanner ランドマークを定義するのは、そのコンテキストが<body> 要素のときです。HTML の header 要素は、<article>、<aside>、<nav>、<section> 要素の子孫である場合は banner ランドマークとみなされません。
技術的概要
| コンテンツカテゴリー | フローコンテンツ,知覚可能コンテンツ |
|---|---|
| 許可されている内容 | フローコンテンツ。但し、子孫に他の<header> や<footer> がないこと。 |
| タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素。ただし、<address>、<footer>、他の<header> 要素の子孫になることはできません。 |
| 暗黙の ARIA ロール | banner, またはarticle,aside,main,nav,section の各要素、またはrole=article,complementary,main,navigation,region の要素の子孫である場合は対応するロールなし |
| 許可されている ARIA ロール | group,presentation,none |
| DOM インターフェイス | HTMLElement |
仕様書
| Specification |
|---|
| HTML # the-header-element |