第8回 HTML5の「アウトライン」についてまとめよう
アウトラインとは階層構造のことで、HTML5のマークアップでは、このアウトラインを意識することが重要になってきます。今までのHTML4やXHTML1.0でもh1~h6の要素を使用して暗黙的に階層化されているのを示していましたので、考え方が変わったということではないですが、HTML5ではサイトのアウトラインを考えるには、まずセクションを意識する事がとても大切になります。
解説:(有)ムーニーワークス 林 豊/田崎一成
●セクションを考える
セクションの考え方を理解する為に1冊の本を例にあげたいと思います。
本は1つの大きなセクションからできていて、タイトル見出しと内容があります。その中には章があり、それらの各章をセクションに例えます。そして章にも見出しと内容があります。さらに章の中にはいくつかの節があり、これもセクションに例えることができます。
次に、この考えをWebページに当てはめるためにHTMLではセクションをどう区別しているのかを考えていきたいと思います。まず、今までのHTML4やXHTML1.0では、各セクションを区別するのにh1~h6の要素を使用して暗黙的に階層化されているのを示していました。
HTML5では、セクションを明示的に囲むための要素が規定されたのでsection要素やarticle要素などの「セクショニング・コンテンツ」に属する要素がその役割を担うようになります。
セクションについては以前の記事「第6回 HTML5の「カテゴリー」についてまとめよう」にまとめてあります。
●アウトラインを確認する
次にアウトラインを理解するには、上記で説明した本の目次を考えていきます。各章や節(セクション)には見出しがありますが、その見出しが現れるとアウトラインつまり階層が変わってきます。
実際にXHTML1.0の場合と、HTML5でのアウトラインについてサンプルソースを見ながら考えていきたいと思います。
<h1>HTML5でサイトをつくろう</h1>
<h2>HTML5からの新しい要素</h2>
<p>HTML5の新しい要素は・・・</p>
<h3>header要素</h3>
<p>header要素は・・・</p>
<h3>section要素</h3>
<p>section要素は・・・</p>
<h2>従来からある要素</h2>
<p>従来からある要素は・・・</p>
<h3>div要素</h3>
<p>div要素は・・・</p>
<h3>a要素</h3>
<p>a要素は・・・</p>
【HTML5の場合】
<h1>HTML5でサイトをつくろう</h1>
<section>
<h2>HTML5からの新しい要素</h2>
<p>HTML5の新しい要素は・・・</p>
<section>
<h3>header要素</h3>
<p>header要素は・・・</p>
</section>
<section>
<h3>section要素</h3>
<p>section要素は・・・</p>
</section>
</section>
<section>
<h2>従来からある要素</h2>
<p>従来からある要素は・・・</p>
<section>
<h3>div要素</h3>
<p>div要素は・・・</p>
</section>
<section>
<h3>a要素</h3>
<p>a要素は・・・</p>
</section>
</section>
※xhtml1.0とHTML5でのアウトラインを確認する
従って上記のソースを本に例えると、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を選択する
※一番下にソースコードを入れてチェックする箇所もありますが、環境によっては文字化けしてしまう場合が多いので今回は省略しています。
●xhtml1.0
http://www.html5-memo.com/sample/mdn08/sample01.html
●HTML5
http://www.html5-memo.com/sample/mdn08/sample02.html
1. HTML5からの新しい要素 <h2>
1. header要素 <h3>
2. section要素 <h3>
2. 従来からある要素 <h2>
1. div要素 <h3>
2. a要素 <h3>
※どちらのページも同じアウトラインになります
●今回のコードのアウトラインのPoint: 1
アウトライン・アルゴリズムはセクショニング・コンテンツに属する要素がなければ、見出し要素が現れた時点で、セクションが始まるとみなします。
【XHTML1.0の場合】はまず <h1>の「HTML5でサイトをつくろう」がトップレベルの見出しになり、次に現れる</h1> <h2>の「HTML5からの新しい要素」が次の見出しになります。
1.HTML5でサイトをつくろう
1.1. HTML5からの新しい要素
xhtml1.0のアウトライン
●今回のコードのアウトラインのPoint: 2
アウトライン・アルゴイズムは、セクショニング・コンテンツの要素が現れると、その1つ上のセクションからアウトライン・レベルが1つ下がります。
最初に<h1>の「HTML5でサイトをつくろう」がトップレベルの見出しになるところまでは同じですが、次にセクショニング・コンテンツに属するsection要素がありますので、ここでアウトライン・レベルが1つ下がります。
1.HTML5でサイトをつくろう
1.1. 不明
section要素がはいりアウトライン・レベルが1つ下がります
1.HTML5でサイトをつくろう
1.1. HTML5からの新しい要素
sectionの中の見出しアウトラインになります
最終的な形は同じですが捉え方が違いますので注意しましょう。
またxhtmlでは通常見出し要素はh1要素からh2、h3と順番に使っていくというのがルールのように使われていたと思います。 ですのでこのように見出し要素がすべてh1要素の場合のxhtml1.0とHTML5でアウトラインがどのようになるかを見てみます。
<h1>HTML5でサイトをつくろう</h1>
<h1>HTML5からの新しい要素</h1>
<p>HTML5の新しい要素は・・・</p>
<h1>header要素</h1>
<p>header要素は・・・</p>
<h1>section要素</h1>
<p>section要素は・・・</p>
<h1>従来からある要素</h1>
<p>従来からある要素は・・・</p>
<h1>div要素</h1>
<p>div要素は・・・</p>
<h1>a要素</h1>
<p>a要素は・・・</p>
※見出し要素をすべてh1要素にしたxhtmlのアウトライン
●サンプルコードはこちら
http://www.html5-memo.com/sample/mdn08/sample03.html
この場合のアウトラインはこのようになります。
2. HTML5からの新しい要素 <h1>
3. header要素 <h1>
4. section要素 <h1>
5. 従来からある要素 <h1>
6. div要素 <h1>
7. a要素 <h1>
<h1>HTML5でサイトをつくろう</h1>
<section>
<h1>HTML5からの新しい要素</h1>
<p>HTML5の新しい要素は・・・</p>
<section>
<h1>header要素</h1>
<p>header要素は・・・</p>
</section>
<section>
<h1>section要素</h1>
<p>section要素は・・・</p>
</section>
</section>
<section>
<h1>従来からある要素</h1>
<p>従来からある要素は・・・</p>
<section>
<h1>div要素</h1>
<p>div要素は・・・</p>
</section>
<section>
<h1>a要素</h1>
<p>a要素は・・・</p>
</section>
</section>
※見出し要素をすべてh1要素にしたHTML5のアウトライン
1. HTML5からの新しい要素 <h1>
1. header要素 <h1>
2. section要素 <h1>
2. 従来からある要素 <h1>
1. div要素 <h1>
2. a要素 <h1>
※アウトラインははじめに作成したものと変わず文章の構造を表しています
以前もありましたがすべての見出し要素をh1要素にしても大丈夫というのもセクションが適切になっていれば問題ないということになります。
今回は以上になります。
実際使われるレイアウトではないのでわかりにくい部分もあるかと思いますが、今回でHTML5でサイトを作る際にまず覚えたい基本をすべてまとめましたので、次回から実際の制作でよく使うレイアウトを元にxhtmlとHTML5でのマークアップの違いやアウトラインを作成しながら勉強していきたいと思います。
→第9回へ
●ハヤシユタカ 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークスを立ち上げ、WEBの企画・制作、セミナー講師やWEB運用の企業研修などを行う。また、WEB制作に役立つ情報を集めて制作のヒントになるブログを更新している。
●HTML5でサイトをつくろう:http://www.html5-memo.com/
●Webデザインクリップ:http://webdesignmatome.com/