<header>
HTML の <header>
要素は、導入的なコンテンツ、ふつうは導入部やナビゲーション等のグループを表します。見出し要素だけでなく、ロゴ、検索フォーム、作者名、その他の要素を含むこともできます。
試してみましょう
コンテンツカテゴリ | フローコンテンツ, 知覚可能コンテンツ |
---|---|
許可されている内容 |
フローコンテンツ。但し、子孫に他の <header> や
<footer> がないこと。
|
タグの省略 | 不可。開始と終了タグの両方が必要。 |
許可されている親要素 |
フローコンテンツを受け入れるすべての要素。ただし、<address> 、<footer> 、他の
<header>
要素の子孫要素として配置してはなりません。
|
暗黙の ARIA ロール |
banner,
または
article , aside , main , nav ,
section
の各要素、または
role=article ,
complementary ,
main ,
navigation ,
region
の要素の子孫である場合は対応するロールなし
|
許可されている ARIA ロール |
group , presentation ,
none (en-US)
|
DOM インターフェイス | HTMLElement |
使用上の注意
<header>
要素は区分コンテンツではありません。つまり、この要素が新たなアウトラインを生成することはありません。すなわち header
要素は通常、自身を囲む section
の見出し (h1
–h6
要素) を含むことを意図していますが、必須ではありません。
歴史的な使用法
<header>
要素は HTML5 まで仕様書には現れていませんでしたが、実は HTML の最初期に存在していました。 the very first website に見られるように、元は <head>
要素として使用されていました。ある時点で、別な名前を使用することが決定されました。これによって <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://janesmith.com/the-planet-earth/">Continue reading....</a>
</p>
</article>
仕様書
Specification |
---|
HTML Standard # the-header-element |
ブラウザーの互換性
BCD tables only load in the browser