HTML living standardが採用された理由とは？HTML5との違いについても紹介！
あなたは、HTMLに仕様があることをご存知でしょうか？
WHATWGという機関が、HTMLの仕様を作成しているのです。
iPhoneはWindowsのように、HTMLに関してもバージョンのアップデートが行われています。
2021年から「HTML5」という仕様が廃止され、「HTML Living Standard」という仕様が採用されるようになりました。
Webに関わっていない人たちからすると、微々たる差かもしれません。
しかし、開発者からすると、非常に大きな違いであると言えるでしょう。
ここでは、新たに採用された「HTML Living Standard」とはどのようなものなのか、採用された理由、追加や変更があった詳細事項について解説していきます。
そもそもHTML Living Standardとは？
まず、「HTML Living Standard」とはどのようなものなのかが気になると思います。
「HTML Living Standard」とは、WHATWGという機関が策定しているHTMLの仕様です。
そして2021年1月から、正式にHTMLの標準仕様として採用されることになったのです。
それまでは「HTML5」が標準でした。
そもそもHTMLとは
そもそも、IT業界に詳しくない人、Web業界初心者の人からしたら「HTMLとは何？」という感じでしょう。
まずは、HTMLについて説明していきましょう。
端的に言うと、ホームページを制作する際に、使用する書き方のルールのことです。
野球をするときも、サッカーをするときもルールがあるはずです。
同じように、ホームページを作るときにもルールがあるのです。
難しい言葉で言うと、マークアップ言語と言います。
マークアップ言語というのは、マークをつけておくことでその構造を表す方法です。
いわゆる書き方のルールということです。
「ホームページの背景の色を変えたい」「文字を太字にしたい」といった制作者の意向を表現する方法として、マークアップ言語を使用します。
なぜなら、コンピューターに「ホームページの背景の色を変えたい」「文字を太字にしたい」と直接語りかけても、期待に応えてくれることはないからです。
つまり、コンピューターに人間の希望を伝える方法として、コンピューター用の言語で自分の意向を伝えなければならないのです。
そのようなときに使用するのがマークアップ言語ということです。
マークアップ言語が、ホームページの制作に必要なことは理解していただけたかと思います。
では、なぜ「マークアップ言語」と呼ばずに、「HTML」なのでしょうか。
「HTML」は「ハイパーテキスト・マークアップ・ランゲージ」の略称です。
つまり、「マークアップ言語」の先頭に「ハイパーテキスト」が付いただけなのです。
「ハイパーテキスト」とは、コンピューターを利用して複数の文書、テキストをお互いに結び付けて、関連付けするという仕組みのことを言います。
つまり、おおざっぱに言うと、「ハイパーテキスト」＝「ホームページ」というわけです。
よって、「HTML」をわかりやすく言うと、「ホームページを自分の希望通りに修正するために、印を付けることで反映させるための書き方のルール」ということになります。
HTMLの歴史
では、いつごろHTMLは生まれたのでしょうか。
まず、元々HTMLは「SGML」というものでした。
「SGML」とは、「スタンダード・ジェネラライズド・マークアップ・ランゲージ」のことで「標準汎用記述言語」と呼ばれていました。
しかし、「SGML」は使用するのが難しく、「もっと簡単に使用できる言語がいい」という世間の声が強まってきたのです。
そして、HTMLが誕生しました。
XMLとHTMLは何が違う？
マークアップ言語を勉強していくうちに、「HTML」だけではなく、「XML」や「XHTML」というものもあることがわかってくるでしょう。
基本的に、HTMLとは「コンピューターと人間が意思疎通を図る際に使用する言語で、主に人間サイドに寄り添って、人間がわかりやすいように表示されたもの」です。
反対に、XMLとは「コンピューターと人間が意思疎通を図る際に使用する言語で、主にコンピューターサイドに寄り添って、コンピューターがわかりやすいように表示されたもの」です。
よって、非常に似たようなマークアップ言語かと思った方も多いかと思いますが、実は正反対の目的で存在しているのです。
また、XMLはプログラムの仕様となっているので、HTMLと比較したときに非常に拡張性が高いものとなっています。
たとえば、データを並び替えたいときや、項目の重要度を認識させたりする作業においては、非常に重宝されるマークアップ言語ということになります。
HTML5からHTML Living Standardへ変わった理由
さて、ではなぜ以前まで採用されていた「HTML5」から「HTML Living Standard」に仕様が変更されたのでしょうか？
最初にホームページやWebに関するルールを決定する組織として、W3Cが設立されました。
しかし、内部の分裂などがあり、WHATWGという機関が設立されます。
そして、W3Cが推奨する「HTML5」という仕様とWHATWGという機関が推奨する「HTML Living Standard」という仕様が対立することになります。
2018年ごろにGoogle Chromeなどの主要なブラウザで、「HTML Living Standard」に合わせる動きが出てきました。
また、翌年にはMicrosoft EdgeもChromeの方針に合わせるということになり、WHATWGの「HTML Living Standard」が標準化される方向に進んでいきます。
そして、正式に2021年1月末に「HTML5」は廃止され、「HTML Living Standard」がHTMLの仕様として採用されることになったのです。
HTML5とHTML Living standardの違いとは？
実際にHTMLを仕様する開発者としては、「HTML5」と「HTML Living Standard」の違いは何か、どちらが使いやすいのかということが気になるでしょう。
しかし、実のところ、上記の2つに大きな違いはありません。
下記に、新たに追加、変更、廃止された「要素」と「属性」を記載したので、一度確認していただければと思います。
新たに定義されたもの
「HTML5」ではなかったですが、「HTML Living standard」で新たに定義されることになったものを紹介します。
| 要素 | 機能・役割 |
| hgroup | 見出しに対してグループ化を行う |
| slot | スロットをする |
新たに変更されたもの
「HTML Living standard」から新しく変更されたものを紹介します。
「HTML5」とは異なるポイントが多いので、ご注意くださいませ。
| 要素 | 機能・役割 |
| <cite> | 作品のタイトル以外を含むことは不可。 |
| <meta> | itemprop属性を指定したとき、bodyの要素の中に配置をすることができる。 |
| <link> | rel属性の値がbody-okという値だけの場合や、itemprop属性が指定されている場合は、bodyの要素の中に配置することができる。 |
| <style> | body要素の中には配置することができない。 |
新たに廃止されたもの
「HTML Living standard」で新しく廃止することが決まったものを紹介します。
| 要素 | 機能・役割 |
| <rb> / <rtc> | 操作メニューにある項目を表す |
新たに追加された属性
「HTML Living standard」で新たに追加されることになったものを紹介します。
| 要素 | 属性 | 機能・役割 |
| <a> | ping=”” | pingの送信先を指定することができる。 |
| <area> | ping=”” | pingの送信先を指定することができる。 |
| <body> | onmessageerror=”” | 文書がAPIによって解読されないようなメッセージを受信した際に作動するスクリプト。 |
| <form> | rel=”” | 今見ている文書を基準とした、リンク先との関係。 |
| <img> | decording=”” | 画像のデコード方式を指定する。 |
| <img> | allow=”” | 利用できるブラウザの機能を指定する。 |
| <link> | as=”” | 先に読み込みする外部のリソースの利用先を指定する。 |
| <link> | color=”” | Safariのページピンアイコンの色を指定する。 |
| <link> | disabled=”” | 外部のスタイルシートへのリンクを無効にする。 |
| <link> | imagesizes=”” | 画像を表示するサイズ。 |
| <link> | imagesrcset=”” | 使用できる画像ファイルのセット。 |
| <link> | integrity=”” | 外部のリソースの整合性を確認する。 |
| <script> | integrity=”” | 外部のスクリプトの整合性を確認する。 |
| <script> | nomodule=”” | モジュールのスクリプトへの対応環境で、スクリプトを無効にする。 |
| <script> | referrerpolicy=”” | リファラーポリシーを指定する。 |
| <video> | playsinline=”” | インラインで再生する。 |
新たに追加されたグローバル属性
グローバル属性とは、どんなものでしょうか。
端的に言えば、どの要素にも指定をすることができる属性のことを言います。
「HTML Living standard」で新たに追加されたグローバル属性を紹介していきましょう。
| 属性 | 役割・機能 |
| autocapitalize=”” | 先頭の文字を大文字にするかどうかを指定する。 |
| enterkeyhint=”” | キーボードのEnterキーのアイコンを指定する。 |
| is=”” | カスタム要素に関連付けることができる。 |
| itemid=”” | 要素の内容のマイクロデータの識別子を示す。 |
| itemprop=”” | 要素の内容のマイクロデータのプロパティの名前を指定する。 |
| itemref=”” | 要素の外側にあるマイクロデータを関連付けることができる。 |
| itemscope=”” | 要素の内容のマイクロデータが含有されていることを示す。 |
| itemtype=”” | 要素の内容のマイクロデータのプロパティの名前の定義を示す。 |
| slot=”” | スロットと関連付けることができる。 |
新たに変更されたグローバル属性
「HTML Living standard」で新しく変更されたグローバル属性を紹介していきましょう。。
| 属性 | 機能・役割 |
| autofocus=”” | 自動フォーカスができるかどうかを指定する。 |
| inputmode=”” | 入力する際のキーボードの種類を指定することができる。 |
| nonce=”” | Content Security Policyのワンタイムトークンを指定する。 |
まとめ
いかがでしたか？
今回は、「HTML Living Standard」について解説してきました。
専門用語が多く、Webに詳しくない方にとっては「HTMLって難しいな」と思わせてしまったかもしれません。
しかし、このようなHTMLの専門用語を理解することで、今後Webを使った仕事をしていくことも可能です。
今やどの企業でもホームページを持っています。
オウンドメディアやSNSを運用して集客している企業もあります。
つまり、これからの時代ホームページを作成するスキルは必要不可欠だと言えるでしょう。
もしあなたが独立して将来的にホームページを作成することになったときに、今回の知識を持っていればHTMLを駆使して自社のホームページを自分で制作できるかもしれません。