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+
ぐらいでしょうか。

新しい要素・属性

セクション

[New] section 要素

文書のアウトラインを作る.

HTML5 では, 次のような書き方も可. 各 section 要素の子として h1 を使う. 次の2つの書き方は同じ効果となることを要求した。

HTML/XML
  1. <!DOCTYPE HTML>
  2. <title>The Tax Book (all in one page)</title>
  3. <h1>The Tax Book</h1>
  4. <h2>Earning money</h2>
  5. <p>Earning money is good.</p>
  6. <h3>Getting a job</h3>
  7. <p>To earn money you typically need a job.</p>
  8. <h2>Spending money</h2>
  9. <p>Spending is what money is mainly used for.</p>
  10. <h3>Cheap things</h3>
  11. <p>Buying cheap things often not cost-effective.</p>
  12. <h3>Expensive things</h3>
  13. <p>The most expensive thing is often not the most cost-effective either.</p>
  14. <h2>Investing money</h2>
  15. <p>You can lend your money to other people.</p>
  16. <h2>Losing money</h2>
  17. <p>If you spend money or invest money, sooner or later you will lose money.
  18. <h3>Poor judgement</h3>
  19. <p>Usually if you lose money it's because you made a mistake.</p>
HTML/XML
  1. <!DOCTYPE HTML>
  2. <title>The Tax Book (all in one page)</title>
  3. <h1>The Tax Book</h1>
  4. <section>
  5. <h1>Earning money</h1>
  6. <p>Earning money is good.</p>
  7. <section>
  8. <h1>Getting a job</h1>
  9. <p>To earn money you typically need a job.</p>
  10. </section>
  11. </section>
  12. <section>
  13. <h1>Spending money</h1>
  14. <p>Spending is what money is mainly used for.</p>
  15. <section>
  16. <h1>Cheap things</h1>
  17. <p>Buying cheap things often not cost-effective.</p>
  18. </section>
  19. <section>
  20. <h1>Expensive things</h1>
  21. <p>The most expensive thing is often not the most cost-effective either.</p>
  22. </section>
  23. </section>
  24. <section>
  25. <h1>Investing money</h1>
  26. <p>You can lend your money to other people.</p>
  27. </section>
  28. <section>
  29. <h1>Losing money</h1>
  30. <p>If you spend money or invest money, sooner or later you will lose money.
  31. <section>
  32. <h1>Poor judgement</h1>
  33. <p>Usually if you lose money it's because you made a mistake.</p>
  34. </section>
  35. </section>

After HTML5:

  • 2022年, アウトラインアルゴリズムの規格からの削除。誰一人実装していなかった要求をようやく諦めた。
  • body, article, section で区分けしつつ、h1-h6 の heading level でアウトラインを作ることに。
  • header, footer は, sectioning content (article, aside, nav, section) のなかにそれぞれ書いてもよい。
  • hgroup は一つの h1-h6 に副題を p 要素で付けるものに明確化。W3C HTML5 時点ではなかったが, WHATWG HTML のほうには昔からあった。アウトラインアルゴリズム削除に併せて、復活。

そのほかの新しい要素

要素名 説明
article ブログのエントリや記事など、独立した文書の中身の一部分。文書のアウトライン. ネスト (入れ子) 可.
nav 文書構造. 子として main 要素を含めることはできない.
aside 文書構造. 子として main 要素を含めることはできない.
header Sectioning content のヘッダを示す。子として header, footer, main 要素を含めることはできない.
footer Sectioning content のフッタを示す。子として header, footer, main 要素を含めることはできない.

グルーピングする内容

新しい要素

要素名 説明
main 文書構造. 文書のアウトラインではない.
figure, figcaption

埋め込み内容

新しい要素その2.

要素名 説明
video, audio, source
track video, audio要素の子として使用.
embed

テキストレベル

新しい要素.

要素名 説明
mark ハイライト?
ruby, rt, rp ルビ
bdi 書字方向が異なる可能性がある部分を隔離する
wbr 折り返し可能
time 日時を表すテキスト

フォーム

新しい要素.

要素名 説明
progress
meter
datalist input要素のlist属性から呼び出される. コンボボックスを作る。
keygen
output

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

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

スクリプティング

script 要素

script 要素の language 属性は廃止扱いになったが、type 属性値がない場合に限り, スクリプティング言語の決定に利用する。

charset 属性はイキ. HTML5 では, type 属性は単に MIME type の指定。

After HTML5:

スクリプティング言語が JavaScript である前提で、type 属性が次のようになった:

  • 省略, 空文字列または "text/javascript" -- JavaScript classic スクリプト, トップレベル.
  • "module" -- JavaScript module スクリプト
  • "importmap" -- インポートマップ, JSON
  • 他の値 -- data block となり、処理されない。

ほかのスクリプティング言語を動かす余地がなくなったように見える。

そのほか新しい要素:

要素名 説明
canvas
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 と呼ぶ。

廃止された要素、属性

作成する文書を 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

以下は, 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属性