ウェブランサー

<header> セクションの先頭となるグループを表す

取り扱い HTML5から追加された要素
カテゴリ フロー・コンテント
パルパブル・コンテント
親にできる要素 フロー・コンテンツが期待される場所
子にできる要素 フロー・コンテンツ
対応ブラウザ <header>の対応状況を確認する

<header>タグの説明

<header>は、イントロダクションやナビゲーションなど、セクションの先頭となるグループを表します。よく使われる場所として、<body>直下や<article>直後が挙げられます。

例えば、ウェブページの最上部に<header>を設置し、子要素に<h1>を置いてサイト名を記述したとします。その場合、分取構造上の意味として、サイト名がウェブページの導入部分であると宣言したことになります。

この要素は、見た目のレイアウト目的で使うべきではありません。レイアウトとしてのヘッダーをマークアップしたい場合には、従来通り<div>を用いてCSSでデザインしてください。<header>は、あくまで文章構造上のコンテンツの先頭、導入部を表すものです。

別の例として、ページの中に独立した記事やコンテンツがある場合、<article>の子要素に<header>を記述することが考えられます。<header>に含まれる内容は、記事の見出しや著者、公開日時などの導入部分にあたるものです。

<header>は、ページのメタ情報を記述する<head>とは別の要素です。似たような綴りですが、役割りは異なります。混合しないように気をつけましょう。

<header>タグの特徴

<header>は、ページ内に複数使うことができます。この要素自体を入れ子構造にすることはできません。

この要素はセクショニングコンテントではないので、アウトラインに影響を与えません。

<header>タグに指定できる属性

グローバル属性
基本的に全てのHTML要素に共通で指定できる属性です。
イベントハンドラ
基本的に全てのHTML要素に指定することができるコンテンツ属性です。

<header>タグの使い方とサンプル

以下の例は、ページの最上部にサイト全体の先頭部分にあたる情報をまとめて、<header>で囲った場合の記述です。

HTML
<body>
	<header>
		<h1>サイト名</h1>
		<h2>このサイトのキャッチコピー</h2>
		<nav>
			<ul>
				<li><a href="home">ホーム</a></li>
				<li><a href="blog">ブログ</a></li>
				<li><a href="contents">コンテンツ</a></li>
				<li><a href="sitemap">サイトマップ</a></li>
				<li><a href="contact">コンタクト</a></li>
			</ul>
		</nav>
	</header>

	<main>
		<section>
			<h1>コンテンツの見出し</h1>
			<p>コンテンツの内容。コンテンツの内容。</p>
			<p>コンテンツの内容。コンテンツの内容。</p>
		</section>
	</main>

	<footer>
		フッターの内容
	</footer>
</body>

続いて、<article>の中に<header>を用いて、メインコンテンツの先頭部分を明確化した場合のサンプルです。

HTML
<article>
	<header>
		<h1>コンテンツの見出し</h1>
		<time datetime="2045-10-10" pubdate>2045年10月10日</time>
		<cite><a href="https://twitter.com/xxxxxx">@著者アカウント</a></cite>
	</header>

	<section>
		<h1>セクションの見出し</h1>
		<p>コンテンツの内容。コンテンツの内容。</p>
		<p>コンテンツの内容。コンテンツの内容。</p>
	</section>

	<section>
		<h1>セクションの見出し</h1>
		<p>コンテンツの内容。コンテンツの内容。</p>
		<p>コンテンツの内容。コンテンツの内容。</p>
	</section>
</article>

<header>に関連するHTMLタグ

セクション要素
<address> 連絡先(問い合わせ先)として扱う
<article> 自己完結した記事であることを示す
<aside> 本筋から分離しても問題のない余談や補足を表す
<body> ページ本体の表示領域
<footer> セクションのフッターを表す
<h1> 〜 <h6> 見出しを指定する
<header> セクションの先頭となるグループを表す
<hgroup> 見出しをグループ化してセクションのヘッダを表す
<nav> ページ上の主要なナビゲーションであることを表す
<section> ウェブページ内の文章構造におけるセクションを定義する