HTML Living Standardは、Web Hypertext Application Technology Working Group (WHATWG)が策定するHTMLの最新仕様です。
正式にHTMLの標準仕様として採用されましたが、正直そこまで意識したことがなかったので少し調べてみました。

HTML Living Standardの特徴

HTML Living Standardの特徴は、固定的なバージョン番号を持たず
また、Living Standardと言う名の通り、常に更新され続ける「生きた標準」であることです。
これにより、実際のブラウザの実装や開発者のニーズに基づいて更新されるため、現実のWeb開発の実態に即した柔軟性を持ち
継続的な改善が行われることで、Webの急速な進化に対応し最新の技術や要求を迅速に取り入れることができます。

なぜHTML Living Standardになったのか？

HTML Living Standardが採用された主な理由は以下の通りです

  • ブラウザベンダーの支持
    Google Chrome、Safari、Firefox、Operaなどの主要ブラウザがHTML Living Standardを採用し
    Microsoft EdgeもChromiumベースに移行したことで、事実上すべての主要ブラウザがこの仕様に従うことになりました。
  • Webの急速な進化への対応
    固定的なバージョンではなく、常に更新される仕様が必要とされたため。
  • 開発者コミュニティの要望
    より迅速な更新と、実際のWeb開発の現場に即した仕様が求められいたため。
  • W3CとWHATWGの協力
    長年並行して進められていた両者の仕様策定作業を一本化する必要性が認識されたため。

HTML Living StandardとHTML5の違い

HTML Living StandardはHTML5をベースにしていますが、以下のような違いがあります

  • 更新頻度
    HTML5は固定的なバージョンでしたが、HTML Living Standardは常に更新されます。
  • 仕様の詳細さ
    HTML Living Standardは、より詳細な実装ガイドラインを提供しています。
  • APIの統合
    HTML Living Standardには、JavaScript APIsも含まれており、より包括的な仕様となっています。
  • 新しい要素と属性
    HTML Living Standardでは要素や属性の変更や廃止が行われましたが
    新しい要素や属性も追加されています。

例えば

要素

hgroup
見出しのグループ化に使用します。

<hgroup>
  <h1>メインタイトル</h1>
  <h2>サブタイトル</h2>
</hgroup>

slot
Web ComponentsのShadow DOMで使用されます。

<template id="my-paragraph">
  <p><slot name="my-text">デフォルトテキスト</slot></p>
</template>
属性

inert
要素とその子孫を操作不能にします。

<div inert>
  <button>このボタンは操作できません</button>
</div>

popover
ポップオーバー要素を定義します。

<div id="my-popover" popover>これはポップオーバーコンテンツです</div>
<button popovertarget="my-popover">ポップオーバーを表示</button>

inputmode
モバイルデバイスでの入力方法を指定します。

<input type="text" inputmode="numeric" pattern="[0-9]*">

などがあります。
これらの新要素や属性を適切に使用することで、よりセマンティックで機能的なHTMLを作成できます。
ただし、使用する際はブラウザやOSの対応状況を確認することが重要です。

HTML Living Standardに基づいたHTML作成

HTML Living Standardに基づいてHTMLを作成する際は、以下の点に注意しましょう

  • セマンティックな構造
    main , article , navなどのセマンティック要素を適切に使用して、文書構造を明確に表現します。
  • 新しい要素や属性の活用
    hgroup , slotやpopover , inputmodeなどの新しい要素や属性を適切に使用します。
  • アクセシビリティの考慮
    WAI-ARIAなどを活用し、アクセシブルなWebページを作成します。
  • 互換性の確認
    新しい要素や属性を使用する際は、ブラウザの対応状況を確認します。
  • バリデーション
    HTML Living Standardに準拠しているかを確認するために、W3Cのバリデーターなどを使用します。
  • JavaScript APIsの活用
    HTML Living Standardに含まれるJavaScript APIsを適切に活用し、動的なWebページを作成します。

まとめ

HTML Living Standardへの移行は、Webの進化に合わせて柔軟かつ迅速に仕様を更新できるようにするための重要な変更であったようです。
常に更新され続けるが故に、追加・変更・削除された要素や属性の使用には常に注意を払う必要があると感じました。
しかし、適切に扱えばSEOやアクセシビリティの向上につながり、より質の高いWebサイト制作が可能になると思われます。

今後もWebの進化に合わせてHTML Living Standardは更新され続けるはずですので
常に最新の情報をキャッチアップし、適切にマークアップをすることで、より良いWebサイト制作を目指していきたいと思います。