<header></header>
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | フロー・コンテンツ / パルパブル・コンテンツ |
| 利用場所 | フロー・コンテンツが置ける場所 |
| 内容 | フロー・コンテンツ（ただし、header要素とfooter要素は含められない） |
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>HTMLとは</h2>
<p>この記事では、HTMLとはどういうものなのか ...</p>
</header>
...
</article>
セクションについて
header要素はセクショニング・コンテンツではないため、新たなセクションを生成しません。
- 旧HTMLからの変更点
-
- HTML5：header要素が定義されました。
- HTML5.1：条件付きで、header要素の内容に別のheader要素およびfooter要素を配置できるようになりました。
- HTML LS：仕様書から上記（5.1）の内容が削除されました。現行の仕様では、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="2021-12-19">令和3年12月19日</time></p>
</header>
<p>記事の内容 ...</p>
</article>
<article>
<header>
<h2>記事のタイトル</h2>
<p><time datetime="2021-12-17">令和3年12月17日</time></p>
</header>
<p>記事の内容 ...</p>
</article>
</body>
</html>