<header>: ヘッダー要素

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

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

試してみましょう

<header>
 <a class="logo" href="#">かわいい子犬急便!</a>
</header>
<article>
 <header>
 <h1>Beagles</h1>
 <time>08.12.2014</time>
 </header>
 <p>
 ビーグル犬が<em>実に</em>大好き!実に、めっちゃ。可愛くて、耳が実に、実にふわふわで気持ちいいの!
 </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: black 2px 2px 0.2rem;
}
header > h1 {
 margin-bottom: 0;
}
header > time {
 font: italic 0.7rem sans-serif;
}

区分コンテンツ、<main>、またはこれらの要素の暗黙的な ARIA ロールとして同じ ARIA ロールのある要素の中に含まれていない限り、<header> 要素は、ウェブサイト全体の banner ランドマークロールと同じ意味を持ちます。これはグローバルサイトヘッダーを定義します。通常、ロゴ、会社名、検索機能、場合によってはグローバルナビゲーションやスローガンを含むことがあります。一般的にページの上部に配置されます。

そうでない場合、これらの要素内に内包されると、そのランドマークとしての地位を失い、周囲のセクションに対する導入部またはナビゲーション補助のグループを表します。通常、周囲のセクションの見出し(h1〜h6 要素)とオプションのサブ見出しが含まれていますが、これは必須ではありません。

歴史的な使用法

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

属性

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

アクセシビリティ

<header> 要素が banner ランドマークを定義するのは、そのコンテキストが <body> 要素のときです。

<article>、<main>、<section>、<nav>、<aside>、またはこれらの要素の暗黙の ARIA ロールと同じ ARIA ロールを持つ要素内に配置された場合、<header> 要素は代わりに generic ロールを持ち、ランドマークとはみなされなくなります。この場合、aria-label や aria-labelledby でラベル付けすることはできません。

例

ページのヘッダー

html

<header>
 <h1>メインページのタイトル</h1>
 <img src="mdn-logo-sm.png" alt="MDN ロゴ" />
</header>

結果

[フレーム]

記事のヘッダー

html

<article>
 <header>
 <h2>プランテットアース</h2>
 <p>
 <time datetime="2017-10-04">2017 年 10 月 4 日</time>に Jane Smith が投稿
 </p>
 </header>
 <p>
 青緑の惑星に住む私たちは、まだ見ぬことが数多くあります。
 </p>
 <p><a href="https://example.com/the-planet-earth/">続きを読む...</a></p>
</article>

結果

[フレーム]

技術的概要

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

仕様書

仕様書
HTML # the-header-element

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年4月12日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告