header - イントロダクションやナビゲーションの支援となるヘッダ

通常は、セクションの見出し(h1–h6 要素や hgroup 要素)を入れることを想定していますが、必須というわけではなく、セクションの目次や検索フォームや関連ロゴを囲むために使うことも可能です。
・header要素はセクショニング・コンテンツ(見出しやフッターの範囲を定義するコンテンツ)ではありません。

header要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
header - - - -

header要素のHTML4からHTML5への変更点

header要素は、HTML5から新たに追加された要素です

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。

「基本的な例」のサンプル

HTMLコード

<header>
 <p>ようこそ!</p>
 <h1>ページのタイトル</h1>
</header>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「基本的な例」のサンプルプレビューを確認

「少し複雑になった例」のサンプル

HTMLコード

<header>
 <hgroup>
  <h1>header要素の仕様について</h1>
  <h2>これは実装デモです。</h2>
 </hgroup>
 <dl>
  <dt>header要素に入れるべき物</dt>
  <dd>h1要素やhgroup要素を入れることを想定</dd>
  <dt>header要素に入れるべき物</dt>
  <dd>グローバルナビゲーション、目次、ロゴなども含めることは可能です。この時に適切なHTML要素であれば自由に要素を指定できます。</dd>
  <dt>header要素はセクショニング・コンテンツ(見出しやフッターの範囲を定義するコンテンツ)ではありません。</dt>
  <dd>少しややこしいですが、header要素で区切られたからといってそれに続く要素との関係が切れるということにはなりません。</dd>
 </dl>
</header>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「少し複雑になった例」のサンプルプレビューを確認

「header要素はセクショニング・コンテンツではないことを示す例」のサンプル

HTMLコード

<header>
  <h1>header要素はセクショニング・コンテンツではないことを示す例</h1>
  <h2>サブ見出し1</h2>
  <p>この要素は、『サブ見出し1』の内容になります。</p>
  <h2>サブ見出し2</h2>
</header>
<p>この要素は、header要素の外にいますが、『サブ見出し2』の内容になります。</p>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「header要素はセクショニング・コンテンツではないことを示す例」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2010/WD-html5-20100624/sections.html#the-header-element)