浜 俊太朗のHTML5マークアップ移行ガイド ― 第3回

HTML5のアウトラインとセクションを理解する (3/3)

セクションを明示するメリット

　セクションを明示するとアウトラインが分かりやすくなる以外にもメリットがあります。実務でイメージしやすい例としては、HTMLをコンポーネント化しやすいことが挙げられるでしょう。ある程度規模の大きいWebサイトの制作では、HTMLをパーツごとにコーディングし、それらを組み合わせて作っていく、いわゆる「コンポーネントコーディング」の手法がよく採られます。コンポーネントコーディングを採用している場合、ページ構成によっては見出しのレベルがうまく繋がらないことがあります。

　見出し要素のみでアウトラインを判別する場合、アウトラインの手掛かりとなるのは見出しのレベル（h1〜h6までの数字）しかありません。しかし、セクションを明示する要素を使用していれば、見出しのレベルに関わらず、明示されたセクションを元にアウトラインが判別されるのです。

　コンポーネントコーディングにおけるそれぞれのケースを、サンプルコードで見てみましょう。以下のサンプルはテンプレートシステムを利用したWebサイトを想定したものです。

共通コンポーネント

<div>
 <h2>[% title %]</h2><!-- ここにタイトルが入ります -->
 <p>[% contents %]</p><!-- ここにコンテンツが入ります -->
</div>

　このコンポーネントを使ってページをコーディングしたとします。

サンプル3

<h1>サイトタイトル</h1>
<div>
 <h2>[% title %]</h2><!-- ここにタイトルが入ります -->
 <p>[% contents %]</p><!-- ここにコンテンツが入ります -->
</div>

サンプル3のアウトライン

サイトタイトル
　 [% title %]

　サンプル3のアウトラインは、想定したとおりに判別されます。では以下のような例ではどうでしょうか。

サンプル4

<h1>サイトタイトル</h1>
<div>
 <h2>ページタイトル</h2>
 <div>
  <h2>[% title %]</h2><!-- ここにタイトルが入ります -->
  <p>[% contents %]</p><!-- ここにコンテンツが入ります -->
 </div>
</div>

サンプル4のアウトライン

サイトタイトル
　ページタイトル
　[% title %]

　サンプル4では、div要素内に2つのh2要素がありますが、1つ目のh2要素であるページタイトルと2つ目のh2要素である[% title %]が、同じレベルになってしまいました。これでは本来想定したアウトラインと異なってしまいます。そこで、セクションを明示する要素を使って書き直してみます。

サンプル5

<h1>サイトタイトル</h1>
<section>
 <h2>ページタイトル</h2>
 <section>
  <h2>[% title %]</h2><!-- ここにタイトルが入ります -->
  <p>[% contents %]</p><!-- ここにコンテンツが入ります -->
 </section>
</section>

サンプル5のアウトライン

サイトタイトル
　ページタイトル
　　[% title %]

　ソースコードを変更し、div要素をsection要素に置き換えました。section要素でセクションを明示したことで、想定通りのアウトラインになりました。

　なお、見出しのみでもアウトラインの判別に問題の無いケースがありますが、HTML5の仕様書では、セクションを明示することが推奨されています。

Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.

引用：4.4 Sections ― HTML5

　HTML5でマークアップするのであれば、セクションを明示したほうがよいでしょう。

　アウトラインについての理解は深まったでしょうか？　最後に、シンプルに3行でまとめておきます。

アウトラインの3行まとめ

• HTML5のアウトラインとは、そのHTMLファイルの目次のようなもの
• アウトラインは、見出し要素のレベルか、セクションを明示する要素から判別される
• 仕様書では、セクションを明示することが推奨されている

見出しをすべてh1要素で書いても問題ない？

　セクションを明示すると、アウトラインの判別に見出しのレベルが関わらなくなります。そのため、セクションを明示する場合は、すべての見出しをh1要素でマークアップしても間違いではありません。

　これまでの常識からすると、すべての見出しをh1要素で記述するのはSEOスパムのようで違和感がありますが、仕様書でも紹介されています。ただし、すべてをh1要素にするか、あるいはこれまでのように適切にレベルを割り振っていくか、どちらかに統一することが強く推奨されています。

Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.

引用：4.4 Sections ― HTML5

著者：浜　俊太朗 （はま・しゅんたろう）

ライブドアで働くマークアップエンジニア／ディレクター。
ブログ「hamashun.me」はコーディングに限定せずさまざまな話題を扱っている。主な著書に「一週間でマスターするXHTML & CSS for Windows」（毎日コミュニケーションズ刊）がある。趣味はカメラとネットゲームと椅子。