HTML5でサイトを作ってみる。

■ 基礎知識

HTML5のなりたち

ブラウザに合わせてコンテンツを作っていた時代、「Web標準」という言葉は名前だけのものでした。

Web業界が日々進化していく中で、W3C(World Wide Web Consortium:Web標準の技術を規格化、 勧告する団体)が発表した「XHTML2.0」は従来のHTMLをは一線を画す仕様でした。 これに「apple」「mozilla」「opera」の3社が反発、"WHATWG"(Web Hypertext Application Tecnology Working Group)を発足し、 「XHTML2.0」に変わるHTMLの策定を始めます。

WHATWGは「HTML4.01」の気軽さ、自由さを継承しつつ、Webデザイナーがデザインしやすく、 Webプログラマがシステムを作りやすくなる次世代HTMLの策定を目指しました。 W3CもWHATWGと並行して 「XHTML2.0」の策定をしていましたが、最終的にはWHATWGのHTML5が認められ、 W3CはXHTML2.0の策定を断念します。

上から下への一方的な押し付けではなく、実際にWebを活用してビジネスを行っている「apple」「mozilla」「opera」などの ブラウザベンダー側から声を上げ、それがWeb標準に変化したのです。

HTML5の特徴

  1. HTML5では「大文字」「小文字」の区別がない。
  2. 空要素におけるタグ末尾の「/」は無くてもよい。
  3. 「属性値」の指定はダブルクォーテーション以外でもよい。

HTML5では、HTML4.01以前のような厳格なルールが排除されています。

HTML5は10数年ぶりのバージョンアップではありますが、本質は変わっていません。
CSSが装飾を担当するのに対し、HTMLは意味づけに特化しています。

HTML5の概念

以前は、HTMLは「インライン要素」「ブロック要素」にわかれていましたが、HTML5からはこの概念が無くなりました。 それに代わり、要素をグループ化しその子要素や孫要素までを厳密に管理する「コンテンツ・モデル」という概念が導入されました。

ドキュメントタイプ宣言

「HTML5では頻繁に利用するソースコードは覚えやすく使いやすいもの」と定義されています。
そのため今までのような長いドキュメント宣言は不要になります。 またDTDも存在しません。

HTML5のドキュメントタイプ宣言

<!DOCTYPE html>

ヘッダ要素

headに入れ込む要素は、HTML5から定義された属性も若干ありますが、以前とあまり変わりはありません。

新たに追加されたタグ

manifest属性(Webアプリケーション・キャッシュを指定する)
scoped属性(特定範囲内にStyleを指定する)
(c) 2010-2014 naoko okihara