HTML
「このHTML機能は今、使っていいか？」を一瞬で判断できる実務特化リファレンス。
- Widely available146機能
- Newly available19機能
- Limited support77機能
安心して使えるHTML
Widely available<canvas>
JavaScript で動的にグラフィックスを描画するための要素。
2D canvas
2D描画コンテキスト。Canvas要素上に図形やテキストを描画するAPI。
captureStream() for <canvas>
Canvas要素からメディアストリームをキャプチャするAPI。
Offscreen canvas
メインスレッド外でCanvas描画を行うAPI。Workerでの描画に使用。
WebGL
WebGL 1.0。ブラウザでハードウェアアクセラレーションされた3D描画を行うAPI。
Form-associated custom elements
フォーム関連カスタム要素。カスタム要素をネイティブフォームに統合する機能。
Imperative slot assignment
命令的スロット割り当て。JavaScriptでSlotの割り当てを制御するAPI。
Shadow parts
Shadow DOMパーツ。外部からShadow DOM内のスタイルを制御するAPI。
DOM
DOM API。HTML文書の構造をプログラムで操作するための基本API。
Selection
Selection API。ユーザーのテキスト選択範囲を取得・操作するAPI。
Content Security Policy (CSP)
Content Security Policy。XSSなどの攻撃を防ぐセキュリティポリシー。
Web authentication
Web Authentication API。パスキーや生体認証によるパスワードレス認証。
<aside>
主要コンテンツとは間接的に関連するコンテンツを表す要素。サイドバーや補足情報に使用。
<header> and <footer>
<header> と <footer> 要素。ページやセクションのヘッダー・フッターを表す。
<main>
文書の主要コンテンツを表す要素。ページに1つだけ使用する。
<nav>
ナビゲーションリンクのセクションを表す要素。メインメニューやパンくずリストに使用。
<section>
汎用的なセクション要素。見出し付きのテーマ別グループ化に使用。
accesskey
要素のキーボードショートカットを定義するグローバル属性。
aspect-ratio
CSSのアスペクト比プロパティ。要素の縦横比を指定。
autofocus
ページ読み込み時に自動的にフォーカスを受ける属性。
Change event
changeイベント。フォーム要素の値が確定した際に発火するイベント。
color-scheme
カラースキーム。ダークモード/ライトモードの対応を宣言。
contenteditable
要素のコンテンツを編集可能にするグローバル属性。リッチテキストエディタに使用。
CSS object model
CSS Object Model。CSSスタイルをJavaScriptで操作するAPI。
Dataset
data-* カスタムデータ属性。要素にカスタムデータを付与するための標準的な仕組み。
download
リンク先をダウンロードさせる属性。ファイル名の指定も可能。
Drag and Drop
ドラッグ＆ドロップ API。要素のドラッグ操作とドロップゾーンの制御に使用。
enterkeyhint
仮想キーボードのEnterキーのラベルを指定する属性。
Focus events
フォーカスイベント。要素のフォーカス取得・喪失を検知するイベント群。
ImageBitmapRenderingContext
ImageBitmapをCanvasに高速転送するレンダリングコンテキスト。
inputmode
仮想キーボードの種類を指定する属性。モバイルでの最適な入力体験に使用。
lang
lang属性。要素の言語を指定するグローバル属性。アクセシビリティに重要。
Media playback quality
メディア再生品質API。動画再生のフレームドロップ等を監視するAPI。
Mouse events
マウスイベント。クリック、移動、ホバーなどのマウス操作を検知するイベント群。
spellcheck
要素のスペルチェック機能の有効/無効を制御する属性。
style (attribute)
style属性。要素にインラインCSSスタイルを直接指定する属性。
title (attribute)
title属性。要素のアドバイザリ情報（ツールチップ）を提供するグローバル属性。
translate
要素のコンテンツを翻訳対象にするかを指定する属性。
WebGL2
WebGL 2.0。OpenGL ES 3.0ベースの高度な3D描画API。
<a>
ハイパーリンクを作成する要素。他のページやリソースへのナビゲーションに使用。
<abbr>
略語や頭字語を表す要素。title 属性で完全な表記を提供できる。
<address>
連絡先情報を表す要素。記事や文書の著者・所有者の連絡先に使用。
<article>
独立した自己完結型のコンテンツを表す要素。ブログ記事やニュースなどに使用。
<b>
注意を引くためのテキストを表す要素。重要性を示す場合は <strong> を使用。
<base>
文書内の相対 URL の基準となるベース URL を指定する要素。
<bdi>
双方向テキストの分離を行う要素。ユーザー生成コンテンツの安全な表示に使用。
<bdo>
テキストの書字方向を明示的に上書きする要素。
<blockquote>
ブロックレベルの引用を表す要素。cite 属性で引用元を指定可能。
<body>
HTML 文書のコンテンツ本体を表す要素。表示されるすべてのコンテンツを含む。
<br>
テキスト内の改行を表す要素。詩や住所など、改行が意味を持つ箇所に使用。
<cite>
創作物のタイトルを表す要素。書籍、映画、楽曲などの引用に使用。
<code>
コンピュータコードの断片を表す要素。インラインコードの表示に使用。
<data>
コンテンツと機械可読な値を関連付ける要素。value 属性で値を指定。
<del>
文書から削除されたテキストを表す要素。通常、取り消し線で表示される。
<details>
ユーザーが開閉できる詳細情報ウィジェット。アコーディオンUIに使用。
<dfn>
用語の定義箇所を表す要素。定義リストやテキスト内の初出用語に使用。
<dialog>
ダイアログボックスを表す要素。モーダルや確認プロンプトに使用。
<div>
汎用のブロックコンテナ要素。セマンティックな意味を持たないグループ化に使用。
<em>
テキストの強調を表す要素。斜体で表示され、読み上げ時にアクセントが変わる。
<embed>
外部コンテンツを埋め込む要素。プラグインやマルチメディアの埋め込みに使用。
<figure> and <figcaption>
自己完結型のコンテンツ（図表、画像など）を表す要素。<figcaption> でキャプション付与。
<h1> through <h6>
6段階の見出し要素（<h1>〜<h6>）。文書のアウトラインと階層構造を定義。
<head>
文書のメタデータを格納するコンテナ要素。タイトル、スタイル、スクリプトなどを含む。
<hgroup>
見出しとサブタイトルをグループ化する要素。
<hr>
テーマの区切りを表す水平線要素。段落レベルのテーマ変更に使用。
<html>
HTML 文書のルート要素。lang 属性で文書の言語を指定する。
<i>
通常のテキストと異なる性質を持つテキスト範囲を表す要素。技術用語や外国語に使用。
<iframe>
別の HTML ページを埋め込むインラインフレーム要素。外部コンテンツの統合に使用。
<img>
画像を文書に埋め込む要素。alt 属性で代替テキストを提供することが必須。
<ins>
文書に追加されたテキストを表す要素。通常、下線で表示される。
<kbd>
キーボード入力を表す要素。ユーザーが入力すべきキーやキーの組み合わせに使用。
<link>
外部リソース（スタイルシート、ファビコンなど）との関係を定義する要素。
<mark>
ハイライトされたテキストを表す要素。検索結果のマッチ箇所などに使用。
<menu>
メニューリストを表す要素。<ul> と同様のセマンティクスを持つ。
<meta>
文書のメタデータを指定する要素。文字エンコーディング、ビューポート設定などに使用。
<object>
外部リソースを埋め込む汎用要素。画像、動画、プラグインなどに対応。
<ol>, <ul>, and <li>
リスト要素。順序付き・順序なし・説明リストを構築する要素群。
<p>
段落を表す要素。テキストコンテンツの基本的な構造化に使用。
<picture>
レスポンシブ画像のためのコンテナ要素。複数のソースから最適な画像を選択。
<pre>
整形済みテキストを表す要素。空白や改行がそのまま表示される。
<q>
短いインライン引用を表す要素。ブラウザが自動的に引用符を付与。
<s>
取り消し線付きのテキストを表す要素。正確でなくなった情報や関連性が薄れた情報に使用。
<samp>
コンピュータプログラムの出力例を表す要素。
<script> and <noscript>
JavaScript コードを埋め込むまたは参照する要素。
<slot>
Web Components で使用するスロット要素。Shadow DOM 内のプレースホルダーとして機能。
<small>
小さい注釈（著作権表示、法的注意書きなど）を表す要素。
<span>
汎用のインラインコンテナ要素。セマンティックな意味を持たないテキストの装飾に使用。
<strong>
重要性の高いテキストを表す要素。太字で表示され、スクリーンリーダーでも強調される。
<style>
CSS スタイル情報を文書に埋め込む要素。
<sub> and <sup>
下付き文字（<sub>）と上付き文字（<sup>）を表す要素。
<template>
クライアントサイドで複製して使用するためのHTML テンプレート要素。
<time>
日時を表す要素。datetime 属性で機械可読な形式を指定。
<title>
文書のタイトルを定義する要素。ブラウザのタブやブックマークに表示される。
<u>
非テキスト注釈を持つテキストを表す要素。スペルミスの指摘などに使用。
<var>
変数を表す要素。数学式やプログラミングコードの変数名に使用。
<wbr>
改行可能位置を示す要素。長い単語やURLの折り返し位置を提案。
Image maps
イメージマップ。画像の領域ごとにクリック可能なリンクを設定する機能。
Tables
表形式のデータを表示するテーブル要素群。構造化されたデータの表現に使用。
Gamepad
Gamepad API。ゲームコントローラーの入力を取得するAPI。
Geolocation API
Geolocation API。ユーザーの現在地（緯度・経度）を取得するAPI。
<button>
クリック可能なボタンを表す要素。フォーム送信やインタラクションに使用。
<fieldset> and <legend>
フォーム内の関連する要素をグループ化する要素。<legend> でグループ名を表示。
<form>
ユーザー入力を収集するフォームを表す要素。送信先やメソッドを指定可能。
<input type="button">
ボタン型input要素。<button>要素の使用が推奨される。
<input type="checkbox">
チェックボックス型の入力要素。複数選択が可能なオン/オフの選択に使用。
<input type="file" multiple>
複数ファイル選択対応のinput[type=file]。
<input type="file">
ファイル選択入力要素。ファイルアップロード機能に使用。
<input type="hidden">
非表示の入力要素。ユーザーに見えないデータをフォームで送信。
<input type="image">
画像ボタン型input要素。画像をクリック可能な送信ボタンとして使用。
<input type="number">
数値入力に特化した <input> タイプ。スピナーUIと数値バリデーションを提供。
<input type="password">
パスワード入力要素。入力内容がマスクされるテキストフィールド。
<input type="radio">
ラジオボタン型の入力要素。複数の選択肢から1つだけ選択するUIに使用。
<input type="range">
範囲スライダー入力要素。音量やフィルタの値など、おおよその数値入力に使用。
<input type="reset">
リセットボタン型input要素。フォームの全入力値を初期値に戻す。
<input type="search">
検索入力タイプ。検索フィールド専用のinput要素。
<input type="submit">
送信ボタン型input要素。フォームデータの送信に使用。
<input>
さまざまな種類のユーザー入力フィールドを作成する要素。type 属性で入力の種類を指定。
<label>
フォームコントロールにラベルを関連付ける要素。アクセシビリティに必須。
<meter>
既知の範囲内のスカラー値を表すゲージ要素。ディスク使用量や投票結果の表示に使用。
<output>
計算やユーザー操作の結果を表す要素。フォーム出力に使用。
<progress>
タスクの進捗状況を表すプログレスバー要素。
<select>
ドロップダウンリストを提供する選択要素。オプションの中から選択するUIに使用。
<textarea>
複数行のテキスト入力欄を作成する要素。コメントやメッセージ入力に使用。
Constraint validation API
制約バリデーションAPI。フォーム入力値の検証をブラウザ側で行う仕組み。
Date and time <input> types
日付・時刻入力の <input> タイプ。date、time、datetime-local などに対応。
dirname
dirname属性。入力テキストの書字方向をフォームデータとして送信。
Email, telephone, and URL <input> types
メール、電話番号、URLの入力に特化した <input> タイプ。モバイルで適切なキーボードが表示される。
<link rel="modulepreload">
modulepreload。ESモジュールを事前読み込みするリソースヒント。
<ruby>
ルビ（振り仮名）注釈を表す要素。東アジアの文字の読み方表示に使用。
Description list
説明リスト（<dl>）。用語とその説明をペアで表示する要素。
Import maps
Import Maps。ESモジュールのインポート指定子を解決するマッピング。
inert
要素とその子孫を非インタラクティブにする属性。モーダル背後のコンテンツ無効化に使用。
JavaScript modules
JavaScriptモジュール。ES Modules（import/export）のブラウザネイティブサポート。
srcset and sizes
レスポンシブ画像のための srcset と sizes 属性。デバイスに最適な画像を提供。
tabindex
要素のタブ順序とフォーカス可能性を制御する属性。キーボードナビゲーションに重要。
<audio>
音声コンテンツを埋め込む要素。再生コントロールやソース指定が可能。
<source>
メディア要素のソースを指定する要素。<picture>、<audio>、<video> と併用。
<video>
動画コンテンツを埋め込む要素。再生コントロールやポスター画像を指定可能。
Text tracks
テキストトラック。字幕、キャプション、説明をメディアに追加するAPI。
<link rel="preconnect">
preconnect。外部オリジンへの事前接続を行うリソースヒント。
<link rel="preload">
preload。重要なリソースを事前に読み込むリソースヒント。
Encrypted media extensions
Encrypted Media Extensions。DRM保護されたメディアコンテンツの再生API。
Media capture
Media Capture and Streams API。カメラ・マイクからメディアストリームを取得するAPI。
Referrer policy
Referrer Policy。リクエスト時のリファラー情報の送信を制御するポリシー。
Sandboxed iframes
iframe sandbox属性。埋め込みコンテンツの権限を制限するセキュリティ機能。
srcdoc
iframe srcdoc属性。インラインHTMLをiframe内に直接埋め込む属性。
条件付きでOK
Newly availablewillReadFrequently
Canvas 2Dコンテキストの読み取り最適化オプション。
Storage access
Storage Access API。サードパーティコンテキストからストレージへのアクセスを要求するAPI。
Trusted types
Trusted Types。DOM XSSを防止するためのブラウザAPI。
contenteditable="plaintext-only"
contenteditable=plaintext-only。プレーンテキストのみの編集モード。
Scroll to text fragment
テキストフラグメントへのスクロール。URLでページ内テキストを指定してハイライト表示。
<search>
検索機能に関連するコンテンツを含むセクション要素。
dialog.requestClose()
dialog.requestClose()。ダイアログの閉じるリクエストを発行するメソッド。
Mutually exclusive <details> elements
details要素のname属性。排他的アコーディオンを実現する属性。
<input type="file" webkitdirectory>
webkitdirectory属性。ディレクトリ単位でファイルを選択する機能。
Invoker commands
Invoker Commands。ボタンのcommand属性で要素の動作を宣言的に指定。
Declarative shadow DOM
宣言的 Shadow DOM。HTML 内で Shadow DOM を直接定義する機能。
Popover
ポップオーバー API。要素をトップレイヤーに表示するための機能。
Preloading responsive images
レスポンシブ画像のプリロード。imagesrcsetを使った画像の事前読み込み。
preservesPitch
preservesPitch。再生速度変更時にピッチを維持するプロパティ。
requestVideoFrameCallback()
requestVideoFrameCallback。動画フレームごとのコールバックAPI。
<link rel="dns-prefetch">
dns-prefetch。外部ドメインのDNS解決を事前に行うリソースヒント。
Fetch priority
Fetch Priority API。リソースの取得優先度を明示的に指定する属性。
Lazy-loading images and iframes
画像やiframeの遅延読み込み。パフォーマンス最適化に使用。
Screen wake lock
Screen Wake Lock API。画面のスリープを防止するAPI。