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

(2008.9.27) 新規作成

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

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

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

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

W3Cのは『欠陥フォーク』！？ HTMLスナップショット2016 ── HTML5 Conference 2016セッションレポート | HTML5Experts.jp

2019年5月, W3Cはようやくやっと、独自のHTML 5.3とDOM 4.1の開発を終了させることに合意した。Memorandum of Understanding Between W3C and WHATWG

妥当性検査

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

ソースコードはこちら; GitHub - validator/validator: The Nu Html Checker スキーマは RelaxNG + Schematron で書かれている.

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

HTML5 (5.0) と HTML 4との差異

参照するヴァージョン; HTML5 A vocabulary and associated APIs for HTML and XHTML, W3C Recommendation 28 October 2014

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/XML
  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>
article ブログのエントリや記事など、独立した文書の中身の一部分。文書のアウトライン. ネスト (入れ子) 可.
nav 文書構造. 子として main要素を含めることはできない.
aside 文書構造. 子として main要素を含めることはできない.
main 文書構造. 文書のアウトラインではない.
header 文書構造. 子として header, footer, main 要素を含めることはできない.
footer 文書構造. 一つの文書中に複数可. 子として header, footer, main 要素を含めることはできない.
figure, figcaption
template JavaScript のための一時置き場。この要素とその内容は DOM内で描画されない。あらゆるHTML片を子に持てる。往年の XSLT からの流用。とはいえ機能性はずいぶん異なる。

[2022-07] Ruby on Rails 7 の Turbo Streams で大活躍。

コラム: Web Components

その後, 次の4つの技術の組み合わせが Web Components に発展している. https://www.webcomponents.org/introduction のリンクは古い。移転して, https://github.com/WICG/webcomponents/ (でもこれも古い)

シャドゥ DOM
制御する JavaScript API. Element#attachShadow() など。'Shadow' というのが分かりにくい。実際は、ある一部分の DOM ツリーと CSS をカプセル化する技法。
HTML カスタム要素
<popup-info> のような独自の要素 (タグ) を定義する JavaScript API. 例: customElements.define('popup-info', PopUpInfo);
HTML テンプレート
<template> 要素に加えて, 新しい <slot> 要素. HTML カスタム要素の基礎として、再利用できる。
CSS シャドゥパーツ
シャドゥツリーを指定するセレクタなど。
JSON, CSS, HTML Modules
HTML Imports の後継.

<template> 要素でテンプレートを作成し、それをクローンしてカプセル化されたシャドゥツリーとし、HTML カスタム要素の内容とする。

シャドゥツリーの根を shadow root と呼ぶ。

新しい要素その2.

要素名 説明
video, audio, source
track video, audio要素の子として使用.
embed
mark
progress
meter
time
ruby, rt, rp
bdi
wbr
canvas
datalist input要素のlist属性から呼び出される. コンボボックスを作る。
keygen
output

WHATWG HTML のほうには, 上記のほか, 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 HTML では, コンテキストメニューまたはツールバーとして蘇った。

廃止された属性

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

a および area 要素の target 属性は、逆に、生きることになった。No longer deprecated.

要素名 廃止された属性 移行先 備考
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 を導入します。ExplorerCanvas

Canvas API - MDC Canvasチュートリアルなどがある。

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

(Structured client-side storage) sessionStorage DOM属性 localStorage DOM属性