そろそろHTML5：セクショニング・コンテンツ

HTML5がけっこう使われるようになってきたかな？というところですが、いかがでしょうか。
既存のWebサイトはまだHTML4やXHTML1だと思いますが、新規制作ではHTML5が使われることが普通になってきてますね。

コーディングデザインではHTML5の重要なところを書いていきます。
今回は「セクショニング・コンテンツ」です。

HTML4とHTML5の文書構造

セクションはHTML5でのマークアップで理解しにくいところです。
HTML4やXHTML1では「見出し要素」を使って階層構造を作ります。
階層構造をしっかり作ることで、重要な部分を明確に示すHTML文書を作ることができます。

[html]
<body>
<h1>大見出し</h1>
<h2>小見出し</h2>
<p>本文</p>
<h2>小見出し</h2>
<p>本文</p>
</body>
[/html]

いっぽう、HTML5では「セクショニング・コンテンツ」を使って階層構造を作ること「も」できます。

[html]
<body>
<h1>大見出し</h1>
<section>
<h2>小見出し</h2>
<p>本文</p>
</section>
<section>
<h2>小見出し</h2>
<p>本文</p>
</section>
</body>
[/html]

HTML5は完全に新しい仕様ではなく、HTML4とXHTML1のどちらもとりこんでいるので、「見出し要素」でも「セクショニング・コンテンツ」でも文書構造を作ることができます。

セクショニング・コンテンツって何？

HTML4ではブロック要素、インライン要素と呼んでいた要素のカテゴリーは、HTML5では以下のように区分けがかわりました。

  • メタデータ・コンテンツ…head要素の中に入るような要素
  • フロー・コンテンツ…ほとんどすべての要素
  • セクショニング・コンテンツ…article, aside, nav, sectionの4要素
  • ヘッディング・コンテンツ…h1〜h6要素とhgroup要素の見出し関係の要素
  • フレージング・コンテンツ…ほぼHTML4までのインライン要素のような文章の途中に使う要素
  • エンベデッド・コンテンツ…画像、動画、音楽など、外部リソースを埋め込むための要素
  • インタラクティブ・コンテンツ…リンクやフォーム系の要素、動画や音声を埋め込む要素で操作パネルがついてる状態など、ユーザーのアクションに反応する要素

セクショニング・コンテンツはarticle, aside, nav, sectionの4要素です。

  • article…独立した記事
  • aside…関連記事
  • nav…主要なナビゲーション
  • section…一般的なセクション（テーマ区切り）

この要素たちは「セクション」を作ることができます。
セクションは書籍でいうところの章や節などのテーマの区切りです。セクションがあることで階層構造が明確になります。
HTML4やXHTML1では見出し要素という「点」で階層構造を作っていましたが、セクショニング・コンテンツはどこからどこまでという「範囲」で階層構造を作ることができます。
書籍にないWebならではの機能「ナビゲーション」はセクションと認識させることになってます。

つまり、セクショニング・コンテンツの重要な役割は「明確にセクションをつくることで、階層構造を範囲で示す」ということになります。

ブログはどうするの？

HTML5なら階層構造はセクショニング・コンテンツで作るべきだ！なんてことはありません。
ブログのWYSIWIGエディタでセクショニング・コンテンツの要素を入れ込むことはできません。なので、こうした領域は見出し要素による階層構造を使うことになります。

まとめ

  • セクショニング・コンテンツは「明確にセクションをつくることで、階層構造を範囲で示す」。
  • セクショニング・コンテンツはarticle, aside, nav, sectionの4要素。
  • ブログのWYSIWYG部分は見出し要素による階層構造でOK。

blog, HTML, そろそろHTML5