<header>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<header>HTML の要素で、導入的なコンテンツ、ふつうは導入部やナビゲーション補助のグループを表します。見出し要素だけでなく、ロゴ、検索フォーム、著者名、その他の要素を含むこともできます。

試してみましょう

使用上の注意

<header> 要素は、区分コンテンツの中に含まれていない限り、ウェブサイト全体の banner ランドマークロールと同じ意味を持ちます。区分コンテンツの中に含まれている場合、<header> 要素はランドマークではありません。

<header> 要素はグローバルなサイトヘッダーを定義することができ、アクセシビリティツリーでは banner として記述されます。通常、ロゴ、会社名、検索機能、そして場合によってはグローバルナビゲーションやスローガンを含みます。一般的にはページの上部に配置されます。

それ以外の場合は、アクセシビリティツリーの section となり、通常は周囲のセクションの見出し(h1 - h6 要素)とオプションで小見出しを格納しますが、これは必須ではありません

歴史的な使用法

<header> 要素は、もともと HTML の初期に見出しのために存在していました。これは the very first website に見られます。ある時点で見出しは <h1><h6> となり、<header> が自由に別なロールを担うことができるようになりました。

属性

この要素にはグローバル属性のみがあります。

ページのヘッダー

html
<header>
  <h1>Main Page Title</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo" />
</header>

結果

記事のヘッダー

html
<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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
header

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報