セクションについて

HTML5では、セクションを入れ子にすることで文書の階層構造を表せるようになりました。

このページでは、セクションがどのように生成されるのかを簡単に説明しています。

暗黙的なセクション

h1-h6要素を配置すると、そこに暗黙的なセクションが生成されることになります。

次の例では、bodyセクションの中にランク2のセクションを(暗黙的に)配置しています。(ランク1はbodyセクションの見出しとなります)

<body>

<h1>ランク1</h1>
<h2>ランク2</h2>

</body>

直前の見出しよりも低いランクを配置した場合は、子セクションが生成されます。次の例では、ランク2のセクション内にランク3のセクションが配置されていることになります。

<h2>ランク2</h2>
<h3>ランク3</h3>

直前の見出しと同じランクを配置した場合は、新規のセクションが生成されます。次の例では、同じ階層に2つのセクションが配置されていることになります。

<h2>ランク2</h2>
<h2>ランク2</h2>

直前の見出しよりも高いランクを配置した場合も、新規のセクションが生成されることになります。

<h2>ランク2</h2>
<h3>ランク3</h3>
<h2>ランク2</h2>

明示的なセクション

セクショニング・コンテンツを使用すると、セクションの範囲を明確に示すことができます。

例えば、上記の4つのサンプルコードをsection要素でマークアップし直すと次のようになります。

<body>

<h1>ランク1</h1>

<section>
<h2>ランク2</h2>
</section>

</body>
<section>
<h2>ランク2</h2>

<section>
<h3>ランク3</h3>
</section>

</section>
<section>
<h2>ランク2</h2>
</section>

<section>
<h2>ランク2</h2>
</section>
<section>
<h2>ランク2</h2>

<section>
<h3>ランク3</h3>
</section>

</section>

<section>
<h2>ランク2</h2>
</section>
  • HTML5では、セクショニング・コンテンツを使って明示的にマークアップすることが推奨されています。

セクショニング・ルート

セクショニング・ルートに属する要素は、その内部に独自のアウトライン(階層構造)を持つことができます。この要素内に配置される見出しとセクションは、文書全体のアウトラインからは切り離して扱われるようになります。

そのため、次のblockquote要素内のh1要素は、その前後のセクションには影響を及ぼさないことになります。

<h2>ランク2</h2>

<blockquote>
<h1>ランク1</h1>
</blockquote> 

<h3>ランク3</h3>

<h2>ランク2</h2>

明示的なマークアップでは次のようなコードになります。

<section>
<h2>ランク2</h2>

<blockquote>
<h1>ランク1</h1>
</blockquote> 

<section>
<h3>ランク3</h3>
</section>

</section>

<section>
<h2>ランク2</h2>
</section>
  • ランク3のセクションは、ランク1ではなくランク2のセクション内に含まれていることになります。

アウトラインについて

アウトラインとは、最上位のセクションから始まる各セクションの階層構造を意味します。

<body>

<h1>ランク1</h1>
<p>セクションの内容</p>

<section>
<h2>ランク2</h2>
<p>セクションの内容</p>

<section>
<h3>ランク3</h3>
<p>セクションの内容</p>
</section>

</section>

<section>
<h2>ランク2</h2>
<p>セクションの内容</p>
</section>

<section>
<h2>ランク2</h2>
<p>セクションの内容</p>
</section>

</body>

例えば、上記のソースコードのアウトラインは次のようになります。

1. ランク1

    1-1. ランク2

        1-1-1. ランク3

    1-2. ランク2

    1-3. ランク2