HTML5にすることで具体的にどのようなメリットがあるのかまたデメリットはどんなものがあるのか、といった事について今回はご紹介したいと思います。

まず、メリットですが

・よりセマンティックなマークアップ
・より高い互換性
・これまで難しかった表現が可能になる
といった点が大きいと思います。

1.よりセマンティックなマークアップ

セマンティックとは、情報を効率よく検索・収集するための技術のことです。

今回、構造やデータの形式に合わせたタグが新たに追加されたことにより文書構造をより明確に表現することが可能になりました。
人間だけでなく、コンピュータにとっても読みやすい文書ということです。
これにより、検索エンジンとの親和性が高く、SEO対策に近いことができてしまう利点があり、また、W3Cによって策定されているアクセシビリティの仕様にも対応しているのでより高いアクセシビリティが可能になります。

2.より高い互換性

既存のブラウザに対する配慮がされています。

新しく追加された要素はフォールバックという仕組みによって、表示させない、または入力した代替テキストを表示させるなど、古いブラウザでも取り扱う事が可能です。
新しいブラウザと同じ表現をする為にはJavaScript等で補わなければなりませんがレイアウトが大きく崩れるということは避けられそうです。

3.これまで難しかった表現が可能になる

HTML4では実現するのが困難だった機能、特に動画や音声、グラフィックの描画が簡単に実装できます。

ブラウザによる差異等、問題はありますが、Flash等のプラグインを使わず表現することが出来ます。
ただし、グラフィックに関してはある程度可能であるものの、Flashの全てを置き換えられるわけではないので状況によってどちらが適しているのかを見極めることが大切になるでしょう。
また、フォーム周りのタグも強化されており、javascriptを使わなければできなかった機能がHTMLで実装できるようになりました。

では、デメリットはどんなものがあるでしょうか。

・仕様が将来的に変更される可能性がある

・ブラウザの対応

1.仕様が将来的に変更される可能性がある

HTML5の仕様はまだ完全に決定したわけではありません。

将来的に、今作ったページが仕様に違反したものになってしまう可能性もあります。
とはいえ、大きな変更はあまり無いでしょうし、各ブラウザベンダーがHTML5の対応に積極的であること、スマートフォンではHTML5がそれなりに使えること、既にHTML5を採用したサイトが出始めている事を考えれば大きなデメリットではないでしょう。

2.ブラウザの対応

現段階で、まだHTML5の機能の多くをサポートしているブラウザはそう多くありません。

これまでのバージョンでもそうであったように各ブラウザの実装がまちまちで、それに対する対応が必要になります。
特に、今回新たに加わった動画や音声に関しては顕著で、ブラウザによって再生できる音楽や映像のフォーマットが異なることもあり、高度な機能を使ったwebアプリケーションの構築は簡単ではありません。
ただし、HTML5の導入自体はそれほど難しい事ではないので少しずつ採用していくのも良いかもしれません。

HTML5に関してある程度分かってきたところで、具体的にHTML4と5ではどう違うのでしょうか。
HTML5におけるHTML4からの主な変更点を大きくまとめると次の3つになります。

1.コンテンツモデル

2.アクセシビリティ重視
3.要素の変更

1.コンテンツモデル

HTML5で新たに導入された概念です。

HTML4ではブロック要素、インライン要素といった概念を用いていましたがHTML5ではこれらの概念はありません。
a要素やspan要素でp要素やul要素を囲うことも可能になるのです。
代わりに「メタデータ」、「フロー」、「セクション」、「ヘッディング」、「フレージング」、「エンベッディッド」、「インタラクティブ」という要素の種類が定義され、これらは「コンテンツモデル」と呼ばれます。
これらコンテンツモデルを意識することがhtml5において重要になります。

メタデータ	ドキュメントのメタデータ、スタイル（meta、script、style、titleなど）
フロー	ドキュメント内に現れるコンテンツ全般（a、br、img、p、divなど）
セクショニング	章や節など（article、aside、nav、sectionなど）
ヘッディング	見出し（h1～h6、hgroup）
フレージング	ドキュメントのテキスト（a、img、input、objectなど）
エンベッディド	外部リソース、HTMLでない別の言語（audio、canvas、embed、object、videoなど）
インタラクディブ	ユーザーが操作できるもの（a、audio、img、inputなど）

これらのコンテンツ・モデルにより、どの要素の中にどの要素を配置できるかというタグの配置ルールが決まるので、タグの意味を考えたマークアップが必要になります。

それによって文書構造をより明確に表現することが可能になるのです。

2.アクセシビリティ重視

HTML4の仕様ではアクセシビリティに関して細かく規定されていませんでした。

HTML5では上記のコンテンツモデルの導入によって、文章構造の意味を明確化します。
また、W3Cによって策定されているアクセシビリティの仕様に対応するので、スクリーンリーダーがコンテンツの内容をより正確に理解できるようになる、フォームの入力補助やチェック機能などが充実するなど、より高いアクセシビリティを実現することが可能になります。

3.要素の変更

コンテンツモデルの例でいくつか見覚えの無いタグがあったかもしれません。

HTML5では新たなタグが多く加わります。

・文章構造やセマンティックにできる要素（section、article、hgroup、header、footerなど）

・マルチメディア対応の要素（video、audioなど）
・図形を描写する要素（canvasなど）

逆に廃止される要素や意味が変わる要素もいくつかあり、center、font等のタグは採用されない予定です。

要素に関する詳細はこちら（W3C）

上の表はHTML5の機能に対してどのブラウザが対応しているかを表しています。

Windowsのブラウザに関して見てみると、SafariとChromeはほとんどの機能が利用可能ですが、逆にInternet Explorer（IE）はバージョン6、7に関してはほとんど対応していません。

8以降対応を始めたものの、まだまだ非対応のものも多く、最新の9でも、他のブラウザに比べると物足りなさが残ります。

なぜこのようにブラウザによって仕様が違うのかというとそれぞれ、採用するレンダリングエンジン（※）が違う為で、SafariとChromeは同じレンダリングエンジンであるWebKitを使っているので、同じような仕様ですが他のブラウザはそれぞれ、別のレンダリングエンジンを使用しており、それらの違いによって、表示や、HTML5の機能の実装に差が出てくるのです。

IE8以前のバージョンではHTML5で追加された新要素を理解出来ず、空要素として扱ってしまいます。

そのため、現状HTML5を採用しているサイトでは旧バージョンのIEではHTML5の機能を無視させるか、javascriptなどを使って、最新のブラウザに近づけるといった工夫をして対応しています。

ちなみに、最近はiPhone、Android等スマートフォンでWebサイトを見る機会も増えていると思いますが、これらの端末では、レンダリングエンジンにWebKitを採用しています。

つまり、SafariやChromeと同じ機能を備えているということになるので、スマートフォンではHTML5が使えると言っても良いかもしれません。

次回からは具体的にHTML5になってどのような変更点があったのか、また導入するメリットについて紹介していきたいと思います。

※レンダリングエンジンとは

HTML等で書かれたデータを、実際に画面に表示するための計算をするプログラム

まだ正式な勧告が出されていないHTML5ですが、それでも主要なブラウザは対応を始めており、HTML5で作成されたサイトも登場しています。

では、実際HTML5の普及率はどのくらいなのでしょうか。

Webサイト数やサーバーの種類などに関して毎月調査を発表している英Netcraftの調査によると、2010年12月の時点で、世界中のサイトの約1%がHTML5を採用していると発表しました。

そしてWebデザイナーの多くはHTML5の採用に依然として消極的だともNetcraftは報告しています。

これはHTML5の新しい機能を使うことで、HTML5をサポートしていないブラウザで意図しているのと違うデザインで表示されることへの懸念があるためで、その例として、canvasの利用が0.012%、videoの利用が0.011%、audioの利用が0.003%と、これらHTML5の新しい機能の採用が依然として少ないことを指摘しています。

さらに、HTML5が採用されているサイトは

・先鋭的なWebアプリ
・キャンペーンサイト
・個人のブログ
といった、試験的なものが多く、実績としてまだまだ少ないのが実状です。

HTML5はまだ策定段階にあり、その仕様も積極的に調整と変更を続けられているのでこうした結果になるのも仕方のない事かもしれません。

しかしブラウザを開発しているベンダーはHTML5の策定と実装に積極的で、どのベンダーも開発版でHTML5の機能の実装に取り組むとともに、ほかのブラウザとの互換性向上を目指して取り組みを続けています。

これらブラウザによる機能の実装や、互換性の向上は、HTML5の普及率アップには欠かせません。

では、現在のブラウザはどの程度HTML5に対応しているのでしょうか。
また、ブラウザ毎に表示に差があるのは何故なのか次回の記事で紹介したいと思います。

ローソンや無印良品など、国内でもHTML5で制作されたWebサイトが増え、 「HTML5」というキーワードを目にすることも多くなりました。

今すぐとはいかずとも、将来的にHTML5でWebサイトを制作したいと考えている方もいるのではないでしょうか。

ここでは、HTML5とは何なのか？何ができるのか？といった事をできるだけわかりやすく紹介していきたいと思います。

第1回目は、「HTML5とは何か」について。

HTMLとは、Webサイトの制作において利用されるマークアップ言語で、HTMLで書かれたコンテンツは、Webサーバーからダウンロードされ、 ブラウザ上で解釈、表示されます。

これまではHTML4やXHTML1を使うのが一般的でした。

しかし、このHTML4が登場したのは約10年前です。

今とはWebの環境が大きく違います。
そこで、次世代のWeb環境に合わせて、新たに仕様を検討されているのがHTML5、つまりHTMLのバージョン5ということになります。

HTML4やXHTML1の目的は、情報を公開することが主でした。

作成された情報をただ公開するのであれば良いのですがユーザーの操作に対して、何らかの処理をするようなWebアプリケーションを作成する場合機能としてやや不足な面が出てきます。

HTML5では、これまでのHTML4が改良され、さらにWebアプリケーションを開発するための仕様が新たに追加されています。

これまではプラグインなど、HTML以外の技術を使わなければ実現できなかったものがHTMLだけ、もしくはJavascriptを使ってシンプルに実現することが可能になるのです。

ただし、HTML5はまだ正式な勧告はされていません。

2008年に草案を発表、2012年に正式勧告予定となっています。

それでも次世代のWeb環境への対応に期待は高く、主要なブラウザはすでにHTML5への対応準備を進めており、ブラウザ毎に違いはあるものの、最新版では多くのブラウザでHTML5の機能が実装されています。

では実際HTML5はどれくらい普及しているのか、どのブラウザがどの機能に対応しているのか、そういった事を次回から紹介したいと思います。