【HTML5】「header」要素について
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;
}
あわせて読んでほしい！
今年（2017年）の3月に7年間勤めた公務員を退職して現在ニートしているアホです。ニート歴5か月目に突入！ﾔﾊﾞｲ
【経歴】
- 公立高校
- 国立大学
- 国立大学大学院（専門は生物化学領域）
- 公務員
- ニート（今ここ）
- ？？？
【一言】
（公務員やめた後悔は正直）ある
関連してそうなオススメ記事
コメント
まだコメントはありません。