第11回 XHTML1.0とHTML5のコードを比較してアウトラインを確認してみよう | デザインってオモシロイ -MdN Design Interactive-

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

2019.5.23 THU

第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つ下がります。

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

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


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

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

 1. HTML5でサイトをつくろう
 ――――― h1要素
【xhtmlのソース】

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

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

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

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

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

hgroup要素のさらに詳しい内容はこちらにまとめております。

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


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

【HTML5のアウトライン】

 1. Untitled Section ――――― nav要素
【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のアウトライン】

 1.イベント情報    
 ――――― h2要素
  1.イベントタイトル01 ―――――
 h3要素
  2.イベントタイトル02 ―――――
 h3要素
【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のアウトライン】

 1.イベント情報    
 ――――― section要素(h2要素)
  1.イベントタイトル01 ―――――
 section要素(h3要素)
  2.イベントタイトル02 ―――――
 section要素(h3要素)
【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のアウトライン】

 2. 更新情報 ――――― h2要素
【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のアウトライン】

 3.更新情報    
 ――――― section要素(h2要素)
  1.お知らせタイトル01 ―――――
 section要素(h3要素)
  2.お知らせタイトル02 ―――――
 section要素(h3要素)
  3.お知らせタイトル03
 ――――― section要素(h3要素)
【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のアウトライン】

 3. サイトからのお知らせ
 ――――― h2要素
【xhtmlのソース】

h2サイトからのお知らせ</h2
pテキストテキストテキストテキストテキストテキストテキスト</p
【HTML5のアウトライン】

4. サイトからのお知らせ
 ――――― section要素(h2要素)
【HTML5のソース】

section
h2サイトからのお知らせ</h2
pテキストテキストテキストテキストテキストテキストテキスト</p
</section
HTML5のソース内にh2要素が存在していますがアウトラインはxhtmlと同じになっています。

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


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

【HTML5のアウトライン】

5. Untitled Section
 ――――― aside要素
【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つの方法だと思います。

次回はいよいよ最終回です。HTML5でマークアップする際に、ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトの作成してみたいと思います。

profile
●ハヤシユ タカ 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークスを立ち上げ 、WEBの企画・制作、セミナー講師やWEB運用の企業研修などを行う。また、WEB制作に役立 つ情報を集めて制作のヒントになるブログを更新している。

●HTML5でサイト をつくろう:http://www.html5-memo.com/
●Webデザインクリップ:http://webdesignmatome.com/
twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

アクセスランキング

5.21(昨日)

MdN BOOKS|デザインの本

Pick upコンテンツ

現在