HTML/HTML Living StandardにおけるHTML5からの変更点

HTML Living StandardにおけるHTML5からの変更点

HTML Living Standardは、HTML5を基礎に継続的な改訂を行い、新しい要素や属性、仕様変更を取り入れています。以下では、HTML5からの主な変更点を新要素や新属性を中心に解説します。

新要素

HTML Living Standardでは、いくつかの新しい要素が追加され、Web開発者がより豊かな表現や機能を実現できるようになりました。

<template>要素

説明: HTML文書内に含まれる再利用可能な構造を定義するための要素。テンプレートは初期状態では非表示で、JavaScriptで動的に利用される。
用途: コンポーネントのテンプレート化、クライアントサイドでの動的コンテンツ生成。

例:

<template id="myTemplate">
    <p>この内容はテンプレートとして定義されています。</p>
</template>

詳細は「HTML/TEMPLATE」、「HTML/Web Component」、「HTML/Custom Element」、「HTML/Shadow DOM」、および「HTML/Declarative Shadow DOM」を参照

<slot>要素

説明: Webコンポーネントで利用され、Shadow DOM内に動的に内容を挿入するためのプレースホルダー。
用途: コンポーネント開発の際の柔軟な内容配置。
例:
```
<slot name="header"></slot>
```

詳細は「HTML/SLOT」、「HTML/Web Component」、「HTML/Custom Element」、「HTML/Shadow DOM」、および「HTML/Declarative Shadow DOM」を参照

<dialog>要素

説明: ダイアログボックスやモーダルウィンドウを表現するための要素。
用途: 簡易的なダイアログ表示、モーダルウィンドウの実装。

例:

<dialog open>
    <p>ダイアログの内容です。</p>
</dialog>

詳細は「HTML/DIALOG」を参照

<picture>要素

説明: 複数の画像ソースを指定し、条件に応じて最適な画像を選択して表示する要素。
用途: レスポンシブデザインの画像対応。

例:

<picture>
    <source srcset="image-large.jpg" media="(min-width: 800px)">
    <source srcset="image-small.jpg" media="(max-width: 799px)">
    <img src="fallback.jpg" alt="例画像">
</picture>

詳細は「HTML/PICTURE」を参照

新属性

新しい属性が追加され、HTML要素の機能が拡張されました。

Global属性: is=""

説明: カスタム要素の定義に関連付けるために使用される属性。
用途: カスタム要素を標準のHTML要素として振る舞わせる。

例:

<button is="custom-button">カスタムボタン</button>

詳細は「HTML/IS属性」を参照

<input>要素の新しい属性

inputmode:
説明: 仮想キーボードの入力モードを指定。

例:

<input type="text" inputmode="numeric" pattern="[0-9]*">

list:
説明: 入力候補リストを提供するための属性。

例:

<input type="text" list="suggestions">
<datalist id="suggestions">
    <option value="Option 1">
    <option value="Option 2">
</datalist>

詳細は「HTML/INPUTMODE属性」および「HTML/LIST属性」を参照

<iframe>要素の新しい属性

loading:
説明: 遅延読み込みの挙動を制御。
値: lazy（遅延読み込み）、eager（即時読み込み）。

例:

<iframe src="example.html" loading="lazy"></iframe>

allow:
説明: サードパーティコンテンツの挙動を制御するためのポリシーを指定。

例:

<iframe src="example.html" allow="fullscreen; geolocation"></iframe>

詳細は「HTML/LOADING属性」および「HTML/ALLOW属性」を参照

<a>要素の新しい属性

download:
説明: リンク先をファイルとしてダウンロードすることを指定。

例:

  <a href="file.zip" download="example.zip">ダウンロード</a>

詳細は「HTML/DOWNLOAD属性」を参照

<form>要素の新しい属性

novalidate:
説明: フォーム送信時に検証をスキップ。

例:

  <form action="/submit" novalidate>
      <input type="text" required>
  </form>

詳細は「HTML/NOVALIDATE属性」を参照

削除または非推奨になった要素と属性

HTML Living Standardでは、一部の要素や属性が非推奨または削除されています。これにより、よりシンプルで効率的なHTMLが推進されています。

削除された要素

<acronym>: <abbr>要素で代用可能。
<bgsound>: オーディオ再生には<audio>要素を使用。

削除された属性

frameborder: CSSで代用可能。
marginwidth, marginheight: CSSで代用可能。

まとめ

HTML Living Standardは、HTML5から進化し、新しい要素や属性を導入しつつ、不要なものを整理することで、よりシンプルかつ強力なHTML仕様を提供しています。これにより、Web開発者は多様なニーズに応じた柔軟な設計が可能となり、ユーザーエクスペリエンスが向上します。