HTMLのヘッダー（Header）は、<header>タグで定義され、ウェブページまたはページ内のセクションの導入部分を示します。ヘッダーは通常、サイトのロゴ、サイトのタイトル、ナビゲーションメニュー、検索フォームなどの要素を含みますが、これらに限定されるわけではありません。
<header>タグの特徴
HTMLの<header>要素はウェブページ、またはウェブページ内の特定のセクションの導入部分やナビゲーションリンクを含むコンテナを定義するために使用されます。以下は<header>要素の主な特徴です。
- 導入コンテンツのグループ化:
<header>はロゴ、タイトル、著者情報、ナビゲーションメニュー、検索フォームなど、ページまたはセクションの導入に関連するコンテンツをグループ化するために使用されます。 - セクショニング要素:
この要素は文書の構造を明確にし、セクショニングコンテンツ（<article>、<section>、<aside>など）のヘッダーとして機能します。 - 再利用可能性:
<header>要素はページの異なる部分で再利用可能です。たとえば、記事ごとに独自の<header>を持つことができます。 - 多様なコンテンツの受け入れ:
<header>は単にナビゲーションメニューを含むだけでなく、ウェブページの導入部分に適した任意のHTMLコンテンツを含めることができます。 - 文書のアウトラインへの影響なし:
<header>はウェブページのアウトラインを形成するためには使用されませんが、ページ内で複数の<header>を使用することができます。 - アクセシビリティ:
正しくマークアップされた<header>は、スクリーンリーダーなどのアクセシビリティツールがページの構造を理解するのを助けます。 - 汎用性よりも特定性:
<header>はウェブページの全体的なコンテナではなく、特定のセクショニングコンテンツの導入部分に特化しています。そのため、ページ内での使用は適切なセクションに限定されるべきです。 - スタイリングの容易さ:
CSSを使用して<header>要素をスタイリングし、視覚的な区別をつけることが容易です。
<header>要素はページの他の部分と区別されるべき意味的な重要性を持ったコンテンツを持っているため、ウェブ開発者にとって重要なツールです。
<header>タグの使用
<!DOCTYPE html>
<html>
<head>
<title>ウェブサイトのタイトル</title>
</head>
<body>
<header>
<h1>ウェブサイトのロゴまたは名前</h1>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">私たちについて</a></li>
<li><a href="/services">サービス</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
<form action="/search" method="get">
<input type="search" name="q" placeholder="サイト内検索...">
<input type="submit" value="検索">
</form>
</header>
<!-- ページのメインコンテンツ -->
<main>
<!-- コンテンツ -->
</main>
<footer>
<!-- フッター情報 -->
</footer>
</body>
</html>この例ではヘッダーにはウェブサイトのタイトル、ナビゲーションメニュー、そして検索フォームが含まれています。これらの要素はウェブページの構造とデザインにおいて重要な役割を果たし、ユーザーがサイト内で必要な情報を簡単に見つけられるように助けます。
注意点
HTMLにおける<header>要素の使用に際しての注意点は以下の通りです。
- 一つの要素内に複数の
<header>: 一つのセクショニング要素（例えば<article>や<section>）内に複数の<header>を配置することは避けるべきです。通常、各セクショニング要素には一つの<header>があるのが最も適切です。 - ページ全体のヘッダー:
<header>はページ全体に関する情報だけでなく、特定のセクショニングコンテンツの導入部分としても使われます。そのため、ページに一つだけ<header>があるとは限りません。 - ネストされたセクション:
<header>要素は他のセクショニング要素の中にネストされることがあります。例えば、<article>の中に<header>が存在することがありますが、それはその<article>固有の導入部分を表します。 - 見出しの使用:
<header>要素内には通常、見出しタグ（<h1>から<h6>まで）が含まれますが、ページの主題を表すメインの見出しはページ全体の<header>要素内にのみ配置すべきです。 - ヘッダーの内容: ロゴ、ナビゲーション、サイト名、著者名、検索フォームなど、ページまたはセクションの導入に直接関連するコンテンツだけを
<header>に含めるべきです。 <header>と<head>の混同:<header>要素は表示されるページの一部であり、<head>要素（ページのメタデータを含む部分）とは異なります。この二つを混同しないようにしましょう。- アクセシビリティ:
<header>要素はアクセシビリティを向上させるために、適切なランドマークロールを提供します。スクリーンリーダーは<header>要素をナビゲーションの助けとして使用することができます。 - スタイルとクラスの使用:
<header>要素にスタイルを適用する際には、クラスやIDを使用して、ページ内の他の<header>と区別することが重要です。
これらの注意点を頭に置くことで、HTMLドキュメントの構造がより明確になり、ユーザーにとってナビゲートしやすいページを作成することができます。