はじめに
恥ずかしながら、いつのまにかHTML5が廃止扱いになっていたことにここ最近まで気が付かずにいました。
半年も前の話なのに気が付かなかった人は私くらいしかいないかと思いますが、もし私以外に気が付かなかった人がいた場合のために簡単にですがまとめておきたいと思います。
HTML5と後継である(厳密には後継ではない) HTML Living Standardの違い
HTML5とHTML Living Standard (以下HTML LS) の関係性について話すと非常に長くなるので、今回はこの二つの違いに関してのみ触れます。
関係性に関しては、既にいくつか記事が存在しているのでそちらを参考にしてください。
更新頻度に関して
機能的な話ではなくて申し訳ないのですが、ここが一番の違いであるため真っ先に触れます。
W3Cの策定しているHTML5(以下HTML5)とは異なり、WHATWGの策定するHTML LSは頻繁な更新が行われています。
頻繁な更新と聞いて既存機能の削除を心配する人もいるかと思いますが、ユーザーに害を与える場合を除いて基本的に行わない方針であるため、そのあたりは気にしなくてよいかと思います。
HTML5のころは、更新頻度が年単位であったため更新に対してアンテナを張る必要性があまりありませんでしたが、HTML LSはW3Cが策定するHTML5とは異なり更新が頻繁にあるため、最新のものに積極的に追従していきたいと考えている場合は頻繁に更新をチェックする必要があります。
削除された内容
削除されたタグ、属性に関しては以下の通りです。
なお、以下のリストから漏れがある可能性も十分にあるので、マイナーな機能を利用している場合は一応調べた方がよいかもしれません。
- タグ
<rb><rtc>
- 属性
-
<a>- rev
-
<area>- hreflang
- type
-
<iframe>- allowpaymentrequest
-
<img>- longdesc
-
<link>- rev
-
<object>- typemustmatch
-
<script>- charset
-
<style>- type
-
<table>- border
-
追加された内容
<hgroup>
HTML5では削除されましたがHTML LSには存在している要素です。
文章セクション内の見出しのグループ付けを行います。
<slot>
shadow dom内にある値に対しshadow domの外側から要素を埋め込む際に使用される要素です。
<a>
ping属性
リンク先であるhrefに書かれた先とは違う場所にリクエストを送信できます。
<area>
ping属性
同上です。
<form>
ref属性
特に具体的には述べられていません。
一応、原文では以下のように記載されています。
The rel attribute on form elements controls what kinds of links the elements create. The attribute's value must be a unordered set of unique space-separated tokens.
翻訳サービスの力を借りると以下のように翻訳できます。
form要素のrel属性は、要素が作成するリンクの種類を制御します。属性の値は、スペースで区切られたユニークなトークンの順不同のセットでなければなりません。
フロント力というかHTML力がないのでこの辺は何を指しているのかわからないです。
<img>
deocode属性
対象画像の画像デコーディングヒントです。文面を読む限り私たちがデーコードするためのヒントではなく、ブラウザがデコードする(画像を描画する)ための指定かと思われます。
該当内容は以下の通りです。
| キーワード | 状態 | 説明 |
|---|---|---|
| sync | Sync | 同期してデコード |
| async | Async | 非同期にデコード |
| auto | Auto | 指定なし |
デフォルトは auto です。
loading属性
画像の読み込みタイミング操作に使用します。
| キーワード | 状態 | 説明 |
|---|---|---|
| lazy | Lazy | 条件を満たすまで取得を遅延する。 |
| eager | Eager | 直ちに取得する |
デフォルトは eager です。
<link>
as属性
rel属性でプレリロードを指定されている際、そのコンテンツのタイプを指定するための属性です。
color属性
rel属性で"mask-icon"が指定されている際に、サイトのアイコンの色をカスタマイズするために使用。
disabled属性
rel="stylesheet" の場合に、そのスタイルシートを読み込むか否かを決定します。trueの際に読み込みません。
trueが指定されているとき、JS等でfalseに変更されたタイミングで読み込みを実行します。
imagesizes属性
relでプレリロードが指定され、かつas="image"が指定されている際に指定する必要があります。
サイズなので負の値は許容されません。
imagesrcset属性
relでプレリロードが指定され、かつas="image"の際に使用するsourceset属性です。
integrity属性
読み込むリソースの改竄検証のための属性です。リソースのハッシュをbase64変換した値が入ります。
<script>
integrity属性
スクリプトの整合性検証のための属性です。
nomodule
ES2015モジュールに対応するブラウザで、このスクリプトを実行するか否かを示します。
つまり、古いブラウザーのための機能です。
referrerpolicy属性
スクリプトの読み込み時、もしくはスクリプトのリソース読み込み時に送信するリファラを示します。
デフォルトはno-referrer-when-downgradeです。
<video>
playsinline属性
動画を要素の再生領域内で再生するか否かを指定する属性です。
おわりに
以上です。おそらく抜け等もある気がしますし、結局は随時更新されるので詳しく知りたい方は公式のドキュメントを確認するべきかと思います。
個人的には、セキュリティ周りとか、今どきあると嬉しい機能とかが追加されている印象を受けるので、今までの更新に年単位掛かっていた昔のHTML5よりかはよさげな感じがします。今後の発展が楽しみです。