HTML5とは

リッチインターネットアプリケーション（RIA）を実現するための技術を標準化した規格群の総称です。

WEBサイトやWEBアプリケーションを作成するための規格です。現在、W3CとWHATWGが共同で策定中です。

ざっくり

できること

  • 実装例
  • 実装方法
  • 省略(head,base,style,meta,script,noscript) styleやnoscriptは推奨しないと考える人もいるらしい
  • base(後回し)
  • style(省略)

全体像

HTML5の全容についてザっと把握する。

仕様

以下の団体が仕様を策定しています。

最新の公式文書へのリンクです。参考リンクは非公式ですが、公式へのリンクがある上、わかりやすく解説されています。

HTML5

HTML5 SEMANTICS 参考

CSS3 STYLING 参考

MULTIMEDIA

vidoo 参考

audio 参考

OFFLINE ＆ STORAGE

Application Cache

Web Storage

Indexed Database API

File API

File API: Writer

3D, GRAPHICS, EFFECTS

Canvas 2D Context

SVG

WebGL

CONNECTIVITY

WebSocket API

Server-Sent Events

DEVICE ACCESS

HTML Device 参考

調査

これを調べておけばまちがいない。

メモ

HTML5

HTML5 SEMANTICS

公式最新規格 参考

HTML5の要、基礎、中核をなす技術で、HTMLの要素と属性のこと。またはHTMLマークアップのこと。

セマンティクスとは「意味」のこと。HTML5におけるセマンティクスとは<time>などの要素によって文書内のテキストを意味づけすること。HTML4.01と比べると<time>などの新しい要素が追加され、より意味のわかる文書が作成できるようになった。

これにより文書の検索が正確になったり、連絡帳などのWEBアプリと連携して自動的に情報を登録するなどが出来るようになる。

ここでいう「意味が理解がしやすい」とは、人間に対するものではなく、コンピュータに対して理解しやすいということです。それによりWEBアプリなどのプログラムによる処理がしやすくなります。HTML5はWEBアプリを作成するための規格なので、基礎であるHTMLを理解しやすく規格しました。それがHTML5 SEMANTICSです。

アウトライン

参考1 参考2

アウトラインとは文書の骨子、構造上の区切りのことHTML5におけるアウトラインとは<sction>などの要素によって文書の構造を切り分けること。

HTML4.01は<h1>～<h6>の見出しタグによって構造を切り分け、1～6の重みによって階層を表現していた。HTML5は<section>,<article>,<aside>により見出し、本文、補足などが表現できるようになったため、より明確に分類できるようになる。

これにより本文だけ抜き出して検索するなどがしやすくなる。

microdata

公式最新規格 参考1 参考2 参考3 参考4

microdataとは要素に特定のメタ情報を追加するための属性です。

HTML4.01には無かったのですが、かわりにclass属性を利用してメタ情報を追加するmicroformatや、XHTMLにてメタ情報を追加するRDFaがありました。

ユーザは自由にメタ情報の形式を作成できます。たとえば連絡先、レシピ、履歴書などの形式を作成できます。それらの形式を利用してメタ情報を追加することが出来ます。たとえば連絡先の形式なら名前や住所などの情報をサイトに追加できます。それらメタ情報はWEBアプリと連携して自動的にメタ情報を処理できます。たとえばサイトを訪問して連絡先のメタ情報があったら、連絡帳WEBアプリが自動的に連絡先のデータを見つけて保存するなどのことができます。

具体例ではGoogleのリッチ スニペットがあります。これは検索結果にサイトマップなどの情報が表示されるものです。

CSS3 STYLING

CSSのこと。HTMLの要素に対してレイアウトや色、サイズなどの見た目を設定できる技術。

HTML5ではCSS3のアニメーション機能が目立つ。セレクタ機能も強化されたので柔軟に要素指定ができる。

MULTIMEDIA

動画や音声を再生できる技術。Video,AudioのHTML要素が新たに加わった。

現状はブラウザごとに再生できるファイル形式が異なるなどの問題がある。

OFFLINE ＆ STORAGE

データをサーバではなくローカルに保存するための技術。

WEBアプリケーションを構築する上で必要になる。

3D, GRAPHICS, EFFECTS

イメージを表現する技術。2D、3Dがある。

SVGはすでにある技術でブラウザ対応されれば使える。Canvasは草案のラストコールがあったのである程度は仕様が安定している。WebGLの3D表示はグラフィックボードやブラウザなどの環境によっては実行できない。

CONNECTIVITY

これまでのHTTP通信以上にリアルタイムなネットワーク通信をするための技術。

DEVICE ACCESS

カメラや携帯電話などのデバイスを利用する技術。

あまり情報が無い。仕様や実装はこれからという印象だが大いに期待できる。

PERFORMANCE ＆ INTEGRATION

並列処理や異なるドメイン間でのネットワーク通信ができる技術。リアルタイム性が向上する。