HTML5について勉強会を行いました。

こんにちは。森です。
HTML5について勉強会を行いました。

HTML5はどのブラウザも一部の機能にしかまだ対応していませんが、8月25日に新しい草案が公開され、最終草案も近いと言われています。
（Firefox3.5、Safari4、Google Chrome3、Internet Explorer8、Opera10がそれぞれ一部のみ対応。）

HTML5はHTML4から大きく2つの変更点があります。「新しい要素の追加」と「Webアプリケーション向け機能の強化」です。
具体的にどのように変わったのか、概要は以下の通りです。

[新しい要素の追加]
・文書構造を明確化する要素の追加
・メディアデータを取り扱う要素の追加
・フォーム要素の強化

[Webアプリケーション向け機能の強化]
・アプリケーションキャッシュ
・クロスドキュメントメッセージング
・Web Workers
・Web Storage
・Web Database
・Web Sockets
・Geolocation API

今回は主に「新しい要素の追加」についてまとめてみました。

※Webアプリケーション向けの機能について詳しく知りたい方は下記によくまとめらているので、こちらをどうぞ。
詳解! HTML 5と関連APIの最新動向 – Webアプリ開発編（マイコミジャーナル）

---

・文書構造を明確化する要素の追加

下記の要素が追加されます。

article… 「記事」を表すセクション要素
aside … 補助的な情報を表すセクション要素
footer … セクションのフッタ
header … セクションのヘッダ
hgroup… 見出し要素(h1 – h6) をまとめるための要素
nav… ナビゲーションリンクを表すセクション要素
section… 汎用的なセクション要素
figure… キャプション付きのフロー要素。図表等の埋め込みが主な用途。（キャプション用としてlegend要素が利用できる）

div要素を多用するのではなく、上記の要素を使用することで、より文書の構造が明確化することができます。
将来的にはSEOに大きく影響してきそうですね。ディレクターはarticle要素でどの部分がsection要素なのかなど、要素まで意識してワイヤーフレーム作成する必要があるかもしれません。

上記要素を使用し、HTML5で実際にコーディングを行ったサンプルページがあります。
HTML5 で試しに Web ページを組んでみた (改訂版) – VERSIONFIVE
HTML5で組んでみた – えど – builder by ZDNet Japan

---

・メディアデータを取り扱う要素の追加

動画データを扱うvideo要素と音声データを扱うaudio要素が追加されました。JavaScriptで再生・停止などの操作を行うことが可能になります。
しかし、どのコーデックをサポートするかは未定のため、どの程度、実用的なものになるかは未知数です。

---

・フォーム要素の強化

要素が追加され、入力値のバリデーションや、オートコンプリート機能の制御が可能になります。

-入力値のバリデーション
required属性…入力必須であることをブラウザに伝える。
pattern属性…入力値のパターンを正規表現で指定することが可能。

-オートコンプリート機能の制御
autocomplete属性…”on” “off”で指定し、制御が可能。
list属性、datalist要素…表示されるリストを指定可能。

その他にも、type属性の種別にdatetime（日時を入力するフィールド）などが追加されています。このdatetimeはOpera10ではカレンダーが表示されます。
より詳しく知りたい方は下記ページを参照してください。
詳解! HTML 5と関連APIの最新動向 – 新タグ&API編　5.大幅に強化されたフォーム要素（マイコミジャーナル）
HTML5サンプル集 – 株式会社あゆた

---

まだどのような形でブラウザに実装されていくかわかりませんが、おそらく各ブラウザとも次のバージョンではHTML5の多くの機能に対応していくものと思われます。先の話だと思って放っておいていたら、いつの間にか取り残されてしまっているなんてことがないように、きちんと勉強をしなければいけませんね。