そろそろちゃんとやっとくHTML5入門【2014/2/14版勧告候補】


![](http://www.w3.org/html/logo/downloads/HTML5_sticker.png)

# 参考にするリファレンスについて
[とほほ](http://www.tohoho-web.com/html/index.htm)や[HTML5リファレンス](http://www.htmq.com/html5/)は最新の草案を反映しておらず内容が古い。
[HTML5.JP](http://www.html5.jp/tag/elements/index.html)にリストされていない要素は廃止もしくはHTML5.1に移動のため一旦削除されているので注意が必要。
[HTML5.1各要素別メモ](http://mtrootyy.web5.jp/htmllint/html5memo/0mokuji.html)も参考になる。

# HTML5の要素
## 新要素はこれだけ
section,nav,article,aside,header,footer,main,figure,figcaption,video,audio,source,canvas,mark,time,data,ruby,rt,rp,rb,rtc,wbr,bdi,details,summary,template,dialog,progress,meter,output,datalist,keygen

[[HTML5] 新要素まとめ【2014/2/14版勧告候補】 - Qiita](http://qiita.com/maccotsan/items/20c6ea274b0190dc2c05)

## 正式に仕様入りした要素
embed

## 変更された要素
strong,i,b,u,s,small,hr,address,cite,dl,a,label

[[HTML5] 変更になった要素まとめ【2014/2/14版勧告候補】 - Qiita](http://qiita.com/maccotsan/items/d25fa38f122e1175bb81)

## 廃止になった要素
basefont,big,center,font,strike,tt,frame,frameset,noframes,acronym,applet,isIndex,dir

## HTML5.1に入る事になった要素（HTML5からは削除）
hgroup,command,menu

## 追加されたinputタイプ
search,tel,url,email,datetime,date,month,week,time,datetime-lodal,number,range,color

## 新グローバル属性
contenteditable,contextmenu,draggable,hidden,spellcheck,data-*

[[HTML5] 新グローバル属性まとめ【2014/2/14版勧告候補】 - Qiita](http://qiita.com/maccotsan/items/dc719b1d504291f28a51)

### マイクロデータ関連
itemid,itemprop,itemref,itemscope,itemtype

### WAI-ARIA関連
role,area-*

## 新属性

[[HTML5] 新しい属性が増えた要素まとめ【2014/2/14版勧告候補】 - Qiita](http://qiita.com/maccotsan/items/fd358a87c784213fc2ab)

[[HTML5] input要素まとめ【2014/2/14版勧告候補】 - Qiita](http://qiita.com/maccotsan/items/310e9ee4a170955a69ae)

# HTML5を読み解くキーワードたち

## コンテンツ・モデル
[ASCII.jp：3分でわかるHTML5のコンテンツモデルとカテゴリー (1/3)｜浜 俊太朗のHTML5マークアップ移行ガイド](http://ascii.jp/elem/000/000/652/652795/)


### アウトラインをチェック

[HTML 5 Outliner](http://gsnedders.html5.org/outliner/)

## セマンティクス
- 新たな文脈を表す要素が多く追加
- いままでdivを使っていた部分は特に、他に適した要素がないか考慮

## アクセシビリティ
[HTML5 アプリケーションをビルドする - HTML5 によるアクセシビリティの設計](http://msdn.microsoft.com/ja-jp/magazine/jj863135.aspx)

# HTML5の周辺技術をチェックする

[新時代の機能が満載！HTML5入門 新API一覧 | Web制作会社スタイル](http://www.hp-stylelink.com/news/2013/08/20130802.php#list07)

[HTML5のAPI、および、関連仕様](http://www.htmq.com/api/)

[ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013](http://www.slideshare.net/futomihatano/html5api-28774403)

## CSS3

[CSS3リファレンス](http://www.htmq.com/css3/)

## Canvas

[Canvas - HTML5.JP](http://www.html5.jp/canvas/)

## Web GL

[初心者でも絶対わかる、WebGLプログラミング＜基礎知識編＞ | HTML5Experts.jp](http://html5experts.jp/yomotsu/2897/)

### CreateJS

[[CreateJS] Canvasアニメーションを実装する時に便利で良く利用しているJSライブラリ、CreateJS - YoheiM .NET](http://www.yoheim.net/blog.php?q=20121104)

[CreateJSがWebGLを公式にサポート！爆速になったHTML5での描画パフォーマンスを検証してみた | ICS LAB](http://ics-web.jp/lab/archives/1291)

## Selector API

[連載：人気順に説明する初めてのHTML5開発：DOM操作の主流になるか！？ セレクタAPIを使いこなそう - ＠IT](http://www.atmarkit.co.jp/ait/articles/1110/07/news125.html)

## Drag&Drop API

[連載：人気順に説明する初めてのHTML5開発：アドインなしで実現可能！ ドラッグ＆ドロップを使いこなそう (1/2) - ＠IT](http://www.atmarkit.co.jp/ait/articles/1109/13/news144.html)

## Web Strage

[連載：人気順に説明する初めてのHTML5開発：ブラウザでストレージ？ Web Storageを使いこなそう (1/3) - ＠IT](http://www.atmarkit.co.jp/ait/articles/1108/12/news093.html)

## Web Socket

[連載：人気順に説明する初めてのHTML5開発：双方向通信を実現！ WebSocketを使いこなそう (1/2) - ＠IT](http://www.atmarkit.co.jp/ait/articles/1111/11/news135.html)

## Web Workers

[連載：人気順に説明する初めてのHTML5開発：並列処理を実現！Web Workersを使いこなそう (1/2) - ＠IT](http://www.atmarkit.co.jp/ait/articles/1201/13/news138.html)

## File API

[連載：人気順に説明する初めてのHTML5開発：JavaScriptでファイル操作！？ File APIを使いこなそう (1/2) - ＠IT](http://www.atmarkit.co.jp/ait/articles/1112/16/news135.html)

## Geolocation

[連載：人気順に説明する初めてのHTML5開発：位置情報をブラウザで活用！ Geolocationを使いこなそう (1/2) - ＠IT](http://www.atmarkit.co.jp/ait/articles/1107/14/news119.html)

## Indexed Database

[連載：人気順に説明する初めてのHTML5開発：Webアプリもオフライン実行？ Indexed Databaseを使いこなそう (1/2) - ＠IT](http://www.atmarkit.co.jp/ait/articles/1202/14/news138.html)

## Web Audio API

[Getting Started with Web Audio API - HTML5 Rocks](http://www.html5rocks.com/ja/tutorials/webaudio/intro/)
 
## Application Cache

[アプリケーション キャッシュ初心者ガイド - HTML5 Rocks](http://www.html5rocks.com/ja/tutorials/appcache/beginner/)

## History API

[HTML5 History API を徹底的に試してみる | nacika](http://nacika.com/entry/2013/01/18/003325/)

## Web Messaging

[Web Messaging機能を試してみた - 一から勉強させてください(￣ω￣;)](http://dangerous-animal141.hatenablog.com/entry/2013/02/27/000514)

## Server Sent Events

[Server-Sent-Eventsとは](http://blife.dip.jp/event/)

## Clipboard API

[Clipboard API and events](http://www.w3.org/TR/clipboard-apis/)

## Progress Event

[HTML5でプログレスバー付きファイルアップロードを実現する例:phpspot開発日誌](http://phpspot.org/blog/archives/2011/11/html5_13.html)

## CORS

[CORS(Cross-Origin Resource Sharing)について整理してみた ｜ Developers.IO](http://dev.classmethod.jp/etc/about-cors/)

## Web Notifications

[Web Notifications の使用 - WebAPI | MDN](https://developer.mozilla.org/ja/docs/WebAPI/Using_Web_Notifications)

## Media Capture and Streams
スクリーンショットの取得

[Capturing Audio & Video in HTML5 - HTML5 Rocks](http://www.html5rocks.com/ja/tutorials/getusermedia/intro/)

# HTML5の機能を検出する
ブラウザでHTML5の各機能が使える状態かどうか検出するためにはModernizr.jsを利用します。

[Modernizr: the feature detection library for HTML5/CSS3](http://modernizr.com/)

[Modernizr.jsを使ってHTML5のクロスブラウザ問題に立ち向かう！ - Taste of Tech Topics](http://acro-engineer.hatenablog.com/entry/20110616/1308271306)

# HTML5文書として適切かチェックする

[The W3C Markup Validation Service](http://validator.w3.org/#validate_by_uri)

# HTML5の各ブラウザ対応状況を調べる

[Can I use... Support tables for HTML5, CSS3, etc](http://caniuse.com/)

# その他

[HTML5Tips - Qiita](http://qiita.com/maccotsan/items/65a3cf5bc4c17c565629)

# 参考URL
[HTML 要素 - HTML5タグリファレンス - HTML5.JP](http://www.html5.jp/tag/elements/index.html)
[HTML5.1各要素別メモ](http://mtrootyy.web5.jp/htmllint/html5memo/0mokuji.html)
[HTML5プロフェッショナル認定試験 無料セミナー - Qiita](http://qiita.com/budougumi0617/items/5be51d12411df79efdff)
[ゼロからはじめるHTML5でのサイト制作-目次 - MdN Design Interactive](http://www.mdn.co.jp/di/articles/2605/?page=1)

# 参考書

[Amazon.co.jp： 徹底解説HTML5マークアップガイドブック: 羽田野太巳: 本](http://www.amazon.co.jp/%E5%BE%B9%E5%BA%95%E8%A7%A3%E8%AA%ACHTML5%E3%83%9E%E3%83%BC%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E3%82%AC%E3%82%A4%E3%83%89%E3%83%96%E3%83%83%E3%82%AF-%E7%BE%BD%E7%94%B0%E9%87%8E%E5%A4%AA%E5%B7%B3/dp/4798025291/ref=sr_1_4?ie=UTF8&qid=1394222798&sr=8-4&keywords=HTML5+%E5%BE%B9%E5%BA%95%E8%A7%A3%E8%AA%AC)
[Amazon.co.jp： カルタ付 HTML5マークアップ 現場で使える最短攻略ガイド (WEB PROFESSIONAL): 浜俊太朗: 本](http://www.amazon.co.jp/gp/product/4048660705/ref=ox_sc_act_title_3?ie=UTF8&psc=1&smid=AN1VRQENFRJN5)