HTML Living Standard/header
header 要素
[編集]<header> 要素は、HTML文書やセクションのヘッダー（導入部分）を定義するために使用されるセマンティック要素です。通常、見出しやナビゲーションリンクを含むことが多く、コンテンツの構造を明確にするために重要です。
概要
[編集]- 役割: ページ全体または各セクションの先頭に配置され、そのセクションのタイトルやナビゲーション情報を提供します。
- 複数の使用:
<header>要素は、文書内で複数回使用できます。ただし、<header>をページ内のセクションではなく単独で使用することは推奨されません。
使用例
[編集]ページ全体のヘッダーとしての例
[編集]<header> 要素は、Webページ全体のヘッダーとして使用できます。以下の例では、ロゴやナビゲーションメニューが含まれています。
<header> <h1>ウェブサイトのタイトル</h1> <nav> <ul> <li><a href="#home">ホーム</a></li> <li><a href="#about">私たちについて</a></li> <li><a href="#contact">お問い合わせ</a></li> </ul> </nav> </header>
セクションごとのヘッダーとしての例
[編集]<header> 要素は、セクション内の導入部分にも使用できます。以下の例では、ブログ記事内のセクションにヘッダーが含まれています。
<article> <header> <h2>ブログ記事のタイトル</h2> <p>2025年1月6日 投稿者: 太郎</p> </header> <p>この記事ではHTMLセマンティック要素について解説します。</p> </article>
- 許可される親要素: フローコンテンツを持つほぼすべての要素（例:
<body>、<section>、<article>、<aside>など）。 - 使用できない場所: 以下の要素の中には含められません：
属性
[編集]<header> 要素は、グローバル属性をサポートします。
グローバル属性の例
[編集]以下の例では、class と id 属性を使用してスタイリングやスクリプト操作を可能にしています。
<header id="main-header" class="site-header"> <h1>サイトのタイトル</h1> </header>
アクセシビリティの考慮
[編集]<header> 要素を使用することで、スクリーンリーダーなどの支援技術が文書の構造を正確に理解できます。特に、見出しタグ（例: <h1>、<h2>）を適切に使用することが推奨されます。
ベストプラクティス
[編集]- 明確な文書構造: 各セクションやページ全体に関連するヘッダーとして使用する。
- 一貫性:
<header>要素内には、関連する見出しやナビゲーションが含まれていることを確認する。 - 適切な階層: 見出しタグ（例:
<h1>から<h6>）を使って文書の階層を明確にする。
注意点
[編集]<header>要素は、文書全体またはセクションの先頭部分に適していますが、スタイリング目的でのみ使用することは避けてください。<header>要素を<footer>や<address>内に含めるのは仕様上禁止されています。
例外的な使用
[編集]ページのヘッダーに複数の <header> 要素を使用することも可能ですが、それぞれが異なるセクションや目的に関連している場合にのみ推奨されます。
まとめ
[編集]<header> 要素は、文書やセクションの導入部分を構造的かつ意味論的に定義するために不可欠な要素です。適切に使用することで、文書の可読性やアクセシビリティ、SEOの効果が向上します。