<header></header>
| ブラウザ |
|
|---|---|
| 分類 | フロー・コンテンツ / パルパブル・コンテンツ |
| 利用場所 | フロー・コンテンツが置ける場所 |
| 内容 | フロー・コンテンツ（ただし、header要素、footer要素、main要素は含められない / HTML 5.1では若干異なります 本文参照） |
header要素は、文書、またはセクションのヘッダを表します。
この要素の内容には、見出しが含まれているのが自然です。（しかし、必須ではありません）
<header>
ヘッダを表します
</header>
header要素の内容には、セクション（または文書全体）に対するイントロダクションやナビゲーションの手助けとなる内容を配置します。具体的には、次のような内容を配置することになります。
- 見出し（ページのタイトル、セクションの見出し）
- リンクメニュー（グローバルナビゲーション、ページ内リンクのメニュー、補助的なリンクメニュー）
- イントロダクション（序説、前置き）
- 発行日時（文書や記事の発行日時）
- 検索フォーム（サイト内検索、商品検索）
- 関連ロゴ（サイトや企業のロゴ）
- 発行日時については、footer要素の方が適している場合もあります。
配置場所について
この要素をbody要素の子要素として配置した場合は、文書全体のヘッダを表すことになります。
<body>
<header>
<h1>HTMLの基本</h1>
<p>このページは、HTMLの基本的な情報を ...</p>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="html.html">HTML</a></li>
<li><a href="css.html">CSS</a></li>
</ul>
</nav>
</header>
...
</body>
セクション内に配置した場合は、そのセクションのヘッダを表します。例えば、article要素の子要素として配置した場合は、その記事に対するヘッダを表すことになります。
<article>
<header>
<h2>HTML5とは</h2>
<p>この記事では、HTML5とはどういうものなのか ...</p>
</header>
...
</article>
セクションについて
header要素はセクショニング・コンテンツではないため、新たなセクションを生成しません（アウトラインに影響しません）。
要素の内容に関して
HTML5ではheader要素内に別のheader要素やfooter要素を含められませんが、HTML 5.1ではheader要素内にセクショニング・コンテンツを配置している場合に限り、そのセクショニング・コンテンツの内容としてheader要素およびfooter要素を配置できるようになりました。
下記のコードはHTML 5.1の場合に有効です。（HTML5では誤りとなります）
<article>
<header>
<h1>マークアップについて</h1>
<aside>
<header>
<h2>著者：山田太郎</h2>
<p><a href="yamada.html">著者の詳細情報</a></p>
</header>
<p>HTML歴20年のベテランだが、コーディングは雑である。</p>
</aside>
<p>この記事では、HTMLはどのようにマークアップするべきなのかを ...</p>
</header>
...
</article>
- HTML 5.1における変更点
-
- 条件付きとなりますが、header要素の内容に別のheader要素およびfooter要素を配置できるようになりました。
使用例
<!DOCTYPE html>
<html>
<head>
<title>文書のタイトル</title>
</head>
<body>
<header>
<h1>文書のタイトル</h1>
<p>この文書に関する簡単な説明 ...</p>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="html.html">HTML</a></li>
<li><a href="css.html">CSS</a></li>
</ul>
</nav>
</header>
<article>
<header>
<h2>記事のタイトル</h2>
<p><time datetime="2011-11-22">平成23年11月22日</time></p>
</header>
<p>記事の内容 ...</p>
</article>
<article>
<header>
<h2>記事のタイトル</h2>
<p><time datetime="2011-11-17">平成23年11月17日</time></p>
</header>
<p>記事の内容 ...</p>
</article>
</body>
</html>