HTML5とは - web-0127のブログ

HTML

HTML(HyperText Markup Language)
テキストで記述される
HTMLドキュメントがブラウザに読み込まれるとWebページが表示される
ハイパーリンクが特徴

タグを入れてテキストをマークアップ（意味づけ）する

<html>
<head>
<title>ページタイトル</title><!--ページタイトル-->
</head>
<body>
<h1>見出し</h1><!--見出し（headline）-->
<p>本文本文<!--段落（paragraph）-->
<a href="link.html">リンク</a><!--ハイパーリンク-->
本文本文</p>
</body>
</html>

広義のHTML5

いままでより高度な機能をもつWebページ
特定のOSやブラウザに依存しない
CSS3やECMAScript5を含む

狭義のHTML5

HTML4.0に続く5番目のHTML

CSSとJavaScript

CSS(Cascading Style Sheets)とJavaScript
ページにデザイン性（修飾）とインタラクティブ性（動き・応答性）を与える
HTMLの標準化
JavaScriptの標準化（ECMAScript）

ブラウザの非依存

HTML5の仕様は、２つ以上のブラウザに実装されたときに完成す

ブラウザ依存によって起きる問題

寡占状態を生み出す
新しいブラウザへの乗り換えができない
ブラウザ自体の進化が止まる
古い環境に囚われIT設備ができなくなる

WHATWG

WHATWG(Web Hypertext Application Technology Working Group)が仕様策定
HTML4.0までの策定をしてきたW3C(World Wide Web Consortium)も参加しています。

Webアプリケーションとは

単に情報を表示するだけではなく、ユーザーの操作に応じて結果を返すWebページ

初期のWebアプリケーションの仕組み

HTMLのフォームを利用してユーザーが入力したデータをWebサーバーに送り、Webサーバー内のプログラムがデーターを解析して結果のHTMLを返すという仕組み
問題点は１つの操作のたびにWebページをサーバーから読み込むことになるので、レスポンスが遅くなる

Ajaxによるレスポンスの高速化

Ajax(Asynchronous JavaScript+XHTML)
WEbページ全体をロードすることなく、JavaScriptを使ってWebサーバーと通信する
通信中にも処理を行えるので、ユーザーを待たせないWebアプリケーションを開発できる
たとえば、GoogleMap

HTML5が目指すWebアプリケーション

HTML5によって実現するもの

Webアプリケーション中心で作業を行うこと：クラウドコンピューティング
Webページ内のデータをプログラムで処理しやすくする：セマンティック
ユーザーインターフェイスをより使いやすく、表現力を豊かにする：CSS3
自由にグラフィックを描画し、音楽や動画を再生する：Canvas2D・Audio&Video・SVG
GPSなどから現在地情報を取得する：Geolocation
より柔軟に他のドメインやローカル環境にアクセスできるようにする：Web Storage・FileAPI・WebSocket・WebMessaging
インターネットに接続していない状況でもWebアプリケーションを実行可能にする：OfflineWebApplication
複雑な計算処理を並列処理によって高速化する：WebWorers

ウェブストアでWebアプリケーションを販売する

Chromeウェブストア
フリーミアム：基本サービスを無料にし追加の機能やサービスを課金するスタイル

スマートフォーン用アプリケーションを作る

PhoneGap・Titanium：スマートフォーン用アプリケーション開発ツール
iPhone：Objective-C、Android：Java、Windows Phone：C#

HTML5ならではの機能

Canvas：JavaScriptを使ってグラフィックを描く機能
CSS3：CSS3 Animation

HTML5対応ブラウザ

Safari

問題なし

Google Chrome

レンダリングエンジンがWebkitを使っているため問題なし

Firefox

独自のレンダリングエンジンのため、若干問題あり

Opera

独自のレンダリングエンジンのため、若干問題あり

IE9

もともとHTML5の導入に消極的なこともあり、まだ不十分

非対応ブラウザへの対応

閲覧させない
最低限閲覧できるようにする
同じように閲覧できるページを用意する

従来のHTMLやXHTMLとの違い

DTD(Document Type Definition)：文書型定義

DTDはスキーマ言語の一種です

<!DOCTYPE HTML DTDの情報>

HTML5ではDTDの指定が不要

今後はHTMLのバージョンがなくなり１つになるため

<!DOCTYPE HTML>

または、

<!DOCTYPE html>

文字コードは charset属性のみ

<meta charset="UTF-8">

XHTMLは機械処理しやすくするため

XHTMLは、XML(Extensible Markup Language)で定義し直したHTML
タグを自由に定義できる
HTMLに比べてルールが厳密
XML宣言が必要
名前空間が必要
Webページの情報をプログラムで読み取る
XMLサーバーというXMLを処理するためのプログラムを利用できる

HTML5では柔軟な書き方が許可されている

実際には採用されない
属性値の「" "」を省略できる
終了タグをを省略できる

<img src="" width=100 height=100>

<ul>
<li>項目
<li>項目
<li>項目
</ul>

XHTMLもHTML5に吸収される

XHTMLは今後開発されません
一部はHTML5に取り込まれました
XMLとしての書き方も可能