はじめに

この記事は、以下のモダンCSSに関する記事のHTML版です。

せっかくならHTMLもちゃんと学んでみようと思い、最近のHTMLの新機能を改めて学び直したので、アウトプットついでにこの記事を書いています。

HTML Living Standardの時代へ

2019年5月28日、W3CとWHATWGは、HTMLとDOM標準の開発をWHATWGが主導することで合意しました。これにより、HTMLは「HTML5」のようなバージョン番号を持つ仕様から、継続的に更新される「HTML Living Standard」へと移行しました。

この変化は単なる管理体制の変更ではなく、HTMLの進化の方向性を示しています。この記事で紹介する2019年以降の新機能を見ると、以下のような傾向が明確に現れています：

宣言的UI構築への移行 - JavaScript実装から、HTML属性による宣言的な記述へ
ブラウザネイティブ最適化 - パフォーマンスやアクセシビリティをブラウザレベルで最適化
開発者体験の向上 - より直感的で保守しやすいマークアップの実現

この記事では特に注目すべき11の新機能を取り上げ、それぞれの解説や何が革新的なのかを詳しく説明します。

Popover API は、HTML要素をブラウザのトップレイヤーに配置し、要素間の関係性のみでポップアップ制御を実現する仕組みです。

<button popovertarget="menu">メニューを開く</button>
<div popover="auto" id="menu">ポップアップの内容</div>

トップレイヤーによる階層管理の革新

最も重要な技術的革新は、トップレイヤーという新しい描画層の導入です。トップレイヤーは文書のスタッキングコンテキストから完全に独立しており、通常のDOM階層や z-index の制約を受けません。

<!-- 従来の実装：JavaScriptが必須 -->
<button onclick="togglePopup()">メニュー</button>
<div id="popup" class="popup hidden">
  <!-- z-indexの競合、overflow:hiddenの制約、
       イベント管理の複雑さなど多くの問題を抱えていた -->
</div>

<!-- Popover APIによる宣言的実装 -->
<button popovertarget="menu">メニュー</button>
<div popover id="menu">
  <!-- トップレイヤーで完全に独立、自動的なイベント管理 -->
</div>

従来のポップアップ実装では、親要素の overflow:hidden や z-index による重ね順の競合が頻繁に問題となっていました。トップレイヤーはこれらの制約を根本的に解決し、ポップアップ要素が確実に最前面に表示されることを保証します。

3つのポップオーバータイプの技術的差異

タイプ	排他制御	要素外クリックで閉じる	適用シーン
auto	他のautoを閉じる	✅	メニュー、ダイアログ
hint	他に影響しない	✅	ツールチップ、通知
manual	他に影響しない	❌	サイドドロワー

auto タイプは、ブラウザのイベント管理システムレベルで排他制御を実装しています。
hint タイプは、他のポップオーバーとの相互作用を持たない軽量な実装です。
manual タイプは、要素外クリックで閉じる機能も排他制御も無効化され、JavaScript での完全な制御を前提とした実装です。

popovertarget属性による宣言的関係性

<!-- 複数のボタンで同じポップオーバーを制御 -->
<button popovertarget="settings">設定を開く</button>
<button popovertarget="settings" popovertargetaction="hide">設定を閉じる</button>
<button popovertarget="settings" popovertargetaction="toggle">設定の切り替え</button>
<div popover="auto" id="settings">
  <h2>設定</h2>
  <p>ここに設定内容が入ります。</p>
</div>

popovertarget 属性は、ボタン要素と対象ポップオーバーの関係をHTMLマークアップレベルで宣言します。この関係性により、ブラウザは適切なイベントハンドリングとアクセシビリティ属性を自動的に設定します。

2. Dialog要素

dialog 要素は、モーダルダイアログやダイアログボックスを実装するための専用要素です。Chrome 37（2014年7月）で初めてサポートされ、2022年3月にFirefox、Safariでサポートされ、主要なブラウザでサポートされるようになりました。

モーダルダイアログの実装

<dialog id="my-dialog">
  <h2>ダイアログタイトル</h2>
  <p>ダイアログの内容がここに入ります。</p>
  <button id="close-dialog">閉じる</button>
</dialog>

<button id="open-dialog">ダイアログを開く</button>

<script>
  const dialog = document.getElementById('my-dialog');
  const openButton = document.getElementById('open-dialog');
  const closeButton = document.getElementById('close-dialog');

  // ダイアログを開く
  openButton.addEventListener('click', () => {
    dialog.showModal(); // モーダルダイアログとして表示
  });

  // ダイアログを閉じる
  closeButton.addEventListener('click', () => {
    dialog.close(); // ダイアログを閉じる
  });
</script>

dialog 要素は、モーダルダイアログを簡単に実装できるように設計されています。showModal() メソッドを使用することで、ダイアログをモーダル状態で表示し、ユーザーがダイアログを閉じるまで他の操作を無効化します。

showModal()とshow()の違い

<dialog id="confirm-dialog">
  <form method="dialog">
    <h2>削除の確認</h2>
    <p>この操作は取り消せません。</p>
    <button value="cancel">キャンセル</button>
    <button value="confirm">削除</button>
  </form>
</dialog>

showModal() メソッドは要素をモーダルダイアログとして表示し、::backdrop 擬似要素で背景を覆い、フォーカストラップを自動的に実装します。一方、show() メソッドは非モーダルダイアログとして表示し、背景の要素も操作可能な状態を維持します。

form要素との統合

dialog 要素の最も強力な機能の1つは、form 要素との深い統合です。method="dialog" を指定したフォームは、送信時に自動的にダイアログを閉じ、ボタンの value 属性の値を dialog.returnValue に設定します。

<dialog id="user-form-dialog">
  <h2>ユーザー情報の編集</h2>
  <form method="dialog">
    <label>
      名前: <input type="text" name="name" required>
    </label>
    <label>
      メール: <input type="email" name="email" required>
    </label>
    <!-- ボタンのvalue値がreturnValueになる -->
    <button value="cancel">キャンセル</button>
    <button value="save">保存</button>
  </form>
</dialog>

<script>
  const dialog = document.getElementById('user-form-dialog');

  // ダイアログが閉じた時、returnValueで処理を分岐
  dialog.addEventListener('close', () => {
    if (dialog.returnValue === 'save') {
      // 保存処理
    }
  });
</script>

DialogとPopoverの使い分け

特性	Dialog	Popover
フォーカストラップ	✅ 自動（モーダル時）	❌ なし
背景の無効化	✅ ::backdrop擬似要素	❌ 手動実装必要
ESCキーで閉じる	✅ 自動	✅ 自動
form統合	✅ method="dialog"	❌ なし
戻り値	✅ returnValue	❌ なし
用途	確認、入力が必要	情報表示、メニュー

3. details要素のname属性による排他制御

従来の制限と新しい仕様

details 要素はHTML5から存在していましたが、複数の details 要素が独立して動作するため、一般的なアコーディオンUI（一度に1つだけ開く）を実現するには JavaScript による状態管理が必要でした。

name 属性の追加により、同じ name 値を持つ details 要素群でブラウザネイティブの排他制御が可能になりました。

<!-- FAQセクション：一度に1つの質問だけ開く -->
<details name="faq">
  <summary>返品は可能ですか？</summary>
  <p>商品到着後14日以内であれば返品可能です。</p>
</details>

<details name="faq">
  <summary>送料はいくらですか？</summary>
  <p>5,000円以上のご購入で送料無料です。</p>
</details>

<details name="faq">
  <summary>支払い方法は？</summary>
  <p>クレジットカード、銀行振込、代金引換をご利用いただけます。</p>
</details>

ブラウザレベルでの状態同期

name 属性による排他制御は、DOMイベントレベルで実装されています。details 要素の open 属性が変更される際、ブラウザは同じ name 値を持つ他の details 要素の open 属性を自動的に削除します。

4. inert属性による包括的無効化

HTML仕様レベルでの無効化定義

inert 属性は、指定した要素とその子要素を完全に無効化するHTML属性です。無効化の範囲は、フォーカス可能性、イベント応答性、アクセシビリティツリーからの除外など、ブラウザの要素処理全般に及びます。

<!-- 通常の状態 -->
<main id="main-content">
  <h1>メインコンテンツ</h1>
  <button>このボタンは操作可能</button>
</main>

<!-- inert属性を適用した状態 -->
<main id="main-content" inert>
  <h1>メインコンテンツ</h1>
  <button>このボタンは操作不可能</button>
</main>

モーダルダイアログ表示時に背景コンテンツを無効化する典型的な使用例：

// モーダルを開く際にメインコンテンツを無効化
document.getElementById('main-content').inert = true;

アクセシビリティツリーレベルでの統合

inert 属性が設定された要素は、ブラウザのアクセシビリティツリーから除外されます。これにより、スクリーンリーダーなどの支援技術からも認識されなくなり、フォーカス移動の対象からも除外されます。

特性	`aria-hidden`	`inert`	`disabled`
対象範囲	アクセシビリティツリーのみ	視覚・操作・アクセシビリティ	フォーム要素のみ
マウス操作	操作可能	操作不可	操作不可（フォーム要素）
フォーカス	可能	不可	不可（フォーム要素）
`JavaScript` イベント	発火する	発火しない	発火しない
適用可能要素	すべて	すべて	フォーム要素のみ

従来の disabled 属性がフォーム要素にのみ適用可能だったのに対し、inert 属性はあらゆるHTML要素に適用できます。

5. search要素

検索UIの標準化

search 要素は、検索機能を持つUI領域を意味的にマークアップするための新しい要素です。従来、検索フォームは div 要素や form 要素でマークアップされていましたが、検索であることを明示的に示す標準的な方法がありませんでした。

これまでは role="search" 属性を使用してアクセシビリティを確保する必要がありましたが、search 要素により意味的により明確なマークアップが可能になりました。

<!-- サイト内検索 -->
<search>
  <form action="/search" method="get">
    <label for="site-search">サイト内を検索:</label>
    <input type="search" id="site-search" name="q" required>
    <button type="submit">検索</button>
  </form>
</search>

<!-- 商品検索（フィルター付き） -->
<search>
  <form>
    <h2>商品を検索</h2>
    <input type="search" name="keyword" placeholder="キーワード">
    <select name="category">
      <option value="">すべてのカテゴリ</option>
      <option value="electronics">家電</option>
      <option value="clothing">衣類</option>
    </select>
    <button type="submit">検索する</button>
  </form>
</search>

search 要素は、特別な機能を持つわけではなく、header や footer 要素と同様に、意味的なマークアップを提供するためのものです。

アクセシビリティでの認識

search 要素は、ブラウザのアクセシビリティツリーで search ランドマークとして認識されます。これにより、スクリーンリーダーのユーザーが検索機能を素早く発見できるようになります。

6. loading属性によるリソース読み込み制御

画像の遅延読み込み

loading 属性により、画像や iframe 要素の読み込みタイミングを制御できるようになりました。

<!-- ファーストビューの重要な画像 -->
<img src="hero-image.jpg" loading="eager" alt="メインビジュアル">

<!-- スクロール後に表示される画像 -->
<img src="product-1.jpg" loading="lazy" alt="商品画像1">
<img src="product-2.jpg" loading="lazy" alt="商品画像2">

<!-- 外部コンテンツの遅延読み込み -->
<iframe src="video-player.html" loading="lazy" title="動画プレイヤー"></iframe>

ブラウザネイティブの最適化

loading="lazy" は、ブラウザがビューポートとの距離を計算し、最適なタイミングで読み込みを開始します。従来、Intersection Observer API を使用した JavaScript による実装が必要だった機能が、HTML属性だけで実現できます。

この機能により、大量の画像を含むページでも初期読み込み時のネットワーク負荷を大幅に削減できます。ユーザーがスクロールして画像の表示領域に近づいた時点で初めて読み込みが開始されるため、ページの初期表示速度が向上します。

値	動作	使用場面
lazy	ビューポート接近時に読み込み	大量の画像、フォールド下のコンテンツ
eager	即座に読み込み	重要な画像、ファーストビューの要素

7. fetchpriority属性によるリソース優先度制御

Core Web Vitalsの最適化

fetchpriority 属性は、リソースの取得優先度を明示的に指定できる機能です。特にLCP（Largest Contentful Paint）の改善に効果的です。

従来、ブラウザは独自のヒューリスティックでリソースの優先度を決定していましたが、開発者が意図する優先度と異なる場合がありました。この属性により、重要なリソースを優先的に読み込めるようになります。

<!-- LCP要素となるヒーロー画像を最優先 -->
<img src="hero-banner.jpg"
     fetchpriority="high"
     alt="メインビジュアル">

<!-- 重要なスタイルシート -->
<link rel="stylesheet"
      href="critical.css"
      fetchpriority="high">

<!-- 優先度の低い装飾画像 -->
<img src="decoration.png"
     fetchpriority="low"
     loading="lazy"
     alt="装飾">

<!-- 分析スクリプトは低優先度 -->
<script src="analytics.js"
        fetchpriority="low"
        async></script>

優先度	対象リソース	効果
high	LCP画像、クリティカルCSS、重要なフォント	より早く読み込まれる
low	装飾画像、分析スクリプト、非表示コンテンツ	他のリソースを優先
auto	その他の一般的なリソース	ブラウザのデフォルト動作

8. blocking属性によるレンダリング制御

レンダリングブロックの明示的制御

blocking 属性により、スクリプトやスタイルシートがページのレンダリングをブロックするかどうかを明示的に制御できます。

従来、ブラウザは <link> 要素や <script> 要素を見つけると、その読み込みと処理が完了するまでページのレンダリングを一時停止していました。blocking 属性を使うことで、この動作を開発者が意図的に制御できるようになります。

<!-- 通常のスクリプトはHTMLの解析を停止し、ダウンロードと実行が完了するまでレンダリングも停止 -->
<script src="library.js"></script>

<!-- deferはHTMLの解析は継続、DOM構築完了後に実行、実行時のみレンダリングを停止 -->
<script src="framework.js" defer></script>

<!-- defer + blocking="render"は元の動作に加えて明示的にレンダリングブロックを宣言（仕様上は可能だが推奨されない） -->
<script src="important.js" defer blocking="render"></script>

<!-- 通常のCSSはHTMLの解析は継続、ダウンロードと適用が完了するまでレンダリングを停止 -->
<link rel="stylesheet" href="styles.css">

<!-- preload + blocking="render"はHTMLの解析は継続、ダウンロード完了からレンダリングを停止 -->
<link rel="preload"
      href="critical-font.woff2"
      as="font"
      blocking="render"
      crossorigin>

この属性により、ページの初期表示に必要不可欠なリソースと、後から適用しても問題ないリソースを明確に区別できます。

9. inputmode属性による仮想キーボード最適化

モバイルUXの向上

inputmode 属性は、モバイルデバイスで表示される仮想キーボードのタイプを制御します。

<!-- 数値専用キーボード（電話番号以外） -->
<input type="text"
       inputmode="numeric"
       pattern="[0-9]*"
       placeholder="郵便番号（ハイフンなし）">

<!-- 電話番号用キーボード -->
<input type="tel"
       inputmode="tel"
       placeholder="090-1234-5678">

<!-- URL入力用キーボード -->
<input type="url"
       inputmode="url"
       placeholder="https://example.com">

<!-- メールアドレス用キーボード -->
<input type="email"
       inputmode="email"
       placeholder="user@example.com">

inputmode	表示されるキーボード	適した用途
numeric	0-9の数字のみ	認証コード、郵便番号
tel	電話番号用（+や-を含む）	電話番号
decimal	数字と小数点	価格、数量
email	@や.comキーを含む	メールアドレス
url	/や.comキーを含む	URL入力
search	検索ボタン付き	検索フィールド

10. enterkeyhint属性

仮想キーボードの最適化

enterkeyhint 属性は、モバイルデバイスの仮想キーボードのEnterキー表示をコンテキストに応じて最適化する機能です。

<!-- 検索フィールド -->
<input type="search"
       enterkeyhint="search"
       placeholder="サイト内を検索">

<!-- 複数ステップフォーム -->
<input type="text"
       enterkeyhint="next"
       placeholder="お名前">

<!-- フォームの最終項目 -->
<textarea enterkeyhint="done"
          placeholder="コメント"></textarea>

<!-- チャットアプリ -->
<input type="text"
       enterkeyhint="send"
       placeholder="メッセージを入力">

値	Enterキー表示	使用場面
search	検索	検索フィールド
next	次へ	フォームの途中フィールド
done	完了	フォームの最終フィールド
go	移動	URL入力フィールド
send	送信	メッセージ入力フィールド

11. rel属性のSEO対応値

検索エンジンへのリンク性質の明確化

2019年9月にGoogleが発表した rel 属性の新しい値 (sponsored, ugc) により、リンクの性質を検索エンジンへより詳細に伝えられるようになりました。これは、リンクグラフの品質向上と、より公正な検索結果の提供を目的とした変更です。

<!-- 有料広告やスポンサーリンク -->
<a href="https://sponsor.com" rel="sponsored">スポンサーリンク</a>

<!-- ユーザー生成コンテンツ内のリンク -->
<a href="https://user-content.com" rel="ugc">ユーザー投稿のリンク</a>

<!-- 複数の値を組み合わせる -->
<a href="https://untrusted-site.com" rel="nofollow sponsored">
  有料の外部リンク
</a>

sponsored 値は、広告や有料の提携など金銭的な対価が発生しているリンクを示します。ugc 値は、コメントやフォーラム投稿などユーザーによって生成されたコンテンツ内のリンクを示します。

値	説明	使用場面
sponsored	広告、スポンサーシップ、その他金銭的対価のあるリンク	アフィリエイトリンク、記事広告など
ugc	ユーザー生成コンテンツ(コメント・投稿等)内のリンク	ブログコメント欄のリンク、フォーラム投稿内のリンク

これらの値により、検索エンジンはリンクの文脈をより正確に理解し、PageRankアルゴリズムでの評価を適切に調整できるようになりました。サイト運営者にとっては、リンクの性質を正直に申告することで、検索エンジンからの信頼性を保つことができます。

まとめ

2019年から現在にかけて、HTMLは要素間の関係性を宣言することで複雑なUI動作を実現する言語へと進化しました。
HTMLの進化は、開発者にとってよりシンプルで効率的なマークアップを可能にし、よりセマンティックでアクセシブルなWebサイトの構築を促進しています。

この記事では取り上げきれていない機能も多くありますが、これらの新機能は、Web開発におけるHTMLの役割を再定義し、より直感的で宣言的なマークアップを可能にしています。特に、Popover API や details 要素の name 属性などは、従来の JavaScript 依存から脱却し、HTMLだけで多くのUIパターンを実現できるようになりました。
今後もHTML進化に注目ですね。

なお、この記事で紹介した機能の全てがすべてのブラウザでサポートされているわけではありません。ブラウザごとの実装状況は異なるため、最新情報については、Baseline や MDN Web Docs を参照してください。

https://web.dev/baseline?hl=ja

https://developer.mozilla.org/ja/

Discussion