<section>はアウトラインを明示するタグ

HTML5の<section>タグを使えば、文章構造の概要(アウトライン)を明確に示すことができます。

以前までのXHTML1.0で文章のアウトラインを示す場合、見出し要素の「h1~h6タグ」を組み合わせて使用することで暗黙的に示すことができましたが、HTML5では<section>を使用することではっきりと明示することができます。

「h1~h6タグ」による暗黙的なアウトライン

この以前までの見出し要素「h1~h6タグ」を使用した暗黙的なアウトラインというのは、例えば、以下のようなコンテンツがあったとします。

<h1>ホームページの作り方</h1>
<h2>ドメインの取得</h2>
<h2>ホームページスペースの確保</h2>
<h3>無料ホームページスペース比較</h3>
<h3>レンタルサーバー比較<h3>
<h4>個人向けレンタルサーバー</h4>
<h4>法人向けレンタルサーバー</h4>
<h2>アクセスアップの方法</h2>

この場合の文章のアウトラインは、暗黙的に以下のように解釈されます。

<h1>ホームページの作り方</h1>
┣ <h2>ドメインの取得</h2>
┣ <h2>ホームページスペースの確保</h2>
┃  ┣ <h3>無料ホームページスペース比較</h3>
┃  ┗ <h3>レンタルサーバー比較</h3>
┃     ┣ <h4>個人向けレンタルサーバー</h4>
┃     ┗ <h4>法人向けレンタルサーバー</h4>
┗ <h2>アクセスアップの方法</h2>

ChromeアドオンのHTML5 Outlinerなどを使えば、閲覧しているサイトのアウトラインを簡単にチェックすることができます。

HTML5 Outlinerのアドオン

これをh2タグの部分だけでコンテンツを構成すれば、以下のようになります。

この状態で、h2タグの「ホームページスペースの確保」の箇所により詳細なコンテンツを追加する場合、h3タグを使うことで以下のように階層化していきます。

さらにコンテンツを階層化する場合、h4を使えば一番上の画像のようになります。

つまり、h2、h3、h4になるにつれ、見出しのレベルがひとつづつ下がっていきますが、見出しの重要度によってhタグのレベルを変えることで文章の構造を暗黙的に示すことができるわけです。

けれども、HTML5の<section>要素を使えば、上記のように暗黙的にではなく、意図的に明確に文章のアウトラインを示すことができます。

<section>は「見出しタグ」とセットで使用する

この「section(セクション)」は「区画、区分」を表す言葉ですが、<section>タグは「見出しと文章」をひとつのセットとして使用します。

上記の例でいえば、以下のように使います。

<section>
<h1>ホームページの作り方</h1>
┣ <section>
┃  <h2>ドメインの取得</h2>
┃  <p>文章あれこれ</p>
┃ </section>
┣ <section>
┃  <h2>ホームページスペースの確保</h2>
┃  <p>文章あれこれ</p>
┃   ┣ <section>
┃   ┃  <h3>無料ホームページスペース比較</h3>
┃   ┃  <p>文章あれこれ</p>
┃   ┃ </section>
┃   ┣ <section>
┃   ┃  <h3>レンタルサーバー比較</h3>
┃   ┃  <p>文章あれこれ</p>
┃   ┣   ┣ <section>
┃   ┃   ┃  <h4>個人向けレンタルサーバー</h4>
┃   ┃   ┃  <p>文章あれこれ</p>
┃   ┃   ┃ </section>
┃   ┃   ┣ <section>
┃   ┃   ┃  <h4>法人向けレンタルサーバー</h4>
┃   ┃   ┃  <p>文章あれこれ</p>
┃   ┃   ┗ </section>
┃   ┗ </section>
┃ </section>
┣ <section>
┃  <h2>アクセスアップの方法</h2>
┃  <p>文章あれこれ</p>
┗ </section>
</section>

ただし、上の例では便宜上記載しましたが、一番外側の<section>については<body>や<article>などもセクションを作りますので、たいていの場合は二重になるために必要ありません。

例えば、以下のような形で書くと<body>タグのセクションの見出しがなくなってしまいます。

<body>
<section>
<h1>
<section>

つまり、<body>もセクションを生成するため、大雑把に言えば、以下のように<section>が二重になってしまいます。

<section>
<section>
<h1>
<section>

そのため、 一番外側は<section>で囲む必要はありません。

<body>
<h1>
<section>

このように<section>を使用することで、暗黙的ではなく、明確に意図的にアウトラインを生成することができます。ただし、h1、h2、h3など使用する場合と同じ結果になりますので、特に使用する必要性はないのかもしれません。

当サイト運営者は使用することはほとんどないです。