Skip to content

Latest commit

 

History

History
178 lines (148 loc) · 6.97 KB

index.md

File metadata and controls

178 lines (148 loc) · 6.97 KB
title slug l10n
<header>
Web/HTML/Element/header
sourceCommit
ca65963b93e69591b9362bb2bfde56f93128e2cb

{{HTMLSidebar}}

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

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

使用上の注意

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

結果

{{EmbedLiveSample('Page 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>

結果

{{EmbedLiveSample('Article Header')}}

アクセシビリティ

<header> 要素が banner ランドマークを定義するのは、そのコンテキストが {{HTMLElement('body')}} 要素のときです。HTML の header 要素は、{{HTMLElement('article')}}、{{HTMLElement('aside')}}、{{HTMLElement('nav')}}、{{HTMLElement('section')}} 要素の子孫である場合は banner ランドマークとみなされません。

技術的概要

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

仕様書

{{Specifications}}

ブラウザーの互換性

{{Compat}}

関連情報

  • 他の区分化関連要素: {{HTMLElement("body")}}、{{HTMLElement("nav")}}、{{HTMLElement("article")}}、{{HTMLElement("aside")}}、{{HTMLElement("Heading_Elements", "h1")}}、{{HTMLElement("Heading_Elements", "h2")}}、{{HTMLElement("Heading_Elements", "h3")}}、{{HTMLElement("Heading_Elements", "h4")}}、{{HTMLElement("Heading_Elements", "h5")}}、{{HTMLElement("Heading_Elements", "h6")}}、{{HTMLElement("footer")}}、{{HTMLElement("section")}}、{{HTMLElement("address")}}