スタイルシート

HTML5のセクション要素で組むサンプル

セクション要素:<article><aside><section><nav>

セクションと見出し

文章を制作するとき、章・節・項といったレベル(階層)がある。HTMLでは、章・節・項を分けるときにsection要素を使用して明示的に章・節・項といった固まりを示す事ができる。
そのレベル(階層)は、h1〜h6の見出し要素で示す。セクションと見出しは密接に関わっている。

見出しのレベルで暗示的にセクションができる

セクション内にある最初の見出しのレベルで、そのセクションのレベルが決定される。ただし、その後に別の見出しがある場合は、特にセクションを示す要素が無くても、暗黙のセクションができる事になっている。
後に続く見出しが、前の見出しのレベル以上であれば、そこで前のセクションは終了し、新しい暗黙のセクションが開始される。
後に続く見出しのレベルが小さければ、元のセクションに含まれる暗黙のサブセクションとして認識される。

セクション要素で明示的にしよう

見出しによって暗示的なセクションが認識されるが、セクションである範囲には、明示的にセクション要素を付けて、適切な見出しをつけることが推奨されている。
セクション要素で明示的に区切る事によって、h1〜h6の見出し要素はセクション内に自由に入れる事ができるようになった(例えば同じページ内にh1が何度出てきてもOK)。しかし「セクションのレベルにあった適切な見出しを入れる」ことが推奨されている。

セクションに分ける要素

このサンプルでは、<section>要素を使って、ここから上のセクションと区切っている。
セクションを表す要素は、<section>のほかに<article><aside><nav>の合計4つ。

<article>は、本文中の完結した内容を区切る役目。
<aside>は、本文中のメインコンテンツでない部分(例えばサイドメニュー)を分ける役目。
<section>は、<article><aside>内で、レベルをわける役目。見出し要素が必要。
<nav>は、メインナビゲーション部分を特定する。

この他に <header><footer>要素を使用して、ヘッダー部分とフッター部分を区切る。

about