HTML5 【 レイアウト 】３ ～ セクション要素と見出し要素

HTML5 【 レイアウト 】１ ～ 新要素を使った書き方のイメージ、HTML5 【 レイアウト 】２ ～ article、aside、section、navで、HTML5の新要素であるセクション要素（article、aside、section、nav）について紹介しましたが、セクションは見出し(h1 ～ h6)と密接な関係があります。
今回は、セクション要素と見出し要素のルールについてまとめます。
　

目次

１．セクション要素
２．一般的な形
３．例外的な形
　

１．セクション要素

　
見出し要素（h1 ～ h6）は、数字の小さい方が文字の大きさも大きく、重要度も高いです。

例えば、h1がタイトル、h2は大項目、h3が小項目、．．．と数字が大きくなると重要さやまとまりのレベルが下がっていくイメージです。

HTML5より前のバージョンでは、見出し要素の数字から、項目のレベルや範囲が推測されていました。

HTML5から、セクション要素の<article><aside><section><nav>が加わったため、項目のレベルや範囲であるセクションを明確にすることができるようになりました。

どのセクション要素の中でも見出し要素（h1 ～ h6）が使えますが、特に<section>は、その中に見出し要素を含むことになっているので、<h1> ～ <h6>のレベルによって、<section>のレベル（階層の深さ）が明示されます。

▲目次へ戻る

　

２．一般的な形

　
セクション要素と見出し要素との関係は、次のような形が一般的です。

ページ全体のタイトルがh1、大見出しがh2、小見出しがh3と、セクション要素と見出し要素との階層のレベルが合っています。

▲目次へ戻る

　

３．例外的な形

　
さきほどのレイアウトに比べて不自然に見えるかもしれませんが、次のような構成も文法上は成立します。

ところで、セクション要素と見出し要素との間には以下のルールがあります。

[1]見出しレベルが前より下位になった場合には、前のセクションに含まれる暗示的サブセクションが開始する。
[2]見出しレベルが前より上位になった場合には、前のセクションはそこで終了し、新しい暗示的セクションが開始する。

このルールに従うと、さきほどのレイアウトは、下のようなイメージで成立していることになります。

<section>内の最初の見出しは、その<section>のレベルを決定します。

上の例で、最初の<section>の見出しはh2です。

そして、その次の見出しがh4なので、さきほどのルール[1]の通り、この見出し(h4の見出し)の所から暗示的なサブセクションが始まります。

さらに、その次の見出しがh1で上位になるので、さきほどのルール[2]の通り、前の見出し(h4の見出し)に基づくセクションが終了して、この見出し(h1の見出し)の所から新たに暗示的セクションが始まります。

文法上はOKで、暗示的サブセクションが生成されるとはいっても、上のような構成は書く方も見る方も大変ですので、このような構成の場合は理論上こうなるということを知った上で、２．一般的な形のようにわかりやすく構成していく方が良いと思います。

▲目次へ戻る