HTML5からHTML Living Standardへ – 真相と移行の全貌を徹底解説！

HTML5はW3C、HTML Living StandardはWHATWGという組織が策定したHTMLの仕様です。

この2つの仕様は、6年以上に渡り併存していましたが、主要ブラウザが全てHTML Living Standardを標準仕様として採用したため、HTML5は廃止されることになりました。

この記事では、HTML5からHTML Living Standardに標準仕様が移行する経緯や、両者の違いについて解説します。

HTML5とは

HTML5とは、HTMLバージョン5という意味で、2014年にW3C（World Wide Web Consortium）が勧告（正式リリース）しました。

W3Cとは、”Webの父”テム・バーナーズ・リーにより設立された、Webに関する技術の仕様や要件などをとりまとめる組織のことです。

最初のHTMLが開発されたのが1989年であるため、HTMLは20年以上の時間をかけて5回の世代交代をしてきたことになります。

HTML5の一つ前、HTML4の時代は、Webメディアを閲覧するデバイスはPCが主流であり、現在のスマホのようなモバイル端末による閲覧は想定されていませんでした。

HTML5は、インターネットやスマホの発展・普及を織り込んで策定されたので、HTML4にはない以下のような技術や工夫が盛り込まれています。

ちなみに、HTML5を勧告したのはW3Cですが、最初に策定したのはWHATWG（Web Hypertext Application Technology Working Group）という組織です。

WHATWGは、W3Cの運営方針に不満を持つApple、Mozilla、Operaといったブラウザの開発元によって2004年に設立され、Web Applications 1.0という名前で独自のHTMLの仕様を策定しました。

これが、後のHTML5やHTML Living Standardへと変化していきます。

HTML5は2021年に廃止されました。

廃止に大きく影響したのはWHATWGですが、廃止に至るまでには以下のような紆余曲折がありました。

W3CがHTML5の廃止を決めたことで、HTMLの標準仕様はHTML Living Standardになりました。

標準仕様が変更になることに対して、不安に思うWeb制作関係者もいましたが、W3CのHTML5も、WHATWGのHTML Living Standardも、元々は同じHTML5です。

細部における記述や挙動の部分で多少の差異はあっても、大筋では同じHTMLであり、混乱をきたすような状況にはなっていません。

HTML Living Standardが採用された最も大きな理由は、主力のブラウザが全てHTML Living Standardを標準仕様に決めたことにあります。

元々、バージョンという概念を持たず、仕様の変更や新機能追加を随時行うHTML Living Standardの方が、ブラウザ開発者からの評価が高く、GoogleChrome、Safari、Operaといった主力ブラウザはHTML Living Standardを標準仕様に採用していました。

W3Cが策定したHTML5.*を支持したのはマイクロソフトのEdgeのみという、W3Cにとっては苦しい状況でしたが、そのEdgeも2020年にGoogle chromeと同じchromiumベースとなり、HTML5を採用する主力ブラウザは皆無になりました。

こうした流れを受け、W3Cは、独自にHTMLの標準仕様を策定することを断念し、WHATWGが策定したHTML Living Standardを標準仕様にすると発表したのでした。

ここからは、HTML5とHTML Living Standardが扱うタグの違いについて、要素と属性に分けて紹介します。

HTML Living Standardで追加定義された要素は以下の通りです。

要素	用途
<hgroup>	見出しをグループ化する
<slot>	Shadow DOM内でのデータ挿入口を示す

HTML Living Standardで追加定義された属性の一覧は以下の通りです。

なお、これらの属性の中には、作動条件が付帯しているケースがあります。

要素	属性	用途
<a>	ping=””	ping送信先を指定
<area>	ping=””	ping送信先を指定
<body>	onmessageerror=””	APIからのメッセージが解読不可能な時に実行するスクリプト
<form>	rel=””	現在の文書から見たリンク先の位置づけを示す
<iframe>	allow=””	ブラウザの機能やデバイス利用の有無を指定する
	loading=””	読み込みのタイミングを指定する
<img>	decoding=””	画像のデコード処理方式を指定する
	loading=””	画像の読み込みタイミングを指定する
<link>	as=””	先読みされるコンテンツの種類を指定する
	color=””	ページピンアイコンの色を指定する
	disabled=””	外部スタイルシートの読み込み無効化
	imagesizes=””	先読み画像の表示サイズを指定
	imagesrcset=””	レスポンシブ画像の先読み
	integrity=””	外部スクリプトのチェック
<meta>	media=””	メタデータを適用するメディアの指定
<script>	integrity=””	外部スクリプトのチェック
	referrerpolicy=””	リファラー送信ポリシーを指定する
<source>	height=””	画像の高さを指定
	width=””	画像の幅を指定
<video>	playsinline=””	インライン再生を指定する

全ての要素に使用可能なグローバル属性の追加分は以下の通りです。

属性	用途
autocapitalize=””	大文字化の指定
enterkeyhint=””	ソフトウェアキーボードの[Enter]キーのアイコン指定
inert=””	要素の不活性化を指定
is=””	要素にカスタム要素を指定する
itemid=””	マイクロデータのグローバル識別子の指定
itemprop=””	マイクロデータのプロパティ名の指定
itemref=””	マイクロデータを含む要素と関連付ける
itemscope=””	マイクロデータでのアイテムの範囲を示す
itemtype=””	マイクロデータのタイプを示す
slot=””	Shadow DOM内のスロットとの関連付けを指定

HTML5では定義されず、HTML Living Standardでグローバル属性として定義された属性の一覧は以下の通りです。