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

HTML5、使ってますか?
このサイトも未なのですが、これからHTML5を使い始めるぞっとなる10の理由を紹介します。

サイトのキャプチャ

Top 10 Reasons to Use HTML5 Right Now

下記は各ポイントを意訳したものです。

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

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ではモバイルサイト・アプリケーションを開発するための用意もできています。

  • Viewport
    ビューポートの幅とズームの設定が可能です。
  • Full screen browsing
    iPhone用のiOSでフルスクリーンモードで表示することが可能です。
  • Home Screen Icons
    ファビコンのようにiOS, Androidなどのモバイル機器でホームスクリーンにお気に入りとして加えることが可能です。

1. これからはHTML5

HTML5を使い始めるべき一番の理由は『これからはHTML5だ』ということです。HTML5は本質的にはただのHTMLです。なにも恐れることはありません。
逆に言えば、新しいプロジェクトでHTML5を使わない口実は何もありません。

個人的な一番の理由は、HTML5はクリーンなコードである、をあげます。セマンティックなマークアップをよりシンプルにします。

まずは、HTML5を使い始めてみてください。

top of page

©2017 coliss