ウェブ開発者が面倒な考慮をしなくても済むようになる"HTML5"を会得しない手はない！

　HTML5--押さえておくべき10のタグ

　HTML5では、ウェブ開発時に強力なパワーや効率性、柔軟性を発揮するタグと属性が新たに追加されている。本記事では、そういったタグを10個選んで紹介する。

　HTML5では、他のシステム（特に検索エンジン！）がドキュメントをより容易に解析できるようにしたり、今までにないデータ表示を可能にしたり、複雑なJavaScript、あるいは「Adobe Flash」や「Microsoft Silverlight」といったブラウザのプラグインを必要としていた機能に取って代わるような数々の新たな要素や属性が追加されている。以下では、HTML5を用いてあなたのウェブサイトを構築する際に役立つ10個の新たなタグを紹介する。

＃1：<video>タグと<audio>タグ

　FlashやSilverlightといったテクノロジを用いる最大の理由は、マルチメディアコンテンツの再生にあると言ってもよいだろう。HTML5で動画と音声の制御が新たにサポートされた結果、これらのテクノロジは今や代替手段の地位に降格させられることとなった。ブラウザはHTML5に対応することで、プラグインの助けを借りることなしにマルチメディアコントロールを表示でき、そのコンテンツはJavaScriptを用いて操作できるようになる。また、ウェブ開発者はコーデックに関する面倒な考慮をしなくても済むようになる。コンテンツとして複数のソースを指定できるため、あなたの用意したマルチメディアコンテンツは、ユーザーのブラウザがサポートしているコーデックの種類に関係なく再生できるようになるのだ。

＃2：<input>タグのtype属性

　<input>タグで指定するtype属性の値が数多く追加されたため、ブラウザ側ではその値に応じて素晴らしいことが行えるようになった。例えば、typeの値として"datetime"を設定すると、カレンダー／時計コントロールが表示され、適切な時間を指定できるようになる。こういったことは、従来であればJavaScriptが必要となっていた。type属性にはさまざまな値を指定できるため、それらの値（そして場合によっては同時に指定する追加属性）を学習しておくことでJavaScriptの出番を大幅に減らすことができるはずだ。

＃3：<canvas>タグ

　<canvas>タグを使用することでGDI+、すなわち.NETのImageオブジェクトを使用するようなかたちで、ビットマップ画像を取り扱えるようになる。<canvas>タグが完璧なものであるとは言えないものの（例えばレイヤを作り出すには、複数のキャンバスオブジェクトを次々と積み重ねていく必要がある）、従来のHTMLではカスタムグラフィックスとともに弱点とされていた、チャートやグラフといったものを作成する際に活用できるはずだ。つまり、このタグは単なる出発点でしかないというわけだ！

＃4：<header>タグと<footer>タグ

　<header>と<footer>という2つのタグは、HTML5で新たに利用できるようになったセマンティックタグである。これら2つのタグを使用しても、表示のうえでは<div>とまったく区別がつかない。しかし、これらによって検索エンジンは「コンテンツ」と、コンテンツではないもののユーザーにとって重要な意味を持つものとの区別がつくようになるため、長い目で見た場合、検索時により適切な結果が表示されるようになるわけである。

＃5：<article>タグと<section>タグ

　<article>と<section>という2つのタグもまた、検索エンジンにとって重要な意味を持つセマンティックタグである。記事（<article>）というものは複数のセクション（<section>）によって構成することができ、また、セクションというものは複数の記事を保持することができる。ややこしいって？いや、実はそんなにややこしい話ではない。記事というものはコンテンツブロック全体を表現したものであり、セクションはそれを包含する全体の一部となるわけだ。あるブログを例に取ると、フロントページにはすべての投稿を一覧できるセクションが保持されており、各投稿は実際の投稿内容を表示するセクションと、コメントを表示するセクションを備えた記事となっているわけだ。

＃6：<output>タグ

　新たに導入された<output>タグは、JavaScriptを用いて動的にコンテンツを生成するために用いられるという独特なものとなっている。このタグには、JavaScriptを用いてDOM経由で操作できる値が属性として保持され、これによって画面上の表示内容を変更できるようになるというわけだ。こういったやり方は、現行のものよりもずっと便利だと言えるだろう。

＃7：<details>タグ

　どのようなウェブサイトでもテキストブロックの展開機能と折りたたみ機能が必要となっているようだ。こういったことはJavaScriptやサーバサイドのコードによって簡単に実現できるものの、<details>タグによってさらに簡単になる。このタグを使うと、みんなが今まで作ってきたような、ヘッダのクリックだけでコンテンツの展開や折りたたみが行われるブロックを簡単に作成できるようになる。<details>タグをサポートしているブラウザはまだ少ないものの、その状況はすぐに変わるはずだ。

＃8：<figure>タグと<figcaption>タグ

　<figure>タグはコンテンツ（たいていの場合は画像であるものの、何でもコンテンツにすることができる）のコンテナであり、<figcaption>タグ（<figure>タグの内側で記述される）は<figure>タグの説明や副題を指定するものである。例えば、<figure>タグ内で売上高の推移が分かる4つのチャートを表示し、<figcaption>で「1989〜1993年の年間売上高推移」といったテキストを指定することができる。この例の場合、4つの画像が並べて表示され、そのすぐ下にテキストが表示される。

＃9：<progress>タグと<meter>タグ

　<progress>タグと<meter>タグは、似た者同士だと言える。<progress>タグは、何らかの作業の進捗度合いや「何かの完了度合い」を表現したい場合に使用するものだ。なお、このタグには所要時間が不明な対象（データベースの検索など）に用いることのできる不定モードも用意されている。一方、<meter>タグは何らかの値（温度や数量など）の計量結果や測量結果のために用いるものだ。多くの場合において、これら2つのタグの画面上での表示はよく似たものとなる。しかし、セマンティックス上の意味は違っているのである。

＃10：<datalist>タグ

　<datalist>タグは、システム側であらかじめ選択肢を提供するものの、ユーザー自らでもタイプ入力できるというコンボボックスのような動作を実現するものである。こういった使用例は、ユーザーの入力履歴に基づいて項目を設定した検索ボックスなど、数多く考えられるはずだ。この機能もHTML5が登場するまではJavaScriptの集合体（すなわちJavaScriptのライブラリ）を必要としていたのだが、今後はそういった手助けが必要なくなるというわけだ。

（ HTML5--押さえておくべき10のタグ　Justin James （Special to TechRepublic） 翻訳校正： 村上雅章 野崎裕子／CNET Japan／2012.06.05 ）

　とにかく、HTML5の "最大のメリット" は、＜ウェブ開発者はコーデックに関する面倒な考慮をしなくても済むようになる＞という点なのだから、ウェブ開発者がマスターしない手はないわけだ......　(2012.06.07）