ライター
Sayuri Kakuya
2024.11.25 コーディング
HTML Living Standardとは? 採用された理由やHTML5との違いを解説
これまで標準規格であった「HTML5」が廃止され、「HTML Living Standard」が標準仕様となりました。本記事では、 HTML Living Standardとは何か、標準仕様となった理由やHTML5との違いについて解説していきます。
目次
HTML Living Standardとは
HTML Living Standardとは、 Apple社・Opera社・ Mozilla社の開発チームによって設立された「WHATWG（ワットダブルジー）」という組織が策定したHTMLの仕様です。
そもそもHTMLとは、ホームページ制作の際に使用する言語のことで、Webサイトを作成する際にコンピューターへ指示を出し、表示したい文章や画像などの情報を形作る役割を持ちます。
これまでは、「 W3C（World Wide Web Consortium）」という組織が策定したHTML5・HTML5.1 ・HTML5.2が標準仕様とされていましたが、2021年からHTML Living Standardが標準仕様として採用されました。
HTML Living Standardが標準仕様になった理由
ではなぜ、HTML Living Standardが標準仕様として採用されたのでしょうか。それは、ホームページなどWeb技術のルールを決めるW3Cの内部で分裂が起こったことで、WHATWGという組織が設立されたことが理由です。
これにより、W3Cが推奨するHTML5と、WHATWGが推奨するHTML Living Standardが対立することになります。そして2018年頃からは、chrome・Firefox・Safari・Operaといったブラウザが HTML Living Standardを標準仕様として採用する動きが出てきました。
翌年には、Microsoft EdgeもChromeの方針に合わせることになり、2021年にはHTML5が廃止され、 HTML Living StandardがHTMLの標準仕様となったのです。
HTML Living StandardとHTML5の違い
HTML Living StandardとHTML5には、大きな違いはありません。しかし、HTML5は一度標準として策定された後、バージョン番号が固定されているのに対し、HTML Living Standardは常に進化し続ける仕様になっているという違いがあります。
HTML Living Standardでは、新しい要素や機能が随時追加され、Web技術の最新トレンドに対応しているのが特徴です。ここからは、HTML Living Standardが標準仕様となったことで追加・変更・廃止された要素と属性を見ていきましょう。
HTML Living Standardで追加・変更・廃止された要素一覧
HTML Living Standardで追加・変更・廃止された要素を紹介します。
追加された要素
| 要素名 | 用途 |
|---|---|
| <hgroup> | 見出しをグループ化する。 |
| <slot> | スロットを表す。 |
| <main> | 文書の主要コンテンツを表す。 |
変更された要素
| 要素名 | 用途 |
|---|---|
| <cite> | タイトル以外を含むことはできず、作者名を含むことができなくなった。 |
| <meta> | “itemprop”属性を指定した場合、“body”要素内に配置可能に。 |
| <style> | “body”要素内への配置が不可に。 |
| <link> | bodyの要素内に配置できる条件が変更され、“rel”属性の値が“body-ok”な値のみ、または“itemprop”属性が指定されている時のみ配置できる。 |
廃止された要素
| 要素名 | 用途 |
|---|---|
| <rb> | 操作メニューの項目を表す。 |
| <rtc> | 操作メニューの項目を表す。 |
HTML Living Standardで追加・変更・廃止された属性一覧
HTML Living Standardで追加・変更・廃止された属性を紹介します。
追加された属性
| 要素名 | 属性 | 用途 |
|---|---|---|
| <body> | onmessageerror=”” | 読めないメッセージを受信した際に実行するスクリプト。 |
| <a> | ping=”” | pingの送信先を指定する。 |
| <area> | ping=”” | pingの送信先を指定する。 |
| <form> | rel=”” | 現在の文書から見たリンク先との関係を表す。 |
| <iframe> | allow=”” | 利用できるブラウザの機能を指定する。 |
| <link> | color=”” | Safariページピンアイコンの色を指定する。 |
| <link> | disabled=”” | 外部スタイルシートへのリンクを無効化する。 |
| <link> | imagesizes=”” | 画像を表示するサイズ。 |
| <link> | as=”” | 先に読み込む外部リソースの利用先を指定する。 |
| <link> | integrity=”” | 外部リソースとの整合性を確認する。 |
| <link> | imagesrcset=”” | 使用可能な画像ファイルのセット。 |
| <img> | loading=”” | 画像読み込みのタイミングを指定する。 |
| <img> | decoding=”” | 画像のデコード方式を指定する。 |
| <script> | integrity=”” | 外部スクリプトとの整合性を確認する。 |
| <script> | nomodule=”” | モジュールスクリプトへの対応環境でスクリプトを無効化する。 |
| <script> | referrerpolicy=”” | リファラーポリシーを指定する。 |
| <video> | playsinline=”” | インラインで再生する。 |
| グローバル属性 | is=”” | カスタム要素と関連付ける。 |
| enterkeyhint=”” | Enteキーのアイコンを指定する。 | |
| autocapitalize=”” | 先頭の文字について大文字化するかを指定する。 | |
| itemid=”” | 要素のマイクロデータのグローバルな識別子を表す。 | |
| itemscope=”” | 要素にマイクロデータが含まれることを表す。 | |
| itemref=”” | 要素外にあるマイクロデータと関連付ける。 | |
| itemtype=”” | 要素のマイクロデータのプロパティ名の定義を表す。 | |
| itemprop=”” | 要素のマイクロデータのプロパティ名を指定する。 | |
| slot=”” | スロットと関連付ける。 | |
| イベントハンドラ属性 | onformdata=”” | フォームのエントリリストを生成した時に実行されるスクリプト。 |
| onmessageerror=”” | 解読できないメッセージを受信したときに実行するスクリプト。 | |
| onsecuritypolicyviolation=”” | コンテンツのセキュリティポリシーに違反した際に実行されるスクリプト。 | |
| onwebkittransitionend=”” | CSSトランジション終了時に実行されるスクリプト。 | |
| onwebkitanimationstart=”” | CSSアニメーション開始時に実行されるスクリプト。 | |
| onslotchange=”” | スロットを含むノードが変更された際に実行されるスクリプト。 | |
| onformdata=”” | フォームのエントリリスト生成時に実行されるスクリプト。 | |
| onwebkitanimationinteration=”” | CSSアニメーションをリピートした時に実行されるスクリプト。 | |
| onwebkitanimationend=”” | CSSアニメーションの終了時に実行されるスクリプト。 |
変更された属性
| 要素名 | 属性 | 用途 |
|---|---|---|
| <a> | rel=”” | 属性値として“opener”を指定できる。 |
| <area> | rel=”” | 属性値として“opener”を指定できる。 |
| <link> | rel=”” | 属性値として“canonical”、“dns-prefetch”、“modulepreload”、“pingback”、“preconnect”、“preload”、“prerender”を指定できる。 |
| <iframe> | sandbox=”” | 属性値として“allow-modals”、“allow-orientation-lock”、“allow-popups-to-escape-sandbox”、“allow-top-navigation-by-user-activation”、“allow-downloads”を指定できる。 |
| <meta> | name=”” | 属性値として“theme-color”、“color-scheme”を指定できる。 |
| http-equiv=”” | 属性値として“x-ua-compatible”、“content-security-policy”を指定できる。 | |
| charset=”” | 属性値は“utf-8(UTF-8)”を指定すべきとされている。 | |
| グローバル属性 | nonce=”” | “Content Security Policy”のワンタイムトークンの指定。 |
| inputmode=”” | 入力時にソフトウェアキーボードの種類を指定できる。 | |
| accesskey=”” | 属性値として複数の値を指定できる。 |
廃止された属性
| 要素名 | 属性 | 用途 |
|---|---|---|
| <a> | rev=”” | リンク先から見た現在の文書との関係を表す。 |
| <area> | hreflang=”” | リンク先の記述言語。 |
| type=”” | リンク先のMIMEタイプ。 | |
| <link> | rev=”” | リンク先から見た現在の文書との関係。 |
| <iframe> | allowpaymentrequest=”” | 埋め込まれた文書がPayment Request APIを実行することを許可する。 |
| <img> | longdesc=”” | 画像を説明した文書のURL。 |
| <html> | manifest=”” | キャッシュマニフェストを指定できる。 |
| <object> | typemustmatch=”” | 埋め込まれる外部リソースが“type”属性で、指定したMIMEタイプと一致する場合にのみ埋め込みを許可する。 |
| <style> | type=”” | スタイルシートの記述言語。 |
| <script> | charset=”” | 外部スクリプトの文字エンコーディング。 |
| <table> | border=”” | 表の外枠の太さ。 |
| グローバル属性 | onloadend=”” | メディアのデータの読み込み終了時に実行されるスクリプト。 |
| ondragexit=”” | ドラッグしたアイテムが要素から出た際に実行されるスクリプト。 | |
| onshow=”” | 操作メニューを表示した時に実行されるスクリプト。 |
まとめ
本記事では、HTML Living Standardとは何か、またHTML5との違いについて解説しました。HTML Living Standardについて把握していないと、不適切なマークアップをする可能性が高まり、SEOへの悪影響も懸念されます。このような状況を回避するためにも、HTML Living Standardの基礎を理解し、適切にサイトを構築しましょう。
