header要素

header要素は、最も近い祖先のセクショニング・コンテンツまたはセクショニング・ルートの要素のヘッダーとなるコンテンツを表します。ヘッダーには、前置きや補助的なナビゲーションのグループが含まれます。

また、最も近いセクショニング・コンテンツまたはセクショニング・ルートの要素の祖先がbody要素の場合のheader要素のコンテンツ(ヘッダーの情報)はページ全体に適用されます。

以下の例では、赤色のheader要素のコンテンツはページ全体のヘッダー情報であり、青色のheader要素のコンテンツはarticle要素のコンテンツのヘッダー情報を表しています。

例)

<body>
<header>
<h1>ドキュメントタイトル</h1>
<p><a href="xxxxx.html">News</a> -<a href="xxxxx.html">Blog</a> -<a href="xxxxx.html">Forums</a></p>
<p>Last Modified:20XX-XX-XX</span></p>
<nav>
<h2>Navigation</h2>
<ul>
<li><a href="xxxxx.html">All Entries</a></li>
<li><a href="xxxxx.html">Entry 1</a></li>
<li><a href="xxxxx.html">Entry 2</a></li>
</ul>
</nav>
</header>

<main>
<article>
<header>
<h2>記事タイトル</h2>

<aside>
<p>記事のリードのセクション</p>
</aside>
</header>

<div>
<p>内容</p>
<p>内容</p>
</div>

<footer>
<p>Posted 20XX-XX-XX</p>
</footer>
</article>
...more blog posts...
</main>

<aside>
<nav>
<h3>Related Links</h3>
<ul>
<li><a href="http://example.ttt.jp/">example site1</a></li>
<li><a href="http://example.sss.jp/">example site2</a></li>
</ul>
</nav>

<nav>
<h3>Friends of the blog</h3>
<ul>
<li><a href="http://example.aaa.jp/">AAAさんのブログ</a></li>
<li><a href="http://example.bbb.jp/">BBBさんのブログ</a></li>
<li><a href="http://example.bbb.jp/">CCCさんのブログ</a></li>
</ul>
</nav>
</aside>

<footer>
<p>Copyright c 2014 The Example Company</p>
<p><a href="xxxxx.html">About</a> -<a href="xxxxx.html">Privacy Policy</a> -<a href="xxxxx.html">Contact Us</a></p>
</footer>
</body>

上記のHTMLドキュメント

なお、header要素は、セクションの見出し(h1-h6要素)を含むように意図されていますが、これは必須ではありません。header要素は、コンテンツのセクションのリスト、検索フォーム、または関連するロゴなどもコンテンツにすることができます。

カテゴリ
フロー・コンテンツパルパブル・コンテンツ
要素を使用することができる場所
フロー・コンテンツが使用できる場所。
コンテンツ モデル(内容に含めることのできる要素)
フロー・コンテンツheader要素footer要素、またはmain要素を除きます。)
コンテンツ属性
グローバル属性