新たなインターフェイスや機能が使えるメリット
HTML5では、新しく追加された要素や属性によって、新たなインターフェイスや機能が使えます。
新しいフォームパーツ
input要素のtype属性に指定する属性値に新たな値が多数加わり、リッチなフォームがHTMLだけで実装できるようになります。いくつかの例を紹介しましょう。
・type="datetime"
input要素のtype属性に「datetime」を指定すると、対応ブラウザーでは日付と日時を入力するインターフェイスが表示されます。Operaでは図のようにカレンダーが表示され、カレンダー上で日付を選択できます。
<input type="datetime" />
・type="number"
input要素のtype属性の値に「number」を指定すると、対応ブラウザーでは数値を入力するインターフェイスが表示されます。
<input type="number" />
・type="range"
input要素のtype属性の値に「range」を指定すると、対応ブラウザーではスライダーが表示されます。最小と最大の値や、値の刻みを指定できます。
<input type="range" />
・type="color"
input要素のtype属性の値に「color」を指定すると、対応ブラウザーでは色を選択するインターフェイスが表示されます。Operaでは、まるでネイティブアプリケーションのグラフィックソフトのように操作できます。
<input type="color" />
スマートフォンのソフトウェアキーボード
フォームパーツほどのビジュアル的なインパクトはありませんが、iPhoneなどのスマートフォンを使うときに少し便利になる属性値もあります。
・type="url"
input要素のtype属性の値に「url」を指定すると、ソフトウェアキーボードの下部に「 .」や「/」や「.com」などが表示されます。
<input type="url" />
・type="email"
input要素のtype属性の値に「email」を指定すると、ソフトウェアキーボードの下部に「@」や「.」が表示されます。
<input type="email" />
・type="tel"
input要素のtype属性の値に「tel」を指定すると、ソフトウェアキーボードがテンキーになります。
<input type="tel" />
・type="search"
input要素のtype属性の値に「search」を指定すると、ソフトウェアキーボードの「GO」が「Search」になります。
<input type="search" />
フォーム以外のインターフェイス
progress要素やmeter要素などの新要素は、対応しているブラウザーではそれぞれ専用のインターフェイスが表示されます。
・progress要素
<progress value="30" max="100"></progress>
・meter要素
<meter min="0" max="100" value="60"></meter>
Google Chromeではどちらもゲージが表示されますが、それぞれ意味が異なるゲージになっています。
progress要素は進捗を表したい場合に、meter要素は現在の値そのものを表示したい場合に使用します。
HTML5の採用で考えられるデメリット
ここまでHTML5を採用するメリットを紹介していきましたが、現時点ではデメリットもあります。
HTML5はまだ策定中の仕様であり、勧告までにはまだ数年かかると言われています。この先、勧告までに仕様が変わる可能性があるのです。
実際にHTML5の仕様書を見てみると、つい最近にも変更されていることが分かります。
- HTML5 differences from HTML4
- http://www.w3.org/TR/html5-diff/#changelog
- W3C - 『HTML 5 differences from HTML 4』日本語訳 - HTML5.JP
- http://www.html5.jp/trans/w3c_differences.html#changelog
もし要素の削除などがあった場合は、あとあと対応が必要になることがデメリットとして挙げられるでしょう。
また、HTML5には、セクションを明示的にマークアップする方法と、文書のアウトラインを判別する方法が用意されています。HTML5でマークアップする場合はこれらを意識しながら作業を進める必要がありますが、不慣れなうちは少し戸惑うことがあるかもしれません※。
※これらの2つの方法が用意されていること自体はメリットであると言えます。詳しくは今後の連載で解説していきます。
