<header></header>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / パルパブル・コンテンツ
利用場所 フロー・コンテンツが置ける場所
内容 フロー・コンテンツ（ただし、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>