なぜ今、HTML5なのでしょう？
PCなどでWEBサーフィンするだけならば不完全ではありますが、XHTMLまでの仕様である意味充分です。
しかし、ことモバイル環境、特にスマートフォンを考慮した場合、XHTMLまでの仕様ではうまくいかない場合があります。
帯域の大きさや回線速度、表示領域の大きさなど、これまでのPC利用を目的に作られてきた仕様では重すぎます。

そのため、今ではガラパゴス携帯とも揶揄される日本国内のフィーチャーフォンでは、キャリアなどが独自のHTML仕様を採用しています。
それにより、ページ制作やアプリ制作をキャリア毎、場合に依っては機種毎に対応しなければなりません。
動作検証するために実機を用意する必要がありました。
海外でも、Symbian OSやBlackBerryなど独自OSを使っているものが多く、HTML事情は同様のものがありました。
(Symbian OSやBlackBerryの中にもスマートフォンは存在します。)

しかし、2007年のApple社からのiPhoneの発表、続いてGoogle社からのAndroidの発表により、スマートフォンが急激に普及しはじめます。
ios(iPhoneのOS)では、WEBブラウザとして「Safari」を標準ブラウザとして採用しています。
同じくAndroid OSでは、「Chrome」を標準ブラウザとして採用しています。
これら、PCと同じブラウザをスマートフォン上でも利用でき、フルブラウジングが出来るようになりました。

それでも、帯域の大きさや回線速度、表示領域の大きさなどの問題は残ります。
多くのページは、PC用に制作されているため、スマートフォンでは拡大しないと見れません。

また、デザイン性やインターラクティブ性の高いページも増えて、Adobe FlashやJavaを用いるページも増えてきました。
しかし、Adobe FlashやJavaはページ本体以外に動作するファイルのダウンロードを必要とします。
ブロードバンドが当たり前になったPCと異なり、スマートフォンを含むモバイル環境ではできることならばページ(画像等を含む)内だけで完結できるのが望ましいと言えます。

HTML5は、まだ策定途中ですが、これらモバイル環境の問題に応える形で進んでします。
また主流になりつつあるスマートフォンが基本的にHTML5に対応することで、HTMLの標準化も進みます。
これまでのようにキャリアや機種を検証する必要がなくなり、開発コスト...そして普及へと繋がります。
スマートフォンが台頭してきている今だからこそ、HTML5が必要とされているのです。

以下のHTML5の機能が、モバイル環境 特にスマートフォンに適していると言えます。

文書構造が簡略化できる

「HTML5の基本形」にあるように、HTML5の基本的な書式は、従来のXHTMLなどに比べて簡素なものになります。
そのため、HTMLのファイルが小さくて済むだけでなく、文書検証が省かれるため、モバイル環境に適していると言えます。

同様に「文書構造の明確化」することは、構造を示すための定義を必要としなくなります。
やはり関連ファイルの小さくて済むことになります。

動画や音声の直接取り扱える

従来のXHTMLまでは、動画や音声を扱うためにAdobe Flashなど外部アプリケーションを利用する必要がありました。
Flash Movieなどは、動画ファイルだけでなく、それを動かすためのswfファイルもダウンロードする必要がありました。
HTML5では、<video>要素や<audio>要素により、動画や音声を<img>要素と同様に扱えるようになります。
(「動画や音声を扱う」参照)
HTMLのファイルが小さくなることはもちろん。動画や音声を扱うのに別のファイルをダウンロードする必要がなくなります。
通信環境だけでなく、利用可能なリソースにも制限があるスマートフォンに適していると言えます。

ブラウザだけで図形を描ける

動画などと同様にインターラクティブなページ表現をしたい場合、Adobe FlashやJavaなど外部アプリケーションを利用する必要がありました。
しかし、HTML5では<canvas>要素や<svg>要素を用いれば、ページだけでインターラクティブなページ表現が可能です。
(「ブラウザだけで図形を描く」参照)
HTMLのファイルが小さくなることはもちろん。外部アプリケーションが必要ありません。
通信環境だけでなく、利用可能なリソースにも制限があるスマートフォンに適していると言えます。

オフライン機能

「アプリケーションキャッシュ」を用いることで、帯域や速度に制限があるモバイル環境においてもストレスなく利用できるようになります。

また、WEBアプリケーションとして作成した場合、スマートフォンのアプリとして利用することも可能になります。
(2011年8月現在、WEBアプリケーションをアプリとして登録しているものも存在します。)
「アプリケーションキャッシュ」に加え、「Web Storage」や「Web Database」などもクライアント側で動作するためのAPIです。
これにより、アプリ利用者の設定した内容をスマートフォン内で保存したり、検索したりできるようになります。
スマートフォン内に保存できるので、通信できない環境でもWEBアプリケーションを利用することができます。
それはファイルとしてだけでなく、データベースとしても扱えるでの、検索を必要とするアプリも作成が可能になります。

位置情報を得る

スマートフォンのアプリの多くは、位置情報を用いたものが多くあります。
元々、フィーチャーフォンにおいても、位置情報を得る仕組みはありましたが、キャリアや機種によりその取得方法が大きく異なりました。
「Geolocation API」により、位置情報の取得が標準化されます。
また、フィーチャーフォンにおいては、GPSからか、基地局やIPアドレスからかにより、取得方法が異なりました。
html5では、精度は異なりますが一つの取得方法でGPS、基地局やIPアドレスで取得出来るようになります。

スマートフォン画面への対応

html5と共にCSS3の策定及び実装も進んでいます。
(狭義ではCSS3はhtml5に含まれませんが、広義のhtml5として扱われます。)
その中で「Media Queries」は、スマートフォンの強う見方になります。
「Media Queries」では、この「Media Queries」を利用して同じコンテンツをCSSだけで表示を変更する方法を解説します。

Media Queries(メディアクエリ)とは、特定のメディア(印刷用とかプロジェクタ用、TV用など)に対してだけスタイルを適用する方法です。
Media Queries自体は、CSS2から存在し、下記のメディアタイプに対応していました。

CSS2までのメディアタイプ

all

全てのメディアに対応

aural → speech

音声 (CSS2まで aural 推奨 / CSS3以降 speech 推奨)

braille

点字ディスプレイ

embossed

点字プリンタ

handheld

携帯デバイス

print

印刷

projection

プロジェクタ

reader

スクリーンリーダー

screen

ディスプレイ

tty

テレタイプ

tv

テレビ

上記の「handheld」は、携帯電話(フィーチャーフォン)を主としています。
iPhoneやiPad、Androidなどスマートフォンのメディアタイプとしては、「screen」として扱われます。
しかしスマートフォン(特にAndroid系)は機種により、画面サイズや解像度が異なります。
また、同じスマートフォンでも縦表示と横表示で表示幅が異なってきます。

CSS3のMedia Queriesは、表示媒体のサイズやアスペクト比、カラー表示の可否などメディアタイプだけでは表現できない場合にも対応出来るようになりました。
以下は、「min-device-width」「max-device-width」などを用いて、スマートフォンの画面に対応する方法です。

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
	/* ... */
}

@media only screen
and (max-width : 320px) {
	/* ... */
}

@media only screen
and (min-width : 321px) {
	/* ... */
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
	/* ... */
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
	/* ... */
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
	/* ... */
}