第11回 XHTML1.0とHTML5のコードを比較してアウトラインを確認してみよう
| 前回の記事「HTML5から追加された新要素の使い方を確認してみよう」では簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行いました。 今回はxhtmlとHTML5のコードのアウトラインを確認しながら、各要素のアウトラインについてみてみたいと思います。 ※アウトラインにつきましてはこちらの記事で説明してあります（『HTML5の「アウトライン」についてついてまとめよう』） 解説：（有）ムーニーワークス 林 豊／田崎一成 |
今回はサンプルソースからアウトラインを確認していきます。アウトラインはHTML5でコーディングする場合にとても重要な部分になりますが、構造的な話になるのでわかりにくく感じしてしまうと思いますので、アウトラインを視覚化する『HTML5 Outliner』を利用してxhtmlとHTML5の違いを比較していきます。
比較するそれぞれのマークアップしたページのサンプルこちらです。
●HTML5.0でのマークアップのHTMLを見る
●XHTML1.0でのマークアップのHTMLを見る
●アウトラインの確認
| サンプルサイトのxhtmlとHTML5でどのようにアウトラインが変化するのかを確認します。今回アウトラインを確認するために『HTML 5 Outliner』を使用しました。 |
【xhtmlのコードでのアウトライン】
 |
xhtmlのアウトラインは見出しをアウトラインとします
【HTML5のコードでのアウトライン】
 |
HTML5のアウトラインはセクショニング・コンテンツの要素がアウトラインに関係してきます
| xhtmlとHTML5ではアウトラインに違いが出てきています。これはHTML5から新たに追加された｢セクショニング・コンテンツ｣に関わる要素が下記赤字の理由で影響を与えているからです。 アウトライン・アルゴイズムは、セクショニング・コンテンツの要素が現れると、その1つ上のセクションからアウトライン・レベルが1つ下がります。 セクショニングコンテンツにつきましてこちらの記事で説明してあります。 ※『HTML5の「コンテンツ・モデル」についてまとめよう』 それでは各パーツ毎にアウトラインを比較してみたいとおもいます。 |
●サイトのロゴのアウトライン
【xhtmlとHTML5のアウトライン】
 |
【xhtmlのソース】
 |
【HTML5のソース】
 |
| ここでのアウトライン表示はxhtmlとHTML5共に同じになっていますが、HTML5のソース内に存在しているh2要素がアウトラインに表れていません。 hgroup要素内の見出し要素は、レベルが最も高い要素以外はアウトラインに現れません。 このことからhgroup要素で囲むことで今回のh2要素がアウトラインに現れないといういことになります。 尚、h系要素が連続してもそれぞれをセクションの見出しとしてアウトラインに表示させたい場合はhgroup要素で囲む必要はありませんので注意してください。 hgroup要素のさらに詳しい内容はこちらにまとめております。 『hgroup要素』 / HTML5新要素一覧 |
●サイトのナビゲーションのアウトライン
【HTML5のアウトライン】
 |
【HTML5のソース】
 |
| 見出し要素（h要素）のないxhtmlにはアウトラインはありません。HTML5のアウトラインにだけ『Untitled Section』と表示されています。 ここは｢セクショニング・コンテンツ｣に属するnav要素にあたりアウトラインが1つ下がりますが、nav要素の中に見出しになるh系要素が存在しないために『Untitled Section』となっています。 この『Untitled Section』ですが、実際にはnav要素はデフォルトでNavigation等(UAによって異なる)の見出しを持っているので無理に見出しをつける必要は無いようです。 nav要素のさらに詳しい内容はこちらにまとめております。 『nav要素』 / HTML5新要素一覧 |
●イベント情報のアウトライン
【xhtmlのアウトライン】
 |
【xhtmlのソース】
 |
【HTML5のアウトライン】
 |
【HTML5のソース】
 |
| xhtmlとHTML5ではアウトラインが同じであることが確認できますが、上記のマークアップ方法も今までの説明と同じように違いがあります。 xhtmlのようにコーディングした場合、見出しになるh系要素が現れた時点で新たなセクションが始まるとみなされアウトラインが変わります。また、h1～h6要素の数字の大きさを基準にアウトラインの階層を上げ下げします。 HTML5でのコーディングのように｢セクショニング・コンテンツ｣を使ってマークアップした場合、セクション要素が現れるとその上のセクションからアウトラインの階層が1つ下がります。そして、そのセクション内で最初に現れた見出し要素がそのセクションの見出しとして解釈されます。 なお、HTML5で旧来のように｢セクショニング・コンテンツ｣に属する要素を使わずに暗黙的にセクションを表しても間違えではありません。 |
●更新情報のアウトライン
【xhtmlのアウトライン】
 |
【xhtmlのソース】
 |
【HTML5のアウトライン】
 |
【HTML5のソース】
 |
| 更新情報のエリアではアウトラインがxhtmlとHTML5で異なっています。 これはxhtmlでdl・dt・dd要素を使ってマークアップしていた部分をHTML5では｢セクショニング・コンテンツ｣に属するarticle要素でマークアップしたことで更新情報の各更新記事の見出しがアウトラインに現れてています。 |
●サイトからのお知らせのアウトライン
【xhtmlのアウトライン】
 |
【xhtmlのソース】
 |
【HTML5のアウトライン】
 |
【HTML5のソース】
 |
| HTML5のソース内にh2要素が存在していますがアウトラインはxhtmlと同じになっています。 これは今までも説明してきたように、セクションを暗黙的にマークアップした場合はh1～h6要素の数字に応じてアウトラインのレベルが変わりますが、｢セクショニング・コンテンツ｣に属する要素で明示的にマークアップした場合はその上のセクションから階層が1つ下がるというルールがあるため、今回は共に同じアウトラインになっています。 |
●バナーエリアのアウトライン
【HTML5のアウトライン】
 |
【HTML5のソース】
 |
| HTML5の方だけアウトラインの最後に『Untitled Section』と表示されています。この部分は｢セクショニング・コンテンツ｣に属するaside要素でマークアップしているため、アウトラインが変わっています。なお、aside要素もnav要素同様にデフォルトでSidebar等(UAによって異なる)の見出しを持っているので無理に見出しをつける必要は無いようです。 またaside要素のより詳しい内容を過去のエントリーにもまとめています。 『aside要素』 / HTML5新要素一覧 |
| サンプルサイトのアウトラインについては以上になります。 旧来の暗黙的にマークアップする方法から｢セクショニング・コンテンツ｣に属する要素を使った明示的なマークアップに移行するまで少し戸惑いそうですが、旧来通りでも間違いではないので迷ったら暗黙的にマークアップするのも1つの方法だと思います。 次回はいよいよ最終回です。HTML5でマークアップする際に、ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトの作成してみたいと思います。 |
 |
【林 豊】●1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。 またWEB制作に役立つ情報を集めて制作のヒントになるブログを更新している HTML5でサイトをつくろう：http://www.html5-memo.com/ Webデザインクリップ：http://webdesignmatome.com/ デジハリ・オンラインスクールにて自宅や会社のPCからいつでも「HTML5」を学べる講座を担当。ただいま全体の1/3の内容を無料で視聴できます。 HTML5入門講座：http://online.dhw.co.jp/course/html5/ |
