アウトラインとは階層構造のことで、HTML5のマークアップでは、このアウトラインを意識することが重要になってきます。今までのHTML4やXHTML1.0でもh1～h6の要素を使用して暗黙的に階層化されているのを示していましたので、考え方が変わったということではないですが、HTML5ではサイトのアウトラインを考えるには、まずセクションを意識する事がとても大切になります。

解説：（有）ムーニーワークス　林 豊／田崎一成

---

●セクションを考える

セクションの考え方を理解する為に1冊の本を例にあげたいと思います。

本は1つの大きなセクションからできていて、タイトル見出しと内容があります。その中には章があり、それらの各章をセクションに例えます。そして章にも見出しと内容があります。さらに章の中にはいくつかの節があり、これもセクションに例えることができます。

次に、この考えをWebページに当てはめるためにHTMLではセクションをどう区別しているのかを考えていきたいと思います。まず、今までのHTML4やXHTML1.0では、各セクションを区別するのにh1～h6の要素を使用して暗黙的に階層化されているのを示していました。

HTML5では、セクションを明示的に囲むための要素が規定されたのでsection要素やarticle要素などの｢セクショニング・コンテンツ｣に属する要素がその役割を担うようになります。

セクションについては以前の記事「第6回 HTML5の「カテゴリー」についてまとめよう」にまとめてあります。

---

●アウトラインを確認する

次にアウトラインを理解するには、上記で説明した本の目次を考えていきます。各章や節（セクション）には見出しがありますが、その見出しが現れるとアウトラインつまり階層が変わってきます。
実際にXHTML1.0の場合と、HTML5でのアウトラインについてサンプルソースを見ながら考えていきたいと思います。

※サンプルではxhtml1.0のソースと書いてありますが、このソースも宣言文がHTML5ですとHTML5のソースになりますが、今回は新要素を使っていないケースということで現在制作で使われている書き方としてxhtmlのソースとしています。

従って上記のソースを本に例えると、h1が本のタイトル見出しに、h2、h3が章や節(セクション)の見出しとなります。

次に各見出しが現れた時点でアウトラインが変わってくるので、実際にどうアウトラインが変わるのかを考えていきたいと思います。

上記の【XHTML1.0の場合】【HTML5の場合】は最終的に同じアウトラインになりますが、アウトラインの判別されるタイミングが異なってくることも確認していきます。

---

●アウトライン確認ツール

HTML5ではアウトラインを意識することは大切ですが、サイトの情報量が多い場合やセクショニング・コンテンツを多数使用したページではアウトラインを確認するのは大変です。


そこでアウトラインをチェックしてくれるツールがいくつかありますので、2つほど紹介したいと思います。

【HTML5のアウトラインチェックツール】

●HTML5のアウトラインチェックツール
「HTML 5 Outliner 」

●Google Chromeのアドオン
「HTML 5 Outliner」

今回はHTML5のアウトラインチェックツールの「HTML 5 Outliner」を使い確認してみます。

---

●『HTML 5 Outliner』の使用方法

1：HTMLファイル、もしくはURLを選択する

ローカルにあるHTMLファイルで確認したい場合は、上の参照ボタンをクリックしてファイルを選択してください。サイトをWeb上にアップしている場合は下のURLの枠内にサイトURLを入力します。

※一番下にソースコードを入れてチェックする箇所もありますが、環境によっては文字化けしてしまう場合が多いので今回は省略しています。

作成したファイル、もしくはURLを入れて”Outline this！”をクリックするとアウトラインが表示されます。 今回のサンプルは下記にアップロードしておりますのでこちらをコピーしてURLでチェックすることができます。

●xhtml1.0
http://www.html5-memo.com/sample/mdn08/sample01.html
●HTML5
http://www.html5-memo.com/sample/mdn08/sample02.html

今回の【XHTML1.0の場合】、【HTML5の場合】のコードは両方とも最終的に同じアウトラインになります。ですがアウトラインの判別されるタイミングが異なってくることも確認していきたいと思います。

---

●今回のコードのアウトラインのPoint: 1

アウトライン・アルゴリズムはセクショニング・コンテンツに属する要素がなければ、見出し要素が現れた時点で、セクションが始まるとみなします。

【XHTML1.0の場合】はまず ＜h1＞の｢HTML5でサイトをつくろう｣がトップレベルの見出しになり、次に現れる＜/h1＞ ＜h2＞の｢HTML5からの新しい要素｣が次の見出しになります。

では、【HTML5の場合】はどうでしょうか？

●今回のコードのアウトラインのPoint: 2

アウトライン・アルゴイズムは、セクショニング・コンテンツの要素が現れると、その1つ上のセクションからアウトライン・レベルが1つ下がります。

最初に＜h1＞の｢HTML5でサイトをつくろう｣がトップレベルの見出しになるところまでは同じですが、次にセクショニング・コンテンツに属するsection要素がありますので、ここでアウトライン・レベルが1つ下がります。

次に見出し要素の<h2>｢HTML5からの新しい要素｣が現れますので、先ほどの不明となっていたsectionの見出しが確定します。

このように旧来のh1～h6要素を使って暗黙的にセクションを表しマークアップする場合と、セクショニング・コンテンツに属する要素を使用して明示的にマークアップする場合のアウトライン・アルゴリズムは異なってきます。

最終的な形は同じですが捉え方が違いますので注意しましょう。

またxhtmlでは通常見出し要素はh1要素からh2、h3と順番に使っていくというのがルールのように使われていたと思います。 ですのでこのように見出し要素がすべてh1要素の場合のxhtml1.0とHTML5でアウトラインがどのようになるかを見てみます。

h1要素のあとにh4要素でマークアップしてその次にh3要素を使用しています。

●サンプルコードはこちら
http://www.html5-memo.com/sample/mdn08/sample03.html

この場合のアウトラインはこのようになります。

見出しがすべてh1要素となりアウトラインはすべて並列になりました。このようなことはhtml4やxhtml1.0では行うことはありませんでしたが、HTML5で同様に見出しをすべてh1要素にした場合はどうでしょうか？

●サンプルコードはこちら
http://www.html5-memo.com/sample/mdn08/sample04.html

この場合のアウトラインはこのようになります。

ポイント2であった「アウトライン・アルゴイズムは、セクショニング・コンテンツの要素が現れると、その1つ上のセクションからアウトライン・レベルが1つ下がります。」にあるようにHTML5では見出しの順番でアウトラインの判断はせずセクショニング・コンテンツの要素を判断にしているので見出しタグの内容に関わらずアウトラインを構築します。

以前もありましたがすべての見出し要素をh1要素にしても大丈夫というのもセクションが適切になっていれば問題ないということになります。

今回は以上になります。

実際使われるレイアウトではないのでわかりにくい部分もあるかと思いますが、今回でHTML5でサイトを作る際にまず覚えたい基本をすべてまとめましたので、次回から実際の制作でよく使うレイアウトを元にxhtmlとHTML5でのマークアップの違いやアウトラインを作成しながら勉強していきたいと思います。