どうも、くーへいです。

【本記事の作成について】
この記事は、長らく更新が止まっていたブログの再開にあたり、構成案とベーステキストの作成に生成AI（Gemini）を活用しています。出力された内容をもとに、筆者自身で最新のHTML仕様（WHATWG）のチェックを行い、独自の考察や実用例、動作デモなどを加筆して仕上げています。

「HTML5」という言葉が登場してから長らく経ちますが、現在のWeb制作において「HTML5」はすでに過去の仕様となっていることをご存知でしょうか。

かつては「HTML 4.01」から「XHTML 1.0」、 そして「HTML5」へとバージョンアップを繰り返してきましたが、現在のHTMLには「バージョン」という概念そのものが存在しません。

本記事では、現在のWeb標準である「HTML Living Standard」への移行の背景と、すでに実用段階にある最新要素、そしてなぜHTMLが再び多機能化しているのかについて解説します。

1. はじめに：今のHTMLに「バージョン」は存在しない

長年、HTMLの仕様は「W3C（World Wide Web Consortium）」という団体が主導し、数年おきに「HTML5」や「HTML 5.2」といったバージョンを区切って公開していました。

しかし現在、HTMLの標準仕様はApple、Google、Microsoft、Mozillaといった主要ブラウザベンダーで構成される「WHATWG（Web Hypertext Application Technology Working Group）」という組織が管理しています。彼らが策定する仕様は「HTML Living Standard」と呼ばれ、バージョン番号を持たず、日々継続的に仕様が更新（Living）されていくのが最大の特徴です。

2021年にはW3Cも公式にHTML5の廃止を宣言し、現在ではWHATWGの「HTML Living Standard」が唯一の公式なHTML標準仕様となっています。

ちなみに、誤解なきように記載しておくと、HTML5というもの自体がなくなったわけではなく、HTML5が使えなくなったわけでもありません。
あくまで、W3CがHTML5の廃止を宣言し、策定を終了したに過ぎないのです。
WHATWGも公式にHTML Living StandardはHTML5か？という問いに「Yes」と答えています。

出典：HTML Living Standard – 1.2 Is this HTML5?

2. 図解：HTML仕様の変遷と管理団体の違い

仕様の変遷と現在の位置づけを整理すると、以下の表のようになります。

W3CとWHATWGの合意により、HTMLとDOMの仕様はWHATWGが策定するLiving Standardに一本化されました。
出典：W3C and WHATWG to work together to advance the open Web platform（W3C Blog, 2019年5月28日）

3. すでに巨大プラットフォームも採用！HTMLだけで完結するUI実装

ブラウザに新機能が搭載されても、実際の制作現場で使われずに消えていく仕様も過去には多くありました。しかし、HTML Living Standardで策定された以下の要素は主要ブラウザでサポートされており、すでに巨大プラットフォームでも採用されています。

① <details> と <summary> によるアコーディオンUI

クリックすると詳細が開閉する「折りたたみUI」です。JavaScriptなしで実装できます。

【実用事例】
エンジニア向けプラットフォームのGitHubで多用されています。IssueやPull Requestのコメント欄で長いエラーログを折りたたんだり、ドロップダウンメニューのUIとしてこのネイティブ要素が使われています。また、Zennなどの技術ブログ媒体でも標準の変換記法として採用されています。

【動作例とコード】

<details>
  <summary>ここをクリックして詳細を表示</summary>
  <div class="content">
    <p>隠されていた詳細テキストがここに表示されます。CSSでアニメーションを付けることも可能です。</p>
  </div>
</details>

<details> 要素は、ユーザーが要求した際に追加情報やコントロールを取得できるウィジェットを表します。
出典：HTML Standard – The details element (WHATWG 公式仕様書)

② <dialog>要素によるモーダルウィンドウ

これまでJavaScriptライブラリ（jQuery等）に頼っていたポップアップやモーダルを、標準要素として実装できます。

【動作例とコード】

<!-- 開くためのボタン -->
<button commandfor="my-dialog" command="show-modal">モーダルを開く</button>

<!-- ダイアログ本体 -->
<dialog id="my-dialog">
  <p>これはHTML標準のdialog要素で作られたモーダルです。</p>
  <p>JavaScriptを使用することなく、開いたり閉じたりできます。</p>
  <button commandfor="my-dialog" command="close">閉じる</button>
</dialog>

<dialog> 要素は、アプリケーションの対話型コンポーネント（ダイアログボックスなど）を表します。
出典：HTML Standard – The dialog element (WHATWG 公式仕様書)

③ 画像の遅延読み込み（loading=”lazy”）

外部ライブラリを使わずとも、属性を一つ追加するだけで画像の遅延読み込み（Lazy Load）が可能になります。

【実用事例】
実はWordPressでは、バージョン5.5から標準機能として、挿入画像にこの属性が自動付与されるようになりました。世界のWebサイトの約4割を占めるWordPressがネイティブ実装に切り替えたことで、現在最も普及している最新仕様の一つと言えます。

<img src="https://www.flapism.jp/wp-content/themes/blog/img/h-logo.png" alt="フラップイズム" loading="lazy" width="800" height="600">

出典：HTML Standard – 2.5.7 Lazy loading attributes (WHATWG 公式仕様書)

4. 押さえておきたい！ここ数年で登場したさらに新しい標準仕様

Living Standardは日々更新されており、最近でも非常に便利な機能が追加されています。これらもすでに主要なブラウザ環境でサポートが進んでいます。

④ popover 属性（簡易ポップアップ）

2024年頃から広く使えるようになったグローバル属性です。<dialog>が画面全体を覆うようなモーダルに適しているのに対し、popoverはドロップダウンメニューやツールチップなど、他の要素と重なって表示される「軽いポップアップ」をJavaScriptなしで実装できます。

【動作例とコード】

<!-- トリガーとなるボタン -->
<button popovertarget="my-popover">メニューを開く</button>

<!-- ポップオーバーの中身 -->
<div popover id="my-popover" class="popover-content">
  <ul>
    <li><a href="#">マイページ</a></li>
    <li><a href="#">設定</a></li>
    <li><a href="#">ログアウト</a></li>
  </ul>
</div>

popover属性は、要素をポップオーバー要素として示すために使われます。
出典：MDN Web Docs – HTML popover グローバル属性

⑤ <search> 要素

2023年末頃から主要ブラウザでサポートされた新しいセマンティック（意味論的）要素です。サイト内検索やフィルタリング機能のフォームを囲むために使用し、検索機能であることをブラウザや支援技術に正確に伝えます。

<search>
  <form action="/search">
    <label for="query">サイト内検索:</label>
    <input type="search" id="query" name="q">
    <button type="submit">検索</button>
  </form>
</search>

5. 【考察】HTMLの「多機能化」は、かつての悪しき時代への逆行か？

ここまで読んで、古くからWeb制作に携わっている方の中には、ある疑問を抱いた方もいるかもしれません。

「HTMLだけで何でもできる多機能化は、かつての悪しき時代に戻っているだけではないか？」

確かに、かつてのHTML（HTML 3.2や4.0時代）は、<font>（文字色）や<center>（中央揃え）など、何でもHTMLで制御しようとして破綻し、「構造（HTML）と装飾（CSS）の分離」へと舵を切った歴史があります。

しかし、現在のHTML Living Standardにおける多機能化は、かつてのそれとは本質が異なります。

現在の進化の目的は「装飾」ではなく、「セマンティクス（意味論）」と「アクセシビリティ（a11y）」の担保です。

例えば、<div>タグとJavaScriptを駆使して自作したモーダルウィンドウは、見た目は綺麗でも以下のような問題（アクセシビリティの欠陥）を抱えがちです。

• キーボードの「Escキー」を押しても閉じない。
• モーダルが開いているのに、裏側にあるリンクを「Tabキー」でフォーカスできてしまう。
• 視覚障がい者用のスクリーンリーダーが、正しくモーダル内の情報を読み上げてくれない。

<dialog>や先述のpopoverといった最新の標準仕様を使えば、これらの複雑なアクセシビリティ制御を「ブラウザが自動的に、完璧に」処理してくれます。

つまり、現代のHTMLの進化は「何でもかんでもHTMLで済ませる」ためのものではなく、「誰もが使いやすい（アクセシブルな）Webの標準UIを、ブラウザ側で責任を持って提供する」ための正しい進化だと言えるのです。

6. まとめ

HTMLの世界は「HTML5」で完成したわけではなく、現在の「HTML Living Standard」において、より便利でアクセシビリティに配慮した進化を続けています。

過去の知識のまま止まってしまっている方は、ぜひこの機会に最新の仕様をチェックし、よりスマートでモダンなコーディングを取り入れてみてください。

【正確な仕様を確認するための一次リソース】

1. HTML Standard (WHATWG)
2. MDN Web Docs – HTML (Mozilla)