HTML5の 『アウトライン』について

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

セクションを考える

HTML5でサイトのアウトラインを考えるには、まずセクションを意識する事がとても大切になってくるようです。

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

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

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

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

HTML5では、セクションを明示的に囲むための要素が規定されたのでsectionやarticleなどの≪HTML5のカテゴリーについて｜HTML5マークアップ時の基本≫で出てきた｢セクショニング・コンテンツ｣に属する要素がその役割を担うようです。

アウトラインを理解する

次にアウトラインを理解するには、上記で説明した本の目次を考えていきます。

各章や節（セクション）には見出しがありますが、その見出しが現れるとアウトラインつまり階層が変わってきます。

また、アウトラインを判別する方法をアウトライン・アルゴイズムと言うそうです。

アウトラインを確認する

文言のみですと、なかなか理解できない部分が出てくると思いましたので実際にXHTML1.0の場合と、HTML5でのアウトラインについてサンプルソースを見ながら考えていきたいと思います。

【XHTML1.0の場合】

<h1>HTML5でサイトをつくろう</h1>
<h2>HTML5とCSS3の情報とサンプルをまとめました </h2>
<p>HTML5の情報を・・・・</p>
<h3>HTML5のカテゴリー概要</h3>
<p>HTML5には主に8っつのカテゴリーがありますが・・・</p>
<h4>メタデータ・コンテンツ</h4>
<p>メタデータ・コンテンツとは・・・</p>
<h4>フロー・コンテンツ</h4>
<p>フロー・コンテンツとは・・・</p>

【HTML5の場合】

<h1>HTML5でサイトをつくろう</h1>
<section>
	<h2>HTML5とCSS3の情報とサンプルをまとめました </h2>
	<p>HTML5の情報を・・・・</p>
	<section>
		<h3>HTML5のカテゴリー概要</h3>
		<p>HTML5には主に8っつのカテゴリーがありますが・・・</p>
		<section>
			<h4>メタデータ・コンテンツ</h4>
			<p>メタデータ・コンテンツとは・・・</p>
		</section>
		<section>
			<h4>フロー・コンテンツ</h4>
			<p>フロー・コンテンツとは・・・</p>
		</section>
	</section>
</section>

上記のソースを本に例えると、h1が本のタイトル見出しに、h2,h3,h4が章や節(セクション)の見出しになります。次に各見出しが現れた時点でアウトラインが変わってくるということを今までで学んできたので、実際にどうアウトラインが変わるのかを考えていきたいと思います。

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

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

【XHTML1.0の場合】はまず<h1>の｢HTML5でサイトをつくろう｣がトップレベルの見出しになり、次に現れる<h2>の｢HTML5とCSS3の情報とサンプルをまとめました｣が次の見出しになります。

【ここまでのアウトライン】

• 1. HTML5でサイトをつくろう
• 1.1. HTML5とCSS3の情報とサンプルをまとめました

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

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

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

【ここまでのアウトライン】

• 1. HTML5でサイトをつくろう
• 1.1. 不明

次に見出し要素の<h2>｢HTML5とCSS3の情報とサンプルをまとめました｣が現れますので、先ほどの不明となっていたsectionの見出しが確定します。

【ここまでのアウトライン】

• 1. HTML5でサイトをつくろう
• 1.1. HTML5とCSS3の情報とサンプルをまとめました

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

アウトライン確認ツール

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

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

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

『HTML 5 Outliner』

Google Chromeのアドオン

『HTML5 Outliner』

実際に、このブログを制作する際に『HTML 5 Outliner』を使用させてもらいましたのでこちらを紹介したいと思います。

『HTML 5 Outliner』の使用方法

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

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

2：HTMLファイル、もしくはURLの指定が完了したら確認ボタンをクリック！

今回は、参考用にこのページのアウトラインを確認したかったので、URLの方を選択して”Outline this！”をクリックします。

3：アウトラインを確認

今回の投稿記事のアウトラインが表示されました。ただし、アウトラインに【Untitled Section】が2箇所表示されています。このサイトではnav要素に見出し要素を入れていない箇所が2箇所あり、その部分のタイトル見出しがありませんと言われています。ですが、実際にはnav要素はデフォルトでNavigationという見出しを持っているので間違えではないようです。

以上になりますが、今後もこれらのツールを上手に使用してしっかりとマークアップしていきたいと思います。

参考サイト：

• 暗黙のセクションについて　【W3G】
• 見出しレベルの正しい使い方　【W3G】

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