H T M L5　入門編

HTML5 　入門編

HTML5ってなに?

W3CがHTML4に代わる次世代のHTMLとして策定を進めているHTML仕様

HTML の5回目に当たる大幅な改定版

なぜ今 HTML5 なのか、 XHTML は？

歴史的背景 2000 年 W3C は XHTML を正式勧告し、その後も改訂を進め、ルーズな HTML ではなく、厳密にパースが可能な XHTML にシフトするはずだった。しかし、世の中の流れは W3C が想定した方向へ動かなかった。大手の企業やサービスは、機械処理になじみやすい XML ベースの XHTML を利用したが、 HTML を作っている多くの人々は、主に Web ブラウザが特に不平をいわないからという理由で移行しなかった。

簡単に言えば、シンプルに誰でも書けて間違っていてもそれなりに表示されてしまう HTML に比べて、 XHTML は扱うのが難しく、多くのサイト運営者にとって W3C の提唱するセマンティック・ウェブを実現させる為の仕様は複雑すぎたのだろう。 ※ セマンティック・ウェブについては、付録を参照現場の開発者は、シンプルで実際に動くものを好んだ HTML 以外だと　 XML->YAML 　 SOAP->REST とか

W3C 発ではない Web 関連技術・仕様が広まった　 XMLH ｔｔｐ Request 　 JSON 2004 年 6 月 Web ブラウザベンダが集まって作った団体「 WHAT WG 」が発足 HTML や API の仕様策定（ Web Applications 1.0 、 Web Forms 2.0 ）をサクサク進める「 WHAT WG 」 W eb H ypertext A pplication T echnology W orking G roup Safari,Mozilla 、 Opera 等が中心マイクロソフトは、 WHAT WG への参加を拒否！

2006 年 10 月 W3C がついに XHTML への全面移行というシナリオが無謀だったと認める 2007 年 4 月 W3C のスタンスの変化を見た WHAT WG が提案をもちかける『 WHAT WG で開発してきた仕様を W3C の HTML 研究会で出発点として採用して「 HTML5 」と名付けて開発をしてはいかが？』 2007 年 5 月 W3C が WHAT WG の提案を受け入れる

すでに HTML5 の一部に対応しているブラウザ × ○ ○ ○ ○ InternetExplorer8 FireFox3.5 Opera10 Google Chrome Safari4

HTML5で追加、強化された機能

動画、オーディオ再生

2次元ベクターグラフィック

セマンティック・ウェブの実現

レイアウト機能

文書の構造化

新しい要素を少し紹介します

audioタグ videoタグ

Audio タグ

音声の再生ができる

<audio src=“ 音声ファイル” ></audio>

video タグ

動画の再生ができる

<video src=“ 動画ファイル” ></video>

canvasタグ canvas は、ブラウザ上に図を描くために策定された仕様。 Flash や Java のようにプラグインを使わずに、 JavaScript ベースで図を描くことができる。もともとは Apple が発祥で、当初、 Mac OS でおなじみの Dashboard で使われた技術仕様、その後 WHAT WAG で採用された。 Canvas 要素は、すでに Safari1.3 以降、 Opera9 以降、 Firefox1.5 以降で実装されている。 IE は対応していないが、 Google が公開した ExplorerCanvas という JavaScript ライブラリを使用すれば canvas の機能をエミュレートできる Canvas のサンプル https://developer.mozilla.org/ja/A_Basic_RayCaster http://nic-nac-project.de/~jcm/index.php?nav=puzzle http://www.benjoffe.com/code/demos/canvascape/

考察・まとめ

マイクロソフトの動き次第で、 HTML5 の普及のスピードが変わりそう

iPhone 、 Android 等の Webkit ベースのブラウザを搭載したスマートフォンがシェアを伸ばしていることを考えると、 PC の世界よりスマートフォンの世界の方が HTML5 の普及は早そう

セマンティック･ウェブによって、検索エンジンとの親和性が高まると思う。 SEO コンサルは廃業になってしまうのでは？

まだまだあるので、次回続編を予定しています。実践編とか

付録

セマンティック・ウェブとは？セマンティック・ウェブ (Semantic Web) は W3C のティム・バーナーズ＝リーによって提唱された、ウェブページの意味を扱うことを可能とする標準やツール群の開発によって World Wide Web の利便性を向上させるプロジェクト。セマンティック・ウェブの目的はウェブページの閲覧という行為に、データの交換の側面に加えて意味の疎通を付け加えることにある。現在の World Wide Web 上のコンテンツは主に HTML で記述されている。 HTML では文書構造を伝えることは可能だが、個々の単語の意味をはじめとする詳細な意味を伝えることはできない。これに対し、セマンティック・ウェブは XML によって記述した文書に RDF や OWL を用いてタグを付け加える。この、データの意味を記述したタグが文書の含む意味を形式化し、コンピュータによる自動的な情報の収集や分析へのアプローチが可能となると期待されている。

HTML5で実装されているサイト HTML5 で実装されているサイトを集めたサイト http://html5gallery.com/ HTML5 版 Youtube の demo サイト http://www.youtube.com/html5 Safari の welcome ページ http://www.apple.com/safari/welcome/