HTML5 とは？
公開日：
:
html5
HTML5とは？
HTML5は、標準化団体のW3C（World Wide Web Consortium）とWHATWG（Web Hypertext Application Technology Working Group）が2008年から共同で仕様策定中のHTML（Hyper Text Markup Language）の最新バージョンである。
W3Cが進めていたHTMLを再定義した「XHTML」の構造化を目指した「セマンティックWeb」と、WHATWGが新しい独自仕様で策定したWebアプリケーションにフォーカスしたマルチメディアを実装する言語に向上することがHTML5の主な目的である。
対応ブラウザ
Google Chrome 3.0 以降、Safari 3.1 以降、Firefox 3.5 以降、Opera 10.5、Internet Explorer 9
文字コード
“UTF-8”（デフォルト）
HTML5の主な機能追加
Canvasタグ、Videoタグ、Audioタグの追加
動画や音声、グラフィックの描画が可能に
Web Storage（ウェブ ストレージ）
Cookieよりも簡単に、大量のデータをクライアント側に保持させることが出来る
Form機能の強化
要素、属性、入力タイプ、ブラウザベースの検証、CSS3 スタイリングの手法、FormData オブジェクトなどが追加
Web Workers
JavaScriptでスクリプトをバックグラウンドで実行
CSS3
多彩なグラッフィック表現が可能になる
SVG（Scalable Vector Graphics）
ベクター画像をWEB上で表示することが可能に
基本構造
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5</title> </head> <body> コンテンツ内容 </body> </html>
bodyタグ内での新しい構造化タグの追加
header: ページタイトルやサブタイトル、ロゴ、前置的な文章などの表示領域。
nav: サイト内ページへのリンクの集まり。
section: 見出し（h1～h6）が含まれまる、ドキュメントのセクションまたはアプリケーション用のセクション。
article: ひとつの完結した記事のセクション。ブログやWebマガジンの場合、一覧記事の個々のエントリー。
aside: メインコンテンツから分離しても構わないセクション。
footer: コピーライト・関連リンク・Emailページのフッター領域。
新要素を使った構造の例
基本構造例（サンプルコード）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTML5</title> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="stylesheet" href="sample.css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="sample.js"></script> </head> <body> <header> <h1><abbr title="HyperText Markup Language 5">HTML5</abbr></h1> <nav role="navigation"> <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> </nav> </header> <section> <h2>セクションのタイトル1</h2> <article> <p>独立したコンテンツ</p> </article> <article> <p>独立したコンテンツ</p> </article> </section> <section> <h2>セクションのタイトル2</h2> <article> <p>独立したコンテンツ</p> </article> <article> <p>独立したコンテンツ</p> </article> </section> <aside> <p>関連のあるセクション</p> </aside> <footer> <small>Copyright © 2014</small> </footer> </body> </html>
HTML5オススメチェッカー
URLを入力するだけでチェックが出来ます。
Validator.nu (X)HTML5 Validator
素材
HTML5 ロゴをトレースを、フリー素材にアップしました。
フリー素材
関連記事
-
-
背景を SVG で全面表示し、パターン化をアニメーションさせる
SVGでウィンドウに全面表示させた空に、シャボン玉が飛んでいるような表現をしてみようと思います。
-
-
WordPress エラー：Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js
WordPress エラーの状態 WordPress 管理画面のテキスト入力欄で（ビジュアルタブの
-
-
HTML5 audio タグ を使って音声を出す
HTML5からaudioタグを使えば、Flashなどのプラグインを使わなくてもブラウザ上で音声を再生
-
-
WEBページをアプリっぽくする（サービスワーカーでホーム画面に追加）
前回作ったお絵かきページを、簡単にアプリっぽくしようと思います。 具体的には、スマホで最近よく見か
-
-
Javascript タイピング ゲーム スマホ用 をつくる
JavaScript スマホ用 切り替え 前回の記事のゲームですが、スマホだとサイズが合わなくてや
-
-
canvas タグでお絵描き（レスポンシブ）
簡単なメモ張みたいなものが欲しいので作ってみました。 canvas のレスポンシブが少しひっかかっ
