日本語だけで動作する動的 HTML 機能一覧（HTML Day 2026 リサーチ）

📅 追記・免責事項

2026 年 8 月 20 日追記： このページは当初、HTML Day 2026 で HTML を祝い称賛するためにわずか 1 時間で作成されました。その後、ブラウザの実装不足やアクセシビリティ要件への配慮を明確にするため改訂を加えています。

• ぜひお試しくださいが、可能な限りアクセシブル（利用可能）に実装されるよう心掛けてください！
• 記事の趣旨とは少し異なりますが、ダイアログ要素との JavaScript 連携スニペットも含んでいます。

🚀 HTML で実装可能な動的機能

1.

popover

/

popovertarget

/

popovertargetaction

ブラウザ対応状況：✅ 全面対応中

• クリックでの軽快な閉じ（ライト・ディスマッソ）

• Esc

  キーでの閉じ
• Z-index 管理による最前面への持上げ
• すべて HTML 属性だけで制御可能で、JavaScript は一切不要です。

<button popovertarget="example-popover">Popover を切り替え</button>
<div id="example-popover" popover>
    <p>JavaScript は一切不要。ウェブのための仕様策定に尽力され、ブラウザを構築してくださった素晴らしい方々のおかげで実現している現代のブラウザの魔法です！</p>
    <button popovertarget="example-popover" popovertargetaction="hide">閉じる</button>
</div>

2.

<dialog>

/

command

/

commandfor

ブラウザ対応状況：✅ 全面対応中

• モーダルダイアログ用の専用要素として機能します。

• command

  /

  commandfor

  属性を用いて、HTML だけでダイアログの開閉を制御可能です（非常に最近採用された機能）。

• popover

  属性も重要な役割を担っています。

<button popovertarget="example-dialog">&lt;dialog&gt; の popover を切り替え</button>
<dialog id="example-dialog" popover>
    <p>&lt;form method="dialog"&gt;のみで HTML から閉じられ、&lt;code&gt;&lt;code&gt;popover&lt;/code&gt;&lt;/code&gt; 属性で開かれています。</p>
    <button popovertarget="example-dialog" popovertargetaction="hide">閉じる</button>
</dialog>

📌 JavaScript との連携（参考）

ダイアログ要素と JavaScript でやり取りする例です。両方とも JS から呼び出されます。

// JS パワーのダイアログコード例
<button id="example-dialog-js-open">ダイアログを開く</button>
<dialog id="example-dialog-js">
    <p>これは、JavaScript から呼び出された <code>.showModal()</code> で開き、<code>.close()</code> で閉じられます。</p>
    <button id="example-dialog-js-close">閉じる</button>
</dialog>

document.getElementById("example-dialog-js-open").addEventListener("click", () => {
    document.getElementById("example-dialog-js").showModal()
})
document.getElementById("example-dialog-js-close").addEventListener("click", () => {
    document.getElementById("example-dialog-js").close()
})

3. グループ化された

<details>

/

name

属性

ブラウザ対応状況：✅ 全面対応中

• 複数の

  <details>

  要素に共有された

  name

  属性を指定することで、**排他性のアコーディオン（グループ）**に変換できます。
• 一つを開くと、他の要素は自動的に閉じます（魔法です！）。

<details name="example-group">
    <summary>First</summary>
    <p>第二のものを開くと、この要素が独自に閉じられる様子をご覧ください。</p>
</details>
<details name="example-group">
    <summary>Second</summary>
    <p>第一のものは現在非表示になっています。</p>
</details>

4.

command

&

commandfor

（外部制御）

ブラウザ対応状況：✅ 一部対応中 (

show-modal

close

request-close

toggle-popover

show-popover

hide-popover

• 1 つの Popover を制御する別の HTML ボタンを指定します。スクリプトは不要です。
• 将来的には値のインクリメント／デクリメントや、メディア要素とのやり取りなどもサポートされる可能性があります。

<button command="show-popover" commandfor="example-command-popover">Open</button>
<button command="hide-popover" commandfor="example-command-popover">Close</button>
<dialog id="example-command-popover" popover>
    <p><code>show-popover</code> で開き、<code>hide-popover</code> で閉じられます！</p>
    <button command="hide-popover" commandfor="example-command-popover">Close</button>
</dialog>

5.

loading="lazy"

（画像.lazy ローディング）

ブラウザ対応状況：✅ 全面対応中 (

loading-lazy-attr

• この画像は、ビューポートに近い位置になるまで読み込みを延期します。
• IntersectionObserver の実装が不要です。

<img src="/images/avatar@2x.jpeg" loading="lazy" width="200" height="200" alt="Chris Burnell の顔の写真ポートレート">

6.

hidden="until-found"

（フラグメントリンクでの表示）

ブラウザ対応状況：⚠️ 比較的新しい機能

• フラグメントリンクに移動すると、非表示のセクションが表示されます。
• ブラウザは自動的に

  hidden="until-found"

  を削除します。
• 注釈：スクリーンリーダーとの親和性はまだ低く、ブラウザデフォルト検索以外では完璧ではありませんが、将来を見据えた特性です。

<a href="#example-until-found">非表示の内容へジャンプ</a>
<div id="example-until-found" hidden="until-found">
    <p>やったー！見つけてくれましたね！</p>
</div>

7. 新しい入力タイプ（カラー、レンジ、日付）

ブラウザ対応状況：⚠️ 実装に差あり (

input-color

input-range

input-datetime

• ブラウザ内に組み込まれたカラーピッカー、レンジピッカー、および日付選択機能。
• 警告！ 一部の実装が不完全で、デフォルトのスタイルがブラウザ間で大きく異なる場合があります。
• アクセシビリティ体験が悪い場合もあるため、慎重な使用と詳細な検証が必要です。

<label>カラー <input type="color" value="#5f8aa6" autocomplete="off"></label>
<label>レンジ <input type="range" min="0" max="100" value="50" autocomplete="off"></label>
<label>日付 <input type="date" autocomplete="off"></label>

8.

<datalist>

（ネイティブ自動補完）

ブラウザ対応状況：⚠️ 断片的なサポート

• ネイティブな自動補完提案を提供し、ドロップダウンライブラリが不要です。
• 注釈：各種入力タイプでのサポートがまだ不完全であり、実装にも問題があります（参照：Adrian Roselli の「Under-Engineered Comboboxen」）。 -当面は使用を見送り、今後数年間の改善状況を注視することを推奨します。

<label>お気に入りの HTML 要素 <input type="text" id="example-datalist-input" list="example-datalist" autocomplete="off"></label>
<datalist id="example-datalist">
    <option value="a">
    <option value="abbr">
    <option value="address">
    <!-- ... -->
</datalist>

📝 作成情報

• イベント: HTML Day 2026（2026 年 8 月 8 日開催）
• 著者: Chris Burnell
• 主催: Zachary Kai

このページに対する訂正や修正を歓迎します！私は専門家ではありませんが、事実に基づいて表現しようと努めています。 このページを上司への決断材料や自己研鑽の指標として使わないでください。 ウェブを閲覧するすべての人があなたと同じように環境を持っていることを忘れないでください。そして、これらの新しい HTML 機能を楽しんでください！