header要素

header要素は、ドキュメントやセクションのヘッダーであることを示す要素。

カテゴリー フロー・コンテンツ。パルパブル・コンテンツ。
コンテキスト フロー・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル フロー・コンテンツを内包できる。
ただし、header要素、footer要素を子孫要素に持つことはできない。
属性 グローバル属性。
ブラウザ対応

要点

  • header要素は、ヘッダーであることを示す要素である。
  • header要素内には、ドキュメント（文書）やセクションの見出し、概要、ナビゲーションなどを配置する。
  • header要素内には、ドキュメントやセクションのテーマを括った見出し要素（h1～h6要素）を用意するのが一般的だ。必須ではない。
  • header要素は、セクショニング・コンテンツではない。新たなセクションを区画することはない。
  • header要素は、HTML5にて新たに導入された要素である。

ヘッダーに含める主な内容

header要素内に配置する具体的な例。

  • ページタイトル
  • ページの概要
  • グローバル・ナビゲーション
  • ページ内リンク
  • 記事タイトル
  • セクションの見出し
  • セクションの概要
  • 検索フォーム

場合によっては、日時や作者などを含めることもあるかもしれない。私ならフッターに含めるが…。

サンプルコード

<header>
	ヘッダー。
</header>

サンプル

HTMLソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
</head>
<body>
	<header>
		<h1>ページタイトル</h1>
		<p>ページの概要。</p>
		<nav>グローバルナビゲーション</nav>
	</header>
	<article>
		<header>
			<h2>記事タイトル</h2>
			<p>記事の概要。</p>
		</header>
		<section>
			<header>
				<h3>セクションの見出し</h3>
				<p>セクションの概要。</p>
			</header>
			<p>記事の内容。</p>
			<p>...</p>
		</section>
	</article> 
</body>
</html>

実際の表示