HTML5に踏み出せない人に捧げる、HTML5を使う10の理由

Post on:2011年12月5日

10. アクセシビリティ

HTML5は「セマンティック」「ARIA」の2つの理由でサイトをアクセシブルにします。header, footer, nav, section, adiseなどのような要素はスクリーンリーダーにもコンテンツに容易にアクセス可能なようにします。また要素にroleを使い、より詳細な役割や状態を定義することができます。

9. ビデオとオーディオのサポート

Flashをはじめとするメディア用のプレイヤーはもう忘れてください。HTML5ではビデオやオーディオに対応したvideo, audio タグが用意されています。今まではメディアコンテンツを配置する時にembed, objectタグを使い、数多くのパラメータを記述していました。HTML5ではこういった煩わしさはなくなり、シンプルに「<video src="url"/>」と記述します。高さや幅、自動演奏を指定する場合もシンプルです。「<video src="url" width="640opx" height="380px" autoplay/>」となります。

8. Doctype

<!DOCTYPE html>

HTML5ではdoctypeの記述がシンプルになりました。
これは単に記述が少なくて楽というだけでなく、IE6を含めすべてのブラウザで認識します。
※IE9未満への対応は「3. 古いブラウザのサポート」もご覧ください。

7. よりクリアなコード

よりシンプルで、エレガントで、簡単なコードを望むのであれば、HTML5はあなたにぴったりです。HTML5ではスタイルとコンテンツを分離し、セマンティックにコードを記述することができます。
ナビゲーションを含むヘッダのコードを見てみましょう。

<div id="header">
 <h1>Header Text</h1>
 <div id="nav">
  <ul>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
  </ul>
 </div>
</div>

このコードはクリーンでシンプルですか？
HTML5では、このコードをもっと美しく、もっと多くの意味を与えることができます。

<header>
 <h1>Header Text</h1>
 <nav>
  <ul>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
  </ul>
 </nav>
</header>

HTML5はコードを美しくするだけでなく、divやclassの使いすぎを治すこともできます。
これはマークアップに影響を与えるだけでなく、CSSもより組織化されてハッピーになるでしょう。

6. ストレージ

HTML5のクールな特徴の一つが、ローカルストレージです。これは今まで使っていたクッキーとクライアントサイドのデータベースの中間のようなものです。
ローカルストレージはセキュリティとパフォーマンスの面でクッキーより優れ、サードパーティのプラグイン無しでウェブアプリケーションを作成することも可能です。

[ad#ad-2]

5. インタラクション

HTML5ではCanvasをはじめ、さまざまなAPIでユーザーとのインタラクションを可能にします。

Canvas
Drag and Drop
Offline storage database
Browser history management
document editing
Timed media playback

これらはダイナミックなウェブアプリケーションを生み出し、より良いユーザーエクスペリエンスを作り出すでしょう。

4. ゲームの開発

HTML5のCanvasタグを使って、ゲームを作成することもできます。以前にFlashでゲームを作ったことがあるなら、おそらくHTML5でゲームを作成するのも好きになるでしょう。
HTML5では対話型のゲームを作成する素晴らしい方法を提供します。

3. 古いブラウザのサポート

人気の高いモダンブラウザ（Chrome, Firefox, Safari, IE9, Opera）はHTML5のdoctypeをサポートしており、IE6でさえ使うことができます。しかし、IE6などの古いレガシーブラウザがdoctypeを認識するからといって、HTML5の新しいタグが使用できることを意味するものではありません。
IE6などのレガシーブラウザでHTML5を使用する際は、新しいタグが使用できるようにJavaScriptを利用します。

<!--&#91;if lt IE 9&#93;>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!&#91;endif&#93;-->

これはIE9未満でHTML5の新しいタグが利用できるようにします。

2. スマートフォンへの対応

今日、スマートフォンなどのモバイル機器が世界をコントロールしているといっても過言ではないでしょう。モバイル機器のシェアは非常に急速に大きくなっており、これは多くのユーザーがあなたのウェブサイト・アプリケーションをモバイルブラウザで利用することを意味します。HTML5ではモバイルサイト・アプリケーションを開発するための用意もできています。