MENU

HTML Living Standardって何？HTML5との違いを解説

HTML
2022-06-05
html living standard イメージ画像

[PR記事] この記事で紹介している内容には広告を含んでいます。

HTML5ってすでに廃止されているって知っていましたか？

「えっ、そうなの？」となった人もいるかもしれません。

HTMLについて説明した書籍では、「HTML5」と表記されていることが多いからです。

といっても、大幅な変更はありません。

HTML5との主な違いは次の2つです。

  • 呼び方が「HTML Living Standard」に変わりました。
  • 仕様を管理する団体が変わりました。

HTML Living Standardについての概要と、HTML5との違いをこの記事の中で確認していきましょう。

山田ねこ

現役システムエンジニアの山田ねこが解説します！

目次

HTML Living Standardとは

HTML Living Standardは、WHATWGという団体によって標準化が進められているHTMLの仕様です。

WHATWG(ワットダブルジー)はApple、Mozilla、Operaの開発者たちによって設立されました。

2017年末にMicrosoftも参加しています。

元々HTML5はW3Cという団体が標準化を進めていました。

HTML5の標準化をWHATWGが引き継ぎ、名称が変わったものが今回ご紹介するHTML Living Standardです。

略称はHTML LSです。

HTML Living Standardの特徴

HTML Living Standardには、2つの特徴があります。

  1. バージョン番号という概念がない
  2. 更新頻度が高い

順番に説明していきます。

バージョン番号という概念がない

HTML5には、HTML5.1、HTML5.2というバージョン番号が振られていました。

HTML Living Standardにはバージョン番号という概念はありません。

更新頻度が高い

HTML5は更新頻度が年単位でした。

作業草稿(WD)、勧告候補(CR)、勧告(REC)と段階を踏んで仕様を作成していっていました。

HTML Living StandardはHTML5とは違い、日々少しずつ更新されています。

HTML Living StandardとHTML5の違い

HTML Living StandardとHTML5の違いとして、どの要素・属性が追加・変更・削除されたのかを見ていきましょう。

前提：要素と属性について

「そもそもHTMLの要素と属性って何？」という人向けに、簡単に説明しますね。

HTMLの要素とは、見出しやリンクなど、HTMLの各部品のことです。

開始タグから終了タグまでともいえます。

属性とは、要素に何かしらの情報を設定するものです。

例えばリンクの要素(aタグ)には、hrefという要素の名前で、リンク先を指定します。

html 要素と属性とは

属性はさらに、属性名と属性値に分けられます。

html 属性名と属性値
要素内容
<hgroup>セクションの見出しをグループ化します
<slot>スロットを表します

<hgroup>

<hgroup>はセクションの見出しをグループ化するために使います。

活用場面は、小見出しや、タイトルの下にキャッチフレーズがある場合などです。

コーディングの例

<hgroup>
  <h1>タイトル</h1>
  <h2>キャッチコピー</h2>
</hgroup>

参考：HTML Standard 日本語訳(hgroup要素)

<slot>

<slot>はスロットを表すために使います。

参考：HTML Standard 日本語訳(slot要素)

スロットとは、HTMLの要素を分割してJavaScriptなどで取り込む際の取り込み先 を表します。

このような構成の仕方をシャドウDOMといいます。

参考：シャドウ DOM の使用 – ウェブコンポーネント | MDN

変更された要素

HTML Living Standardで使い方が変更されたのは次の2要素です。

要素変更内容
<cite>作品名のみ含めることになりました
<style><style>タグを<body>の中に書けなくなりました

<cite>

<cite>タグは引用元を表します。

HTML Living Standardから人名を含めず、作品名だけ含めることになりました。

これはNG

<blockquote>
  <p>　吾輩は猫である。名前はまだ無い。</p>
  <p>
    　どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
  </p>
</blockquote>
<cite>夏目漱石(1906)『吾輩は猫である』</cite>

これはOK

<blockquote>
  <p>　吾輩は猫である。名前はまだ無い。</p>
  <p>
    　どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
  </p>
</blockquote>
夏目漱石(1906)<cite>『吾輩は猫である』</cite>

<style>

<style>タグを<body>タグの中に記載できなくなりました。

これはNG

<body>
  <style>
    .test {
      color: red;
    }
  </style>
　...
</body>

削除された要素

<rb>と<rtc>の2つの要素はHTML Living Standardからは削除されました。

要素内容
<rb>ルビのベース
<rtc>ルビ文字列コンテナー

追加された属性

次に、追加された属性と、それぞれどの要素に追加されたのかを見ていきます。

要素属性内容
<a>pingpingの送信先を指定します
<area>pingpingの送信先を指定します
<body>onmessageerrorAPIからエラーメッセージを受信した際に実行するアクションを指定します
<form>relformが作成するリンクの種類を制御します
<iframe>allowiframeに埋め込んだコンテンツに許可する権限のリストを指定します
<iframe>loadingiframeに埋め込んだコンテンツの読み込みタイミングを指定します
<img>decoding画像のデコード方式を指定します
<img>loading画像の読み込みタイミングを指定します
<link>asプリロードするコンテンツのタイプを指定します
<link>colorrel=”mask-icon”のときに、アイコンの色を指定します
<link>disabledスタイルシートの読み込みを無効化します
<link>imageSizesレスポンシブイメージを先読みするのに使います
<link>imagesrcsetレスポンシブイメージを先読みするのに使います
<link>integrity外部リソースの整合性を検証します
<script>referrerpolicy外部スクリプトへのアクセス時のリファラーポリシーを設定します
<script>integrity外部スクリプトの整合性を検証します
<video>playsinlineビデオをインラインで再生します

ping・decoding・loadingについて補足説明します。

<a ping=””> <area ping=””>

pingには、リンクがクリックされた際に、hrefとは別にブラウザが呼び出すURLを指定します。

このとき、ブラウザがURLを呼び出す動作をpingといいます。

ユーザーの行動をトラッキングするために使用されます。

<a href="https://sample.com" ping="https://xxxx.ping.com">pingのサンプル</a>

参考：HTML Standard 日本語訳(aおよびarea要素によって作成されるリンク ＞ ping)

<img decoding=””>

decoding属性は画像のデコード方式のヒントを指定します。

画像のデコードとは、画像の圧縮を元に戻すことです。

decoding属性には下記の3つのうち、いずれかの値が指定可能です。

キーワード内容
sync他のコンテンツと同期的にデコードします
async他のコンテンツと非同期的にデコードします
autoデコード方式をブラウザにまかせます

参考：HTML Standard 日本語訳(Decoding images)

<script loading=””> <img loading=””>

loadingには、読み込みのタイミングを指定します。

loadingを指定することで、iframeでの埋込コンテンツ、画像の遅延読み込みができます。

loadingには、次の2つの値が指定可能です。

キーワード内容
lazy遅延ロードを行う
eager即時読み込みを行う

参考：HTML Standard 日本語訳(遅延読み込み属性)

変更された属性

次の属性は設定できる値が変更されました。

要素属性内容
<a>rel“opener”を指定できるようになりました
<area>rel“opener”を指定できるようになりました
<iframe>sandbox下記が指定可能になりました。・”allow-downloads”・”allow-modals”・”allow-orientation-lock”・”allow-popups-to-escape-sandbox”・”allow-top-navigation-by-user-activation”・”allow-top-navigation-to-custom-protocols”
<link>rel下記が指定可能になりました。・”canonical”・”dns-prefetch”・”modulepreload”・”pinback”・”preconnect”・”preload”・”prerender”
<meta>charset常に”UTF-8″を指定することになりました
<meta>http-equiv“x-ua-compatible”・”content-security-policy”を指定できるようになりました
<meta>name“theme-color”・”color-sheme”を指定できるようになりました

<a rel=”opener”> <area rel=”opener”>

target=”_blank”で開いたリンク先からリンク元のウィンドウへのアクセスを許可します。

参考：HTML Standard 日本語訳(リンクタイプ)

セキュリティ的には外部リンクには使用しないほうが良いように思います。

内部のリンクを別ウィンドウで開く場合には使い所がありそうです。

<iframe sandbox=””>

<iframe>要素のsandbox属性には、次の値が追加で設定できるようになりました。

属性値内容
allow-downloads埋め込んだコンテンツがダウンロードすることを許可します
allow-modals埋め込んだコンテンツがモーダルダイアログを開くのを許可します
allow-orientation-lock埋め込んだコンテンツが画面の動きを固定するのを許可します
allow-popups-to-escape-sandbox埋め込んだコンテンツがサンドボックス化しないポップアップを表示するのを許可します
allow-top-navigation-by-user-activationユーザーによる操作でトップレベルのコンテンツが操作されることを許可します
allow-top-navigation-to-custom-protocols埋め込んだコンテンツが外部プロトコルを開くことを許可します

参考：HTML Standard 日本語訳(iframe要素 ＞ sandbox)

<link rel=””>

<link>要素のrel属性には、次の値が追加で設定できるようになりました。

属性値内容
canonical現在のページの優先URLを指定していることを伝えます
dns-prefetch外部リソースの生成元のDNS解決を事前に実行するように指示します
modulepreload事前にモジュールスクリプトを読み込んでモジュールマップに読み込むよう指示します
pinbackページにpingbackサーバーのアドレスを与えていることを伝えます
preconnect外部リソースを事前に取得するよう指示します
preload外部リソースを事前に取得してキャッシュするよう指示します
prerender外部リソースを事前に取得してレンダリングするよう指示します

参考：HTML Standard 日本語訳(リンクタイプ)

<meta http-equiv=””>

<meta>要素のhttp-equiv属性には、次の値が追加で設定できるようになりました。

属性値内容
x-ua-compatibleInternet Explorerに指定した互換モードで表示するように指示します
content-security-policyコンテンツセキュリティポリシーを指定します

http-equiv="x-ua-compatible"は、例えば次のように指定します。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Internet Explorerでページを表示した場合、最新環境で表示するように指示します。

参考：HTML Standard 日本語訳(プラグマディレクティブ ＞ X-UA-Compatible状態)

<meta name=””>

<meta>要素のname属性には、次の値が追加で設定できるようになりました。

属性値内容
theme-colorテーマカラーを指定します
color-shemeカラースキーム(light・dark)を指定します

参考

削除された属性

次の属性は削除されました。

要素属性
<a>rev
<area>hreflang
<area>type
<html>manifest
<iframe>allowpaymentrequest
<img>longdesc
<link>rev
<object>typemustmatch
<object>usemap
<script>charset
<style>type
<table>border

HTML Living Standardで使えるエスケープ文字の一覧を次の記事にまとめています。

こちらも合わせて確認してください。

あわせて読みたい
HTMLエスケープ文字とは？カテゴリーごとの一覧[HTML Living Standard準拠] HTMLのエスケープ文字では、特別な意味を持つ文字や特殊な記号を表現できます。このページでは、主なエスケープ文字をカテゴリーごとにまとめて紹介しています。

HTML Living Standardに対応しているブラウザ

各ブラウザがHTML Living Standardに対応しているかはCan I use… Support tables for HTML5, CSS3, etcで調べることができます。

HTMLブラウザ対応表：hgroup

例えば、hgroupの対応状況は上の画像のとおりです。

HTML Living Standardで追加・変更された要素・属性を使用する場合は、使用する前に各ブラウザの対応状況を調べておくのが安心です。

HTML Living Standardに対応している書籍

『これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本』は、HTML Living Standardに準拠していることが明記されています。

内容も実際にWEBサイトを作りながらHTMLについて学ぶことができるので、身につきやすくなっています。

HTMLの入門書としておすすめです。

HTML5の知識は使えないの？

決してそんなことはありません。

HTML5の基本はそのまま使えます。

ただ、HTML Living Standardで廃止となった要素・属性は非推奨なので、極力使わないようにしましょう。

HTML5プロフェッショナル認定試験

HTMLに関する資格である「HTML5プロフェッショナル認定試験」は、出題範囲・認定の価値に影響がないことを公式サイト内で明記しています。

2021年からHTML5は「HTML Standard」と呼称が変わりました。HTML Living Standardと呼ばれることもあります。しかし、ご安心を。これまで通り、HTML StandardがWebを支える標準として進化を続けます。またHTML5プロフェッショナル認定試験についても、現状、出題範囲に影響を与える部分はほとんどなく、認定の価値に変わりはありません。今後もWebエンジニアのスキル認定として有効です。

引用元：HTML5はHTML Standardへ呼称変更　～ HTML5プロフェッショナル認定試験は今後も有効 ～ ｜HTML5道場｜Web資格なら「HTML5プロフェッショナル認定試験」公式サイト

HTML5プロフェッショナル認定試験をすでに取得済みの人、今勉強中の人は安心してその知識を活用してください。

HTML
目次