LoginSignup
34
34

More than 5 years have passed since last update.

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

Posted at

参考にするリファレンスについて

とほほHTML5リファレンスは最新の草案を反映しておらず内容が古い。
HTML5.JPにリストされていない要素は廃止もしくはHTML5.1に移動のため一旦削除されているので注意が必要。
HTML5.1各要素別メモも参考になる。

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

正式に仕様入りした要素

embed

変更された要素

strong,i,b,u,s,small,hr,address,cite,dl,a,label

[HTML5] 変更になった要素まとめ【2014/2/14版勧告候補】 - Qiita

廃止になった要素

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

マイクロデータ関連

itemid,itemprop,itemref,itemscope,itemtype

WAI-ARIA関連

role,area-*

新属性

[HTML5] 新しい属性が増えた要素まとめ【2014/2/14版勧告候補】 - Qiita

[HTML5] input要素まとめ【2014/2/14版勧告候補】 - Qiita

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

コンテンツ・モデル

ASCII.jp:3分でわかるHTML5のコンテンツモデルとカテゴリー (1/3)|浜 俊太朗のHTML5マークアップ移行ガイド

アウトラインをチェック

HTML 5 Outliner

セマンティクス

  • 新たな文脈を表す要素が多く追加
  • いままでdivを使っていた部分は特に、他に適した要素がないか考慮

アクセシビリティ

HTML5 アプリケーションをビルドする - HTML5 によるアクセシビリティの設計

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

新時代の機能が満載!HTML5入門 新API一覧 | Web制作会社スタイル

HTML5のAPI、および、関連仕様

ようこそ、HTML5裏APIの世界へ - HTML5 Conference 2013

CSS3

CSS3リファレンス

Canvas

Canvas - HTML5.JP

Web GL

初心者でも絶対わかる、WebGLプログラミング<基礎知識編> | HTML5Experts.jp

CreateJS

[CreateJS] Canvasアニメーションを実装する時に便利で良く利用しているJSライブラリ、CreateJS - YoheiM .NET

CreateJSがWebGLを公式にサポート!爆速になったHTML5での描画パフォーマンスを検証してみた | ICS LAB

Selector API

連載:人気順に説明する初めてのHTML5開発:DOM操作の主流になるか!? セレクタAPIを使いこなそう - @IT

Drag&Drop API

連載:人気順に説明する初めてのHTML5開発:アドインなしで実現可能! ドラッグ&ドロップを使いこなそう (1/2) - @IT

Web Strage

連載:人気順に説明する初めてのHTML5開発:ブラウザでストレージ? Web Storageを使いこなそう (1/3) - @IT

Web Socket

連載:人気順に説明する初めてのHTML5開発:双方向通信を実現! WebSocketを使いこなそう (1/2) - @IT

Web Workers

連載:人気順に説明する初めてのHTML5開発:並列処理を実現!Web Workersを使いこなそう (1/2) - @IT

File API

連載:人気順に説明する初めてのHTML5開発:JavaScriptでファイル操作!? File APIを使いこなそう (1/2) - @IT

Geolocation

連載:人気順に説明する初めてのHTML5開発:位置情報をブラウザで活用! Geolocationを使いこなそう (1/2) - @IT

Indexed Database

連載:人気順に説明する初めてのHTML5開発:Webアプリもオフライン実行? Indexed Databaseを使いこなそう (1/2) - @IT

Web Audio API

Getting Started with Web Audio API - HTML5 Rocks

Application Cache

アプリケーション キャッシュ初心者ガイド - HTML5 Rocks

History API

HTML5 History API を徹底的に試してみる | nacika

Web Messaging

Web Messaging機能を試してみた - 一から勉強させてください( ̄ω ̄;)

Server Sent Events

Server-Sent-Eventsとは

Clipboard API

Clipboard API and events

Progress Event

HTML5でプログレスバー付きファイルアップロードを実現する例:phpspot開発日誌

CORS

CORS(Cross-Origin Resource Sharing)について整理してみた | Developers.IO

Web Notifications

Web Notifications の使用 - WebAPI | MDN

Media Capture and Streams

スクリーンショットの取得

Capturing Audio & Video in HTML5 - HTML5 Rocks

HTML5の機能を検出する

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

Modernizr: the feature detection library for HTML5/CSS3

Modernizr.jsを使ってHTML5のクロスブラウザ問題に立ち向かう! - Taste of Tech Topics

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

The W3C Markup Validation Service

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

Can I use... Support tables for HTML5, CSS3, etc

その他

HTML5Tips - Qiita

参考URL

HTML 要素 - HTML5タグリファレンス - HTML5.JP
HTML5.1各要素別メモ
HTML5プロフェッショナル認定試験 無料セミナー - Qiita
ゼロからはじめるHTML5でのサイト制作-目次 - MdN Design Interactive

参考書

Amazon.co.jp: 徹底解説HTML5マークアップガイドブック: 羽田野太巳: 本
Amazon.co.jp: カルタ付 HTML5マークアップ 現場で使える最短攻略ガイド (WEB PROFESSIONAL): 浜俊太朗: 本

34
34
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
34
34