HTMLセクションについて、またはそれに関連するセクションと見出しの関係、アウトライン、セクショニングルート、暗黙のセクション、についても説明します。
目次
セクションとは
- セクションとは、HTML文書の「章」や「節」をあらわすものです。
- セクションは、「見出し（主題）の及ぶ範囲にあるコンテンツのグループ」と言い換えることができます。
-
セクションを定義する要素としては、以下が存在します。
- article要素
- aside要素
- nav要素
- section要素
セクションと見出しの関係について
- セクションと見出しは基本的に２つ合わせて使用します。
- 一般的な文書の「章」の先頭には見出し（主題）があるように、セクションを定義する要素の先頭には見出しの要素を配置します。
-
見出しを定義する要素としては、以下が存在します。
- h1要素 , h2要素 , h3要素 , h4要素 , h5要素 , h6要素
- 「セクションと見出しは２つ合わせて使用するのが基本」ですが、セクションに見出しをつけることは必須ではありません。
- 不要であれば見出しをつけなくても問題ありません。
- 見出しを使用する際は、必ずセクションの要素で囲わなければならないという訳でもありません。
- セクションの要素がない見出しには、暗黙のセクションがあるものとして扱われます。
- 以下は、セクションと見出しの記述例です。
セクションと見出しの記述例
<article>
<h2>記事のタイトル1</h2>
<section>
<h3>節のタイトル1</h3>
</section>
<section>
<h3>節のタイトル2</h3>
</section>
</article>
<aside>
<h2>サイドバー</h2>
</aside>
アウトラインとは
- アウトラインとは、セクションと見出しが２つ合わせて使用されているという前提で、「見出しのみを抜き出してその文書構造を示したもの」のことを指します。
- body要素は「セクションを定義する要素ではありませんが、文書全体の親セクション」として機能しています。そのため、その見出しはアウトラインに現れます。
- 下記に、サンプルHTMLとそれに対応するアウトラインの例を示します。
サンプルHTML
<body>
<h1>サイトのタイトル</h1>
<article>
<h2>記事のタイトル1</h2>
<section>
<h3>節のタイトル1</h3>
</section>
<section>
<h3>節のタイトル2</h3>
</section>
</article>
<aside>
<h2>サイドバー</h2>
</aside>
</body>- 上記HTMLに対するアウトラインは、次のようになります。
サンプルHTMLのアウトライン
1.サイトのタイトル
1.記事のタイトル1
1.節のタイトル1
2.節のタイトル2
2.サイドバー
セクショニングルート
- セクショニングルートとは、「外部とは無関係のアウトラインを独自にもつ要素」のことを指します。
-
セクショニングルートには、以下の要素があります。
- body要素 , blockquote要素 , details要素 , fieldset要素 , figure要素 , td要素 ,
- h1～h6要素は、セクションの見出しだけではなく、セクショニングルートの見出しにもなります。
暗黙のセクション
- 暗黙のセクションとは、「見出しがセクションと合わせて使用されなかった時にブラウザによって認識されるセクション」のことを指し、アウトラインも作成します。
-
暗黙のセクションは、その見出しのランク（h1～h6要素の数字）によって、以下のようなルールで処理されます。
- 前の見出しのランクが同等か高い場合
見出しの直前で前のセクションを終了させ、新しい暗黙のセクションを開始させる。 - 前の見出しよりもランクが低い場合
前のセクションの内部のサブセクションとして、新しい暗黙のセクションを開始させる。
- 前の見出しのランクが同等か高い場合
