HTML Living Standardとは？廃止されたHTML5との違いなど徹底解説！
HTML Living Standardとは、Apple・Mozilla・Operaの開発者によって設立されたWHATWGという組織が策定するHTMLの仕様のことです。
この仕様は、HTML5の廃止によって標準仕様となりました。
また、HTML Living Standardで不適切なマークアップをすれば、SEOへの影響が懸念されます。
一方、HTML Living Standardで適切なマークアップをすれば、コンテンツの品質が保てます。
具体的には、HTML Living Standardで定められてるHTMLの要素や属性を使ってマークアップしたり、HTMLの要素や属性の記述ミスをなくします。
そうなれば、クローラーが理解しやすいHTML構造になり、かつレイアウトの崩れがなくなります。
結果、コンテンツの品質が保たれて、検索順位の下落に繋がりづらいというわけです。
こうした良い状況にするために、HTML Living Standardの基礎を把握して、適切にサイト構築しましょう。
この点踏まえて今回は、HTML Living Standardの定義やHTML5との違いなど中心に、初心者にもわかりやすくポイントをまとめて解説したいと思います。
この記事でわかること
- HTML Living Standardは、WHATWGが策定するHTMLの現行標準仕様(HTML5は廃止済み)
- HTML5が廃止されてLiving Standardに一本化された経緯
- HTML5から追加・変更・廃止された要素と属性の一覧
おすすめの読者層
- 「HTML5は廃止された」と聞いて、何が変わったのか知りたい方
- 最新仕様に沿ってマークアップしたいコーダー・Web制作担当者の方
HTML Living Standardとは？
HTML Living Standardとは、Apple・Mozilla・Operaの開発者によって設立されたWHATWGという組織が策定するHTMLの仕様のことです。
例えば、これまではW3Cという組織が策定したHTML5やHTML5.1、HTML5.2がHTMLの標準仕様でした。
このHTMLの標準仕様をW3Cでなく、WHATWGという組織が取り決めることになりました。
この組織が取り決めるHTMLの標準仕様が、HTML Living Standardというわけです。
HTML Living Standardが採用された理由（HTML5が廃止された理由）
HTML Living Standardが採用された理由は、HTMLの標準仕様をWHATWGという組織が取り決めることになったからです。
具体的には、当初、別々に独自の仕様を策定して活動してたWHATWGとW3Cは寄り添って共同作業を開始しました。
そんな中、「W3C」はドキュメントを整備してから発行したく、「WHATWG」は順次アップデートを行いたいという考えの違いが生まれたり、「W3C」が「WHATWG」のHTMLをベースに独自の要素を付け足すなどして両組織のHTMLが徐々に乖離します。
この乖離によって、WHATWGは2011年10月にHTML Living Standardを開始し、2012年には共同作業を中止、W3Cは2014年10月にHTML5を、2016年11月にHTML5.1を独自に勧告しました。
つまり、W3Cが勧告するHTML5/HTML5.1と、WHATWGが策定を進めるHTML Living Standardの2つの標準に分裂する状態になりました。
このころから、GoogleのChromeやMozillaのFirefox,、AppleのSafari,、Operaなどの主要ブラウザがW3Cに準拠することを辞めて、HTML Living Standardを標準仕様として採用し始めました。さらに唯一のW3C派だったMicrosoftのEdgeもChromeと同じChromiumベースに移行することを発表しました。
この流れからW3Cは独自のHTMLの標準化を断念して、今後のHTML標準化をWHATWGにゆだねました。
結果、WHATWGは、2021年1月28日にW3CのHTML関連の仕様（HTML５など）をすべて廃止して、独自に策定してきたHTML Living Standardに完全統一しHTMLの標準仕様に採用したというわけです。
このように、HTMLの標準仕様をWHATWGという組織が取り決めることになったので、HTML Living Standardが採用されたというわけです。
HTML Living Standardに対応してるWebブラウザ
HTML Living Standardに対応してるWebブラウザは、主にGoogleのChrome、MozillaのFirefox、AppleのSafari、Operaなどです。
具体的には、HTML5.1の勧告があった2016年ごろからGoogleのChromeやMozillaのFirefox,、AppleのSafari,、Operaなどの主要ブラウザがW3Cに準拠することを辞めて、HTML Living Standardを標準仕様として採用し始めました。
さらに唯一のW3C派だったMicrosoftのEdgeもChromeと同じChromiumベースに移行することを発表しました。
ちなみに、MicrosoftのInternet Explorerで表示が崩れるのはW3Cの仕様を元に開発されたためです。
HTML Living StandardとHTML5の違い
HTML Living StandardとHTML5の違いは、ほぼありません。
具体的には、HTML5の最終版「HTML5.2」から「HTML Living standard」が標準仕様になって要素や属性が新しく追加・変更・廃止されましたが、基本的な要素や属性の扱いは変わりません。
つまり、HTML Living StandardとHTML5は、一部のタグの扱いが違うだけで大きな違いはないというわけです。
- 追加された要素
- 変更された要素
- 廃止された要素
- 追加された属性
- 変更された属性
- 廃止された属性
追加された要素
「HTML Living standard」になって新しく追加された要素です。
| 要素名 | 用途 |
| <hgroup> | 見出しのグループ化 |
| <slot> | スロット |
変更された要素
「HTML Living standard」になって変更された要素です。
| 要素名 | 用途 |
| <cite> | 創作物のタイトル以外を含むことはできず、作者名を含むことができなくなりました。 |
| <link> | “rel”属性の値が“body-ok”な値のみの際、または“itemprop”属性が指定されている際、“body”の要素内に配置することができます。 |
| <meta> | “itemprop”属性を指定した場合は“body”要素内に配置できます。 |
| <style> | “body”要素内には配置できません。 |
廃止された要素
「HTML Living standard」になって廃止された要素です。
| 要素名 | 用途 |
| <rb> | 操作メニューの項目を表します。 |
| <rtc> | 操作メニューの項目を表します。 |
追加された属性
「HTML Living standard」になって新しく追加された属性です。
| 要素名 | 属性名 | 用途 | |
| <a> | ping=”” | pingの送信先を指定します。 | |
| <area> | ping=”” | pingの送信先を指定します。 | |
| <body> | onmessageerror=”” | 文書がAPIから解読できないメッセージ受信した際に実行するスクリプト。 | |
| <form> | rel=”” | 現在の文書から見たリンク先との関係。 | |
| <iframe> | allow=”” | 利用できるブラウザの機能を指定します。 | |
| <img> | decoding=”” | 画像のデコード方式を指定します。 | |
| <img> | loading=”” | 画像の読み込みのタイミングを指定します。 | |
| <link> | as=”” | 先行して読み込む外部リソースの利用先を指定します。 | |
| <link> | color=”” | Safariのページピンアイコンの色を指定します。 | |
| <link> | disabled=”” | 外部スタイルシートへのリンクを無効化します。 | |
| <link> | imagesizes=”” | 画像の表示するサイズ。 | |
| <link> | imagesrcset=”” | 使用可能な画像ファイルのセット。 | |
| <link> | integrity=”” | 外部リソースの整合性を確認します。 | |
| <script> | integrity=”” | 外部スクリプトの整合性を確認します。 | |
| <script> | nomodule=”” | モジュールスクリプトへの対応環境でスクリプトを無効化します。 | |
| <script> | referrerpolicy=”” | リファラーポリシーを指定します。 | |
| <video> | playsinline=”” | インラインで再生します。 | |
| 全てのHTML要素 | グローバル属性 | autocapitalize=”” | 先頭の文字を大文字化するかを指定します。 |
| enterkeyhint=”” | ソフトウェアキーボードの[Enter]キーのアイコンを指定します。 | ||
| is=”” | カスタム要素と関連付けます。 | ||
| itemid=”” | 要素の内容のマイクロデータのグローバルな識別子を示します。 | ||
| itemprop=”” | 要素の内容のマイクロデータのプロパティ名を指定します。 | ||
| itemref=”” | 要素の外にあるマイクロデータと関連付けます。 | ||
| itemscope=”” | 要素の内容にマイクロデータが含まれることを示します。 | ||
| itemtype=”” | 要素の内容のマイクロデータのプロパティ名の定義を示します。 | ||
| slot=”” | スロットと関連付けます。 | ||
| イベントハンドラ属性 | onformdata=”” | フォームのエントリリストを生成した時に実行されるスクリプトです。 | |
| onmessageerror=”” | 文書がAPIから解読できないメッセージを受信したときに実行するスクリプトです。 | ||
| onsecuritypolicyviolation=”” | コンテンツセキュリティポリシーに違反した時に実行されるスクリプトです。 | ||
| onslotchange=”” | スロットが含まれるノードが変更された時に実行されるスクリプトです。 | ||
| onwebkitanimationend=”” | CSSアニメーションが終了した時に実行されるスクリプトです。 | ||
| onwebkitanimationinteration=”” | CSSアニメーションが繰り返された時に実行されるスクリプトです。 | ||
| onwebkitanimationstart=”” | CSSアニメーションが開始した時に実行されるスクリプトです。 | ||
| onwebkittransitionend=”” | CSSトランジションが終了した時に実行されるスクリプトです。 | ||
変更された属性
「HTML Living standard」になって変更された属性です。
| 要素名 | 属性名 | 用途 | |
| <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)”であるべきとされています。 | |
| http-equiv=”” | 属性値として“x-ua-compatible”、“content-security-policy”を指定できるようになりました。 | ||
| name=”” | 属性値として“theme-color”、“color-scheme”を指定できるようになりました。 | ||
| 全てのHTML要素 | グローバル属性 | accesskey=”” | 属性値として複数の値を指定できます。 |
| inputmode=”” | 入力する時のソフトウェアキーボードの種類を指定します。 | ||
| nonce=”” | “Content Security Policy”のワンタイムトークンを指定します。 | ||
廃止された属性
「HTML Living standard」になって廃止された属性です。
| 要素名 | 属性名 | 用途 | |
| <a> | rev=”” | リンク先から見た現在の文書との関係。 | |
| <area> | hreflang=”” | リンク先の記述言語。 | |
| type=”” | リンク先のMIMEタイプ。 | ||
| <html> | manifest=”” | キャッシュマニフェストを指定する。 | |
| <iframe> | allowpaymentrequest=”” | 埋め込まれた文書がPayment Request APIを実行することを許可する。 | |
| <img> | longdesc=”” | 画像を説明した文書のURL。 | |
| <link> | rev=”” | リンク先から見た現在の文書との関係。 | |
| <object> | typemustmatch=”” | 埋め込まれる外部リソースが“type”属性で指定したMIMEタイプと一致する場合にのみ埋め込みを許可。 | |
| <script> | charset=”” | 外部スクリプトの文字エンコーディング。 | |
| <style> | type=”” | スタイルシートの記述言語。 | |
| <table> | border=”” | 表の外枠の太さ。 | |
| イベントハンドラ属性 | ondragexit=”” | ドラッグしたアイテムが要素から出た時に実行されるスクリプト。 | |
| onloadend=”” | メディアのデータの読み込みが終わる時に実行されるスクリプト。 | ||
| onshow=”” | 操作メニューを表示した時に実行されるスクリプト。 | ||
HTML Living Standardを学ぶためにHTML5の資格が役立つ
HTML Living Standardを学ぶためにHTML5の資格が役立ちます。
いずれもHTML5の試験なのでHTML Living standardの試験ではありません。
ですがHTML Living standardは、HTML5をベースとしてます。
なのでHTML5の学習（勉強）をして資格取得などのスキルアップを図れば、HTML Living standardを学ぶことに繋がります。
つまり、HTML Living Standardを学ぶためにHTML5の資格が役立つというわけです。
まとめ：HTML Living Standardの基礎を把握して、適切にサイト構築しよう
HTML Living Standardの基礎を把握して、適切にサイト構築しましょう。
一方、HTML Living Standardの基礎を知らなければ、不適切なマークアップをする可能性が高まります。
具体的には、誤ったタグ（要素や属性）を使ったり、ルールに反したHTML構造になる可能性が高まります。
そうなれば、クローラーが理解しづらかったり、レイアウトが崩れてユーザビリティの低下に繋がりやすいです。
結果、コンテンツの品質が下がってGoogleに評価されづらくなるというわけです。
こうした悪い状況を回避する為に、HTML Living Standardの基礎を把握して、適切にサイト構築しましょう。
よくある質問
Q.HTML Living Standardとは何ですか？
A.WHATWGという組織(Apple・Mozilla・Operaの開発者により設立)が策定するHTMLの標準仕様です。HTML5の廃止に伴い、現在のHTML標準仕様となっています。
Q.HTML5は廃止されたのですか？
A.はい。W3CのHTML5は2021年に廃止され、現在はWHATWGのHTML Living Standardに一本化されています。日々更新され続ける「生きた標準」であることが特徴です。
Q.HTML Living StandardとHTML5の違いは何ですか？
A.策定団体(WHATWG)と更新方式(バージョンを持たず継続更新)が主な違いです。要素・属性にも追加・変更・廃止があるため、廃止された書き方を使い続けないよう注意が必要です。
この記事の監修者
南保 生明 なんぽ たかあき
株式会社ディーボ SEO事業部 営業統括マネージャー。2006年入社、WEBマーケティング全般の提案・コンサルティングに従事。コンテンツマーケティングツール「キーワードファインダー」を累計7,000ユーザー以上に成長させ、SEOセミナー講師も務める。
タグの実装、抜け漏れなくできていますか？
タグの実装、抜け漏れなくできていますか？
個別の対策を積み上げても、抜け漏れがあると効果は半減します。現場で使えるSEOチェックリストを無料配布中です。
検索順位を上げたり、検索流入を増やすにはSEOが重要！
