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

公開日:
更新日:
カテゴリー: HTML・CSS

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

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

header要素とは?

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

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

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

私の理解

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

  • header要素はページのヘッダー部分で使用する。また、各セクション(セクショニング・コンテント)のヘッダー部分でも使用できる。
  • ページ内に複数記述できる。
  • header要素はアウトラインに影響を与えない(アウトラインレベルを下げない)。
  • header要素内に「nav」要素を入れることができる。

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

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

header要素の使い方

ページのヘッダー部分で使う

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要素をスタイリングする

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

header{
  display: block;
}

 

頑張って書いたのでちょろっと読んでほしい!

 

コメント

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

コメントフォーム
お名前
コメント