HTML Living Standard

てっちゃん
てっちゃん

はじめに

W3Cが勧告するHTML5が去年(2021年1月28日)廃止されました。
あまり考えたくありませんね~
廃止されたからといって、XHTMLとHTMLのようにコードの書き方が変わるということはないのでそこまで不安になる必要はありません!

では、新しいHTMLはなんでしょうか。
2004年に設立されたWHATWG(ワットダブリュージー)(Web Hypertext Application Technology Working Group)が
新たにHTML Living Standard(HTML LS)を勧告。
このHTML LSはHTML5がベースとなっています。
細かい部分で廃止されたタグや追加されたタグ、変更されたタグはありますが、大きく変更はありません。
ですので、新たにたくさん覚える必要はなく、変更点だけを頭に入れるだけで大丈夫(な、はず)。

ちなみに、HTMLの開始タグはこれまで通り<!DOCTYPE html>でOKです
(DOCTYPEがこれまでと同じということは、HTML5で書いてるつもりでもHTML LSとしてブラウザに認識されてしまうってことですよね^^;)

WHATWGのHTML LSはこれまでW3Cが作り上げてきたHTMLとは異なり、バージョン管理されず、日々変更されていきます。
よって、細かな変更点は都度確認する必要があり、制作者にとっては気が付いたら「変更されてた!」なんてことが起こるかも...

(WHATWG)本家サイトURL
https://html.spec.whatwg.org/multipage/

和訳してくれているサイトもあるので、下記URLをチェックしてみてください
https://momdo.github.io/html/
https://triple-underscore.github.io/index.html

HTML LSに対応しているWebブラウザ

  • Google Chrome
  • Microsoft Edge
  • Mozilla Firefox
  • Apple Safari
  • Opera

※Microsoft IEについてはW3C準拠のままです

追加された要素

hgroup
見出しのグループ化
slot
Shadow DOM内におけるデータの挿入口

変更された要素

cite
創作物のタイトルのみ入れることが可能。作者は含むことができません。
link
rel属性の値がbody-okな値のみである場合、
もしくはitemprop属性が指定されている場合はbody要素内に配置可能です。
meta
itemprop属性を指定した場合は、body要素内に配置可能です。
style
body要素内に配置できません。

廃止された要素

rb、rtc

追加になった属性

<body onmessageerror="">
文書がAPIから解読できないメッセージを受信したときに実行する
<a ping="">
pingの送信先を指定
<area ping="">
pingの送信先を指定
<form rel="">
現在の文書から見たリンク先との関係
<iframe allow="">
利用できるデバイスやブラウザの機能、APIの有効化と無効化を指定
( "*" / "self" / "src" / "none" )
( ( https://...URL ) / fullscreen / payment / geolocation / camera / microphone )
<img decoding="">
画像のデコード方式を指定
( sync / async / auto )
<img loading="">
画像の読み込みのタイミングを指定
( lazy / eager )
<link as="">
rel="preload"またはrel="prefetch"を設定した場合に限り使用可能
先読みされるコンテンツのタイプをブラウザに指示
( audio / audioworklet / document / embed / font / frame / iframe / image / manifest / object / paintworklet / report / script / serviceworker / sharedworker / style / track / video / worker / xslt / fetch )
<link color="">
Safariのページピンアイコンの色を指定
<link disabled="">
外部スタイルシートへのリンクを無効化
<link imagesizes="">
表示する画像サイズ
<link imagesrcset="">
使用可能な画像ファイルのセット
<link integrity="">
外部リソースの整合性を確認
<meta media="">
メタデータが対象とするメディア
<script integrity="">
外部スクリプトの整合性を確認
<script nomodule="">
モジュールスクリプトに対応する環境でスクリプトを無効化
<script referrerpolicy="">
リファラーポリシーを指定
( no-referrer / no-referrer-when-downgrade / same-origin / origin / strict-origin / origin-when-cross-origin / strict-origin-when-cross-origin / unsafe-url / (空白) )
<video playsinline="">
インラインで再生
<object usemap="#">
クライアントサイドイメージマップとの関連付け

グローバル属性

autocapitalize
先頭の文字を大文字化するかを指定(ソフトウェアキーボード向け)
( off / none / on / sentences / words / characters )
enterkeyhint
ソフトウェアキーボードの[Enter]キーのアイコンの種類を指定
( enter / done / go / next / previous / search / send )
is
カスタム要素と関連付ける
itemid
要素の内容のマイクロデータのグローバルな識別子を示す
itemprop
要素の内容のマイクロデータのプロパティ名を指定
itemref
要素の外にあるマイクロデータと関連付ける
itemscope
要素の内容にマイクロデータが含まれることを示す
itemtype
要素の内容のマイクロデータのプロパティ名の定義を示す
slot
スロットと関連付ける

イベントハンドラ属性

onformdata
フォームのエントリリストを生成した時に実行されるスクリプト
onmessageerror
文書がAPIから解読できないメッセージを受信したときに実行するスクリプト
onsecuritypolicyviolation
コンテンツセキュリティポリシーに違反した時に実行されるスクリプト
onslotchange
スロットが含まれるノードが変更された時に実行されるスクリプト
onwebkitanimationend
CSSアニメーションが終了した時に実行されるスクリプト
onwebkitanimationinteration
CSSアニメーションが繰り返された時に実行されるスクリプト
onwebkitanimationstart
CSSアニメーションが開始した時に実行されるスクリプト
onwebkittransitionend
CSSトランジションが終了した時に実行されるスクリプト

変更された属性

<a rel="">
属性値として"opener"を指定可能
<area rel="">
属性値として"opener"を指定可能
<iframe sandbox="">
属性値として"allow-modals"、"allow-orientation-lock"、"allow-popups-to-escape-sandbox"、"allow-top-navigation-by-user-activation"、"allow-downloads"を指定可能
<link rel="">
属性値として"canonical"、"dns-prefetch"、"modulepreload"、"pingback"、"preconnect"、"preload"、"prerender"を指定可能
<meta charset="">
属性値は"utf-8(UTF-8)"であるべきとされています
<meta http-equiv="">
属性値として"x-ua-compatible"、"content-security-policy"を指定可能
<meta name="">
属性値として"theme-color"、"color-scheme"を指定可能
accesskey=""
属性値として複数の値を指定可能
inputmode=""
入力する時のソフトウェアキーボードの種類を指定可能
nonce=""
"Content Security Policy"のワンタイムトークンを指定可能

廃止された属性

<a rev="">
<area hreflang="">
<area type="">
<html manifest="">
<iframe allowpaymentrequest="">
<img longdesc="">
<link rev="">
<object typemustmatch="">
<script charset="">
<style type="">
<table border="">

ondragexit="" 、onloadend=""、onshow=""

関連記事