【HTML5】「header」要素について

公開日：2014/02/04

更新日：2014/02/04

カテゴリー: HTML・CSS

HTML5ではこれまでなかった要素が追加されました。その中に「header」要素があります。

ここでは、header要素についてまとめています。

header要素とは？

header要素の仕様はこのようになっています。

header要素は導入部やナビゲーションの補助を表す。
header要素は、通常は、見出し（h1–h6 要素やhgroup要素）を入れることを想定してる。しかし、これは必須ではない。
また、コンテンツの目次や検索フォームや関連のロゴを囲むためにも使える。

※「hgroup」はHTML5から削除された。

仕様を読んでもいまいちピンとこなかったので、いろいろなサイトに目を通すことで、このように理解しました。

【セクショニング・コンテント】

article要素・nav要素・aside要素・section要素などのあるまとまった範囲を表す要素

header要素の使い方として、ページ上部のヘッダー部分（ロゴなどがある部分）で使用します。

すなわち、これまで

<div id="header">
<h1>ページの最重要見出し</h1>
</div>

のようにマークアップしていたところを

<header>
<h1>ページの最重要見出し</h1>
</header>

のようにします。

HTML5ではセクション（主にsection要素）を使ってマークアップしていき、そのsection要素の一番上に見出しタグ（h1～h6）を置きます。

その見出しタグはそのセクションのヘッダー部分に該当するので、次のようにできます。

<header>
<h1>ページの最重要見出し</h1>
</header>

<section>
<article>
    <header>
      <h1>記事タイトル</h1>
    </header>
      <p>記事文章</p>
</article>
</section>

※header要素は、その名前からページ上部に一つだけ設置するものとイメージしてしまいますが、このようにセクションの中でも使用できます。

※上では見出し「h1」が2つ使われていますが、HTML5では（適切なマークアップによって）「h1」を複数使用できます。

header要素をスタイリングする場合、ブロック・レベル要素として扱うことをCSSに明示する必要があります。

header{
display: block;
}

あわせて読んでほしい！

まだコメントはありません。

コメントフォーム