--- title:

slug: Web/HTML/Element/header tags: - Element - HTML - HTML sections - Reference translation_of: Web/HTML/Element/header ---

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

{{EmbedInteractiveExample("pages/tabbed/header.html", "tabbed-standard")}}

コンテンツカテゴリ	フローコンテンツ, 知覚可能コンテンツ
許可されている内容	フローコンテンツ。但し、子孫に他の `<header>` や {{HTMLElement("footer")}} がないこと。
タグの省略	{{no_tag_omission}}
許可されている親要素	フローコンテンツを受け入れるすべての要素。ただし、{{HTMLElement("address")}}、{{HTMLElement("footer")}}、他の {{HTMLElement("header")}} 要素の子孫要素として配置してはなりません。
暗黙の ARIA ロール	banner, または `article`, `aside`, `main`, `nav`, `section` の各要素、または `role=article`, `complementary`, `main`, `navigation`, `region` の要素の子孫である場合は対応するロールなし
許可されている ARIA ロール	{{ARIARole("group")}}, {{ARIARole("presentation")}}, {{ARIARole("none")}}
DOM インターフェイス	{{domxref("HTMLElement")}}

使用上の注意

<header> 要素は区分コンテンツではありません。つまり、この要素が新たなアウトラインを生成することはありません。すなわち header 要素は通常、自身を囲む section の見出し (h1–h6 要素) を含むことを意図していますが、必須ではありません。

歴史的な使用法

<header> 要素は {{glossary("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>

仕様書

仕様書	状態	備考
{{SpecName('HTML WHATWG', 'semantics.html#the-header-element', '<header>')}}	{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'sections.html#the-header-element', '<header>')}}	{{Spec2('HTML5 W3C')}}

使用上の注意

歴史的な使用法

属性

例

ページのヘッダー

記事のヘッダー

仕様書

ブラウザーの互換性

関連情報