第11回 XHTML1.0とHTML5のコードを比較してアウトラインを確認してみよう
※アウトラインにつきましてはこちらの記事で説明してあります(『HTML5の「アウトライン」についてついてまとめよう』)
解説:(有)ムーニーワークス 林 豊/田崎一成
今回はサンプルソースからアウトラインを確認していきます。アウトラインはHTML5でコーディングする場合にとても重要な部分になりますが、構造的な話になるのでわかりにくく感じしてしまうと思いますので、アウトラインを視覚化する『HTML5 Outliner』を利用してxhtmlとHTML5の違いを比較していきます。
比較するそれぞれのマークアップしたページのサンプルこちらです。●HTML5.0でのマークアップのHTMLを見る
●XHTML1.0でのマークアップのHTMLを見る
●アウトラインの確認
サンプルサイトのxhtmlとHTML5でどのようにアウトラインが変化するのかを確認します。今回アウトラインを確認するために『HTML 5 Outliner』を使用しました。
アウトライン・アルゴイズムは、セクショニング・コンテンツの要素が現れると、その1つ上のセクションからアウトライン・レベルが1つ下がります。
セクショニングコンテンツにつきましてこちらの記事で説明してあります。
第7回 『HTML5の「コンテンツ・モデル」についてまとめよう』
それでは各パーツ毎にアウトラインを比較してみたいと思います。
●サイトのロゴのアウトライン
1. HTML5でサイトをつくろう ――――― h1要素
<div id="logogroup">
<h1><img src="images/header_logo.png" /></h1>
<p>ゼロからはじめるHTML5でのサイト制作</p>
<div>
<hgroup>
<h1><img src="images/header_logo.png" /></h1>
<h2>ゼロからはじめるHTML5でのサイト制作</h2>
</hgroup>
hgroup要素内の見出し要素は、レベルが最も高い要素以外はアウトラインに現れません。
このことからhgroup要素で囲むことで今回のh2要素がアウトラインに現れないといういことになります。 尚、h系要素が連続してもそれぞれをセクションの見出しとしてアウトラインに表示させたい場合はhgroup要素で囲む必要はありませんので注意してください。
hgroup要素のさらに詳しい内容はこちらにまとめております。
『hgroup要素』 / HTML5新要素一覧
●サイトのナビゲーションのアウトライン
1. Untitled Section ――――― nav要素
<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>
ここは「セクショニング・コンテンツ」に属するnav要素にあたりアウトラインが1つ下がりますが、nav要素の中に見出しになるh系要素が存在しないために『Untitled Section』となっています。
この『Untitled Section』ですが、実際にはnav要素はデフォルトでNavigation等(UAによって異なる)の見出しを持っているので無理に見出しをつける必要は無いようです。
nav要素のさらに詳しい内容はこちらにまとめております。
『nav要素』 / HTML5新要素一覧
●イベント情報のアウトライン
1.イベント情報 ――――― h2要素
1.イベントタイトル01 ――――― h3要素
2.イベントタイトル02 ――――― h3要素
<!-- 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 -->
1.イベント情報 ――――― section要素(h2要素)
1.イベントタイトル01 ――――― section要素(h3要素)
2.イベントタイトル02 ――――― section要素(h3要素)
<!-- 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のようにコーディングした場合、見出しになるh系要素が現れた時点で新たなセクションが始まるとみなされアウトラインが変わります。また、h1~h6要素の数字の大きさを基準にアウトラインの階層を上げ下げします。
HTML5でのコーディングのように「セクショニング・コンテンツ」を使ってマークアップした場合、セクション要素が現れるとその上のセクションからアウトラインの階層が1つ下がります。そして、そのセクション内で最初に現れた見出し要素がそのセクションの見出しとして解釈されます。
なお、HTML5で旧来のように「セクショニング・コンテンツ」に属する要素を使わずに暗黙的にセクションを表しても間違いではありません。
●更新情報のアウトライン
2. 更新情報 ――――― h2要素
<!-- 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 -->
3.更新情報 ――――― section要素(h2要素)
1.お知らせタイトル01 ――――― section要素(h3要素)
2.お知らせタイトル02 ――――― section要素(h3要素)
3.お知らせタイトル03 ――――― section要素(h3要素)
<!-- 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でdl・dt・dd要素を使ってマークアップしていた部分をHTML5では「セクショニング・コンテンツ」に属するarticle要素でマークアップしたことで更新情報の各更新記事の見出しがアウトラインに現れています。
●サイトからのお知らせのアウトライン
3. サイトからのお知らせ ――――― h2要素
<h2>サイトからのお知らせ</h2>
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
4. サイトからのお知らせ ――――― section要素(h2要素)
<section>
<h2>サイトからのお知らせ</h2>
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
</section>
これは今までも説明してきたように、セクションを暗黙的にマークアップした場合はh1~h6要素の数字に応じてアウトラインのレベルが変わりますが、「セクショニング・コンテンツ」に属する要素で明示的にマークアップした場合はその上のセクションから階層が1つ下がるというルールがあるため、今回は共に同じアウトラインになっています。
●バナーエリアのアウトライン
5. Untitled Section ――――― aside要素
<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>
またaside要素のより詳しい内容を過去のエントリーにもまとめています。
『aside要素』 / HTML5新要素一覧
サンプルサイトのアウトラインについては以上になります。 旧来の暗黙的にマークアップする方法から「セクショニング・コンテンツ」に属する要素を使った明示的なマークアップに移行するまで少し戸惑いそうですが、旧来通りでも間違いではないので迷ったら暗黙的にマークアップするのも1つの方法だと思います。
次回はいよいよ最終回です。HTML5でマークアップする際に、ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトの作成してみたいと思います。
●ハヤシユ タカ 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークスを立ち上げ 、WEBの企画・制作、セミナー講師やWEB運用の企業研修などを行う。また、WEB制作に役立 つ情報を集めて制作のヒントになるブログを更新している。
●HTML5でサイト をつくろう:http://www.html5-memo.com/
●Webデザインクリップ:http://webdesignmatome.com/