5分でわかるHTML5の新機能
入門HTML5を読みました。
HTML5の概要を知るには、ボリューム的に丁度よかったです。
1〜3章をざっと読んでおけば、HTML5についてざっくり理解できると思います。
HTML5で追加された機能を備忘録として残しておきます。
各機能についての説明は、HTMLクイックリファレンスがわかり易かったので引用しています。
HTML5で新たに加わった機能
canvas要素
＜canvas＞タグは、図形を描く際に使用します。今までウェブページ上で図形を描くには、PNG・JPEG・GIFなどの画像に置き換えるか、Flashなどのプラグインデータを埋め込むのが一般的でしたが、＜canvas＞を使用することで、標準のHTMLやJavaScriptだけで、グラフやゲームグラフィックスなどの図形をすばやく表示できるようになります。 http://www.htmq.com/html5/canvas.shtml
video要素
＜video＞タグは、動画を再生する際に使用します。＜video＞タグを使用することで、ユーザーにFlashなどのプラグインをインストールしてもらうことなく、標準のHTMLからシンプルに動画を扱えるようになります。 感覚的には＜img＞タグで画像を扱うような感じです。
http://www.htmq.com/html5/video.shtml
inputタイプ
HTML5では、input要素に新しく autocomplete属性・ autofocus属性・ form属性・ formaction属性・ formenctype属性・ formmethod属性・ formnovalidate属性・ formtarget属性・ height属性・ list属性・ max属性・ min属性・ multiple属性・ pattern属性・ placeholder属性・ required属性・ step属性・ width属性 が追加されています。
http://www.htmq.com/html5/input.shtml
Web Storage
Web Storageは、ユーザーのローカル環境（ブラウザ）にデータを保存するための仕組みです。 データの保存・上書き・削除・全クリアなどの操作は、JavaScriptで行うことができます。
http://www.htmq.com/webstorage/
オフラインWebアプリケーション
HTML5では、インターネットに接続していないオフラインの状態でも、 ユーザーがウェブアプリケーション（ウェブサイト）を利用できるようにするための、 キャッシュマニフェストと呼ばれる仕様が追加されています。
http://www.htmq.com/offline/
Geolocation API
Geolocation APIは、ユーザーの位置情報を扱うためのAPIです。 http://www.htmq.com/geolocation/
ドラッグ＆ドロップ
ドラッグ＆ドロップとは、ウェブページ内の要素やローカル環境に保存されたファイルなどのデータを、 マウスで引きずるように移動させて他の場所に置く操作のことです。 HTML5以前にも、mousedownやmouseupなどのイベントで実現することはできましたが、 HTML5ではドラッグ＆ドロップ専用の新しいイベントや新しいメソッド・属性が追加されています。
http://www.htmq.com/dnd/
HTML5の新しい要素
section
＜section＞タグは、ウェブページ内のその部分が、一つのセクションであることを示す際に使用します。
http://www.htmq.com/html5/section.shtml
nav
＜nav＞は、ナビゲーションであることを示す際に使用します。ナビゲーションとは、ウェブサイト内の他のページへのリンクや、ページ内リンクなどのことです。
http://www.htmq.com/html5/nav.shtml
article
＜article＞タグは、内容が単体で完結するセクションであることを示す際に使用します。
http://www.htmq.com/html5/article.shtml
aside
＜aside＞タグは、その部分がウェブページ内における余談・補足情報のセクションであることを示す際に使用します。
http://www.htmq.com/html5/aside.shtml
hgroup
＜hgroup＞はセクションの見出しを表します。小見出しや副題など、見出しが複数の階層にある場合、＜h1＞-＜h6＞などの見出しセットをグループ化してまとめるために使用します。
http://www.htmq.com/html5/hgroup.shtml
header
＜header＞タグは、イントロダクションやナビゲーショングループであることを示す際に使用します。
http://www.htmq.com/html5/header.shtml
footer
＜footer＞タグは、直近のセクションのフッタであることを示す際に使用します。
http://www.htmq.com/html5/footer.shtml
time
＜time＞タグは、日付や時刻を表記する際に、グレゴリオ暦による日付や24時間表記の時刻で正確に示す際に使用します。 http://www.htmq.com/html5/time.shtml
mark
＜mark＞タグは、文書内の該当テキストをハイライトして目立たせる際に使用します。
http://www.htmq.com/html5/mark.shtml
HTML5の機能の検出
HTML5の機能はブラウザによってはサポートしていない場合があります。
それを簡単に検出できるライブラリとして、Modernizr.jsがあります。
