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を駆使して自社のホームページを自分で制作できるかもしれません。

バナー

Webサイトのお悩み、ありませんか?

サイトを作ったけどアクセスが集まらない

SEO対策と聞いたけど何をすればいいの?

集客をしたいけど、社内にリソースがない

   
  • URLをコピーしました!

この記事の監修者

クリニックや転職など競合性の高いSEOで上位表示を獲得実績が多数。
インハウスSEO(内製化支援)を法人に展開しており、クリニックや人材業界などジャンルを横断してクライアントへSEOの組織構築を行っています。

無料相談会も開催中
https://rakuraku-edit.co.jp/seo-schedule

クリックできる目次