<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>