header 要素
最近、HTML5 が盛り上がってきてており、ウェブのプロフェッショナルたちにも採用されている。HTML5 仕様の中に、新たに追加されたタグがたくさんあることに気づくだろう。そのうちのひとつ、<header> 要素が、この投稿でお伝えしたいことだ。いつ使うのか、いつ使うべきではないのか、それに何を入れることができるのか、そして、それに何を入れてはいけないのか、について話そう。用意はいいかい？ じゃぁ、はじめよう。
みなさんは、このようなマークアップを見たことがあるだろう。
<div id="header">みなさんが訪問するほとんどのサイトでは、HTML5 を使えば、もうこれは要らない。<header> 要素を使えば、もっとセマンティックな値を加えることができる。
この要素は何を表しているのか？
仕様によると、header 要素は次の通りだ。
イントロダクションやナビゲーションの支援となるグループを表します。header 要素は、通常は、セクションの見出し（h1–h6 要素や hgroup 要素）を入れることを想定しています。しかし、コンテンツの目次や検索フォームや関連のロゴなど、他のコンテンツを入れることもできます。
<header> 要素は新たなセクションを導入しないが、それはセクションの先頭である、という点が重要だ。<header> 要素は <head> 要素と混同してはいけない点にも注意してほしい。
<header> 要素をどこで使うのか？
明らかな場所といえば、ページの最初だろう。主要なページの見出しを入れるようなもので始めることができる。
<header>
<h1>ページの最も重要な見出し</h1>
</header>
注目すべき重要なポイントは、サイトに <header> 要素をひとつしか使ってはいけないという制約はない、ということだ。複数のヘッダーを使っても構わない。それぞれのヘッダーは、ドキュメントの各セクションに対する <header> になることができる。それゆえに、このようにすることができるだろう …
<header>
<h1>ページの最も重要な見出し</h1>
</header>
<article>
<header>
<h1>記事のタイトル</h1>
</header>
<p>...Lorem Ipsum dolor set amet...</p>
</article>
html の中に 2 つの <h1> が使われている点にも注意してほしい。これは、HTML5（そして HTML4）では完全に妥当だ。しかし、アクセシビリティで問題が起こる。そのため、もし 1 つのページ内に数多くの記事があるなら、気をつけた方がいいだろう。私たちは、これについては、別の投稿で詳細に扱っているつもりだ。
<header> 要素の中に何が必要か
私たちは、ページに複数のヘッダーを入れることができるということは分かっている。しかし、それが妥当であるために、この要素の中に何をどんな順番で入れなければいけないのだろう？
簡単に言うと、通常、<header> 要素には、少なくとも 1 つ（しかし制約されているわけではない）の見出しタグ（<h1> – <h6>）を入れる。<hgroup> 要素も入れることができるが、それについては別の投稿で詳しく話そう（詳細は hgroup の仕様を読んでほしい）。この要素には、目次やロゴや検索フォームといったコンテンツも、ドキュメント・フローに入れることができる。最近の仕様変更によると、<header> の中に、<nav> 要素も入れることができるようになった。
<header> をスタイリングする
私が言いたいポイントは、主要なブラウザーで <header> 要素がブロック・レベル要素としてレンダリングされるようにするために、それをブロックとして CSS で明示的に宣言する必要があるという点だ：
header { display:block;}実際には、HTML5 の主要なブロック・レベル要素に対して、こうする必要がある。ブラウザーがこれをデフォルトとしたら、すぐに、私たちは、あなたが CSS から貴重なバイトを節約できることをお知らせするつもりだ。しばらくの間は、この wiki でレイアウト・エンジンに実装されたかどうかをチェックしてほしい。
結論
まとめると、<header> 要素は、私たちに、セクションの先頭を記述するために、すばらしいセマンティックな値を与えくれる。