HTML5の新要素について

HTML5で加わった数多くの要素の中でも、セクション要素やheader/footer要素などのいわゆる「セマンティック」な要素は、既存のWebページでよく利用されているid属性/class属性の値を調べ上げた結果を参考に、要素の導入可否が決定されたと言う(id属性値の調査結果、class属性値の調査結果)。

こうしたセマンティックな要素を用いれば、従来のdiv要素だらけのマークアップも、明確な文書構造を持ったマークアップへと様変わりする。

従来からある、div要素だらけのマークアップ

セマンティックなマークアップ

強化されたフォーム要素

HTML5ではフォーム要素が大きな進化を遂げ、リッチな入力フォームを手軽に扱えるようになった。特に、input要素のtype属性値が大幅に増えたことと、入力値のチェックをJavaScriptなしで行えるようになったことが大きな変化だ。

例えば、<input type="tel">と記述した入力フィールドをiPhone上で見ると、電話番号の入力フォームとして解釈・実行される(フォーカスが当たると、電話番号を入力するためのキーボードが表示される)。

電話番号の入力フィールド

ビデオ・オーディオ要素

video要素、audio要素が新しく追加されたことにより、マルチメディアコンテンツをHTMLのみで容易に扱えるようになったことも、非常に大きな進歩だ。

動画や音声の再生がブラウザによってネイティブサポートされたことは、取り扱いが容易なだけではなく、CSS(メディアクエリも利用可)やDOMとの統合、キーボードによるアクセシビリティ、JavaScript APIによる操作が可能、と言った利点を享受できる。また、比較的新しく導入されたtrack要素を用いて、動画に字幕を追加することも可能になった。

ただ、video/audio要素を扱う場合は、ブラウザごとにサポートしている動画フォーマットやコーデックが異なるという大きな問題を考慮する必要がある。

ブラウザごとの動画フォーマット・コーデックのサポート状況

SVGか、canvasか?

JavaScriptによって操作可能なビットマップグラフィックスであるcanvasと、XML形式のベクタグラフィックスであるSVG(Scalable Vector Graphics)は、それぞれに違った利点があり、異なる用途を持つ技術だ。Lawson氏は「どちらが良い」と明言したわけではなかったが、最後にSVGの利点を強調してセッションは終了した。

SVGの利点

HTML5の重要なファクターを楽しく、わかりやすく理解できる、素晴らしいプレゼンテーションだった。

またHTML5に興味のある読者は、手前味噌ではあるが、筆者が以前執筆した特集記事も合わせて参考にされると良いと思う。