HTML5の「アウトライン」についてまとめました【MdN連載第8回目】

アウトラインとは階層構造のことで、HTML5のマークアップでは、このアウトラインを意識することが重要になってきます。

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

HTML5のセクションを考える

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

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

次に、この考えをWebページに当てはめる為にHTMLではセクションをどう区別しているのかを考えていきたいと思います。

まず、今までのHTML4やXHTML1.0では、各セクションを区別するのにh1～h6の要素を使用して暗黙的に階層化されているのを示していました。

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

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

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

『HTML 5 Outliner』の使用方法

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

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

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

2：HTMLファイル、もしくは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でサイトをつくろう｣がトップレベルの見出しになり、次に現れる<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では見出しの順番でアウトラインの判断はせずセクショニング・コンテンツの要素を判断にしているので見出しタグの内容に関わらずアウトラインを構築します。

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

今回は以上になります。

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

今回の記事で参考にした本

徹底解説HTML5マークアップガイドブック

HTML5の新要素や基本的なマークアップ方法について丁寧に解説が書かれています。
HTML5でサイトを構築する際やこのBlogの記事を書く時の参考にしています。他にもビジュアル系API編もcanvas要素の勉強用に持っています。

徹底解説HTML5マークアップガイドブック
最終草案対応版―全要素・全属性完全収録

「最終草案対応版―全要素・全属性完全収録」としてverが変わりました。すでに同じ本を持っている場合は追加で買わなくても大丈夫だとおもいましたがなにがなくなって追加されたか興味がありましたので両方買って見ました。

ブログを作成する際に参考にした本はこちらにまとめてあります。