【2022年最新】HTML Living Standardでどう変わった？HTML5との違いや経緯をわかりやすく解説
ヘッドレスCMSの選定にお悩みの方へ。
自社に必要なヘッドレスCMSがわかる下記資料もぜひご確認ください。
独自選定の代表的なヘッドレスCMSの特徴をもとに、誰でもヘッドレスCMSの選定ができるポイントを押さえた資料を作成しました。
はじめに
Webディレクターの安藤です。
弊社はオフショア開発やラボ型開発が強みですが、HTMLコーディングやWordPressなどのCMSを用いたサイト制作も多くご依頼いただきます。
HTMLも日々進化しており、2022年9月現在の標準仕様は「Living Standard」というものになります。
「HTML5じゃないの？」と思った方も多いのではないでしょうか。
実は、HTML5は2021年1月に廃止しており、HTML Living Standardが正式な標準仕様として勧告されているのです。
適切なマークアップをしていれば、クローラーは正しくHTMLで記載されたコンテンツを理解でき、コンテンツの品質が保てますが、そうでないとSEOへの影響が懸念されます。
そこで今回はHTML5とHTML Living Standardの違いについて解説していこうと思います。
そもそもHTMLとは
HTMLとはHyper Text Markup Language（ハイパー・テキスト・マークアップ・ランゲージ）の略称で、Webページの内容を記述するための基本的な言語です。クローラーやブラウザは、HTMLに記載された内容によって文章構造を理解します。
HTMLの標準仕様を決めている機関
そのHTMLの標準仕様は、大きく2つの国際的な機関によって決められています。
一つは、「World Wide Web Consortium（ワールド・ワイド・ウェブ・コンソーシアム）」、通称「W3C」です。Webを考案し、Webに関わる様々なシステムを開発・実装したティム・バーナーズ＝リー氏によって創設された機関です。
しかし、W3Cが2000年代のはじめに、XHTMLへの移行という理想を追い求め、Web開発者や利用者の要望に応えてくれないという不満から、Apple・Mozilla・Operaに所属するメンバーによって2004年に立ち上げられたのが「WHATWG（ワットダブリュージー）」という機関です。
両機関の協力で生まれたHTML5
その後、WHATWGからの働き掛けもあってか、W3Cのティム・バーナーズ=リー氏は、XHMLへの移行には無理があったと表明。両機関は共同作業を開始して、2008年1月にHTML5の草案が公開されました。
ところが、また再分裂が起こります。
WHATWGのHTML Living Standard、W3CのHTML5という、HTMLの仕様が2種類存在する時期が2010年代まで続いていました。
主要なモダンブラウザはWHATWGのLiving Standardのほうの仕様を採用していましたが、唯一W3C派だったMicrosoft Edgeも、2018年12月にChromeと同じ仕様に移行することを発表しました。
統合への動き
そこで2019年に、この混乱の解決に向けた動きが起こります。
WHATWGのHTML Living StandardをHTMLとDOMの標準仕様にすることとなり、2021年1月にW3CがHTML Living Standardを正式な勧告として発表。HTML5は廃止されました。
ヘッドレスCMSの選定にお悩みの方へ。
自社に必要なヘッドレスCMSがわかる下記資料もぜひご確認ください。
独自選定の代表的なヘッドレスCMSの特徴をもとに、誰でもヘッドレスCMSの選定ができるポイントを押さえた資料を作成しました。
HTML5とHTML Living Standardの違い
HTMLを書く上では、基本的な大きな違いはありません。
しかし一部、用途の変更・追加・廃止となったタグ要素や属性があります。
追加された要素
| タグ要素 | 用途 |
|---|---|
| <hgroup> | 見出しのグループ化 |
| <slot> | スロット |
変更された要素
| タグ要素 | 用途 |
|---|---|
| <cite> | 創作物のタイトル以外を含むことはできず、作者名を含むことはできなくなりました。 |
| <link> | “rel”属性の値が“body-ok”な値のみの際、または“itemprop”属性が指定されている際、“body”の要素内に配置することができます。 |
| <meta> | “itemprop”属性を指定した場合は“body”要素内に配置できます。 |
| <style> | “body”要素内には配置できません。 |
廃止された要素
| タグ要素 | 用途 |
|---|---|
| <rb> | 操作メニューの項目を表します。 |
| <rtc> | 操作メニューの項目を表します。 |
追加された属性
| カテゴリ | 属性 |
|---|---|
| 属性 | <a> ping=”” <area> ping=”” <body> onmessageerror=”” <form> rel=”” <iframe> allow=”” <img> decoding=””、loading=”” <link> as=””、color=””、disabled=””、imagesizes=””、imagesrcset=””、integrity=”” <script> integrity=””、nomodule=””、referrerpolicy=”” <video> playsinline=”” <object> usemap=”” |
| グローバル属性 | autocapitalize=”” enterkeyhint=”” is=”” itemid=”” itemprop=”” itemref=”” itemscope=”” itemtype=”” slot=”” autofocus=”” inputmode=”” nonce=”” |
| イベントハンドラ属性 | onformdata=”” onmessageerror=”” onsecuritypolicyviolation=”” onslotchange=”” onwebkitanimationend=”” onwebkitanimationinteration=”” onwebkitanimationstart=”” onwebkittransitionend=”” |
変更された属性
| カテゴリ | 属性 |
|---|---|
| 属性 | <a> rel=”” <area> rel=”” <iframe> sandbox=”” <link> rel=”” <meta> charset=”” http-equiv=”” name=”” |
| グローバル属性 | accesskey=”” |
廃止された属性
| カテゴリ | 属性 |
|---|---|
| 属性 | <a> rev=”” <area> hreflang=””、type=”” <iframe> allowpaymentrequest=”” <img> longdesc=”” <link> rev=”” <object> typemustmatch=”” <script> charset=”” <style> type=”” <table> border=”” |
| イベントハンドラ属性 | ondragexit=”” onloadend=”” onshow=”” |
おわりに
いかがでしたでしょうか。
せっかくの良質なコンテンツも、HTMLの記述が古く、品質を損なってしまう可能性もあります。
常に最新の情報には意識を傾け、知識をアップデートし続けることが重要ですね。
とはいえ、日々の開発で忙しい中で、サービスサイト・オウンドメディアやコーポレートページのリニューアルや改善を進めることは難しいと思います。
当社では、あなたの会社のサイトの構築から運用保守までをトータルサポートし続ける、ラボ型開発サービスをご用意しています。
ラボ型開発サービスでは、日本のディレクションチームとベトナムのエンジニアチームが一丸となり、最新の仕様や将来性を考慮しつつ、お客様の運用にあったwebサイト構築やシステム開発のご提案をさせていただいております。
ぜひお気軽にお問い合わせください。
ヘッドレスCMSの選定にお悩みの方へ。
自社に必要なヘッドレスCMSがわかる下記資料もぜひご確認ください。
独自選定の代表的なヘッドレスCMSの特徴をもとに、誰でもヘッドレスCMSの選定ができるポイントを押さえた資料を作成しました。
学生時代にWebサイトを自作したことがきっかけでWebの世界に。制作会社でデザイン、WordPressテーマ開発の実務を経て、テクニカル・ディレクターとして大規模サイト構築のディレクションを経験。2021年からWakka Inc.の日本拠点でWebディレクターとして参画。最近はブロックエディタになったWordPressをもう一度、勉強しています。
