概要

• HTMLの進化 により、従来JavaScriptが担っていた動的機能の多くがHTMLだけで実現可能に
• popoverやdialogなどの新要素・属性 で、モーダルやポップアップの制御が容易に
• アクセシビリティや実装状況の課題 にも注意が必要
• input系やdatalistなどのフォーム機能 も標準装備だが、ブラウザ間の差異や未成熟な点あり
• 新機能の活用時は慎重さと検証 が重要

HTMLだけで実現できる動的機能の紹介

• HTMLの新機能 により、従来JavaScriptが必須だった動的UIをHTMLだけで実装可能
• アクセシビリティや実装の甘さ に注意しつつ、利用可能な範囲で活用推奨

popover属性

• popover属性とpopovertarget属性 で、ポップアップ表示・非表示を制御
• z-index管理やEscキーでの閉じる操作 も自動対応
• JavaScript不要、HTMLだけで実現
  • 例: <button popovertarget="example-popover">Toggle popover</button>

dialog要素

• dialog要素＋popover属性 で、モーダルダイアログをHTMLのみで制御
• <form method="dialog"> でHTMLだけで閉じる操作も可能
• JavaScriptによる.showModal()/.close()操作 も併用可能
  • 例: <dialog id="example-dialog" popover>...</dialog>
  • JS例: dialog.showModal() / dialog.close()

details要素のグループ化

• details要素にname属性 を付与で、アコーディオンUIをHTMLだけで実装
  • 開いた項目以外は自動で閉じる排他制御
  • 例: <details name="example-group">...</details>

command属性・commandfor属性

• command属性とcommandfor属性 で、複数ボタンからダイアログやポップオーバーを制御
• show-popover/hide-popover等のコマンド でJavaScript不要の制御が可能
  • 例: <button command="show-popover" commandfor="example-command-popover">Open</button>

loading="lazy"属性

• 画像にloading="lazy"属性 を指定で、ビューポート付近まで読み込みを遅延
• IntersectionObserver不要、HTMLだけで実現
  • 例: <img src="..." loading="lazy">

hidden until-found属性

• hidden="until-found"属性 で、特定のリンクから自動的に隠し要素を表示
• ブラウザのデフォルト検索と連携
• アクセシビリティやスクリーンリーダー対応は未成熟

input系要素（color, range, dateなど）

• input[type="color"], input[type="range"], input[type="date"] などで、カラーピッカーやスライダー、日付選択をHTMLだけで実装
• ブラウザごとのスタイル差やアクセシビリティ未対応 に注意
  • 例: <input type="color">, <input type="range">, <input type="date">

datalist要素

• datalist要素 で、テキスト入力にネイティブな補完候補を表示
• ライブラリ不要、HTMLだけで実現
• inputタイプやブラウザによる実装差・未完成な点が多い ため注意
  • 例: <input list="example-datalist">

注意点・まとめ

• アクセシビリティ対応やブラウザ間の実装差 が大きな課題
• 新機能は実験的なものも多く、安定運用には追加検証が必要
• HTMLだけで多くのUIが作れる時代 だが、利用時はユーザー体験や互換性を重視
• 仕様や実装状況の変化に注意しつつ、HTMLの進化を楽しむ姿勢 が大切

参考・謝辞

• Chris BurnellによるHTML Day 2026 のための執筆・実装
• Zachary Kai主催のオンラインイベント で発表
• 継続的な改善・修正を歓迎
• 本ページの内容を鵜呑みにせず、自身で検証・判断を推奨