A List Apart - for people who make websites

J. David Eisenberg氏がA List ApartにおいてGet Ready for HTML 5のタイトルのもと、Webブラウザのサポートが進むHTML 5に対してどうやって取り組んでいけばいいかを説明している。HTML 5にはWebデベロッパやWebデザイナにとって魅力的な機能が多い。2009年8月で67%弱という最大シェアを誇るIEはHTML 5に対応していないが、それ以外の主要ブラウザでのHTML 5サポートは随時進められている。紹介されている内容は次のとおり。

ほかの事例を参考にする

HTML 5 galleryをチェックするなどしてほかの人たちがどのようにHTML 5を使っているのかを調べる。HTML 5 galleryからすでにHTML 5の機能を使っているサイトをチェックできる。

記事を読み、そして実践する

A Preview of HTML 5、HTML 5 Doctor, helping you implement HTML 5 today、HTML5 - Draft Standardなどを読み、その後は実際に既存のサイトでHTML 5を使ってみたり、新しく実験ページを作成するなどしてHTML 5を試しながら理解する。なお、機能するものとそうでないものがあるので注意が必要。たとえばFirefox 3.5ではarticle要素とsection要素をdisplay:inlineとして処理するため、明示的にdisplay:blockを指定して使う必要がある。

XMLに準拠した記述を実践する

オーサリングルーツが対応するまでは手動でタグを書く必要があるが、その場合にはタグをちゃんと対応づけて閉じたり、属性値はかならずダブルクォーテーションで囲むなどXMLに準拠した書き方をする。オーサリングツールがHTML 5に対応したあとも同じようにXMLに準拠したコードを生成した方がいい。XMLに準拠した記述であればRDFa、MathML、SVGなど複数のマークアップを同時にひとつのドキュメントで利用できるし、XPath、XSLT、XQueryなどのツールも活用できる。

正規表現

HTML 5のinput要素では入力されるデータの型やその上限・下限を設定できる。指定できる型は数値以外にもURL、メール、日付、時間などがあり、それら型に該当しない場合には正規表現で入力パターンを指定できる。指定できる正規表現はECMAScript Language Specification (Standard ECMA-262 3rd Edition) - December 1999 [PDF]で規程されたもの。Operaはフル実装、Safari、Chromeで一部が実装されている。webforms2 - Project Hosting on Google Codeを使うことでサポートしていないブラウザでも利用可能。

SVGで静止画

HTML 5ではSVGを埋め込むことが可能。JavaScriptと組み合わせることで動的に変更することもできる。

Canvasを使う

HTML 5でもっとも興味深い気嚢のひとつがcanvas要素。IEを除く主要ブラウザFirefox、Safari、Opera、Chromeでサポートされている。JavaScriptからグラフィックを描画するための機能で、さまざまな描画機能を提供している。