XHTML1.0とHTML5のコードを比較してアウトラインを確認してみよう【MdN連載第11回目】

前回の記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行いました。
HTML5から追加された新要素の使い方を確認してみよう【MdN連載第10回目】

今回はxhtmlとHTML5のコードのアウトラインを確認しながら、各要素のアウトラインについてみてみたいと思います。

アウトラインにつきましてはこちらの記事で説明してあります。
HTML5の「アウトライン」についてついてまとめよう

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

比較するそれぞれのマークアップしたページのサンプルこちらにあります。
HTML5.0でのマークアップのHTMLを見る
XHTML1.0でのマークアップのHTMLを見る

アウトラインの確認

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

xhtmlのコードでのアウトライン

HTML5のコードでのアウトライン

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

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

セクショニングコンテンツにつきましてこちらの記事で説明してあります。
HTML5の「コンテンツ・モデル」についてまとめよう

それでは各パーツ毎にアウトラインを比較してみたいとおもいます。

サイトのロゴのアウトライン

【xhtmlとHTML5のアウトライン】

【xhtmlのソース】

<div id="logogroup">
<h1><img src="images/header_rogo.png" /></h1>
<p>ゼロからはじめるHTML5でのサイト制作</p>
</div>

【HTML5のソース】

<hgroup>
<h1><img src="images/header_rogo.png" /></h1>
<h2>ゼロからはじめるHTML5でのサイト制作</h2>
</hgroup>

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

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

サイトのナビゲーションのアウトライン

【HTML5のアウトライン】

【HTML5のソース】

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

<ul id="nav">
  <li><a href="#"><img src="images/nav_home.gif" /></a></li>
  <li><a href="#"><img src="images/nav_news.gif" /></a></li>
  <li><a href="#"><img src="images/nav_product.gif" /></a></li>
  <li><a href="#"><img src="images/nav_contact.gif" /></a></li>
  <li><a href="#"><img src="images/nav_company.gif" /></a></li>
  <li><a href="#"><img src="images/nav_access.gif" /></a></li>
</ul>
</nav>

見出し要素（h要素）のないxhtmlにはアウトラインはありません。

HTML5のアウトラインにだけ『Untitled Section』と表示されています。

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

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

nav要素のさらに詳しい内容はこちらにまとめております。
『nav要素』 / HTML5新要素一覧

イベント情報のアウトライン

【xhtmlのアウトライン】

【xhtmlのソース】

<!-- event -->
<div id="event">
<h2>イベント情報</h2>
<h3>イベントタイトル01テキスト</h3>
<p><img src="images/image_01.gif" />テキストテキストテキストテキストテキストテキスト </p>
<h3>イベントタイトル02テキスト</h3>
<p><img src="images/image_02.gif" />テキストテキストテキストテキストテキストテキスト </p>
</div>
<!-- /event -->

【HTML5のアウトライン】

【HTML5のソース】

<!-- event -->
<section id="event">

<h2>イベント情報</h2>

<section class="topics">
<h3>イベントタイトル01テキスト</h3>
<p><img src="images/image_01.gif" />テキストテキストテキストテキストテキストテキスト </p>
</section>

<section class="topics">
<h3>イベントタイトル02テキスト</h3>
<p><img src="images/image_02.gif" />テキストテキストテキストテキストテキストテキスト </p>
</section>

</section>
<!-- /event -->

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

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

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

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

更新情報のアウトライン

【xhtmlのアウトライン】

【xhtmlのソース】

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

【HTML5のアウトライン】

【HTML5のソース】

<!-- news -->
<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>
<!-- /news -->

更新情報のエリアではアウトラインがxhtmlとHTML5で異なっています。

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

サイトからのお知らせのアウトライン

【xhtmlのアウトライン】

【xhtmlのソース】

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

【HTML5のアウトライン】

【HTML5のソース】

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

HTML5のソース内にh2要素が存在していますがアウトラインはxhtmlと同じになっています。

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

バナーエリアのアウトライン

【HTML5のアウトライン】

【HTML5のソース】

<aside>
<ul id="bnrarea">
  <li><img src="images/bnr_01.gif" /></li>
  <li><img src="images/bnr_02.gif" /></li>
  <li><img src="images/bnr_03.gif" /></li>
</ul>
</aside>

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

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

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

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