JavaScriptなしで実現できるHTML機能まとめ
原題: HTML Can Do That
なぜ重要か
HTMLネイティブ機能の拡充はJavaScript依存を減らしページのパフォーマンスとアクセシビリティ向上に直結し、フロントエンド開発の標準実践に影響を与える。
開発者のChris Burnell氏が2026年8月20日、「HTML Can Do That」ページを公開。popover、dialog、details のアコーディオン、command/commandforなど、かつてJavaScriptが担っていた動的機能を純粋なHTMLだけで実現できる事例を一覧形式でまとめた。ブラウザ実装の課題やアクセシビリティ上の懸念点も併記している。
Chris Burnell氏は2026年のHTML Dayに合わせて「HTML Can Do That」ページを1時間で制作・公開し、その後アクセシビリティに関する注記を追記して更新した。同ページは、モダンブラウザで標準HTMLのみを使って実現できる動的機能をまとめたリファレンスとなっている。
主な紹介機能は以下のとおり。
**popover属性**：`popover`属性と`popovertarget`属性を組み合わせることで、JavaScriptなしにポップオーバーの表示・非表示・Escキーでの閉じ操作、z-index管理が不要なトップレイヤーへの配置が実現できる。
**`<dialog>`要素**：モーダルダイアログ専用の要素で、`popover`属性と組み合わせることでスクリプトなしに開閉が可能。JavaScriptを使う場合は`.showModal()`と`.close()`メソッドも利用できるとして、比較用コードも掲載されている。
**グループ化された`<details>`**：`name`属性を共有することで複数の`<details>`要素が排他的アコーディオンとして動作し、1つを開くと他が自動的に閉じる。
**command / commandfor**：別々のボタンから1つのポップオーバーを制御できるInvoker Commands APIで、現時点でブラウザに安定実装されているのは`show-modal`・`close`・`request-close`・`toggle-popover`・`show-popover`・`hide-popover`の6コマンド。今後さらなる拡張が予定されている。
Burnell氏は、ブラウザの実装状況が一部で不十分であること、アクセシビリティ要件を満たしていないケースがあることを明示的に注記しており、実際に使用する際はアクセシビリティへの配慮を呼びかけている。