はじめに
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=""