サイト内検索

header 要素

この記事は、html5doctor に掲載されている記事「The header element」を日本語訳したものです。この記事では、header 要素の正しい使い方が解説されています。

一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。

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> 要素は、私たちに、セクションの先頭を記述するために、すばらしいセマンティックな値を与えくれる。

もっと読む