HTML

HyperText Markup Language header element.

header 要素

　header要素は、ページまたはセクションのヘッダー領域を定義します。通常は、該当のセクションの見出し要素（h1～h6要素）や hgroup要素などに加え、該当のセクションに関する概要やナビゲーションなどを入れて使います。

　なお、header要素は、区分コンテンツではありません。つまり、この要素が新たなアウトラインを生成することはありません。すなわち header要素は通常、自身を含む section要素の見出しを含むことを意図していますが、見出しを入れる事は必須ではありません。例えば、ページヘッダーであれば、サイト内検索のフォームやロゴ表示に使う事も可能です。また、セクションのヘッダーであれば、その目次に該当するナビゲーションに使う事もできます。

　この header要素は h1〜h6要素の見出しや、head要素の文書のヘッダ情報とは異なりますので注意が必要です。


<header id="page_header">
	<h1>Waste Of Time</h1>
</header>

　ページの header要素は１つに限定されていません。個々のセクションや記事にも header要素を追加できるので、id属性を使って要素を一意に識別すると役立つ可能性があります。一意な ID を割り当てれば、CSS による要素のスタイル設定や JavaScript による要素の検索が容易になります。

HTML5へのバージョンアップによる変更点

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

header要素の概要

Category 「カテゴリー」
Flow content 「フロー・コンテンツ」
Palpable content 「パルパブル・コンテンツ：知覚可能コンテンツ」
Content model 「コンテンツ･モデル」
Flow content 「フロー・コンテンツ」
ただし、この要素の子孫に header 要素と footer 要素を入れてはいけません。
利用可能な場所
フロー・コンテンツが期待される場所。
ただし、address 要素、footer 要素、他の header 要素の子孫要素として配置してはなりません。
タグの省略
不可。開始タグと終了タグの両方が必要。
要素固有のコンテンツ属性
なし。この要素にはグローバル属性のみがあります。
標準的なスタイル

header {
	display: block;
}
暗黙の ARIA ロール
banner, または article, aside, main, nav, section の各要素、または role=article, complementary, main, navigation, region の要素の子孫である場合は対応するロールなし。
許可されている ARIA ロール
group, presentation, none
DOM インターフェイス
HTMLElement

ページ・ヘッダー

　次の例は、ページヘッダーにサイト名称やロゴなどを入れた、典型的な header要素の利用例です。

ページ・ヘッダーのマークアップ例


<header>
	<hgroup>
		<h1>Waste Of Time</h1>
		<h2>This site is study room for me.</h2>
	</hgroup>

	<nav>
		<ul>
			<li><a href="" title="Home Page">Home Page</a></li>
			<li><a href="https://jbbs.livedoor.jp/shop/2263/">Bulletin Board System</a></li>
			<li><a href="links.html">Links</a></li>
			<li><a href="sitemap.html">Site Map</a></li>
		</ul>
	</nav>
</header>

セクション・ヘッダー

　次の例は、ブログ記事のヘッダーのマークアップ例です。

セクション・ヘッダーのマークアップ例


<article>
	<header>
		<nav>
			<ul>
				<li>« <a href="foo.html">HTML5 3Days Tech Talk</a></li>
				<li><a href="">html5doctor の日本語訳を公開しました</a> »</li>
			</ul>
		</nav>
		<div><time datetime="2009-10-05T01:25:03+09:00">2009年10月5日</time> by YOU</div>
		<h1>Canvas のアクセシビリティ</h1>
	</header>
	 :
	 :
	 :
</article>