こんにちは。中村です。
今回、HTML5について調査しました。
HTML5とは何なのか、HTML4・XHTML1と何が違うのかをマークアップ方法の観点からまとめたいと思います。
○HTML5とHTML4・XHTML1の最も大きな違い
HTML5とHTML4・XHTML1の最も大きな違いは、マークアップ方法です。
HTML4・XHTML1では、HTMLにどのようなことが記述されているのか読み取ることが困難でした。
※コメントや、<div>タグで囲むなどして、ユーザから意味が読み取ることができたが、コードから静的にどのような内容が記述されていることは読み取ることができなかった。
HTML5では、新しく定義されたタグによって、記述内容を詳細にマークアップすることによって、コードから静的に記述内容を読み取ることが可能になりました。
そのひとつにアウトラインがあります。
○アウトライン
アウトラインとは、Webページにおける文章の構成を表わしたもので、HTML4・XHTML1でも暗黙的に表現されていました。
例えば、
<h1>「またぐ」と「くぐる」の閾値実験レポート</h1> <p>人が障害物に対して「またぐ」と「くぐる」を選択する閾値と、被験者の身長（目の高さ）との関係を調査する。</p> <h2>実験内容</h2> <h3>実験日</h3> <h3>実験場所</h3> <h3>被験者</h3>
このようにマークアップされた場合、暗黙的に
<h1>「またぐ」と「くぐる」の閾値実験レポート</h1> <p>人が障害物に対して「またぐ」と「くぐる」を選択する閾値と、被験者の身長（目の高さ）との関係を調査する。</p> - <h2>実験内容</h2> - <h3>実験日</h3> - <h3>実験場所</h3> - <h3>被験者</h3>
のように解釈されます。
しかし、HTML5では明示的に階層構造をマークアップします。
その時に使用するのが、「セクショニング・コンテンツ」と呼ばれる種類の要素です。
HTML5では、定義されている各要素に対して、各要素をカテゴリ分けするための「コンテンツモデル」が設定されています。
そのカテゴリの中の一つが「セクショニング・コンテンツ」です。
セクショニング・コンテンツには以下の要素が存在します。
- article要素
自己完結的内容をまとめる場合に使用します。
（自己完結的とは、その部分のみ抜き出して意味が通じる内容であるということ） - aside要素
メインコンテンツとは関連性が薄く、分離可能なものに使用します。
（例：補足や、広告など） - nav要素
主要なリンクリストに使用します。
※あくまで主要なものに対して使うものであって、ブログによくあるカテゴリのリンクリストなどには使用しない。 - section要素
上記に当てはまらない場合、section要素を使用します。
これらのセクショニング・コンテンツを使用してサンプルコードを書きなおすと以下のようになります。
<h1>「またぐ」と「くぐる」の閾値実験レポート</h1> <p>人が障害物に対して「またぐ」と「くぐる」を選択する閾値と、被験者の身長（目の高さ）との関係を調査する。</p> <section> <h2>実験内容</h2> <section> <h3>実験日</h3> <h3>実験場所</h3> <h3>被験者</h3> </section> </section>
このように、HTML5ではコードから意味の読み取れることが重要視されています。（セマンティック・ウェブ）
最後に、自分の書いたHTML5のアウトラインを確認するサービスを紹介します。
HTML 5 Outliner
このサービスを利用すれば、ローカルのファイルやURLからHTMLのアウトラインを表示できます。
表示されるアウトラインを確認して、自分の思った通りのアウトラインになっていなければ、記述に問題があると言えます。
逆に、自分の思った通りのアウトラインになっていれば、作成したHTMLが誰が見ても同じ意味で解釈できると言えます。
サンプル用にHTMLを作成しました。
リンクをクリックすると、作成したHTMLとアウトラインが確認できます。
HTML5で追加された要素、記述方法が変更された要素については、又の機会に紹介したいと思います。