• Twitter
  • Facebook
  • Google+
  • RSS

HTMLで図まで描ける!進化した「HTML5」ってどんなもの?


■HTML5でできること

まずは、HTML5を使うと具体的にどんなことができるのかを見ていきましょう。

<具体的に何ができるの?>
HTML5.JP - 次世代HTML標準 HTML5情報サイト
HTML5とは?変わるWebと注目の新要素 HTML5.0の情報サイト
大幅に進化した次世代 HTML 規格「HTML5」とは? - japan.internet.com Webビジネス
HTML5, きちんと。
めざましTech - HTML5 についての Q&A
2010年に勧告される「HTML5」は「HTML4」と何が違うのか? - GIGAZINE
iPhone/Android版GmailがHTML5を利用 | Web標準Blog | ミツエーリンクス

HTML5の特徴の一部としては、次のような項目が挙げられます。

  • 文章の構造化が進み、検索エンジンなどに対してページの内容をより明確に伝えられるようになる。
  • 動画や音声データの公開もより便利に。
  • オフラインでもWebサイトのデータ閲覧が可能に。

まず大きな特徴として挙げられるのが、ページの内容をより明確にコンピュータに伝えるための「文章の構造化」が進むという点です。これまでWebサイトのレイアウトといえば、tableタグやdivタグとCSSの組み合わせによるものが主流でした。ヘッダーとなる部分は<div id=”header”>、フッターとなる部分は<div id=”footer”>といった記述の仕方が一般的でしたが、HTML5では<header>や<footer>といった要素が新たに追加されます。レイアウトにこれらのタグを利用することで、「<header>と</header>で囲まれた箇所はヘッダー部分である」とコンピュータ側が認識するようになり、ページ内の文章構造をより明示的に表すことができます。ヘッダーやフッター以外にも、文章などのセクションを定義する「section要素<section>」や、ナビゲーションエリアを定義する「nav要素<nav>」などがあります。

そして今やWebサイトには欠かせない「動画・音声」といったマルチメディアコンテンツについても、HTML5ではより簡単に扱えるようになります。これまでFlashやAjaxの技術が必要だった機能についても、HTML5とJavaScriptのみで実現が可能になり、画像を貼る<img>タグのように、<video>や<audio>といったタグによって動画や音声をページに埋め込むことができます。

また、既存のブラウザではできなかったデータをブラウザ上に保存する機能や、ネットワークに接続していない環境でもWebサイトの表示をサポートする機能も、HTML5の大きな特徴と言えます。オンラインからローカルに保存しておくことで、ネットワークに繋がっていなくても必要なデータを閲覧することが可能になり、実際にGmailのWeb版でもこれらの機能を生かし、ネットワークに繋がっていない状態でもiPhoneからメールを閲覧できるようになっています。

<Googleが語るHTML5>
グーグルが賭けるHTML 5の未来 − @IT
【レポート】5分で把握するHTML5 - Google Developer Dayセッションリポート (1) HTML5仕様の概要 | エンタープライズ | マイコミジャーナル
Google Japan Blog: HTML5 コミュニティ発足のお知らせ
「HTML5によって、Webをアプリケーションプラットフォームとして利用できるようになる。」と語るGoogle。そんなGoogleがHTML5で実現可能になる新機能について紹介するエントリーがこちらです。

中でも注目なのが「canvas要素」。JPEGやGIFといった画像ファイルを用意しなくても、幅と高さを指定した<canvas>タグを定義すれば、JavaScriptを使って矩形や円などの図形も自由に描写することができます。
Canvasとは - Canvas - HTML5.JP
ASCII.jp:HTML5先取り!CanvasならFlash不要で絵が描ける
HTML5 Canvasのチートシート | コリス

<もっと詳しく知りたい!>
HTML5 を学ぶための情報源まとめ | WWW WATCH
「HTML5についてもっと詳しく知りたい!」という人は、参考になるサイトがまとめられたこちらのエントリーもオススメです。

■HTML5でどんなページが作れるのか見てみよう!

HTML5でできることが分かったら、実際にどんなページが作れるのか見てみたいですよね。続いては、そんな時に参考にしたいエントリーです。

<HTML5で構築されたサイト>
デザイナーのためのHTML5リソースまとめ | DesignWalker
HTML5 Gallery | A showcase of sites using HTML5 markup
HTML5 で試しに Web ページを組んでみた (改訂版) - VERSIONFIVE
HTML5で構築されたサイトを紹介するエントリーがこちらです。canvasやaudioといった新要素を使ったサイトのほか、印刷して使えるチートシートなどもあります。

<HTML5版のYouTubeって?>
YouTube HTML5 Demo
YouTube、HTML5動画プレーヤーをテスト公開 - ITmedia News
こちらの「YouTube HTML5 Video Player」では、Flashを使わず、HTML5のvideo要素とJavaScriptによってYouTubeでの動画再生を可能にしています。再生には、Google Chrome、Safari、ChromeFrameプラグインをインストールしたInternet Explorerのいずれかのブラウザが必要になります。

<HTML5のサンプル集>
HTML5サンプル集 - 株式会社あゆた
ドラッグ&ドロップAPIやフォーム、video要素など、HTML5で実現する様々な機能のサンプルがまとめられています。


HTML言語として実に10年以上ぶりにバージョンアップされるのが今回のHTML5。新しい要素もたくさん追加され、「こんなことまでHTMLでできるの?」というような機能もあったのではないでしょうか。正式な勧告は2012年頃と言われています。引き続き、今後の動向に注目したいですね。HTML5に関する話題は、はてなブックマークのタグ「HTML5」からもどうぞ。
タグ「HTML5」を含む新着エントリー - はてなブックマーク

文: 飯塚朋子

関連エントリー