ピックアップコラム
-
Pickup!
サイドバーとは?サイドバーを設置するメリットと書き方
-
Pickup!
カラー別にみてみる!WEBサイトにおける配色パターン
-
Pickup!
プラグインなし!オリジナルSNSシェアボタンの作り方ガイド
Living Standard vs HTML5
HTMLの仕様を参照するとき、何のドキュメントを参照していますでしょうか?
W3CのHTML5でしょうか? WHATWGのHTML Living Standardでしょうか?
2008年に最初のHTML 5.0のドラフトバージョンがリリースされて以来、長らくWHATWGの仕様と、W3Cがそれを基に変更を加えたものの二種類が標準仕様として存在していました。
多くのブラウザはWHATWG Living Standardに準拠することを目指した一方で、多くのウェブサイトのマークアップを担うフロントエンドエンジニア達はそのどちらに準拠したら良いのかがわからないという状況が続いていました。
1つの事柄に対する仕様書が複数存在している現状は7年以上も続いており、内容の食い違いや文書自体の管理など様々な問題をはらんでいましたが、2019年5月、その状況が一変し、W3Cは独自のHTML5という仕様策定を終了し、WHATWGが管理している「Living Standard」に一元化することに両者が合意、これにより今後はHTML5/5.1/5.2に代わり、HTML Living Standardが唯一の標準仕様となりました。
その様な経緯でコーディングの最新基準となった「HTML Living Standard」についてHTML5との差異や変更点などを解説していきます。
目次
HTML Living standardとは、ウェブ上の文書を記述するためのマークアップ言語であるHTMLの技術仕様の標準規格で、WHATWGによって策定されているため “WHATWG HTML” とも呼ばれます。
※“WHATWG(Web Hypertext Application Technology Working Group)” とはApple、Google、Microsoft、Mozillaが参加するHTML関連技術の標準仕様を策定するため団体です。
HTML Living Standardはバージョンの概念を持たず、日々改訂され、改訂された時点からその内容が標準となっています。
W3CによるHTMLは「作業草稿」、「勧告候補」、「勧告案」、「勧告」と段階を踏んで「完成」された仕様を策定することを目指していましたが、WHATWGによる “HTML Living standard” は日々少しずつ継続的に更新され続ける “Living(生きている)” な仕様を目指しています。
従来HTMLの仕様はHTMLの5回目の改訂版であるHTML5とそれに続くHTML5.1、HTML5.2まではW3Cよって策定されてきましたが、“HTML Living standard”は HTML5 に代わる標準規格となりました。
※html5については以下の記事をご覧ください。
この段落では変更・追加・廃止となったタグについて解説していきます。
以下の要素はHTML5.2では定義されていませんが、“HTML Living standard”では定義されています。
要素 | 用途 |
---|---|
<hgroup> | 見出しのグループ化 |
<slot> | スロット |
以下の要素は“HTML Living standard”で変更された点、もしくはHTML5.2とは異なる点があります。
要素 | 用途 |
---|---|
<cite> | 創作物のタイトル以外を含むことはできず、作者名を含めることはできなくなりました |
<link> | “rel”属性の値が“body-ok”な値のみである場合、もしくは“itemprop”属性が指定されている場合は“body”要素内に配置できます |
<meta> | “itemprop”属性を指定した場合は“body”要素内に配置できます |
<style> | “body”要素内には配置できません |
以下の要素は“HTML Living standard”では廃止されました。
要素 | 用途 |
---|---|
<rb> | 操作メニューの項目を表す |
<rtc> | 操作メニューの項目を表す |
以下の属性はHTML5.2では定義されていませんが、“HTML Living standard”では定義されています。
要素 | 属性 | 用途 |
---|---|---|
<a> | ping=”” | pingの送信先を指定する |
<area> | ping=”” | pingの送信先を指定する |
<body> | onmessageerror=”” | 文書がAPIから解読できないメッセージを受信したときに実行するスクリプト |
<form> | rel=”” | 現在の文書から見たリンク先との関係 |
<iframe> | allow=”” | 利用できるブラウザの機能を指定する |
<img> | decoding=”” | 画像のデコード方式を指定する |
loading=”” | 画像の読み込みのタイミングを指定する | |
<link> | as=”” | 先行して読み込む外部リソースの利用先を指定する |
color=”” | Safariのページピンアイコンの色を指定する | |
disabled=”” | 外部スタイルシートへのリンクを無効化する | |
imagesizes=”” | 画像を表示するサイズ | |
imagesrcset=”” | 使用可能な画像ファイルのセット | |
integrity=”” | 外部リソースの整合性を確認 | |
<script> | integrity=”” | 外部スクリプトの整合性を確認する |
nomodule=”” | モジュールスクリプトに対応する環境でスクリプトを無効化する | |
referrerpolicy=”” | リファラーポリシーを指定する | |
<video> | playsinline=”” | インラインで再生する |
以下の属性は一度廃止されましたがHTML Living standard”で再び定義されています。
要素 | 属性 | 用途 |
---|---|---|
<object> | usemap=”” | クライアントサイドイメージマップとの関連付け |
以下のグローバル属性は“HTML Living standard”で追加されました。
属性 | 説明 |
---|---|
autocapitalize=”” | 先頭の文字を大文字化するかを指定する |
enterkeyhint=”” | ソフトウェアキーボードの[Enter]キーのアイコンを指定する |
is=”” | カスタム要素と関連付ける |
itemid=”” | 要素の内容のマイクロデータのグローバルな識別子を示す |
itemprop=”” | 要素の内容のマイクロデータのプロパティ名を指定する |
itemref=”” | 要素の外にあるマイクロデータと関連付ける |
itemscope=”” | 要素の内容にマイクロデータが含まれることを示す |
itemtype=”” | 要素の内容のマイクロデータのプロパティ名の定義を示す |
slot=”” | スロットと関連付ける |
以下の属性は“HTML Living standard”ではすべての要素に指定できるグローバル属性として定義されています。
属性 | 説明 |
---|---|
autofocus=”” | 自動フォーカスの可否を指定する |
inputmode=”” | 入力する時のソフトウェアキーボードの種類を指定する |
nonce=”” | “Content Security Policy”のワンタイムトークンを指定する |
以下のイベントハンドラ属性はHTML5.2では定義されていませんが、“HTML Living standard”では定義されています。
属性 | 用途 |
---|---|
onformdata=”” | フォームのエントリリストを生成した時に実行されるスクリプト |
onmessageerror=”” | 文書がAPIから解読できないメッセージを受信したときに実行するスクリプト |
onsecuritypolicyviolation=”” | コンテンツセキュリティポリシーに違反した時に実行されるスクリプト |
onslotchange=”” | スロットが含まれるノードが変更された時に実行されるスクリプト |
onwebkitanimationend=”” | CSSアニメーションが終了した時に実行されるスクリプト |
onwebkitanimationinteration=”” | CSSアニメーションが繰り返された時に実行されるスクリプト |
onwebkitanimationstart=”” | CSSアニメーションが開始した時に実行されるスクリプト |
onwebkittransitionend=”” | CSSトランジションが終了した時に実行されるスクリプト |
以下の属性は“HTML Living standard”で変更された点、もしくはHTML5.2とは異なる点があります。
http-equiv=””属性値として“x-ua-compatible”、“content-security-policy”を指定できるようになりましたname=””属性値として“theme-color”を指定できるようになりました
要素 | 属性 | 用途 |
---|---|---|
<a> | rel=”” | 属性値として“opener”を指定できるようになりました |
<area> | rel=”” | 属性値として“opener”を指定できるようになりました |
<iframe> | sandbox=”” | 属性値として“allow-modals”、“allow-orientation-lock”、“allow-popups-to-escape-sandbox”、“allow-top-navigation-by-user-activation”、“allow-downloads”を指定できるようになりました |
<link> | rel=”” | 属性値として“canonical”、“dns-prefetch”、“modulepreload”、“pingback”、“preconnect”、“preload”、“prerender”を指定できるようになりました |
<meta> | charset=”” | 属性値は“utf-8(UTF-8)”であるべきとされています |
以下のグローバル属性はHTML5.2とは異なる点があります。
属性 | 用途 |
---|---|
accesskey=”” | 属性値として複数の値を指定できます |
以下の属性は“HTML Living standard”では廃止されました。
要素 | 属性 | 用途 |
---|---|---|
<a> | rev=”” | リンク先から見た現在の文書との関係 |
<area> | hreflang=”” | リンク先の記述言語 |
type=”” | リンク先のMIMEタイプ | |
<iframe> | allowpaymentrequest=”” | 埋め込まれた文書がPayment Request APIを実行することを許可する |
<img> | longdesc=”” | 画像を説明した文書のURL |
<link> | rev=”” | リンク先から見た現在の文書との関係 |
<object> | typemustmatch=”” | 埋め込まれる外部リソースが“type”属性で指定したMIMEタイプと一致する場合にのみ埋め込みを許可 |
<script> | charset=”” | 外部スクリプトの文字エンコーディング |
<style> | type=”” | スタイルシートの記述言語 |
<table> | border=”” | 表の外枠の太さ |
以下のイベントハンドラ属性は“HTML Living standard”では廃止されています。
属性 | 用途 |
---|---|
ondragexit=”” | ドラッグしたアイテムが要素から出た時に実行されるスクリプト |
onloadend=”” | メディアのデータの読み込みが終わる時に実行されるスクリプト |
onshow=”” | 操作メニューを表示した時に実行されるスクリプト |
以下の要素はHTML5.2では廃止されていますが、“HTML Living standard”では定義されています。
要素 | 用途 |
---|---|
<menu> | 操作メニュー |
以下のイベントハンドラ属性はHTML5.2では廃止されていますが、“HTML Living standard”では定義されています。
属性 | 用途 |
---|---|
oncontextmenu=”” | コンテキストメニューを表示した時に実行されるスクリプト |
WHATWGの”Living Standard”を基準としてW3Cが受け入れるということは、これまで衝突していた要素の仕様はWHATWGを基準に考える必要があるようです。
コーディングの制作ガイドラインなどが用意されている場合には内容のバージョンアップを検討した方が良いかもしれません。
※WHATWG Living Standardについての参考外部サイト
WHATWG Living Standard 本サイト
WHATWG Living Standard 日本語訳サイト
受付時間:平日10:00~19:00(土・日・祝日を除く)