HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<header>
ページまたはセクションの導入的なコンテンツを表します。通常、見出し、ロゴ、ナビゲーションなどが含まれます。
info
概要
<header> 要素は、その親要素（ページ全体、または <article>, <section> などのセクショニング要素）の**導入的なコンテンツ**を構成するグループとして使用されます。
通常、見出し要素（<h1> 〜 <h6>）、Webサイトのロゴ、検索フォーム、作成者情報、ナビゲーションリンク（<nav> 要素）などが含まれます。
play_circle
デモ (静的表示)
HTML (Source)
<header>
<h1>サイトのタイトル</h1>
<p>サブタイトルやスローガン</p>
<nav>
<a href="#">ホーム</a>
<a href="#" class="button-link">サービス</a>
</nav>
</header>
Preview (Result)
サイトのタイトル
サブタイトルやスローガン
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| グローバル属性 | 全てのHTML要素で使用可能な属性（id, class, style, data-*, hidden など）が使用可能です。 |
| 特有の属性 | <header> 要素には、これ以外の特有の属性はありません。 |
| target | この要素には使用できません。 |
| rel | この要素には使用できません。 |
code
実用例
1. メインのWebサイトヘッダー
<body>
<header>
<div class="site-logo">MySite</div>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">概要</a></li>
</ul>
</nav>
</header>
...
</body>
2. 記事内のヘッダー（記事タイトルと著者情報）
<article>
<header>
<h1>この記事の素晴らしいタイトル</h1>
<p>著者: <a href="#author">Search3958</a></p>
<time datetime="2025-12-14">公開日: 2025年12月14日</time>
</header>
...
</article>
3. セクション内のヘッダー
<section>
<header>
<h2>製品一覧</h2>
<p>現在販売中の製品ラインナップをご紹介します。</p>
</header>
...
</section>
lightbulb
知っておくべき重要事項
description
セマンティクスと使用箇所
<header> 要素は、**セクショニングルート（<body>, <article>, <section> など）ごと**に複数回使用できます。ただし、**<address> または <footer> の子孫要素として配置することはできません**。
accessibility_new
アクセシビリティ
ページ直下の
ページ直下の
<header> は、スクリーンリーダーによってWebサイトのメインヘッダーとして認識されます。適切にサイトの主要な見出し（通常 <h1>）を含めることで、利用者がページの全体像を把握しやすくなります。