【2026年版】HTML最新機能まとめ - 知っておくべき新要素と属性

注目のHTML新機能

最近のHTMLで使えるようになった便利な機能をまとめました。

1. dialog要素（モーダル）

JavaScriptなしでモーダルが作れます。

<dialog id="myDialog">
  <h2>確認</h2>
  <p>本当に削除しますか？</p>
  <button onclick="this.closest('dialog').close()">キャンセル</button>
  <button onclick="deleteItem()">削除</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">
  削除する
</button>

特徴:

showModal() で表示、close() で閉じる
ESCキーで閉じられる
背景が自動で暗くなる（::backdropでカスタマイズ可能）

2. popover属性

ツールチップやドロップダウンが簡単に。

<button popovertarget="menu">メニュー</button>

<div id="menu" popover>
  <a href="#">設定</a>
  <a href="#">ログアウト</a>
</div>

特徴:

クリックで開閉
外側クリックで自動で閉じる
JavaScriptほぼ不要

3. search要素

検索フォーム用のセマンティック要素。

<search>
  <form action="/search">
    <input type="search" name="q" placeholder="検索...">
    <button type="submit">検索</button>
  </form>
</search>

<div role="search"> の代わりに使えます。

4. loading属性（遅延読み込み）

画像とiframeの遅延読み込み。

<!-- 画像 -->
<img src="photo.jpg" loading="lazy" alt="写真">

<!-- iframe -->
<iframe src="video.html" loading="lazy"></iframe>

値:

lazy: 遅延読み込み
eager: 即座に読み込み（デフォルト）

5. fetchpriority属性

読み込み優先度を指定。

<!-- 重要な画像（LCP対策） -->
<img src="hero.jpg" fetchpriority="high" alt="メイン画像">

<!-- 後で読み込んでいい画像 -->
<img src="icon.jpg" fetchpriority="low" alt="アイコン">

6. inert属性

要素を無効化（フォーカス・クリック不可）。

<div inert>
  <button>クリックできない</button>
  <input type="text" placeholder="入力できない">
</div>

モーダル表示中に背景を無効化するのに便利。

7. inputmode属性

モバイルキーボードの種類を指定。

<!-- 数字キーボード -->
<input type="text" inputmode="numeric" placeholder="金額">

<!-- メールキーボード -->
<input type="text" inputmode="email" placeholder="メール">

<!-- 電話キーボード -->
<input type="text" inputmode="tel" placeholder="電話番号">

ブラウザ対応状況

機能	Chrome	Firefox	Safari	Edge
dialog	✅	✅	✅	✅
popover	✅	✅	✅	✅
search	✅	✅	✅	✅
loading	✅	✅	✅	✅
fetchpriority	✅	✅	✅	✅
inert	✅	✅	✅	✅

ほとんどのモダンブラウザで使えます。

まとめ

dialog: モーダル実装が楽になる
popover: ドロップダウンが簡単に
loading="lazy": パフォーマンス改善
fetchpriority: Core Web Vitals対策

積極的に使っていきましょう。