HTML5, HTML4からの変更点を中心として

(2008.9.27) 新規作成

(2017.6.3) 最近の状況にアップデート.

HTML5は、HTML 4.01 (1999年) から15年ぶりとなった、HTML仕様のバージョンアップです。Apple, Mozilla, OperaなどによるWHATWGコミュニティで開発されたものを、W3C勧告として纏めたものです。

[2017-06] HTML仕様の現在の最新版は, WHATWG で開発されている, HTML Living Standard (2017年5月30日).

W3Cからも, バージョン番号を付けて纏めたものが出ている。HTML5勧告 = 2014年10月。しかし、HTML 5.1 (2016年11月) 以降は、WHATWG のものとさまざまな差異があり、仕様の品質も低く、参照すべきではない。これだけ大きな規格の二重開発は, 労力の無駄、粗大ゴミ。

妥当性検査

Validator.nu (X)HTML5 Validator アドレスを指定したり、ファイルをアップロードして検査できる。

ソースコードはこちら;

スキーマは RelaxNG + Schematron で書かれている.

W3C HTML5にはない, hgroup 要素にも対応。

HTML5 (5.0) と HTML 4との差異

HTML 4との違いがW3Cから出ている;

変更点は多岐に亘っていますが、追加される要素、属性は、Webブラウザの世代交代を待たなければ、もしくは古いWebブラウザでも使えるような手当てがされるまで、書くわけにはいかないと思います。

そういう意味で、すぐに使えそうなところを挙げると、

  • canvas要素 - 2Dグラフィック
  • クライアント側ストレージ
  • ruby, rt, rb 要素 - ルビ
  • contentEditable 属性 - IE 5.5+, Firefox 3+
ぐらいでしょうか。

新しい要素

要素名 説明
section 文書のアウトラインを作るため.

W3C HTML 5.1は, HTML5 (5.0) から変更し, 入れ子になったsection要素で、入れ子のレベルとh1-h6要素のランクを一致させるべき (SHOULD) としている。§4.3.10. Headings and sections.

WHATWG の方は、次のような書き方も可. 各section要素の子としてh1を使う.

HTML
  1. <body>
  2. <h1>The Tax Book</h1>
  3. <section>
  4. <h1>Earning money</h1>
  5. <p>Earning money is good.</p>
  6. <section>
  7. <h1>Getting a job</h1>
  8. <p>To earn money you typically need a job.</p>
  9. </section>
  10. </section>
  11. </body>
hgroup 文書のアウトライン. WHATWG HTMLのみに存在 (W3C HTML5には存在しない)。
article 文書のアウトライン. ネスト (入れ子) 可.
nav 文書構造. 子として main要素を含めることはできない.
aside 文書構造. 子として main要素を含めることはできない.
main 文書構造. 文書のアウトラインではない.
header 文書構造. 子として header, footer, main 要素を含めることはできない.
footer 文書構造. 一つの文書中に複数可. 子として header, footer, main 要素を含めることはできない.
figure, figcaption
template
video, audio, source
track video, audio要素の子として使用.
embed
mark
progress
meter
time
ruby, rt, rp
bdi
wbr
canvas
datalist input要素のlist属性から呼び出される.
keygen
output

WHATWG のほうには, hgroup要素がある。

input要素の, 新しいtype属性値:

  • tel
  • search
  • url
  • email
  • date
  • time
  • number
  • range
  • color

廃止された要素、属性

作成する文書を HTML5に準拠するために、廃止されたものは, 代替的な書き方を押さえておく必要があります。

廃止された要素

HTML 4で非推奨 (deprecated) となっていたものが中心.

u要素はイキ.

廃止された要素 移行先 備考
applet embed または object
basefont CSSを利用.
big CSSを利用.
center CSSを利用.
font CSSを利用.
isindex フォームコントロール
strike CSSを利用. s要素はイキ.
tt CSSを利用.
frame, frameset, noframes iframeはイキ.
acronym abbr
bgsound (非標準:IE) audio要素
dir ul要素 menu要素は, HTML4で非推奨となり, いったんHTML 5.0 で廃止。

WHATWG では, コンテキストメニューまたはツールバーとして蘇った。

廃止された属性

accesskey属性は, 廃止されず, 逆にHTMLElement全体に拡張. (グローバル属性)

要素名 廃止された属性 移行先 備考
link, a rev, charset
a shape, coords
iframe, img longdesc img要素のも廃止されている.
link target
area nohref
head profile
html version
img, a name id属性 a要素のも廃止されている。次の要素のはイキ: map, object, form, iframe
meta scheme
object archive, classid, codebase, codetype, declare, standby
param valuetype, type
td, th axis headers属性はイキ.
td abbr, scope th要素には scope, abbr属性が書ける.
table summary
form accept
input usemap

script要素の language属性は, 省略するか, "JavaScript" でなければならない。charset属性はイキ.

以下は, CSSで代替:

要素名 廃止された属性 備考
caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr align
body alink, link, text, vlink, background
table, tr, td, th, body bgcolor
object border img要素のborder属性は廃止になっていないが, 値0でなければならない. table要素のborder属性は, 値"1"または空文字列のみ可.
table cellpadding, cellspacing, frame, rules
col, colgroup, tbody, td, tfoot, th, thead, tr char, charoff
br clear
dl, ol, ul compact
iframe frameborder, marginheight, marginwidth, scrolling
td, th height
img, object hspace, vspace
hr noshade
td, th nowrap CSS white-space: nowrap
hr size input, select要素のsize属性はイキ.
li, ul type ol要素のtype属性はイキ.
col, colgroup, tbody, td, tfoot, th, thead, tr valign
hr, table, td, th, col, colgroup, pre width

Canvas

2Dグラフィック描画APIです。

もともとベクターグラフィックは、SVG (Scalable Vector Graphics) がありましたが、広く普及しませんでした。特に、Internet Explorer (IE) では、プラグインをユーザ各自がインストールしなければならず、使い勝手がよくありません。

CanvasはAppleが最初に導入しましたが、主要なWebブラウザが採用し、また、IEでもサーバ側でExplorerCanvasを導入すれば使えるので、幅ひろく見てもらえます。

CanvasをサポートするWebブラウザ:

  • Safari
  • Opera
  • Firefox
  • エンジンがGecko... SeaMonkeyなど
  • エンジンがWebKit... Google Chromeなど

Internet Explorer 向けに ExplorerCanvas を導入します。

"http://www.html5.jp/library/">Javascriptライブラリー - HTML5.JP グラフ (chart) を表示するライブラリ。 "http://developer.mozilla.org/ja/HTML/Canvas">Canvas - MDC Canvasチュートリアルなどがある。

クライアント側ストレージ

(Structured client-side storage) sessionStorage DOM属性 localStorage DOM属性 IE 6+ で使えるライブラリもあります。