HTML5を理解するためのキーワード

HTML5を理解するためのキーワード
HTML5の必要性
  • かつてのWebサイトは「情報の閲覧」のためであったのに対し、最近では「Webアプリケーション」を操作する目的で使われるようになってきて、初期の仕様がそぐわなくなってきた

HTML5の歴史

HTMLの誕生とバージョンアップ
  • HTMLは、1990年代からそれまでのマークアップ言語SGMLに、インターネットのためのハイパーテキストの機能を取り入れた仕様が定義されました
  • 1993年にIETFからHTMLバージョン1.0が公開され、SGMLからの拡張としてDTD(文書型定義)を持つようになり、1996年からW3CによってHTMLの仕様が標準化され、2000年に国際標準となりました
  • その時にW3Cから勧告されたHTMLのバージョンは4.0で、最新のHTMLの仕様はHTML4.01です
  • W3CがHTMLの仕様を標準化するまでは、ブラウザごとに独自の定義がされ、あるブラウザで表示されるものが、異なるブラウザでは表示されないなどの問題がありました
  • W3Cが標準化したことにより、ブラウザごとに要素の定義が統一されていなかったHTMLの互換性が保証されるようになりました
HTML1.0
  • HTML1.0は、初めて一般公開されたマークアップ言語です
  • 見出し、段落などの文書構造のための基本要素の他、他の文書や要素にリンクする機能も提供されました
HTML2.0
  • このバージョンから、文書型定義の宣言(DTD)を定義しています
  • HTML1.0の要素に新しい文書構造のためのタグを追加しました
  • また、入力フォーム関連のタグも追加されています
HTML3.2
  • このバージョンは、一覧表を作成するためのテーブルタグや文書を成型するためのタグや属性などが追加されています
  • このバージョンから、フォントや背景などに色をつけることもできるようになりました
  • また、embed要素やapplet要素で音声やビデオの再生やJavaアプレットの実行などHTTPを仕様しないオブジェクトもWebページ上で動作することが可能となっています
  • なお、このバージョンの前のHTML3.0は、草案だけで正式勧告されないまま廃棄となりました
HTML4.0
  • HTML3.2までのプレゼンテーション用のタグや属性を非推奨として再定義し、本来のSGMLの基本方針にのっとったバージョンです
  • 文書の整形処理はスタイルシートを利用し、文書の構造のみを記述するように整理しています
HTML4.01
XHTMLの誕生
  • HTML4.01が勧告された後に、XHTMLが登場しています
  • XHTMLは、HTMLをXMLの文法で定義しなおした仕様で、他のXMLに埋め込んだり、拡張したりすることが可能で、HTML4.01に代わる新しいWebの技術になることが予想されていました
  • W3Cは、XHTML1.0を2000年に勧告し、2001年に1.1、2002年に2.0とXHTMLのバージョンを策定していますが、XHTMLと互換性のないWebサイトが多い、XHTMLのMIMEタイプが使えないブラウザが普及しているなどの理由により、XHTMLの普及は意図する通りに進みませんでした
HTML5の誕生
  • XHTMLの普及が進まない中、Webアプリケーションの機能が更に発展していき、XHTMLでなくHTML自体の仕様を更新すべきという流れがあり、WHATWGが次世代HTMLとしてHTML5の仕様を策定し始めました
  • W3Cは、最初は方針に反することとして反対していましたが、HTML5が多くの企業や開発者たちに受け入れられたため、HTMLの新しい仕様として正式に採用しています

　

HTML5 8つのポイント

  1. SEMANTICS
  2. OFFLINE & STORAGE
  3. DEVICE ACCESS
  4. CONNECTIVITY
  5. MULTIMEDIA
  6. 3D, GRAPHIC & EFFECTS
  7. PERFORMANCE & INTEGRATION
  8. CSS3
  • マイクロデータやマイクロフォーマットなどによって、HTML文書の情報としての意味をわかりやすくし、サイトを使いやすくする
  • ネットワークがない環境でも利用でき、GPSによる位置情報の取得など各種デバイスにアクセスできるようにする
  • サーバーやアプリケーションとのコネクションやパフォーマンスをよくするための技術も含まれている
HTML5とCSS3
  • Webページの情報をより効率的に伝達するには、視覚的なデザインやレイアウトが必要になります
  • その役割であるCSSも最新バージョンCSS3が策定中です

HTML5の特徴と代表的な機能

  • HTML4.01で定義されているHTMLの仕様を継承
  • 誰でも簡単に情報が配信できる仕組み
  • ブラウザのみで色々な処理が行えるWebシステムを開発できる仕組み


マークアップに関する機能

構造化要素

  • HTML5では、これまでのHTML以上に文書構造がより体系的になるように新しい要素が追加され、Webページのヘッダーやフッターなどの構成をタグで対応できるようになりました
  • これらの要素を使用したWebページを作成すると、検索エンジンの精度を上げたり、リスティング広告のサイトへの配信がより的確になるなどのメリットも出てきます


フォーム要素

  • 入力フォームを作成するときに、メールアドレスや電話番号などのよく使用する入力欄について専用の属性が追加されました
  • また、数値や日付のような入力欄の場合に制御ができる属性も追加されています
  • 入力サポート機能や入力値のチェックなどもマークアップで対応できるようになっています


マルチメディア要素

  • FlashやSilverlightなどのプラグインを使用しないで音声や動画を再生する要素が追加され、音声や動画の扱いがより簡単になっています
  • JavaScriptを併用して、再生のコントローラ機能を実現することも可能です


Canvas機能


ドラッグ&ドロップ機能

  • Webページ内で要素を移動したり、ファイルをアップロードすることができる機能です
  • File APIと併用すると、ファイルの中身を取得したり、Webページからローカルのファイルを操作することができるようになります


オフライン機能

  • オフラインでWebページを閲覧したり、Webアプリケーションを動作するための機能です
  • オフラインでは、ローカルにキャッシュしたリソースを使用してWebアプリケーションを動かすことができます


クロスドキュメント通信機能

  • この技術を使うと、異なるウィンドウ(フレーム)間でメッセージの送受信ができます。

これまでJavaScriptなどを使って異なるドメイン間でメッセージの送受信はできませんでした。HTML5のクロスドキュメント通信機能を使用すると、別のドメインに対してリクエスト送信したり、データをやり取りすることが可能になります

アプリケーション開発のためのAPI

Web Storage

  • ブラウザ側でデータを保存する仕組みを実現するAPIです
  • 従来のクッキーとは異なり、データの有効期限やサイズの制限がなかったり、JavaScriptのオブジェクトをデータとして保存できます


Web Socket

  • クライアントとサーバで完全な双方向通信が可能となるAPIです
  • クライアントとサーバで一度通信が確立すると、双方向でリアルタイムでの送受信ができます


Web Workers

  • バッググラウンドでJavaScriptを動作するためのAPIです
  • 画面の処理とは別でJavaScriptが動作できるため、パフォーマンスの向上が期待できます


Indexed DB

  • ブラウザ側でリレーショナルデータベースが扱えるAPIです
  • データはKey-Value形式でローカルに保存されます
  • クライアント側でデータを加工したり、保存できるようにすることにより、サーバとの通信を減らしてパフォーマンスを向上することを目的としています


Geolocation API

  • ブラウザで位置情報を取得することができるAPIです
  • 実行環境に依存せずに共通の方法で位置情報を取得することが可能になります


File API

  • ローカルファイルの情報を取得してJavaScriptで扱うことができるAPIです
CSS3機能

CSSセレクタ

  • CSSのセレクタ機能が強化され、要素の細かい部分の指定をCSSのみで行うことが可能になりました
  • また、idやclass以外でも属性名や属性値でスタイルを指定できます


アニメーション

  • 文字や画像を動かしたり、背景色を変化させるなどの機能です
  • CSS3には、「Transitions」と「Animations」の2種類が用意されています


フォント機能

  • サーバ上のフォントを指定して利用することができる機能です
  • この機能は、Webフォントとも呼ばれ、従来のHTMLでは利用することができなかったフォントでWebページを作成することが可能です
  • その他、テキストに影をつける機能も追加されています
既存機能

SVG

  • SVG(Scalable Vector Graphics)は、XMLで記述された2Dベクターグラフィックス言語です
  • ベクターグラフィックスとは、画像を点の集合体でなく、図形の集合体として扱う描画方法です
  • 環境に応じて最適な表示ができ、FlashやJavaScriptで実現できるようなアニメーション機能も持っています
  • HTML5では、このSVGがインラインSVGとしてサポートされ、HTML内に直接記述することができるようになりました


MathML

  • MathML(Mathematical Markup Language)は、数式を表示するためのマークアップ言語です
  • HTML5では、このMathMLもHTML構文の中で利用することができます


MathML

  • WebGLは、ブラウザ上で3Dグラフィックスを表示するための標準仕様です
  • JavaScriptとネイティブのOpenGL ES 2.0の技術が使用されています
  • HTML5では、Canvas上にこのWebGLを使用して3D描画をすることが可能です
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>セクションサンプル</title>
<style>
section{
margin-left:2em;
}
.note{
border: double 3px orange;
width: 300px;
}
</style>
</head>
<body>
<header>
<h1>ページ見出し</h1>
<p>ページの要約をここに書きます。</p>
</header>
<section>
<h1>章見出し</h1>
<p>章の本文をここに書きます。</p>
<section>
<h2>節見出し</h2>
<p>節の本文をここに書きます。</p>
<section>
<h3>項見出し1</h3>
<p>項の本文をここに書きます。</p>
<div class="note">
注意：デザイン上の都合でsection要素を使ってはいけません。
</div>
</section>
<section>
<h3>項見出し2</h3>
<p>項の本文をここに書きます。</p>
</section>
</section>
</section>
<footer>
<small>ここにフッター情報を書きます。</small>
</footer>
</body>
</html>