HTML 5 の情報構造

Web

ふと思い立って、HTML 5 の情報構造について調べてみた。いちど書いたもの不注意で消してしまったのだが、記憶を呼び戻して復元してみた。

HTML5で追加される要素

HTML5では、CSSで表現できるような要素や属性が削除される一方で、次に挙げるような情報の構造を表す要素が追加される。

  • section
  • article
  • aside
  • header
  • footer
  • nav
  • dialog
  • figure
  • などなど

要素の関係性

で、これらの要素の関係性を調べていたら、わかりやすいページを見つけることができた。

図を引用しながら説明してみる。

現在のHTML4やXHTML1.1を使って、BlogのようなWebページを作ろうとすると、だいたい次のような構成になるだろう。

http://www.alistapart.com/d/previewofhtml5/structure-div.gif
(http://www.w3.org/TR/2009/WD-html5-diff-20090212/ より引用)

HTML5では、次のようになる。

http://www.alistapart.com/d/previewofhtml5/structure-html5.gif
(http://www.w3.org/TR/2009/WD-html5-diff-20090212/ より引用)

これまではdiv要素のid属性やclass属性を使って表現していた情報の構造が、HTMLの要素を使って表現できるようになったのだ。

こうした要素の追加は、僕にとって大歓迎だ。情報の構造を表す要素がきちんと仕様化されることによって、コンテンツを利用しやすくなると思う。

HTML5に備えて

HTML5の仕様が勧告されるのは、2010年の予定だ。IE8やFirefox, SafariなどもHTML5をサポートする予定になっている。

これから作成するWebページは、HTML5にも対応できるようにした方が良さそう。ということでいろいろ情報を探していたら、"Mozilla Community Sites Project"のページで、このような指針を見つけた。

The code is intended to behave as similar and forward-compatibile with HTML5 as possible and in result is reducing traditional styling markup of several elements (like ).

Several rules:

  • Do not use elements for headers. Use corresponding classes instead (.h1, .h2). The reason for this is that Hx elements are used for balanced SEO and not for styling. The biggest font-size in your website is not always the real title of the page.
  • Use HTML5 class equivalents when possible. Classes like .aside, .nav, .section, .article, .footer and .header should be used where possible.
  • Use CSS2,DOM2,XHTML1.0 where possible and hack for specific engines that does not support them.

https://wiki.mozilla.org/MCS:HTML:XHTML

要するに

  • <h1>要素を使わずに、.h1のようなclass属性を使え
  • HTML5の新しい要素に対応するような、.aside, .nav, .section, .article, .footer, .header といったclass属性を使え

ということにようだ。確かにこのようにしておけば、XSLTを使ってHTML5のコンテンツに変換することも簡単だろう。

参考にしたURL