HTML5のアウトラインって何？xhtmlとHTML5のコードを比較してアウトラインを理解しよう！

前回のエントリーではサンプルソースを基にHTML5の新要素について確認しました。前回のエントリーをご覧になっていない方はこちらからご覧になれます。

【前回のエントリー】
HTML5は難しくない?　HTML5から追加された新要素を理解しよう！【初級編 第2回：HTML5のマークアップ】

HTML5は難しくない!?　XHTML1.0とHTML5のコーディングの違いを確認してみよう！【初級編：HTML5のマークアップ】

今回はそのサンプルソースからアウトラインを確認していきます。アウトラインはHTML5でコーディングする場合にとても重要な部分になりますが、構造的な話になるのでわかりにくく感じしてしまうと思いますので、アウトラインを視覚化する『HTML 5 Outliner』を利用してxhtmlとHTML５の違いを比較しながら理解を深めていきたいと思います。

アウトラインとは

まずはアウトラインについてです。このアウトラインとは階層構造を表します。

今までのHTML4やXHTML1.0ではh1～h6の要素を使用して暗黙的に階層化されているのを示していました。

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

尚、過去のエントリーでアウトラインについてと『HTML 5 Outliner』の詳しい使い方をより詳しくまとめていますのでこちらも参考にしてください。
『アウトライン』について / HTML5マークアップ時の基本

アウトラインを確認する

それではサンプルサイトのxhtmlとHTML5でどのようにアウトラインが変化するのかを確認します。今回アウトラインを確認するために『HTML 5 Outliner』を使用しました。

まずはxhtmlのアウトラインです。

xhtmlのサンプルサイトを確認する

続いてHTML5でのアウトラインです。

HTML5のサンプルサイトを確認する

xhtmlとHTML5ではアウトラインに違いが出てきています。これはHTML5から新たに追加された｢セクショニング・コンテンツ｣に関わる要素が下記赤字の理由で影響を与えているからです。

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

サイトのロゴ

それでは、順番にアウトラインを確認していきます。まずはサイトのロゴにあたるh1要素についてです。

xhtmlとHTML5のアウトライン

xhtmlのソース

<div id="logogroup">
<h1><img src="images/logo_html5.jpg" width="366" height="38" alt="HTML5でサイトをつくろう" /></h1>
<p>HTML5とCSS３の勉強のためのブログ</p>
</div>

HTML5のソース

<hgroup>
<h1><img src="images/logo_html5.jpg" width="366" height="38" alt="HTML5でサイトをつくろう" /></h1>
<h2>HTML5とCSS３の勉強のためのブログ</h2>
</hgroup>

ここでのアウトライン表示はxhtmlとHTML5共に同じになっていますが、HTML5のソース内に存在しているh2要素がアウトラインに表れていません。

hgroup要素内の見出し要素は、レベルが最も高い要素以外はアウトラインに現れません。

このことからhgroup要素で囲むことで今回のh2要素がアウトラインに現れないといういことになります。

尚、h系要素が連続してもそれぞれをセクションの見出しとしてアウトラインに表示させたい場合はhgroup要素で囲む必要はありませんので注意してください。

hgroup要素のさらに詳しい内容は過去のエントリーにまとめております。

『hgroup要素』 / HTML5新要素一覧

サイトのナビゲーション

HTML5のアウトライン

HTML5のソース

<nav>
<ul id="subnav">
<li><a href="#">サイトマップ</a></li>
<li><a href="#">RSSフィード</a></li>
</ul>

<ul id="nav">
<li><img src="images/nav_01.jpg" width="137" height="30" alt="メニュー01" /></li>
<li><img src="images/nav_02.jpg" width="137" height="30" alt="メニュー02" /></li>
<li><img src="images/nav_03.jpg" width="137" height="30" alt="メニュー03" /></li>
<li><img src="images/nav_04.jpg" width="137" height="30" alt="メニュー04" /></li>
<li><img src="images/nav_05.jpg" width="137" height="30" alt="メニュー05" /></li>
<li><img src="images/nav_06.jpg" width="137" height="30" alt="メニュー06" /></li>
</ul>
</nav>

HTML5のアウトラインにだけ『Untitled Section』と表示されています。ここは｢セクショニング・コンテンツ｣に属するnav要素にあたりアウトラインが1つ下がりますが、nav要素の中に見出しになるh系要素が存在しないために『Untitled Section』となっています。

この『Untitled Section』ですが、実際にはnav要素はデフォルトでNavigation等(UAによって異なる)の見出しを持っているので無理に見出しをつける必要は無いようです。

こちらのサイトを参考にさせていただきました。

• HTML5についてのおさらい　【 W3G】

また、nav要素のより詳しい内容を過去のエントリーにもまとめています。
『nav要素』 / HTML5新要素一覧

イベント情報

xhtmlのアウトライン

xhtmlのソース

<div id="event">
　<h2>イベント情報</h2>
　　<h3>イベントタイトル01</h3>
　　<p><img src="images/pho_event01.jpg" width="140" height="140" alt="" />テキストテキストテキストテキストテキストテキスト</p>
　　<h3>イベントタイトル02</h3>
　　<p><img src="images/pho_event02.jpg" width="140" height="140" alt="" />テキストテキストテキストテキストテキストテキスト</p>
</div>

HTML5のアウトライン

<section id="event">
　<h2>イベント情報</h2>
　<section class="topics">
　　<h3>イベントタイトル01</h3>
　　<p><img src="images/pho_event01.jpg" width="140" height="140" alt="" />テキストテキストテキストテキストテキストテキストテキストテキスト</p>
　</section>
　<section class="topics">
　　<h3>イベントタイトル02</h3>
　　<p><img src="images/pho_event02.jpg" width="140" height="140" alt="" />テキストテキストテキストテキストテキストテキストテキストテキスト</p>
　</section>
</section>

xhtmlとHTML5ではアウトラインが同じであることが確認できますが、上記のマークアップ方法も今までの説明と同じように違いがあります。

xhtmlのようにコーディングした場合、見出しになるh系要素が現れた時点で新たなセクションが始まるとみなされアウトラインが変わります。また、h1～h6要素の数字の大きさを基準にアウトラインの階層を上げ下げします。

HTML5でのコーディングのように｢セクショニング・コンテンツ｣を使ってマークアップした場合、セクション要素が現れるとその上のセクションからアウトラインの階層が1つ下がります。そして、そのセクション内で最初に現れた見出し要素がそのセクションの見出しとして解釈されます。

※HTML5で旧来のように｢セクショニング・コンテンツ｣に属する要素を使わずに暗黙的にセクションを表しても間違えではありません。

更新情報

xhtmlのアウトライン

xhtmlのソース

<div id="news">
<h2>更新情報</h2>
<dl>
　<dt><span>[2011年09月01日]</span>　お知らせタイトル01</dt>
　<dd>テキストテキストテキストテキストテキストテキストテキスト</dd>
　<dt><span>[2011年09月01日]</span>　お知らせタイトル02</dt>
　<dd>テキストテキストテキストテキストテキストテキストテキスト</dd>
　<dt><span>[2011年09月01日]</span>　お知らせタイトル03</dt>
　<dd>テキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>
</div>

HTML5のアウトライン

HTML5のソース

<section id="news">
　<h2>更新情報</h2>
　<article>
　　<header>
　　　<time datetime="2011-09-01">2011年09月01日</time>
　　　<h3>お知らせタイトル01</h3>
　　</header>
　　<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
　</article>
　<article>
　　<header>
　　　<time datetime="2011-09-01">2011年09月01日</time>
　　　<h3>お知らせタイトル02</h3>
　　</header>
　　<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
　</article>
　<article>
　　<header>
　　　<time datetime="2011-09-01">2011年09月01日</time>
　　　<h3>お知らせタイトル03</h3>
　　</header>
　　<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
　</article>
</section>

更新情報のエリアではアウトラインがxhtmlとHTML5で異なっています。これはxhtmlでdl・dt・dd要素を使ってマークアップしていた部分を｢セクショニング・コンテンツ｣に属するarticle要素でマークアップしたことで更新情報の見出しがアウトラインに現れている状態になります。

サイトからのお知らせ

xhtmlのアウトライン

xhtmlのソース

<h2>サイトからのお知らせ</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>

HTML5のアウトライン

HTML5のソース

<section>
<h1>サイトからのお知らせ</h1>
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
</section>

HTML5のソース内にh1要素が存在していますがアウトラインはxhtmlと同じになっています。これは今までも説明してきたようにセクションを暗黙的にマークアップした場合はh1～h6要素の数字に応じてアウトラインのレベルが変わりますが、｢セクショニング・コンテンツ｣に属する要素で明示的にマークアップした場合はその上のセクションから階層が1つ下がるというルールがあるため、今回は共に同じアウトラインになっています。

バナー広告エリア

HTML5のアウトライン

HTML5のソース

<aside>
　<ul>
　　<li><img src="images/bnr_01.jpg" width="232" height="61" alt="" /></li>
　　<li><img src="images/bnr_02.jpg" width="232" height="61" alt="" /></li>
　　<li><img src="images/bnr_03.jpg" width="232" height="61" alt="" /></li>
　</ul>
</aside>

HTML5の方だけアウトラインの最後に『Untitled Section』と表示されています。この部分は｢セクショニング・コンテンツ｣に属するaside要素でマークアップしているため、アウトラインが変わっています。尚、aside要素もnav要素同様にデフォルトでSidebar等(UAによって異なる)の見出しを持っているので無理に見出しをつける必要は無いようです。

aside要素のより詳しい内容を過去のエントリーにもまとめています。
『aside要素』 / HTML5新要素一覧

サンプルサイトのアウトラインについては以上になります。

旧来の暗黙的にマークアップする方法から｢セクショニング・コンテンツ｣に属する要素を使った明示的なマークアップに移行するまで少し戸惑いそうですが、旧来通りでも間違えではないので迷ったら暗黙的にマークアップするのも1つの方法だと感じています。

勉強しながらまとめているので、今回まとめた内容に気になる点や間違いなどがございましたらご指摘ください。

【初級編：HTML5のマークアップ：全4回】

• 第1回：HTML5は難しくない?　XHTML1.0とHTML5のコーディングの違いを確認してみよう！【初級編：HTML5のマークアップ】
• 第2回：HTML5は難しくない?　HTML5から追加された新要素を理解しよう！【初級編：HTML5のマークアップ】
• 第3回：HTML5のアウトラインって何？xhtmlとHTML5のコードを比較してアウトラインを理解しよう！
• 第4回：ほとんどCSSは変えずにxhtmlとHTML5で同じレイアウトの作成と作りながら悩んだことまとめました【サンプルソース付】

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

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

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

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

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

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