参考:Wikipedia - HTML5
参考:HTML5.jp - HTML5解説サイト
参考:Yahoo Developers Network - HTML5とは何かを簡単にまとめてみた
参考:CodeZine - HTML5が注目を浴びる理由とは? ここが違う!サンプルで見るHTML5
参考:多摩美メディアリテラシー - HTML5+CSS3 入門
参考:HTML5でサイトを作ろう - HTML5で製作されたサイト20で現状を知る!
参考:4Gamer.net - HTML5とJavaScriptによるアクションゲーム制作入門
参考:1日でマスターできるHTML5まとめ。
参考:ゲームエンジンのGameSalad、HTML5に対応
参考:DeNAが明かすHTML5でのソーシャルゲームの作り方
参考:わずか数秒で自分用のHTML5のテンプレート一式を作成するサービス
参考:AdobeがHTML5のアニメーションツール『Adobe Edge』を無料で出してきた!
参考:HTML5アニメ作成ソフト「Hype」登場
参考:HTML5の勉強に役立つチートシートやリファレンスのまとめ
参考:HTML5をはじめる人、勉強したい人用のテンプレートファイル -Easy HTML5 Template
参考:HTML5+CSS3時代のプログレッシブ・エンハンスメント
参考:HTML5サイトを作ろう - WEBデザインの参考にしているまとめサイトをまとめました
参考:SlideShareで見つけたHTML5資料まとめ
参考:グリーに学ぶ、スマートフォン開発向けWebアプリ要素の最新技術 ~HTML5、CSS3を採用したポイント
参考:実用的なデザインがたくさん揃ってる、HTML5+CSS3ベースのフレームワーク -Perkins
1999年にHTML4.0というバージョンになった後は、しばらく動きが見られませんでした。しかし、その後もホームページを取り巻く環境は進歩を続け、HTMLの周辺部分が発展を続けるという状態が続きました。
しかし2010年、11年もの年月を経てHTMLがバージョンアップします。それがHTML5.0です。
参考 - Flashだとここまでできる! HTML5とFlashの機能比較
http://clockmaker.jp/blog/2010/02/flash-vs-html5/
W3C の HTML5 Logo では以下のカテゴリを HTML5 に含めている。
http://phpjavascriptroom.com/?t=html5&p=html5_tags
http://www.htmq.com/html5/
3Dグラフィックアプリケーションを可能にするAPI、「O3D」
「O3D」を試すには、ChromeでPluginの導入が必要。
LinuxとWeb Kitをベースとした、スマートフォン用のソフトウエアプラットホーム
<audio src="audio.mp3" controls></audio>
赤く塗りつぶされた円を書く場合
<canvas width="300" height="150"></canvas> <script> var canvas = document.querySelector("canvas"); var context = canvas.getContext("2d"); context.fillStyle = "red"; context.beginPath(); context.arc(150, 75, 50, 0, Math.PI*2, true); context.fill(); </script>
HTML5 における HTML4 からの変更点
http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/
centerは中央に寄せるため、fontは文字の大きさや色、uは下線を引くためのタグです。これらのタグは多くのホームページで実際に使用されていますが、どれも外見上の体裁を整えるためのものです。XHTMLでもすでにこれらの情報はCSSとして外部から設定するべきものとされており、HTML5.0ではそれがさらに厳格化されてタグそのものが消滅しました。
ホームページの領域を区切り、それぞれ独立したフレームとして処理することが出来ます。メニューを常に表示させたい場合などに便利なのですが、検索エンジンとの親和性が低く、ホームページ制作のタブーとまで言われる機能です。HTML5.0ではこのタブーが本当に消えることとなりました。
タグの中に使用される属性にも、よく使われているものが一部廃止されます。最も象徴的なのが、a要素などで使用されるaccesskey属性です。これは携帯電話のボタンと連動している属性で、1を指定すると携帯電話の1が押された時にリンク先へアクセスするものです。互換性や混同の問題から、HTML5.0では無くなりました。また、imgとaで使用されるnameという属性は、CSSからのスタイル定義と関連付けるためのものですが、これはidという属性を使うことが推奨されており、HTML5.0では混同を避けるために廃止されています。
主要ブラウザのHTML5対応バージョン | |
Internet Explorer | Internet Explorer 8 以降 |
Firefox | Firefox 3.1以降 |
Opera | Opera 9.6以降 |
Safari | Safari 3.0以降 |
主要ブラウザの対応状況 タグごとに細かく○×チェック
その1 http://html5-css3.jp/useful/css3-html5.html
その2 http://www.htmq.com/html5/browser.shtml
caniuse.com - HTML5のブラウザの対応状況をチェックするためのサイト
http://caniuse.com/
マークアップに間違いがないかどうかを確かめるため、「W3C Markup Validation Service」を用いて検証
http://validator.w3.org/
HTML5 API チェッカー
http://www.html5.jp/tutorial/apicheck/index.html
HTML5 Please - HTML5の対応状況をチェックするためのサイト
http://html5please.com/
The HTML5 Test - HTML5の対応状況をチェックするためのサイト
http://www.html5test.com/
The CSS3 Test - CSS3の対応状況をチェックするためのサイト
http://css3test.com/
Another HTML Lint 5 - HTML構文が正しいかチェックするサイト
http://www.htmllint.net/ (終了した?)
http://htmllint.info/htmllint/htmllint.html
http://potato.2nd-half.jp/tips/html5/html5validatornu_xhtml5_validator.php