HTML

現行標準 — 最終更新 2026年7月20日

詳細目次

1 はじめに
1. 1.1 この仕様はどこに位置付けられるか？
2. 1.2 これは HTML5 か？
3. 1.3 背景
4. 1.4 対象読者
5. 1.5 適用範囲
6. 1.6 歴史
7. 1.7 設計上の注記
  1. 1.7.1 スクリプト実行の直列化可能性
  2. 1.7.2 拡張性
8. 1.8 HTML 構文と XML 構文
9. 1.9 この仕様の構成
  1. 1.9.1 この仕様の読み方
  2. 1.9.2 表記規則
10. 1.10 HTML の簡単な紹介
11. 1.11 作者に対する適合性要件
12. 1.12 推奨文献
2 共通基盤
1. 2.1 用語
2. 2.2 ポリシー制御機能
3. 2.3 共通マイクロ構文
4. 2.4 URL
5. 2.5 リソースの取得
6. 2.6 共通 DOM インターフェイス
7. 2.7 構造化データの安全な受け渡し
3 HTML 文書のセマンティクス、構造、および API
1. 3.1 文書
2. 3.2 要素
4 HTMLの要素
1. 4.1 文書要素
  1. 4.1.1 html 要素
2. 4.2 文書メタデータ
3. 4.3 セクション
4. 4.4 コンテンツのグループ化
5. 4.5 テキストレベルのセマンティクス
6. 4.6 リンク
7. 4.7 編集
8. 4.8 埋め込みコンテンツ
9. 4.9 表形式データ
10. 4.10 폼
11. 4.11 インタラクティブ要素
12. 4.12 スクリプティング
13. 4.13 カスタム要素
14. 4.14 専用要素を持たない一般的な慣用表現
15. 4.15 無効化された要素
16. 4.16 セレクターと CSS を使用した HTML 要素の照合
5 マイクロデータ
1. 5.1 はじめに
2. 5.2 マイクロデータのエンコード
3. 5.3 マイクロデータ語彙の例
4. 5.4 HTML からその他の形式への変換
  1. 5.4.1 JSON
6 ユーザー操作
1. 6.1 hidden 属性
2. 6.2 ページの可視性
  1. 6.2.1 VisibilityStateEntry インターフェイス
3. 6.3 不活性なサブツリー
  1. 6.3.1 モーダルダイアログと不活性なサブツリー
  2. 6.3.2 inert 属性
4. 6.4 ユーザーアクティベーションの追跡
5. 6.5 要素のアクティベーション動作
  1. 6.5.1 ToggleEvent インターフェイス
  2. 6.5.2 CommandEvent インターフェイス
6. 6.6 フォーカス
7. 6.7 キーボードショートカットの割り当て
8. 6.8 編集
9. 6.9 페이지 내 찾기
10. 6.10 닫기 요청 및 닫기 감시자
11. 6.11 ドラッグ＆ドロップ
12. 6.12 popover 属性
  1. 6.12.1 ポップオーバーターゲット属性
  2. 6.12.2 ポップオーバーのライトディスミス
7 ウェブページの読み込み
1. 7.1 補助概念
2. 7.2 ナビゲーションおよびセッション履歴に関連する API
3. 7.3 文書シーケンスのための基盤
4. 7.4 ナビゲーションとセッション履歴
5. 7.5 文書のライフサイクル
6. 7.6 投機的読み込み
7. 7.7 `X-Frame-Options` ヘッダー
8. 7.8 `Refresh` ヘッダー
9. 7.9 ブラウザーのユーザーインターフェイスに関する考慮事項
8 ウェブアプリケーション API
1. 8.1 スクリプト処理
2. 8.2 WindowOrWorkerGlobalScope ミックスイン
3. 8.3 Base64 ユーティリティメソッド
4. 8.4 動的マークアップ挿入
5. 8.5 DOM の構文解析および直列化 API
6. 8.6 HTML の無害化
7. 8.7 タイマー
8. 8.8 マイクロタスクのキューイング
9. 8.9 ユーザープロンプト
  1. 8.9.1 単純なダイアログ
  2. 8.9.2 印刷
10. 8.10 システムの状態と能力
  1. 8.10.1 Navigator オブジェクト
11. 8.11 画像
  1. 8.11.1 ImageData インターフェイス
  2. 8.11.2 ImageBitmap インターフェイス
12. 8.12 アニメーションフレーム
9 通信
1. 9.1 MessageEvent インターフェイス
2. 9.2 サーバー送信イベント
3. 9.3 文書間メッセージング
4. 9.4 チャネルメッセージング
5. 9.5 他の閲覧コンテキストへのブロードキャスト
10 ウェブワーカー
1. 10.1 導入
2. 10.2 基盤
3. 10.3 ワーカーで利用可能なAPI
11 ワークレット
1. 11.1 はじめに
2. 11.2 例
  1. 11.2.1 スクリプトの読み込み
  2. 11.2.2 クラスの登録とそのメソッドの呼び出し
3. 11.3 基盤
12 ウェブストレージ
1. 12.1 はじめに
2. 12.2 API
3. 12.3 プライバシー
  1. 12.3.1 ユーザー追跡
  2. 12.3.2 データの機密性
4. 12.4 セキュリティ
13 HTML の構文
1. 13.1 HTML 文書の記述
2. 13.2 HTML 文書の構文解析
3. 13.3 HTML フラグメントのシリアライズ
4. 13.4 HTML フラグメントの構文解析
5. 13.5 名前付き文字参照
14 XML 構文
1. 14.1 XML 構文による文書の作成
2. 14.2 XML 文書の構文解析
3. 14.3 XML フラグメントのシリアライズ
4. 14.4 XML フラグメントの構文解析
15 レンダリング
1. 15.1 はじめに
2. 15.2 CSS ユーザーエージェントスタイルシートと表示上のヒント
3. 15.3 非置換要素
4. 15.4 置換要素
5. 15.5 ウィジェット
6. 15.6 フレームとフレームセット
7. 15.7 インタラクティブメディア
8. 15.8 印刷媒体
9. 15.9 スタイルなし XML 文書
16 廃止された機能
1. 16.1 廃止されたが適合する機能
  1. 16.1.1 廃止されたが適合する機能に関する警告
2. 16.2 非適合機能
3. 16.3 実装要件
17 IANA に関する考慮事項
1. 17.1 text/html
2. 17.2 multipart/x-mixed-replace
3. 17.3 application/xhtml+xml
4. 17.4 text/ping
5. 17.5 application/microdata+json
6. 17.6 application/speculationrules+json
7. 17.7 text/event-stream
8. 17.8 web+ スキーム接頭辞
索引
1. 要素
2. 要素の内容カテゴリー
3. 属性
4. 元素接口
5. 所有接口
6. 事件
7. HTTP 标头
8. MIME タイプ
参考文献
謝辞
知的財産権

1 はじめに

1.1 この仕様はどこに位置付けられるか？

この仕様は、ウェブプラットフォームの大部分を詳細に定義する。ウェブプラットフォームの仕様体系における、他の仕様との相対的な位置付けは、次のように要約するのが最も適切である：

1.2 これは HTML5 か？

この節は非規範的である。

簡潔に言えば：そうである。

より詳しく言えば、「HTML5」という用語は、現代のウェブ技術を指す流行語として広く使用されており、その多く（ただし、決してすべてではない）が WHATWG で開発されている。この文書はそのような仕様の 1 つであり、その他の仕様は WHATWG 標準の概要から入手できる。

1.3 背景

この節は非規範的である。

HTML は World Wide Web の中核となるマークアップ言語である。HTML は当初、主に科学文書を意味論的に記述するための言語として設計された。しかし、その汎用的な設計により、その後の年月を通じて、その他のさまざまな種類の文書、さらにはアプリケーションを記述するためにも適応されてきた。

1.4 対象読者

この節は非規範的である。

この仕様は、この仕様で定義される機能を使用する文書およびスクリプトの作者、この仕様で定義される機能を使用するページを処理するツールの実装者、ならびにこの仕様の要件に照らして文書または実装の正しさを確認しようとする人を対象としている。

この文書は、ウェブ技術について少なくとも多少の知識をすでに持っていない読者には、おそらく適していない。これは、箇所によっては明瞭さよりも正確さを、簡潔さよりも完全性を優先しているためである。より親しみやすいチュートリアルやオーサリングガイドによって、この主題をより穏やかに紹介できる。

特に、この仕様のより技術的な部分を完全に理解するには、DOM の基本に関する知識が必要である。 Web IDL、HTTP、XML、Unicode、文字エンコーディング、JavaScript、および CSS に関する理解も、箇所によっては役立つが、必須ではない。

1.5 適用範囲

この節は非規範的である。

この仕様は、静的文書から動的アプリケーションまでの、ウェブ上のアクセシブルなページを作成するための意味論レベルのマークアップ言語と、それに関連する意味論レベルのスクリプト API を提供することに限定される。

この仕様の適用範囲には、メディア固有の表示のカスタマイズ機構を提供することは含まれない（ただし、ウェブブラウザー向けの既定のレンダリング規則はこの仕様の末尾に含まれ、 CSS と連携するためのいくつかの機構が言語の一部として提供される）。

この仕様の目的は、オペレーティングシステム全体を記述することではない。特に、ハードウェア構成ソフトウェア、画像操作ツール、およびユーザーが高性能ワークステーションで日常的に使用することが想定されるアプリケーションは適用範囲外である。アプリケーションに関して、この仕様は、ユーザーが時折使用することが想定されるか、または定期的ではあるが異なる場所から使用され、 CPU 要件が低いアプリケーションを特に対象としている。そのようなアプリケーションの例には、オンライン購入システム、検索システム、ゲーム（特にマルチプレイヤーオンラインゲーム）、公開電話帳または住所録、通信ソフトウェア（電子メールクライアント、インスタントメッセージングクライアント、ディスカッションソフトウェア）、文書編集ソフトウェアなどが含まれる。

1.6 歴史

この節は非規範的である。

最初の 5 年間（1990～1995 年）、HTML は多数の改訂と拡張を経た。それらは主として、最初は CERN で、その後は IETF で管理された。

W3C の設立に伴い、HTML の開発場所は再び変更された。1995 年に HTML 3.0 として知られる HTML 拡張の最初の試みが頓挫した後、HTML 3.2 として知られる、より実用的なアプローチへと移行し、これは 1997 年に完成した。同年後半には、すぐに HTML4 が続いた。

翌年、W3C 会員は HTML の発展を停止し、代わりに XHTML と呼ばれる XML ベースの同等物の作業を開始することを決定した。この取り組みは、XHTML 1.0 として知られる、HTML4 の XML による再定式化から始まった。これは新しいシリアライズ以外の新機能を追加せず、2000 年に完成した。 XHTML 1.0 の後、W3C の焦点は、XHTML Modularization の名の下で、他の作業グループが XHTML を拡張しやすくすることへ移った。これと並行して、W3C は以前の HTML および XHTML 言語と互換性のない新しい言語にも取り組み、それを XHTML2 と呼んだ。

HTML の発展が 1998 年に停止された頃、ブラウザーベンダーによって開発された HTML 用 API の一部は、 DOM Level 1（1998 年）、DOM Level 2 Core、および DOM Level 2 HTML（2000 年に開始され、 2003 年に完了）の名称で仕様化され公開された。これらの取り組みはその後衰退し、2004 年にはいくつかの DOM Level 3 仕様が公開されたものの、Level 3 のすべての草案が完成する前に作業グループは閉鎖された。

2003 年、次世代ウェブフォームとして位置付けられた技術である XForms の公開により、 HTML の代替物を探すのではなく、HTML 自体を発展させることへの関心が再燃した。この関心は、ウェブ技術としての XML の展開が、既存の展開済み技術（HTML など）の代替ではなく、完全に新しい技術（RSS や後の Atom など）に限定されているとの認識から生じた。

ブラウザーに既存の HTML ウェブページと互換性のないレンダリングエンジンの実装を要求せずに、 HTML4 のフォームを拡張して XForms 1.0 が導入した多くの機能を提供できることを示す概念実証が、この再燃した関心の最初の成果であった。この初期段階では、草案はすでに一般公開され、あらゆる方面から意見が募集されていたものの、仕様の著作権は Opera Software のみに帰属していた。

HTML の発展を再開すべきであるという考えは、2004 年の W3C ワークショップで検討された。そこでは、HTML5 の作業を支えるいくつかの原則（後述）と、前述したフォーム関連機能のみを扱う初期草案提案が、Mozilla と Opera によって共同で W3C に提示された。この提案は、ウェブの発展について以前に選択された方向性と衝突するという理由で却下され、 W3C のスタッフと会員は、代わりに XML ベースの代替物の開発を継続することを決議した。

その直後、Apple、Mozilla、および Opera は、WHATWG と呼ばれる新しい場の下で、この取り組みを継続する意向を共同で発表した。公開メーリングリストが作成され、草案は WHATWG のサイトへ移された。その後、著作権は 3 社すべての共同所有となるよう修正され、仕様の再利用が許可された。

WHATWG は、いくつかの中核原則に基づいていた。特に、技術は後方互換性を持つ必要があること、たとえ実装ではなく仕様を変更することになっても、仕様と実装は一致する必要があること、そして実装同士が相互にリバースエンジニアリングを行わなくても完全な相互運用性を達成できるほど、仕様は十分に詳細である必要があることが挙げられる。

特に最後の要件により、HTML5 仕様の適用範囲には、それまで 3 つの別個の文書、すなわち HTML4、XHTML1、および DOM2 HTML で仕様化されていた内容を含める必要があった。また、以前に標準と考えられていたものよりも、はるかに多くの詳細を含める必要もあった。

2006 年、W3C は最終的に HTML5 の開発への参加に関心を示し、2007 年には WHATWG と協力して HTML5 仕様を開発することを任務とする作業グループを設立した。Apple、Mozilla、および Opera は、 WHATWG サイト上ではより制限の少ないライセンスの版を維持しながら、W3C が W3C の著作権の下で仕様を公開することを許可した。

その後、両グループは数年間にわたって共同作業を行った。しかし 2011 年、両グループは目標が異なるとの結論に達した。W3C は「HTML5」の「完成」版を公開することを望んだ一方、 WHATWG は HTML の現行標準に引き続き取り組み、既知の問題がある状態で仕様を凍結するのではなく継続的に保守し、プラットフォームを発展させるため必要に応じて新機能を追加することを望んだ。

2019 年、WHATWG と W3C は、今後 HTML の単一の版、すなわちこの文書について協力するための合意に署名した。

1.7 設計上の注記

この節は非規範的である。

HTML の多くの側面が、一見すると無意味で一貫性がないように見えることは認めなければならない。

HTML、その補助 DOM API、および多くの補助技術は、異なる優先事項を持ち、多くの場合は互いの存在を知らなかった多種多様な人々によって、数十年にわたって開発されてきた。

そのため、機能は多くの情報源から生まれ、必ずしも特に一貫した方法で設計されてきたわけではない。さらに、ウェブの独特な特性により、実装のバグは、修正される前にコンテンツが意図せずそれらに依存する形で記述されることが多いため、しばしば事実上の標準となり、現在では法的な標準となっている。

それにもかかわらず、一定の設計目標に従うための努力がなされてきた。これらについては、次のいくつかの小節で説明する。

1.7.1 スクリプト実行の直列化可能性

この節は非規範的である。

ウェブ作者をマルチスレッドの複雑さにさらすことを避けるため、HTML および DOM API は、いかなるスクリプトも他のスクリプトの同時実行を検出できないように設計されている。ワーカーを使用する場合でも、実装の動作は、すべてのグローバルにおけるすべてのスクリプトの実行を完全に直列化するものとして考えられることが意図されている。

この一般的な設計原則の例外は、JavaScript の SharedArrayBuffer クラスである。SharedArrayBuffer オブジェクトを使用すると、他のエージェント内のスクリプトが同時に実行されていることを実際に観測できる。さらに、JavaScript のメモリモデルにより、直列化されたスクリプト実行では表現できないだけでなく、それらのスクリプト間で直列化された文の実行でも表現できない状況が存在する。

1.7.2 拡張性

この節は非規範的である。

HTML には、意味論を安全な方法で追加するために使用できる、幅広い拡張機構がある：

作者は、class 属性を使用して要素を拡張し、事実上独自の要素を作成できる。その際、最も適切な既存の「実際の」HTML 要素を使用することで、その拡張を認識しないブラウザーやその他のツールでも、ある程度適切にサポートできる。これは、たとえば microformats で使用される方法である。
作者は、インラインのクライアント側スクリプトまたはサーバー側のサイト全体のスクリプトが処理するデータを、data-*="" 属性を使用して含めることができる。これらはブラウザーによって一切変更されないことが保証されており、スクリプトが後で検索して処理できるデータを HTML 要素に含められる。
作者は、<meta name="" content=""> 機構を使用して、ページ全体のメタデータを含めることができる。
作者は、rel="" 機構を使用し、事前定義されたリンク型の集合への拡張を登録することで、リンクに特定の意味を注釈として付けることができる。これは microformats でも使用される。
作者は、カスタム型を指定した <script type=""> 機構を使用して、生データを埋め込み、インラインまたはサーバー側のスクリプトでさらに処理できる。
作者は、JavaScript のプロトタイピング機構を使用して API を拡張できる。これは、たとえばスクリプトライブラリーで広く使用されている。
作者は、マイクロデータ機能（itemscope="" および itemprop="" 属性）を使用して、他のアプリケーションやサイトと共有する、入れ子になった名前と値のペアのデータを埋め込むことができる。
作者は、HTML の語彙を拡張するために、カスタム要素を定義、共有、および使用できる。有効なカスタム要素名の要件は、前方互換性を保証する（将来、ハイフンを含むローカル名を持つ要素が HTML、SVG、または MathML に追加されることはないため）。

1.8 HTML 構文と XML 構文

この節は非規範的である。

この仕様は、文書およびアプリケーションを記述するための抽象言語と、この言語を使用するリソースのメモリ内表現と対話するためのいくつかの API を定義する。

このメモリ内表現は「DOM HTML」、略して「DOM」と呼ばれる。

この抽象言語を使用するリソースを転送するために使用できる具体的な構文はいくつかあり、そのうち 2 つがこの仕様で定義される。

最初の具体的な構文は HTML 構文である。これは、ほとんどの作者に推奨される形式である。ほとんどの旧来のウェブブラウザーと互換性がある。文書が text/html MIME 型で転送された場合、ウェブブラウザーによって HTML 文書として処理される。この仕様は、単に「HTML」と呼ばれる最新の HTML 構文を定義する。

2 番目の具体的な構文は XML である。文書が XML MIME 型、たとえば application/xhtml+xml で転送された場合、ウェブブラウザーでは XML 文書として扱われ、XML プロセッサーによって構文解析される。作者は、XML と HTML では処理が異なることに注意する必要がある。特に、XML として示された文書では、わずかな構文エラーであっても文書全体のレンダリングを妨げるが、HTML 構文では無視される。

HTML の XML 構文は、以前は「XHTML」と呼ばれていたが、この仕様ではその用語を使用しない（理由の 1 つは、MathML および SVG の HTML 構文に対してそのような用語が使用されていないためである）。

DOM、HTML 構文、および XML 構文は、すべて同じ内容を表現できるわけではない。たとえば、名前空間は HTML 構文では表現できないが、DOM および XML 構文ではサポートされる。同様に、noscript 機能を使用する文書は HTML 構文では表現できるが、DOM または XML 構文では表現できない。文字列「-->」を含むコメントは、DOM でのみ表現でき、HTML および XML 構文では表現できない。

1.9 この仕様の構成

この節は非規範的である。

この仕様は、次の主要な節に分かれている：

はじめに: HTML 標準の背景を提供する非規範的な資料。
共通基盤: 適合性クラス、アルゴリズム、定義、および仕様の残りの部分に共通する基盤。
HTML 文書のセマンティクス、構造、および API: 文書は要素から構築される。これらの要素は DOM を使用してツリーを形成する。この節では、この DOM の機能を定義するとともに、すべての要素に共通する機能と、要素の定義に使用される概念を紹介する。
HTML の要素: 各要素には事前定義された意味があり、この節で説明される。その要素をどのように使用するかに関する作者向けの規則と、各要素をどのように処理するかに関するユーザーエージェントの要件も示される。これには、映像の再生と字幕、フォームコントロールとフォーム送信、HTML canvas と呼ばれる 2D グラフィックス API など、HTML の主要な代表的機能が含まれる。
マイクロデータ: この仕様は、ツールが文書から名前と値のペアのツリーを抽出できるように、文書へ機械可読な注釈を追加する機構を導入する。この節では、この機構と、 HTML 文書をその他の形式へ変換するために使用できるいくつかのアルゴリズムについて説明する。また、この節では、連絡先情報、カレンダーイベント、および著作物のライセンス用のマイクロデータ語彙の例も定義する。
ユーザーインタラクション: HTML 文書は、フォーカスの動作やドラッグ＆ドロップなど、ユーザーがコンテンツと対話し、変更するための多数の機構を提供できる。この節ではそれらについて説明する。
ウェブページの読み込み: HTML 文書は孤立して存在するものではない。この節では、ウェブブラウザーなど、複数のページを扱う環境に影響を及ぼす多くの機能を定義する。
ウェブアプリケーション API: この節では、HTML におけるアプリケーションのスクリプト処理のための基本機能を紹介する。
ウェブワーカー: この節では、JavaScript のバックグラウンドスレッド用 API を定義する。
ワークレット: この節では、JavaScript をメインの JavaScript 実行環境とは別に実行する必要がある API の基盤を定義する。
通信 API: この節では、HTML で記述されたアプリケーションが、同じクライアント上で実行される異なるドメインの他のアプリケーションと通信するために使用できるいくつかの機構について説明する。また、Server Sent Events または EventSource として知られるサーバープッシュイベントストリーム機構と、Web Sockets として知られるスクリプト用の双方向全二重ソケットプロトコルも紹介する。
ウェブストレージ: この節では、名前と値のペアに基づくクライアント側ストレージ機構を定義する。
HTML 構文
XML 構文: これらすべての機能も、シリアライズされた形式で表現して他者へ送信できなければ意味がない。したがって、これらの節では HTML および XML の構文と、それらの構文を使用してコンテンツを構文解析するための規則を定義する。
レンダリング: この節では、ウェブブラウザーの既定のレンダリング規則を定義する。

さらに、廃止された機能および IANA に関する考慮事項を列挙するいくつかの附属書と、複数の索引がある。

1.9.1 この仕様の読み方

この仕様は、他のすべての仕様と同様に読むべきである。まず、最初から最後まで複数回読む。次に、少なくとも一度は逆順に読む。その後、目次から無作為に節を選び、すべての相互参照をたどりながら読む。

後述する適合性要件の節で説明するように、この仕様はさまざまな適合性クラスに対する適合性基準を記述する。特に、作者や作者が作成する文書などの生成者に適用される適合性要件と、ウェブブラウザーなどの消費者に適用される適合性要件がある。これらは、何を要求しているかによって区別できる。生成者に対する要件は何が許可されるかを示し、消費者に対する要件はソフトウェアがどのように動作するかを示す。

たとえば、「foo 属性の値は有効な整数でなければならない」という記述は、許可される値を示しているため、生成者に対する要件である。これに対して、「foo 属性の値は整数を構文解析する規則を使用して構文解析しなければならない」という要件は、コンテンツをどのように処理するかを説明しているため、消費者に対する要件である。

生成者に対する要件は、消費者には一切影響しない。

上記の例を続けると、特定の属性値が有効な整数に制約されるという要件は、消費者に対する要件について何も意味しない。実際には、消費者が、その値が要件に適合するかどうかにまったく影響されず、その属性を不透明な文字列として扱うよう要求される可能性がある。または、前の例のように、無効な値（この場合は数値でない値）をどのように処理するかを定義する特定の規則を使用して、値を構文解析するよう消費者に要求される可能性もある。

1.9.2 表記規則

これは定義、要件、または説明である。

これは注記である。

これは例である。

これは未解決の Issue である。

これは警告である。

[Exposed=Window]
interface Example {
  // this is an IDL definition
};

variable = object.method([optionalArgument]): これは、インターフェイスの使用方法を説明する作者向けの注記である。

/* this is a CSS fragment */

用語を定義する箇所は、このようにマークアップされる。その用語の使用箇所は、このように、または このようにマークアップされる。

要素、属性、または API を定義する箇所は、このようにマークアップされる。その要素、属性、または API への参照は、 このようにマークアップされる。

その他のコード断片は、このようにマークアップされる。

変数は、このようにマークアップされる。

アルゴリズムでは、同期セクション内の手順には ⌛ が付けられる。

場合によっては、要件は条件とそれに対応する要件を含むリストの形式で示される。そのような場合、ある条件に適用される要件は、その要件に複数の条件群がある場合であっても、常にその条件の後に続く最初の要件群である。そのような場合は、次のように示される：

これは条件である
これは別の条件である: これは上記の条件に適用される要件である。
これは 3 番目の条件である: これは 3 番目の条件に適用される要件である。

1.10 HTML の簡単な紹介

この節は非規範的である。

基本的な HTML 文書は、次のようになる：

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Sample page</title>
 </head>
 <body>
  <h1>Sample page</h1>
  <p>This is a <a href="demo.html">simple</a> sample.</p>
  <!-- this is a comment -->
 </body>
</html>

HTML 文書は、要素とテキストのツリーから構成される。各要素は、ソース内で「<body>」などの開始タグと、「</body>」などの終了タグによって示される。（特定の開始タグおよび終了タグは、場合によっては省略でき、他のタグによって暗黙的に補われる。）

タグは、要素同士が重なることなく、すべて完全に互いの内側に収まるように入れ子にしなければならない：

<p>This is <em>very <strong>wrong</em>!</strong></p>

<p>This <em>is <strong>correct</strong>.</em></p>

この仕様は、HTML で使用できる要素の集合と、要素を入れ子にできる方法に関する規則を定義する。

要素は、その動作を制御する属性を持つことができる。次の例には、a 要素とその href 属性を使用して形成されたハイパーリンクがある：

<a href="demo.html">simple</a>

属性は開始タグの内側に配置され、「=」文字で区切られた名前と値から構成される。属性値に ASCII 空白、または "、'、`、=、<、 > のいずれも含まれない場合、属性値は引用符なしのままにできる。それ以外の場合は、単一引用符または二重引用符で囲まなければならない。値が空文字列の場合、値は「=」文字とともに完全に省略できる。

<!-- empty attributes -->
<input name=address disabled>
<input name=address disabled="">

<!-- attributes with a value -->
<input name=address maxlength=200>
<input name=address maxlength='200'>
<input name=address maxlength="200">

HTML ユーザーエージェント（たとえばウェブブラウザー）は、このマークアップを構文解析し、 DOM（Document Object Model）ツリーへ変換する。DOM ツリーは、文書のメモリ内表現である。

DOM ツリーには複数の種類のノードが含まれ、特に DocumentType ノード、 Element ノード、Text ノード、Comment ノード、および場合によっては ProcessingInstruction ノードが含まれる。

この節の冒頭にあるマークアップ断片は、次の DOM ツリーへ変換される：

DOCTYPE: html
html lang="en"
- head
  - #text: ⏎␣␣
  - title
    - #text: Sample page
  - #text: ⏎␣
- #text: ⏎␣
- body
  - #text: ⏎␣␣
  - h1
    - #text: Sample page
  - #text: ⏎␣␣
  - p
    - #text: This is a
    - a href="demo.html"
      - #text: simple
    - #text: sample.
  - #text: ⏎␣␣
  - #comment: this is a comment
  - #text: ⏎␣⏎

このツリーの文書要素は html 要素であり、 HTML 文書では常にこの位置にある要素である。これは、head と body の 2 つの要素と、それらの間にある Text ノードを含む。

DOM ツリーには、最初に予想されるよりもはるかに多くの Text ノードが含まれる。これは、ソースに多数の空白（ここでは「␣」で表す）と改行（「⏎」）が含まれ、それらがすべて DOM 内の Text ノードになるためである。ただし、歴史的な理由により、元のマークアップ内のすべての空白と改行が DOM に現れるわけではない。特に、head 開始タグの前のすべての空白は黙って破棄され、body 終了タグの後のすべての空白は、body の末尾に配置される。

head 要素は title 要素を含み、その要素自体がテキスト「Sample page」を持つ Text ノードを含む。同様に、body 要素は、 h1 要素、p 要素、およびコメントを含む。

この DOM ツリーは、ページ内のスクリプトから操作できる。スクリプト（通常は JavaScript）は、 script 要素またはイベントハンドラーコンテンツ属性を使用して埋め込める小さなプログラムである。たとえば次は、フォームの output 要素の値を「Hello World」に設定するスクリプトを持つフォームである：

<form name="main">
 Result: <output name="result"></output>
 <script>
  document.forms.main.elements.result.value = 'Hello World';
 </script>
</form>

DOM ツリー内の各要素はオブジェクトによって表され、これらのオブジェクトには操作のための API がある。たとえば、リンク（上記のツリー内の a 要素など）は、その「href」属性を複数の方法で変更できる：

var a = document.links[0]; // obtain the first link in the document
a.href = 'sample.html'; // change the destination URL of the link
a.protocol = 'https'; // change just the scheme part of the URL
a.setAttribute('href', 'https://example.com/'); // change the content attribute directly

DOM ツリーは、実装（特にウェブブラウザーのようなインタラクティブな実装）が HTML 文書を処理し、表示するときの表現方法として使用されるため、この仕様は、上記のマークアップではなく、主として DOM ツリーを基準として記述されている。

HTML 文書は、インタラクティブなコンテンツをメディアに依存せず記述する。 HTML 文書は、画面、音声合成装置、または点字ディスプレイにレンダリングされる可能性がある。そのようなレンダリングが正確にどのように行われるかへ影響を与えるため、作者は CSS などのスタイル言語を使用できる。

次の例では、CSS を使用してページを青地に黄色としている。

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Sample styled page</title>
  <style>
   body { background: navy; color: yellow; }
  </style>
 </head>
 <body>
  <h1>Sample styled page</h1>
  <p>This page is just a demo.</p>
 </body>
</html>

HTML の使用方法に関する詳細については、作者はチュートリアルおよびガイドを参照することが推奨される。この仕様に含まれるいくつかの例も役立つ可能性があるが、この仕様は必然的に、最初は理解するのが難しい可能性のある詳細さで言語を定義しているため、初心者の作者は注意する必要がある。

1.10.1 HTML を使用した安全なアプリケーションの作成

この節は非規範的である。

HTML を使用してインタラクティブなサイトを作成する場合、攻撃者がサイト自体またはサイトのユーザーの完全性を侵害できる脆弱性を持ち込まないよう注意する必要がある。

この問題の包括的な研究は、この文書の適用範囲を超えているため、作者にはこの問題をさらに詳細に学習することを強く推奨する。ただし、この節では、HTML アプリケーション開発における一般的な落とし穴の一部を簡単に紹介する。

ウェブのセキュリティモデルは「オリジン」の概念に基づいており、それに対応して、ウェブ上の潜在的な攻撃の多くはクロスオリジンの操作を伴う。[ORIGIN]

ユーザー入力を検証しないこと

クロスサイトスクリプティング（XSS）

SQL インジェクション

テキストコメントなどのユーザー生成コンテンツ、URL パラメーター内の値、第三者サイトからのメッセージなど、信頼できない入力を受け入れる場合、データを使用前に検証し、表示時に適切にエスケープすることが不可欠である。これを怠ると、悪意のあるユーザーは、負の年齢などの偽のユーザー情報を提供する比較的無害なものから、その情報を含むページをユーザーが見るたびにスクリプトを実行し、その過程で攻撃を拡散する可能性のある深刻なもの、さらにはサーバー上のすべてのデータを削除するような壊滅的なものまで、さまざまな攻撃を実行できる。

ユーザー入力を検証するフィルターを記述する場合、フィルターは常にセーフリストに基づき、安全であることが既知の構造のみを許可し、その他すべての入力を禁止することが不可欠である。既知の悪い入力を禁止して、それ以外をすべて許可するブロックリストベースのフィルターは安全ではない。悪いもののすべてがまだ知られているわけではないためである（たとえば、将来発明される可能性がある）。

たとえば、あるページが URL のクエリー文字列を確認して何を表示するかを決定し、サイトがメッセージを表示するためにユーザーをそのページへリダイレクトするとする：

<ul>
 <li><a href="message.cgi?say=Hello">Say Hello</a>
 <li><a href="message.cgi?say=Welcome">Say Welcome</a>
 <li><a href="message.cgi?say=Kittens">Say Kittens</a>
</ul>

メッセージがエスケープされずにそのままユーザーへ表示される場合、悪意のある攻撃者は script 要素を含む URL を作成できる：

https://example.com/message.cgi?say=%3Cscript%3Ealert%28%27Oh%20no%21%27%29%3C/script%3E

攻撃者が被害ユーザーを説得してこのページへアクセスさせた場合、攻撃者が選んだスクリプトがページ上で実行される。そのようなスクリプトは、サイトが提供する機能によってのみ制限される、あらゆる数の悪意ある操作を実行できる。たとえばサイトが電子商取引店であれば、そのようなスクリプトによって、ユーザーが知らないうちに任意の数の不要な購入を行わされる可能性がある。

これは、クロスサイトスクリプティング攻撃と呼ばれる。

サイトにコードを実行させるために使用できる構造は多数ある。次は、作者がセーフリストフィルターを作成するときに考慮することが推奨されるものの一部である：

img のような無害に見える要素を許可する場合、指定される属性もセーフリストに登録することが重要である。すべての属性を許可すると、攻撃者は、たとえば onload 属性を使用して任意のスクリプトを実行できる。
URL の指定を許可する場合（たとえばリンク用）、悪用可能なスキームが多数あるため、各 URL のスキームも明示的にセーフリストに登録する必要がある。最も顕著な例は「javascript:」であるが、ユーザーエージェントはその他のスキームも実装できる（実際、歴史的に実装してきた）。
base 要素の挿入を許可すると、相対リンクを持つページ内のすべての script 要素が乗っ取られる可能性があり、同様に、すべてのフォーム送信を悪意のあるサイトへリダイレクトできる。

クロスサイトリクエストフォージェリ（CSRF）

サイトが、ユーザー名でフォーラムへメッセージを投稿する、購入を行う、パスポートを申請するなど、ユーザー固有の副作用を伴うフォーム送信をユーザーに許可する場合、その要求が、別のサイトにだまされてユーザーが知らずに行ったものではなく、ユーザーが意図的に行ったものであることを検証することが重要である。

この問題は、HTML フォームを他のオリジンへ送信できるために存在する。

サイトは、フォームにユーザー固有の非表示トークンを設定するか、すべての要求で `Origin` ヘッダーを検査することで、このような攻撃を防止できる。

クリックジャッキング

ユーザーが実行したくない可能性のある操作を実行するためのインターフェイスを提供するページは、ユーザーがだまされてそのインターフェイスを作動させる可能性を避けるよう設計する必要がある。

ユーザーがこのようにだまされる方法の 1 つとして、悪意のあるサイトが被害サイトを小さな iframe 内に配置し、その後、たとえば反応ゲームをプレイさせることで、ユーザーにクリックするよう促す方法がある。ユーザーがゲームをプレイし始めた後、悪意のあるサイトは、ユーザーがクリックしようとする直前に iframe をマウスカーソルの下へすばやく配置し、被害サイトのインターフェイスをクリックさせることができる。

これを避けるため、フレーム内で使用されることを想定していないサイトは、自身がフレーム内にないことを検出した場合にのみインターフェイスを有効にすることが推奨される（たとえば、window オブジェクトと top 属性の値を比較する）。

1.10.2 スクリプト API の使用時に避けるべき一般的な落とし穴

この節は非規範的である。

HTML 内のスクリプトには「完了まで実行」のセマンティクスがある。これは、ブラウザーが通常、その後のイベントの発火や文書の構文解析の継続など、他の処理を行う前に、スクリプトを中断せずに実行することを意味する。

一方、HTML ファイルの構文解析は段階的に行われる。つまり、構文解析器は任意の時点で一時停止して、スクリプトを実行させることができる。これは一般に良いことであるが、イベントがすでに発火している可能性がある後でイベントハンドラーを接続しないよう、作者が注意する必要があることを意味する。

これを確実に行うための技法は 2 つある。イベントハンドラーコンテンツ属性を使用するか、同じスクリプト内で要素を作成してイベントハンドラーを追加する。後者は、前述したように、その後のイベントが発火する前にスクリプトが完了まで実行されるため安全である。

これが現れる場合の 1 つは、img 要素と load イベントである。特に画像がすでにキャッシュされている場合（よくあることだが）、要素が構文解析されるとすぐにイベントが発火する可能性がある。

ここで作者は、img 要素の onload ハンドラーを使用して、load イベントを捕捉する：

<img src="games.png" alt="Games" onload="gamesLogoHasLoaded(event)">

要素がスクリプトによって追加される場合、イベントハンドラーが同じスクリプト内で追加される限り、イベントを取り逃すことはない：

<script>
 var img = new Image();
 img.src = 'games.png';
 img.alt = 'Games';
 img.onload = gamesLogoHasLoaded;
 // img.addEventListener('load', gamesLogoHasLoaded, false); // would work also
</script>

しかし、作者が最初に img 要素を作成し、その後、別のスクリプトでイベントリスナーを追加した場合、その間に load イベントが発火し、取り逃す可能性がある：

<!-- Do not use this style, it has a race condition! -->
 <img id="games" src="games.png" alt="Games">
 <!-- the 'load' event might fire here while the parser is taking a
      break, in which case you will not see it! -->
 <script>
  var img = document.getElementById('games');
  img.onload = gamesLogoHasLoaded; // might never fire!
 </script>

1.10.3 HTML 作成時の誤りを検出する方法：バリデーターと適合性チェッカー

この節は非規範的である。

作者は、一般的な誤りを検出するため、適合性チェッカー（バリデーターとも呼ばれる）を使用することが推奨される。WHATWG は、そのようなツールの一覧を次の場所で管理している：https://whatwg.org/validator/

1.11 作者に対する適合性要件

この節は非規範的である。

以前の版の HTML 仕様とは異なり、この仕様は、有効な文書だけでなく無効な文書に必要な処理もある程度詳細に定義する。

しかし、無効なコンテンツの処理がほとんどの場合に明確に定義されていても、文書の適合性要件は依然として重要である。実際には、相互運用性（すべての実装が特定のコンテンツを信頼性のある、同一または同等の方法で処理する状況）は、文書の適合性要件の唯一の目標ではない。この節では、適合する文書とエラーを含む文書を依然として区別する、より一般的な理由の一部を詳述する。

1.11.1 表現用マークアップ

この節は非規範的である。

以前の版の HTML に存在した表現用機能の大部分は、もはや許可されていない。表現用マークアップには、一般に多数の問題があることが判明している：

表現用要素を使用するとアクセシビリティが低下する

支援技術（AT）のユーザーに許容可能な体験を提供する方法で表現用マークアップを使用することは可能だが（たとえば ARIA を使用する）、意味論的に適切なマークアップを使用する場合よりも著しく困難である。さらに、そのような技法を使用しても、テキストモードブラウザーのユーザーなど、 AT を使用しない非グラフィカルユーザーにとってページをアクセシブルにする助けにはならない。

一方、メディアに依存しないマークアップを使用すると、より多くのユーザー（たとえばテキストブラウザーのユーザー）が利用できるよう文書を作成するための簡単な方法が得られる。

保守コストの増加

マークアップがスタイルに依存しない形で作成されたサイトは、著しく保守しやすい。たとえば、サイト全体で <font color=""> を使用するサイトの色を変更するには、サイト全体にわたる変更が必要になる。一方、CSS に基づくサイトでは、単一のファイルを変更するだけで同様の変更を行える。

文書サイズの増加

表現用マークアップは、はるかに冗長になる傾向があり、その結果、文書サイズが大きくなる。

これらの理由により、この版の HTML から表現用マークアップは削除された。この変更は驚くべきものではない。 HTML4 は何年も前に表現用マークアップを非推奨とし、作者が表現用マークアップから移行するのを支援するモード（HTML4 Transitional）を提供した。その後、XHTML 1.1 はさらに進んで、これらの機能を完全に廃止した。

HTML に残っている表現用マークアップ機能は、style 属性と style 要素のみである。 style 属性の使用は、本番環境では多少推奨されないが、迅速なプロトタイピング（後でその規則を別のスタイルシートへ直接移動できる場合）や、別のスタイルシートが不便な特殊な場合に特定のスタイルを提供するために役立つ。同様に、style 要素は、配信時またはページ固有のスタイルに役立つ可能性があるが、一般に、スタイルが複数のページに適用される場合は外部スタイルシートの方が便利である可能性が高い。

以前は表現用であったいくつかの要素が、この仕様ではメディアに依存しないよう再定義されたことにも注目する価値がある：b、i、hr、s、small、および u。

1.11.2 構文エラー

この節は非規範的である。

HTML の構文は、さまざまな問題を回避するため制約されている。

直感に反するエラー処理動作

特定の無効な構文構造を構文解析すると、非常に直感に反する DOM ツリーが生成される。

たとえば、次のマークアップ断片は、対応する table 要素よりも前の兄弟となる hr 要素を持つ DOM を生成する：

<table><hr>...

任意のエラー回復を伴うエラー

ユーザーエージェントが、より奇妙で複雑なエラー処理規則を実装せずに制御された環境で使用できるようにするため、ユーザーエージェントは構文解析エラーに遭遇した場合、処理を失敗させることが許可される。

エラー処理動作がストリーミングユーザーエージェントと互換性を持たないエラー

上記の <table><hr>... の例における動作など、一部のエラー処理動作は、ストリーミングユーザーエージェント（状態を保存せず、HTML ファイルを 1 回の処理で扱うユーザーエージェント）と互換性がない。そのようなユーザーエージェントとの相互運用性の問題を回避するため、そのような動作を引き起こす構文は無効と見なされる。

情報集合の強制変換を引き起こす可能性のあるエラー

XML に基づくユーザーエージェントが HTML 構文解析器へ接続される場合、要素名または属性名に複数のコロンが含まれないなど、XML が強制する特定の不変条件が HTML ファイルによって違反される可能性がある。これを処理するには、構文解析器が HTML DOM を XML 互換の情報集合へ強制変換する必要がある場合がある。そのような処理を必要とする構文構造の大部分は無効と見なされる。（連続する 2 つのハイフンを含むコメント、またはハイフンで終わるコメントは、 HTML 構文で許可される例外である。）

不釣り合いに低いパフォーマンスをもたらすエラー

特定の構文構造は、不釣り合いに低いパフォーマンスをもたらす可能性がある。そのような構造の使用を抑止するため、通常は非適合とされる。

たとえば、次のマークアップは低いパフォーマンスをもたらす。閉じられていないすべての i 要素を各段落で再構築する必要があり、各段落の要素数が次第に増加するためである：

<p><i>She dreamt.
<p><i>She dreamt that she ate breakfast.
<p><i>Then lunch.
<p><i>And finally dinner.

この断片から生成される DOM は次のようになる：

p
- i
  - #text: She dreamt.
p
- i
  - i
    - #text: She dreamt that she ate breakfast.
p
- i
  - i
    - i
      - #text: Then lunch.
p
- i
  - i
    - i
      - i
        
        #text: And finally dinner.

壊れやすい構文構造を伴うエラー

歴史的な理由により、比較的壊れやすい構文構造が存在する。ユーザーが誤ってそのような問題に遭遇する数を減らすため、これらは非適合とされる。

たとえば、属性内の特定の名前付き文字参照は、終了セミコロンが省略されていても構文解析される。名前付き文字参照を形成しない文字列がアンパサンドの後に続く場合は安全だが、文字列が名前付き文字参照を形成するものへ変更されると、代わりにその文字として解釈される。

この断片では、属性値は「?bill&ted」である：

<a href="?bill&ted">Bill and Ted</a>

しかし、次の断片では、属性値は意図された「?art&copy」ではなく、実際には「?art©」である。これは、最後のセミコロンがなくても、「&copy」が「©」と同様に処理され、「©」として解釈されるためである：

<a href="?art&copy">Art and Copy</a>

この問題を避けるため、すべての名前付き文字参照はセミコロンで終わることが要求され、セミコロンを伴わない名前付き文字参照の使用はエラーとして示される。

したがって、上記の場合を正しく表現する方法は次のとおりである：

<a href="?bill&ted">Bill and Ted</a> <!-- &ted is ok, since it's not a named character reference -->

<a href="?art&amp;copy">Art and Copy</a> <!-- the & has to be escaped, since &copy is a named character reference -->

旧来のユーザーエージェントにおける既知の相互運用性問題を伴うエラー

特定の構文構造は、旧来のユーザーエージェントで特に微妙または深刻な問題を引き起こすことが知られているため、作者がそれらを避けられるよう非適合として示される。

たとえば、U+0060 GRAVE ACCENT 文字（`）が引用符なし属性で許可されないのは、このためである。特定の旧来のユーザーエージェントでは、引用符文字として扱われる場合がある。

もう 1 つの例は DOCTYPE であり、これは非互換モードでないモードを作動させることが要求される。これは、旧来のユーザーエージェントの互換モードにおける動作が、多くの場合ほとんど文書化されていないためである。

作者をセキュリティ攻撃にさらすおそれのあるエラー

特定の制限は、既知のセキュリティ問題を避けることだけを目的として存在する。

たとえば、UTF-7 の使用制限は、作者が UTF-7 を使用する既知のクロスサイトスクリプティング攻撃の被害を受けることを避けるためだけに存在する。[UTF7]

作者の意図が不明確な場合

作者の意図が非常に不明確なマークアップは、しばしば非適合とされる。これらのエラーを早期に修正することで、その後の保守が容易になる。

たとえば、作者が次のものを h1 見出しとして意図したのか、h2 見出しとして意図したのかは不明確である：

<h1>Contact details</h2>

タイプミスである可能性が高い場合

ユーザーが単純なタイプミスをした場合、エラーを早期に検出できれば、作者のデバッグ時間を大幅に節約できる。そのため、この仕様では通常、この仕様で定義された名前と一致しない要素名、属性名などを使用することをエラーと見なす。

たとえば、作者が <caption> の代わりに <capton> と入力した場合、エラーとして示され、作者はタイプミスを直ちに修正できる。

将来の新しい構文を妨げる可能性のあるエラー

将来、言語の構文を拡張できるようにするため、それ以外では無害な特定の機能が禁止される。

たとえば、終了タグ内の「属性」は現在無視されるが、将来の言語変更で、すでに展開されている（かつ有効な）コンテンツと衝突せずにその構文機能を使用できるように、無効とされる。

一部の作者は、すべての属性を常に引用符で囲み、すべての省略可能なタグを常に含める習慣が有益だと考える。そのような慣習から得られる一貫性を、HTML 構文の柔軟性を利用して得られるわずかな簡潔さよりも優先するためである。そのような作者を支援するため、適合性チェッカーは、そのような慣習を強制する動作モードを提供できる。

1.11.3 コンテンツモデルおよび属性値に関する制限

この節は非規範的である。

言語の構文に加えて、この仕様は要素および属性をどのように指定できるかにも制限を設ける。これらの制限は、同様の理由で存在する：

疑わしいセマンティクスを持つコンテンツに関するエラー

定義された意味を持つ要素の誤用を避けるため、そのような入れ子が疑わしい価値しか持たない場合に、要素をどのように入れ子にできるかを制限するコンテンツモデルが定義される。

たとえば、この仕様では、section 要素を kbd 要素の内側に入れ子にすることを禁止している。これは、作者がセクション全体をキー入力すべきことを示そうとする可能性が非常に低いためである。

表現されたセマンティクスの衝突を伴うエラー

同様に、要素の使用における誤りへ作者の注意を向けるため、表現されたセマンティクスの明確な矛盾も適合性エラーと見なされる。

たとえば、次の断片ではセマンティクスが無意味である。区切りを同時にセルとすることはできず、ラジオボタンをプログレスバーとすることもできない。

<hr role="cell">

<input type=radio role=progressbar>

もう 1 つの例は、ul 要素のコンテンツモデルに対する制限であり、これは子として li 要素のみを許可する。リストは定義上、0 個以上のリスト項目のみから構成されるため、 ul 要素が li 要素以外のものを含む場合、何を意図したのかが不明確になる。

既定のスタイルが混乱を招く可能性が高い場合

特定の要素には、特定の組み合わせが混乱を招く可能性を高くする既定のスタイルまたは動作がある。この問題のない同等の代替手段が存在する場合、混乱を招く組み合わせは禁止される。

たとえば、div 要素はブロックボックスとしてレンダリングされ、span 要素はインラインボックスとしてレンダリングされる。ブロックボックスをインラインボックス内に配置することは不必要に混乱を招く。div 要素だけを入れ子にする、span 要素だけを入れ子にする、または div 要素の内側に span 要素を入れ子にすることはすべて、span 要素の内側に div 要素を入れ子にすることと同じ目的を果たすが、最後のものだけがインラインボックス内にブロックボックスを含むため、最後の組み合わせは禁止される。

もう 1 つの例は、インタラクティブコンテンツを入れ子にできないことに関するものである。たとえば、button 要素は textarea 要素を含むことができない。これは、そのようなインタラクティブ要素を入れ子にした場合の既定の動作が、ユーザーにとって非常に混乱を招くためである。これらの要素を入れ子にする代わりに、並べて配置できる。

仕様の誤解を示す可能性が高いエラー

何かを許可すると作者の混乱を招く可能性が高いため、それが禁止される場合がある。

たとえば、disabled 属性を値「false」に設定することは禁止される。見た目上は要素が有効であることを意味するように見えるが、実際には要素が無効であることを意味するためである（実装にとって重要なのは、属性の値ではなく属性の存在である）。

言語を単純化するためだけに課された制限を伴うエラー

一部の適合性エラーは、作者が学ぶ必要のある言語を単純化する。

たとえば、area 要素の shape 属性は、実際には circ と circle の両方を同義語として受け入れるが、チュートリアルやその他の学習資料を単純化するため、 circ 値の使用を禁止する。両方を許可しても利益はないが、言語を教える際に余計な混乱を招くためである。

構文解析器の特殊性を伴うエラー

特定の要素は、多少特殊な方法で構文解析される（通常は歴史的な理由による）。そのコンテンツモデルの制限は、作者がこれらの問題にさらされないようにすることを目的としている。

たとえば、form 要素は、フレージングコンテンツの内側では許可されない。HTML として構文解析される場合、form 要素の開始タグによって、p 要素の終了タグが暗黙的に補われるためである。したがって、次のマークアップは、 1 つではなく 2 つの段落を生成する：

<p>Welcome. <form><label>Name:</label> <input></form>

これは、次のものとまったく同じように構文解析される：

<p>Welcome. </p><form><label>Name:</label> <input></form>

デバッグが困難な方法でスクリプトが失敗する可能性が高いエラー

一部のエラーは、デバッグが困難なスクリプトの問題を防ぐことを目的としている。

これが、たとえば、同じ値を持つ 2 つの id 属性を持つことが非適合とされる理由である。重複する ID は誤った要素を選択させ、場合によっては原因の特定が困難な壊滅的影響を引き起こす。

オーサリング時間を浪費するエラー

一部の構造は、歴史的に多くのオーサリング時間を浪費する原因となってきたため禁止される。作者がそのような構造を避けることを促すことで、将来の作業時間を節約できる。

たとえば、script 要素の src 属性により、要素の内容は無視される。しかし、特に要素の内容が実行可能なスクリプトに見える場合、これは明らかではない。そのため、作者はインラインスクリプトが実行されていないことに気付かず、デバッグに多くの時間を費やす可能性がある。この問題を減らすため、この仕様では、src 属性が存在する場合に、script 要素内に実行可能なスクリプトを含めることを非適合としている。これにより、文書を検証する作者は、この種の誤りで時間を浪費する可能性が低くなる。

HTML 構文と XML 構文の間を移行する作者に影響する領域を伴うエラー

一部の作者は、XML と HTML の両方として解釈した場合に同様の結果となるファイルを作成することを好む。この慣行は、特にスクリプト処理、スタイル処理、またはあらゆる種類の自動シリアライズが関係する場合、無数の微妙な複雑さを伴うため一般には推奨されないが、この仕様には、少なくともある程度困難を軽減することを意図した制限がいくつかある。これにより、作者は HTML 構文と XML 構文の間を移行する際の移行段階として、これを使用しやすくなる。

たとえば、lang と xml:lang 属性を同期した状態に保つことを意図した、多少複雑な規則がある。

もう 1 つの例は、HTML シリアライズにおける xmlns 属性の値に対する制限であり、適合する文書内の要素が、HTML または XML のどちらとして処理される場合でも同じ名前空間に属することを保証することを意図している。

将来の拡張用に予約された領域を伴うエラー

将来の言語改訂で新しい構文を使用できるようにすることを意図した構文上の制限と同様に、要素のコンテンツモデルおよび属性値に対する一部の制限は、HTML の語彙を将来拡張できるようにすることを意図している。

たとえば、U+005F LOW LINE 文字（_）で始まる target 属性の値を特定の事前定義された値のみに制限することで、作者定義の値と衝突せずに、将来新しい事前定義値を導入できる。

他の仕様の誤用を示すエラー

特定の制限は、他の仕様によって設けられた制限を支援することを意図している。

たとえば、メディアクエリーリストを取る属性に有効なメディアクエリーリストのみを使用するよう要求することで、その仕様の適合性規則に従うことの重要性が強化される。

1.12 推奨文献

この節は非規範的である。

次の文書は、この仕様の読者にとって参考になる可能性がある。

World Wide Web の文字モデル 1.0：基礎 [CHARMOD]: このアーキテクチャ仕様は、Unicode 標準と ISO/IEC 10646 によって共同で定義される Universal Character Set を基盤として、World Wide Web 上で相互運用可能なテキスト操作を行うための共通の参照を、仕様の作者、ソフトウェア開発者、およびコンテンツ開発者に提供する。扱う主題には、「文字」、「エンコーディング」、および「文字列」という用語の使用、参照処理モデル、文字エンコーディングの選択と識別、文字のエスケープ、および文字列のインデックス付けが含まれる。
Unicode のセキュリティに関する考慮事項 [UTR36]: Unicode には非常に多数の文字が含まれ、世界中の多様な書記体系が取り込まれているため、誤った使用によってプログラムまたはシステムがセキュリティ攻撃を受ける可能性がある。製品の国際化がますます進むにつれて、これは特に重要となる。この文書では、プログラマー、システムアナリスト、標準開発者、およびユーザーが考慮すべきセキュリティ上の事項について説明し、問題のリスクを軽減するための具体的な推奨事項を示す。
ウェブコンテンツアクセシビリティガイドライン（WCAG） [WCAG]: ウェブコンテンツアクセシビリティガイドライン（WCAG）は、ウェブコンテンツをよりアクセシブルにするための幅広い推奨事項を扱う。これらのガイドラインに従うことで、全盲およびロービジョン、聴覚障害および難聴、学習障害、認知上の制約、運動制限、発話障害、光過敏症、ならびにこれらを併せ持つ人々を含む、より幅広い障害者がコンテンツを利用できるようになる。また、これらのガイドラインに従うことで、一般のユーザーにとってもウェブコンテンツが使いやすくなる場合が多い。
オーサリングツールアクセシビリティガイドライン（ATAG）2.0 [ATAG]: この仕様は、障害者にとってよりアクセシブルなウェブコンテンツオーサリングツールを設計するためのガイドラインを提供する。これらのガイドラインに適合するオーサリングツールは、障害のある作者にアクセシブルなユーザーインターフェイスを提供するとともに、すべての作者によるアクセシブルなウェブコンテンツの制作を可能にし、支援し、促進することで、アクセシビリティを推進する。
ユーザーエージェントアクセシビリティガイドライン（UAAG）2.0 [UAAG]: この文書は、障害者にとってのウェブアクセシビリティ上の障壁を軽減するユーザーエージェントを設計するためのガイドラインを提供する。ユーザーエージェントには、ブラウザーや、ウェブコンテンツを取得してレンダリングするその他の種類のソフトウェアが含まれる。これらのガイドラインに適合するユーザーエージェントは、それ自身のユーザーインターフェイスと、他の技術、特に支援技術と通信する能力を含むその他の内部機能を通じて、アクセシビリティを推進する。さらに、障害のあるユーザーだけでなく、すべてのユーザーにとって、適合するユーザーエージェントはより使いやすいものとなるべきである。

2 共通基盤

この仕様は Infra に依存する。[INFRA]

2.1 用語

この仕様では、HTML および XML の属性と IDL 属性の両方を、多くの場合同じ文脈で参照する。どちらを参照しているかが明確でない場合、HTML および XML の属性はコンテンツ属性と呼ばれ、 IDL インターフェイスで定義されるものは IDL 属性と呼ばれる。同様に、「プロパティ」という用語は、JavaScript オブジェクトのプロパティと CSS プロパティの両方に使用される。これらが曖昧な場合、それぞれオブジェクトプロパティおよび CSS プロパティと限定して呼ばれる。

一般に、ある機能が HTML 構文または XML 構文に適用されると仕様に記載されている場合、もう一方も含まれる。機能が 2 つの言語のうち一方のみに特に適用される場合は、「HTML の場合、……（これは XML には適用されない）」のように、もう一方の形式には適用されないことを明示することで示される。

この仕様では、短い静的文書から、豊富なマルチメディアを含む長い論文や報告書、さらには本格的なインタラクティブアプリケーションに至るまで、HTML のあらゆる使用を指すために文書という用語を使用する。この用語は、文脈に応じて、Document オブジェクトとその子孫 DOM ツリーの両方、および HTML 構文または XML 構文を使用するシリアライズされたバイトストリームの両方を指すために使用される。

DOM 構造の文脈では、HTML 文書および XML 文書という用語は、 DOM で定義されているとおりに使用され、Document オブジェクトが取り得る 2 つの異なるモードを特に指す。[DOM]（このような使用箇所は、常にその定義へのハイパーリンクになっている。）

バイトストリームの文脈では、HTML 文書という用語は text/html とラベル付けされたリソースを指し、 XML 文書という用語は XML MIME 型でラベル付けされたリソースを指す。

簡潔さのため、文書がユーザーにレンダリングされる方法を指す場合に、示される、表示される、および可視であるなどの用語が使用されることがある。これらの用語は視覚媒体を意味するものではなく、他の媒体にも同等の方法で適用されるものと見なさなければならない。

2.1.1 並列処理

手順を並列に実行するとは、それらの手順を順番に実行しつつ、標準内の他のロジックと同時に実行することを意味する（たとえば、イベントループと同時に実行する）。この標準は、これを実現する正確な機構を定義しない。それは、時分割協調型マルチタスク、ファイバー、スレッド、プロセス、異なるハイパースレッド、コア、CPU、マシンなどの使用であってもよい。これに対して、直ちに実行される操作は、現在実行中のタスクを中断し、自身を実行した後、それまで実行されていたタスクを再開しなければならない。

並列処理を活用する仕様の記述方法に関する指針については、他の仕様からイベントループを扱うを参照。

同じデータを操作する異なる並列アルゴリズム間の競合状態を避けるため、並列キューを使用できる。

並列キューは、直列に実行しなければならないアルゴリズム手順のキューを表す。

並列キューは、初期状態では空のアルゴリズムキュー（キュー）を持つ。

並列キューに手順をエンキューするには、そのアルゴリズム手順を、並列キューのアルゴリズムキューへエンキューする。

新しい並列キューを開始するには、次の手順を実行する：

parallelQueue を新しい並列キューとする。
次の手順を並列に実行する：
1. true である間：
  1. steps を、parallelQueue のアルゴリズムキューからデキューした結果とする。
  2. steps が nothing でない場合、steps を実行する。
  3. 表明：並列に実行される手順は例外をスローすることが許可されていないため、steps の実行は例外をスローしなかった。
  実装がこれを継続的に実行されるループとして実装することは想定されていない。標準内のアルゴリズムは理解しやすいことを目的としており、必ずしもバッテリー寿命やパフォーマンスに優れているとは限らない。
parallelQueue を返す。

並列に実行される手順は、それ自体が他の手順を並列に実行できる。たとえば、並列キュー内では、一連の手順をそのキューと並列に実行すると役立つ場合がある。

ある標準が nameList（リスト）と、 nameList がすでに name を含む場合には拒否し、そうでなければ nameList に name を追加するメソッドを定義しているとする。

次の解決策には競合状態がある：

p を、this の関連するレルム内で作成された新しいプロミスとする。
global を、this の関連するグローバルオブジェクトとする。
次の手順を並列に実行する：
1. nameList が name を含む場合、 global を指定して DOM 操作タスクソース上にグローバルタスクをキューに追加し、 p を TypeError で拒否して、これらの手順を中止する。
2. 時間がかかる可能性のある処理を行う。
3. name を nameList に付加する。
4. global を指定して DOM 操作タスクソース上にグローバルタスクをキューに追加し、 p を undefined で解決する。
p を返す。

上記の処理が 2 回同時に呼び出されると、手順 3.1 の時点では name が nameList に含まれていないものの、手順 3.3 が実行される前に 追加される可能性がある。その結果、name が nameList に 2 回含まれることになる。

並列キューはこの問題を解決する。標準では、nameListQueue を新しい並列キューを開始した結果とし、名前を追加する手順を次のように定義する：

p を、this の関連するレルム内で作成された新しいプロミスとする。
global を、this の関連するグローバルオブジェクトとする。
nameListQueue に次の手順をエンキューする：
1. nameList が name を含む場合、 global を指定して DOM 操作タスクソース上にグローバルタスクをキューに追加し、 p を TypeError で拒否して、これらの手順を中止する。
2. 時間がかかる可能性のある処理を行う。
3. name を nameList に付加する。
4. global を指定して DOM 操作タスクソース上にグローバルタスクをキューに追加し、 p を undefined で解決する。
p を返す。

これにより、手順はキューに追加され、競合が回避される。

2.1.2 リソース

この仕様では、ユーザーエージェントが外部リソースのセマンティクスをデコードできる実装を備えているかどうかを指す場合に、サポートされるという用語を使用する。ある形式または型の外部リソースを、そのリソースの重要な側面を無視することなく実装が処理できる場合、その形式または型はサポートされるという。特定のリソースがサポートされるかどうかは、そのリソースの形式のどの機能が使用されているかに依存する場合がある。

例えば、PNG 画像のピクセルデータをデコードしてレンダリングできる場合、その画像に実装が認識していないアニメーションデータも含まれていたとしても、その PNG 画像はサポートされる形式であると見なされる。

MPEG-4 動画ファイルで使用されている圧縮形式がサポートされていない場合、実装がファイルのメタデータから動画の寸法を判断できたとしても、そのファイルはサポートされる形式であるとは見なされない。

一部の仕様、特に HTTP 仕様で表現と呼ばれるものは、この仕様ではリソースと呼ばれる。 [HTTP]

リソースの重要なサブリソースとは、そのリソースを正しく処理するために利用可能である必要があるリソースをいう。どのリソースが重要であると見なされるか、または見なされないかは、そのリソースの形式を定義する仕様によって定義される。

CSS スタイルシートについては、その重要なサブリソースを、 @import 規則を介してインポートされる他のスタイルシートと、インポートされた他のスタイルシートによって間接的にインポートされるスタイルシートを含むものとして、ここで暫定的に定義する。

この定義には完全な相互運用性がない。さらに、一部のユーザーエージェントは、背景画像やウェブフォントなどのリソースを重要なサブリソースとして数えているようである。理想的には CSS Working Group がこれを定義すべきである。この点に関する進捗を追跡するには、w3c/csswg-drafts issue #1088 を参照されたい。

2.1.3 XML 互換性

HTML から XML への移行を容易にするため、この仕様に適合するユーザーエージェントは、少なくとも DOM および CSS の目的において、HTML 内の要素を http://www.w3.org/1999/xhtml 名前空間に配置する。「HTML 要素」という用語は、 XML 文書内であっても、その名前空間内のあらゆる要素を指す。

別途記載されている場合を除き、この仕様で定義または言及されるすべての要素は HTML 名前空間（「http://www.w3.org/1999/xhtml」）に属し、この仕様で定義または言及されるすべての属性は名前空間を持たない。

要素型という用語は、特定のローカル名および名前空間を持つ要素の集合を指すために使用される。例えば、button 要素は、要素型 button を持つ要素であり、ローカル名「button」と、（上記で定義されているように暗黙的に）HTML 名前空間を持つ。

2.1.4 DOM ツリー

ある要素または属性が無視される、別の値として扱われる、または別のものであるかのように処理されると記載されている場合、これは、そのノードが DOM に入った後の処理のみを指す。ユーザーエージェントは、このような状況で DOM を変更してはならない。

コンテンツ属性の値は、その新しい値が以前の値と異なる場合にのみ変更されるという。属性をすでに持っている値に設定しても、その値は変更されない。

属性値、Text ノード、または文字列について使用される場合、空という用語は、テキストの長さがゼロであることを意味する（すなわち、制御文字や U+0020 SPACE さえ含まない）。

HTML 要素には、その要素のローカル名について定義された、特定の HTML 要素挿入手順、HTML 要素接続後手順、HTML 要素削除手順、および HTML 要素移動手順をすべて設定できる。

insertedNode が与えられたときの HTML 標準の挿入手順は、次のように定義される：

insertedNode が、名前空間が HTML 名前空間である要素であり、この標準が insertedNode のローカル名について HTML 要素挿入手順を定義している場合、 insertedNode を与えて、対応する HTML 要素挿入手順を実行する。
insertedNode がフォーム関連要素、またはフォーム関連要素の祖先である場合：
1. フォーム関連要素のパーサー挿入フラグが設定されている場合、戻る。
2. フォーム関連要素のフォーム所有者をリセットする。
insertedNode が、HTML パーサーの開いている要素のスタック上にない Element である場合、insertedNode のノード文書を与えて、内部リソースリンクを処理する。

insertedNode が与えられたときの HTML 標準の接続後手順は、次のように定義される：

insertedNode が、名前空間が HTML 名前空間である要素であり、この標準が insertedNode のローカル名について HTML 要素接続後手順を定義している場合、insertedNode を与えて、対応する HTML 要素接続後手順を実行する。

removedNode、isSubtreeRoot、および oldAncestor が与えられたときの HTML 標準の削除手順は、次のように定義される：

document を、removedNode のノード文書とする。
document のフォーカス領域が removedNode である場合、document のフォーカス領域を document のビューポートに設定し、 document の関連するグローバルオブジェクトのナビゲーション APIの進行中のナビゲーション中にフォーカスが変更されたを false に設定する。

これは、フォーカス解除手順、フォーカス手順、またはフォーカス更新手順を実行しないため、blur または change イベントは発火されない。
removedNode が、名前空間が HTML 名前空間である要素であり、この標準が removedNode のローカル名について HTML 要素削除手順を定義している場合、 removedNode、isSubtreeRoot、および oldAncestor を与えて、対応する HTML 要素削除手順を実行する。
removedNode が、null でないフォーム所有者を持つフォーム関連要素であり、removedNode とそのフォーム所有者が同じツリー内に存在しなくなった場合、removedNode のフォーム所有者をリセットする。
removedNode の popover 属性がポップオーバーなし状態でない場合、 removedNode、false、false、false、および null を与えて、ポップオーバーを非表示にするアルゴリズムを実行する。

movedNode、isSubtreeRoot、および oldAncestor が与えられたときの HTML 標準の移動手順は、次のように定義される：

movedNode が、名前空間が HTML 名前空間である要素であり、この標準が movedNode のローカル名について HTML 要素移動手順を定義している場合、movedNode、isSubtreeRoot、および oldAncestor を与えて、対応する HTML 要素移動手順を実行する。
movedNode が、null でないフォーム所有者を持つフォーム関連要素であり、movedNode とそのフォーム所有者が同じツリー内に存在しなくなった場合、movedNode のフォーム所有者をリセットする。

あるノードを引数として挿入手順が呼び出され、そのノードが現在文書ツリー内にある場合、そのノードは文書に挿入される。同様に、あるノードを引数として削除手順が呼び出され、そのノードが現在文書ツリー内になくなった場合、そのノードは文書から削除される。

あるノードを引数として挿入手順が呼び出され、そのノードが現在接続されている場合、そのノードは接続状態になる。同様に、あるノードを引数として削除手順が呼び出され、そのノードが現在接続されている状態でなくなった場合、そのノードは切断状態になる。

ノードが接続されており、そのシャドウを含むルートの閲覧コンテキストが null でない場合、そのノードは閲覧コンテキストに接続されている。あるノードを引数として挿入手順が呼び出され、そのノードが現在閲覧コンテキストに接続されている場合、そのノードは閲覧コンテキスト接続状態になる。あるノードを引数として削除手順が呼び出され、そのノードが現在閲覧コンテキストに接続されている状態でなくなった場合、またはそのシャドウを含むルートの閲覧コンテキストが null になった場合、そのノードは閲覧コンテキスト切断状態になる。

2.1.5 スクリプティング

Foo が実際にはインターフェイスである場合に、より正確な「Foo インターフェイスを実装するオブジェクト」の代わりに、「Foo オブジェクト」という構文が使用されることがある。

IDL 属性の値が取得されている場合（例えば、作者のスクリプトによって）、その IDL 属性は取得されているといい、新しい値が代入されている場合は設定されているという。

DOM オブジェクトがライブであるとされる場合、そのオブジェクトの属性およびメソッドは、データのスナップショットではなく、実際の基礎となるデータに対して動作しなければならない。

2.1.6 プラグイン

プラグインという用語は、ユーザーエージェントが使用する実装定義のコンテンツハンドラーの集合であって、ユーザーエージェントによる Document オブジェクトのレンダリングに参加できるが、 Document の子ナビガブルとして動作することも、 Document の DOM に Node オブジェクトを導入することもないものを指す。

通常、このようなコンテンツハンドラーは第三者によって提供されるが、ユーザーエージェントが組み込みのコンテンツハンドラーをプラグインとして指定することもできる。

ユーザーエージェントは、型 text/plain および application/octet-stream に登録済みのプラグインがあると見なしてはならない。

プラグインの一例は、ユーザーが PDF ファイルへナビゲートしたときにナビガブル内でインスタンス化される PDF ビューアーである。 PDF ビューアーのコンポーネントを実装した主体が、ユーザーエージェント自体を実装した主体と同一であるかどうかにかかわらず、これはプラグインとして数えられる。ただし、同じインターフェイスを使用するのではなく、ユーザーエージェントとは別に起動する PDF ビューアーアプリケーションは、この定義におけるプラグインではない。

プラグインとの対話はユーザーエージェントおよびプラットフォームに固有であると想定されるため、この仕様はそのための機構を定義しない。一部の UA は Netscape Plugin API のようなプラグイン機構をサポートすることを選択する場合があり、別の UA はリモートコンテンツコンバーターを使用したり、特定の型に対する組み込みサポートを持ったりする場合がある。実際、この仕様はユーザーエージェントにプラグインのサポートをまったく要求しない。[NPAPI]

ブラウザーは、プラグイン向けの外部コンテンツと対話する際に細心の注意を払うべきである。第三者ソフトウェアがユーザーエージェント自体と同じ権限で実行される場合、第三者ソフトウェアの脆弱性はユーザーエージェントの脆弱性と同じほど危険になる。

ユーザーごとに異なるプラグインの集合を持つことは、ユーザーが一意に識別される可能性を高めるトラッキングベクトルとなるため、ユーザーエージェントには、各ユーザーについてまったく同じプラグインの集合をサポートすることが推奨される。

2.1.7 文字エンコーディング

文字エンコーディング、または曖昧でない場合は単にエンコーディングとは、 Encoding で定義されている、バイトストリームと Unicode 文字列との間を変換する定義済みの方法である。エンコーディングには、エンコーディング名と、1 つ以上のエンコーディングラベルがあり、 Encoding 標準ではそれぞれエンコーディングの名前およびラベルと呼ばれる。 [ENCODING]

2.1.8 適合性クラス

この仕様は、ユーザーエージェント（実装者に関連する）および文書（作者およびオーサリングツールの実装者に関連する）に対する適合基準を説明する。

適合文書とは、文書に対するすべての適合基準に従う文書である。読みやすさのため、これらの適合要件の一部は作者に対する適合要件として表現される。このような要件は暗黙的に文書に対する要件である。定義上、すべての文書には作者が存在したものと仮定される。（場合によっては、その作者自体がユーザーエージェントであることがあり、そのようなユーザーエージェントには、以下で説明する追加の規則が適用される。）

例えば、「作者は foobar 要素を使用してはならない」という要件がある場合、文書に foobar という名前の要素を含めることは許可されないことを意味する。

文書の適合要件と実装の適合要件との間に、暗黙の関係はない。ユーザーエージェントは、不適合な文書を自由に処理してよいわけではない。この仕様で説明される処理モデルは、入力文書の適合性にかかわらず、実装に適用される。

ユーザーエージェントはいくつかの（相互に重複する）分類に分かれ、それぞれ異なる適合要件を持つ。

ウェブブラウザーおよびその他の対話型ユーザーエージェント

XML 構文をサポートするウェブブラウザーは、他の仕様によって要素のセマンティクスが上書きされていない限り、ユーザーが対話できるように、XML 文書内にある HTML 名前空間の要素および属性を、この仕様で説明されるとおりに処理しなければならない。

適合するウェブブラウザーは、XML 文書内で script 要素を見つけると、その要素に含まれるスクリプトを実行する。ただし、その要素が XSLT で表現された変換内に見つかった場合（ユーザーエージェントが XSLT もサポートしているものとする）、プロセッサーは代わりに script 要素を、変換の一部を形成する不透明な要素として扱う。

HTML 構文をサポートするウェブブラウザーは、ユーザーが対話できるように、HTML MIME 型でラベル付けされた文書を、この仕様で説明されるとおりに処理しなければならない。

スクリプティングをサポートするユーザーエージェントは、Web IDL で説明されているとおり、この仕様内の IDL 断片の適合実装でもなければならない。[WEBIDL]

明示的に記載されていない限り、HTML 要素のセマンティクスを上書きする仕様は、その要素を表す DOM オブジェクトに対する要件を上書きしない。例えば、上記の例の script 要素は、引き続き HTMLScriptElement インターフェイスを実装する。

非対話型提示ユーザーエージェント

HTML および XML 文書を、非対話型の版としてレンダリングする目的だけで処理するユーザーエージェントは、ユーザーインタラクションに関する要件を免除されることを除き、ウェブブラウザーと同じ適合基準に従わなければならない。

非対話型提示ユーザーエージェントの典型例は、プリンター（静的 UA）およびオーバーヘッドディスプレイ（動的 UA）である。ほとんどの静的な非対話型提示ユーザーエージェントは、スクリプティングをサポートしないことも選択すると予想される。

非対話型ではあるが動的な提示 UA は、引き続きスクリプトを実行し、フォームを動的に送信できるようにするなどする。ただし、ユーザーが文書と対話できない場合、「フォーカス」という概念は無関係であるため、UA はフォーカスに関連する DOM API をサポートする必要がない。

推奨される既定のレンダリングをサポートする視覚ユーザーエージェント

ユーザーエージェントは、対話型かどうかにかかわらず、この仕様で定義される推奨される既定のレンダリングをサポートするものとして（ユーザーオプションとしての場合も含め）指定されてもよい。

これは必須ではない。特に、推奨される既定のレンダリングを実装するユーザーエージェントであっても、ユーザー体験を向上させるため、例えば色のコントラストを変更したり、異なるフォーカススタイルを使用したり、その他の方法でユーザーにとってよりアクセシブルかつ使いやすくしたりする、この既定値を上書きする設定を提供することが推奨される。

推奨される既定のレンダリングをサポートするものとして指定されたユーザーエージェントは、そのように指定されている間、レンダリングの節がユーザーエージェントに実装することを期待する動作として定義する規則を実装しなければならない。

スクリプティングをサポートしないユーザーエージェント

スクリプティングをサポートしない実装（またはスクリプティング機能が完全に無効化されている実装）は、この仕様で言及されるイベントおよび DOM インターフェイスをサポートする義務を免除される。この仕様のうち、イベントモデルまたは DOM によって定義される部分について、そのようなユーザーエージェントは、イベントおよび DOM がサポートされているかのように動作しなければならない。

スクリプティングはアプリケーションの不可欠な部分を形成することがある。スクリプティングをサポートしない、またはスクリプティングが無効化されているウェブブラウザーは、作者の意図を完全には伝えられない場合がある。

適合性チェッカー

適合性チェッカーは、文書がこの仕様で説明される適用可能な適合基準に従っていることを検証しなければならない。自動化された適合性チェッカーは、作者の意図の解釈を必要とするエラーの検出を免除される（例えば、blockquote 要素の内容が引用ではない場合、その文書は不適合であるが、人間の判断を入力せずに動作する適合性チェッカーは、blockquote 要素に引用された内容だけが含まれることを確認する必要はない）。

適合性チェッカーは、入力文書が閲覧コンテキストなしで構文解析された場合（すなわち、スクリプトが実行されず、パーサーのスクリプティングモードが無効である場合）に適合することを確認しなければならず、また、スクリプトが実行される閲覧コンテキスト内で構文解析された場合にも入力文書が適合し、スクリプトの実行中に一時的に発生する場合を除いて、スクリプトによって不適合な状態が発生しないことも確認すべきである。（これは不可能であることが証明されているため、「MUST」要件ではなく「SHOULD」要件にとどまる。[COMPUTABLE]）

「HTML バリデーター」という用語は、それ自体がこの仕様の適用可能な要件に適合する適合性チェッカーを指すために使用できる。

XML DTD は、この仕様のすべての適合要件を表現できない。したがって、検証を行う XML プロセッサーと DTD の組み合わせは適合性チェッカーを構成できない。また、この仕様で定義される 2 つのオーサリング形式はいずれも SGML の応用ではないため、検証を行う SGML システムも適合性チェッカーを構成できない。

別の言い方をすれば、適合基準には次の 3 種類がある：

DTD で表現できる基準。
DTD では表現できないが、機械によって確認できる基準。
人間だけが確認できる基準。

適合性チェッカーは、最初の 2 つを確認しなければならない。単純な DTD ベースのバリデーターは、最初の種類のエラーだけを確認するため、この仕様によれば適合する適合性チェッカーではない。

データマイニングツール

文書をレンダリングするため、または適合性を確認するため以外の理由で HTML および XML 文書を処理するアプリケーションおよびツールは、処理する文書のセマンティクスに従って動作すべきである。

文書アウトラインを生成するが、各段落について入れ子レベルを増加させ、見出しについて入れ子レベルを増加させないツールは、適合しない。

オーサリングツールおよびマークアップジェネレーター

オーサリングツールおよびマークアップジェネレーターは、適合文書を生成しなければならない。作者に適用される適合基準は、適切な場合、オーサリングツールにも適用される。

オーサリングツールは、要素を指定された目的のためだけに使用するという厳格な要件を、オーサリングツールが作者の意図をまだ判断できない範囲に限って免除される。ただし、オーサリングツールは、自動的に要素を誤用したり、ユーザーに誤用を促したりしてはならない。

例えば、任意の連絡先情報に address 要素を使用することは適合しない。この要素は、最も近い article または body 要素の祖先に関する連絡先情報をマークアップするためだけに使用できる。ただし、オーサリングツールはその違いを判断できない可能性が高いため、オーサリングツールはその要件を免除される。しかしこれは、オーサリングツールが、例えば斜体テキストの任意のブロックに address 要素を使用できるという意味ではない。単に、ユーザーが article 要素の連絡先情報を挿入するためのツールを使用するとき、実際にその目的で使用しており、代わりに別のものを挿入していないことをオーサリングツールが検証する必要はない、という意味である。

適合性確認の観点では、エディターは、適合性チェッカーが検証するのと同じ範囲で適合する文書を出力しなければならない。

オーサリングツールを使用して不適合な文書を編集する場合、編集セッション中に編集されなかった文書の部分にある適合性エラーを保持してもよい（すなわち、編集ツールには、誤った内容をラウンドトリップすることが許可される）。ただし、エラーがそのように保持された場合、オーサリングツールは出力が適合していると主張してはならない。

オーサリングツールには、大きく分けて 2 種類あると想定される。構造またはセマンティックデータを基に動作するツールと、メディア固有の What-You-See-Is-What-You-Get 編集方式（WYSIWYG）で動作するツールである。

前者は、ソース情報内の構造を使用して、どの HTML 要素および属性が最も適切であるかを情報に基づいて選択できるため、HTML を作成するツールに推奨される機構である。

ただし、WYSIWYG ツールも正当である。WYSIWYG ツールは、適切であることが分かっている要素を使用すべきであり、適切であることが分からない要素を使用すべきではない。極端な場合には、フロー要素の使用を div、b、i、および span のような少数の要素だけに制限し、style 属性を多用することを意味する場合がある。

WYSIWYG であるかどうかにかかわらず、すべてのオーサリングツールは、ユーザーが適切に構造化され、セマンティクスが豊富で、メディアに依存しないコンテンツを作成できるようにするため、最善の努力を払うべきである。

既存のコンテンツおよび以前の仕様との互換性のため、この仕様では 2 つのオーサリング形式を説明する。一方は XML に基づく形式であり、もう一方は SGML に着想を得たカスタム形式を使用する形式である（HTML 構文と呼ばれる）。実装はこれら 2 つの形式のうち少なくとも一方をサポートしなければならないが、両方をサポートすることが推奨される。

一部の適合要件は、要素、属性、メソッド、またはオブジェクトに対する要件として表現される。このような要件は、コンテンツモデルの制限を説明するものと、実装の動作を説明するものの 2 つの分類に分かれる。前者の分類に属するものは、文書およびオーサリングツールに対する要件である。後者の分類に属するものは、ユーザーエージェントに対する要件である。同様に、一部の適合要件は作者に対する要件として表現される。このような要件は、作者が作成する文書に対する適合要件として解釈される。（言い換えれば、この仕様は、作者に対する適合基準と文書に対する適合基準を区別しない。）

2.1.9 依存関係

この仕様は、基礎となるいくつかの他の仕様に依存する。

Infra

次の用語は Infra で定義される：[INFRA]

一般的な反復用語間、継続、および中断。
表明
実装定義
意図的な違反
トラッキングベクトル
符号位置およびその同義語文字
サロゲート
スカラー値
タプル
非文字
文字列、符号単位、符号単位接頭辞、符号単位で小さい、で始まる、で終わる、長さ、および符号位置長
文字列等価演算であるおよび同一である
スカラー値文字列
変換する
ASCII 文字列
ASCII タブまたは改行
ASCII 空白
制御文字
ASCII 数字
ASCII 大文字 16 進数字
ASCII 小文字 16 進数字
ASCII 16 進数字
ASCII 大文字英字
ASCII 小文字英字
ASCII 英字
ASCII 英数字
同型デコード
同型エンコード
ASCII 小文字化
ASCII 大文字化
ASCII 大文字小文字不区別
改行を除去する
改行を正規化する
先頭および末尾の ASCII 空白を除去する
ASCII 空白を除去して折り畳む
文字列を ASCII 空白で分割する
文字列をコンマで分割する
符号位置の列を収集するおよびそれに関連する位置変数
ASCII 空白を読み飛ばす
有順序マップデータ構造、および関連する次の定義：キー、値、空、エントリー、存在する、エントリーの値を取得する、エントリーの値を設定する、既定値付き、エントリーを削除する、消去する、キーを取得する、値を取得する、降順にソートする、サイズ、および反復する
リストデータ構造、および関連する次の定義：付加する、拡張する、重複を持つ、前置する、置換する、削除する、空にする、含む、サイズ、インデックス、空である、項目、反復する、クローンする、昇順にソートする、降順にソートする、スライスする（およびその from 引数と to 引数）、および反転する
スタックデータ構造、および関連する次の定義：プッシュするおよびポップする
キューデータ構造、および関連する次の定義：エンキューするおよびデキューする
有順序集合データ構造、および関連する次の定義：付加する、作成する、差集合、共通部分、部分集合および和集合
構造体仕様型、および関連する次の定義：項目
バイト列データ構造
許可およびブロックシングルトン
寛容な Base64 エンコードおよび寛容な Base64 デコードアルゴリズム
排他的範囲
JSON 文字列を Infra 値として構文解析する
HTML 名前空間
MathML 名前空間
SVG 名前空間
XLink 名前空間
XML 名前空間
XMLNS 名前空間
成功

Unicode および Encoding

Unicode 文字集合はテキストデータを表すために使用され、Encoding は文字エンコーディングに関する要件を定義する。 [UNICODE]

前述のとおり、この仕様は、それらの仕様で定義される用語に基づいて用語を導入する。

次の用語は Encoding で定義されるとおりに使用される： [ENCODING]

エンコーディングを取得する
出力エンコーディングを取得する
バイトストリームおよびエンコーディングを受け取り、文字ストリームを返す汎用デコードアルゴリズム
バイトストリームを受け取り、文字ストリームを返し、さらに先頭に UTF-8 バイト順マーク（BOM）がある場合は 1 つ除去する UTF-8 デコードアルゴリズム
UTF-8 デコードと同一であるが、先頭の UTF-8 バイト順マーク（BOM）を 1 つ除去しない BOM なしの UTF-8 デコードアルゴリズム
文字ストリームおよびエンコーディングを受け取り、バイトストリームを返すエンコードアルゴリズム
文字ストリームを受け取り、バイトストリームを返す UTF-8 エンコードアルゴリズム
バイトストリームを受け取り、エンコーディングまたは null を返す BOM スニッフィングアルゴリズム。

XML および関連仕様

HTML の XML 構文をサポートする実装は、何らかの版の XML と、それに対応する名前空間仕様をサポートしなければならない。これは、その構文が名前空間を伴う XML シリアライゼーションを使用するためである。[XML] [XMLNS]

スクリプトを実行せず、CSS または XPath 式を評価せず、その他の方法で結果の DOM を任意のコンテンツに公開せずにコンテンツを操作するデータマイニングツールおよびその他のユーザーエージェントは、実際に名前空間文字列を公開することなく、対応する DOM ノードが特定の名前空間内にあると表明するだけで、「名前空間をサポート」してもよい。

HTML 構文では、名前空間接頭辞および名前空間宣言は XML と同じ効果を持たない。例えば、コロンは HTML 要素名において特別な意味を持たない。

XML 名前空間内の、space という名前の属性は、 Extensible Markup Language（XML）によって定義される。 [XML]

Name 生成規則は XML で定義される。 [XML]

この仕様は、Associating Style Sheets with XML documents で定義される <?xml-stylesheet?> 処理命令も参照する。 [XMLSSPI]

この仕様は、XSLTProcessor インターフェイス、およびその transformToFragment() メソッドと transformToDocument() メソッドにも非規範的に言及する。[XSLTP]

URL

次の用語は URL で定義される：[URL]

ホスト
公開接尾辞
ドメイン
IP アドレス
URL
URL のオリジン
絶対 URL
相対 URL
登録可能ドメイン
URL パーサー
基本 URL パーサー、その url 引数および state override 引数、ならびに次のパーサー状態：
- スキーム開始状態
- ホスト状態
- ホスト名状態
- ポート状態
- パス開始状態
- クエリ状態
- フラグメント状態
URL レコードおよびその個々の構成要素：
- スキーム
- ユーザー名
- パスワード
- ホスト
- ポート
- パス
- クエリ
- フラグメント
- blob URL エントリー
妥当な URL 文字列
ユーザー名、パスワード、またはポートを持てないという概念
不透明パスという概念
URL シリアライザーおよびそのフラグメントを除外引数
URL パスシリアライザー
ホストパーサー
ホストシリアライザー
ホストが等しい
URL が等しいおよびそのフラグメントを除外引数
整数をシリアライズする
既定のエンコード集合
コンポーネントパーセントエンコード集合
UTF-8 パーセントエンコード
パーセントデコード
ユーザー名を設定する
パスワードを設定する
application/x-www-form-urlencoded 形式
application/x-www-form-urlencoded シリアライザー
特別である

この仕様は、いくつかのスキームおよびプロトコルも参照する：

about: スキーム [ABOUT]
blob: スキーム [FILEAPI]
data: スキーム [RFC2397]
http: スキーム [HTTP]
https: スキーム [HTTP]
mailto: スキーム [MAILTO]
sms: スキーム [SMS]
urn: スキーム [URN]

メディアフラグメント構文は Media Fragments URI で定義される。 [MEDIAFRAG]

URL Pattern

次の用語は URL Pattern で定義される： [URLPATTERN]

HTTP および関連仕様

次の用語は HTTP 仕様で定義される：[HTTP]

`Accept` ヘッダー
`Accept-Language` ヘッダー
`Cache-Control` ヘッダー
`Content-Disposition` ヘッダー
`Content-Language` ヘッダー
`Content-Range` ヘッダー
`Last-Modified` ヘッダー
`Range` ヘッダー
`Referer` ヘッダー

次の用語は HTTP State Management Mechanism で定義される： [COOKIES]

次の用語は Web Linking で定義される：[WEBLINK]

`Link` ヘッダー
`Link` フィールド値を構文解析する

次の用語は Structured Field Values for HTTP で定義される： [STRUCTURED-FIELDS]

次の用語は MIME Sniffing で定義される： [MIMESNIFF]

Fetch

次の用語は Fetch で定義される：[FETCH]

次の用語は Referrer Policy で定義される： [REFERRERPOLICY]

リファラーポリシー
`Referrer-Policy` HTTP ヘッダー
`Referrer-Policy` ヘッダーからリファラーポリシーを構文解析するアルゴリズム
「no-referrer」、「no-referrer-when-downgrade」、「origin-when-cross-origin」、および「unsafe-url」リファラーポリシー
既定のリファラーポリシー

次の用語は Mixed Content で定義される：[MIX]

次の用語は Subresource Integrity で定義される：[SRI]

No-Vary-Search HTTP レスポンスヘッダーフィールド

次の用語は No-Vary-Search HTTP レスポンスヘッダーフィールドで定義される： [NOVARYSEARCH]

Paint Timing

次の用語は Paint Timing で定義される：[PAINTTIMING]

ペイントタイミングを記録する

Navigation Timing

次の用語は Navigation Timing で定義される： [NAVIGATIONTIMING]

ナビゲーションタイミングエントリーを作成する
ナビゲーションタイミングエントリーをキューに追加する
NavigationTimingType およびその「navigate」、「reload」、および「back_forward」値。

Resource Timing

次の用語は Resource Timing で定義される： [RESOURCETIMING]

リソースタイミングを記録する

Performance Timeline

次の用語は Performance Timeline で定義される： [PERFORMANCETIMELINE]

PerformanceEntry およびその name、 entryType、 startTime、および duration 属性。
パフォーマンスエントリーをキューに追加する

Long Animation Frames

次の用語は Long Animation Frames で定義される：[LONGANIMATIONFRAMES]

Long Tasks

次の用語は Long Tasks で定義される：[LONGTASKS]

長時間タスクを報告する

Web IDL

この仕様の IDL 断片は、Web IDL で説明されるとおり、適合する IDL 断片に要求される方法で解釈しなければならない。[WEBIDL]

次の用語は Web IDL で定義される：

Web IDL は、この仕様で使用される次の型も定義する：

この仕様におけるスローするという用語は、Web IDL で定義されるとおりに使用される。DOMException 型および次の例外名は Web IDL によって定義され、この仕様で使用される：

この仕様が、特定の時刻（特殊値 Not-a-Number の場合もある）を表す Date オブジェクトを作成することをユーザーエージェントに要求する場合、その時刻にミリ秒成分があるなら、それを整数に切り捨てなければならず、新しく作成される Date オブジェクトの時刻値は、切り捨て後の時刻を表さなければならない。

例えば、2000 年 1 月 1 日 01:00 UTC から 1 秒の 23045 百万分の 1 後の時刻、すなわち 2000-01-01T00:00:00.023045Z が与えられた場合、その時刻を表すために作成された Date オブジェクトは、 45 百万分の 1 秒前の時刻 2000-01-01T00:00:00.023Z を表すために作成されたものと同じ時刻を表す。与えられた時刻が NaN の場合、結果は時刻値 NaN を表す Date オブジェクトとなる（これは、そのオブジェクトが特定の時点を表していないことを示す）。

JavaScript

この仕様で説明される言語の一部は、基礎となるスクリプティング言語として JavaScript のみをサポートする。[JAVASCRIPT]

「JavaScript」という用語は、公式名称である ECMAScript ではなく、 ECMA-262 を指すために使用される。これは JavaScript という用語の方が広く知られているためである。

次の用語は JavaScript 仕様で定義され、この仕様で使用される：

アクティブな関数オブジェクト
エージェントおよびエージェントクラスター
自動セミコロン挿入
候補実行
現在のレルム
数学的値のクランプ
早期エラー
前方進行
本質的な内部メソッドの不変条件
JavaScript 実行コンテキスト
JavaScript 実行コンテキストスタック
レルム
JobCallback Record
NewTarget
実行中の JavaScript 実行コンテキスト
周囲のエージェント
抽象クロージャ
不変プロトタイプエキゾチックオブジェクト
既知のシンボル。次を含む： %Symbol.hasInstance%、 %Symbol.isConcatSpreadable%、 %Symbol.toPrimitive%、および %Symbol.toStringTag%
既知の組み込みオブジェクト。次を含む： %Array.prototype%、 %Error.prototype%、 %EvalError.prototype%、 %Function.prototype%、 %Object.prototype%、 %Object.prototype.valueOf%、 %RangeError.prototype%、 %ReferenceError.prototype%、 %SyntaxError.prototype%、 %TypeError.prototype%、および %URIError.prototype%
FunctionBody 生成規則
Module 生成規則
Pattern 生成規則
Script 生成規則
BigInt、 Boolean、 Number、 String、 Symbol、および Object ECMAScript 言語型
Completion Record 仕様型
List および Record 仕様型
Property Descriptor 仕様型
ModuleRequest Record 仕様型
Script Record 仕様型
Synthetic Module Record 仕様型
Cyclic Module Record 仕様型
Source Text Module Record 仕様型およびその Evaluate、 Link および LoadRequestedModules メソッド
ArrayCreate 抽象演算
Call 抽象演算
ClearKeptObjects 抽象演算
CleanupFinalizationRegistry 抽象演算
Construct 抽象演算
CopyDataBlockBytes 抽象演算
CreateBuiltinFunction 抽象演算
CreateByteDataBlock 抽象演算
CreateDataProperty 抽象演算
CreateDefaultExportSyntheticModule 抽象演算
DefinePropertyOrThrow 抽象演算
DetachArrayBuffer 抽象演算
EnumerableOwnProperties 抽象演算
FinishLoadingImportedModule 抽象演算
OrdinaryFunctionCreate 抽象演算
Get 抽象演算
GetActiveScriptOrModule 抽象演算
GetFunctionRealm 抽象演算
HasOwnProperty 抽象演算
HostCallJobCallback 抽象演算
HostEnqueueFinalizationRegistryCleanupJob 抽象演算
HostEnqueueGenericJob 抽象演算
HostEnqueuePromiseJob 抽象演算
HostEnqueueTimeoutJob 抽象演算
HostEnsureCanAddPrivateElement 抽象演算
HostGetSupportedImportAttributes 抽象演算
HostLoadImportedModule 抽象演算
HostMakeJobCallback 抽象演算
HostPromiseRejectionTracker 抽象演算
InitializeHostDefinedRealm 抽象演算
IsArrayBufferViewOutOfBounds 抽象演算
IsAccessorDescriptor 抽象演算
IsCallable 抽象演算
IsConstructor 抽象演算
IsDataDescriptor 抽象演算
IsDetachedBuffer 抽象演算
IsSharedArrayBuffer 抽象演算
NewObjectEnvironment 抽象演算
NormalCompletion 抽象演算
OrdinaryGetPrototypeOf 抽象演算
OrdinarySetPrototypeOf 抽象演算
OrdinaryIsExtensible 抽象演算
OrdinaryPreventExtensions 抽象演算
OrdinaryGetOwnProperty 抽象演算
OrdinaryDefineOwnProperty 抽象演算
OrdinaryGet 抽象演算
OrdinarySet 抽象演算
OrdinaryDelete 抽象演算
OrdinaryOwnPropertyKeys 抽象演算
OrdinaryObjectCreate 抽象演算
ParseJSONModule 抽象演算
ParseModule 抽象演算
ParseScript 抽象演算
NewPromiseReactionJob 抽象演算
NewPromiseResolveThenableJob 抽象演算
RegExpBuiltinExec 抽象演算
RegExpCreate 抽象演算
RunJobs 抽象演算
SameValue 抽象演算
ScriptEvaluation 抽象演算
SetSyntheticModuleExport 抽象演算
SetImmutablePrototype 抽象演算
ThrowCompletion 抽象演算
ToBoolean 抽象演算
ToString 抽象演算
ToUint32 抽象演算
TypedArrayCreate 抽象演算
IsLooselyEqual 抽象演算
IsStrictlyEqual 抽象演算
Atomics オブジェクト
Atomics.waitAsync オブジェクト
Date クラス
FinalizationRegistry クラス
RegExp クラス
SharedArrayBuffer クラス
SyntaxError クラス
TypeError クラス
RangeError クラス
WeakRef クラス
eval() 関数
WeakRef.prototype.deref() 関数
[[IsHTMLDDA]] 内部スロット
import()
import.meta
HostGetImportMetaProperties 抽象演算
typeof 演算子
delete 演算子
TypedArray コンストラクター表

JavaScript をサポートするユーザーエージェントは、Dynamic Code Brand Checks 提案も実装しなければならない。次の用語はそこで定義され、この仕様で使用される： [JSDYNAMICCODEBRANDCHECKS]

HostEnsureCanCompileStrings 抽象演算
HostGetCodeForEval 抽象演算

JavaScript をサポートするユーザーエージェントは、Import Text 提案も実装しなければならない。次の用語はそこで定義され、この仕様で使用される：[JSIMPORTTEXT]

CreateTextModule 抽象演算

JavaScript をサポートするユーザーエージェントは、ECMAScript Internationalization API も実装しなければならない。[JSINTL]

JavaScript をサポートするユーザーエージェントは、Temporal 提案も実装しなければならない。次の用語はそこで定義され、この仕様で使用される：[JSTEMPORAL]

HostSystemUTCEpochNanoseconds 抽象演算
nsMaxInstant および nsMinInstant 値

WebAssembly

次の用語は WebAssembly JavaScript Interface で定義される： [WASMJS]

WebAssembly.Module

DOM

Document Object Model（DOM）は、文書およびその内容の表現、すなわちモデルである。 DOM は単なる API ではない。この仕様では、HTML 実装の適合基準が DOM 上の操作によって定義される。[DOM]

この仕様は DOM によって定義され、一部の機能は DOM インターフェイスの拡張として定義されるため、実装は DOM および UI Events で定義されるイベントをサポートしなければならない。 [DOM] [UIEVENTS]

特に、次の機能は DOM で定義される：[DOM]

Attr インターフェイス
CharacterData インターフェイス
Comment インターフェイス
DOMImplementation インターフェイス
Document インターフェイスおよびその doctype 属性
DocumentOrShadowRoot インターフェイス
DocumentFragment インターフェイス
DocumentType インターフェイス
ChildNode インターフェイス
Element インターフェイス
attachShadow() メソッド。
要素のシャドウルート
シャドウルートのモード
シャドウルートの宣言的メンバー
シャドウルートを付加するアルゴリズム
リターゲティングアルゴリズム
Node インターフェイス
NodeList インターフェイス
ProcessingInstruction インターフェイスおよびそのターゲット概念
ShadowRoot インターフェイス
Text インターフェイス
Range インターフェイス
ノード文書概念
文書型概念
ホスト概念
シャドウルート概念、ならびにそのフォーカスを委任する、要素内部で利用可能、クローン可能、シリアライズ可能、カスタム要素レジストリ、およびカスタム要素レジストリを null のままにする。
シャドウホスト概念
HTMLCollection インターフェイス、その length 属性、およびその item() メソッドと namedItem() メソッド
コレクションおよびコレクションによって表されるという用語
DOMTokenList インターフェイス、ならびにその value 属性および supports 演算
createDocument() メソッド
createHTMLDocument() メソッド
createElement() メソッド
createElementNS() メソッド
getElementById() メソッド
getElementsByClassName() メソッド
append() メソッド
appendChild() メソッド
cloneNode() メソッド
moveBefore() メソッド
importNode() メソッド
preventDefault() メソッド
id 属性
setAttribute() メソッド
textContent 属性
children 属性
ツリー、シャドウツリー、およびノードツリーの概念
ツリー順序およびシャドウを含むツリー順序の概念
要素概念
子概念
ルートおよびシャドウを含むルートの概念
自身を含む祖先、祖先、子孫、シャドウを含む祖先、シャドウを含む子孫、シャドウを含む自身を含む子孫、およびシャドウを含む自身を含む祖先の概念
最初の子、最後の子、次の兄弟、前の兄弟、および親の概念
親要素概念
文書要素概念
文書ツリー内、文書内（レガシー）、および接続されているという概念
スロット概念、ならびにその名前および割り当てられたノード
割り当てられたスロット概念
スロット割り当て概念
スロット可能概念
ツリーにスロット可能なものを割り当てるアルゴリズム
slotchange イベント
自身を含む子孫概念
平坦化されたスロット可能なものを見つけるアルゴリズム
手動スロット割り当て概念
スロットを割り当てるアルゴリズム
ノードに対する事前挿入、挿入、付加、置換、すべて置換、文字列をすべて置換、削除、および採用アルゴリズム
子孫概念
挿入手順、
接続後手順、削除手順、移動手順、採用手順、および子が変更された手順という要素用フック
属性に対する変更、付加、削除、置換、名前空間およびローカル名によって属性を取得する、値を設定する、および名前空間およびローカル名によって属性を削除するアルゴリズム
属性変更手順という属性用フック
属性の値概念
属性のローカル名概念
属性の名前空間概念
属性リスト概念
CharacterData ノードのデータおよびそのデータを置換するアルゴリズム
ノードの子テキスト内容
ノードの子孫テキスト内容
DOCTYPE の名前、公開 ID、およびシステム ID
Event インターフェイス
Event および派生インターフェイスのコンストラクター動作
EventTarget インターフェイス
活性化動作フック
レガシー事前活性化動作フック
レガシー取消済み活性化動作フック
イベントを作成するアルゴリズム
イベントを発火するアルゴリズム
取消済みフラグ
ディスパッチフラグ
ディスパッチアルゴリズム
EventInit 辞書型
type 属性
イベントのターゲット
currentTarget 属性
bubbles 属性
cancelable 属性
composed 属性
合成フラグ
isTrusted 属性
initEvent() メソッド
イベントリスナーを追加する
addEventListener() メソッド
イベントリスナーを削除するおよびすべてのイベントリスナーを削除するアルゴリズム
EventListener コールバックインターフェイス
イベントの型
イベントリスナーならびにその型およびコールバック
Document のエンコーディング（ここでは文字エンコーディング）、モード、カスタム要素レジストリ、宣言的シャドウルートを許可する、およびコンテンツ型
XML 文書と HTML 文書との区別
互換モード、限定互換モード、および標準モードという用語
引数 document、 subtree、 parent、および fallbackRegistry を取るノードをクローンするアルゴリズム、ならびにクローン手順という概念
要素の一意識別子（ID）という概念
要素のクラスという概念
サポートされるトークンという用語
DOM 範囲という概念、および範囲に適用される開始ノード、開始、終了、および境界点という用語。
要素を作成するアルゴリズム
文書を作成する、テキストノードを作成する、文書型を作成する、コメントノードを作成する、処理命令ノードを作成する、および文書フラグメントを作成するアルゴリズム
要素インターフェイス概念
カスタム要素状態という概念、ならびに定義済み要素およびカスタム要素という概念
要素の名前空間、名前空間接頭辞、ローカル名、カスタム要素レジストリ、カスタム要素定義、および is 値
MutationObserver インターフェイス、および一般的な変更オブザーバー
AbortControllerおよびそのシグナル
AbortSignal
中止済み
シグナルを中止する
追加する
妥当な属性ローカル名
妥当な要素ローカル名
グローバルカスタム要素レジストリである

次の機能は UI Events で定義される：[UIEVENTS]

FocusEvent インターフェイス
FocusEvent インターフェイスの relatedTarget 属性
UIEvent インターフェイス
UIEvent インターフェイスの view 属性
beforeinput イベント
contextmenu イベント
input イベント
keydown イベント
keypress イベント
keyup イベント

次の機能は Touch Events で定義される：[TOUCH]

Touch インターフェイス
タッチポイント概念
touchend イベント

次の機能は Pointer Events で定義される： [POINTEREVENTS]

MouseEvent インターフェイス
MouseEvent インターフェイスの relatedTarget 属性
MouseEvent インターフェイスの button 属性
MouseEventInit 辞書型
PointerEvent インターフェイス
PointerEvent インターフェイスの pointerType 属性
ポインターイベントを発火する
auxclick イベント
click イベント
dblclick イベント
mousedown イベント
mouseenter イベント
mouseleave イベント
mousemove イベント
mouseout イベント
mouseover イベント
mouseup イベント
pointerdown イベント
pointerup イベント
pointercancel イベント
wheel イベント

次のイベントは Clipboard API and events で定義される： [CLIPBOARD-APIS]

copy イベント
cut イベント
paste イベント

この仕様では、イベントの型を指すために、名前という用語を使用することがある。例えば、「click という名前のイベント」、または「イベント名が keypress である場合」のように使用する。イベントについて、「名前」と「型」という用語は同義である。

次の機能は DOM Parsing and Serialization で定義される： [DOMPARSING]

XML シリアライゼーション

次の機能は Selection API で定義される：[SELECTION]

ユーザーエージェントには、execCommand で説明される機能を実装することが推奨される。[EXECCOMMAND]

次の機能は Fullscreen API で定義される： [FULLSCREEN]

High Resolution Time は次の機能を提供する：[HRT]

File API

この仕様は、File API で定義される次の機能を使用する： [FILEAPI]

Blob インターフェイスおよびその type 属性
File インターフェイス、ならびにその name 属性および lastModified 属性
FileList インターフェイス
Blob のスナップショット状態という概念
読み取りエラーという概念
Blob URL ストア
blob URL エントリーおよびその環境
blob オブジェクトを取得するアルゴリズム

Indexed Database API

次の用語は Indexed Database API で定義される： [INDEXEDDB]

Media Source Extensions

次の用語は Media Source Extensions で定義される： [MEDIASOURCE]

MediaSource インターフェイス
メディア要素から切り離す

Media Capture and Streams

次の用語は Media Capture and Streams で定義される： [MEDIASTREAM]

Reporting

次の用語は Reporting で定義される：[REPORTING]

XMLHttpRequest

次の機能および用語は XMLHttpRequest で定義される： [XHR]

XMLHttpRequest インターフェイス、およびその responseXML 属性
ProgressEvent インターフェイス、ならびにその lengthComputable、 loaded、および total 属性
FormData インターフェイス、およびそれに関連するエントリーリスト

Battery Status

次の機能は Battery Status API で定義される：[BATTERY]

getBattery() メソッド

Media Queries

実装は Media Queries をサポートしなければならない。<media-condition> 機能はそこで定義される。[MQ]

CSS モジュール

CSS 全体のサポートは、この仕様の実装に必須ではない（ただし、少なくともウェブブラウザーには推奨される）が、一部の機能は特定の CSS 要件に基づいて定義される。

この仕様が、何かを特定の CSS 文法に従って構文解析することを要求する場合、エラー処理規則を含め、 CSS Syntax の関連するアルゴリズムに従わなければならない。 [CSSSYNTAX]

例えば、ユーザーエージェントは、スタイルシートの終端が予期せず見つかった場合、開いているすべての構文を閉じることを要求される。したがって、色の値として文字列「rgb(0,0,0」（閉じ括弧が欠落している）を構文解析する場合、このエラー処理規則によって閉じ括弧が暗黙的に補われ、値（色「black」）が得られる。しかし、類似した構文「rgb(0,0,」（括弧と「blue」の値の両方が欠落している）は、開いている構文を閉じても有効な値にならないため、構文解析できない。

次の用語および機能は Cascading Style Sheets （CSS）で定義される：[CSS]

ビューポート
行ボックス
フロー外
フロー内
マージンの相殺
包含ブロック
インラインボックス
ブロックボックス
'top'、 'bottom'、 'left'、および 'right' プロパティ
'float' プロパティ
'clear' プロパティ
'width' プロパティ
'height' プロパティ
'min-width' プロパティ
'min-height' プロパティ
'max-width' プロパティ
'max-height' プロパティ
'line-height' プロパティ
'vertical-align' プロパティ
'content' プロパティ
'display' プロパティの 'inline-block' 値
'visibility' プロパティ

'display' プロパティの基本版は CSS で定義され、このプロパティは他の CSS モジュールによって拡張される。 [CSS] [CSSRUBY] [CSSTABLE]

次の用語および機能は CSS Box Model で定義される： [CSSBOX]

コンテンツ領域
コンテンツボックス
ボーダーボックス
マージンボックス
ボーダー辺
マージン辺
'margin-top'、 'margin-bottom'、 'margin-left'、および 'margin-right' プロパティ
'padding-top'、 'padding-bottom'、 'padding-left'、および 'padding-right' プロパティ

次の機能は CSS Logical Properties で定義される： [CSSLOGICAL]

'margin-block'、 'margin-block-start'、 'margin-block-end'、 'margin-inline'、 'margin-inline-start'、および 'margin-inline-end' プロパティ
'padding-block'、 'padding-block-start'、 'padding-block-end'、 'padding-inline'、 'padding-inline-start'、および 'padding-inline-end' プロパティ
'border-block-width'、 'border-block-start-width'、 'border-block-end-width'、 'border-inline-width'、 'border-inline-start-width'、 'border-inline-end-width'、 'border-block-style'、 'border-block-start-style'、 'border-block-end-style'、 'border-inline-style'、 'border-inline-start-style'、 'border-inline-end-style'、 'border-block-start-color'、 'border-block-end-color'、 'border-inline-start-color'、 'border-inline-end-color'、 'border-start-start-radius'、 'border-start-end-radius'、 'border-end-start-radius'、および 'border-end-end-radius' プロパティ
'block-size' プロパティ
'inline-size' プロパティ
'inset-block-start' プロパティ
'inset-block-end' プロパティ

次の用語および機能は CSS Color で定義される： [CSSCOLOR]

名前付き色
<color>
'color' プロパティ
'currentcolor' 値
不透明な黒
透明な黒
'srgb' 色空間
'srgb-linear' 色空間
'display-p3' 色空間
'display-p3-linear' 色空間
'relative-colorimetric' レンダリングインテント
CSS <color> 値を構文解析する
CSS <color> 値をシリアライズする。これには HTML 互換シリアライゼーションが要求されていることを含む
色の変換
'color()'

次の用語は CSS Images で定義される：[CSSIMAGES]

ペイントソースという用語は、特定の HTML 要素と CSS の 'element()' 関数との相互作用を定義するため、CSS Images Level 4 で定義されるとおりに使用される。 [CSSIMAGES4]

次の機能は CSS Backgrounds and Borders で定義される： [CSSBG]

'background-color'、 'background-image'、 'background-repeat'、 'background-attachment'、 'background-position'、 'background-clip'、 'background-origin'、および 'background-size' プロパティ
'border-radius'、 'border-top-left-radius'、 'border-top-right-radius'、 'border-bottom-right-radius'、 'border-bottom-left-radius' プロパティ
'border-image-source'、 'border-image-slice'、 'border-image-width'、 'border-image-outset'、および 'border-image-repeat' プロパティ

CSS Backgrounds and Borders は、次のボーダープロパティも定義する： [CSSBG]

ボーダープロパティ
	上	下	左	右
幅	'border-top-width'	'border-bottom-width'	'border-left-width'	'border-right-width'
スタイル	'border-top-style'	'border-bottom-style'	'border-left-style'	'border-right-style'
色	'border-top-color'	'border-bottom-color'	'border-left-color'	'border-right-color'

次の機能は CSS Box Alignment で定義される：[CSSALIGN]

'align-content' プロパティ
'align-items' プロパティ
'align-self' プロパティ
'justify-self' プロパティ
'justify-content' プロパティ
'justify-items' プロパティ

次の用語および機能は CSS Display で定義される： [CSSDISPLAY]

次の機能は CSS Flexible Box Layout で定義される： [CSSFLEXBOX]

'flex-direction' プロパティ
'flex-wrap' プロパティ

次の用語および機能は CSS Fonts で定義される： [CSSFONTS]

次の機能は CSS Forms で定義される： [CSSFORMS]

次の機能は CSS Gaps で定義される： [CSSGAPS]

'gap' プロパティ
'rule' プロパティ
'rule-break' プロパティ
'rule-inset' プロパティ
'rule-overlap' プロパティ
'rule-visibility-items' プロパティ

次の機能は CSS Grid Layout で定義される：[CSSGRID]

'grid-auto-columns' プロパティ
'grid-auto-flow' プロパティ
'grid-auto-rows' プロパティ
'grid-template-areas' プロパティ
'grid-template-columns' プロパティ
'grid-template-rows' プロパティ

次の用語は CSS Inline Layout で定義される：[CSSINLINE]

次の用語および機能は CSS Box Sizing で定義される： [CSSSIZING]

次の機能は CSS Lists and Counters で定義される。 [CSSLISTS]

リスト項目
'counter-reset' プロパティ
'counter-set' プロパティ
'list-style-type' プロパティ

次の機能は CSS Overflow で定義される。[CSSOVERFLOW]

'overflow' プロパティおよびその 'hidden' 値
'text-overflow' プロパティ
スクロールコンテナーという用語

次の用語および機能は CSS Positioned Layout で定義される： [CSSPOSITION]

次の機能は CSS Multi-column Layout で定義される。 [CSSMULTICOL]

'column-count' プロパティ
'column-fill' プロパティ
'column-width' プロパティ

'display' プロパティの 'ruby-base' 値は CSS Ruby Layout で定義される。 [CSSRUBY]

次の機能は CSS Table で定義される：[CSSTABLE]

'border-spacing' プロパティ
'border-collapse' プロパティ
'display' プロパティの 'table-cell'、 'table-row'、 'table-caption'、および 'table' 値

次の機能は CSS Text で定義される：[CSSTEXT]

コンテンツ言語概念
'text-transform' プロパティ
'white-space' プロパティ
'text-align' プロパティ
'letter-spacing' プロパティ
'word-spacing' プロパティ

次の機能は CSS Writing Modes で定義される：[CSSWM]

'direction' プロパティ
'unicode-bidi' プロパティ
'writing-mode' プロパティ
ブロック進行方向、ブロック軸、インライン軸、ブロックサイズ、インラインサイズ、ブロック開始側、ブロック終了側、インライン開始側、インライン終了側、行の左側、および行の右側の概念

次の機能は CSS Basic User Interface で定義される： [CSSUI]

'outline' プロパティ
'cursor' プロパティ
'appearance' プロパティ、その <compat-auto> 非終端値型、その 'textfield' 値、およびその 'menulist-button' 値。
'field-sizing' プロパティ、およびその 'content' 値。
ウィジェットという概念
ネイティブ外観という概念
プリミティブ外観という概念
基本外観という概念
退化不可能なウィジェットおよび退化可能なウィジェットという分類、ならびに関連する退化したウィジェット状態。
'pointer-events' プロパティ
'user-select' プロパティ

アニメーションを更新してイベントを送信するアルゴリズムは Web Animations で定義される。 [WEBANIMATIONS]

スクリプティングをサポートする実装は、CSS Object Model をサポートしなければならない。次の機能および用語は CSSOM 仕様で定義される：[CSSOM] [CSSOMVIEW]

Screen インターフェイス
LinkStyle インターフェイス
CSSStyleDeclaration インターフェイス
style IDL 属性
CSSStyleDeclaration の cssText 属性
StyleSheet インターフェイス
CSSStyleSheet インターフェイス
CSS スタイルシートを作成する
CSS スタイルシートを削除する
関連付けられた CSS スタイルシート
構築済み CSSStyleSheet を作成する
CSSStyleSheet の規則を同期的に置換する
CSS スタイルシートを無効化する
CSS スタイルシートおよびそのプロパティ：
- 型
- 場所
- 親 CSS スタイルシート
- 所有者ノード
- 所有者 CSS 規則
- メディア
- タイトル
- 代替フラグ
- 無効化フラグ
- CSS 規則
- オリジンクリーンフラグ
CSS スタイルシート集合
CSS スタイルシート集合名
優先 CSS スタイルシート集合名
優先 CSS スタイルシート集合名を変更する
CSS 値をシリアライズする
リサイズ手順を実行する
スクロール手順を実行する
メディアクエリを評価して変更を報告する
ターゲットを表示領域内にスクロールする
文書の先頭までスクロールする
resize イベント
scroll イベント
scrollend イベント
閲覧コンテキスト機能を設定する
MouseEvent インターフェイスの clientX および clientY 拡張属性

次の機能および用語は CSS Syntax で定義される： [CSSSYNTAX]

次の用語は Selectors で定義される：[SELECTORS]

次の機能は CSS Values and Units で定義される： [CSSVALUES]

<length>
'em' 単位
'ex' 単位
'vw' 単位
'in' 単位
'px' 単位
'pt' 単位
'attr()' 関数
数学関数

次の機能は CSS View Transitions で定義される： [CSSVIEWTRANSITIONS]

style 属性という用語は CSS Style Attributes で定義される。[CSSATTR]

次の用語は CSS Cascading and Inheritance で定義される： [CSSCASCADE]

CanvasRenderingContext2D オブジェクトによるフォントの使用は、CSS の Fonts および Font Loading 仕様で説明される機能に依存する。これには特に FontFace オブジェクトおよびフォントソース概念が含まれる。 [CSSFONTS] [CSSFONTLOAD]

次のインターフェイスおよび用語は Geometry Interfaces で定義される： [GEOMETRY]

DOMMatrix インターフェイス、および関連する m11 要素、 m12 要素、 m21 要素、 m22 要素、 m41 要素、および m42 要素
DOMMatrix2DInit および DOMMatrixInit 辞書
DOMMatrix2DInit または DOMMatrixInit 用の、辞書から DOMMatrix を作成するアルゴリズム、および 2D 辞書から DOMMatrix を作成するアルゴリズム
DOMPointInit 辞書、および関連する x と y メンバー
行列の乗算

次の用語は CSS Scoping で定義される：[CSSSCOPING]

フラットツリー

次の用語および機能は CSS Color Adjustment で定義される： [CSSCOLORADJUST]

次の用語は CSS Pseudo-Elements で定義される：[CSSPSEUDO]

次の用語は CSS Containment で定義される：[CSSCONTAIN]

次の用語は CSS Anchor Positioning で定義される：[CSSANCHOR]

暗黙的アンカー要素

Intersection Observer

次の用語は Intersection Observer で定義される： [INTERSECTIONOBSERVER]

Resize Observer

次の用語は Resize Observer で定義される： [RESIZEOBSERVER]

WebGL

次のインターフェイスは WebGL 仕様で定義される：[WEBGL]

WebGLRenderingContext インターフェイス
WebGL2RenderingContext インターフェイス
WebGLContextAttributes 辞書

WebGPU

次のインターフェイスは WebGPU で定義される：[WEBGPU]

GPUCanvasContext インターフェイス

WebVTT

実装は、メディアリソースの字幕、キャプション、メタデータなどのテキストトラック形式として WebVTT をサポートしてもよい。[WEBVTT]

この仕様で使用される次の用語は、WebVTT で定義される：

ARIA

role 属性は Accessible Rich Internet Applications（ARIA）で定義され、次のロールも同様に定義される：[ARIA]

さらに、次の aria-* コンテンツ属性は ARIA で定義される：[ARIA]

最後に、次の用語は ARIA で定義される：[ARIA]

ロール
アクセシブルな名前
ARIAMixin インターフェイス、それに関連付けられた ARIAMixin ゲッター手順および ARIAMixin セッター手順フック、ならびにその role 属性および aria* 属性

Content Security Policy

次の用語は Content Security Policy で定義される：[CSP]

Content Security Policy
処置
ディレクティブ集合
Content Security Policy ディレクティブ
CSP リスト
Content Security Policy 構文
ポリシーを適用する
シリアライズされた Content Security Policy を構文解析するアルゴリズム
Document に対する CSP 初期化を実行するアルゴリズム
グローバルオブジェクトに対する CSP 初期化を実行するアルゴリズム
要素のインライン動作を Content Security Policy によってブロックすべきか？アルゴリズム
型を持つナビゲーションリクエストを Content Security Policy によってブロックすべきか？アルゴリズム
ターゲット内の型を持つナビゲーションリクエストに対するナビゲーションレスポンスを Content Security Policy によってブロックすべきか？アルゴリズム
report-uri ディレクティブ
EnsureCSPDoesNotBlockStringCompilation 抽象演算
Document に対して base は許可されているか？アルゴリズム
frame-ancestors ディレクティブ
sandbox ディレクティブ
ヘッダーで配信された Content Security Policy を含むプロパティ。
レスポンスの Content Security Policy を構文解析するアルゴリズム。
SecurityPolicyViolationEvent インターフェイス
securitypolicyviolation イベント

Service Workers

次の用語は Service Workers で定義される：[SW]

Secure Contexts

次のアルゴリズムは Secure Contexts で定義される： [SECURE-CONTEXTS]

URL は潜在的に信頼できるか？

Permissions Policy

次の用語は Permissions Policy で定義される： [PERMISSIONSPOLICY]

Payment Request API

次の機能は Payment Request API で定義される： [PAYMENTREQUEST]

PaymentRequest インターフェイス

MathML

MathML 全体のサポートはこの仕様で要求されない（ただし、少なくともウェブブラウザーには推奨される）が、一部の機能は MathML の小さな部分が実装されていることに依存する。[MATHML]

次の機能は Mathematical Markup Language （MathML）で定義される：

SVG

SVG 全体のサポートはこの仕様で要求されない（ただし、少なくともウェブブラウザーには推奨される）が、一部の機能は SVG の一部が実装されていることに依存する。

SVG を実装するユーザーエージェントは、以前の改訂版ではなく、 SVG 2 仕様を実装しなければならない。

次の機能は SVG 2 仕様で定義される： [SVG]

SVGElement インターフェイス
SVGImageElement インターフェイス
SVGScriptElement インターフェイス
SVGSVGElement インターフェイス
SVG a 要素
SVG animate 要素
SVG animateTransform 要素
SVG circle 要素
SVG defs 要素
SVG desc 要素
SVG ellipse 要素
SVG foreignObject 要素
SVG g 要素
SVG image 要素
SVG line 要素
SVG marker 要素
SVG metadata 要素
SVG path 要素
SVG polygon 要素
SVG polyline 要素
SVG rect 要素
SVG script 要素
SVG set 要素
SVG svg 要素
SVG text 要素
SVG textPath 要素
SVG title 要素
SVG tspan 要素
SVG use 要素
SVG action 属性
SVG attributeName 属性
SVG cx 属性
SVG cy 属性
SVG d 属性
SVG dx 属性
SVG dy 属性
SVG formaction 属性
SVG height 属性
SVG href 属性
SVG hreflang 属性
SVG lengthAdjust 属性
SVG markerHeight 属性
SVG markerUnits 属性
SVG markerWidth 属性
SVG method 属性
SVG orient 属性
SVG path 属性
SVG pathLength 属性
SVG points 属性
SVG preserveAspectRatio 属性
SVG r 属性
SVG refX 属性
SVG refY 属性
SVG rotate 属性
SVG rx 属性
SVG ry 属性
SVG side 属性
SVG spacing 属性
SVG startOffset 属性
SVG textLength 属性
SVG type 属性
SVG viewBox 属性
SVG width 属性
SVG x 属性
SVG x1 属性
SVG x2 属性
SVG y 属性
SVG y1 属性
SVG y2 属性
SVG text-rendering プロパティ
SVG alignment-baseline プロパティ
SVG baseline-shift プロパティ
SVG clip-path プロパティ
SVG clip-rule プロパティ
SVG color プロパティ
SVG color-interpolation プロパティ
SVG cursor プロパティ
SVG direction プロパティ
SVG display プロパティ
SVG dominant-baseline プロパティ
SVG fill プロパティ
SVG fill-opacity プロパティ
SVG fill-rule プロパティ
SVG font-family プロパティ
SVG font-size プロパティ
SVG font-size-adjust プロパティ
SVG font-stretch プロパティ
SVG font-style プロパティ
SVG font-variant プロパティ
SVG font-weight プロパティ
SVG letter-spacing プロパティ
SVG marker-end プロパティ
SVG marker-mid プロパティ
SVG marker-start プロパティ
SVG opacity プロパティ
SVG paint-order プロパティ
SVG pointer-events プロパティ
SVG shape-rendering プロパティ
SVG stop-color プロパティ
SVG stop-opacity プロパティ
SVG stroke プロパティ
SVG stroke-dasharray プロパティ
SVG stroke-dashoffset プロパティ
SVG stroke-linecap プロパティ
SVG stroke-linejoin プロパティ
SVG stroke-miterlimit プロパティ
SVG stroke-opacity プロパティ
SVG stroke-width プロパティ
SVG text-anchor プロパティ
SVG text-decoration プロパティ
SVG text-overflow プロパティ
SVG transform プロパティ
SVG transform-origin プロパティ
SVG unicode-bidi プロパティ
SVG vector-effect プロパティ
SVG visibility プロパティ
SVG white-space プロパティ
SVG word-spacing プロパティ
SVG writing-mode プロパティ

Filter Effects

次の機能は Filter Effects で定義される：[FILTERS]

<filter-value-list>

Compositing

次の機能は Compositing and Blending で定義される： [COMPOSITE]

Cooperative Scheduling of Background Tasks

次の機能は Cooperative Scheduling of Background Tasks で定義される：[REQUESTIDLECALLBACK]

Screen Orientation

次の用語は Screen Orientation で定義される： [SCREENORIENTATION]

画面の向きの変更手順

Storage

次の用語は Storage で定義される：[STORAGE]

Web App Manifest

次の機能は Web App Manifest で定義される：[MANIFEST]

WebAssembly JavaScript Interface: ESM Integration

次の用語は WebAssembly JavaScript Interface: ESM Integration で定義される：[WASMESM]

WebCodecs

次の機能は WebCodecs で定義される：[WEBCODECS]

VideoFrame インターフェイス。
[[display width]]
[[display height]]

WebDriver

次の用語は WebDriver で定義される：[WEBDRIVER]

WebDriver BiDi

次の用語は WebDriver BiDi で定義される：[WEBDRIVERBIDI]

Web Cryptography API

次の用語は Web Cryptography API で定義される： [WEBCRYPTO]

ランダムな UUID を生成する

WebSockets

次の用語は WebSockets で定義される：[WEBSOCKETS]

WebTransport

次の用語は WebTransport で定義される：[WEBTRANSPORT]

Web Authentication: An API for accessing Public Key Credentials

次の用語は Web Authentication: An API for accessing Public Key Credentials で定義される：[WEBAUTHN]

公開鍵資格情報

Credential Management

次の用語は Credential Management で定義される：[CREDMAN]

Console

次の用語は Console で定義される：[CONSOLE]

コンソールに警告を報告する

Web Locks API

次の用語は Web Locks API で定義される：[WEBLOCKS]

Trusted Types

この仕様は、Trusted Types で定義される次の機能を使用する： [TRUSTED-TYPES]

WebRTC API

次の用語は WebRTC API で定義される：[WEBRTC]

Picture-in-Picture API

次の用語は Picture-in-Picture API で定義される：[PICTUREINPICTURE]

PictureInPictureWindow

Idle Detection API

次の用語は Idle Detection API で定義される：

IdleDetector

Web Speech API

次の用語は Web Speech API で定義される：

SpeechRecognition

WebOTP API

次の用語は WebOTP API で定義される：

OTPCredential

Web Share API

次の用語は Web Share API で定義される：

share()

Web Smart Card API

次の用語は Web Smart Card API で定義される：

SmartCardConnection

Web Background Synchronization

次の用語は Web Background Synchronization で定義される：

Web Periodic Background Synchronization

次の用語は Web Periodic Background Synchronization で定義される：

Web Background Fetch

次の用語は Background Fetch で定義される：

Keyboard Lock

次の用語は Keyboard Lock で定義される：

Web MIDI API

次の用語は Web MIDI API で定義される：

requestMIDIAccess()

Generic Sensor API

次の用語は Generic Sensor API で定義される：

センサーへのアクセスを要求する

WebHID API

次の用語は WebHID API で定義される：

requestDevice

WebXR Device API

次の用語は WebXR Device API で定義される：

XRSystem

この仕様は、上記の一覧で要求されるものを超えて、特定のネットワークプロトコル、スタイルシート言語、スクリプティング言語、または DOM 仕様のサポートを要求しない。ただし、この仕様で説明される言語は、スタイル言語として CSS、スクリプティング言語として JavaScript、ネットワークプロトコルとして HTTP を使用することを前提としており、いくつかの機能はそれらの言語およびプロトコルが使用されていることを想定している。

HTTP プロトコルを実装するユーザーエージェントは、HTTP State Management Mechanism（Cookie）も実装しなければならない。[HTTP] [COOKIES]

この仕様は、それぞれの節において、文字エンコーディング、画像形式、音声形式、および動画形式に関する追加要件を定めることがある。

2.1.10 拡張性

この仕様に対するベンダー固有の独自ユーザーエージェント拡張は強く非推奨とされる。文書はそのような拡張を使用してはならない。使用すると相互運用性が低下し、ユーザー基盤が分断され、特定のユーザーエージェントの利用者だけが対象のコンテンツにアクセスできるようになるためである。

すべての拡張は、その使用が仕様で定義された機能と矛盾せず、またその機能を不適合にしないように定義しなければならない。

例えば、強く非推奨ではあるが、実装はコントロールに新しい IDL 属性「typeTime」を追加し、ユーザーがコントロールの現在の値を選択するのに要した時間を返すようにしてもよい。一方、フォームの elements 配列に現れる新しいコントロールを定義することは、上記の要件に違反する。これは、この仕様で与えられた elements の定義に違反するためである。

この仕様に対するベンダー中立な拡張が必要な場合、この仕様をそれに応じて更新するか、この仕様の要件を上書きする拡張仕様を作成できる。この仕様を自らの活動に適用する者が、そのような拡張仕様の要件を認めると決定した場合、その拡張仕様は、この仕様における適合性要件のための適用可能な仕様となる。

任意のバイトストリームを適合すると定義する仕様を誰かが作成し、その上で無作為な無意味データが適合していると主張することもできる。しかし、それはその無作為な無意味データがすべての人の目的に対して実際に適合していることを意味しない。別の者がその仕様は自らの作業には適用されないと判断した場合、前述の無作為な無意味データは単なる無意味データであり、まったく適合していないと正当に述べることができる。適合性に関して、特定のコミュニティで重要なのは、そのコミュニティが何を適用可能であると合意するかである。

ユーザーエージェントは、理解できない要素および属性を意味論的に中立なものとして扱わなければならない。すなわち、DOM プロセッサーではそれらを DOM に残し、CSS プロセッサーでは CSS に従ってスタイルを適用するが、それらからいかなる意味も推論してはならない。

機能のサポートが無効化されている場合（例えば、セキュリティ問題を軽減するための緊急措置、開発支援、またはパフォーマンス上の理由による場合）、ユーザーエージェントは、その機能をまったくサポートしておらず、その機能がこの仕様に記載されていないかのように動作しなければならない。例えば、特定の機能が Web IDL インターフェイスの属性を通じてアクセスされる場合、その属性自体をそのインターフェイスを実装するオブジェクトから省略しなければならない。属性をオブジェクト上に残したまま null を返すようにしたり、例外をスローするようにしたりするだけでは不十分である。

2.1.11 XPath および XSLT との相互作用

この仕様で説明される方法により構文解析または作成された HTML 文書に対して動作する XPath 1.0 の実装（例えば document.evaluate() API の一部として）は、XPath 1.0 仕様に次の編集が適用されたかのように動作しなければならない。

まず、次の段落を削除する：

ノードテスト内の QName は、式コンテキストの名前空間宣言を使用して展開名に展開される。これは、開始タグおよび終了タグ内の要素型名の展開方法と同じであるが、 xmlns で宣言された既定の名前空間は使用されない。すなわち、 QName に接頭辞がない場合、名前空間 URI は null となる（これは属性名が展開される方法と同じである）。 QName に、式コンテキスト内に名前空間宣言が存在しない接頭辞がある場合はエラーとなる。

次に、その位置に以下を挿入する：

ノードテスト内の QName は、式コンテキストの名前空間宣言を使用して展開名に展開される。 QName に接頭辞がある場合、式コンテキスト内にその接頭辞に対応する名前空間宣言が存在しなければならず、対応する名前空間 URI がその接頭辞に関連付けられる。 QName に、式コンテキスト内に名前空間宣言が存在しない接頭辞がある場合はエラーとなる。

QName に接頭辞がなく、軸の主ノード型が要素である場合、既定の要素名前空間が使用される。それ以外の場合、QName に接頭辞がなければ、名前空間 URI は null となる。既定の要素名前空間は XPath 式のコンテキストの一部である。DOM3 XPath API を通じて XPath 式を実行する際の既定の要素名前空間の値は、次の方法で決定される：

コンテキストノードが HTML DOM に由来する場合、既定の要素名前空間は "http://www.w3.org/1999/xhtml" である。

それ以外の場合、既定の要素名前空間 URI は null である。

これは、XPath 2.0 の既定の要素名前空間機能を XPath 1.0 に追加し、 HTML 文書について HTML 名前空間を既定の要素名前空間として使用することと同等である。これは、HTML 要素に使用される名前空間に関してこの仕様が HTML に導入する変更を引き続きサポートしながら、実装をレガシー HTML コンテンツと互換にしたいという要望、および XPath 2.0 ではなく XPath 1.0 を使用したいという要望に基づく。

この変更は XPath 1.0 仕様に対する意図的な違反であり、HTML 要素にどの名前空間が使用されるかに関してこの仕様が HTML に導入する変更を引き続きサポートしながら、実装をレガシーコンテンツと互換にしたいという要望に基づく。 [XPATH10]

出力方式が "html" である場合（明示的に指定された場合、または XSLT 1.0 の既定規則による場合）に DOM へ出力する XSLT 1.0 プロセッサーは、次のような影響を受ける：

変換プログラムが名前空間に属さない要素を出力する場合、プロセッサーは対応する DOM 要素ノードを構築する前に、その要素の名前空間を HTML 名前空間に変更し、要素のローカル名を ASCII 小文字化し、さらに要素上の名前空間に属さないすべての属性名を ASCII 小文字化しなければならない。

この要件は XSLT 1.0 仕様に対する意図的な違反であり、この仕様が HTML の名前空間および大文字小文字の区別に関する規則を、 DOM ベースの XSLT 変換と互換性がなくなるような形で変更するために必要とされる。（出力をシリアライズするプロセッサーは影響を受けない。）[XSLT10]

この仕様は、XSLT 処理が HTML パーサー基盤とどのように相互作用するかを厳密には規定しない（例えば、XSLT プロセッサーが要素を開いている要素のスタックに入れるかのように動作するかどうか）。ただし、XSLT プロセッサーは、正常に完了した場合は構文解析を停止しなければならず、中止された場合は、まず現在の文書の準備状態を更新して「interactive」とし、その後「complete」としなければならない。

この仕様は、XSLT がナビゲーションアルゴリズムとどのように相互作用するか、イベントループにどのように組み込まれるか、またエラーページをどのように処理するか（例えば、XSLT エラーが増分 XSLT 出力を置換するのか、インラインでレンダリングされるのかなど）を規定しない。

XSLT と HTML の相互作用については script 要素の節に、 XSLT、XPath、および HTML の相互作用については template 要素の節に、追加の非規範的な注記がある。

2.2 ポリシー制御機能

Headers/Permissions-Policy/document-domain

1 つのエンジンのみでサポートされています。

Firefox🔰 74+SafariいいえChrome🔰 88+

Opera?Edge🔰 88+

Edge（レガシー）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome AndroidいいえWebView Android?Samsung Internet?Opera Android?

この文書は、次のポリシー制御機能を定義する：

Headers/Feature-Policy/autoplay

Firefox🔰 74+SafariいいえChrome64+

Opera?Edge79+

Edge（レガシー）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Headers/Permissions-Policy/autoplay

1 つのエンジンのみでサポートされています。

Firefox🔰 74+SafariいいえChrome88+

Opera?Edge88+

Edge（レガシー）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

「autoplay」。その既定の許可リストは 'self' である。
「cross-origin-isolated」。その既定の許可リストは 'self' である。
「focus-without-user-activation」。その既定の許可リストは 'self' である。

2.3 共通マイクロ構文

HTML には、日付や数値など、特定のデータ型を受け入れるさまざまな箇所がある。この節では、それらの形式のコンテンツに対する適合性基準と、それらを構文解析する方法について説明する。

実装者には、以下で説明する構文の構文解析を実装するために使用を検討するサードパーティーライブラリーを、慎重に調査することが強く求められる。例えば、日付ライブラリーは、この仕様で要求されるものとは異なるエラー処理動作を実装している可能性が高い。これは、この仕様で使用されるものと類似した日付構文を説明する仕様では、エラー処理動作が定義されていないことが多く、そのため実装によってエラーの処理方法が大きく異なる傾向があるためである。

2.3.1 共通のパーサー慣用句

以下で説明するマイクロパーサーの一部は、構文解析対象の文字列を保持する input 変数と、input 内で次に構文解析する文字を指す position 変数を持つというパターンに従う。

2.3.2 ブール属性

多くの属性はブール属性である。要素上にブール属性が存在することは真の値を表し、その属性が存在しないことは偽の値を表す。

属性が存在する場合、その値は空文字列、または属性の正規名と ASCII 大文字小文字不区別で一致する値のいずれかでなければならず、先頭または末尾に空白があってはならない。

ブール属性では、値「true」および「false」は許可されない。偽の値を表すには、その属性自体を完全に省略しなければならない。

以下は、チェックされ、かつ無効化されたチェックボックスの例である。checked 属性と disabled 属性がブール属性である。

<label><input type=checkbox checked name=cheese disabled> Cheese</label>

これは、次のように同等に記述できる：

<label><input type=checkbox checked=checked name=cheese disabled=disabled> Cheese</label>

記法を混在させることもできる。次の例も同等である：

<label><input type='checkbox' checked name=cheese disabled=""> Cheese</label>

2.3.3 キーワードと列挙属性

列挙属性と呼ばれる一部の属性は、有限個の状態のいずれかを取る。このような属性の状態は、属性の値、キーワードと状態の対応関係の集合、およびその属性の仕様で指定することもできる 3 つの特別な状態を組み合わせて導出される。これらの特別な状態は、 無効値の既定状態、欠落値の既定状態、および 空値の既定状態である。

複数のキーワードが同じ状態に対応してもよい。

属性の状態を決定するには、次の手順を使用する：

属性が指定されていない場合：
1. 属性に 欠落値の既定状態 が定義されている場合、その 欠落値の既定状態 を返す。
2. それ以外の場合、状態なしを返す。
属性の値が、その属性について定義されたキーワードのいずれかと ASCII 大文字小文字不区別で一致する場合、そのキーワードが表す状態を返す。
属性に 空値の既定状態が定義されており、属性の値が空文字列である場合、その 空値の既定状態を返す。
属性に 無効値の既定状態が定義されている場合、その 無効値の既定状態 を返す。
状態なしを返す。

作者の適合性に関して、列挙属性が指定されている場合、その属性の値は次のいずれかでなければならない：

その属性の適合キーワードのいずれかと ASCII 大文字小文字不区別で一致し、先頭または末尾に空白を含まない値。
空文字列であり、かつ属性に 空値の既定状態が定義されていること。

反映のため、対応するキーワードが 1 つ以上ある状態は、正規キーワードを持つという。これは次のように決定される：

指定された状態に対応するキーワードが 1 つだけである場合、それが正規キーワードである。
指定された状態に対応する適合キーワードが 1 つだけである場合、その適合キーワードが正規キーワードである。
指定された状態に対応する適合キーワードが 2 つあり、その一方が空文字列である場合、空文字列ではない適合キーワードが正規キーワードとなる。
それ以外の場合、その状態の正規キーワードは、属性の仕様で明示的に指定される。

2.3.4 数値

2.3.4.1 符号付き整数

文字列は、1 個以上の ASCII 数字からなり、任意で先頭に U+002D HYPHEN-MINUS 文字（-）が付く場合、妥当な整数である。

U+002D HYPHEN-MINUS（-）接頭辞を持たない妥当な整数は、その数字列によって 10 進数で表される数を表す。U+002D HYPHEN-MINUS（-）接頭辞を持つ妥当な整数は、 U+002D HYPHEN-MINUS の後に続く数字列が 10 進数で表す数を、ゼロから減算した数を表す。

整数を構文解析する規則は、次のアルゴリズムで示すとおりである。呼び出された場合、値を返す最初の手順で中止しながら、指定された順序で手順に従わなければならない。このアルゴリズムは整数またはエラーを返す。

input を構文解析対象の文字列とする。
position を input 内へのポインターとし、最初は文字列の先頭を指すものとする。
sign の値を「positive」とする。
position を与えて、input 内の ASCII 空白をスキップする。
position が input の末尾を越えている場合、エラーを返す。
position が示す文字（最初の文字）が U+002D HYPHEN-MINUS 文字（-）である場合：
1. sign を「negative」とする。
2. position を次の文字へ進める。
3. position が input の末尾を越えている場合、エラーを返す。
それ以外で、position が示す文字（最初の文字）が U+002B PLUS SIGN 文字（+）である場合：
1. position を次の文字へ進める。（「+」は無視されるが、適合ではない。）
2. position が input の末尾を越えている場合、エラーを返す。
position が示す文字が ASCII 数字でない場合、エラーを返す。
position を与えて、input から ASCII 数字である符号位置の列を収集し、結果の列を 10 進整数として解釈する。value をその整数とする。
sign が「positive」である場合は value を返し、それ以外の場合は value をゼロから減算した結果を返す。

2.3.4.2 非負整数

文字列は、1 個以上の ASCII 数字からなる場合、妥当な非負整数である。

妥当な非負整数は、その数字列によって 10 進数で表される数を表す。

非負整数を構文解析する規則は、次のアルゴリズムで示すとおりである。呼び出された場合、値を返す最初の手順で中止しながら、指定された順序で手順に従わなければならない。このアルゴリズムは、ゼロ、正の整数、またはエラーを返す。

input を構文解析対象の文字列とする。
value を、input に整数を構文解析する規則を適用した結果とする。
value がエラーである場合、エラーを返す。
value がゼロ未満である場合、エラーを返す。
value を返す。

2.3.4.3 浮動小数点数

文字列は、次のものから構成される場合、妥当な浮動小数点数である：

任意で、U+002D HYPHEN-MINUS 文字（-）。
次の一方または両方を、指定された順序で：
1. 1 個以上の ASCII 数字の列。
2. 次の両方を、指定された順序で：
  1. 単一の U+002E FULL STOP 文字（.）。
  2. 1 個以上の ASCII 数字の列。
任意で：
1. U+0065 LATIN SMALL LETTER E 文字（e）または U+0045 LATIN CAPITAL LETTER E 文字（E）のいずれか。
2. 任意で、U+002D HYPHEN-MINUS 文字（-）または U+002B PLUS SIGN 文字（+）。
3. 1 個以上の ASCII 数字の列。

妥当な浮動小数点数は、仮数に 10 の指数乗を乗算して得られる数を表す。ここで仮数は、最初の数を 10 進数として解釈したものである（小数点および小数点後の数があればそれらを含み、文字列全体が U+002D HYPHEN-MINUS 文字（-）で始まり、かつ数がゼロでない場合は、仮数を負の数として解釈する）。指数は、E の後に数がある場合はその数である（E と数の間に U+002D HYPHEN-MINUS 文字（-）があり、かつ数がゼロでない場合は負の数として解釈し、E と数の間に U+002B PLUS SIGN 文字（+）がある場合はそれを無視する）。 E がない場合、指数はゼロとして扱われる。

Infinity および Not-a-Number（NaN）の値は、妥当な浮動小数点数ではない。

妥当な浮動小数点数という概念は通常、作者に許可される内容を制限するためにのみ使用され、ユーザーエージェント要件では以下の浮動小数点数値を構文解析する規則が使用される（例えば、max 属性は progress 要素の属性である）。ただし、場合によっては、ユーザーエージェント要件に、文字列が妥当な浮動小数点数であるかを検査することが含まれる（例えば、input 要素の Number 状態に対する値のサニタイズアルゴリズム、または srcset 属性を構文解析するアルゴリズム）。

数 n の浮動小数点数としての最適な表現は、ToString(n) を実行して得られる文字列である。抽象演算 ToString は一意には決定されない。特定の値について ToString から得られる可能性のある文字列が複数ある場合、ユーザーエージェントは、その値に対して常に同じ文字列を返さなければならない（ただし、他のユーザーエージェントが使用する値とは異なってもよい）。

浮動小数点数値を構文解析する規則は、次のアルゴリズムで示すとおりである。このアルゴリズムは、何かを返す最初の手順で中止しなければならない。このアルゴリズムは数またはエラーを返す。

input を構文解析対象の文字列とする。
position を input 内へのポインターとし、最初は文字列の先頭を指すものとする。
value の値を 1 とする。
divisor の値を 1 とする。
exponent の値を 1 とする。
position を与えて、input 内の ASCII 空白をスキップする。
position が input の末尾を越えている場合、エラーを返す。
position が示す文字が U+002D HYPHEN-MINUS 文字（-）である場合：
1. value と divisor を −1 に変更する。
2. position を次の文字へ進める。
3. position が input の末尾を越えている場合、エラーを返す。
それ以外で、position が示す文字（最初の文字）が U+002B PLUS SIGN 文字（+）である場合：
1. position を次の文字へ進める。（「+」は無視されるが、適合ではない。）
2. position が input の末尾を越えている場合、エラーを返す。
position が示す文字が U+002E FULL STOP（.）であり、それが input の最後の文字ではなく、かつ position が示す文字の次の文字が ASCII 数字である場合、 value をゼロに設定し、fraction とラベル付けされた手順へ移る。
position が示す文字が ASCII 数字でない場合、エラーを返す。
position を与えて、input から ASCII 数字である符号位置の列を収集し、結果の列を 10 進整数として解釈する。value にその整数を乗算する。
position が input の末尾を越えている場合、 conversion とラベル付けされた手順へ移る。
Fraction：position が示す文字が U+002E FULL STOP（.）である場合、次の下位手順を実行する：
1. position を次の文字へ進める。
2. position が input の末尾を越えている場合、または position が示す文字が ASCII 数字、 U+0065 LATIN SMALL LETTER E（e）、または U+0045 LATIN CAPITAL LETTER E（E）のいずれでもない場合、conversion とラベル付けされた手順へ移る。
3. position が示す文字が U+0065 LATIN SMALL LETTER E 文字（e）または U+0045 LATIN CAPITAL LETTER E 文字（E）である場合、これらの下位手順の残りをスキップする。
4. Fraction loop：divisor に 10 を乗算する。
5. position が示す文字の値を 10 進数字（0..9）として解釈し、 divisor で除算したものを value に加算する。
6. position を次の文字へ進める。
7. position が input の末尾を越えている場合、 conversion とラベル付けされた手順へ移る。
8. position が示す文字が ASCII 数字である場合、これらの下位手順内の fraction loop とラベル付けされた手順へ戻る。
position が示す文字が U+0065（e）または U+0045（E）である場合：
1. position を次の文字へ進める。
2. position が input の末尾を越えている場合、 conversion とラベル付けされた手順へ移る。
3. position が示す文字が U+002D HYPHEN-MINUS 文字（-）である場合：
  1. exponent を −1 に変更する。
  2. position を次の文字へ進める。
  3. position が input の末尾を越えている場合、 conversion とラベル付けされた手順へ移る。
  それ以外で、position が示す文字が U+002B PLUS SIGN 文字（+）である場合：
  1. position を次の文字へ進める。
  2. position が input の末尾を越えている場合、 conversion とラベル付けされた手順へ移る。
4. position が示す文字が ASCII 数字でない場合、 conversion とラベル付けされた手順へ移る。
5. position を与えて、input から ASCII 数字である符号位置の列を収集し、結果の列を 10 進整数として解釈する。exponent にその整数を乗算する。
6. value に、10 の exponent 乗を乗算する。
Conversion：S を、−0 を除く有限の IEEE 754 倍精度浮動小数点値の集合に、2 つの特殊値 2¹⁰²⁴ および −2¹⁰²⁴ を加えたものとする。
rounded-value を、S 内で value に最も近い数とし、同じ距離の値が 2 つある場合は仮数が偶数の数を選択する。（2 つの特殊値 2¹⁰²⁴ および −2¹⁰²⁴ は、この目的では偶数の仮数を持つものとみなす。）
rounded-value が 2¹⁰²⁴ または −2¹⁰²⁴ である場合、エラーを返す。
rounded-value を返す。

2.3.4.4 パーセンテージと長さ

寸法値を構文解析する規則は、次のアルゴリズムで示すとおりである。呼び出された場合、値を返す最初の手順で中止しながら、指定された順序で手順に従わなければならない。このアルゴリズムは 0.0 以上の数または失敗を返す。数が返された場合、その数はさらにパーセンテージまたは長さのいずれかに分類される。

input を構文解析対象の文字列とする。
position を input の位置変数とし、最初は input の先頭を指すものとする。
position を与えて、input 内の ASCII 空白をスキップする。
position が input の末尾を越えているか、 input 内の position にある符号位置が ASCII 数字でない場合、失敗を返す。
position を与えて、input から ASCII 数字である符号位置の列を収集し、結果の列を 10 進整数として解釈する。value をその数とする。
position が input の末尾を越えている場合、 value を長さとして返す。
input 内の position にある符号位置が U+002E（.）である場合：
1. position を 1 進める。
2. position が input の末尾を越えているか、 input 内の position にある符号位置が ASCII 数字でない場合、value、input、および position を用いて現在の寸法値を返す。
3. divisor の値を 1 とする。
4. 永久に繰り返す：
  1. divisor に 10 を乗算する。
  2. input 内の position にある符号位置の値を 10 進数字（0..9）として解釈し、divisor で除算したものを value に加算する。
  3. position を 1 進める。
  4. position が input の末尾を越えている場合、 value を長さとして返す。
  5. input 内の position にある符号位置が ASCII 数字でない場合、中断する。
value、input、および position を用いて現在の寸法値を返す。

value、input、および position が与えられた場合、現在の寸法値は次のように決定される：

position が input の末尾を越えている場合、 value を長さとして返す。
input 内の position にある符号位置が U+0025（%）である場合、 value をパーセンテージとして返す。
value を長さとして返す。

2.3.4.5 0 でないパーセンテージと長さ

0 でない寸法値を構文解析する規則は、次のアルゴリズムで示すとおりである。呼び出された場合、値を返す最初の手順で中止しながら、指定された順序で手順に従わなければならない。このアルゴリズムは 0.0 より大きい数またはエラーを返す。数が返された場合、その数はさらにパーセンテージまたは長さのいずれかに分類される。

input を構文解析対象の文字列とする。
value を、input に寸法値を構文解析する規則を適用した結果とする。
value がエラーである場合、エラーを返す。
value がゼロである場合、エラーを返す。
value がパーセンテージである場合、value をパーセンテージとして返す。
value を長さとして返す。

2.3.4.6 浮動小数点数のリスト

妥当な浮動小数点数のリストは、複数の妥当な浮動小数点数を U+002C COMMA 文字で区切ったものであり、その他の文字（例えば ASCII 空白）を含まない。さらに、指定できる浮動小数点数の個数または許可される値の範囲に制限が設けられることがある。

浮動小数点数のリストを構文解析する規則は、次のとおりである：

input を構文解析対象の文字列とする。
position を input 内へのポインターとし、最初は文字列の先頭を指すものとする。
numbers を、最初は空である浮動小数点数のリストとする。このリストがこのアルゴリズムの結果となる。
position を与えて、input から ASCII 空白、U+002C COMMA、または U+003B SEMICOLON 文字である符号位置の列を収集する。これにより、先頭の区切り文字を読み飛ばす。
position が input の末尾を越えていない間：
1. position を与えて、input から ASCII 空白、U+002C COMMA、U+003B SEMICOLON、ASCII 数字、 U+002E FULL STOP、または U+002D HYPHEN-MINUS 文字のいずれでもない符号位置の列を収集する。これにより、先頭の不要な文字を読み飛ばす。
2. position を与えて、input から ASCII 空白、U+002C COMMA、または U+003B SEMICOLON 文字のいずれでもない符号位置の列を収集し、結果を unparsed number とする。
3. number を、unparsed number に浮動小数点数値を構文解析する規則を適用した結果とする。
4. number がエラーである場合、number をゼロに設定する。
5. number を numbers に付加する。
6. position を与えて、input から ASCII 空白、U+002C COMMA、または U+003B SEMICOLON 文字である符号位置の列を収集する。これにより、区切り文字を読み飛ばす。
numbers を返す。

2.3.4.7 寸法のリスト

寸法のリストを構文解析する規則は、次のとおりである。これらの規則は、数と単位からなる 0 個以上の組のリストを返す。単位は percentage、relative、および absolute のいずれかである。

raw input を構文解析対象の文字列とする。
raw input の最後の文字が U+002C COMMA 文字（,）である場合、その文字を raw input から削除する。
文字列 raw input をコンマで分割する。raw tokens を、結果として得られるトークンのリストとする。
result を、数と単位の組からなる空のリストとする。
raw tokens 内の各トークンについて、次の下位手順を実行する：
1. input をそのトークンとする。
2. position を input 内へのポインターとし、最初は文字列の先頭を指すものとする。
3. value を数 0 とする。
4. unit を absolute とする。
5. position が input の末尾を越えている場合、 unit を relative に設定し、最後の下位手順へ移る。
6. position にある文字が ASCII 数字である場合、 position を与えて、input から ASCII 数字である符号位置の列を収集し、結果の列を 10 進整数として解釈し、その整数だけ value を増加させる。
7. position にある文字が U+002E（.）である場合：
  1. position を与えて、input から ASCII 空白および ASCII 数字からなる符号位置の列を収集する。 s を結果の列とする。
  2. s 内のすべての ASCII 空白を削除する。
  3. s が空文字列でない場合：
    1. length を、s 内の文字数（空白を削除した後の文字数）とする。
    2. fraction を、s を 10 進整数として解釈し、その数を 10^length で除算した結果とする。
    3. value を fraction だけ増加させる。
8. position を与えて、input 内の ASCII 空白をスキップする。
9. position にある文字が U+0025 PERCENT SIGN 文字（%）である場合、 unit を percentage に設定する。
  
  それ以外で、position にある文字が U+002A ASTERISK 文字（*）である場合、unit を relative に設定する。
10. value で与えられる数と unit で与えられる単位からなるエントリーを result に追加する。
リスト result を返す。

2.3.5 日付と時刻

以下のアルゴリズムにおいて、年 year の月 month の日数は、month が 1、3、5、7、8、 10、または 12 の場合は 31、month が 4、6、9、または 11 の場合は 30、 month が 2 で、year が 400 で割り切れる数である場合、または year が 4 で割り切れるが 100 では割り切れない数である場合は 29、それ以外の場合は 28 である。これはグレゴリオ暦の閏年を考慮している。 [GREGORIAN]

この節で定義される日付および時刻の構文で ASCII 数字が使用される場合、それらは 10 進数を表す。

ここで説明する形式は、対応する ISO8601 形式の部分集合となることを意図しているが、この仕様では ISO8601 よりもはるかに詳細な構文解析規則を定義する。したがって実装者には、以下で説明する構文解析規則を実装するために日付構文解析ライブラリーを使用する前に、それらを慎重に調査することが推奨される。ISO8601 ライブラリーは、日付および時刻をまったく同じ方法では構文解析しない可能性がある。[ISO8601]

この仕様で先発グレゴリオ暦という場合、現代のグレゴリオ暦を西暦 1 年まで遡って拡張したものを意味する。先発グレゴリオ暦の日付は、明示的に先発グレゴリオ暦の日付と呼ばれることもあり、対象となる時代または場所でその暦が使用されていなかった場合でも、その暦を使用して記述される日付である。[GREGORIAN]

この仕様で通信形式としてグレゴリオ暦を使用することは、決定に関わった者の文化的偏向に起因する恣意的な選択である。フォームにおける日付、時刻、および数値の形式に関する節（作者向け）、フォームコントロールのローカライズに関する実装上の注記、および time 要素も参照のこと。

2.3.5.1 月

月は、タイムゾーン情報を持たず、年および月を超える日付情報も持たない、特定の先発グレゴリオ暦の日付からなる。 [GREGORIAN]

文字列は、年 year および月 month を表し、次の構成要素を指定された順序で含む場合、妥当な月文字列である：

year を表す 4 個以上の ASCII 数字。ここで year > 0
U+002D HYPHEN-MINUS 文字（-）
月 month を表す 2 個の ASCII 数字。範囲は 1 ≤ month ≤ 12

月文字列を構文解析する規則は次のとおりである。これは年と月、または何も返さない。アルゴリズムのいずれかの時点で「失敗する」とされている場合、その時点で中止し、何も返さないことを意味する。

input を構文解析対象の文字列とする。
position を input 内へのポインターとし、最初は文字列の先頭を指すものとする。
月構成要素を構文解析して year および month を得る。これが何も返さない場合、失敗する。
position が input の末尾を越えていない場合、失敗する。
year および month を返す。

input 文字列および position が与えられた場合の、月構成要素を構文解析する規則は次のとおりである。これは年と月、または何も返さない。アルゴリズムのいずれかの時点で「失敗する」とされている場合、その時点で中止し、何も返さないことを意味する。

position を与えて、input から ASCII 数字である符号位置の列を収集する。収集された列が少なくとも 4 文字の長さでない場合、失敗する。それ以外の場合、結果の列を 10 進整数として解釈する。year をその数とする。
year がゼロより大きい数でない場合、失敗する。
position が input の末尾を越えている場合、または position にある文字が U+002D HYPHEN-MINUS 文字でない場合、失敗する。それ以外の場合、position を 1 文字先へ進める。
position を与えて、input から ASCII 数字である符号位置の列を収集する。収集された列が正確に 2 文字の長さでない場合、失敗する。それ以外の場合、結果の列を 10 進整数として解釈する。month をその数とする。
month が範囲 1 ≤ month ≤ 12 内の数でない場合、失敗する。
year および month を返す。

2.3.5.2 日付

日付は、タイムゾーン情報を持たず、年、月、および日からなる、特定の先発グレゴリオ暦の日付である。 [GREGORIAN]

文字列は、年 year、月 month、および日 day を表し、次の構成要素を指定された順序で含む場合、妥当な日付文字列である：

year および month を表す妥当な月文字列
U+002D HYPHEN-MINUS 文字（-）
day を表す 2 個の ASCII 数字。範囲は 1 ≤ day ≤ maxday であり、 maxday は年 year の月 month の日数である

日付文字列を構文解析する規則は次のとおりである。これは日付、または何も返さない。アルゴリズムのいずれかの時点で「失敗する」とされている場合、その時点で中止し、何も返さないことを意味する。

input を構文解析対象の文字列とする。
position を input 内へのポインターとし、最初は文字列の先頭を指すものとする。
日付構成要素を構文解析して year、month、および day を得る。これが何も返さない場合、失敗する。
position が input の末尾を越えていない場合、失敗する。
date を、年が year、月が month、日が day である日付とする。
date を返す。

input 文字列および position が与えられた場合の、日付構成要素を構文解析する規則は次のとおりである。これは年、月、および日、または何も返さない。アルゴリズムのいずれかの時点で「失敗する」とされている場合、その時点で中止し、何も返さないことを意味する。

月構成要素を構文解析して year および month を得る。これが何も返さない場合、失敗する。
maxday を、年 year の月 month の日数とする。
position が input の末尾を越えている場合、または position にある文字が U+002D HYPHEN-MINUS 文字でない場合、失敗する。それ以外の場合、position を 1 文字先へ進める。
position を与えて、input から ASCII 数字である符号位置の列を収集する。収集された列が正確に 2 文字の長さでない場合、失敗する。それ以外の場合、結果の列を 10 進整数として解釈する。day をその数とする。
day が範囲 1 ≤ day ≤ maxday 内の数でない場合、失敗する。
year、month、および day を返す。

2.3.5.3 年のない日付

年のない日付は、グレゴリオ暦の月およびその月内の日からなり、関連付けられた年を持たない。[GREGORIAN]

文字列は、月 month および日 day を表し、次の構成要素を指定された順序で含む場合、妥当な年のない日付文字列である：

任意で、2 個の U+002D HYPHEN-MINUS 文字（-）
月 month を表す 2 個の ASCII 数字。範囲は 1 ≤ month ≤ 12
U+002D HYPHEN-MINUS 文字（-）
day を表す 2 個の ASCII 数字。範囲は 1 ≤ day ≤ maxday であり、 maxday は月 month および任意の閏年（例えば 4 または 2000）における日数である

言い換えると、month が 2 月を意味する「02」である場合、年が閏年であるかのように、日には 29 を指定できる。

年のない日付文字列を構文解析する規則は次のとおりである。これは月と日、または何も返さない。アルゴリズムのいずれかの時点で「失敗する」とされている場合、その時点で中止し、何も返さないことを意味する。

input を構文解析対象の文字列とする。
position を input 内へのポインターとし、最初は文字列の先頭を指すものとする。
年のない日付構成要素を構文解析して month および day を得る。これが何も返さない場合、失敗する。
position が input の末尾を越えていない場合、失敗する。
month および day を返す。

input 文字列および position が与えられた場合の、年のない日付構成要素を構文解析する規則は次のとおりである。これは月と日、または何も返さない。アルゴリズムのいずれかの時点で「失敗する」とされている場合、その時点で中止し、何も返さないことを意味する。

position を与えて、input から U+002D HYPHEN-MINUS 文字（-）である符号位置の列を収集する。収集された列が正確に 0 文字または 2 文字の長さでない場合、失敗する。
position を与えて、input から ASCII 数字である符号位置の列を収集する。収集された列が正確に 2 文字の長さでない場合、失敗する。それ以外の場合、結果の列を 10 進整数として解釈する。month をその数とする。
month が範囲 1 ≤ month ≤ 12 内の数でない場合、失敗する。
maxday を、任意の閏年（例えば 4 または 2000）の月 month における日数とする。
position が input の末尾を越えている場合、または position にある文字が U+002D HYPHEN-MINUS 文字でない場合、失敗する。それ以外の場合、position を 1 文字先へ進める。
position を与えて、input から ASCII 数字である符号位置の列を収集する。収集された列が正確に 2 文字の長さでない場合、失敗する。それ以外の場合、結果の列を 10 進整数として解釈する。day をその数とする。
day が範囲 1 ≤ day ≤ maxday 内の数でない場合、失敗する。
month および day を返す。

2.3.5.4 時刻

時刻は、タイムゾーン情報を持たず、時、分、秒、および秒の小数部からなる特定の時刻である。

文字列は、時 hour、分 minute、および秒 second を表し、次の構成要素を指定された順序で含む場合、妥当な時刻文字列である：

hour を表す 2 個の ASCII 数字。範囲は 0 ≤ hour ≤ 23
U+003A COLON 文字（:）
minute を表す 2 個の ASCII 数字。範囲は 0 ≤ minute ≤ 59
second がゼロでない場合、または second がゼロの場合でも任意で：
1. U+003A COLON 文字（:）
2. second の整数部を表す 2 個の ASCII 数字。範囲は 0 ≤ s ≤ 59
3. second が整数でない場合、または second が整数の場合でも任意で：
  1. U+002E FULL STOP 文字（.）
  2. second の小数部を表す 1 個、2 個、または 3 個の ASCII 数字

second 構成要素を 60 または 61 にすることはできない。閏秒は表現できない。

時刻文字列を構文解析する規則は次のとおりである。これは時刻、または何も返さない。アルゴリズムのいずれかの時点で「失敗する」とされている場合、その時点で中止し、何も返さないことを意味する。

input を構文解析対象の文字列とする。
position を input 内へのポインターとし、最初は文字列の先頭を指すものとする。
時刻構成要素を構文解析して hour、minute、および second を得る。これが何も返さない場合、失敗する。
position が input の末尾を越えていない場合、失敗する。
time を、時が hour、分が minute、秒が second である時刻とする。
time を返す。

input 文字列および position が与えられた場合の、時刻構成要素を構文解析する規則は次のとおりである。これは時、分、および秒、または何も返さない。アルゴリズムのいずれかの時点で「失敗する」とされている場合、その時点で中止し、何も返さないことを意味する。

position を与えて、input から ASCII 数字である符号位置の列を収集する。収集された列が正確に 2 文字の長さでない場合、失敗する。それ以外の場合、結果の列を 10 進整数として解釈する。hour をその数とする。
hour が範囲 0 ≤ hour ≤ 23 内の数でない場合、失敗する。
position が input の末尾を越えている場合、または position にある文字が U+003A COLON 文字でない場合、失敗する。それ以外の場合、position を 1 文字先へ進める。
position を与えて、input から ASCII 数字である符号位置の列を収集する。収集された列が正確に 2 文字の長さでない場合、失敗する。それ以外の場合、結果の列を 10 進整数として解釈する。minute をその数とする。
minute が範囲 0 ≤ minute ≤ 59 内の数でない場合、失敗する。
second を 0 とする。
position が input の末尾を越えておらず、 position にある文字が U+003A（:）である場合：
1. position を input 内の次の文字へ進める。
2. position が input の末尾を越えている場合、 input の最後の文字にある場合、または position から始まる input 内の次の2 文字がともに ASCII 数字でない場合、失敗する。
3. position を与えて、input から ASCII 数字または U+002E FULL STOP 文字のいずれかである符号位置の列を収集する。収集された列が 3 文字の長さである場合、3 文字より長く第 3 文字が U+002E FULL STOP 文字でない場合、または U+002E FULL STOP 文字を複数含む場合、失敗する。それ以外の場合、結果の列を 10 進数（小数部を含む可能性がある）として解釈する。second をその数に設定する。
4. second が範囲 0 ≤ second < 60 内の数でない場合、失敗する。
hour、minute、および second を返す。

2.3.5.5 ローカル日付と時刻

ローカル日付と時刻は、年、月、および日からなる特定の先発グレゴリオ暦の日付と、時、分、秒、および秒の小数部からなる時刻で構成されるが、タイムゾーンなしで表現される。[GREGORIAN]

文字列は、日付と時刻を表し、次の構成要素を指定された順序で含む場合、妥当なローカル日付と時刻の文字列である：

日付を表す妥当な日付文字列
U+0054 LATIN CAPITAL LETTER T 文字（T）または U+0020 SPACE 文字
時刻を表す妥当な時刻文字列

文字列は、日付と時刻を表し、次の構成要素を指定された順序で含む場合、妥当な正規化済みローカル日付と時刻の文字列である：

日付を表す妥当な日付文字列
U+0054 LATIN CAPITAL LETTER T 文字（T）
指定された時刻に対して可能な限り短い文字列で表現された、時刻を表す妥当な時刻文字列（例えば、指定された時刻が分ちょうどの 0 秒である場合、秒構成要素全体を省略する）

ローカル日付と時刻の文字列を構文解析する規則は次のとおりである。これは日付と時刻、または何も返さない。アルゴリズムのいずれかの時点で「失敗する」とされている場合、その時点で中止し、何も返さないことを意味する。

input を構文解析対象の文字列とする。
position を input 内へのポインターとし、最初は文字列の先頭を指すものとする。
日付構成要素を構文解析して year、month、および day を得る。これが何も返さない場合、失敗する。
position が input の末尾を越えている場合、または position にある文字が U+0054 LATIN CAPITAL LETTER T 文字（T）でも U+0020 SPACE 文字でもない場合、失敗する。それ以外の場合、 position を 1 文字先へ進める。
時刻構成要素を構文解析して hour、minute、および second を得る。これが何も返さない場合、失敗する。
position が input の末尾を越えていない場合、失敗する。
date を、年が year、月が month、日が day である日付とする。
time を、時が hour、分が minute、秒が second である時刻とする。
date および time を返す。

2.3.5.6 タイムゾーン

タイムゾーンオフセットは、符号付きの時数および分数からなる。

文字列は、タイムゾーンオフセットを表し、次のいずれかからなる場合、妥当なタイムゾーンオフセット文字列である：

U+005A LATIN CAPITAL LETTER Z 文字（Z）。タイムゾーンが UTC である場合にのみ許可される
または、次の構成要素を指定された順序で：
1. U+002B PLUS SIGN 文字（+）、またはタイムゾーンオフセットがゼロでない場合は U+002D HYPHEN-MINUS 文字（-）のいずれか。タイムゾーンオフセットの符号を表す
2. タイムゾーンオフセットの時構成要素 hour を表す 2 個の ASCII 数字。範囲は 0 ≤ hour ≤ 23
3. 任意で、U+003A COLON 文字（:）
4. タイムゾーンオフセットの分構成要素 minute を表す 2 個の ASCII 数字。範囲は 0 ≤ minute ≤ 59

この形式では、-23:59 から +23:59 までのタイムゾーンオフセットが許可される。現在、実際のタイムゾーンのオフセット範囲は実務上 -12:00 から +14:00 までであり、実際のタイムゾーンのオフセットの分構成要素は常に 00、30、または 45 のいずれかである。ただし、タイムゾーンは政治的な争点として利用され、そのため非常に気まぐれな政策決定の対象となるので、この状態が永遠に続く保証はない。

正式なタイムゾーンが形成される以前の歴史的な時刻でタイムゾーンオフセットを使用する方法の詳細については、以下のグローバル日付と時刻の節にある使用上の注記および例も参照のこと。

タイムゾーンオフセット文字列を構文解析する規則は次のとおりである。これはタイムゾーンオフセット、または何も返さない。アルゴリズムのいずれかの時点で「失敗する」とされている場合、その時点で中止し、何も返さないことを意味する。

input を構文解析対象の文字列とする。
position を input 内へのポインターとし、最初は文字列の先頭を指すものとする。
タイムゾーンオフセット構成要素を構文解析して timezone_hours および timezone_minutes を得る。これが何も返さない場合、失敗する。
position が input の末尾を越えていない場合、失敗する。
UTC から timezone_hours 時間および timezone_minutes 分のタイムゾーンオフセットを返す。

input 文字列および position が与えられた場合の、タイムゾーンオフセット構成要素を構文解析する規則は次のとおりである。これはタイムゾーンの時数およびタイムゾーンの分数、または何も返さない。アルゴリズムのいずれかの時点で「失敗する」とされている場合、その時点で中止し、何も返さないことを意味する。

position にある文字が U+005A LATIN CAPITAL LETTER Z 文字（Z）である場合：
1. timezone_hours を 0 とする。
2. timezone_minutes を 0 とする。
3. position を input 内の次の文字へ進める。
それ以外で、position にある文字が U+002B PLUS SIGN（+）または U+002D HYPHEN-MINUS（-）のいずれかである場合：
1. position にある文字が U+002B PLUS SIGN（+）である場合、 sign を「positive」とする。それ以外の場合は U+002D HYPHEN-MINUS（-）であり、 sign を「negative」とする。
2. position を input 内の次の文字へ進める。
3. position を与えて、input から ASCII 数字である符号位置の列を収集する。 s を収集された列とする。
4. s が正確に 2 文字の長さである場合：
  1. s を 10 進整数として解釈する。 timezone_hours をその数とする。
  2. position が input の末尾を越えている場合、または position にある文字が U+003A COLON 文字でない場合、失敗する。それ以外の場合、position を 1 文字先へ進める。
  3. position を与えて、input から ASCII 数字である符号位置の列を収集する。収集された列が正確に 2 文字の長さでない場合、失敗する。それ以外の場合、結果の列を 10 進整数として解釈する。 timezone_minutes をその数とする。
  s が正確に 4 文字の長さである場合：
  1. s の最初の 2 文字を 10 進整数として解釈する。 timezone_hours をその数とする。
  2. s の最後の 2 文字を 10 進整数として解釈する。 timezone_minutes をその数とする。
  それ以外の場合、失敗する。
5. timezone_hours が範囲 0 ≤ timezone_hours ≤ 23 内の数でない場合、失敗する。
6. sign が「negative」である場合、timezone_hours を負にする。
7. timezone_minutes が範囲 0 ≤ timezone_minutes ≤ 59 内の数でない場合、失敗する。
8. sign が「negative」である場合、timezone_minutes を負にする。
それ以外の場合、失敗する。
timezone_hours および timezone_minutes を返す。

2.3.5.7 グローバル日付と時刻

グローバル日付と時刻は、年、月、および日からなる特定の先発グレゴリオ暦の日付と、時、分、秒、および秒の小数部からなり、符号付きの時数および分数からなるタイムゾーンオフセットを伴って表現される時刻からなる。 [GREGORIAN]

文字列は、日付、時刻、およびタイムゾーンオフセットを表し、次の構成要素を指定された順序で含む場合、妥当なグローバル日付と時刻の文字列である：

日付を表す妥当な日付文字列
U+0054 LATIN CAPITAL LETTER T 文字（T）または U+0020 SPACE 文字
時刻を表す妥当な時刻文字列
タイムゾーンオフセットを表す妥当なタイムゾーンオフセット文字列

20 世紀半ばに UTC が成立する以前の日付における時刻は、UTC （SI 秒単位で刻む UT1 の近似）ではなく、UT1（経度 0° における当時の地球太陽時）を基準として表現および解釈しなければならない。タイムゾーンが形成される以前の時刻は、適切な現地時刻とロンドンのグリニッジで観測された時刻との当時の差を近似する明示的なタイムゾーンを伴う UT1 時刻として表現および解釈しなければならない。

次に、妥当なグローバル日付と時刻の文字列として記述された日付の例をいくつか示す。

"0037-12-13 00:00Z": ローマ皇帝ネロの誕生日に、ロンドン時刻を使用する地域での午前 0 時。これが実際にどの日付に対応するかについての詳細な説明は以下を参照のこと。
"1979-10-14T12:00:00.001-04:00": 1979 年 10 月 14 日の正午から 1 ミリ秒後。夏時間中に米国東海岸で使用されていたタイムゾーンでの時刻。
"8592-01-01T02:09+02:09": 8592 年 1 月 1 日の UTC 午前 0 時。その時刻に関連付けられたタイムゾーンは UTC より 2 時間 9 分進んでおり、現在実在するタイムゾーンではないが、それでも許可される。

これらの日付については、いくつか注目すべき点がある：

4 桁未満の年は、先頭をゼロで埋めなければならない。日付「37-12-13」は妥当な日付ではない。
「T」を空白に置き換える場合、それは単一の空白文字でなければならない。文字列「2001-12-21 12:00Z」（構成要素間に 2 個の空白がある）は正常に構文解析されない。
グレゴリオ暦が導入される以前の時点を明確に識別するには（UTC が成立する以前の時点を明確に識別できる範囲で）、その日付を、当時使用されていた暦（例えばユリウス暦）から最初にグレゴリオ暦へ変換しなければならない。ネロの誕生日はユリウス暦では 37 年 12 月 15 日であり、先発グレゴリオ暦では 37 年 12 月 13 日である。
時刻およびタイムゾーンオフセット構成要素は省略できない。
西暦 1 年より前の日付は、このバージョンの HTML では日時として表現できない。
古代における特定の出来事の時刻は、比較的近年まで時刻の調整や測定が十分に行われていなかったため、よくても近似にすぎない。
タイムゾーンオフセットは、夏時間に応じて異なる。

グローバル日付と時刻の文字列を構文解析する規則は次のとおりである。これは UTC の時刻と、往復変換または表示のために関連付けられたタイムゾーンオフセット情報、または何も返さない。アルゴリズムのいずれかの時点で「失敗する」とされている場合、その時点で中止し、何も返さないことを意味する。

input を構文解析対象の文字列とする。
position を input 内へのポインターとし、最初は文字列の先頭を指すものとする。
日付構成要素を構文解析して year、month、および day を得る。これが何も返さない場合、失敗する。
position が input の末尾を越えている場合、または position にある文字が U+0054 LATIN CAPITAL LETTER T 文字（T）でも U+0020 SPACE 文字でもない場合、失敗する。それ以外の場合、 position を 1 文字先へ進める。
時刻構成要素を構文解析して hour、minute、および second を得る。これが何も返さない場合、失敗する。
position が input の末尾を越えている場合、失敗する。
タイムゾーンオフセット構成要素を構文解析して timezone_hours および timezone_minutes を得る。これが何も返さない場合、失敗する。
position が input の末尾を越えていない場合、失敗する。
time を、年 year、月 month、日 day、時 hour、分 minute、秒 second から timezone_hours 時間および timezone_minutes 分を減算した時点とする。その時点は UTC タイムゾーン内の時点である。
timezone を、UTC から timezone_hours 時間および timezone_minutes 分とする。
time および timezone を返す。

2.3.5.8 週

週は、月曜日に始まる 7 日間を表す週年番号および週番号からなる。この暦法における各週年は、以下で定義するように、そのような 7 日間を 52 個または 53 個持つ。グレゴリオ暦の日付 1969 年 12 月 29 日月曜日（1969-12-29）に始まる 7 日間を、週年 1970 の第 1 週と定義する。連続する週には順番に番号が付けられる。ある週年の第 1 週の前の週は、直前の週年の最終週であり、その逆も同様である。 [GREGORIAN]

番号 year を持つ週年は、先発グレゴリオ暦における年 year の最初の日（1 月 1 日）が木曜日である場合、または先発グレゴリオ暦における年 year の最初の日（1 月 1 日）が水曜日であり、かつ year が 400 で割り切れる数、または 4 で割り切れるが 100 では割り切れない数である場合、53 週を持つ。それ以外のすべての週年は 52 週を持つ。

53 週を持つ週年の最終日の週番号は 53 であり、 52 週を持つ週年の最終日の週番号は 52 である。

特定の日の週年番号は、その日を含む先発グレゴリオ暦の年の番号とは異なる場合がある。週年 y の最初の週は、グレゴリオ暦の年 y の最初の木曜日を含む週である。

現代の目的では、ここで定義される週は、ISO 8601 で定義される ISO 週と同等である。 [ISO8601]

文字列は、週年 year および週 week を表し、次の構成要素を指定された順序で含む場合、妥当な週文字列である：

year を表す 4 個以上の ASCII 数字。ここで year > 0
U+002D HYPHEN-MINUS 文字（-）
U+0057 LATIN CAPITAL LETTER W 文字（W）
週 week を表す 2 個の ASCII 数字。範囲は 1 ≤ week ≤ maxweek であり、 maxweek は週年 year の最終日の週番号である

週文字列を構文解析する規則は次のとおりである。これは週年番号および週番号、または何も返さない。アルゴリズムのいずれかの時点で「失敗する」とされている場合、その時点で中止し、何も返さないことを意味する。

input を構文解析対象の文字列とする。
position を input 内へのポインターとし、最初は文字列の先頭を指すものとする。
position を与えて、input から ASCII 数字である符号位置の列を収集する。収集された列が少なくとも 4 文字の長さでない場合、失敗する。それ以外の場合、結果の列を 10 進整数として解釈する。year をその数とする。
year がゼロより大きい数でない場合、失敗する。
position が input の末尾を越えている場合、または position にある文字が U+002D HYPHEN-MINUS 文字でない場合、失敗する。それ以外の場合、position を 1 文字先へ進める。
position が input の末尾を越えている場合、または position にある文字が U+0057 LATIN CAPITAL LETTER W 文字（W）でない場合、失敗する。それ以外の場合、position を 1 文字先へ進める。
position を与えて、input から ASCII 数字である符号位置の列を収集する。収集された列が正確に 2 文字の長さでない場合、失敗する。それ以外の場合、結果の列を 10 進整数として解釈する。week をその数とする。
maxweek を、年 year の最終日の週番号とする。
week が範囲 1 ≤ week ≤ maxweek 内の数でない場合、失敗する。
position が input の末尾を越えていない場合、失敗する。
週年番号 year および週番号 week を返す。

2.3.5.9 期間

期間は、秒数からなる。

月と秒は比較できないため（月は正確な秒数ではなく、測定を開始する具体的な日に応じて正確な長さが変わる期間である）、この仕様で定義される期間には月（または 12 か月に相当する年）を含めることはできない。具体的な秒数を表す期間だけを記述できる。

文字列は、期間 t を表し、次のいずれかからなる場合、妥当な期間文字列である：

リテラル U+0050 LATIN CAPITAL LETTER P 文字の後に、次の下位構成要素を指定された順序で 1 個以上続けたもの。日、時、分、および秒の数は、 t と同じ秒数に対応する：
1. 日数を表す、1 個以上の ASCII 数字の後に U+0044 LATIN CAPITAL LETTER D 文字を続けたもの。
2. U+0054 LATIN CAPITAL LETTER T 文字の後に、次の下位構成要素を指定された順序で 1 個以上続けたもの：
  1. 時数を表す、1 個以上の ASCII 数字の後に U+0048 LATIN CAPITAL LETTER H 文字を続けたもの。
  2. 分数を表す、1 個以上の ASCII 数字の後に U+004D LATIN CAPITAL LETTER M 文字を続けたもの。
  3. 次の構成要素：
    1. 秒数を表す 1 個以上の ASCII 数字。
    2. 任意で、U+002E FULL STOP 文字（.）の後に、秒の小数部を表す 1 個、2 個、または 3 個の ASCII 数字を続けたもの。
    3. U+0053 LATIN CAPITAL LETTER S 文字。
これは、この仕様で定義される他の多くの日付および時刻関連のマイクロ構文と同様に、ISO 8601 で定義される形式の 1 つに基づいている。 [ISO8601]
それぞれ異なる期間時刻構成要素の尺度を持つ 1 個以上の期間時刻構成要素を任意の順序で並べたもの。表される秒数の合計は t の秒数と等しくなる。

期間時刻構成要素は、次の構成要素からなる文字列である：
1. 0 個以上の ASCII 空白。
2. 時間単位の数を表す 1 個以上の ASCII 数字。指定された期間時刻構成要素の尺度（以下を参照）によって倍率を掛け、秒数を表す。
3. 指定された期間時刻構成要素の尺度が 1（すなわち単位が秒）である場合、任意で U+002E FULL STOP 文字（.）の後に、秒の小数部を表す 1 個、2 個、または 3 個の ASCII 数字を続ける。
4. 0 個以上の ASCII 空白。
5. 期間時刻構成要素の数値部分で使用される時間単位の期間時刻構成要素の尺度を表す、次の文字のいずれか：
  
  U+0057 LATIN CAPITAL LETTER W 文字
  
  U+0077 LATIN SMALL LETTER W 文字
  
  週。尺度は 604800。
  
  U+0044 LATIN CAPITAL LETTER D 文字
  
  U+0064 LATIN SMALL LETTER D 文字
  
  日。尺度は 86400。
  
  U+0048 LATIN CAPITAL LETTER H 文字
  
  U+0068 LATIN SMALL LETTER H 文字
  
  時。尺度は 3600。
  
  U+004D LATIN CAPITAL LETTER M 文字
  
  U+006D LATIN SMALL LETTER M 文字
  
  分。尺度は 60。
  
  U+0053 LATIN CAPITAL LETTER S 文字
  
  U+0073 LATIN SMALL LETTER S 文字
  
  秒。尺度は 1。
6. 0 個以上の ASCII 空白。
これは ISO 8601 のいずれの形式にも基づいていない。 ISO 8601 の期間形式に代わる、より人間が読みやすい形式として意図されている。

期間文字列を構文解析する規則は次のとおりである。これは期間または何も返さない。アルゴリズムのいずれかの時点で「失敗する」とされている場合、その時点で中止し、何も返さないことを意味する。

input を構文解析対象の文字列とする。
position を input 内へのポインターとし、最初は文字列の先頭を指すものとする。
months、seconds、および component count をすべてゼロとする。
M-disambiguator を minutes とする。

このフラグのもう 1 つの値は months である。これは、月と分に同じ単位を使用する ISO8601 の期間における「M」単位を区別するために使用される。月は許可されないが、将来の互換性のため、および他のコンテキストでは妥当となる ISO8601 の期間を誤って解釈することを避けるために構文解析される。
position を与えて、input 内の ASCII 空白をスキップする。
position が input の末尾を越えている場合、失敗する。
position が指す input 内の文字が U+0050 LATIN CAPITAL LETTER P 文字である場合、position を次の文字へ進め、 M-disambiguator を months に設定し、position を与えて input 内の ASCII 空白をスキップする。
永久に繰り返す：
1. units を未定義とする。これには次の値のいずれかが代入される： years、months、weeks、days、hours、minutes、および seconds。
2. next character を未定義とする。これは input から文字を処理するために使用される。
3. position が input の末尾を越えている場合、中断する。
4. position が指す input 内の文字が U+0054 LATIN CAPITAL LETTER T 文字である場合、position を次の文字へ進め、 M-disambiguator を minutes に設定し、position を与えて input 内の ASCII 空白をスキップし、続行する。
5. next character を、position が指す input 内の文字に設定する。
6. next character が U+002E FULL STOP 文字（.）である場合、 N を 0 とする。（position は進めない。これは以下で処理される。）
  
  それ以外で、next character が ASCII 数字である場合、 position を与えて、input から ASCII 数字である符号位置の列を収集し、結果の列を 10 進整数として解釈し、N をその数とする。
  
  それ以外の場合、next character は数の一部ではないので、失敗する。
7. position が input の末尾を越えている場合、失敗する。
8. next character を、position が指す input 内の文字に設定し、今回は position を次の文字へ進める。（next character が以前 U+002E FULL STOP 文字（.）であった場合、今回もその文字のままである。）
9. next character が U+002E（.）である場合：
  1. position を与えて、input から ASCII 数字である符号位置の列を収集する。 s を結果の列とする。
  2. s が空文字列である場合、失敗する。
  3. length を s 内の文字数とする。
  4. fraction を、s を 10 進整数として解釈し、その数を 10^length で除算した結果とする。
  5. N を fraction だけ増加させる。
  6. position を与えて、input 内の ASCII 空白をスキップする。
  7. position が input の末尾を越えている場合、失敗する。
  8. next character を、position が指す input 内の文字に設定し、position を次の文字へ進める。
  9. next character が U+0053 LATIN CAPITAL LETTER S 文字でも U+0073 LATIN SMALL LETTER S 文字でもない場合、失敗する。
  10. units を seconds に設定する。
  それ以外の場合：
  1. next character が ASCII 空白である場合、position を与えて input 内の ASCII 空白をスキップし、next character を position が指す input 内の文字に設定し、position を次の文字へ進める。
  2. next character が U+0059 LATIN CAPITAL LETTER Y 文字、または U+0079 LATIN SMALL LETTER Y 文字である場合、units を years に設定し、 M-disambiguator を months に設定する。
    
    next character が U+004D LATIN CAPITAL LETTER M 文字または U+006D LATIN SMALL LETTER M 文字であり、M-disambiguator が months である場合、units を months に設定する。
    
    next character が U+0057 LATIN CAPITAL LETTER W 文字または U+0077 LATIN SMALL LETTER W 文字である場合、units を weeks に設定し、 M-disambiguator を minutes に設定する。
    
    next character が U+0044 LATIN CAPITAL LETTER D 文字または U+0064 LATIN SMALL LETTER D 文字である場合、units を days に設定し、 M-disambiguator を minutes に設定する。
    
    next character が U+0048 LATIN CAPITAL LETTER H 文字または U+0068 LATIN SMALL LETTER H 文字である場合、units を hours に設定し、 M-disambiguator を minutes に設定する。
    
    next character が U+004D LATIN CAPITAL LETTER M 文字または U+006D LATIN SMALL LETTER M 文字であり、M-disambiguator が minutes である場合、units を minutes に設定する。
    
    next character が U+0053 LATIN CAPITAL LETTER S 文字または U+0073 LATIN SMALL LETTER S 文字である場合、units を seconds に設定し、 M-disambiguator を minutes に設定する。
    
    それ以外で、next character が上記のいずれの文字でもない場合、失敗する。
10. component count を 1 増加させる。
11. multiplier を 1 とする。
12. units が years である場合、multiplier に 12 を乗算し、units を months に設定する。
13. units が months である場合、N と multiplier の積を months に加算する。
  
  それ以外の場合：
  1. units が weeks である場合、multiplier に 7 を乗算し、units を days に設定する。
  2. units が days である場合、multiplier に 24 を乗算し、units を hours に設定する。
  3. units が hours である場合、multiplier に 60 を乗算し、units を minutes に設定する。
  4. units が minutes である場合、multiplier に 60 を乗算し、 units を seconds に設定する。
  5. この時点で、units は必ず seconds である。 N と multiplier の積を seconds に加算する。
14. position を与えて、input 内の ASCII 空白をスキップする。
component count がゼロである場合、失敗する。
months がゼロでない場合、失敗する。
seconds 秒からなる期間を返す。

2.3.5.10 より曖昧な時点

文字列は、次のいずれかでもある場合、任意の時刻を伴う妥当な日付文字列である：

妥当な日付文字列
妥当なグローバル日付と時刻の文字列

日付または時刻の文字列を構文解析する規則は次のとおりである。このアルゴリズムは、日付、時刻、グローバル日付と時刻、または何も返さない。アルゴリズムのいずれかの時点で「失敗する」とされている場合、その時点で中止し、何も返さないことを意味する。

input を構文解析対象の文字列とする。
position を input 内へのポインターとし、最初は文字列の先頭を指すものとする。
start position を position と同じ位置に設定する。
date present フラグおよび time present フラグを true に設定する。
日付構成要素を構文解析して year、month、および day を得る。これが失敗した場合、date present フラグを false に設定する。
date present が true で、position が input の末尾を越えておらず、position にある文字が U+0054 LATIN CAPITAL LETTER T 文字（T）または U+0020 SPACE 文字のいずれかである場合、 position を input 内の次の文字へ進める。

それ以外で、date present が true であり、 position が input の末尾を越えているか、または position にある文字が U+0054 LATIN CAPITAL LETTER T 文字（T）でも U+0020 SPACE 文字でもない場合、time present を false に設定する。

それ以外で、date present が false である場合、 position を start position と同じ位置に戻す。
time present フラグが true である場合、時刻構成要素を構文解析して hour、minute、および second を得る。これが何も返さない場合、失敗する。
date present フラグおよび time present フラグがともに true であるにもかかわらず、position が input の末尾を越えている場合、失敗する。
date present フラグおよび time present フラグがともに true である場合、タイムゾーンオフセット構成要素を構文解析して timezone_hours および timezone_minutes を得る。これが何も返さない場合、失敗する。
position が input の末尾を越えていない場合、失敗する。
date present フラグが true で、time present フラグが false である場合、date を、年が year、月が month、日が day である日付とし、date を返す。

それ以外で、time present フラグが true で、date present フラグが false である場合、time を、時が hour、分が minute、秒が second である時刻とし、 time を返す。

それ以外の場合、time を、年 year、月 month、日 day、時 hour、分 minute、秒 second から、 timezone_hours 時間および timezone_minutes 分を減算した時点とする。その時点は UTC タイムゾーン内の時点である。timezone を、 UTC から timezone_hours 時間および timezone_minutes 分とし、time および timezone を返す。

2.3.6 レガシーカラー

一部の廃止されたレガシー属性は、文字列 input が与えられた場合、レガシーカラー値を構文解析する規則を使用して色を構文解析する。これは CSS カラーまたは失敗を返す。

input が空文字列である場合、失敗を返す。
input から先頭および末尾の ASCII 空白を除去する。
input が「transparent」と ASCII 大文字小文字不区別で一致する場合、失敗を返す。
input が、名前付きカラーのいずれかと ASCII 大文字小文字不区別で一致する場合、そのキーワードに対応する CSS カラーを返す。 [CSSCOLOR]

CSS2 System Colors は認識されない。
input の符号位置長が 4 であり、input の最初の文字が U+0023（#）であり、 input の最後の 3 文字がすべて ASCII 16 進数字である場合：
1. result を CSS カラーとする。
2. input の 2 番目の文字を 16 進数字として解釈し、 result の赤成分を、結果の数に 17 を乗算した値とする。
3. input の 3 番目の文字を 16 進数字として解釈し、 result の緑成分を、結果の数に 17 を乗算した値とする。
4. input の 4 番目の文字を 16 進数字として解釈し、 result の青成分を、結果の数に 17 を乗算した値とする。
5. result を返す。
input 内の U+FFFF より大きい符号位置（すなわち基本多言語面に含まれないすべての文字）を「00」に置換する。
input の符号位置長が 128 より大きい場合、input を切り詰め、最初の 128 文字だけを残す。
input の最初の文字が U+0023（#）である場合、それを削除する。
input 内の ASCII 16 進数字でないすべての文字を U+0030（0）に置換する。
input の符号位置長がゼロであるか 3 の倍数でない間、input に U+0030（0）を付加する。
input を等しい符号位置長を持つ 3 個の文字列に分割し、3 個の成分を得る。length を、それらすべての成分が持つ符号位置長（input の符号位置長の 3 分の 1）とする。
length が 8 より大きい場合、各成分から先頭の length-8 文字を削除し、length を 8 とする。
length が 2 より大きく、かつ各成分の最初の文字が U+0030（0）である間、その文字を削除し、length を 1 減少させる。
length が依然として 2 より大きい場合、各成分を切り詰め、各成分の最初の 2 文字だけを残す。
result を CSS カラーとする。
最初の成分を 16 進数として解釈し、result の赤成分を結果の数とする。
2 番目の成分を 16 進数として解釈し、result の緑成分を結果の数とする。
3 番目の成分を 16 進数として解釈し、result の青成分を結果の数とする。
result を返す。

2.3.7 空白区切りトークン

空白区切りトークンの集合は、 1 個以上の ASCII 空白で区切られた 0 個以上の単語（トークンと呼ばれる）を含む文字列である。各単語は、いずれも ASCII 空白ではない 1 個以上の文字からなる任意の文字列である。

空白区切りトークンの集合を含む文字列は、先頭または末尾に ASCII 空白を持つことができる。

一意な空白区切りトークンの順序なし集合は、トークンが重複しない空白区切りトークンの集合である。

一意な空白区切りトークンの順序付き集合は、トークンが重複せず、かつトークンの順序に意味がある空白区切りトークンの集合である。

空白区切りトークンの集合には、許可される値の集合が定義されることがある。許可される値の集合が定義されている場合、すべてのトークンはその許可値の一覧に含まれていなければならず、その他の値は不適合である。そのような許可値の集合が提供されていない場合、すべての値が適合する。

空白区切りトークンの集合内のトークンをどのように比較するか（例えば大文字小文字を区別するかどうか）は、集合ごとに定義される。

2.3.8 コンマ区切りトークン

コンマ区切りトークンの集合は、それぞれが単一の U+002C COMMA 文字（,）によって次のトークンから区切られた 0 個以上のトークンを含む文字列である。各トークンは、先頭および末尾が ASCII 空白ではなく、 U+002C COMMA 文字（,）を含まない 0 個以上の文字からなる任意の文字列であり、任意で周囲を ASCII 空白で囲むことができる。

例えば、文字列「 a ,b,,d d 」は 4 個のトークン、「a」、「b」、空文字列、および「d d」からなる。各トークンの周囲にある先頭および末尾の空白はトークンの一部として数えられず、空文字列もトークンになり得る。

コンマ区切りトークンの集合には、妥当なトークンを構成するものについて追加の制限が設けられることがある。そのような制限が定義されている場合、すべてのトークンはそれらの制限に従わなければならず、その他の値は不適合である。そのような制限が指定されていない場合、すべての値が適合する。

2.3.9 参照

型 type の要素に対する妥当なハッシュ名参照は、 U+0023 NUMBER SIGN 文字（#）の後に、同じツリー内にある型 type の要素の name 属性値と正確に一致する文字列を続けた文字列である。

コンテキストノード scope が与えられた場合の、型 type の要素に対するハッシュ名参照を構文解析する規則は次のとおりである：

構文解析対象の文字列が U+0023 NUMBER SIGN 文字を含まない場合、または文字列内で最初に現れるその文字が文字列の最後の文字である場合、null を返す。
s を、構文解析対象の文字列内で最初に現れる U+0023 NUMBER SIGN 文字の直後から、その文字列の末尾までの文字列とする。
scope のツリー内で、ツリー順における最初の型 type の要素で、値が s である id または name 属性を持つものを返す。そのような要素がない場合は null を返す。

id 属性は構文解析時には考慮されるが、値が 妥当なハッシュ名参照であるかどうかの判定には使用されない。すなわち、id に基づいて要素を参照するハッシュ名参照は適合性エラーである（その要素が同じ値を持つ name 属性も持つ場合を除く）。

2.3.10 メディアクエリー

文字列は、Media Queries の <media-query-list> 生成規則に一致する場合、妥当なメディアクエリーリストである。 [MQ]

文字列は、空文字列、ASCII 空白のみからなる文字列、または Media Queries で与えられた定義に従ってユーザーの環境に一致するメディアクエリーリストである場合、ユーザーの環境に一致する。[MQ]

2.3.11 一意な内部値

一意な内部値は、シリアライズ可能で、値によって比較可能であり、スクリプトに公開されることのない値である。

新しい一意な内部値を作成するには、このアルゴリズムによって以前に返されたことのない一意な内部値を返す。

2.4 URL

2.4.1 用語

文字列は、妥当な URL 文字列であり、かつ空文字列でない場合、妥当な空でない URLである。

文字列は、そこから先頭および末尾の ASCII 空白を除去した後に、妥当な URL 文字列である場合、空白で囲まれている可能性のある妥当な URLである。

文字列は、そこから先頭および末尾の ASCII 空白を除去した後に、妥当な空でない URLである場合、空白で囲まれている可能性のある妥当な空でない URLである。

この仕様は、URL about:legacy-compat を、解決不能ではあるが予約された about: URL として定義する。これは、XML ツールとの互換性のために必要な場合、HTML 文書内の DOCTYPEで使用される。 [ABOUT]

この仕様は、URL about:html-kind を、解決不能ではあるが予約された about: URL として定義する。これは、メディアトラックの種類の識別子として使用される。[ABOUT]

この仕様は、URL about:srcdoc を、解決不能ではあるが予約された about: URL として定義する。これは、iframe srcdoc 文書の URLとして使用される。 [ABOUT]

URLは、そのスキームが「about」であり、そのパスが単一の文字列「blank」を含み、そのユーザー名およびパスワードが空文字列であり、そのホストが null である場合、 about:blank に一致する。

そのような URL のクエリーおよびフラグメントは null でなくてもよい。例えば、「about:blank?foo#bar」を構文解析して作成された URL レコードは、about:blank に一致する。

URLは、そのスキームが「about」であり、そのパスが単一の文字列「srcdoc」を含み、そのクエリーが null であり、そのユーザー名およびパスワードが空文字列であり、そのホストが null である場合、 about:srcdoc に一致する。

about:srcdoc に一致することによって URLのクエリーが null であることを保証する理由は、URL に null でないクエリーを持つ iframe srcdoc 文書を作成することは、 URL が about:blank に一致する Documentとは異なり、不可能だからである。言い換えると、about:srcdoc に一致するすべての URLの集合は、フラグメントだけが異なる。

2.4.2 URL の構文解析

URL の構文解析とは、文字列を受け取り、それが表す URL レコードを得る処理である。この処理は URL で定義されるが、HTML 標準では基底 URL およびエンコーディングを抽象化する複数のラッパーを定義する。[URL]

新しい API の大部分は、URL を構文解析するを使用する。古い API および HTML 要素には、URL をエンコーディング付きで構文解析するを使用する理由がある場合がある。独自の基底 URL が必要な場合、または基底 URL を使用しない場合は、もちろん URL パーサーを直接使用することもできる。

文字列 url と、それに対する Document オブジェクトまたは環境設定オブジェクト environment が与えられた場合、 URL を構文解析するには、次の手順を実行する。これらは失敗または URLを返す。

environment が Document オブジェクトである場合、 baseURL を environment の基底 URLとし、それ以外の場合は environment の API 基底 URLとする。
baseURL を用いて、url に URL パーサーを適用した結果を返す。

文字列 url と、それに対する Document オブジェクトまたは環境設定オブジェクト environment が与えられた場合、 URL をエンコーディング付きで構文解析するには、次の手順を実行する。これらは失敗または URLを返す。

encoding を UTF-8とする。
environment が Document オブジェクトである場合、 encoding を environment の文字エンコーディングに設定する。
それ以外で、environment の関連するグローバルオブジェクトが Window オブジェクトである場合、 encoding を、environment の関連するグローバルオブジェクトの関連付けられた Documentの文字エンコーディングに設定する。
environment が Document オブジェクトである場合、 baseURL を environment の基底 URLとし、それ以外の場合は environment の API 基底 URLとする。
baseURL および encoding を用いて、 url に URL パーサーを適用した結果を返す。

文字列 url と、それに対する Document オブジェクトまたは環境設定オブジェクト environment が与えられた場合、 URL をエンコーディング付きで構文解析してシリアライズするには、次の手順を実行する。これらは失敗または文字列を返す。

url を、environment に対して url をエンコーディング付きで構文解析した結果とする。
url が失敗である場合、失敗を返す。
url に URL シリアライザーを適用した結果を返す。

2.4.3 文書基底 URL

Document document の文書基底 URLは、次の手順を実行して得られる URL レコードである：

document に、href 属性を持つ base 要素である子孫がない場合、 document のフォールバック基底 URLを返す。
それ以外の場合、document 内でツリー順における最初の、 href 属性を持つ base 要素の凍結基底 URLを返す。

Document オブジェクト document のフォールバック基底 URLは、次の手順を実行して得られる URL レコードである：

document が iframe srcdoc 文書である場合：
1. 表明：document の about 基底 URLは null でない。
2. document の about 基底 URLを返す。
document の URLが about:blank に一致し、かつ document の about 基底 URLが null でない場合、 document の about 基底 URLを返す。
document の URLを返す。

Document document のURL を設定するには、 URL レコード url に設定する：

document の URLを url に設定する。
document を与えて、基底 URL の変更に応答する。

Document document について基底 URL の変更に応答するには：

ユーザーエージェントは、影響を受ける URL、またはその URL から導出されたデータをユーザーに表示しているユーザーインターフェイス要素を更新するべきである。そのようなユーザーインターフェイス要素の例としては、ハイパーリンクの urlを表示するステータスバーや、q、 blockquote、 ins、または del 要素の cite 属性によって指定された URL を表示するユーザーインターフェイスがある。
CSS の :link/:visited/などの疑似クラスが適切に更新されることを保証する。
document のシャドウを含む子孫である descendant ごとに：
1. descendant が、結果として投機規則の構文解析結果を持つ script 要素である場合：
  1. oldResult を element の結果とする。
  2. newResult を、element の子テキスト内容および element のノード文書が与えられた場合に投機規則の構文解析結果を作成した結果とする。
  3. element の関連するグローバルオブジェクト、oldResult、および newResult を与えて、投機規則を更新する。
document を与えて、投機的読み込みを検討する。

これは、基底 URL を変更しても、例えば img 要素によって表示される画像には影響しないことを意味する。したがって、その後スクリプトから src IDL 属性にアクセスすると、表示中の画像にはもはや対応しない可能性のある新しい絶対 URLが返される。

2.5 リソースの取得

2.5.1 用語

応答の型が「basic」、「cors」、または「default」である場合、その応答は CORS 同一オリジンである。 [FETCH]

応答の型が「opaque」または「opaqueredirect」である場合、その応答は CORS クロスオリジンである。

応答の安全でない応答は、その応答に内部応答がある場合はその内部応答であり、それ以外の場合は応答自体である。

url、destination、 corsAttributeState、および任意の 同一オリジンフォールバックフラグが与えられた場合に、潜在的 CORS 要求を作成するには、次の手順を実行する：

corsAttributeState が CORS なしである場合は mode を「no-cors」とし、それ以外の場合は「cors」とする。
同一オリジンフォールバックフラグが設定されており、かつ mode が「no-cors」である場合、 mode を「same-origin」に設定する。
credentialsMode を「include」とする。
corsAttributeState が匿名である場合、 credentialsMode を「same-origin」に設定する。
要求を新たに返す。その URLは url、宛先は destination、モードは mode、資格情報モードは credentialsMode であり、その URL 資格情報使用フラグが設定されている。

2.5.2 リソースの型の決定

リソースのContent-Type メタデータは、 MIME Sniffing の要件と整合する方法で取得および解釈しなければならない。 [MIMESNIFF]

リソースの算出済み MIME 型は、MIME Sniffing で与えられた要件と整合する方法で特定しなければならない。 [MIMESNIFF]

画像を特定してスニッフィングする規則、リソースがテキストかバイナリーかを区別する規則、および音声および動画を特定してスニッフィングする規則も MIME Sniffing で定義される。これらの規則は、結果として MIME 型を返す。[MIMESNIFF]

MIME Sniffing の規則に厳密に従うことが不可欠である。ユーザーエージェントが、サーバーの想定とは異なるヒューリスティックをコンテンツ型の検出に使用すると、セキュリティ上の問題が発生する可能性がある。詳細については MIME Sniffing を参照のこと。 [MIMESNIFF]

2.5.3 `meta` 要素からの文字エンコーディングの抽出

文字列 s が与えられた場合の、 meta 要素から文字エンコーディングを抽出するアルゴリズムは次のとおりである。これは文字エンコーディングまたは何も返さない。

position を s 内へのポインターとし、最初は文字列の先頭を指すものとする。
ループ：position より後の s 内で、単語「charset」と ASCII 大文字小文字不区別で一致する最初の 7 文字を見つける。そのような一致が見つからない場合、何も返さない。
単語「charset」の直後にある ASCII 空白をすべてスキップする（空白がない場合もある）。
次の文字が U+003D EQUALS SIGN（=）でない場合、 position をその次の文字の直前を指すように移動し、 ループとラベル付けされた手順へ戻る。
等号の直後にある ASCII 空白をすべてスキップする（空白がない場合もある）。
次の文字を以下のように処理する：

それが U+0022 QUOTATION MARK 文字（"）であり、s 内の後方に U+0022 QUOTATION MARK 文字（"）がある場合

それが U+0027 APOSTROPHE 文字（'）であり、s 内の後方に U+0027 APOSTROPHE 文字（'）がある場合

この文字と、次に最も早く出現する同じ文字との間にある部分文字列からエンコーディングを取得した結果を返す。

それが対応する文字のない U+0022 QUOTATION MARK 文字（"）である場合

それが対応する文字のない U+0027 APOSTROPHE 文字（'）である場合

次の文字がない場合

何も返さない。

それ以外の場合

この文字から、最初の ASCII 空白、U+003B SEMICOLON 文字（;）、または s の末尾のうち、最初に現れるものの直前までで構成される部分文字列からエンコーディングを取得した結果を返す。

このアルゴリズムは HTTP 仕様内のアルゴリズムとは異なる（例えば、HTTP では単一引用符の使用を許可せず、このアルゴリズムがサポートしないバックスラッシュエスケープ機構のサポートを要求する）。このアルゴリズムは歴史的に HTTP と関係していたコンテキストで使用されるが、実装がサポートする構文は以前から分岐している。[HTTP]

2.5.4 CORS 設定属性

Attributes/crossorigin

現在のすべてのエンジンでサポートされています。

Firefox8+Safari6+Chrome13+

Opera?Edge79+

Edge（レガシー）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

CORS 設定属性は、次のキーワードおよび状態を持つ列挙属性である：

キーワード	状態	概要
`anonymous`	匿名	この要素に対する要求では、そのモードが「`cors`」に設定され、資格情報モードが「`same-origin`」に設定される。
`use-credentials`	資格情報を使用	この要素に対する要求では、そのモードが「`cors`」に設定され、資格情報モードが「`include`」に設定される。

この属性の 欠落値の既定状態は、CORS なし状態であり、その 無効値の既定状態および 空値の既定状態は、どちらも匿名状態である。

CORS 設定属性によって制御される取得の大部分は、潜在的 CORS 要求を作成するアルゴリズムを通じて行われる。

要求のモードが常に「cors」となるより新しい機能では、一部の CORS 設定属性が、わずかに異なる意味を持つよう転用されており、要求の資格情報モードだけに影響する。この変換を行うため、指定された CORS 設定属性の CORS 設定属性資格情報モードを、属性の状態に応じて次のように決定すると定義する：

CORS なし
匿名: 「same-origin」
資格情報を使用: 「include」

2.5.5 リファラーポリシー属性

リファラーポリシー属性は列挙属性である。空文字列を含む各リファラーポリシーは、この属性のキーワードであり、同じ名前の状態に対応する。

この属性の 欠落値の既定状態および 無効値の既定状態は、どちらも空文字列状態である。

これらの状態がさまざまな取得の処理モデルに与える影響は、この仕様全体、 Fetch、および Referrer Policy でさらに詳しく定義される。 [FETCH] [REFERRERPOLICY]

特定の取得に使用される処理モデルの決定には複数のシグナルが寄与する可能性があり、リファラーポリシー属性はそのうちの 1 つにすぎない。一般に、これらのシグナルが処理される順序は次のとおりである：

最初に、noreferrer リンク種別の存在。
次に、リファラーポリシー属性の値。
次に、name 属性が referrer に設定された meta 要素の存在。
最後に、`Referrer-Policy` HTTP ヘッダー。

2.5.6 nonce 属性

Global_attributes/nonce

現在のすべてのエンジンでサポートされています。

Firefox31+SafariはいChromeはい

Opera?Edgeはい

Edge（レガシー）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

nonce コンテンツ属性は、特定の取得の続行を許可するかどうかを Content Security Policy が判断するために使用できる暗号学的 nonce （「一度だけ使用される数」）を表す。値はテキストである。[CSP]

nonce コンテンツ属性を持つ要素は、コンテンツ属性から値を取得し、それを [[CryptographicNonce]] という名前の内部スロットへ移動し、 HTMLOrSVGOrMathMLElement インターフェイスミックスインを通じてスクリプトに公開し、コンテンツ属性を空文字列に設定することで、暗号学的 nonce がスクリプトにだけ公開され、CSS 属性セレクターなどのサイドチャネルには公開されないことを保証する。特に指定がない限り、スロットの値は空文字列である。

element.nonce: element の暗号学的 nonce に設定された値を返す。設定子が使用されていない場合、これは元々 nonce コンテンツ属性内にあった値となる。
element.nonce = value: element の暗号学的 nonce 値を更新する。

HTMLElement/nonce

Firefox75+Safari🔰 10+Chrome61+

Opera?Edge79+

Edge（レガシー）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

nonce IDL 属性は、取得時に、この要素の [[CryptographicNonce]] の値を返し、設定時に、この要素の [[CryptographicNonce]] を指定された値に設定しなければならない。

nonce IDL 属性の設定子が、対応するコンテンツ属性を更新しないことに注意されたい。これは、要素が閲覧コンテキストに接続される際に、以下で nonce コンテンツ属性を空文字列に設定することと同様に、セレクターのようにコンテンツ属性を容易に読み取れる機構を通じた nonce 値の流出を防ぐことを意図している。この動作が導入された issue #2369 で詳細を確認できる。

次の属性変更手順は、nonce コンテンツ属性に使用される：

element が HTMLOrSVGOrMathMLElement を組み込んでいない場合、戻る。
localName が nonce でないか、 namespace が null でない場合、戻る。
value が null である場合、element の [[CryptographicNonce]] を空文字列に設定する。
それ以外の場合、element の [[CryptographicNonce]] を value に設定する。

HTMLOrSVGOrMathMLElement を組み込む要素が閲覧コンテキストに接続されるたびに、ユーザーエージェントは element に対して次の手順を実行しなければならない：

CSP list を、element のシャドウを含むルートのポリシーコンテナーの CSP リストとする。
CSP list がヘッダーによって配信された Content Security Policy を含み、かつ element が、値が空文字列でない nonce コンテンツ属性を持つ場合：
1. nonce を element の [[CryptographicNonce]] とする。
2. 「nonce」および空文字列を使用して、 element の属性値を設定する。
3. element の [[CryptographicNonce]] を nonce に設定する。
element の [[CryptographicNonce]] が復元されなければ、この時点では空文字列となる。

node、copy、および subtree が与えられた場合の、 HTMLOrSVGOrMathMLElement を組み込む要素に対する複製手順は、 copy の [[CryptographicNonce]] を、 node の [[CryptographicNonce]] に設定することである。

2.5.7 遅延読み込み属性

Lazy_loading

現在のすべてのエンジンでサポートされています。

Firefox75+Safari15.4+Chrome77+

Opera?Edge79+

Edge（レガシー）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

遅延読み込み属性は、次のキーワードおよび状態を持つ列挙属性である：

キーワード	状態	概要
`lazy`	遅延	一定の条件が満たされるまで、リソースの取得を延期するために使用される。
`eager`	即時	リソースを直ちに取得するために使用される。既定の状態である。

この属性は、その現在の状態に従い、リソースを直ちに取得するか、要素に関連する一定の条件が満たされるまで取得を延期するよう、ユーザーエージェントに指示する。

この属性の 欠落値の既定状態および 無効値の既定状態は、どちらも即時状態である。

要素 element が与えられた場合の要素を遅延読み込みするかどうかの手順は、次のとおりである：

element についてスクリプトが無効化されている場合、 false を返す。

これは追跡防止措置である。スクリプトが無効化されているときにもユーザーエージェントが遅延読み込みをサポートすると、サーバーが要求された画像の数とその時点を追跡できるように、ページのマークアップ内へ画像を戦略的に配置することで、サイトがセッション全体を通じてユーザーのおおよそのスクロール位置を追跡できてしまうためである。
element の遅延読み込み属性が遅延状態である場合、 true を返す。
false を返す。

各 img、audio、video、および iframe 要素には、関連付けられた遅延読み込み再開手順があり、初期値は null である。

各 video 要素には、関連付けられたポスター遅延読み込み再開手順もあり、初期値は null である。

遅延読み込みされる img、audio、video、および iframe 要素について、これらの手順は遅延読み込み交差オブザーバーのコールバックから、またはそれらの遅延読み込み属性が即時状態に設定されたときに実行される。これにより、要素の読み込みが続行される。video 要素については、ポスター遅延読み込み再開手順も同時に実行される。

各 Document は遅延読み込み交差オブザーバーを持つ。これは初期状態では null に設定されているが、 IntersectionObserver インスタンスに設定できる。

遅延読み込み要素 element の交差監視を開始するには、次の手順を実行する：

doc を、element のノード文書とする。
doc の遅延読み込み交差オブザーバーが null である場合、次のように初期化された新しい IntersectionObserver インスタンスに設定する：

IntersectionObserver コンストラクターの元の値を使用することを意図している。しかし、 Intersection Observer が仕様で使用するための低レベルフックを公開するまでは、この仕様では JavaScript に公開されたコンストラクターを使用せざるを得ない。これを追跡するバグ w3c/IntersectionObserver#464 を参照のこと。[INTERSECTIONOBSERVER]
- callback は、引数 entries および observer を取る次の手順である：
  1. entries 内の各 entry について開発者が変更可能な配列アクセサーまたは反復フックを呼び出さない反復方法を使用して：
    1. resumptionSteps を null とする。
    2. entry.isIntersecting が true である場合、resumptionSteps を entry.targetの遅延読み込み再開手順に設定する。
    3. posterResumptionSteps を null とする。
      
      entry.isIntersecting が true であり、かつ entry.target が video 要素である場合、 posterResumptionSteps を、その video 要素のポスター遅延読み込み再開手順に設定する。
    4. resumptionSteps が null であり、かつ posterResumptionSteps が null である場合、戻る。
    5. entry.target について、遅延読み込み要素の交差監視を停止する。
    6. resumptionSteps が null でない場合：
      1. entry.targetの遅延読み込み再開手順を null に設定する。
      2. resumptionSteps を呼び出す。
    7. posterResumptionSteps が null でない場合：
      1. video 要素のポスター遅延読み込み再開手順を null に設定する。
      2. posterResumptionSteps を呼び出す。
    isIntersecting および target 取得子の元の値を使用することを意図している。 w3c/IntersectionObserver#464 を参照のこと。 [INTERSECTIONOBSERVER]
- options は、次の辞書メンバーを持つ IntersectionObserverInit 辞書である：«[「scrollMargin」→ 遅延読み込みスクロールマージン ]»
  
  これにより、画像がまだビューポートと交差していないが、まもなく交差するスクロール中に、その画像を取得できる。
  
  遅延読み込みスクロールマージンに関する提案は値が動的に変化することを示唆するが、 IntersectionObserver API はスクロールマージンの変更をサポートしていない。issue w3c/IntersectionObserver#428 を参照のこと。
element を引数として、doc の遅延読み込み交差オブザーバーの observe メソッドを呼び出す。

observe メソッドの元の値を使用することを意図している。 w3c/IntersectionObserver#464 を参照のこと。 [INTERSECTIONOBSERVER]

遅延読み込み要素 element の交差監視を停止するには、次の手順を実行する：

doc を、element のノード文書とする。
表明：doc の遅延読み込み交差オブザーバーは null ではない。
element を引数として、doc の遅延読み込み交差オブザーバーの unobserve メソッドを呼び出す。

unobserve メソッドの元の値を使用することを意図している。 w3c/IntersectionObserver#464 を参照のこと。 [INTERSECTIONOBSERVER]

遅延読み込みスクロールマージンは実装定義の値であるが、次の提案を考慮する：

指定されたデバイスの通常の使用パターンにおいて、リソースがビューポートと交差する前に読み込まれる結果となることが最も多い最小値を設定する。
一般的なスクロール速度：一般的なスクロール速度が速いデバイスでは値を増加させる。
現在のスクロール速度または勢い：ユーザーエージェントはスクロールが停止する可能性の高い位置を予測し、それに応じて値を調整できる。
ネットワーク品質：低速または高遅延の接続では値を増加させる。
ユーザー設定が値に影響してもよい。

遅延読み込みスクロールマージンが追加情報を漏洩しないことは、プライバシーにとって重要である。例えば、新しいフィンガープリンティングベクトルを導入しないよう、現在のデバイスにおける一般的なスクロール速度を不正確な値にしてもよい。

2.5.8 ブロッキング属性

ブロッキング属性は、外部リソースを取得する際に、特定の処理をブロックするべきであることを明示的に示す。ブロックできる処理は、次の表に掲載される文字列である使用可能なブロッキングトークンによって表される：

使用可能なブロッキングトークン	説明
「`render`」	要素はレンダリングをブロックする可能性がある。

将来、さらに多くの使用可能なブロッキングトークンが追加される可能性がある。

ブロッキング属性の値は、各トークンが使用可能なブロッキングトークンである一意な空白区切りトークンの順序なし集合でなければならない。ブロッキング属性のサポート対象トークンは、使用可能なブロッキングトークンである。各要素はブロッキング属性を最大 1 個だけ持つことができる。

要素 el のブロッキングトークン集合は、次の手順の結果である：

value を、el のブロッキング属性の値とする。そのような属性が存在しない場合は空文字列とする。
value を、value を ASCII 小文字に変換したものに設定する。
rawTokens を、value を ASCII 空白で分割した結果とする。
rawTokens の要素のうち、使用可能なブロッキングトークンであるものを含む集合を返す。

要素は、そのブロッキングトークン集合が「render」を含む場合、または暗黙的にレンダリングをブロックする可能性がある場合、レンダリングをブロックする可能性がある。後者は個々の要素で定義される。既定では、要素は暗黙的にレンダリングをブロックする可能性があるものではない。

2.5.9 取得優先度属性

取得優先度属性は、次のキーワードおよび状態を持つ列挙属性である：

キーワード	状態	概要
`high`	高	同じ宛先を持つ他のリソースと比べて、高優先度の取得であることを示す。
`low`	低	同じ宛先を持つ他のリソースと比べて、低優先度の取得であることを示す。
`auto`	自動	同じ宛先を持つ他のリソースと比べて、取得優先度を自動的に決定することを示す。

この属性の 欠落値の既定状態および 無効値の既定状態は、どちらも自動状態である。

2.6 共通 DOM インターフェイス

2.6.1 コンテンツ属性の IDL 属性への反映

反映の構成要素は次のとおりである：

反映対象は、要素または ElementInternals オブジェクトである。通常はコンテキストから明らかであり、通常は反映 IDL 属性のインターフェイスと同一である。それが ElementInternals オブジェクトである場合は、常にそのインターフェイスと同一である。
反映 IDL 属性は、属性インターフェイスメンバーである。
反映コンテンツ属性名は文字列である。反映対象が要素である場合、名前空間が null であるコンテンツ属性のローカル名を表す。反映対象が ElementInternals オブジェクトである場合、それは反映対象の対象要素の内部コンテンツ属性マップのキーを表す。

反映 IDL 属性は、反映対象の反映コンテンツ属性名を反映するように定義できる。一般にこれは、 IDL 属性の取得子がコンテンツ属性の現在の値を返し、設定子がコンテンツ属性の値を指定された値に変更することを意味する。

反映対象には、次の関連付けられたアルゴリズムがある：

要素を取得する：引数を取らず、要素を返す。
コンテンツ属性を取得する：引数を取らず、null または文字列を返す。
コンテンツ属性を設定する：文字列 value を取り、何も返さない。
コンテンツ属性を削除する：引数を取らず、何も返さない。

要素 element である反映対象について、これらは次のように定義される：

要素を取得する: element を返す。
コンテンツ属性を取得する: attribute を、null、反映コンテンツ属性名、および element が与えられた場合に名前空間およびローカル名によって属性を取得した結果とする。

attribute が null である場合、null を返す。

attribute の値を返す。
文字列 value を用いてコンテンツ属性を設定する: element、反映コンテンツ属性名、および value が与えられた場合に属性値を設定する。
コンテンツ属性を削除する: null、反映コンテンツ属性名、および element が与えられた場合に、名前空間およびローカル名によって属性を削除する。

ElementInternals オブジェクト elementInternals である反映対象について、これらは次のように定義される：

要素を取得する: elementInternals の対象要素を返す。
コンテンツ属性を取得する: elementInternals の対象要素の内部コンテンツ属性マップ[反映コンテンツ属性名]が存在しない場合、null を返す。

elementInternals の対象要素の内部コンテンツ属性マップ[反映コンテンツ属性名]を返す。
文字列 value を用いてコンテンツ属性を設定する: elementInternals の対象要素の内部コンテンツ属性マップ[反映コンテンツ属性名]を value に設定する。
コンテンツ属性を削除する: elementInternals の対象要素の内部コンテンツ属性マップ[反映コンテンツ属性名]を削除する。

これにより、 ElementInternals オブジェクトでは、その対象要素の内部コンテンツ属性マップを直接操作できず、そのため反映が一方向でのみ行われるので、多少冗長なデータ構造となる。それでもこの手法は、複数の反映対象間で共有され、共通の API セマンティクスの恩恵を受ける IDL 属性を、より誤りにくく定義できるようにするために選択された。

列挙コンテンツ属性を反映する、型が DOMString または DOMString? である IDL 属性は、既知の値のみに制限できる。以下の処理モデルに従い、そのような IDL 属性の取得子は、それらの列挙属性のキーワード、空文字列、または null だけを返す。

反映 IDL 属性の型が DOMString である場合：

取得子の手順は次のとおりである：
1. element を、 thisの要素を取得するを実行した結果とする。
2. contentAttributeValue を、 thisのコンテンツ属性を取得するを実行した結果とする。
3. attributeDefinition を、名前空間が null で、ローカル名が反映コンテンツ属性名である、element のコンテンツ属性の属性定義とする。
4. attributeDefinition が列挙属性であることを示し、かつ反映 IDL 属性が既知の値のみに制限されるよう定義されている場合：
  1. contentAttributeValue が attributeDefinition のいずれの状態にも対応しない場合（例えば、それが null であり、欠落値の既定状態がない場合）、または関連付けられたキーワード値を持たない attributeDefinition の状態にある場合、空文字列を返す。
  2. contentAttributeValue が対応する attributeDefinition の状態の正規キーワードを返す。
5. contentAttributeValue が null である場合、空文字列を返す。
6. contentAttributeValue を返す。
設定子の手順は、指定された値を用いて thisのコンテンツ属性を設定するを実行することである。

反映 IDL 属性の型が DOMString? である場合：

取得子の手順は次のとおりである：
1. element を、 thisの要素を取得するを実行した結果とする。
2. contentAttributeValue を、 thisのコンテンツ属性を取得するを実行した結果とする。
3. attributeDefinition を、名前空間が null で、ローカル名が反映コンテンツ属性名である、element のコンテンツ属性の属性定義とする。
4. attributeDefinition が列挙属性であることを示す場合：
  1. 表明：反映 IDL 属性は既知の値のみに制限されている。
  2. 表明： contentAttributeValue は attributeDefinition の状態に対応する。
  3. contentAttributeValue が、関連付けられたキーワード値を持たない attributeDefinition の状態に対応する場合、null を返す。
  4. contentAttributeValue が対応する attributeDefinition の状態の正規キーワードを返す。
5. contentAttributeValue を返す。
設定子の手順は次のとおりである：
1. 指定された値が null である場合、 thisのコンテンツ属性を削除するを実行する。
2. それ以外の場合、指定された値を用いて thisのコンテンツ属性を設定するを実行する。

反映 IDL 属性の型が USVString であり、任意でURL として扱われる場合：

取得子の手順は次のとおりである：
1. element を、 thisの要素を取得するを実行した結果とする。
2. contentAttributeValue を、 thisのコンテンツ属性を取得するを実行した結果とする。
3. 反映 IDL 属性が URL として扱われる場合：
  1. contentAttributeValue が null である場合、空文字列を返す。
  2. urlString を、element のノード文書に対して、contentAttributeValue が与えられた場合に URL をエンコーディング付きで構文解析してシリアライズした結果とする。
  3. urlString が失敗でない場合、urlString を返す。
4. contentAttributeValue をスカラー値文字列に変換して返す。
設定子の手順は、指定された値を用いて thisのコンテンツ属性を設定するを実行することである。

反映 IDL 属性の型が boolean である場合：

取得子の手順は次のとおりである：
1. contentAttributeValue を、 thisのコンテンツ属性を取得するを実行した結果とする。
2. contentAttributeValue が null である場合、false を返す。
3. true を返す。
設定子の手順は次のとおりである：
1. 指定された値が false である場合、 thisのコンテンツ属性を削除するを実行する。
2. 指定された値が true である場合、空文字列を用いて thisのコンテンツ属性を設定するを実行する。

これはブールコンテンツ属性の規則に対応する。

反映 IDL 属性の型が long であり、任意で非負数のみに制限され、任意で既定値 defaultValue を持つ場合：

取得子の手順は次のとおりである：
1. contentAttributeValue を、 thisのコンテンツ属性を取得するを実行した結果とする。
2. contentAttributeValue が null でない場合：
  1. 反映 IDL 属性が非負数のみに制限されていない場合、parsedValue を contentAttributeValue の整数構文解析の結果とし、それ以外の場合は contentAttributeValue の非負整数構文解析の結果とする。
  2. parsedValue がエラーでなく、かつ long の範囲内にある場合、parsedValue を返す。
3. 反映 IDL 属性が既定値を持つ場合、 defaultValue を返す。
4. 反映 IDL 属性が非負数のみに制限されている場合、−1 を返す。
5. 0 を返す。
設定子の手順は次のとおりである：
1. 反映 IDL 属性が非負数のみに制限されており、指定された値が負である場合、 "IndexSizeError" DOMException を投げる。
2. 指定された値を、数を妥当な整数として表す可能な限り短い文字列に変換し、それを用いて thisのコンテンツ属性を設定するを実行する。

反映 IDL 属性の型が unsigned long であり、任意で正の数のみに制限されるか、フォールバック付きで正の数のみに制限されるか、または範囲にクランプされ [clampedMin, clampedMax]、任意で既定値 defaultValue を持つ場合：

取得子の手順は次のとおりである：
1. contentAttributeValue を、 thisのコンテンツ属性を取得するを実行した結果とする。
2. minimum を 0 とする。
3. 反映 IDL 属性が正の数のみに制限されているか、またはフォールバック付きで正の数のみに制限されている場合、minimum を 1 に設定する。
4. 反映 IDL 属性が範囲にクランプされる場合、minimum を clampedMin に設定する。
5. 反映 IDL 属性が範囲にクランプされない場合は maximum を 2147483647 とし、それ以外の場合は clampedMax とする。
6. contentAttributeValue が null でない場合：
  1. parsedValue を、contentAttributeValue の非負整数構文解析の結果とする。
  2. parsedValue がエラーでなく、かつ minimum 以上 maximum 以下の範囲にある場合、parsedValue を返す。
  3. parsedValue がエラーでなく、かつ反映 IDL 属性が範囲にクランプされる場合：
    1. parsedValue が minimum 未満である場合、 minimum を返す。
    2. maximum を返す。
7. 反映 IDL 属性が既定値を持つ場合、 defaultValue を返す。
8. minimum を返す。
設定子の手順は次のとおりである：
1. 反映 IDL 属性が正の数のみに制限されており、指定された値が 0 である場合、 "IndexSizeError" DOMException を投げる。
2. minimum を 0 とする。
3. 反映 IDL 属性が正の数のみに制限されているか、またはフォールバック付きで正の数のみに制限されている場合、minimum を 1 に設定する。
4. newValue を minimum とする。
5. 反映 IDL 属性が既定値を持つ場合、 newValue を defaultValue に設定する。
6. 指定された値が 2147483647 以下かつ minimum 以上の範囲にある場合、 newValue をその値に設定する。
7. newValue を、数を妥当な非負整数として表す可能な限り短い文字列に変換し、それを用いて thisのコンテンツ属性を設定するを実行する。
範囲へのクランプは、設定子の手順には影響しない。

反映 IDL 属性の型が double であり、任意で正の数のみに制限され、任意で既定値 defaultValue を持つ場合：

取得子の手順は次のとおりである：
1. contentAttributeValue を、 thisのコンテンツ属性を取得するを実行した結果とする。
2. contentAttributeValue が null でない場合：
  1. parsedValue を、contentAttributeValue の浮動小数点数構文解析の結果とする。
  2. parsedValue がエラーでなく、かつ 0 より大きい場合、 parsedValue を返す。
  3. parsedValue がエラーでなく、かつ反映 IDL 属性が正の数のみに制限されていない場合、parsedValue を返す。
3. 反映 IDL 属性が既定値を持つ場合、 defaultValue を返す。
4. 0 を返す。
設定子の手順は次のとおりである：
1. 反映 IDL 属性が正の数のみに制限されており、指定された値が 0 より大きくない場合、戻る。
2. 指定された値を数の浮動小数点数としての最適な表現に変換し、それを用いて thisのコンテンツ属性を設定するを実行する。

Infinity および Not-a-Number（NaN）の値は、 Web IDL で定義されるように、設定時に例外を投げる。 [WEBIDL]

反映 IDL 属性の型が DOMTokenList である場合、その取得子の手順は、関連付けられた要素が thisであり、関連付けられた属性のローカル名が反映コンテンツ属性名である DOMTokenList オブジェクトを返すことである。仕様の作者は、この型の IDL 属性を ElementInternals 上で反映できない。

反映 IDL 属性の型が T? であり、T が Element または Element を継承するインターフェイスのいずれかである場合、attr を反映コンテンツ属性名として：

その反映対象は、要素への弱い参照または null である明示的に設定された attr 要素を持つ。初期値は null である。
その反映対象 reflectedTarget は、 attr に関連付けられた要素を取得するアルゴリズムを持ち、これは次の手順を実行する：
1. element を、reflectedTarget の要素を取得するを実行した結果とする。
2. contentAttributeValue を、 reflectedTarget のコンテンツ属性を取得するを実行した結果とする。
3. reflectedTarget の明示的に設定された attr 要素が null でない場合：
  1. reflectedTarget の明示的に設定された attr 要素が、element のシャドウを含む祖先のいずれかの子孫である場合、 reflectedTarget の明示的に設定された attr 要素を返す。
  2. null を返す。
4. それ以外で、contentAttributeValue が null でない場合、次の基準を満たす最初の要素 candidate をツリー順で返す：
  - candidate のルートが、element のルートと同じである；
  - candidate の IDが contentAttributeValue である；かつ
  - candidate が T を実装する。
  そのような要素が存在しない場合、null を返す。
5. null を返す。
取得子の手順は、 thisの attr に関連付けられた要素を取得するを実行した結果を返すことである。
設定子の手順は次のとおりである：
1. 指定された値が null である場合：
  1. thisの明示的に設定された attr 要素を null に設定する。
  2. thisのコンテンツ属性を削除するを実行する。
  3. 戻る。
2. 空文字列を用いて thisのコンテンツ属性を設定するを実行する。
3. thisの明示的に設定された attr 要素を、指定された値への弱い参照に設定する。
要素である反映対象のみについて： element、localName、oldValue、 value、および namespace が与えられた場合、コンテンツ属性と IDL 属性との間を同期するために、次の属性変更手順を使用する：
1. localName が attr でないか、 namespace が null でない場合、戻る。
2. element の明示的に設定された attr 要素を null に設定する。

一貫性のため、この型の反映 IDL 属性では、その識別子を「Element」で終わらせることを強く推奨する。

反映 IDL 属性の型が FrozenArray<T>? であり、T が Element または Element を継承するインターフェイスのいずれかである場合、attr を反映コンテンツ属性名として：

その反映対象は、要素への弱い参照のリストまたは null である明示的に設定された attr 要素群を持つ。初期値は null である。
その反映対象は、要素のリストであるキャッシュされた attr 関連要素群を持つ。初期値は « » である。
その反映対象は、 FrozenArray<T>? であるキャッシュされた attr 関連要素オブジェクトを持つ。初期値は null である。
その反映対象 reflectedTarget は、 attr に関連付けられた要素群を取得するアルゴリズムを持ち、これは次の手順を実行する：
1. elements を空のリストとする。
2. element を、reflectedTarget の要素を取得するを実行した結果とする。
3. reflectedTarget の明示的に設定された attr 要素群が null でない場合：
  1. reflectedTarget の明示的に設定された attr 要素群内の各 attrElement について反復する：
    1. attrElement が、element のシャドウを含む祖先のいずれの子孫でもない場合、続行する。
    2. attrElement を elements に付加する。
4. それ以外の場合：
  1. contentAttributeValue を、 reflectedTarget のコンテンツ属性を取得するを実行した結果とする。
  2. contentAttributeValue が null である場合、null を返す。
  3. tokens を、contentAttributeValue を ASCII 空白で分割したものとする。
  4. tokens の各 id について反復する：
    1. candidate を、次の基準を満たすツリー順で最初の要素とする：
      
      candidate のルートが、element のルートと同じである；
      
      candidate の IDが id である；かつ
      
      candidate が T を実装する。
      
      そのような要素が存在しない場合、続行する。
    2. candidate を elements に付加する。
5. elements を返す。
取得子の手順は次のとおりである：
1. elements を、 thisの attr に関連付けられた要素群を取得するを実行した結果とする。
2. elements の内容が、 thisのキャッシュされた attr 関連要素群の内容と等しい場合、 thisのキャッシュされた attr 関連要素オブジェクトを返す。
3. elementsAsFrozenArray を、elements を FrozenArray<T>? に変換したものとする。
4. thisのキャッシュされた attr 関連要素群を elements に設定する。
5. thisのキャッシュされた attr 関連要素オブジェクトを elementsAsFrozenArray に設定する。
6. elementsAsFrozenArray を返す。
この追加のキャッシュ層は、 element.reflectedElements === element.reflectedElements という不変条件を維持するために必要である。
設定子の手順は次のとおりである：
1. 指定された値が null である場合：
  1. thisの明示的に設定された attr 要素群を null に設定する。
  2. thisのコンテンツ属性を削除するを実行する。
  3. 戻る。
2. 空文字列を用いて thisのコンテンツ属性を設定するを実行する。
3. elements を空のリストとする。
4. 指定された値内の各 element について反復する：
  1. element への弱い参照を elements に付加する。
5. thisの明示的に設定された attr 要素群を elements に設定する。
要素である反映対象のみについて： element、localName、oldValue、 value、および namespace が与えられた場合、コンテンツ属性と IDL 属性との間を同期するために、次の属性変更手順を使用する：
1. localName が attr でないか、 namespace が null でない場合、戻る。
2. element の明示的に設定された attr 要素群を null に設定する。

一貫性のため、この型の反映 IDL 属性では、その識別子を「Elements」で終わらせることを強く推奨する。

2.6.2 IDL 拡張属性を介した反映の使用

反映は、IDL から拡張属性を介して使用できる。 [Reflect]、[ReflectSetter]、[ReflectURL]、 [ReflectNonNegative]、[ReflectPositive]、および [ReflectPositiveWithFallback]は、いずれも反映を発生させる。これらは引数を取らないか文字列を取らなければならず、インターフェイスメンバー属性以外に出現してはならず、一度に使用できるのはこれらのうち 1 つだけである。

これらの主要な反映拡張属性のいずれかについて、その反映コンテンツ属性名は、文字列値が指定されている場合はその値であり、それ以外の場合は IDL 属性名を ASCII 小文字に変換したものである。

[Reflect] 拡張属性を持つ IDL 属性は、[Reflect]の反映コンテンツ属性名を反映しなければならない。

[ReflectSetter] 拡張属性を持つ IDL 属性は、設定時に [ReflectSetter]の反映コンテンツ属性名を反映しなければならない。

[ReflectURL] 拡張属性は、型が USVString である属性にのみ出現しなければならない。

[ReflectURL] 拡張属性を持つ IDL 属性は、[ReflectURL]の反映コンテンツ属性名を、URL として反映しなければならない。

[ReflectNonNegative] 拡張属性は、型が long である属性にのみ出現しなければならない。

[ReflectNonNegative] 拡張属性を持つ IDL 属性は、[ReflectNonNegative]の反映コンテンツ属性名を、非負数のみに制限して反映しなければならない。

[ReflectPositive] および [ReflectPositiveWithFallback] 拡張属性は、型が double または unsigned long である属性にのみ出現しなければならない。

[ReflectPositive] 拡張属性を持つ IDL 属性は、[ReflectPositive]の反映コンテンツ属性名を、正の数のみに制限して、反映しなければならない。

[ReflectPositiveWithFallback] 拡張属性を持つ IDL 属性は、[ReflectPositiveWithFallback]の反映コンテンツ属性名を、フォールバック付きで正の数のみに制限して、反映しなければならない。

上記の拡張属性を補うため、[ReflectRange]および [ReflectDefault]も導入する。これらは反映の動作を拡張し、またインターフェイスメンバー属性にのみ出現しなければならない。

[ReflectRange] 拡張属性は、2 個の値に制限された整数リストを取らなければならない。これは、型が unsigned long である属性にのみ使用しなければならない。さらに、[Reflect] と併せてのみ出現しなければならない。

[ReflectRange] 拡張属性を持つ IDL 属性は、範囲 [clampedMin, clampedMax] にクランプされる。ここで clampedMin は [ReflectRange] に指定されたリストの第 1 引数であり、clampedMax は第 2 引数である。

[ReflectDefault] 拡張属性は、型が double、 long、または unsigned long である属性にのみ使用しなければならない。型が double である属性に使用する場合、10 進数を取らなければならず、それ以外の場合は整数を取らなければならない。さらに、[Reflect]、 [ReflectNonNegative]、 [ReflectPositive]、または [ReflectPositiveWithFallback] と併せてのみ出現しなければならない。

[ReflectDefault] 拡張属性を持つ IDL 属性は、[ReflectDefault] に指定された引数によって提供される既定値を持つ。

2.6.3 仕様における反映の使用

反映は、主として反映 IDL 属性を通じてコンテンツ属性への型付きアクセスを提供することにより、ウェブ開発者の使いやすさを向上させるためのものである。ウェブプラットフォームが構築される上での最終的な信頼できる情報源は、コンテンツ属性そのものである。すなわち、仕様の作者は反映 IDL 属性の取得子または設定子の手順を使用してはならず、代わりにコンテンツ属性の存在および値を使用しなければならない。（または、列挙属性の状態など、その上位の抽象化を使用する。）

これに対する 2 つの重要な例外は、型が次のいずれかである反映 IDL 属性である：

T?。ここで T は、Element または Element を継承するインターフェイスのいずれかである
FrozenArray<T>?。ここで T は、 Element または Element を継承するインターフェイスのいずれかである

これらについて、仕様の作者は反映対象の attr に関連付けられた要素を取得するおよび attr に関連付けられた要素群を取得するを、それぞれ使用しなければならない。コンテンツ属性の存在および値は、反映 IDL 属性と完全に同期できないため、使用してはならない。

反映対象の明示的に設定された attr 要素、明示的に設定された attr 要素群、キャッシュされた attr 関連要素群、およびキャッシュされた attr 関連要素オブジェクトは、内部実装の詳細として扱わなければならず、その上に機能を構築してはならない。

2.6.4 コレクション

HTMLFormControlsCollection および HTMLOptionsCollection インターフェイスは、 HTMLCollection インターフェイスから派生したコレクションである。HTMLAllCollection インターフェイスはコレクションではあるが、そのように派生したものではない。

2.6.4.1 `HTMLAllCollection` インターフェイス

HTMLAllCollection インターフェイスは、レガシーな document.all 属性に使用される。これは HTMLCollection と同様に動作する。主な違いは、そのメソッドの非常に多様な異なる（誤）用法のすべてが何らかの値を返すこと、およびプロパティアクセスの代わりに関数として呼び出せることである。

すべての HTMLAllCollection オブジェクトは Document をルートとし、すべての要素に一致するフィルターを持つため、HTMLAllCollection オブジェクトのコレクションによって表される要素は、ルートである Document のすべての子孫要素からなる。

HTMLAllCollection インターフェイスを実装するオブジェクトは、レガシープラットフォームオブジェクトであり、以下の節で説明する追加の [[Call]] 内部メソッドを持つ。また、 [[IsHTMLDDA]] 内部スロットも持つ。

HTMLAllCollection インターフェイスを実装するオブジェクトは、 [[IsHTMLDDA]] 内部スロットを持つため、いくつかの通常とは異なる動作をする：

JavaScript の ToBoolean 抽象演算は、HTMLAllCollection インターフェイスを実装するオブジェクトが与えられた場合、false を返す。
IsLooselyEqual 抽象演算は、 HTMLAllCollection インターフェイスを実装するオブジェクトが与えられた場合、undefined および null 値と比較すると true を返す。（IsStrictlyEqual 抽象演算を使用する比較、および文字列やオブジェクトなどの他の値との IsLooselyEqual 比較には影響しない。）
JavaScript の typeof 演算子は、HTMLAllCollection インターフェイスを実装するオブジェクトに適用された場合、文字列 "undefined" を返す。

これらの特殊な動作は、2 種類のレガシーコンテンツとの互換性を求めることに由来する。 1 つは、レガシーユーザーエージェントを検出する方法として document.all の存在を使用するもの、もう 1 つは、それらのレガシーユーザーエージェントだけをサポートし、 document.all オブジェクトの存在を最初に検査せずに使用するものである。 [JAVASCRIPT]

[Exposed=Window,
 LegacyUnenumerableNamedProperties]
interface HTMLAllCollection {
  readonly attribute unsigned long length;
  getter Element (unsigned long index);
  getter (HTMLCollection or Element)? namedItem(DOMString name);
  (HTMLCollection or Element)? item(optional DOMString nameOrIndex);

  // Note: HTMLAllCollection objects have a custom [[Call]] internal method and an [[IsHTMLDDA]] internal slot.
};

このオブジェクトのサポート対象プロパティインデックスは、 HTMLCollection オブジェクトについて定義されるものと同じである。

サポート対象プロパティ名は、コレクションによって表されるすべての要素の id 属性の空でないすべての値と、「all」名前付き要素のうち、コレクションによって表されるすべての要素の name 属性の空でないすべての値からなり、ツリー順で、後の重複を無視し、要素の id と name の両方が寄与し、互いに異なり、いずれも以前の項目の重複でない場合は、 id を name より前に置く。

length 取得子の手順は、コレクションによって表されるノードの数を返すことである。

インデックス付きプロパティ取得子は、渡されたインデックスを指定して this から「all」インデックス付き要素を取得した結果を返さなければならない。

namedItem(name) メソッドの手順は、 name を指定して this から「all」名前付き要素を取得した結果を返すことである。

item(nameOrIndex) メソッドの手順は次のとおりである：

nameOrIndex が指定されていない場合、null を返す。
nameOrIndex を指定して、 this から「all」インデックス付きまたは名前付き要素を取得した結果を返す。

次の要素は「all」名前付き要素である： a、 button、 embed、 form、 frame、 frameset、 iframe、 img、 input、 map、 meta、 object、 select、および textarea

インデックス index が与えられた場合に、HTMLAllCollection collection から「all」インデックス付き要素を取得するには、 collection 内の index^番目の要素を返し、そのような index^番目の要素がない場合は null を返す。

名前 name が与えられた場合に、HTMLAllCollection collection から「all」名前付き要素を取得するには、次の手順を実行する：

name が空文字列である場合、null を返す。
subCollection を、collection と同じ Document をルートとし、次のいずれかである要素だけに一致するフィルターを持つ HTMLCollection オブジェクトとする：
- name と等しい name 属性を持つ「all」名前付き要素、または
- name と等しい IDを持つ要素。
subCollection 内に要素が正確に 1 個ある場合、その要素を返す。
それ以外で、subCollection が空である場合、null を返す。
それ以外の場合、subCollection を返す。

nameOrIndex が与えられた場合に、HTMLAllCollection collection から「all」インデックス付きまたは名前付き要素を取得するには：

nameOrIndex を JavaScript String 値に変換したものが配列インデックスプロパティ名である場合、 nameOrIndex が表す数を指定して collection から「all」インデックス付き要素を取得した結果を返す。
nameOrIndex を指定して collection から「all」名前付き要素を取得した結果を返す。

2.6.4.1.1 [[Call]] ( `thisArgument`, `argumentsList` )

argumentsList のサイズがゼロである場合、または argumentsList[0] が undefined である場合、null を返す。
nameOrIndex を、argumentsList[0] を DOMString に変換した結果とする。
result を、nameOrIndex を指定してこの HTMLAllCollection から「all」インデックス付きまたは名前付き要素を取得した結果とする。
result を ECMAScript 値に変換した結果を返す。

thisArgument は無視されるため、 Function.prototype.call.call(document.all, null, "x") のようなコードでも引き続き要素を検索する。（document.all は Function.prototype を継承しないため、 document.all.call は存在しない。）

2.6.4.2 `HTMLFormControlsCollection` インターフェイス

HTMLFormControlsCollection インターフェイスは、form 要素内のリスト対象要素のコレクションに使用される。

HTMLFormControlsCollection

現在のすべてのエンジンでサポートされている。

Firefox1+Safari4+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet ExplorerNo

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

RadioNodeList

現在のすべてのエンジンでサポートされている。

Firefox33+Safari7+Chrome21+

Opera?Edge79+

Edge (Legacy)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

[Exposed=Window]
interface HTMLFormControlsCollection : HTMLCollection {
  // inherits length and item()
  getter (RadioNodeList or Element)? namedItem(DOMString name); // shadows inherited namedItem()
};

[Exposed=Window]
interface RadioNodeList : NodeList {
  attribute DOMString value;
};

collection.length

collection 内の要素数を返す。

element = collection.item(index)

element = collection[index]

collection 内のインデックス index にある項目を返す。項目はツリー順に並べられる。

element = collection.namedItem(name) HTMLFormControlsCollection/namedItem 現在のすべてのエンジンでサポートされている。 Firefox33+Safari4+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet ExplorerNo Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

radioNodeList = collection.namedItem(name)

element = collection[name]

radioNodeList = collection[name]

collection から、 IDまたは nameが name である項目を返す。

一致する項目が複数ある場合、それらすべての要素を含む RadioNodeList オブジェクトを返す。

radioNodeList.value

radioNodeList によって表される、チェックされた最初のラジオボタンの値を返す。

radioNodeList.value = value

radioNodeList によって表されるラジオボタンのうち、値が value である最初のものをチェックする。

このオブジェクトのサポート対象プロパティインデックスは、 HTMLCollection オブジェクトについて定義されるものと同じである。

サポート対象プロパティ名は、コレクションによって表されるすべての要素の id および name 属性の空でないすべての値からなり、ツリー順で、後の重複を無視し、要素の id と name の両方が寄与し、互いに異なり、いずれも以前の項目の重複でない場合は、 id を name より前に置く。

namedItem(name) メソッドは、次のアルゴリズムに従って動作しなければならない：

name が空文字列である場合、null を返し、アルゴリズムを停止する。
メソッドが呼び出された時点で、コレクション内に、name と等しい id 属性または name 属性のいずれかを持つノードが正確に 1 個ある場合、そのノードを返し、アルゴリズムを停止する。
それ以外で、コレクション内に、name と等しい id 属性または name 属性のいずれかを持つノードがない場合、null を返し、アルゴリズムを停止する。
それ以外の場合、HTMLFormControlsCollection オブジェクトのライブビューを表す新しい RadioNodeList オブジェクトを作成し、さらにフィルターを適用して、RadioNodeList オブジェクト内のノードを、name と等しい id 属性または name 属性のいずれかを持つものだけにする。RadioNodeList オブジェクト内のノードは、ツリー順に並べなければならない。
その RadioNodeList オブジェクトを返す。

NodeList インターフェイスから継承された RadioNodeList インターフェイスのメンバーは、NodeList オブジェクト上で動作する場合と同様に動作しなければならない。

RadioNodeList/value

現在のすべてのエンジンでサポートされている。

Firefox33+Safari7+Chrome21+

Opera?Edge79+

Edge (Legacy)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

RadioNodeList オブジェクト上の value IDL 属性は、取得時に、次の手順を実行して返される値を返さなければならない：

element を、RadioNodeList オブジェクトによって表される要素のうち、ツリー順で最初にある、input 要素で、その type 属性がラジオボタン状態にあり、そのチェック状態が true であるものとする。そのような要素がない場合は null とする。
element が null である場合、空文字列を返す。
element が value 属性を持たない要素である場合、文字列「on」を返す。
それ以外の場合、element の value 属性の値を返す。

設定時に、value IDL 属性は、次の手順を実行しなければならない：

新しい値が文字列「on」である場合：element を、RadioNodeList オブジェクトによって表される要素のうち、ツリー順で最初にある、input 要素で、その type 属性がラジオボタン状態にあり、その value コンテンツ属性が存在しないか、存在して新しい値と等しいものとする。そのような要素が存在しない場合は、代わりに element を null とする。

それ以外の場合：element を、RadioNodeList オブジェクトによって表される要素のうち、ツリー順で最初にある、input 要素で、その type 属性がラジオボタン状態にあり、その value コンテンツ属性が存在し、新しい値と等しいものとする。そのような要素が存在しない場合は、代わりに element を null とする。
element が null でない場合、そのチェック状態を true に設定する。

2.6.4.3 `HTMLOptionsCollection` インターフェイス

HTMLOptionsCollection

現在のすべてのエンジンでサポートされている。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet Explorer6+

Firefox Android?Safari iOS1+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

HTMLOptionsCollection インターフェイスは、option 要素のコレクションに使用される。これは常に select 要素をルートとし、その要素の子孫を操作する属性およびメソッドを持つ。

[Exposed=Window]
interface HTMLOptionsCollection : HTMLCollection {
  // inherits item(), namedItem()
  [CEReactions] attribute unsigned long length; // shadows inherited length
  [CEReactions] setter undefined (unsigned long index, HTMLOptionElement? option);
  [CEReactions] undefined add((HTMLOptionElement or HTMLOptGroupElement) element, optional (HTMLElement or long)? before = null);
  [CEReactions] undefined remove(long index);
  attribute long selectedIndex;
};

collection.length

collection 内の要素数を返す。

collection.length = value

既存の長さより小さい数に設定すると、collection に対応するコンテナー内の option 要素数を切り詰める。

既存の長さより大きい数に設定すると、その数が 100000 以下である場合、 collection に対応するコンテナーへ新しい空の option 要素を追加する。

element = collection.item(index)

element = collection[index]

collection 内のインデックス index にある項目を返す。項目はツリー順に並べられる。

collection[index] = element

index が collection 内の項目数より大きい場合、対応するコンテナーへ新しい空の option 要素を追加する。

null に設定すると、インデックス index にある項目を collection から削除する。

option 要素に設定すると、collection 内のインデックス index にその要素を追加するか、既存の要素を置換する。

element = collection.namedItem(name)

element = collection[name]

collection から、IDまたは nameが name である項目を返す。

一致する項目が複数ある場合、最初の項目を返す。

collection.add(element[, before])

before によって指定されたノードの前へ element を挿入する。

before 引数には数を指定できる。この場合、element はその番号を持つ項目の前へ挿入される。または collection 内の要素を指定でき、この場合、element はその要素の前へ挿入される。

before が省略されるか null である場合、または範囲外の数である場合、 element はリストの末尾へ追加される。

element が挿入先となる要素の祖先である場合、 "HierarchyRequestError" DOMException を投げる。

collection.remove(index)

インデックス index を持つ項目を collection から削除する。

collection.selectedIndex

選択された項目がある場合は最初の項目のインデックスを返し、選択された項目がない場合は −1 を返す。

collection.selectedIndex = index

選択項目を、collection 内のインデックス index にある option 要素へ変更する。

このオブジェクトのサポート対象プロパティインデックスは、 HTMLCollection オブジェクトについて定義されるものと同じである。

length 取得子の手順は、コレクションによって表されるノード数を返すことである。

length 設定子の手順は次のとおりである：

current を、コレクションによって表されるノード数とする。
指定された値が current より大きい場合：
1. 指定された値が 100,000 より大きい場合、戻る。
2. n を value − current とする。
3. n を指定して、 this がルートとする select 要素へ新しい option 要素を付加する。
指定された値が current より小さい場合：
1. n を current − value とする。
2. コレクション内の最後の n 個のノードを、その親ノードから削除する。

length を設定しても、optgroup 要素が削除または追加されることはなく、既存の optgroup 要素へ新しい子が追加されることもない（ただし、その子が削除されることはある）。

非負整数 count が与えられた場合に、select 要素 select へ新しい option 要素を付加するには：

fragmentを、selectのノード文書を与えて文書フラグメントを作成した結果とする。
count個の新しい option 要素をfragmentに追加する。
fragmentを selectに追加する。

プロパティインデックス index および新しい値 value が与えられた場合に、HTMLOptionsCollection collection の新しいインデックス付きプロパティの値を設定する、または既存のインデックス付きプロパティの値を設定するには：

value が null である場合、index を指定して collection から option を削除し、戻る。
length を、collection によって表されるノード数とする。
delta を index − length とする。
delta が 0 より大きい場合、delta を指定して、 collection がルートとする select 要素へ新しい option 要素を付加する。
delta が 0 以上である場合、value を、 collection がルートとする select 要素へ付加する。それ以外の場合、 collection 内の index 番目の要素を value で置換する。

add(element, before) メソッドの手順は次のとおりである：

element が、 this がルートとする select 要素の祖先である場合、 "HierarchyRequestError" DOMException を投げる。
before が要素であるが、その要素が this がルートとする select 要素の子孫でない場合、 "NotFoundError" DOMException を投げる。
element と before が同じ要素である場合、戻る。
reference を null とする。
before がノードである場合、reference を before に設定する。それ以外で、before が整数であり、 this 内に before 番目のノードがある場合、 reference をそのノードに設定する。
reference が null でない場合、parent を reference の親ノードとし、それ以外の場合は this がルートとする select 要素とする。
element を、parent ノード内の reference の前へ事前挿入する。

整数 index が与えられた場合に、HTMLOptionsCollection collection から option を削除するには：

collection によって表されるノード数が 0 である場合、戻る。
index が 0 以上で、かつ collection によって表されるノード数未満の数でない場合、戻る。
element を、collection 内の index 番目の要素とする。
element をその親ノードから削除する。

remove(index) メソッドの手順は、 index を指定して this から option を削除することである。

selectedIndex 取得子の手順は、 this がルートとする select 要素の選択済みインデックスを返すことである。

selectedIndex 設定子の手順は、 this がルートとする select 要素の選択済みインデックスを設定することであり、その値を指定された値に設定する。

2.6.5 `DOMStringList` インターフェイス

DOMStringList

現在のすべてのエンジンでサポートされている。

Firefox1+Safari5.1+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+

DOMStringList インターフェイスは、文字列のリストを表す、時代遅れでレトロな方法である。

[Exposed=(Window,Worker)]
interface DOMStringList {
  readonly attribute unsigned long length;
  getter DOMString? item(unsigned long index);
  boolean contains(DOMString string);
};

新しい API は、DOMStringList ではなく、 sequence<DOMString> または同等のものを使用しなければならない。

strings.length: strings 内の文字列数を返す。
strings[index]
strings.item(index): strings から、インデックス index を持つ文字列を返す。
strings.contains(string): strings が string を含む場合は true を返し、それ以外の場合は false を返す。

各 DOMStringList オブジェクトには、関連付けられたリストがある。

DOMStringList インターフェイスはインデックス付きプロパティをサポートする。サポート対象プロパティインデックスは、 this に関連付けられたリストのインデックスである。

DOMStringList/length

現在のすべてのエンジンでサポートされている。

Firefox1+Safari5.1+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

length 取得子の手順は、 this に関連付けられたリストのサイズを返すことである。

DOMStringList/item

現在のすべてのエンジンでサポートされている。

Firefox1+Safari5.1+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+

item(index) メソッドの手順は、 this に関連付けられたリスト内の index 番目の項目を返すことであり、 index に 1 を加えた値が this に関連付けられたリストのサイズより大きい場合は null を返す。

DOMStringList/contains

現在のすべてのエンジンでサポートされている。

Firefox1.5+Safari5.1+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+

contains(string) メソッドの手順は、 this に関連付けられたリストが string を含む場合は true を返し、それ以外の場合は false を返すことである。

2.7 構造化データの安全な受け渡し

プラットフォームオブジェクトを含む JavaScript オブジェクトを、レルム境界を越えて渡すことをサポートするため、この仕様では、オブジェクトをシリアライズおよびデシリアライズするための次の基盤を定義する。場合によっては、基礎となるデータをコピーする代わりに転送することも含まれる。このシリアライズ／デシリアライズ処理は総称して「構造化クローン」と呼ばれるが、ほとんどの API はシリアライズとデシリアライズを別々の手順として実行する。（注目すべき例外は structuredClone() メソッドである。）

この節では、JavaScript 仕様の用語および表記規約を使用する。 [JAVASCRIPT]

2.7.1 シリアライズ可能なオブジェクト

/developer.mozilla.org/en-US/docs/Glossary/Serializable_object

Firefox103+SafariNoChrome77+

Opera?Edge79+

Edge (Legacy)?Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

/developer.mozilla.org/en-US/docs/Glossary/Serializable_object

Firefox103+SafariNoChrome77+

Opera?Edge79+

Edge (Legacy)?Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

/developer.mozilla.org/en-US/docs/Glossary/Serializable_object

Firefox103+SafariNoChrome77+

Opera?Edge79+

Edge (Legacy)?Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

/developer.mozilla.org/en-US/docs/Glossary/Serializable_object

Firefox103+SafariNoChrome77+

Opera?Edge79+

Edge (Legacy)?Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

/developer.mozilla.org/en-US/docs/Glossary/Serializable_object

Firefox103+SafariNoChrome77+

Opera?Edge79+

Edge (Legacy)?Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

/developer.mozilla.org/en-US/docs/Glossary/Serializable_object

Firefox103+SafariNoChrome77+

Opera?Edge79+

Edge (Legacy)?Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

/developer.mozilla.org/en-US/docs/Glossary/Serializable_object

Firefox103+SafariNoChrome77+

Opera?Edge79+

Edge (Legacy)?Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

シリアライズ可能なオブジェクトは、特定のレルムに依存しない方法でシリアライズし、後でデシリアライズすることをサポートする。これにより、ディスクに保存して後で復元したり、エージェント境界、さらにはエージェントクラスター境界を越えてクローンしたりできる。

すべてのオブジェクトがシリアライズ可能なオブジェクトであるわけではなく、シリアライズ可能なオブジェクトであるオブジェクトのすべての側面が、シリアライズ時に必ず保持されるわけでもない。

プラットフォームオブジェクトは、その主要インターフェイスに [Serializable] IDL 拡張属性が付与されている場合、シリアライズ可能なオブジェクトになれる。そのようなインターフェイスは、次のアルゴリズムも定義しなければならない：

シリアライズ手順。これはプラットフォームオブジェクト value、 Record serialized、およびブール値 forStorage を取る

value 内のデータを serialized のフィールドへシリアライズする一連の手順。serialized へシリアライズされた結果のデータは、どのレルムにも依存してはならない。

シリアライズできない場合、これらの手順は例外を投げてもよい。

これらの手順は、ネストされたデータ構造をシリアライズするためにサブシリアライズを実行してもよい。重要な memory 引数が省略されるため、 StructuredSerialize を直接呼び出すべきではない。

forStorage 引数がアルゴリズムに関係しない場合、これらの手順の導入文ではその引数への言及を省略するべきである。

デシリアライズ手順。これは Record serialized、プラットフォームオブジェクト value、およびレルム targetRealm を取る

serialized 内のデータをデシリアライズし、それを使用して value を適切に設定する一連の手順。value は、対象となるプラットフォームオブジェクト型の新たに作成されたインスタンスであり、その内部データはまだ何も設定されていない。それを設定するのがこれらの手順の役割である。

デシリアライズできない場合、これらの手順は例外を投げてもよい。

これらの手順は、ネストされたデータ構造をデシリアライズするためにサブデシリアライズを実行してもよい。重要な targetRealm および memory 引数が省略されるため、 StructuredDeserialize を直接呼び出すべきではない。

これらの手順によってどのデータをシリアライズおよびデシリアライズするかは、個々のプラットフォームオブジェクトの定義に委ねられる。通常、これらの手順は非常に対称的である。

[Serializable] 拡張属性は引数を取ってはならず、インターフェイスにのみ出現しなければならない。 1 つのインターフェイスに複数回出現してはならない。

指定されたプラットフォームオブジェクトについて、（デ）シリアライズ処理中に考慮されるのは、そのオブジェクトの主要インターフェイスだけである。したがって、インターフェイスの定義に継承が関係する場合、継承チェーン内で [Serializable] が注釈された各インターフェイスは、継承したインターフェイスに由来する重要なデータも考慮に入れた、独立したシリアライズ手順およびデシリアライズ手順を定義する必要がある。

2 つの関連データが関連付けられたプラットフォームオブジェクト Person を定義すると仮定する：

文字列である名前値、および
別の Person インスタンスまたは null のいずれかである親友値。

この場合、Person インターフェイスに [Serializable] 拡張属性を付与し、次の付随アルゴリズムを定義することで、 Person インスタンスをシリアライズ可能なオブジェクトとして定義できる：

value および serialized が与えられた場合の、それらのシリアライズ手順：

serialized.[[Name]] を、value に関連付けられた名前値に設定する。
serializedBestFriend を、value に関連付けられた親友値のサブシリアライズとする。
serialized.[[BestFriend]] を serializedBestFriend に設定する。

serialized、value、および targetRealm が与えられた場合の、それらのデシリアライズ手順：

value に関連付けられた名前値を serialized.[[Name]] に設定する。
deserializedBestFriend を、 serialized.[[BestFriend]] のサブデシリアライズとする。
value に関連付けられた親友値を deserializedBestFriend に設定する。

JavaScript 仕様で定義されるオブジェクトは、 StructuredSerialize 抽象演算によって直接処理される。

当初、この仕様では、あるレルムから別のレルムへクローンできる「クローン可能なオブジェクト」という概念を定義していた。しかし、より複雑な特定の状況の動作をより適切に規定するため、シリアライズおよびデシリアライズを明示するようモデルが更新された。

2.7.2 転送可能なオブジェクト

転送可能なオブジェクトは、エージェント間での転送をサポートする。転送とは、基礎となるデータへの参照を共有しながらオブジェクトを実質的に再作成し、その後、転送されるオブジェクトを切り離すことである。これは、高コストなリソースの所有権を移転する場合に有用である。すべてのオブジェクトが転送可能なオブジェクトであるわけではなく、転送可能なオブジェクトであるオブジェクトのすべての側面が、転送時に必ず保持されるわけでもない。

転送は、不可逆かつ非冪等な操作である。オブジェクトが一度転送されると、再度転送することも、実際に使用することもできない。

プラットフォームオブジェクトは、その主要インターフェイスに [Transferable] IDL 拡張属性が付与されている場合、転送可能なオブジェクトになれる。そのようなインターフェイスは、次のアルゴリズムも定義しなければならない：

転送手順。これはプラットフォームオブジェクト value および Record dataHolder を取る

value 内のデータを dataHolder のフィールドへ転送する一連の手順。 dataHolder に保持される結果のデータは、どのレルムにも依存してはならない。

転送できない場合、これらの手順は例外を投げてもよい。

転送受信手順。これは Record dataHolder およびプラットフォームオブジェクト value を取る

dataHolder 内のデータを受け取り、それを使用して value を適切に設定する一連の手順。value は、対象となるプラットフォームオブジェクト型の新たに作成されたインスタンスであり、その内部データはまだ何も設定されていない。それを設定するのがこれらの手順の役割である。

転送を受信できない場合、これらの手順は例外を投げてもよい。

これらの手順によってどのデータを転送するかは、個々のプラットフォームオブジェクトの定義に委ねられる。通常、これらの手順は非常に対称的である。

[Transferable] 拡張属性は引数を取ってはならず、インターフェイスにのみ出現しなければならない。 1 つのインターフェイスに複数回出現してはならない。

指定されたプラットフォームオブジェクトについて、転送処理中に考慮されるのは、そのオブジェクトの主要インターフェイスだけである。したがって、インターフェイスの定義に継承が関係する場合、継承チェーン内で [Transferable] が注釈された各インターフェイスは、継承したインターフェイスに由来する重要なデータも考慮に入れた、独立した転送手順および転送受信手順を定義する必要がある。

プラットフォームオブジェクトであり、転送可能なオブジェクトであるものは、 [[Detached]] 内部スロットを持つ。これは、プラットフォームオブジェクトが一度転送された後、再度転送されないことを保証するために使用される。

JavaScript 仕様で定義されるオブジェクトは、 StructuredSerializeWithTransfer 抽象演算によって直接処理される。

2.7.3 StructuredSerializeInternal ( `value`, `forStorage` [ , `memory` ] )

StructuredSerializeInternal 抽象演算は、 JavaScript 値 value を入力として受け取り、それをレルムに依存しない形式へシリアライズする。ここでは、その形式を Recordとして表す。このシリアライズ済み形式には、後で異なるレルム内の新しい JavaScript 値へデシリアライズするために必要なすべての情報が含まれる。

この処理は、例えばシリアライズ不可能なオブジェクトをシリアライズしようとした場合に、例外を投げることがある。

memory が指定されていない場合、memory を空のマップとする。

memory マップの目的は、オブジェクトを二重にシリアライズしないことである。これにより、グラフ内の循環および重複オブジェクトの同一性が保持される。
memory[value] が存在する場合、 memory[value] を返す。
deep を false とする。
value が undefined、null、 Boolean、 Number、 BigInt、または Stringである場合、 { [[Type]]: "primitive", [[Value]]: value } を返す。
value が Symbol である場合、 "DataCloneError" DOMException を投げる。
serialized を未初期化の値とする。
value が [[BooleanData]] 内部スロットを持つ場合、 serialized を { [[Type]]: "Boolean", [[BooleanData]]: value.[[BooleanData]] } に設定する。
それ以外で、value が [[NumberData]] 内部スロットを持つ場合、 serialized を { [[Type]]: "Number", [[NumberData]]: value.[[NumberData]] } に設定する。
それ以外で、value が [[BigIntData]] 内部スロットを持つ場合、serialized を { [[Type]]: "BigInt", [[BigIntData]]: value.[[BigIntData]] } に設定する。
それ以外で、value が [[StringData]] 内部スロットを持つ場合、 serialized を { [[Type]]: "String", [[StringData]]: value.[[StringData]] } に設定する。
それ以外で、value が [[DateValue]] 内部スロットを持つ場合、 serialized を { [[Type]]: "Date", [[DateValue]]: value.[[DateValue]] } に設定する。
それ以外で、value が [[RegExpMatcher]] 内部スロットを持つ場合、 serialized を { [[Type]]: "RegExp", [[RegExpMatcher]]: value.[[RegExpMatcher]], [[OriginalSource]]: value.[[OriginalSource]], [[OriginalFlags]]: value.[[OriginalFlags]] } に設定する。
それ以外で、value が [[ArrayBufferData]] 内部スロットを持つ場合：
1. IsSharedArrayBuffer(value) が true である場合：
  1. 現在の設定オブジェクトのクロスオリジン分離機能が false である場合、 "DataCloneError" DOMException を投げる。
    
    この検査は、デシリアライズ時ではなくシリアライズ時にのみ必要である。これは、クロスオリジン分離機能は時間の経過によって変化できず、SharedArrayBuffer はエージェントクラスターを離れられないためである。
  2. forStorage が true である場合、 "DataCloneError" DOMException を投げる。
  3. value が [[ArrayBufferMaxByteLength]] 内部スロットを持つ場合、 serialized を { [[Type]]: "GrowableSharedArrayBuffer", [[ArrayBufferData]]: value.[[ArrayBufferData]], [[ArrayBufferByteLengthData]]: value.[[ArrayBufferByteLengthData]], [[ArrayBufferMaxByteLength]]: value.[[ArrayBufferMaxByteLength]], [[AgentCluster]]: 周囲のエージェントのエージェントクラスター } に設定する。
  4. それ以外の場合、serialized を { [[Type]]: "SharedArrayBuffer", [[ArrayBufferData]]: value.[[ArrayBufferData]], [[ArrayBufferByteLength]]: value.[[ArrayBufferByteLength]], [[AgentCluster]]: 周囲のエージェントのエージェントクラスター } に設定する。
2. それ以外の場合：
  1. IsDetachedBuffer(value) が true である場合、 "DataCloneError" DOMException を投げる。
  2. size を value.[[ArrayBufferByteLength]] とする。
  3. dataCopy を ? CreateByteDataBlock(size) とする。
    
    割り当てに失敗した場合、これは RangeError 例外を投げることがある。
  4. CopyDataBlockBytes(dataCopy, 0, value.[[ArrayBufferData]], 0, size) を実行する。
  5. value が [[ArrayBufferMaxByteLength]] 内部スロットを持つ場合、 serialized を { [[Type]]: "ResizableArrayBuffer", [[ArrayBufferData]]: dataCopy, [[ArrayBufferByteLength]]: size, [[ArrayBufferMaxByteLength]]: value.[[ArrayBufferMaxByteLength]] } に設定する。
  6. それ以外の場合、serialized を { [[Type]]: "ArrayBuffer", [[ArrayBufferData]]: dataCopy, [[ArrayBufferByteLength]]: size } に設定する。
それ以外で、value が [[ViewedArrayBuffer]] 内部スロットを持つ場合：
1. IsArrayBufferViewOutOfBounds(value) が true である場合、 "DataCloneError" DOMException を投げる。
2. buffer を、value の [[ViewedArrayBuffer]] 内部スロットの値とする。
3. bufferSerialized を ? StructuredSerializeInternal(buffer, forStorage, memory) とする。
4. 表明：bufferSerialized.[[Type]] は "ArrayBuffer"、 "ResizableArrayBuffer"、"SharedArrayBuffer"、または "GrowableSharedArrayBuffer" である。
5. value が [[DataView]] 内部スロットを持つ場合、 serialized を { [[Type]]: "ArrayBufferView", [[Constructor]]: "DataView", [[ArrayBufferSerialized]]: bufferSerialized, [[ByteLength]]: value.[[ByteLength]], [[ByteOffset]]: value.[[ByteOffset]] } に設定する。
6. それ以外の場合：
  1. 表明：value は [[TypedArrayName]] 内部スロットを持つ。
  2. serialized を { [[Type]]: "ArrayBufferView", [[Constructor]]: value.[[TypedArrayName]], [[ArrayBufferSerialized]]: bufferSerialized, [[ByteLength]]: value.[[ByteLength]], [[ByteOffset]]: value.[[ByteOffset]], [[ArrayLength]]: value.[[ArrayLength]] } に設定する。
それ以外で、value が [[MapData]] 内部スロットを持つ場合：
1. serialized を { [[Type]]: "Map", [[MapData]]: 新しい空の List } に設定する。
2. deep を true に設定する。
それ以外で、value が [[SetData]] 内部スロットを持つ場合：
1. serialized を { [[Type]]: "Set", [[SetData]]: 新しい空の List } に設定する。
2. deep を true に設定する。
それ以外で、value が [[ErrorData]] 内部スロットを持ち、かつ value がプラットフォームオブジェクトでない場合：
1. name を ? Get(value, "name") とする。
2. name が "Error"、"EvalError"、"RangeError"、"ReferenceError"、 "SyntaxError"、"TypeError"、または "URIError" のいずれでもない場合、 name を "Error" に設定する。
3. valueMessageDesc を ? value.[[GetOwnProperty]]("message") とする。
4. IsDataDescriptor(valueMessageDesc) が false の場合、 message を undefined とし、それ以外の場合は ? ToString(valueMessageDesc.[[Value]]) とする。
5. stack を、value.[[Stack]] を表す実装定義の文字列とする。 [JSERRORSTACKACCESSOR] [JSERRORSTACKS]
6. serialized を { [[Type]]: "Error", [[Name]]: name, [[Message]]: message, [[Stack]]: stack } に設定する。
7. ユーザーエージェントは、まだ規定されていない重要な付随データがある場合、そのシリアライズ済み表現を serialized に付加するべきである。
それ以外で、value が Array エキゾチックオブジェクトである場合：
1. valueLenDescriptor を ? OrdinaryGetOwnProperty(value, "length") とする。
2. valueLen を valueLenDescriptor.[[Value]] とする。
3. serialized を { [[Type]]: "Array", [[Length]]: valueLen, [[Properties]]: 新しい空の List } に設定する。
4. deep を true に設定する。
それ以外で、value がプラットフォームオブジェクトであり、かつシリアライズ可能なオブジェクトである場合：
1. value が、値が true である [[Detached]] 内部スロットを持つ場合、 "DataCloneError" DOMException を投げる。
2. typeString を、value の主要インターフェイスの識別子とする。
3. serialized を { [[Type]]: typeString } に設定する。
4. deep を true に設定する。
それ以外で、value がプラットフォームオブジェクトである場合、 "DataCloneError" DOMException を投げる。
それ以外で、 IsCallable(value) が true である場合、 "DataCloneError" DOMException を投げる。
それ以外で、value が [[Prototype]]、[[Extensible]]、または [[PrivateElements]] 以外の内部スロットを持つ場合、 "DataCloneError" DOMException を投げる。

例えば、[[PromiseState]] または [[WeakMapData]] 内部スロット。
それ以外で、value がエキゾチックオブジェクトであり、かつ value が、いずれかのレルムに関連付けられた %Object.prototype% 組み込みオブジェクトでない場合、 "DataCloneError" DOMException を投げる。

例えば、プロキシオブジェクト。
それ以外の場合：
1. serialized を { [[Type]]: "Object", [[Properties]]: 新しい空の List } に設定する。
2. deep を true に設定する。
%Object.prototype% は、この手順および後続の手順によって処理されることになる。最終的に、そのエキゾチック性は無視され、デシリアライズ後の結果は空のオブジェクトとなる（不変プロトタイプエキゾチックオブジェクトではない）。
memory[value] を serialized に設定する。
deep が true である場合：
1. value が [[MapData]] 内部スロットを持つ場合：
  1. copiedList を新しい空の Listとする。
  2. value.[[MapData]] の Record { [[Key]], [[Value]] } entry ごとに：
    1. copiedEntry を新しい Record { [[Key]]: entry.[[Key]], [[Value]]: entry.[[Value]] } とする。
    2. copiedEntry.[[Key]] が特別な値 empty でない場合、 copiedEntry を copiedList に付加する。
  3. copiedList の Record { [[Key]], [[Value]] } entry ごとに：
    1. serializedKey を ? StructuredSerializeInternal(entry.[[Key]], forStorage, memory) とする。
    2. serializedValue を ? StructuredSerializeInternal(entry.[[Value]], forStorage, memory) とする。
    3. { [[Key]]: serializedKey, [[Value]]: serializedValue } を serialized.[[MapData]] に付加する。
2. それ以外で、value が [[SetData]] 内部スロットを持つ場合：
  1. copiedList を新しい空の Listとする。
  2. value.[[SetData]] の各 entry について反復する：
    1. entry が特別な値 empty でない場合、 entry を copiedList に付加する。
  3. copiedList の各 entry について反復する：
    1. serializedEntry を ? StructuredSerializeInternal(entry, forStorage, memory) とする。
    2. serializedEntry を serialized.[[SetData]] に付加する。
3. それ以外で、value がプラットフォームオブジェクトであり、かつシリアライズ可能なオブジェクトである場合、 value、serialized、および forStorage を指定して、 value の主要インターフェイスのシリアライズ手順を実行する。
  
  シリアライズ手順では、サブシリアライズを実行する必要がある場合がある。これは値 subValue を入力として受け取り、 StructuredSerializeInternal(subValue, forStorage, memory) を返す操作である。（言い換えると、サブシリアライズは、この呼び出し内で一貫するように特殊化された StructuredSerializeInternalである。）
4. それ以外の場合、! EnumerableOwnProperties(value, key) 内の各 key について：
  1. ! HasOwnProperty(value, key) が true である場合：
    1. inputValue を ? value.[[Get]](key, value) とする。
    2. outputValue を ? StructuredSerializeInternal(inputValue, forStorage, memory) とする。
    3. { [[Key]]: key, [[Value]]: outputValue } を serialized.[[Properties]] に付加する。
serialized を返す。

StructuredSerializeInternal が生成する Recordには、循環参照を作る別のレコードへの「ポインター」が含まれることがある点を理解することが重要である。例えば、次の JavaScript オブジェクトを StructuredSerializeInternal に渡す場合：

const o = {};
o.myself = o;

次の結果が生成される：

{
  [[Type]]: "Object",
  [[Properties]]: «
    {
      [[Key]]: "myself",
      [[Value]]: <この構造全体へのポインター>
    }
  »
}

2.7.4 StructuredSerialize ( `value` )

? StructuredSerializeInternal(value, false) を返す。

2.7.5 StructuredSerializeForStorage ( `value` )

? StructuredSerializeInternal(value, true) を返す。

2.7.6 StructuredDeserialize ( `serialized`, `targetRealm` [ , `memory` ] )

StructuredDeserialize 抽象演算は、以前に StructuredSerialize または StructuredSerializeForStorage によって生成された Record serialized を入力として受け取り、それを targetRealm 内に作成される新しい JavaScript 値へデシリアライズする。

この処理は、例えば新しいオブジェクト、特に ArrayBuffer オブジェクトのためのメモリーを割り当てようとした場合に、例外を投げることがある。

memory が指定されていない場合、memory を空のマップとする。

memory マップの目的は、オブジェクトを二重にデシリアライズしないことである。これにより、グラフ内の循環および重複オブジェクトの同一性が保持される。
memory[serialized] が存在する場合、 memory[serialized] を返す。
deep を false とする。
value を未初期化の値とする。
serialized.[[Type]] が "primitive" である場合、 value を serialized.[[Value]] に設定する。
それ以外で、serialized.[[Type]] が "Boolean" である場合、 value を、[[BooleanData]] 内部スロットの値が serialized.[[BooleanData]] である、targetRealm 内の新しい Boolean オブジェクトに設定する。
それ以外で、serialized.[[Type]] が "Number" である場合、 value を、[[NumberData]] 内部スロットの値が serialized.[[NumberData]] である、targetRealm 内の新しい Number オブジェクトに設定する。
それ以外で、serialized.[[Type]] が "BigInt" である場合、 value を、[[BigIntData]] 内部スロットの値が serialized.[[BigIntData]] である、targetRealm 内の新しい BigInt オブジェクトに設定する。
それ以外で、serialized.[[Type]] が "String" である場合、 value を、[[StringData]] 内部スロットの値が serialized.[[StringData]] である、targetRealm 内の新しい String オブジェクトに設定する。
それ以外で、serialized.[[Type]] が "Date" である場合、 value を、[[DateValue]] 内部スロットの値が serialized.[[DateValue]] である、targetRealm 内の新しい Date オブジェクトに設定する。
それ以外で、serialized.[[Type]] が "RegExp" である場合、 value を、[[RegExpMatcher]] 内部スロットの値が serialized.[[RegExpMatcher]]、[[OriginalSource]] 内部スロットの値が serialized.[[OriginalSource]]、[[OriginalFlags]] 内部スロットの値が serialized.[[OriginalFlags]] である、targetRealm 内の新しい RegExp オブジェクトに設定する。
それ以外で、serialized.[[Type]] が "SharedArrayBuffer" である場合：
1. targetRealm に対応するエージェントクラスターが serialized.[[AgentCluster]] でない場合、 "DataCloneError" DOMException を投げる。
2. それ以外の場合、value を、[[ArrayBufferData]] 内部スロットの値が serialized.[[ArrayBufferData]] であり、[[ArrayBufferByteLength]] 内部スロットの値が serialized.[[ArrayBufferByteLength]] である、 targetRealm 内の新しい SharedArrayBuffer オブジェクトに設定する。
それ以外で、serialized.[[Type]] が "GrowableSharedArrayBuffer" である場合：
1. targetRealm に対応するエージェントクラスターが serialized.[[AgentCluster]] でない場合、 "DataCloneError" DOMException を投げる。
2. それ以外の場合、value を、[[ArrayBufferData]] 内部スロットの値が serialized.[[ArrayBufferData]]、[[ArrayBufferByteLengthData]] 内部スロットの値が serialized.[[ArrayBufferByteLengthData]]、 [[ArrayBufferMaxByteLength]] 内部スロットの値が serialized.[[ArrayBufferMaxByteLength]] である、 targetRealm 内の新しい SharedArrayBuffer オブジェクトに設定する。
それ以外で、serialized.[[Type]] が "ArrayBuffer" である場合、 value を、[[ArrayBufferData]] 内部スロットの値が serialized.[[ArrayBufferData]] であり、[[ArrayBufferByteLength]] 内部スロットの値が serialized.[[ArrayBufferByteLength]] である、 targetRealm 内の新しい ArrayBuffer オブジェクトに設定する。

これが例外を投げる場合、その例外を捕捉し、 "DataCloneError" DOMException を投げる。

この手順は、そのような ArrayBuffer オブジェクトを作成するために利用可能なメモリーが十分にない場合、例外を投げることがある。
それ以外で、serialized.[[Type]] が "ResizableArrayBuffer" である場合、 value を、[[ArrayBufferData]] 内部スロットの値が serialized.[[ArrayBufferData]]、[[ArrayBufferByteLength]] 内部スロットの値が serialized.[[ArrayBufferByteLength]]、 [[ArrayBufferMaxByteLength]] 内部スロットの値が serialized.[[ArrayBufferMaxByteLength]] である、 targetRealm 内の新しい ArrayBuffer オブジェクトに設定する。

これが例外を投げる場合、その例外を捕捉し、 "DataCloneError" DOMException を投げる。

この手順は、そのような ArrayBuffer オブジェクトを作成するために利用可能なメモリーが十分にない場合、例外を投げることがある。
それ以外で、serialized.[[Type]] が "ArrayBufferView" である場合：
1. deserializedArrayBuffer を ? StructuredDeserialize(serialized.[[ArrayBufferSerialized]], targetRealm, memory) とする。
2. serialized.[[Constructor]] が "DataView" である場合、 value を、[[ViewedArrayBuffer]] 内部スロットの値が deserializedArrayBuffer、[[ByteLength]] 内部スロットの値が serialized.[[ByteLength]]、[[ByteOffset]] 内部スロットの値が serialized.[[ByteOffset]] である、targetRealm 内の新しい DataView オブジェクトに設定する。
3. それ以外の場合、value を、serialized.[[Constructor]] によって指定されたコンストラクターを使用する、targetRealm 内の新しい型付き配列オブジェクトに設定する。その [[ViewedArrayBuffer]] 内部スロットの値は deserializedArrayBuffer、[[TypedArrayName]] 内部スロットの値は serialized.[[Constructor]]、[[ByteLength]] 内部スロットの値は serialized.[[ByteLength]]、[[ByteOffset]] 内部スロットの値は serialized.[[ByteOffset]]、[[ArrayLength]] 内部スロットの値は serialized.[[ArrayLength]] である。
それ以外で、serialized.[[Type]] が "Map" である場合：
1. value を、[[MapData]] 内部スロットの値が新しい空の Listである、 targetRealm 内の新しい Map オブジェクトに設定する。
2. deep を true に設定する。
それ以外で、serialized.[[Type]] が "Set" である場合：
1. value を、[[SetData]] 内部スロットの値が新しい空の Listである、 targetRealm 内の新しい Set オブジェクトに設定する。
2. deep を true に設定する。
それ以外で、serialized.[[Type]] が "Array" である場合：
1. outputProto を targetRealm.[[Intrinsics]].[[%Array.prototype%]] とする。
2. value を ! ArrayCreate(serialized.[[Length]], outputProto) に設定する。
3. deep を true に設定する。
それ以外で、serialized.[[Type]] が "Object" である場合：
1. value を targetRealm 内の新しい Object に設定する。
2. deep を true に設定する。
それ以外で、serialized.[[Type]] が "Error" である場合：
1. prototype を %Error.prototype% とする。
2. serialized.[[Name]] が "EvalError" である場合、 prototype を %EvalError.prototype% に設定する。
3. serialized.[[Name]] が "RangeError" である場合、 prototype を %RangeError.prototype% に設定する。
4. serialized.[[Name]] が "ReferenceError" である場合、 prototype を %ReferenceError.prototype% に設定する。
5. serialized.[[Name]] が "SyntaxError" である場合、 prototype を %SyntaxError.prototype% に設定する。
6. serialized.[[Name]] が "TypeError" である場合、 prototype を %TypeError.prototype% に設定する。
7. serialized.[[Name]] が "URIError" である場合、 prototype を %URIError.prototype% に設定する。
8. message を serialized.[[Message]] とする。
9. value を OrdinaryObjectCreate(prototype, « [[ErrorData]], [[Stack]] ») に設定する。
10. messageDesc を PropertyDescriptor { [[Value]]: message, [[Writable]]: true, [[Enumerable]]: false, [[Configurable]]: true } とする。
11. message が undefined でない場合、! OrdinaryDefineOwnProperty(value, "message", messageDesc) を実行する。
12. value.[[Stack]] を serialized.[[Stack]] に設定する。
13. serialized に付加された重要な付随データがある場合、それをデシリアライズして value に付加するべきである。
それ以外の場合：
1. interfaceName を serialized.[[Type]] とする。
2. interfaceName によって識別されるインターフェイスが targetRealm で公開されていない場合、 "DataCloneError" DOMException を投げる。
3. value を、targetRealm 内に作成された、 interfaceName によって識別されるインターフェイスの新しいインスタンスに設定する。
4. deep を true に設定する。
memory[serialized] を value に設定する。
deep が true である場合：
1. serialized.[[Type]] が "Map" である場合：
  1. serialized.[[MapData]] の Record { [[Key]], [[Value]] } entry ごとに：
    1. deserializedKey を ? StructuredDeserialize(entry.[[Key]], targetRealm, memory) とする。
    2. deserializedValue を ? StructuredDeserialize(entry.[[Value]], targetRealm, memory) とする。
    3. { [[Key]]: deserializedKey, [[Value]]: deserializedValue } を value.[[MapData]] に付加する。
2. それ以外で、serialized.[[Type]] が "Set" である場合：
  1. serialized.[[SetData]] の各 entry について反復する：
    1. deserializedEntry を ? StructuredDeserialize(entry, targetRealm, memory) とする。
    2. deserializedEntry を value.[[SetData]] に付加する。
3. それ以外で、serialized.[[Type]] が "Array" または "Object" である場合：
  1. serialized.[[Properties]] の Record { [[Key]], [[Value]] } entry ごとに：
    1. deserializedValue を ? StructuredDeserialize(entry.[[Value]], targetRealm, memory) とする。
    2. result を ! CreateDataProperty(value, entry.[[Key]], deserializedValue) とする。
    3. 表明：result は true である。
4. それ以外の場合：
  1. serialized、value、および targetRealm を指定して、serialized.[[Type]] によって識別されるインターフェイスの適切なデシリアライズ手順を実行する。
    
    デシリアライズ手順では、サブデシリアライズを実行する必要がある場合がある。これは、以前にシリアライズされた Record subSerialized を入力として受け取り、 StructuredDeserialize(subSerialized, targetRealm, memory) を返す操作である。（言い換えると、サブデシリアライズは、この呼び出し内で一貫するように特殊化された StructuredDeserializeである。）
value を返す。

2.7.7 StructuredSerializeWithTransfer ( `value`, `transferList` )

memory を空のマップとする。

StructuredSerializeInternal による通常の使用方法に加えて、このアルゴリズムでは memory は、 StructuredSerializeInternal が transferList 内の項目を無視し、代わりにここで独自に処理できるようにするためにも使用される。
各 transferList の transferable について：
1. transferable が [[ArrayBufferData]] 内部スロットも [[Detached]] 内部スロットも持たない場合、 "DataCloneError" DOMException を投げる。
2. transferable が [[ArrayBufferData]] 内部スロットを持ち、 IsSharedArrayBuffer(transferable) が true である場合、 "DataCloneError" DOMException を投げる。
3. memory[transferable] が存在する場合、 "DataCloneError" DOMException を投げる。
4. 設定する memory[transferable] を { [[Type]]: 未初期化の値 } に。
  
  転送には副作用があり、 StructuredSerializeInternal が先に例外を投げられる必要があるため、transferable はまだ転送されない。
serialized を ? StructuredSerializeInternal(value, false, memory) とする。
transferDataHolders を新しい空の List とする。
各 transferList の transferable について：
1. transferable が [[ArrayBufferData]] 内部スロットを持ち、 IsDetachedBuffer(transferable) が true である場合、 "DataCloneError" DOMException を投げる。
2. transferable が [[Detached]] 内部スロットを持ち、 transferable.[[Detached]] が true である場合、 "DataCloneError" DOMException を投げる。
3. dataHolder を memory[transferable] とする。
4. transferable が [[ArrayBufferData]] 内部スロットを持つ場合：
  1. transferable が [[ArrayBufferMaxByteLength]] 内部スロットを持つ場合：
    1. dataHolder.[[Type]] を "ResizableArrayBuffer" に設定する。
    2. dataHolder.[[ArrayBufferData]] を transferable.[[ArrayBufferData]] に設定する。
    3. dataHolder.[[ArrayBufferByteLength]] を transferable.[[ArrayBufferByteLength]] に設定する。
    4. dataHolder.[[ArrayBufferMaxByteLength]] を transferable.[[ArrayBufferMaxByteLength]] に設定する。
  2. それ以外の場合：
    1. dataHolder.[[Type]] を "ArrayBuffer" に設定する。
    2. dataHolder.[[ArrayBufferData]] を transferable.[[ArrayBufferData]] に設定する。
    3. dataHolder.[[ArrayBufferByteLength]] を transferable.[[ArrayBufferByteLength]] に設定する。
  3. ? DetachArrayBuffer(transferable) を実行する。
    
    仕様は、[[ArrayBufferDetachKey]] 内部スロットを使用して ArrayBuffer が切り離されるのを防ぐことができる。これは、例えば WebAssembly JavaScript Interface で使用されている。[WASMJS]
5. それ以外の場合：
  1. 表明：transferable はプラットフォームオブジェクトであり、転送可能なオブジェクトである。
  2. interfaceName を、transferable の主要インターフェイスの識別子とする。
  3. dataHolder.[[Type]] を interfaceName に設定する。
  4. transferable および dataHolder を指定して、 interfaceName によって識別されるインターフェイスの適切な転送手順を実行する。
  5. transferable.[[Detached]] を true に設定する。
6. 付加する dataHolder を transferDataHolders に。
{ [[Serialized]]: serialized, [[TransferDataHolders]]: transferDataHolders } を返す。

2.7.8 StructuredDeserializeWithTransfer ( `serializeWithTransferResult`, `targetRealm` )

memory を空のマップとする。

StructuredSerializeWithTransfer と同様に、 StructuredDeserialize による通常の使用方法に加えて、このアルゴリズムでは memory は、 StructuredDeserialize が serializeWithTransferResult.[[TransferDataHolders]] 内の項目を無視し、代わりにここで独自に処理できるようにするためにも使用される。
transferredValues を新しい空の List とする。
各 serializeWithTransferResult.[[TransferDataHolders]] の transferDataHolder について：
1. value を未初期化の値とする。
2. transferDataHolder.[[Type]] が "ArrayBuffer" である場合、value を、 [[ArrayBufferData]] 内部スロットの値が transferDataHolder.[[ArrayBufferData]] であり、[[ArrayBufferByteLength]] 内部スロットの値が transferDataHolder.[[ArrayBufferByteLength]] である、 targetRealm 内の新しい ArrayBuffer オブジェクトに設定する。
  
  [[ArrayBufferData]] が占有していた元のメモリーにデシリアライズ中もアクセスできる場合、この手順が例外を投げる可能性は低い。新しいメモリーを割り当てる必要はなく、 [[ArrayBufferData]] が占有するメモリーが新しい ArrayBuffer へ単に転送されるためである。例えば、ソースレルムとターゲットレルムの両方が同じプロセス内にある場合が該当し得る。
3. それ以外で、transferDataHolder.[[Type]] が "ResizableArrayBuffer" である場合、 value を、targetRealm 内の新しい ArrayBuffer オブジェクトに設定する。その [[ArrayBufferData]] 内部スロットの値は transferDataHolder.[[ArrayBufferData]]、 [[ArrayBufferByteLength]] 内部スロットの値は transferDataHolder.[[ArrayBufferByteLength]]、さらに [[ArrayBufferMaxByteLength]] 内部スロットの値は transferDataHolder.[[ArrayBufferMaxByteLength]] である。
  
  前の手順と同じ理由により、この手順も例外を投げる可能性は低い。
4. それ以外の場合：
  1. interfaceName を transferDataHolder.[[Type]] とする。
  2. interfaceName によって識別されるインターフェイスが targetRealm で公開されていない場合、"DataCloneError" DOMException を投げる。
  3. value を、targetRealm 内に作成された、 interfaceName によって識別されるインターフェイスの新しいインスタンスに設定する。
  4. transferDataHolder および value を指定して、 interfaceName によって識別されるインターフェイスの適切な転送受信手順を実行する。
5. 設定する memory[transferDataHolder] を value に。
6. 付加する value を transferredValues に。
deserialized を ? StructuredDeserialize(serializeWithTransferResult.[[Serialized]], targetRealm, memory) とする。
{ [[Deserialized]]: deserialized, [[TransferredValues]]: transferredValues } を返す。

2.7.9 他の仕様からのシリアライズおよび転送の実行

他の仕様は、ここで定義されている抽象操作を使用できる。以下では、各抽象操作が通常どのような場合に有用であるかについて、例とともにいくつかの指針を示す。

StructuredSerializeWithTransfer

StructuredDeserializeWithTransfer

転送リストを使用して値を別のレルムにクローンするが、ターゲットレルムが事前には分からない場合。この場合、シリアライズ手順は直ちに実行でき、デシリアライズ手順はターゲットレルムが判明するまで遅延できる。

messagePort.postMessage() は、この一対の抽象操作を使用する。これは、宛先レルムが、 MessagePort が移送されるまで判明しないためである。

StructuredSerialize

StructuredSerializeForStorage

StructuredDeserialize

指定された値について、レルムに依存しないスナップショットを作成し、それを無期限に保存した後、後で JavaScript 値として、場合によっては複数回実体化する場合。

StructuredSerializeForStorage は、シリアライズ結果をレルム間で渡すのではなく、永続的な方法で保存することが想定される場合に使用できる。共有メモリーを保存することには意味がないため、SharedArrayBuffer オブジェクトをシリアライズしようとすると例外を投げる。同様に、独自のシリアライズ手順を持つプラットフォームオブジェクトが指定され、 forStorage 引数が true である場合、例外を投げたり、異なる動作をしたりする可能性がある。

history.pushState() および history.replaceState() は、 StructuredSerializeForStorage を作者によって提供された状態オブジェクトに使用し、それらを適切なシリアライズ済み状態として、セッション履歴エントリーに保存する。その後、 StructuredDeserialize が使用され、history.state プロパティが、最初に提供された状態オブジェクトのクローンを返せるようにする。

broadcastChannel.postMessage() は、 StructuredSerialize をその入力に使用し、その結果に対して StructuredDeserialize を複数回使用して、ブロードキャスト先ごとに新しいクローンを生成する。複数の宛先がある場合、転送は意味をなさないことに注意する。

JavaScript 値をファイルシステムに永続化する API も、 StructuredSerializeForStorage をその入力に使用し、StructuredDeserialize をその出力に使用する。

一般に、呼び出し箇所は JavaScript 値の代わりに Web IDL 値を渡すことができる。これは、これらのアルゴリズムを呼び出す前に JavaScript 値への暗黙的な変換を実行するものと理解される。

作者コードがユーザーエージェントのメソッドを同期的に呼び出した結果として呼び出されるのではない呼び出し箇所は、任意のオブジェクトに対してこれらを実行する場合、スクリプトを実行する準備を行い、コールバックを実行する準備を行ってから、StructuredSerialize、 StructuredSerializeForStorage、または StructuredSerializeWithTransfer 抽象操作を呼び出すよう注意しなければならない。これは、シリアライズ処理が最終的なディープシリアライズ手順の一部として作者定義のアクセサーを呼び出す可能性があり、これらのアクセサーが、エントリーおよびインカンベントの概念が適切に設定されていることに依存する操作を呼び出す可能性があるため、必要となる。

window.postMessage() は、その引数に StructuredSerializeWithTransfer を実行するが、アルゴリズムの同期部分の内部で直ちに実行するよう注意している。したがって、スクリプトを実行する準備を行うことや、コールバックを実行する準備を行うことなく、このアルゴリズムを使用できる。

対照的に、作者によって提供されたオブジェクトを定期的にシリアライズするために、StructuredSerialize を使用し、イベントループ上のタスクから直接実行する仮想的な API は、事前に適切な準備を行うことを保証する必要がある。現時点では、プラットフォーム上にそのような API は存在しないと認識している。通常は、作者コードの同期的な結果として、あらかじめシリアライズを実行する方が簡単である。

2.7.10 構造化クローン API

result = self.structuredClone(value[, { transfer }])

入力値を受け取り、構造化クローンアルゴリズムを実行してディープコピーを返す。転送可能なオブジェクトとして transfer 配列に列挙されたものは、単にクローンされるのではなく転送される。これは、それらが入力値では使用できなくなることを意味する。

入力値のいずれかの部分がシリアライズ可能でない場合、"DataCloneError" DOMException を投げる。

structuredClone

現在のすべてのエンジンでサポートされている。

Firefox94+Safari15.4+Chrome98+

Opera?Edge98+

Edge (Legacy)?Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

structuredClone(value, options) メソッドの手順は次のとおりである：

serialized を ? StructuredSerializeWithTransfer(value, options["transfer"]) とする。
deserializeRecord を ? StructuredDeserializeWithTransfer(serialized, this の関連レルム) とする。
deserializeRecord.[[Deserialized]] を返す。

3 HTML 文書のセマンティクス、構造、および API

3.1 文書

HTML UA 内のすべての XML および HTML 文書は、Document オブジェクトによって表される。 [DOM]

Document オブジェクトの URL は、 DOM で定義されている。これは、Document オブジェクトの作成時に最初に設定されるが、 Document オブジェクトの存続期間中に変更される可能性がある。例えば、ユーザーがページ上のフラグメントへナビゲートしたとき、および pushState() メソッドが新しい URL を指定して呼び出されたときに変更される。[DOM]

対話型ユーザーエージェントは通常、そのユーザーインターフェイスに Document オブジェクトの URL を公開する。これは、サイトが別のサイトになりすまそうとしているかどうかをユーザーが判断するための主要な仕組みである。

Document オブジェクトのオリジンは、 DOM で定義されている。これは、Document オブジェクトの作成時に最初に設定され、 document.domain を設定した場合にのみ、 Document の存続期間中に変更される可能性がある。Document のオリジンは、そのオリジンと、その URL のものとで異なる場合がある。例えば、子ナビゲーション可能が作成されると、そのアクティブ文書のオリジンは、その親のアクティブ文書のオリジンから継承される。ただし、そのアクティブ文書の URL は about:blank である。[DOM]

Document が、スクリプトによって createDocument() または createHTMLDocument() メソッドを使用して作成された場合、その Document は直ちに読み込み後タスクの準備が整う。

文書のリファラーは、Document の作成時に設定できる文字列（URL を表す）である。明示的に設定されていない場合、その値は空文字列である。

3.1.1 `Document` オブジェクト

Document

現在のすべてのエンジンでサポートされている。

Firefox1+Safari1+Chrome1+

Opera3+Edge79+

Edge (Legacy)12+Internet Explorer4+

Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android10.1+

DOM は Document インターフェイスを定義しており、この仕様はそれを大幅に拡張する。

enum DocumentReadyState { "loading", "interactive", "complete" };
enum DocumentVisibilityState { "visible", "hidden" };
typedef (HTMLScriptElement or SVGScriptElement) HTMLOrSVGScriptElement;

[LegacyOverrideBuiltIns]
partial interface Document {
  static Document parseHTMLUnsafe((TrustedHTML or DOMString) html, optional ParseHTMLUnsafeOptions options = {});
  static Document parseHTML(DOMString html, optional SetHTMLOptions options = {});

  // resource metadata management
  [PutForwards=href, LegacyUnforgeable] readonly attribute Location? location;
  attribute USVString domain;
  readonly attribute USVString referrer;
  attribute USVString cookie;
  readonly attribute DOMString lastModified;
  readonly attribute DocumentReadyState readyState;

  // DOM tree accessors
  getter object (DOMString name);
  [CEReactions] attribute DOMString title;
  [CEReactions] attribute DOMString dir;
  [CEReactions] attribute HTMLElement? body;
  readonly attribute HTMLHeadElement? head;
  [SameObject] readonly attribute HTMLCollection images;
  [SameObject] readonly attribute HTMLCollection embeds;
  [SameObject] readonly attribute HTMLCollection plugins;
  [SameObject] readonly attribute HTMLCollection links;
  [SameObject] readonly attribute HTMLCollection forms;
  [SameObject] readonly attribute HTMLCollection scripts;
  NodeList getElementsByName(DOMString elementName);
  readonly attribute HTMLOrSVGScriptElement? currentScript; // classic scripts in a document tree only

  // dynamic markup insertion
  [CEReactions] Document open(optional DOMString unused1, optional DOMString unused2); // both arguments are ignored
  WindowProxy? open(USVString url, DOMString name, DOMString features);
  [CEReactions] undefined close();
  [CEReactions] undefined write((TrustedHTML or DOMString)... text);
  [CEReactions] undefined writeln((TrustedHTML or DOMString)... text);

  // user interaction
  readonly attribute WindowProxy? defaultView;
  boolean hasFocus();
  [CEReactions] attribute DOMString designMode;
  [CEReactions] boolean execCommand(DOMString commandId, optional boolean showUI = false, optional DOMString value = "");
  boolean queryCommandEnabled(DOMString commandId);
  boolean queryCommandIndeterm(DOMString commandId);
  boolean queryCommandState(DOMString commandId);
  boolean queryCommandSupported(DOMString commandId);
  DOMString queryCommandValue(DOMString commandId);
  readonly attribute boolean hidden;
  readonly attribute DocumentVisibilityState visibilityState;

  // special event handler IDL attributes that only apply to Document objects
  [LegacyLenientThis] attribute EventHandler onreadystatechange;
  attribute EventHandler onvisibilitychange;

  // also has obsolete members
};
Document includes GlobalEventHandlers;

各 Document はポリシーコンテナー（ポリシーコンテナー）を持つ。これは最初、新しいポリシーコンテナーであり、Document に適用されるポリシーを含む。

各 Document は権限ポリシーを持つ。これは権限ポリシーであり、最初は空である。

各 Document はモジュールマップを持つ。これはモジュールマップであり、最初は空である。

各 Document はオープナーポリシーを持つ。これはオープナーポリシーであり、最初は新しいオープナーポリシーである。

各 Document は初期 about:blank であるかを持つ。これはブール値であり、最初は false である。

各 Document は WebDriver BiDi 用の読み込み中ナビゲーション ID を持つ。これはナビゲーション ID または null であり、最初は null である。

その名前が示すとおり、これは WebDriver BiDi 仕様とのインターフェイスに使用される。この仕様は、Document のライフサイクル初期に発生する特定の事象について、この Document を作成したナビゲーションが進行中のナビゲーションであったときに使用された元のナビゲーション IDと関連付ける形で通知される必要がある。最終的に、WebDriver BiDi が読み込み処理の完了を認識した後、これは再び null に設定される。[BIDI]

各 Document は about ベース URL を持つ。これは URL または null であり、最初は null である。

これは、スキームが "about:" である Document に対してのみ設定される。

各 Document は bfcache ブロック詳細を持つ。これは、集合であり、復元されなかった理由の詳細を含み、最初は空である。

各 Document は開いているダイアログのリストを持つ。これは、 dialog 要素のリストであり、最初は空である。

3.1.2 `DocumentOrShadowRoot` インターフェイス

DOM は DocumentOrShadowRoot ミックスインを定義しており、この仕様はそれを拡張する。

partial interface mixin DocumentOrShadowRoot {
  readonly attribute Element? activeElement;
};

3.1.3 祖先オリジン

Document オブジェクトは、関連付けられた内部祖先オリジンオブジェクトリストを持ち、最初は null である。

Document オブジェクト document とリファラーポリシー referrerPolicy が指定されたときの、内部祖先オリジンオブジェクトリスト作成手順は次のとおりである：

output を « » とする。
parentDoc を document のコンテナー文書とする。
parentDoc が null である場合、output を返す。
表明：parentDoc は完全にアクティブである。
ancestorOrigins を parentDoc の内部祖先オリジンオブジェクトリストとする。
container を document のノードナビゲーション可能のコンテナーとする。
masked を false とする。
referrerPolicy が "no-referrer" である場合、 masked を true に設定する。
それ以外で、referrerPolicy が "same-origin" であり、 parentDoc のオリジンが document のオリジンと同一オリジンでない場合、 masked を true に設定する。

混合コンテンツの検査により、セキュアコンテキストの環境内にある非セキュアコンテキストの環境が防止されるため、 "strict-origin"、"strict-origin-when-cross-origin"、 "no-referrer-when-downgrade" についてセキュアコンテキストを検査する必要はない。また、ここで公開されるのは最大でもオリジンであるため、 "origin" および "origin-when-cross-origin" の値も特別に扱う必要はない。
masked が true である場合、新しい不透明オリジンを output に付加する。
それ以外の場合、parentDoc のオリジンを output に付加する。
各 ancestorOrigins の ancestorOrigin について：
1. masked が true であり、ancestorOrigin が parentDoc のオリジンと同一オリジンである場合、新しい不透明オリジンを output に付加し、続行する。
2. ancestorOrigin を output に付加し、 masked を false に設定する。
  
  ここで masked を false に設定しても、それ以降のすべての祖先のオリジンが必ず公開されることを意味するわけではない。それらは、祖先文書がこれらの手順を実行した際に既にマスクされている可能性があり、その結果のリストは子文書が作成されるときの開始点として使用される（上記の手順 5 を参照）。
output を返す。

Document オブジェクトは、関連付けられた祖先オリジンリストを持ち、最初は null である。

Document オブジェクト document が指定されたときの、祖先オリジンリスト作成手順は次のとおりである：

ancestorOrigins を document の内部祖先オリジンオブジェクトリストとする。
表明：ancestorOrigins は null ではない。
output を « » とする。
各 ancestorOrigins の origin について：
1. origin のシリアライズを output に付加する。
関連付けられたリストが output である、新しい DOMStringList オブジェクトを返す。

URL が https://a.example/top であるトップレベル閲覧コンテキスト文書について考える：

<!doctype html>
<title>top</title>
<iframe referrerpolicy="no-referrer" src="https://a.example/child"></iframe>

子文書：

<!doctype html>
<title>child</title>
<iframe src="https://b.example/grandchild"></iframe>
<script>
 console.log([...location.ancestorOrigins]);
</script>

孫文書：

<!doctype html>
<title>grandchild</title>
<script>
 console.log([...location.ancestorOrigins]);
</script>

子の Document オブジェクトが作成されるとき、文書同士が同一オリジンであっても、その親のオリジンは iframe 要素の referrerpolicy 属性の値が "no-referrer" であるためマスクされる。記録される値は « "null" » である。

孫の Document オブジェクトが作成されるとき、子の Document オブジェクトの内部祖先オリジンオブジェクトリスト（単一の不透明オリジンを含む）が開始点として使用され、子のオリジンがリストに追加される。したがって、記録される値は « "https://a.example", "null" » である。

前の例において、トップ文書内の iframe 要素に referrerpolicy 属性がなく、代わりに子文書内の iframe 要素が referrerpolicy="no-referrer" を持つ場合を考える。

この場合、トップ文書のオリジンが、子の Document オブジェクトの内部祖先オリジンオブジェクトリストに追加される。記録される値は « "https://a.example" » である。

孫については、子のオリジンが不透明オリジンとしてマスクされる。トップ文書のオリジンは、子文書のオリジンと同一オリジンであるため、それもマスクされる。したがって、記録される値は « "null", "null" » である。

この例では、同一オリジンである子孫文書のオリジンがマスクされている場合でも、その間にクロスオリジン文書が存在するため、トップレベル文書のオリジンはマスクされないことを示す。

URL が https://a.example/top であるトップレベル
```
<iframe src="https://b.example/child"></iframe>
```
祖先オリジンリストに関連付けられたリストは « » である。
URL が https://b.example/child である子
```
<iframe src="https://a.example/grandchild"></iframe>
```
祖先オリジンリストに関連付けられたリストは « "https://a.example" » である。
URL が https://a.example/grandchild である孫
```
<iframe src="https://c.example/great-grandchild"
        referrerpolicy="no-referrer"></iframe>
```
祖先オリジンリストに関連付けられたリストは « "https://b.example", "https://a.example" » である。
URL が https://c.example/great-grandchild であるひ孫

祖先オリジンリストに関連付けられたリストは « "null", "https://b.example", "https://a.example" » である。トップレベルのオリジンはマスクされない。

前の例において、トップレベル文書の iframe も referrerpolicy="no-referrer" を持つ場合、各文書について結果として得られる祖先オリジンリストに関連付けられたリストは次のようになる：

トップレベル：« »
子：« "null" »
孫：« "https://b.example", "null" »
ひ孫：« "null", "https://b.example", "null" »。トップレベルのオリジンは、子文書が内部祖先オリジンオブジェクトリスト作成手順を実行したときにマスクされ、その結果が孫文書の内部祖先オリジンオブジェクトリスト作成手順へ渡され、以降も同様に渡されるため、マスクされる。

3.1.4 リソースメタデータ管理

document.referrer Document/referrer 現在のすべてのエンジンでサポートされている。 Firefox1+Safari1+Chrome1+ Opera3+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

ユーザーが現在の文書へナビゲートする前にいた Document の URL を返す。ただし、それがブロックされた場合、またはそのような文書が存在しなかった場合は、空文字列を返す。

noreferrer リンク型を使用して、リファラーをブロックできる。

referrer 属性は、文書のリファラーを返さなければならない。

document.cookie [ = value ]

Document に適用される HTTP Cookie を返す。Cookie が存在しない場合、またはこのリソースに Cookie を適用できない場合は、空文字列を返す。

設定することで、要素の HTTP Cookie の集合に新しい Cookie を追加できる。

内容が不透明オリジンへサンドボックス化されている場合（例えば、iframe の sandbox 属性による場合）、取得時および設定時に "SecurityError" DOMException が投げられる。

Document/cookie

現在のすべてのエンジンでサポートされている。

Firefox1+Safari1+Chrome1+

Opera3+Edge79+

Edge (Legacy)12+Internet Explorer4+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

cookie 属性は、文書の URL によって識別されるリソースの Cookie を表す。

同期的な document.cookie API の使用は、パフォーマンス上の問題の原因となる可能性がある。代わりに Cookie Store API を使用できる。これは、パフォーマンス上の問題を回避するため、Cookie を非同期に処理する方法を提供する。詳細については、 Cookie Store API の概要を参照すること。 [COOKIESTORE]

次のいずれかの条件に該当する Document オブジェクトは、 Cookie 非対応 Document オブジェクトである：

閲覧コンテキストが null である Document オブジェクト。
URL のスキームが HTTP(S) スキームでない Document。

取得時に、文書が Cookie 非対応 Document オブジェクトである場合、ユーザーエージェントは空文字列を返さなければならない。それ以外で、Document のオリジンが不透明オリジンである場合、ユーザーエージェントは "SecurityError" DOMException を投げなければならない。それ以外の場合、ユーザーエージェントは文書の URL に対する「非 HTTP」API 用の Cookie 文字列を、 BOM なし UTF-8 デコードを使用してデコードして返さなければならない。 [COOKIES]

設定時に、文書が Cookie 非対応 Document オブジェクトである場合、ユーザーエージェントは何もしてはならない。それ以外で、Document のオリジンが不透明オリジンである場合、ユーザーエージェントは "SecurityError" DOMException を投げなければならない。それ以外の場合、ユーザーエージェントは、文書の URL に対して「非 HTTP」API を介してSet-Cookie 文字列を受信した場合と同様に動作しなければならない。その文字列は、新しい値を UTF-8 としてエンコードしたものからなる。 [COOKIES] [ENCODING]

cookie 属性はフレーム間でアクセス可能であるため、Cookie のパス制限は、どの Cookie をサイトのどの部分へ送信するかを管理するための補助にすぎず、いかなる意味でもセキュリティ機能ではない。

cookie 属性のゲッターとセッターは、共有状態へ同期的にアクセスする。ロック機構が存在しないため、マルチプロセスのユーザーエージェントでは、スクリプトの実行中に他の閲覧コンテキストが Cookie を変更できる。例えば、サイトが Cookie を読み取り、その値を増加させ、書き戻し、その Cookie の新しい値をセッションの一意な識別子として使用しようとする場合がある。サイトがこれを二つの異なるブラウザーウィンドウで同時に行うと、両方のセッションに同じ「一意な」識別子を使用してしまい、壊滅的な影響が生じる可能性がある。

document.lastModified Document/lastModified 現在のすべてのエンジンでサポートされている。 Firefox1+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

サーバーによって報告された文書の最終変更日時を、ユーザーのローカルタイムゾーンにおける「MM/DD/YYYY hh:mm:ss」形式で返す。

最終変更日時が不明な場合は、代わりに現在時刻を返す。

lastModified 属性は、取得時に、 Document のソースファイルの最終変更日時を、ユーザーのローカルタイムゾーンにおける次の形式で返さなければならない：

日付の月の構成要素。
U+002F SOLIDUS 文字（/）。
日付の日の構成要素。
U+002F SOLIDUS 文字（/）。
日付の年の構成要素。
U+0020 SPACE 文字。
時刻の時の構成要素。
U+003A COLON 文字（:）。
時刻の分の構成要素。
U+003A COLON 文字（:）。
時刻の秒の構成要素。

上記の数値構成要素は、年を除き、十進数で数値を表す二つの ASCII 数字として示し、必要に応じてゼロで埋めなければならない。年は、十進数で数値を表す四つ以上の ASCII 数字からなる可能な限り短い文字列として示し、必要に応じてゼロで埋めなければならない。

Document のソースファイルの最終変更日時は、使用されるネットワークプロトコルの関連機能から導出しなければならない。例えば、文書の HTTP `Last-Modified` ヘッダーの値、またはローカルファイルについてはファイルシステム内のメタデータから導出する。最終変更日時が不明な場合、属性は上記の形式で現在の日時を返さなければならない。

3.1.5 文書の読み込み状態の報告

document.readyState

Document の読み込み中は「loading」を、構文解析が完了したがサブリソースを読み込み中の場合は「interactive」を、読み込みが完了すると「complete」を返す。

この値が変更されると、Document オブジェクトで readystatechange イベントが発生する。

DOMContentLoaded イベントは、「interactive」への移行後、「complete」への移行前に、 async script 要素以外のすべてのサブリソースが読み込まれた時点で発生する。

Document/readyState

現在のすべてのエンジンでサポートされている。

Firefox3.6+Safari1+Chrome1+

Opera11+Edge79+

Edge (Legacy)12+Internet Explorer11

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11+

各 Document は、文字列である現在の文書準備状態を持ち、最初は「complete」である。

Document オブジェクトを作成して初期化するアルゴリズムを介して作成された Document オブジェクトでは、いかなるスクリプトも document.readyState の値を観測できるようになる前に、これは直ちに「loading」へリセットされる。この既定値は、初期 about:blank Document、または閲覧コンテキストを持たない Document など、その他の場合にも適用される。

readyState のゲッター手順は、 this の現在の文書準備状態を返すことである。

Document document の現在の文書準備状態を更新するには、それを readinessValue にする：

document の現在の文書準備状態が readinessValue と等しい場合、戻る。
document の現在の文書準備状態を readinessValue に設定する。
document が HTML パーサーに関連付けられている場合：
1. now を、document の関連グローバルオブジェクトによる現在の高分解能時刻とする。
2. readinessValue が「complete」であり、 document の読み込みタイミング情報の DOM 完了時刻が 0 である場合、 document の読み込みタイミング情報の DOM 完了時刻を now に設定する。
3. それ以外で、readinessValue が「interactive」であり、 document の読み込みタイミング情報の DOM 対話可能時刻が 0 である場合、 document の読み込みタイミング情報の DOM 対話可能時刻を now に設定する。
document で、readystatechange という名前のイベントを発火する。

Document が、まだ停止も中止もされていない HTML パーサーまたは XML パーサーに関連付けられている場合、その文書はアクティブなパーサーを持つという。

Document は、文書読み込みタイミング情報である読み込みタイミング情報を持つ。

Document は、文書アンロードタイミング情報である前の文書のアンロードタイミングを持つ。

Document は、最初は false であるブール値クロスオリジンリダイレクトを介して作成されたかを持つ。

文書読み込みタイミング情報構造体は、次の項目を持つ：

ナビゲーション開始時刻（既定値 0）: 数値
DOM 対話可能時刻（既定値 0）
DOM コンテンツ読み込み済みイベント開始時刻（既定値 0）
DOM コンテンツ読み込み済みイベント終了時刻（既定値 0）
DOM 完了時刻（既定値 0）
load イベント開始時刻（既定値 0）
load イベント終了時刻（既定値 0）: DOMHighResTimeStamp 値

文書アンロードタイミング情報構造体は、次の項目を持つ：

unload イベント開始時刻（既定値 0）
unload イベント終了時刻（既定値 0）: DOMHighResTimeStamp 値

3.1.6 レンダリングブロック機構

各 Document は、要素の集合であるレンダリングブロック要素集合を持ち、最初は空集合である。

Document document は、そのコンテンツ型が「text/html」であり、 document のbody 要素が null である場合、レンダリングブロック要素の追加を許可する。

Document document は、次の両方が true である場合、レンダリングブロック中である：

document のレンダリングブロック要素集合が空でないか、 document がレンダリングブロック要素の追加を許可する。
document の関連グローバルオブジェクトによる現在の高分解能時刻が、実装定義のタイムアウト値を超えていない。

要素 el は、el のノード文書 document がレンダリングブロック中であり、かつ el が document のレンダリングブロック要素集合内にある場合、レンダリングブロック要素である。

要素 el でレンダリングをブロックするには：

document を el のノード文書とする。
document がレンダリングブロック要素の追加を許可する場合、 el を document のレンダリングブロック要素集合に付加する。

要素 el でレンダリングのブロックを解除するには：

document を el のノード文書とする。
el を document のレンダリングブロック要素集合から除去する。

レンダリングブロック要素 el が閲覧コンテキストから切断された状態になった場合、または el の blocking 属性の値が変更され、 el がもはや潜在的なレンダリングブロック要素でなくなった場合、el でレンダリングのブロックを解除する。

3.1.7 DOM ツリーアクセサー

文書のhtml 要素は、その文書要素が html 要素である場合はその要素であり、それ以外の場合は null である。

document.head Document/head 現在のすべてのエンジンでサポートされている。 Firefox4+Safari5+Chrome4+ Opera11+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+: head 要素を返す。

文書のhead 要素は、 html 要素の子である最初の head 要素が存在する場合はその要素であり、それ以外の場合は null である。

head 属性は、取得時に、文書の head 要素（head 要素または null）を返さなければならない。

document.title [ = value ]

HTML ではtitle 要素によって、 SVG では SVG title 要素によって指定された文書のタイトルを返す。

文書のタイトルを更新するために設定できる。更新するための適切な要素が存在しない場合、新しい値は無視される。

文書のtitle 要素は、文書内に存在する最初の title 要素（ツリー順）であり、存在しない場合は null である。

Document/title

現在のすべてのエンジンでサポートされている。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet Explorer4+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

title 属性は、取得時に次のアルゴリズムを実行しなければならない：

文書要素が SVG svg 要素である場合、 value を、文書要素の子である最初の SVG title 要素の子テキスト内容とする。
それ以外の場合、value を title 要素の子テキスト内容とする。または、title 要素が null である場合は空文字列とする。
value 内の ASCII 空白を除去して縮約する。
value を返す。

設定時には、次のリストで最初に一致する条件に対応する手順を実行しなければならない：

文書要素が SVG svg 要素である場合

文書要素の子である SVG title 要素が存在する場合、 element をそのような最初の要素とする。
それ以外の場合：
1. element を、文書要素のノード文書、「title」、および SVG 名前空間を指定して要素を作成した結果とする。
2. element を、文書要素の最初の子として挿入する。
element 内を指定された値で文字列全置換する。

文書要素が HTML 名前空間にある場合

title 要素が null であり、かつ head 要素も null である場合、戻る。
title 要素が null でない場合、element を title 要素とする。
それ以外の場合：
1. element を、文書要素のノード文書、「title」、および HTML 名前空間を指定して要素を作成した結果とする。
2. element を head 要素に付加する。
element 内を指定された値で文字列全置換する。

それ以外の場合

何もしない。

document.body [ = value ] Document/body 現在のすべてのエンジンでサポートされている。 Firefox60+Safari1+Chrome1+ Opera9.6+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

body 要素を返す。

body 要素を置換するために設定できる。

新しい値が body 要素または frameset 要素でない場合、 "HierarchyRequestError" DOMException を投げる。

文書のbody 要素は、 html 要素の子のうち、body 要素または frameset 要素である最初のもの、またはそのような要素が存在しない場合は null である。

body 属性は、取得時に、文書のbody 要素（body 要素、frameset 要素、または null）を返さなければならない。設定時には、次のアルゴリズムを実行しなければならない：

新しい値が body 要素または frameset 要素でない場合、 "HierarchyRequestError" DOMException を投げる。
それ以外で、新しい値がbody 要素と同じである場合、戻る。
それ以外で、body 要素が null でない場合、body 要素の親の中で body 要素を新しい値に置換し、戻る。
それ以外で、文書要素が存在しない場合、 "HierarchyRequestError" DOMException を投げる。
それ以外の場合、body 要素は null であるが、文書要素が存在する。新しい値を文書要素に付加する。

body ゲッターによって返される値は、必ずしもセッターに渡された値ではない。

この例では、セッターは body 要素の挿入に成功する（ただし、SVG は body を SVG svg の子として許可しないため、これは非適合である）。しかし、文書要素が html でないため、ゲッターは null を返す。

<svg xmlns="http://www.w3.org/2000/svg">
 <script>
  document.body = document.createElementNS("http://www.w3.org/1999/xhtml", "body");
  console.assert(document.body === null);
 </script>
</svg>

document.images Document/images 現在のすべてのエンジンでサポートされている。 Firefox1+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+: Document 内の img 要素からなる HTMLCollection を返す。
document.embeds Document/embeds 現在のすべてのエンジンでサポートされている。 Firefox1+Safari10.1+Chrome64+ Opera51+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+
document.plugins Document/plugins 現在のすべてのエンジンでサポートされている。 Firefox1+Safari10.1+Chrome64+ Opera51+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android?Safari iOS10.3+Chrome Android?WebView Android?Samsung Internet?Opera Android47+: Document 内の embed 要素からなる HTMLCollection を返す。
document.links Document/links 現在のすべてのエンジンでサポートされている。 Firefox1+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+: Document 内で href 属性を持つ a 要素および area 要素からなる HTMLCollection を返す。
document.forms Document/forms 現在のすべてのエンジンでサポートされている。 Firefox1+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+: Document 内の form 要素からなる HTMLCollection を返す。
document.scripts Document/scripts 現在のすべてのエンジンでサポートされている。 Firefox9+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+: Document 内の script 要素からなる HTMLCollection を返す。

images 属性は、Document ノードをルートとし、フィルターが img 要素のみに一致する HTMLCollection を返さなければならない。

embeds 属性は、Document ノードをルートとし、フィルターが embed 要素のみに一致する HTMLCollection を返さなければならない。

plugins 属性は、embeds 属性によって返されるものと同じオブジェクトを返さなければならない。

links 属性は、Document ノードをルートとし、フィルターが href 属性を持つ a 要素、および href 属性を持つ area 要素のみに一致する HTMLCollection を返さなければならない。

forms 属性は、Document ノードをルートとし、フィルターが form 要素のみに一致する HTMLCollection を返さなければならない。

scripts 属性は、Document ノードをルートとし、フィルターが script 要素のみに一致する HTMLCollection を返さなければならない。

collection = document.getElementsByName(name) Document/getElementsByName 現在のすべてのエンジンでサポートされている。 Firefox1+Safari1+Chrome1+ Opera5+Edge79+ Edge (Legacy)12+Internet Explorer5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+: Document 内で、値が name である name 属性を持つ要素からなる NodeList を返す。

getElementsByName(elementName) メソッドの手順は、その文書内で、値が elementName 引数と同一である name 属性を持つすべての HTML 要素をツリー順で含む、ライブな NodeList を返すことである。同じ引数を使用して同じ Document オブジェクトでメソッドが再度呼び出された場合、ユーザーエージェントは以前の呼び出しによって返されたオブジェクトと同じものを返してもよい。それ以外の場合、新しい NodeList オブジェクトを返さなければならない。

document.currentScript Document/currentScript 現在のすべてのエンジンでサポートされている。 Firefox4+Safari8+Chrome29+ Opera?Edge79+ Edge (Legacy)12+Internet ExplorerNo Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

現在実行中の要素がクラシックスクリプトを表す場合、その script 要素、または SVG script 要素を返す。再入的なスクリプト実行の場合、まだ実行を完了していないもののうち、最後に実行を開始したものを返す。

Document が現在 script 要素または SVG script 要素を実行していない場合（例えば、実行中のスクリプトがイベントハンドラーまたはタイムアウトであるため）、あるいは現在実行中の script 要素または SVG script 要素がモジュールスクリプトを表す場合、null を返す。

currentScript 属性は、取得時に、最後に設定された値を返さなければならない。Document が作成されるとき、currentScript は null に初期化されなければならない。

この API は、script 要素または SVG script 要素をグローバルに公開するため、実装者および標準化コミュニティでは支持されなくなっている。そのため、モジュールスクリプトの実行時、またはシャドウツリー内でスクリプトを実行する場合など、より新しいコンテキストでは利用できない。現在、そのようなコンテキストで実行中のスクリプトを、グローバルに利用可能にすることなく識別するための新しい解決策を検討している。 issue #1013 を参照すること。

Document インターフェイスは、名前付きプロパティをサポートする。任意の時点における Document オブジェクト document のサポート対象プロパティ名は、それらを提供した要素に従ったツリー順で、後に現れる重複を無視し、同じ要素が両方を提供する場合には id 属性の値を name 属性の値より前に置いた、次のものからなる：

空でない name コンテンツ属性を持ち、document をルートとする文書ツリー内にある、すべての公開状態の embed、 form、 iframe、 img、および公開状態の object 要素の name コンテンツ属性の値。
空でない id コンテンツ属性を持ち、document をルートとする文書ツリー内にある、すべての公開状態の object 要素の id コンテンツ属性の値。および
空でない id コンテンツ属性と、空でない name コンテンツ属性の両方を持ち、 document をルートとする文書ツリー内にある、すべての img 要素の id コンテンツ属性の値。

Document の名前付きプロパティ name の値を決定するには、ユーザーエージェントは次の手順によって得られた値を返さなければならない：

elements を、Document をルートとする文書ツリー内にある、名前 name の名前付き要素のリストとする。

このアルゴリズムは、それ以外の場合には Web IDL によって呼び出されないため、そのような要素は少なくとも一つ存在する。
elements が一つの要素のみを持ち、その要素が iframe 要素であり、その iframe 要素のコンテンツナビゲーション可能が null でない場合、その要素のコンテンツナビゲーション可能のアクティブな WindowProxyを返す。
それ以外で、elements が一つの要素のみを持つ場合、その要素を返す。
それ以外の場合、Document ノードをルートとし、フィルターが名前 name の名前付き要素のみに一致する HTMLCollection を返す。

上記のアルゴリズムにおいて、名前 name の名前付き要素とは、次のいずれかである：

値が name である name コンテンツ属性を持つ、公開状態の embed、 form、 iframe、 img、または公開状態の object 要素。あるいは
値が name である id コンテンツ属性を持つ、公開状態の object 要素。あるいは
値が name である id コンテンツ属性を持ち、さらに空でない name コンテンツ属性も存在する img 要素。

embed 要素または object 要素は、公開状態の object 祖先を持たず、さらに object 要素の場合は、そのフォールバックコンテンツを表示していないか、object または embed の子孫を持たない場合、公開状態であるという。

Document インターフェイスの dir 属性は、dir コンテンツ属性とともに定義される。

3.2 要素

3.2.1 セマンティクス

HTML の要素、属性、および属性値は、（この仕様によって）特定の意味（セマンティクス）を持つものとして定義される。例えば、ol 要素は順序付きリストを表し、 lang 属性はコンテンツの言語を表す。

これらの定義により、ウェブブラウザーや検索エンジンなどの HTML 処理系は、作者が考慮していなかった可能性のある多種多様なコンテキストで、文書およびアプリケーションを提示して使用できる。

単純な例として、デスクトップコンピューターのウェブブラウザーのみを考慮した作者によって作成されたウェブページについて考える：

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>My Page</title>
 </head>
 <body>
  <h1>Welcome to my page</h1>
  <p>I like cars and lorries and have a big Jeep!</p>
  <h2>Where I live</h2>
  <p>I live in a small hut on a mountain!</p>
 </body>
</html>

HTML は表示方法ではなく意味を伝えるため、同じページを携帯電話上の小型ブラウザーでも、ページを変更することなく使用できる。例えば、デスクトップのように見出しを大きな文字で表示する代わりに、携帯電話上のブラウザーはページ全体で同じ大きさのテキストを使用し、見出しのみを太字にする可能性がある。

しかし、これは単なる画面サイズの違いにとどまらない。同じページを、音声合成を中心とするブラウザーを使用する視覚障害のあるユーザーが利用することもできる。このブラウザーはページを画面に表示する代わりに、例えばヘッドフォンを使用してページをユーザーに読み上げる。見出しに大きなテキストを使用する代わりに、音声ブラウザーは異なる音量またはより遅い音声を使用する可能性がある。

それだけではない。ブラウザーはページのどの部分が見出しであるかを認識しているため、ユーザーが文書内をすばやく移動するために使用できる文書アウトラインを作成できる。例えば、「次の見出しへ移動」または「前の見出しへ移動」のキーを使用できる。このような機能は、そうでなければページ内をすばやく移動することが非常に困難な音声ブラウザーで特に一般的である。

ブラウザー以外でも、ソフトウェアはこの情報を利用できる。検索エンジンは、見出しを使用してページをより効果的にインデックス化したり、検索結果からページの小節へのクイックリンクを提供したりできる。ツールは見出しを使用して目次を作成できる（実際に、この仕様の目次もそのように生成される）。

この例では見出しに焦点を当てたが、同じ原則が HTML のすべてのセマンティクスに適用される。

作者は、要素、属性、または属性値を、それらに適した意図されたセマンティックな目的以外に使用してはならない。そのように使用すると、ソフトウェアがページを正しく処理できなくなるためである。

例えば、企業サイトの見出しを表すことを意図した次の断片は、 2 行目が小節の見出しではなく、単なる副見出しまたはサブタイトル（同じ節に対する従属見出し）を意図しているため、非適合である。

<body>
 <h1>ACME Corporation</h1>
 <h2>The leaders in arbitrary fast delivery since 1920</h2>
 ...

この種の状況には、hgroup 要素を使用できる：

<body>
 <hgroup>
  <h1>ACME Corporation</h1>
  <p>The leaders in arbitrary fast delivery since 1920</p>
 </hgroup>
 ...

次の例の文書も、構文的には正しいものの、セルに置かれたデータが明らかに表形式データではなく、cite 要素が誤用されているため、同様に非適合である：

<!DOCTYPE HTML>
<html lang="en-GB">
 <head> <title> Demonstration </title> </head>
 <body>
  <table>
   <tr> <td> My favourite animal is the cat. </td> </tr>
   <tr>
    <td>
     —<a href="https://example.org/~ernest/"><cite>Ernest</cite></a>,
     in an essay from 1992
    </td>
   </tr>
  </table>
 </body>
</html>

これにより、これらのセマンティクスに依存するソフトウェアは正しく動作しなくなる。例えば、視覚障害のあるユーザーが文書内の表を移動できる音声ブラウザーは、上記の引用を表として報告し、ユーザーを混乱させる。同様に、ページから作品名を抽出するツールは、「Ernest」が実際には作品名ではなく人名であるにもかかわらず、それを作品名として抽出する。

この文書の修正版は、次のようになる可能性がある：

<!DOCTYPE HTML>
<html lang="en-GB">
 <head> <title> Demonstration </title> </head>
 <body>
  <blockquote>
   <p> My favourite animal is the cat. </p>
  </blockquote>
  <p>
   —<a href="https://example.org/~ernest/">Ernest</a>,
   in an essay from 1992
  </p>
 </body>
</html>

作者は、この仕様またはその他の適用可能な仕様によって許可されていない要素、属性、または属性値を使用してはならない。そのように使用すると、将来言語を拡張することが著しく困難になるためである。

次の例には、この仕様で許可されていない非適合な属性値（「carpet」）と非適合な属性（「texture」）が存在する：

<label>Carpet: <input type="carpet" name="c" texture="deep pile"></label>

これをマークアップする代替的かつ正しい方法は次のとおりである：

<label>Carpet: <input type="text" class="carpet" name="c" data-texture="deep pile"></label>

ノード文書の閲覧コンテキストが null である DOM ノードは、HTML 構文要件および XML 構文要件を除く、すべての文書適合要件を免除される。

特に、template 要素のテンプレート内容のノード文書の閲覧コンテキストは null である。例えば、コンテンツモデル要件および属性値のマイクロ構文要件は、template 要素のテンプレート内容には適用されない。この例では、img 要素が、 template 要素の外部では無効となるプレースホルダーの属性値を持つ。

<template>
 <article>
  <img src="{{src}}" alt="{{alt}}">
  <h1></h1>
 </article>
</template>

ただし、上記のマークアップで </h1> 終了タグを省略した場合、それは HTML 構文への違反となり、適合性チェッカーによってエラーとして報告される。

スクリプトおよびその他の機構を介して、ユーザーエージェントが文書を処理している間に、属性、テキスト、さらには文書構造全体の値が動的に変更される可能性がある。ある時点における文書のセマンティクスは、その時点における文書の状態によって表されるものであり、したがって文書のセマンティクスは時間の経過とともに変化し得る。ユーザーエージェントは、この変化に応じて文書の表示を更新しなければならない。

HTML には、進行状況バーを記述する progress 要素がある。その「value」属性がスクリプトによって動的に更新される場合、UA は進行状況の変化を示すようにレンダリングを更新する。

3.2.2 DOM 内の要素

DOM 内の HTML 要素を表すノードは、この仕様の関連する節でそれぞれについて列挙されたインターフェイスを実装し、スクリプトに公開しなければならない。これには、別のコンテキスト（例えば XSLT 変換内）にある場合でも、XML 文書内の HTML 要素も含まれる。

DOM 内の要素は、物事を表す。すなわち、セマンティクスとも呼ばれる固有の意味を持つ。

例えば、ol 要素は順序付きリストを表す。

要素は、明示的または暗黙的に、何らかの方法で参照される（言及される）ことができる。DOM 内の要素を明示的に参照する一つの方法は、要素に id 属性を指定し、その id 属性の値をハイパーリンクの href 属性値のフラグメントとして使用して、ハイパーリンクを作成することである。ただし、参照にハイパーリンクは必要ではない。対象の要素を指し示す任意の方法で十分である。

id 属性が指定された、次の figure 要素について考える：

<figure id="module-script-graph">
  <img src="module-script-graph.svg"
       alt="Module A depends on module B, which depends
            on modules C and D.">
  <figcaption>Figure 27: a simple module graph</figcaption>
</figure>

ハイパーリンクに基づく参照は、 a 要素を使用して、次のように作成できる：

As we can see in <a href="#module-script-graph">figure 27</a>, ...

ただし、figure 要素を参照する方法は、他にも多数ある。例えば：

「モジュール A、B、C、および D の図に示されているように……」
「図 27 では……」（ハイパーリンクなし）
「『単純なモジュールグラフ』の図の内容から……」
「下の図では……」（ただし、これは推奨されない）

すべての HTML 要素のインターフェイスが継承し、追加要件を持たない要素が使用しなければならない基本インターフェイスは、 HTMLElement インターフェイスである。

HTMLElement

現在のすべてのエンジンでサポートされている。

Firefox1+Safari1+Chrome1+

Opera8+Edge79+

Edge (Legacy)12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android1+Samsung Internet?Opera Android10.1+

HTMLElement/title

現在のすべてのエンジンでサポートされている。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLElement/lang

現在のすべてのエンジンでサポートされている。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (Legacy)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLElement/inert

現在のすべてのエンジンでサポートされている。

Firefox112+Safari15.5+Chrome102+

Opera?Edge102+

Edge (Legacy)?Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLElement/accessKey

現在のすべてのエンジンでサポートされている。

Firefox5+Safari6+Chrome17+

Opera12.1+Edge79+

Edge (Legacy)12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLUnknownElement

現在のすべてのエンジンでサポートされている。

Firefox1+Safari6+Chrome15+

Opera12.1+Edge79+

Edge (Legacy)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

[Exposed=Window]
interface HTMLElement : Element {
  [HTMLConstructor] constructor();

  // metadata attributes
  [CEReactions, Reflect] attribute DOMString title;
  [CEReactions, Reflect] attribute DOMString lang;
  [CEReactions] attribute boolean translate;
  [CEReactions] attribute DOMString dir;

  // user interaction
  [CEReactions] attribute (boolean or unrestricted double or DOMString)? hidden;
  [CEReactions, Reflect] attribute boolean inert;
  undefined click();
  [CEReactions, Reflect] attribute DOMString accessKey;
  readonly attribute DOMString accessKeyLabel;
  [CEReactions] attribute boolean draggable;
  [CEReactions] attribute boolean spellcheck;
  [CEReactions, ReflectSetter] attribute DOMString writingSuggestions;
  [CEReactions, ReflectSetter] attribute DOMString autocapitalize;
  [CEReactions] attribute boolean autocorrect;

  [CEReactions] attribute [LegacyNullToEmptyString] DOMString innerText;
  [CEReactions] attribute [LegacyNullToEmptyString] DOMString outerText;

  ElementInternals attachInternals();

  // The popover API
  undefined showPopover(optional ShowPopoverOptions options = {});
  undefined hidePopover();
  boolean togglePopover(optional (TogglePopoverOptions or boolean) options = {});
  [CEReactions] attribute DOMString? popover;

  [CEReactions, Reflect, ReflectRange=(0, 8)] attribute unsigned long headingOffset;
  [CEReactions, Reflect] attribute boolean headingReset;
};

dictionary ShowPopoverOptions {
  HTMLElement source;
};

dictionary TogglePopoverOptions : ShowPopoverOptions {
  boolean force;
};

HTMLElement includes GlobalEventHandlers;
HTMLElement includes ElementContentEditable;
HTMLElement includes HTMLOrSVGOrMathMLElement;

[Exposed=Window]
interface HTMLUnknownElement : HTMLElement {
  // Note: intentionally no [HTMLConstructor]
};

HTMLElement インターフェイスは、多数の互いに異なる機能に関連するメソッドおよび属性を保持する。そのため、このインターフェイスのメンバーは、この仕様のさまざまな節で説明される。

HTML 名前空間内の名前 name を持つ要素の要素インターフェイスは、次のように決定される：

name が applet、 bgsound、 blink、 isindex、 keygen、 multicol、 nextid、または spacer である場合、 HTMLUnknownElement を返す。
name が acronym、 basefont、 big、 center、 nobr、 noembed、 noframes、 plaintext、 rb、 rtc、 strike、または tt である場合、 HTMLElement を返す。
name が listing または xmp である場合、 HTMLPreElement を返す。
それ以外で、この仕様がローカル名 name に対応する要素型に適したインターフェイスを定義している場合、そのインターフェイスを返す。
その他の適用可能な仕様が name に適したインターフェイスを定義している場合、それらが定義するインターフェイスを返す。
name が妥当なカスタム要素名である場合、 HTMLElement を返す。
HTMLUnknownElement を返す。

妥当なカスタム要素名の場合に、 HTMLUnknownElement ではなく HTMLElement を使用するのは、将来発生する可能性のあるアップグレードによって、要素のプロトタイプチェーンが、HTMLUnknownElement から無関係なサブクラスへの横方向の遷移ではなく、HTMLElement からサブクラスへの線形遷移のみを生じさせるためである。

HTML、SVG、および MathML 要素間で共有される機能は、 HTMLOrSVGOrMathMLElement インターフェイスミックスインを使用する：[SVG] [MATHML]

Global_attributes/autofocus

一つのエンジンのみでサポートされている。

Firefox🔰 1+Safari🔰 4+Chrome79+

Opera66+Edge79+

Edge (Legacy)NoInternet Explorer🔰 10+

Firefox Android?Safari iOS?Chrome Android?WebView Android79+Samsung Internet?Opera Android57+

interface mixin HTMLOrSVGOrMathMLElement {
  [SameObject] readonly attribute DOMStringMap dataset;
  attribute DOMString nonce; // intentionally no [CEReactions]

  [CEReactions, Reflect] attribute boolean autofocus;
  [CEReactions, ReflectSetter] attribute long tabIndex;
  undefined focus(optional FocusOptions options = {});
  undefined blur();
};

HTML 要素、SVG 要素、MathML 要素のいずれでもない要素の例は、次のように作成されるものである：

const el = document.createElementNS("some namespace", "example");
console.assert(el.constructor === Element);

3.2.3 HTML要素のコンストラクタ

カスタム要素機能をサポートするため、すべてのHTML要素には特別なコンストラクタ動作があります。これは、[HTMLConstructor] IDL 拡張属性によって示されます。これは、指定されたインターフェースのインターフェースオブジェクトが呼び出されたときに、以下で詳しく定義する特定の動作を行うことを示します。

[HTMLConstructor] 拡張属性は引数を取ってはならず、コンストラクタ操作にのみ現れなければなりません。コンストラクタ操作には1回だけ現れなければならず、インターフェースには注釈が付けられた単一のコンストラクタ操作のみが含まれ、その他のコンストラクタ操作が含まれてはなりません。注釈が付けられたコンストラクタ操作は、引数を取らないものとして宣言されなければなりません。

[HTMLConstructor] 拡張属性で注釈が付けられたコンストラクタ操作を伴って宣言されたインターフェースには、次のオーバーライドされたコンストラクタ手順があります：

NewTargetがアクティブ関数オブジェクトと等しい場合、TypeErrorをスローします。
これは、カスタム要素が要素インターフェースをそのコンストラクタとして使用して定義された場合に発生することがあります：
```
customElements.define("bad-1", HTMLButtonElement);
new HTMLButtonElement();          // (1)
document.createElement("bad-1");  // (2)
```
この場合、HTMLButtonElement の実行中（(1)のように明示的に実行される場合、または (2)のように暗黙的に実行される場合のいずれでも）、アクティブ関数オブジェクトと NewTargetの両方がHTMLButtonElementになります。この検査が存在しなければ、ローカル名が bad-1であるHTMLButtonElementのインスタンスを作成できることになります。
registryをnullとします。
周囲のエージェントのアクティブなカスタム要素コンストラクターマップ[NewTarget] が存在する場合、 registryを周囲のエージェントのアクティブなカスタム要素コンストラクターマップ[NewTarget]に設定する。
それ以外の場合、registryを現在のグローバルオブジェクトの関連付けられた Documentのカスタム要素レジストリに設定する。
definitionを、registryのカスタム要素定義集合内で、コンストラクターが NewTargetに等しい項目とする。そのような項目がない場合、TypeErrorをスローする。

registryのカスタム要素定義集合には、undefined であるコンストラクターを持つ項目は存在し得ないため、この手順は、HTML 要素コンストラクターが関数として呼び出されることも防止する（その場合、 NewTargetは undefined になるため）。
isValueをnullとします。
definitionのローカル名が、definitionの名前と等しい場合（すなわち、definitionが自律カスタム要素のものである場合）：
1. アクティブ関数オブジェクトがHTMLElementでない場合、 TypeErrorをスローします。
  これは、カスタム要素がいずれのローカル名も拡張しないものとして定義されている一方で、 HTMLElement以外のクラスを継承する場合に発生することがあります：
```
customElements.define("bad-2", class Bad2 extends HTMLParagraphElement {});
```
  この場合、Bad2のインスタンスを構築するときに行われる（暗黙的な）super()呼び出し中、アクティブ関数オブジェクトはHTMLParagraphElementであり、 HTMLElementではありません。
それ以外の場合（すなわち、definitionがカスタマイズされた組み込み要素のものである場合）：
1. valid local namesを、この仕様またはその他の適用可能な仕様で定義され、アクティブ関数オブジェクトを要素インターフェースとして使用する要素のローカル名のリストとします。
2. valid local namesがdefinitionのローカル名を含まない場合、 TypeErrorをスローします。
  これは、カスタム要素が指定されたローカル名を拡張するものとして定義されている一方で、誤ったクラスを継承する場合に発生することがあります：
```
customElements.define("bad-3", class Bad3 extends HTMLQuoteElement {}, { extends: "p" });
```
  この場合、Bad3のインスタンスを構築するときに行われる（暗黙的な）super()呼び出し中、valid local namesは qとblockquoteを含むリストですが、 definitionのローカル名はpであり、そのリストには含まれていません。
3. isValueをdefinitionの名前に設定します。
definitionの構築スタックが空の場合：
1. elementを、インターフェースを実装する新しいオブジェクトを内部的に作成し、アクティブ関数オブジェクトが対応するインターフェースを、現在のレルムおよびNewTargetを指定して実装した結果とします。
2. elementのノード文書を、現在のグローバルオブジェクトの関連付けられた Documentに設定します。
3. elementの名前空間を HTML 名前空間に設定します。
4. elementの名前空間接頭辞をnullに設定します。
5. elementのローカル名を definitionのローカル名に設定します。
6. elementのカスタム要素レジストリをregistryに設定します。
7. elementのカスタム要素状態を「custom」に設定します。
8. elementのカスタム要素定義をdefinitionに設定します。
9. elementのis値をisValueに設定します。
10. elementを返します。
これは、作成者スクリプトが新しいカスタム要素を直接構築する場合、たとえば new MyCustomElement()を使用する場合に発生します。
prototypeを ? Get(NewTarget, "prototype")とします。
prototypeがObjectでない場合：
1. realmを ? GetFunctionRealm(NewTarget)とします。
2. prototypeを、インターフェースがアクティブ関数オブジェクトのインターフェースと同じであるrealmのインターフェースプロトタイプオブジェクトに設定します。
アクティブ関数オブジェクトのレルムは realmではない可能性があるため、レルムをまたいだ「同じインターフェース」という、より一般的な概念を使用しています。インターフェースオブジェクトの同一性を調べているわけではありません。NewTargetのレルムを使用し、そこで適切なプロトタイプを検索することを含むこのフォールバック動作は、 JavaScriptの組み込みオブジェクトおよびWeb IDLのインターフェースを実装する新しいオブジェクトを内部的に作成するアルゴリズムの類似した動作と一致するように設計されています。
elementを、definitionの構築スタックの最後のエントリとします。
elementが既に構築済みマーカーである場合、TypeErrorをスローします。
これは、カスタム要素コンストラクタ内の作成者コードが、super()を呼び出す前に、構築中のクラスの別のインスタンスを不適合に作成する場合に発生することがあります：
```
let doSillyThing = true;

class DontDoThis extends HTMLElement {
  constructor() {
    if (doSillyThing) {
      doSillyThing = false;
      new DontDoThis();
      // Now the construction stack will contain an already constructed marker.
    }

    // This will then fail with a TypeError:
    super();
  }
}
```
これはまた、カスタム要素コンストラクタ内の作成者コードが super()を2回不適合に呼び出す場合にも発生することがあります。 JavaScript仕様によれば、これは実際にはエラーをスローする前に、スーパークラスのコンストラクタ（すなわち、このアルゴリズム）を2回実行するためです：
```
class DontDoThisEither extends HTMLElement {
  constructor() {
    super();

    // This will throw, but not until it has already called into the HTMLElement constructor
    super();
  }
}
```
? element.[[SetPrototypeOf]](prototype)を実行します。
definitionの構築スタックの最後のエントリを 既に構築済み マーカーに置き換えます。
elementを返します。

この手順には通常、カスタム要素をアップグレードするときに到達します。既存の要素が返されるため、カスタム要素コンストラクタ内のsuper()呼び出しは、その既存の要素をthisに割り当てます。

[HTMLConstructor]によって暗黙に示されるコンストラクタ動作に加えて、一部の要素には名前付きコンストラクタもあります（実際には変更されたprototypeプロパティを持つファクトリ関数です）。

HTML要素の名前付きコンストラクタは、カスタム要素コンストラクタを定義するとき、extends 句でも使用できます：

class AutoEmbiggenedImage extends Image {
  constructor(width, height) {
    super(width * 10, height * 10);
  }
}

customElements.define("auto-embiggened", AutoEmbiggenedImage, { extends: "img" });

const image = new AutoEmbiggenedImage(15, 20);
console.assert(image.width === 150);
console.assert(image.height === 200);

3.2.4 要素の定義

この仕様の各要素には、次の情報を含む定義があります：

カテゴリー

要素が属するカテゴリーのリストです。これらは、各要素のコンテンツモデルを定義するときに使用されます。

この要素を使用できるコンテキスト

要素を使用できる場所についての非規範的な説明です。この情報は、この要素を子として許可する要素のコンテンツモデルと重複しており、便宜のためにのみ提供されています。

簡潔にするため、最も具体的な要件のみを示します。

たとえば、すべてのフレージングコンテンツはフローコンテンツです。したがって、フレージングコンテンツである要素は、より具体的な要件であるため、「フレージングコンテンツが期待される場所」とのみ記載されます。フローコンテンツを期待する場所では、フレージングコンテンツも期待されるため、この要件も満たします。

コンテンツモデル

要素の子および子孫としてどのようなコンテンツを含めなければならないかについての規範的な説明です。

text/htmlにおけるタグの省略

text/html構文で、開始タグおよび終了タグを省略できるかどうかについての非規範的な説明です。この情報は、省略可能なタグの節で示される規範的要件と重複しており、便宜のために要素の定義にも記載されています。

コンテンツ属性

要素に指定できる属性（別途禁止されている場合を除く）の規範的なリストと、それらの属性に関する非規範的な説明です。（ダッシュの左側の内容は規範的であり、右側の内容は非規範的です。）

アクセシビリティに関する考慮事項

作成者向け：ARIAのroleおよびaria-*属性を使用するための適合要件は、 ARIA in HTMLで定義されています。[ARIA] [ARIAHTML]

実装者向け：アクセシビリティAPIのセマンティクスを実装するためのユーザーエージェント要件は、 HTML Accessibility API Mappingsで定義されています。[HTMLAAM]

サニタイズ

各要素のサニタイズ情報は、その要素のサニタイズカテゴリーを定義します。これは、サニタイズ中に要素がどのように処理されるかに影響します。また、要素の1つ以上の属性をナビゲーションURL 属性として定義することもできます。

DOMインターフェース

そのような要素が実装しなければならないDOMインターフェースの規範的な定義です。

その後に、要素が何を表すかについての説明と、作成者および実装に適用される可能性がある追加の規範的な適合基準が続きます。例が含まれる場合もあります。

3.2.4.1 属性

属性値は文字列です。別途指定されている場合を除き、 HTML要素の属性値には空文字列を含む任意の文字列値を使用でき、そのような属性値に指定できるテキストには制限がありません。

3.2.5 コンテンツモデル

この仕様で定義される各要素にはコンテンツモデル、すなわち要素に期待される内容の説明があります。HTML 要素は、その要素のコンテンツモデルに記述された要件に一致する内容を持たなければなりません。要素の内容とは、DOMにおけるその要素の子です。

要素間では常にASCII空白が許可されます。ユーザーエージェントは、ソースマークアップ内の要素間にあるこれらの文字を、DOM内のText ノードとして表します。空のText ノード、およびこれらの文字の列のみからなる Text ノードは、要素間空白と見なされます。

要素の内容が要素のコンテンツモデルに一致するかどうかを判定するとき、および文書と要素のセマンティクスを定義するアルゴリズムに従うときは、要素間空白、コメントノード、および処理命令ノードを無視しなければなりません。

したがって、要素Aと要素Bが同じ親ノードを持ち、その間に他の要素ノードまたはText ノード（要素間空白を除く）が存在しない場合、要素Aは要素Bの前または後にあるといいます。同様に、ある要素に要素間空白、コメントノード、および処理命令ノード以外のノードが含まれていない場合、そのノードはその要素の唯一の子です。

作成者は、各要素について定義された明示的に許可される場所、または他の仕様によって明示的に要求される場所以外で、HTML要素を使用してはなりません。 XML複合文書では、他の名前空間の要素が関連するコンテキストを提供するものとして定義されている場合、そのようなコンテキストがそれらの要素内に存在することがあります。

The Atom Syndication Formatはcontent要素を定義しています。その type属性の値が xhtmlの場合、The Atom Syndication Formatは、単一のHTML div要素を含むことを要求します。したがって、この仕様で明示的かつ規範的に記述されていなくても、そのコンテキストでは div要素が許可されます。[ATOM]

さらに、HTML要素は孤立ノード（すなわち、親ノードを持たないノード）であっても構いません。

たとえば、td要素を作成し、スクリプトのグローバル変数に格納することは適合しています。これは、通常 td要素が tr要素内でのみ使用されることを想定している場合でも同様です。

var data = {
  name: "Banana",
  cell: document.createElement('td'),
};

3.2.5.1 「何も含まない」コンテンツモデル

要素のコンテンツモデルが何も含まないである場合、その要素には、要素間空白以外のText ノード、および要素ノードが含まれてはなりません。

コンテンツモデルが「何も含まない」であるほとんどのHTML要素は、便宜上、空要素（HTML構文において終了タグを持たない要素）でもあります。ただし、これらは完全に別の概念です。

3.2.5.2 コンテンツの種類

HTMLの各要素は、類似した特性を持つ要素をまとめる0個以上のカテゴリーに属します。この仕様では、次の広範なカテゴリーを使用します：

メタデータコンテンツ
フローコンテンツ
区分化コンテンツ
見出しコンテンツ
フレージングコンテンツ
埋め込みコンテンツ
インタラクティブコンテンツ

一部の要素は、この仕様の他の部分で定義される別のカテゴリーにも属します。

これらのカテゴリーの関係は次のとおりです：

区分化コンテンツ、見出しコンテンツ、フレージングコンテンツ、埋め込みコンテンツ、およびインタラクティブコンテンツは、すべてフローコンテンツの一種です。メタデータはフローコンテンツである場合があります。メタデータおよびインタラクティブコンテンツは、フレージングコンテンツである場合があります。埋め込みコンテンツもフレージングコンテンツの一種であり、インタラクティブコンテンツである場合もあります。

特定の目的のために他のカテゴリーも使用されます。たとえば、フォームコントロールでは、共通の要件を定義するために複数のカテゴリーが指定されます。一部の要素には固有の要件があり、特定のカテゴリーには該当しません。

3.2.5.2.1 メタデータコンテンツ

メタデータコンテンツとは、残りのコンテンツの表示や動作を設定するコンテンツ、文書と他の文書との関係を設定するコンテンツ、またはその他の「帯域外」情報を伝達するコンテンツです。

主にメタデータに関連するセマンティクスを持つ他の名前空間の要素（たとえばRDF）も、メタデータコンテンツです。

したがって、XMLシリアル化では、次のようにRDFを使用できます：

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:r="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xml:lang="en">
 <head>
  <title>Hedral's Home Page</title>
  <r:RDF>
   <Person xmlns="http://www.w3.org/2000/10/swap/pim/contact#"
           r:about="https://hedral.example.com/#">
    <fullName>Cat Hedral</fullName>
    <mailbox r:resource="mailto:hedral@damowmow.com"/>
    <personalTitle>Sir</personalTitle>
   </Person>
  </r:RDF>
 </head>
 <body>
  <h1>My home page</h1>
  <p>I like playing with string, I guess. Sister says squirrels are fun
  too so sometimes I follow her to play with them.</p>
 </body>
</html>

ただし、HTMLシリアル化ではこれは不可能です。

3.2.5.2.2 フローコンテンツ

文書およびアプリケーションの本文で使用されるほとんどの要素は、フローコンテンツに分類されます。

3.2.5.2.3 区分化コンテンツ

区分化コンテンツとは、headerおよび footer要素のスコープを定義するコンテンツです。

3.2.5.2.4 見出しコンテンツ

見出しコンテンツは、節の見出しを定義します（区分化コンテンツ要素を使用して明示的にマークアップされる場合、または見出しコンテンツ自体によって暗黙に示される場合があります）。

3.2.5.2.5 フレージングコンテンツ

フレージングコンテンツとは、文書のテキスト、およびそのテキストを段落内のレベルでマークアップする要素です。連続するフレージングコンテンツは段落を形成します。

フレージングコンテンツとして分類されるほとんどの要素には、フローコンテンツではなく、それ自体がフレージングコンテンツとして分類される要素のみを含めることができます。

コンテンツモデルのコンテキストにおけるテキストとは、何もないか、またはText ノードを意味します。テキストは単独でコンテンツモデルとして使用される場合がありますが、フレージングコンテンツでもあり、Text ノードが空であるか、ASCII 空白のみを含む場合は、要素間空白になることがあります。

Text ノードおよび属性値は、非文字と、制御文字（ASCII空白を除く）を除外した、スカラー値で構成されなければなりません。この仕様には、正確なコンテキストに応じて、Text ノードおよび属性値の正確な値に関する追加の制約が含まれています。

3.2.5.2.6 埋め込みコンテンツ

埋め込みコンテンツとは、別のリソースを文書にインポートするコンテンツ、または別の語彙から文書に挿入されるコンテンツです。

HTML名前空間以外の名前空間に属し、メタデータではなくコンテンツを伝達する要素は、この仕様で定義されるコンテンツモデルの目的上、埋め込みコンテンツです。（たとえば、MathMLまたはSVGです。）

一部の埋め込みコンテンツ要素はフォールバックコンテンツ、すなわち外部リソースを使用できない場合（たとえば、サポートされていない形式である場合）に使用されるコンテンツを持つことができます。フォールバックがある場合、要素の定義にその内容が記載されます。

3.2.5.2.7 インタラクティブコンテンツ

インタラクティブコンテンツとは、ユーザーとのインタラクションを特に意図したコンテンツです。

3.2.5.2.8 触知可能なコンテンツ

一般的な規則として、任意のフローコンテンツまたはフレージングコンテンツを許可するコンテンツモデルを持つ要素は、その内容に、hidden属性が指定されていない触知可能なコンテンツであるノードを少なくとも1つ持つべきです。

触知可能なコンテンツは、空でない子孫テキスト、ユーザーが聞くことができるもの（audio要素）、見ることができるもの（video、 img、または canvas要素）、あるいはその他の方法で操作できるもの（たとえば、インタラクティブなフォームコントロール）を提供することで、要素を空でないものにします。

ただし、この要件は厳格な要件ではありません。要素が正当に空である場合が数多くあるためです。たとえば、後でスクリプトによって内容が設定されるプレースホルダーとして使用される場合や、要素がテンプレートの一部であり、ほとんどのページでは内容が設定されるものの、一部のページでは関係しない場合などです。

適合性チェッカーは、作成支援として、この要件を満たしていない要素を作成者が検出できる仕組みを提供することが推奨されます。

次の要素は触知可能なコンテンツです：

3.2.5.2.9 スクリプト支援要素

スクリプト支援要素とは、それ自体は何も表さない（すなわち、レンダリングされない）ものの、たとえばユーザーに機能を提供するために、スクリプトを支援する目的で使用される要素です。

次の要素はスクリプト支援要素です：

3.2.5.3 透過コンテンツモデル

一部の要素は透過として記述されます。そのコンテンツモデルの説明には「透過」が含まれます。透過要素のコンテンツモデルは、その親要素のコンテンツモデルから導出されます。コンテンツモデル内の「透過」である部分で要求される要素は、透過要素が置かれている、その親要素のコンテンツモデルの部分で要求される要素と同じです。

たとえば、ruby要素内のins 要素には、rt要素を含めることができません。これは、ruby要素のコンテンツモデルで ins要素を許可する部分が、フレージングコンテンツを許可する部分であり、rt要素はフレージングコンテンツではないためです。

透過要素が互いに入れ子になっている場合、この処理を反復して適用しなければならないことがあります。

次のマークアップ断片について考えます：

<p><object><ins><map><a href="/">Apples</a></map></ins></object></p>

「Apples」がa要素内で許可されるかどうかを検査するため、コンテンツモデルを調べます。a 要素のコンテンツモデルは透過であり、map 要素のコンテンツモデルも、ins要素のコンテンツモデルも、 object 要素のコンテンツモデルも透過です。object要素は、コンテンツモデルがフレージングコンテンツであるp要素内にあります。したがって、テキストはフレージングコンテンツであるため、「Apples」は許可されます。

透過要素に親がない場合、そのコンテンツモデルの「透過」である部分は、代わりに任意のフローコンテンツを受け入れるものとして扱わなければなりません。

3.2.5.4 段落

この節で定義する段落という用語は、 p要素の定義以外にも使用されます。ここで定義する段落の概念は、文書をどのように解釈するかを説明するために使用されます。p要素は、段落をマークアップする複数の方法のうちの1つにすぎません。

段落は通常、組版における段落と同様に、特定の話題について述べる 1つ以上の文からなるテキストのブロックを形成する、連続したフレージングコンテンツですが、より一般的な主題上のグループ化にも使用できます。たとえば、住所、フォームの一部、署名行、または詩の連も段落です。

次の例では、1つのセクション内に2つの段落があります。また、段落ではないフレージングコンテンツを含む見出しもあります。コメントおよび要素間空白が段落を形成しないことに注意してください。

<section>
  <h2>Example of paragraphs</h2>
  This is the <em>first</em> paragraph in this example.
  <p>This is the second.</p>
  <!-- This is not a paragraph. -->
</section>

フローコンテンツ内の段落は、 a、ins、del、およびmap要素によって複雑化されていない文書の外観を基準に定義されます。これらの要素は混合コンテンツモデルを持つため、以下の最初の2つの例に示すように、段落の境界をまたぐことができます。

一般に、要素が段落の境界をまたぐことは避けるのが最善です。そのようなマークアップを保守するのは困難になる場合があります。

次の例では、先の例のマークアップを使用し、テキストが変更されたことを示すためにマークアップの一部をinsおよび del要素で囲んでいます（もっとも、この場合の変更にはあまり意味がありません）。この例には、insおよびdel要素があるにもかかわらず、直前の例とまったく同じ段落があることに注意してください。ins要素は見出しと最初の段落をまたぎ、del要素は 2つの段落間の境界をまたいでいます。

<section>
  <ins><h2>Example of paragraphs</h2>
  This is the <em>first</em> paragraph in</ins> this example<del>.
  <p>This is the second.</p></del>
  <!-- This is not a paragraph. -->
</section>

viewを、文書内のすべてのa、 ins、del、およびmap要素をその内容で置き換えたDOMのビューとします。次に、viewにおいて、フレージングコンテンツ以外のコンテンツとフレージングコンテンツの両方を受け入れる要素内にある、他の種類のコンテンツによって中断されていない兄弟フレージングコンテンツノードの各連続部分について、firstをその連続部分の最初のノード、lastをその連続部分の最後のノードとします。埋め込みコンテンツでも要素間空白でもないノードを少なくとも1つ含む各連続部分について、元のDOMには firstの直前からlastの直後まで段落が存在します。（したがって、段落はa、 ins、del、およびmap要素をまたぐことができます。）

適合性チェッカーは、互いに重なり合う段落がある場合、作成者に警告しても構いません（これは、object、video、audio、および canvas要素で発生することがあり、また、SVG svgやMathML mathのように、その内部へHTMLをさらに埋め込むことを許可する他の名前空間の要素を介して間接的に発生することもあります）。

段落は、p要素によって明示的にも形成されます。

p要素は、それ以外には段落を互いに分離するフレージングコンテンツ以外のコンテンツが存在しない場合に、個々の段落を囲むために使用できます。

次の例では、リンクが最初の段落の半分、2つの段落を分ける見出し全体、および2番目の段落の半分にわたっています。リンクは段落および見出しをまたいでいます。

<header>
 Welcome!
 <a href="about.html">
  This is home of...
  <h1>The Falcons!</h1>
  The Lockheed Martin multirole jet fighter aircraft!
 </a>
 This page discusses the F-16 Fighting Falcon's innermost secrets.
</header>

次は、この内容をマークアップする別の方法です。今回は段落を明示的に示し、 1つのリンク要素を3つに分割しています：

<header>
 <p>Welcome! <a href="about.html">This is home of...</a></p>
 <h1><a href="about.html">The Falcons!</a></h1>
 <p><a href="about.html">The Lockheed Martin multirole jet
 fighter aircraft!</a> This page discusses the F-16 Fighting
 Falcon's innermost secrets.</p>
</header>

フォールバックコンテンツを定義する特定の要素を使用すると、段落が重なり合うことがあります。たとえば、次のセクションでは：

<section>
 <h2>My Cats</h2>
 You can play with my cat simulator.
 <object data="cats.sim">
  To see the cat simulator, use one of the following links:
  <ul>
   <li><a href="cats.sim">Download simulator file</a>
   <li><a href="https://sims.example.com/watch?v=LYds5xY4INU">Use online simulator</a>
  </ul>
  Alternatively, upgrade to the Mellblom Browser.
 </object>
 I'm quite proud of it.
</section>

段落は5つあります：

「You can play with my cat simulator. object I'm quite proud of it.」と記された段落。ここでobjectはobject要素です。
「To see the cat simulator, use one of the following links:」と記された段落。
「Download simulator file」と記された段落。
「Use online simulator」と記された段落。
「Alternatively, upgrade to the Mellblom Browser.」と記された段落。

最初の段落には、他の4つの段落が重なっています。「cats.sim」リソースをサポートするユーザーエージェントは最初の段落だけを表示しますが、フォールバックを表示するユーザーエージェントは、最初の段落の最初の文を2番目の段落と同じ段落にあるかのように紛らわしく表示し、最後の段落を最初の段落の2番目の文の冒頭にあるかのように表示します。

この混乱を避けるため、明示的なp 要素を使用できます。たとえば：

<section>
 <h2>My Cats</h2>
 <p>You can play with my cat simulator.</p>
 <object data="cats.sim">
  <p>To see the cat simulator, use one of the following links:</p>
  <ul>
   <li><a href="cats.sim">Download simulator file</a>
   <li><a href="https://sims.example.com/watch?v=LYds5xY4INU">Use online simulator</a>
  </ul>
  <p>Alternatively, upgrade to the Mellblom Browser.</p>
 </object>
 <p>I'm quite proud of it.</p>
</section>

3.2.6 グローバル属性

Global_attributes

次の属性は、すべてのHTML 要素（この仕様で定義されていないものを含む）に共通しており、指定できます：

accesskey
autocapitalize
autocorrect
autofocus
contenteditable
dir
draggable
enterkeyhint
headingoffset
headingreset
hidden
inert
inputmode
is
itemid
itemprop
itemref
itemscope
itemtype
lang
nonce
popover
spellcheck
style
tabindex
title
translate
writingsuggestions

これらの属性は、この仕様ではHTML 要素の属性としてのみ定義されています。この仕様が、これらの属性を持つ要素に言及する場合、これらの属性を持つものとして定義されていない名前空間の要素を、これらの属性を持つ要素と見なしてはなりません。

たとえば、次のXML断片では、「bogus」要素は、リテラル名が「dir」である属性を持っているにもかかわらず、この仕様で定義されるdir属性を持っていません。したがって、最も内側のspan要素の方向性は「rtl」であり、「bogus」要素を間接的に介してdiv要素から継承されます。

<div xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
 <bogus xmlns="https://example.net/ns" dir="ltr">
  <span xmlns="http://www.w3.org/1999/xhtml">
  </span>
 </bogus>
</div>

Global_attributes/slot

現在のすべてのエンジンでサポートされています。

Firefox63+Safari10+Chrome53+

Opera?Edge79+

Edge（旧版）いいえInternet Explorer?

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

DOMは、任意の名前空間の任意の要素に対するclass、id、およびslot属性についてのユーザーエージェント要件を定義します。 [DOM]

class、id、およびslot属性は、すべてのHTML要素に指定できます。

HTML要素に指定する場合、class 属性は、その要素が属するさまざまなクラスを表す空白区切りトークンの集合である値を持たなければなりません。

要素にクラスを割り当てると、CSSのセレクターにおけるクラス照合、DOMのgetElementsByClassName() メソッド、およびその他の同様の機能に影響します。

作成者がclass属性で使用できるトークンには追加の制限はありませんが、コンテンツの望ましい表示を説明する値ではなく、コンテンツの性質を説明する値を使用することが推奨されます。

HTML要素に指定する場合、id属性の値は、その要素のツリー内にあるすべてのIDの中で一意であり、少なくとも1文字を含まなければなりません。値にはいかなる ASCII空白も含めてはなりません。

id属性は、その要素の一意識別子（ID）を指定します。

IDが取り得る形式には、その他の制限はありません。特に、IDは数字のみで構成したり、数字で始めたり、アンダースコアで始めたり、句読点のみで構成したりできます。

要素の一意識別子は、さまざまな目的に使用できます。特に、フラグメントを使用して文書の特定部分へリンクする方法、スクリプト処理時に要素を対象とする方法、およびCSSから特定の要素にスタイルを適用する方法として使用できます。

識別子は不透明な文字列です。id属性の値から特定の意味を導出するべきではありません。

slot属性には、 HTML要素に固有の適合要件はありません。

slot属性は、要素にスロットを割り当てるために使用されます。slot属性を持つ要素は、そのslot属性の値と name属性の値が一致するslot要素によって作成されたスロットに割り当てられます。ただし、そのslot要素が、対応するslot属性値を持つホストをルートが持つシャドーツリー内にある場合に限ります。

支援技術製品が、HTML要素および属性だけでは不可能な、より細粒度のインターフェースを公開できるようにするため、支援技術製品向けの注釈の集合を指定できます（ARIAのroleおよびaria-*属性）。 [ARIA]

次のイベントハンドラーコンテンツ属性は、任意のHTML要素に指定できます：

onauxclick
onbeforeinput
onbeforematch
onbeforetoggle
onblur*
oncancel
oncanplay
oncanplaythrough
onchange
onclick
onclose
oncommand
oncontextlost
oncontextmenu
oncontextrestored
oncopy
oncuechange
oncut
ondblclick
ondrag
ondragend
ondragenter
ondragleave
ondragover
ondragstart
ondrop
ondurationchange
onemptied
onended
onerror*
onfocus*
onformdata
oninput
oninvalid
onkeydown
onkeypress
onkeyup
onload*
onloadeddata
onloadedmetadata
onloadstart
onmousedown
onmouseenter
onmouseleave
onmousemove
onmouseout
onmouseover
onmouseup
onpaste
onpause
onplay
onplaying
onprogress
onratechange
onreset
onresize*
onscroll*
onscrollend*
onsecuritypolicyviolation
onseeked
onseeking
onselect
onslotchange
onstalled
onsubmit
onsuspend
ontimeupdate
ontoggle
onvolumechange
onwaiting
onwheel

アスタリスクが付いた属性は、body要素に指定された場合、それらの要素が同じ名前を持つWindowオブジェクトのイベントハンドラーを公開するため、異なる意味を持ちます。

これらの属性はすべての要素に適用されますが、すべての要素で有用なわけではありません。たとえば、ユーザーエージェントによって発生するvolumechange イベントを受信するのは、メディア要素だけです。

カスタムデータ属性（たとえば data-foldernameまたはdata-msgid）は、ページに固有のカスタムデータ、状態、注釈、および同様の情報を格納するため、任意の HTML要素に指定できます。

HTML文書では、HTML名前空間の要素に、値が正確に「http://www.w3.org/1999/xhtml」である場合に限り、 xmlns属性を指定できます。これはXML 文書には適用されません。

HTMLでは、xmlns属性にはまったく効果がありません。基本的にはお守りです。XMLとの間の移行を多少容易にするためだけに許可されています。 HTMLパーサーによって解析されると、この属性はいずれの名前空間にも属しません。XMLでは、この属性は名前空間宣言機構の一部であり、常に「http://www.w3.org/2000/xmlns/」名前空間に属します。

XMLでは、XML 文書内の任意の要素で、XML名前空間のxml:space 属性を使用することも許可されています。HTMLの既定の動作は空白を保持することであるため、この属性はHTML 要素には影響しません。[XML]

text/html構文では、 HTML要素のxml:space 属性をシリアル化する方法はありません。

3.2.6.1 `title`属性

Global_attributes/title

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

title属性は、ツールチップに適した情報など、要素に関する助言情報を表します。リンクでは、これは対象リソースのタイトルまたは説明となり得ます。画像では、画像のクレジットまたは画像の説明となり得ます。段落では、脚注またはテキストに関する解説となり得ます。引用では、出典に関する追加情報となり得ます。インタラクティブコンテンツでは、要素を使用するためのラベルまたは説明となり得ます。その他の場合も同様です。値はテキストです。

現在、title 属性に依存することは推奨されません。多くのユーザーエージェントが、この仕様で要求されるアクセシブルな方法で属性を公開していないためです（たとえば、ツールチップを表示するためにマウスなどのポインティングデバイスを必要とし、キーボードのみを使用するユーザーや、最新の携帯電話またはタブレットを使用する人など、タッチのみを使用するユーザーが除外されます）。

この属性を要素から省略した場合、title属性が設定された最も近い祖先のHTML要素のtitle属性も、この要素に関連することを意味します。この属性を設定するとそれを上書きし、祖先の助言情報がこの要素には関連しないことを明示します。属性を空文字列に設定すると、要素に助言情報がないことを示します。

title属性の値に U+000A LINE FEED（LF）文字が含まれる場合、内容は複数行に分割されます。各U+000A LINE FEED（LF）文字は改行を表します。

title属性で改行を使用する際には注意が必要です。

たとえば、次の断片は実際には略語の展開形を途中に改行を含むものとして 定義します：

<p>My logs show that there was some interest in <abbr title="Hypertext
Transport Protocol">HTTP</abbr> today.</p>

link、 abbr、およびinputなどの一部の要素は、上述のセマンティクスに加えて、title属性に追加のセマンティクスを定義します。

要素の助言情報は、次のアルゴリズムが返す値です。値が返された時点でアルゴリズムを中止します。アルゴリズムが空文字列を返す場合、助言情報はありません。

要素にtitle 属性がある場合、その値に対して改行を正規化した結果を返します。
要素に親要素がある場合、親要素の助言情報を返します。
空文字列を返します。

要素に助言情報がある場合、ユーザーエージェントはユーザーにそのことを知らせるべきです。そうしなければ、その情報を発見できないためです。

3.2.6.2 `lang`属性および`xml:lang` 属性

Global_attributes/lang

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

名前空間に属さないlang属性は、要素の内容およびテキストを含む要素のすべての属性の主要言語を指定します。その値は有効なBCP 47言語タグ、または空文字列でなければなりません。属性を空文字列に設定すると、主要言語が不明であることを示します。[BCP47]

XML名前空間のlang属性はXMLで定義されています。 [XML]

これらの属性を要素から省略した場合、この要素の言語は、親要素があればその親要素の言語と同じです（シャドーツリー内のslot要素を除きます）。

名前空間に属さないlang属性は、任意のHTML 要素で使用できます。

XML 名前空間のlang属性は、XML文書内のHTML要素で使用できます。また、関連する仕様が許可する場合は、他の名前空間の要素でも使用できます（特に、 MathMLおよびSVGは、それらの要素にXML名前空間の lang属性を指定することを許可しています）。名前空間に属さないlang属性と、XML名前空間のlang属性の両方を同じ要素に指定する場合、ASCII 大文字・小文字不区別で比較したとき、両者はまったく同じ値でなければなりません。

作成者は、HTML 文書内のHTML要素で、XML名前空間の lang属性を使用してはなりません。XMLとの間の移行を容易にするため、作成者は HTML文書内のHTML要素に、名前空間に属さず、接頭辞を持たず、リテラルのローカル名が「xml:lang」である属性を指定しても構いません。ただし、そのような属性は、名前空間に属さないlang 属性も指定されている場合にのみ指定しなければならず、両方の属性はASCII 大文字・小文字不区別で比較したとき同じ値でなければなりません。

名前空間に属さず、接頭辞を持たず、リテラルのローカル名が「xml:lang」である属性は、言語処理に影響しません。

ノードの言語を決定するには、ユーザーエージェントは次のリストから最初に該当する手順を使用しなければなりません：

ノードが、XML名前空間の lang属性が設定された要素である場合: その属性の値を使用します。
ノードがHTML 要素またはSVG名前空間の要素であり、名前空間に属さないlang属性が設定されている場合: その属性の値を使用します。
ノードの親がシャドールートである場合: そのシャドールートのホストの言語を使用します。
ノードの親要素が nullでない場合: その親要素の言語を使用します。
それ以外の場合: プラグマで設定された既定言語が設定されている場合、それがノードの言語です。プラグマで設定された既定言語が設定されていない場合、上位レベルのプロトコル（HTTPなど）からの言語情報があれば、代わりに最後のフォールバック言語として使用しなければなりません。そのような言語情報がない場合、および上位レベルのプロトコルが複数の言語を報告する場合、ノードの言語は不明であり、対応する言語タグは空文字列です。

結果の値が認識される言語タグでない場合、その値は、指定された言語タグを持つ、他のすべての言語とは異なる不明な言語として扱わなければなりません。ラウンドトリップや、言語タグを期待する他のサービスとの通信のため、ユーザーエージェントは不明な言語タグを変更せずに渡し、それがBCP 47言語タグであることを示すべきです。これにより、後続のサービスがデータを別の種類の言語記述として解釈しないようにします。 [BCP47]

したがって、たとえばlang="xyzzy"を持つ要素は、（CSSなどの）セレクター:lang(xyzzy)に一致しますが、両方が同じように無効であっても、 :lang(abcde)には一致しません。同様に、ウェブブラウザーとスクリーンリーダーが協調して要素の言語について通信する場合、ブラウザーは、その値が無効であると認識していても、スクリーンリーダーが実際にはそのタグを持つ言語をサポートしている可能性に備えて、言語が「xyzzy」であるとスクリーンリーダーに伝えます。スクリーンリーダーがBCP 47と言語名を符号化する別の構文の両方をサポートし、その別の構文では文字列「xyzzy」がベラルーシ語を表す方法であったとしても、スクリーンリーダーがテキストをベラルーシ語として扱い始めることは誤りです。「xyzzy」はBCP 47コードでベラルーシ語を表す方法ではないためです（BCP 47ではベラルーシ語にコード「be」を使用します）。

結果の値が空文字列である場合、ノードの言語が明示的に不明であることを意味するものとして解釈しなければなりません。

ユーザーエージェントは、要素の言語を使用して適切な処理またはレンダリングを決定しても構いません（たとえば、適切なフォントや発音の選択、辞書の選択、または日付選択コントロールなどのフォームコントロールのユーザーインターフェース）。

3.2.6.3 `translate`属性

Global_attributes/translate

現在のすべてのエンジンでサポートされています。

Firefox111+Safari6+Chrome19+

Opera?Edge79+

Edge（旧版）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

translate属性は、ページをローカライズするときに、要素の属性値およびその子であるText ノードの値を翻訳するか、または変更せずに残すかを指定するために使用します。これは、次のキーワードおよび状態を持つ列挙属性です：

キーワード	状態	簡単な説明
`yes`	はい	翻訳モードを翻訳有効に設定します。
`no`	いいえ	翻訳モードを翻訳なしに設定します。

この属性の欠損値のデフォルトおよび無効値のデフォルトは、いずれも継承状態であり、空値のデフォルトははい状態です。

各要素（HTML以外の要素を含む）には翻訳モードがあり、翻訳有効状態または翻訳なし状態のいずれかです。HTML要素のtranslate 属性がはい状態である場合、その要素の翻訳モードは翻訳有効状態です。それ以外で、要素のtranslate 属性がいいえ状態である場合、その要素の翻訳モードは翻訳なし状態です。それ以外の場合、要素のtranslate属性が継承状態であるか、または要素がHTML要素ではないため、translate属性を持ちません。いずれの場合も、その要素の翻訳モードは、親要素があればその親要素と同じ状態になり、要素の親要素が nullである場合は、翻訳有効状態になります。

要素が翻訳有効状態にある場合、ページをローカライズするときに、要素の翻訳可能な属性およびその子であるText ノードの値を翻訳します。

要素が翻訳なし状態にある場合、ページをローカライズするときに、要素の属性値およびその子であるText ノードの値をそのまま残します。たとえば、要素に人名やコンピュータープログラムの名前が含まれている場合です。

次の属性は翻訳可能な属性です：

abbr（th要素上）
alt（area、 img、および input要素上）
content（meta要素上で、name属性が、値を翻訳可能であることが分かっているメタデータ名を指定する場合）
download（ aおよび area要素上）
label（optgroup、 option、および track要素上）
lang（HTML要素上）。翻訳で使用される言語に一致するように「翻訳」しなければならない
placeholder（inputおよび textarea 要素上）
srcdoc（iframe要素上）。解析し、再帰的に処理しなければならない
style（HTML要素上）。解析し、再帰的に処理しなければならない（たとえば、'content'プロパティの値）
title（すべてのHTML要素上）
value（input要素上で、その type属性がボタン状態またはリセットボタン状態にある場合）

他の仕様が、同様に翻訳可能な属性となる別の属性を定義することもあります。たとえば、ARIAはaria-label 属性を翻訳可能なものとして定義します。

translate IDL属性は、取得時に、要素の翻訳モードが翻訳有効である場合はtrueを返し、それ以外の場合はfalseを返さなければなりません。設定時には、新しい値がtrueである場合、コンテンツ属性の値を「yes」に設定し、それ以外の場合はコンテンツ属性の値を「no」に設定しなければなりません。

この例では、ページをローカライズするとき、キーボード入力の例とプログラム出力の例を除いて、文書内のすべてが翻訳されます：

<!DOCTYPE HTML>
<html lang=en> <!-- default on the document element is translate=yes -->
 <head>
  <title>The Bee Game</title> <!-- implied translate=yes inherited from ancestors -->
 </head>
 <body>
  <p>The Bee Game is a text adventure game in English.</p>
  <p>When the game launches, the first thing you should do is type
  <kbd translate=no>eat honey</kbd>. The game will respond with:</p>
  <pre><samp translate=no>Yum yum! That was some good honey!</samp></pre>
 </body>
</html>

3.2.6.4 `dir`属性

Global_attributes/dir

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

dir属性は、次のキーワードおよび状態を持つ列挙属性です：

キーワード	状態	簡単な説明
`ltr`	LTR	要素の内容は、左から右へ記述されるテキストとして明示的に方向分離されます。
`rtl`	RTL	要素の内容は、右から左へ記述されるテキストとして明示的に方向分離されます。
`auto`	自動	要素の内容は明示的に方向分離されたテキストですが、その方向は要素の内容を使用してプログラムによって決定されます（以下で説明します）。

自動状態で使用されるヒューリスティックは非常に粗雑です（双方向アルゴリズムにおける段落レベルの決定と同様の方法で、強い方向性を持つ最初の文字を調べるだけです）。作成者には、テキストの方向が本当に不明であり、より適切なサーバー側ヒューリスティックを適用できない場合の最後の手段としてのみ、この値を使用することが強く推奨されます。[BIDI]

textarea要素および pre要素では、ヒューリスティックは段落ごとに適用されます。

この属性の欠損値のデフォルトおよび無効値のデフォルトは、いずれも未定義状態です。

要素（HTML要素に限らない任意の要素）の方向性は、「ltr」または「rtl」のいずれかです。要素elementを指定して方向性を算出するには、 elementのdir属性の状態に応じて分岐します：

LTR

「ltr」を返します。

RTL

「rtl」を返します。

自動

resultを、elementの自動方向性とします。
resultがnullである場合、「ltr」を返します。
resultを返します。

未定義

elementがbdi要素である場合

resultを、elementの自動方向性とします。
resultがnullである場合、「ltr」を返します。
resultを返します。

elementが、type属性が電話番号状態にあるinput要素である場合

「ltr」を返します。

それ以外の場合

elementの親の方向性を返します。

dir属性は HTML要素に対してのみ定義されているため、他の名前空間の要素には存在できません。したがって、他の名前空間の要素は常に親の方向性を使用することになります。

自動方向性フォーム関連要素は次のとおりです：

input要素のうち、 type属性が、非表示、テキスト、検索、電話番号、URL、メール、パスワード、送信ボタン、リセットボタン、またはボタン状態にあるもの、および
textarea 要素。

要素elementを指定して自動方向性を算出するには：

elementが自動方向性フォーム関連要素である場合：
1. elementの値に双方向文字タイプALまたはRの文字が含まれ、かつ、その文字より前のelementの値のどこにも双方向文字タイプLの文字がない場合、「rtl」を返します。 [BIDI]
2. elementの値が空文字列でない場合、「ltr」を返します。
3. nullを返します。
elementが、ルートがシャドールートであり、elementの割り当てられたノードが空でないslot要素である場合：
1. elementの割り当てられたノードの各ノードchildについて反復します：
  1. childDirectionをnullとします。
  2. childがText ノードである場合、childDirectionをchildのテキストノードの方向性に設定します。
  3. それ以外の場合：
    1. 表明：childはElement ノードです。
    2. childDirectionを、canExcludeRootを trueに設定したchildの内包テキストの自動方向性に設定します。
  4. childDirectionがnullでない場合、 childDirectionを返します。
2. nullを返します。
canExcludeRootを falseに設定したelementの内包テキストの自動方向性を返します。

要素elementおよびブール値canExcludeRootを指定して、要素の内包テキストの自動方向性を算出するには：

elementの子孫である各ノード descendantについて、ツリー順で反復します：
1. 次のいずれかが、
  - descendant
  - elementの子孫である、descendantの任意の祖先要素
  - canExcludeRootがtrueである場合、element
  次のいずれかである場合、
  - bdi要素
  - script 要素
  - style要素
  - textarea 要素
  - dir属性が未定義状態ではない要素
  続行します。
2. descendantが、ルートがシャドールートであるslot要素である場合、そのシャドールートのホストの方向性を返します。
3. descendantがText ノードでない場合、続行します。
4. resultを、descendantのテキストノードの方向性とします。
5. resultがnullでない場合、resultを返します。
nullを返します。

Text ノードtextを指定してテキストノードの方向性を算出するには：

textのデータに、双方向文字タイプがL、AL、またはRであるコードポイントが含まれない場合、nullを返します。 [BIDI]
codePointを、textのデータ内で、双方向文字タイプがL、AL、またはRである最初のコードポイントとします。
codePointの双方向文字タイプがALまたはRである場合、「rtl」を返します。
codePointの双方向文字タイプがLである場合、「ltr」を返します。

要素elementを指定して親の方向性を算出するには：

parentNodeをelementの親ノードとします。
parentNodeがシャドールートである場合、 parentNodeのホストの方向性を返します。
parentNodeが要素である場合、parentNodeの方向性を返します。
「ltr」を返します。

この属性には、双方向アルゴリズムに関わるレンダリング要件があります。

HTML要素の属性の方向性は、その属性のテキストを何らかの方法でレンダリングに含めるときに使用され、次のリストから最初に該当する一連の手順に従って決定されます：

属性が方向性対応属性であり、要素の dir属性が自動状態にある場合

属性値の中から、双方向文字タイプがL、AL、またはRである最初の文字を（論理順で）見つけます。[BIDI]

そのような文字が見つかり、その双方向文字タイプがALまたはRである場合、属性の方向性は「rtl」です。

それ以外の場合、属性の方向性は「ltr」です。

それ以外の場合

属性の方向性は、要素の方向性と同じです。

次の属性は方向性対応属性です：

abbr（th要素上）
alt（area、 img、および input要素上）
content（meta要素上で、name属性が、機械可読よりも主に人間による可読性を意図した値を持つメタデータ名を指定する場合）
label（optgroup、 option、および track要素上）
placeholder（inputおよび textarea 要素上）
title（すべてのHTML要素上）

document.dir [ = value ]

html 要素のdir 属性の値があれば、それを返します。

「ltr」、「rtl」、または「auto」のいずれかに設定して、html要素の dir属性の値を置き換えることができます。

html要素がない場合、空文字列を返し、新しい値を無視します。

HTMLElement/dir

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

要素のdir IDL属性は、その要素のdirコンテンツ属性を、既知の値のみに制限して反映しなければなりません。

Document/dir

現在のすべてのエンジンでサポートされています。

Firefox1+Safari10.1+Chrome64+

Opera51+Edge79+

Edge（旧版）12+Internet Explorer5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+

Documentオブジェクトのdir IDL属性は、html要素があれば、そのdirコンテンツ属性を、既知の値のみに制限して反映しなければなりません。そのような要素がない場合、この属性は空文字列を返し、設定時には何も行わなければなりません。

作成者には、CSSを使用するのではなく、dir 属性を使用してテキストの方向を示すことが強く推奨されます。そうすることで、CSSがない場合でも（たとえば、検索エンジンによって解釈される場合でも）、文書が正しくレンダリングされ続けるためです。

このマークアップ断片は、インスタントメッセージの会話を表しています。

<p dir=auto class="u1"><b><bdi>Student</bdi>:</b> How do you write "What's your name?" in Arabic?</p>
<p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> ما اسمك؟</p>
<p dir=auto class="u1"><b><bdi>Student</bdi>:</b> Thanks.</p>
<p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> That's written "شكرًا".</p>
<p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> Do you know how to write "Please"?</p>
<p dir=auto class="u1"><b><bdi>Student</bdi>:</b> "من فضلك", right?</p>

適切なスタイルシート、およびp要素の既定の配置スタイル、すなわちテキストを段落の開始端に揃えるスタイルが指定されている場合、結果のレンダリングは次のようになります：

Each paragraph rendered as a separate block, with the paragraphs left-aligned except the second paragraph and the last one, which would be right aligned, with the usernames ('Student' and 'Teacher' in this example) flush right, with a colon to their left, and the text first to the left of that.

先に述べたように、auto値は万能ではありません。この例の最後の段落はアラビア文字で始まるため、右から左へ記述されるテキストであると誤って解釈され、その結果「right?」がアラビア語テキストの左側に配置されます。

3.2.6.5 `style`属性

Global_attributes/style

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

すべてのHTML要素には、styleコンテンツ属性を設定できます。これは、CSS Style Attributesで定義されるスタイル属性です。 [CSSATTR]

CSSをサポートするユーザーエージェントでは、属性が追加されたとき、またはその値が変更されたときに、スタイル属性について定められた規則に従って、属性値を解析しなければなりません。 [CSSATTR]

ただし、属性の要素、「style attribute」、および属性値を指定して要素のインライン動作をコンテンツセキュリティポリシーによってブロックするべきか？アルゴリズムを実行した結果が「Blocked」である場合、属性値で定義されたスタイル規則を要素に適用してはなりません。[CSP]

いずれかの要素でstyle属性を使用する文書は、それらの属性を削除した場合でも理解可能かつ使用可能でなければなりません。

特に、コンテンツを非表示または表示するため、あるいは文書内に他の方法で含まれていない意味を伝えるためにstyle属性を使用することは不適合です。（コンテンツを非表示または表示するには、hidden 属性を使用してください。）

element.style: 要素のstyle属性に対応する CSSStyleDeclaration オブジェクトを返します。

style IDL属性は、CSS Object Modelで定義されています。[CSSOM]

次の例では、色を表す単語をspan要素およびstyle属性を使用してマークアップし、視覚媒体でそれらの単語が対応する色で表示されるようにしています。

<p>My sweat suit is <span style="color: green; background:
transparent">green</span> and my eyes are <span style="color: blue;
background: transparent">blue</span>.</p>

3.2.6.6 `data-*` 属性によるカスタムの非表示データの埋め込み

Global_attributes/data-*

現在のすべてのエンジンでサポートされています。

Firefox6+Safari5.1+Chrome7+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カスタムデータ属性とは、名前空間に属さず、その名前が文字列「data-」で始まり、ハイフンの後に少なくとも1文字があり、有効な属性ローカル名であり、ASCII大文字を含まない属性です。

HTML文書内のHTML要素にあるすべての属性名は、自動的にASCII小文字化されるため、ASCII大文字に関する制限はそのような文書には影響しません。

カスタムデータ属性は、より適切な属性または要素が存在しない、ページまたはアプリケーションに固有のカスタムデータ、状態、注釈、および同様の情報を格納することを目的としています。

これらの属性は、その属性を使用するサイトの管理者に知られていないソフトウェアによる使用を意図していません。複数の独立したツールで使用される汎用拡張については、この仕様を拡張してその機能を明示的に提供するか、またはマイクロデータのような技術を標準化された語彙とともに使用するべきです。

たとえば、音楽に関するサイトでは、アルバム内のトラックを表すリスト項目に、各トラックの長さを含むカスタムデータ属性で注釈を付けることができます。この情報をサイト自体で使用し、ユーザーがトラックの長さでリストを並べ替えたり、特定の長さのトラックに絞り込んだりできるようにできます。

<ol>
 <li data-length="2m11s">Beyond The Sea</li>
 ...
</ol>

ただし、ユーザーがその音楽サイトと関係のない汎用ソフトウェアを使用し、このデータを調べて特定の長さのトラックを検索することは不適切です。

これは、これらの属性がサイト自身のスクリプトによる使用を意図しており、公開利用可能なメタデータの汎用拡張機構ではないためです。

同様に、ページ作成者は、使用する予定の翻訳ツールに情報を提供するマークアップを記述できます：

<p>The third <span data-mytrans-de="Anspruch">claim</span> covers the case of <span
translate="no">HTML</span> markup.</p>

この例では、「data-mytrans-de」属性が、MyTrans製品が語句「claim」をドイツ語へ翻訳するときに使用する特定のテキストを指定しています。ただし、標準のtranslate 属性は、すべての言語で「HTML」を変更せずに残すよう伝えるために使用されています。標準属性が利用可能な場合、カスタムデータ属性を使用する必要はありません。

この例では、PaymentRequestの機能検出結果を格納するためにカスタムデータ属性を使用しています。この結果は、CSSで決済ページのスタイルを異なるものにするために使用できます。

<script>
 if ('PaymentRequest' in window) {
   document.documentElement.dataset.hasPaymentRequest = '';
 }
</script>

ここでは、data-has-payment-request属性が実質的にブール属性として使用されており、属性の存在を確認するだけで十分です。ただし、作成者が望む場合、後で何らかの値を設定し、たとえば機能が限定的であることを示すこともできます。

すべてのHTML要素には、任意の値を持つ任意の数のカスタムデータ属性を指定できます。

作成者は、属性が無視され、関連するCSSが削除された場合でもページを使用できるよう、このような拡張を慎重に設計するべきです。

ユーザーエージェントは、これらの属性または値から実装動作を導出してはなりません。ユーザーエージェント向けの仕様は、これらの属性に意味のある値を定義してはなりません。

JavaScriptライブラリは、使用されるページの一部と見なされるため、カスタムデータ属性を使用できます。多くの作成者によって再利用されるライブラリの作成者には、衝突の危険を減らすため、属性名に自らの名前を含めることが推奨されます。適切な場合、ライブラリ作成者には、属性名で使用する正確な名前をカスタマイズ可能にすることも推奨されます。これにより、作成者が知らずに同じ名前を選んだライブラリを同じページで使用でき、また、特定のライブラリの相互に互換性のない複数のバージョンを同じページで使用できます。

たとえば、「DoQuery」というライブラリはdata-doquery-rangeのような属性名を使用でき、「jJo」というライブラリはdata-jjo-rangeのような属性名を使用できます。 jJoライブラリは、使用する接頭辞を設定するAPIも提供できます（たとえば、 J.setDataPrefix('j2')とすると、属性名が data-j2-rangeのようになります）。

element.dataset HTMLElement/dataset 現在のすべてのエンジンでサポートされています。 Firefox6+Safari5.1+Chrome7+ Opera11+Edge79+ Edge（旧版）12+Internet Explorer11 Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android11+ SVGElement/dataset 現在のすべてのエンジンでサポートされています。 Firefox51+Safari5.1+Chrome55+ Opera41+Edge79+ Edge（旧版）17+Internet Explorerいいえ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android41+

要素のdata-* 属性に対応するDOMStringMap オブジェクトを返します。

ハイフン区切りの名前はキャメルケースになります。たとえば、data-foo-bar=""は element.dataset.fooBarになります。

dataset IDL 属性は、要素上のすべてのdata-* 属性への便利なアクセサーを提供します。取得時、dataset IDL属性は、関連付けられた要素がこの要素であるDOMStringMap を返さなければなりません。

DOMStringMap インターフェースは、dataset 属性で使用されます。各DOMStringMap には関連付けられた要素があります。

[Exposed=Window,
 LegacyOverrideBuiltIns]
interface DOMStringMap {
  getter DOMString (DOMString name);
  [CEReactions] setter undefined (DOMString name, DOMString value);
  [CEReactions] deleter undefined (DOMString name);
};

DOMStringMapの名前と値のペアを取得するには、次のアルゴリズムを実行します：

listを名前と値のペアの空のリストとします。
DOMStringMapの関連付けられた要素上の各コンテンツ属性のうち、最初の5文字が文字列「data-」であり、残りの文字が存在する場合にASCII大文字を含まないものについて、要素の属性リストに列挙されている順で、名前が属性名から最初の5文字を削除したもの、値が属性値である名前と値のペアをlistに追加します。
list内の各名前について、その名前内の各U+002D HYPHEN-MINUS文字（-）のうち、後にASCII 小文字が続くものについて、U+002D HYPHEN-MINUS文字（-）を削除し、その直後の文字を同じ文字のASCII大文字に変換したもので置き換えます。
listを返します。

任意の時点におけるDOMStringMap オブジェクトのサポートされるプロパティ名は、その時点でDOMStringMapの名前と値のペアを取得したときに返される各ペアの名前であり、返される順序と同じです。

DOMStringMapについて、名前付きプロパティnameの値を決定するには、DOMStringMapの名前と値のペアを取得して返されたリスト内で、名前部分がnameである名前と値のペアの値部分を返します。

DOMStringMapについて、新しい名前付きプロパティの値を設定するか、既存の名前付きプロパティの値を設定するには、プロパティ名nameおよび新しい値valueを指定して、次の手順を実行します：

nameに、後にASCII 小文字が続くU+002D HYPHEN-MINUS文字（-）が含まれる場合、「SyntaxError」 DOMExceptionをスローします。
name内の各ASCII 大文字について、その文字の前にU+002D HYPHEN-MINUS文字（-）を挿入し、その文字を同じ文字のASCII小文字に変換したもので置き換えます。
文字列data-をnameの先頭に挿入します。
nameが有効な属性ローカル名でない場合、「InvalidCharacterError」 DOMExceptionをスローします。
nameおよびvalueを使用して、DOMStringMapの関連付けられた要素の属性値を設定します。

DOMStringMapについて、既存の名前付きプロパティnameを削除するには、次の手順を実行します：

name内の各ASCII 大文字について、その文字の前にU+002D HYPHEN-MINUS文字（-）を挿入し、その文字を同じ文字のASCII小文字に変換したもので置き換えます。
文字列data-をnameの先頭に挿入します。
nameおよびDOMStringMapの関連付けられた要素を指定して、名前によって属性を削除します。

このアルゴリズムは、先のDOMStringMapの名前と値のペアを取得するアルゴリズムによって与えられる名前についてのみ、 Web IDLによって呼び出されます。[WEBIDL]

ウェブページで、たとえばゲームの一部として、要素に宇宙船を表させる場合、class 属性をdata-* 属性とともに使用する必要があります：

<div class="spaceship" data-ship-id="92432"
     data-weapons="laser 2" data-shields="50%"
     data-x="30" data-y="10" data-z="90">
 <button class="fire"
         onclick="spaceships[this.parentNode.dataset.shipId].fire()">
  Fire
 </button>
</div>

ハイフン区切りの属性名がAPIではキャメルケースになることに注意してください。

次の断片および同様の構造を持つ要素が与えられたとします：

<img class="tower" id="tower5" data-x="12" data-y="5"
     data-ai="robotarget" data-hp="46" data-ability="flames"
     src="towers/rocket.png" alt="Rocket Tower">

……いくつかの引数を取り、その最初の引数が処理対象の要素である splashDamage()関数を想定できます：

function splashDamage(node, x, y, damage) {
  if (node.classList.contains('tower') && // checking the 'class' attribute
      node.dataset.x == x && // reading the 'data-x' attribute
      node.dataset.y == y) { // reading the 'data-y' attribute
    var hp = parseInt(node.dataset.hp); // reading the 'data-hp' attribute
    hp = hp - damage;
    if (hp < 0) {
      hp = 0;
      node.dataset.ai = 'dead'; // setting the 'data-ai' attribute
      delete node.dataset.ability; // removing the 'data-ability' attribute
    }
    node.dataset.hp = hp; // setting the 'data-hp' attribute
  }
}

3.2.7 `innerText`および`outerText`プロパティ

HTMLElement/innerText

現在のすべてのエンジンでサポートされています。

Firefox45+Safari1+Chrome1+

Opera9.6+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android1+Samsung Internet?Opera Android10.1+

element.innerText [ = value ]

要素のテキスト内容を「レンダリングされたとおり」に返します。

設定すると、要素の子を指定された値で置き換えますが、改行はbr 要素に変換されます。

element.outerText [ = value ]

要素のテキスト内容を「レンダリングされたとおり」に返します。

設定すると、要素を指定された値で置き換えますが、改行は br要素に変換されます。

HTMLElement elementを指定したテキストを取得する手順は次のとおりです：

elementがレンダリングされていない場合、またはユーザーエージェントがCSS非対応ユーザーエージェントである場合、elementの子孫テキスト内容を返します。

この手順は意外な結果を生じることがあります。innerTextゲッターをレンダリングされていない要素で呼び出すと、そのテキスト内容が返されますが、レンダリングされている要素でアクセスすると、レンダリングされていないすべての子のテキスト内容は無視されます。
resultsを新しい空のリストとします。
elementの各子ノードnodeについて：
1. currentを、nodeを指定してレンダリング済みテキスト収集手順を実行した結果のリストとします。 results内の各項目は、文字列または正の整数（必須改行数）のいずれかです。
  
  直感的には、必須改行数項目は、その位置に特定数の改行が現れることを意味しますが、CSSのマージンの相殺を思わせる方法で、隣接する 必須改行数項目によって生じる改行と相殺できます。
2. current内の各項目itemについて、itemを resultsに追加します。
resultsから空文字列である項目をすべて削除します。
resultsの先頭または末尾にある、連続する必須改行数項目の並びをすべて削除します。
残りの連続する各必須改行数項目の並びを、その必須改行数項目の値の最大値と同数のU+000A LFコードポイントからなる文字列で置き換えます。
results内の文字列項目を連結したものを返します。

HTMLElement/outerText

現在のすべてのエンジンでサポートされています。

Firefox98+Safari1.3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android1+Samsung Internet?Opera Android12.1+

innerTextおよび outerTextのゲッター手順は、thisを指定してテキストを取得する手順を実行した結果を返すことです。

ノードnodeを指定したレンダリング済みテキスト収集手順は、次のとおりです：

itemsを、nodeの各子ノードについてツリー順でレンダリング済みテキスト収集手順を実行し、その結果を単一のリストに連結した結果とします。
nodeの'visibility'の算出値が 'visible'でない場合、itemsを返します。
nodeがレンダリングされていない場合、 itemsを返します。この手順の目的上、次の要素は、'display'プロパティの算出値が'none'でない場合、次に記すように動作しなければなりません：
- select 要素には、子ボックスとしてoptgroup およびoption 要素の子孫ノードのボックスのみを含む、置換されないインラインのCSSボックスが関連付けられます。
- optgroup 要素には、子ボックスとしてoption 要素の子孫ノードのボックスのみを含む、置換されないブロックレベルのCSS ボックスが関連付けられます。および
- option 要素には、子ボックスが置換されないブロックレベルのCSSボックスとして通常どおりである、置換されないブロックレベルのCSS ボックスが関連付けられます。
'display:contents'により、itemsが空でない場合があります。
nodeがText ノードである場合、nodeによって生成される各CSSテキストボックスについて、コンテンツ順で、CSSの'white-space'処理規則および'text-transform'規則を適用した後のボックスのテキストを算出し、itemsを結果の文字列からなるリストに設定して、itemsを返します。 CSSの'white-space'処理規則はわずかに変更されます。行末の折り畳み可能な空白は常に折り畳まれますが、その行がブロックの最後の行であるか、 br要素で終わる場合にのみ削除されます。ソフトハイフンは保持するべきです。 [CSSTEXT]
nodeがbr要素である場合、単一のU+000A LFコードポイントを含む文字列をitemsに追加します。
nodeの'display'の算出値が'table-cell'であり、nodeのCSSボックスが、それを囲む'table-row'ボックスの最後の'table-cell'ボックスでない場合、単一のU+0009 TABコードポイントを含む文字列をitemsに追加します。
nodeの'display'の算出値が'table-row'であり、nodeのCSSボックスが、最も近い祖先の'table'ボックスの最後の'table-row'ボックスでない場合、単一のU+000A LFコードポイントを含む文字列をitemsに追加します。
nodeがp要素である場合、 itemsの先頭および末尾に2（必須改行数）を追加します。
nodeの'display'の使用値がブロックレベルまたは'table-caption'である場合、itemsの先頭および末尾に 1（必須改行数）を追加します。[CSSDISPLAY]

浮動要素および絶対配置要素はこのカテゴリーに該当します。
itemsを返します。

厳密に言えば、ほとんどの置換要素（たとえば、textarea、 input、および video。ただし、buttonは除く）の子孫ノードはCSSによってレンダリングされないため、このアルゴリズムの目的上、CSSボックスを持たないことに注意してください。

このアルゴリズムは、範囲で動作するよう一般化できます。そうすれば、これをSelectionの文字列化子の基礎として使用でき、おそらく範囲上に直接公開することもできます。Bugzillaバグ10583を参照してください。

HTMLElement elementおよび文字列valueを指定した内部テキストを設定する手順は次のとおりです：

fragmentを、elementのノード文書を指定したvalueのレンダリング済みテキスト断片とします。
element内のすべてをfragmentで置き換えます。

innerTextのセッター手順は、thisおよび指定された値を使用して内部テキストを設定する手順を実行することです。

outerTextのセッター手順は次のとおりです：

thisの親がnullである場合、「NoModificationAllowedError」 DOMExceptionをスローします。
nextをthisの次の兄弟とします。
previousをthisの前の兄弟とします。
fragmentを、thisのノード文書を指定した、指定された値のレンダリング済みテキスト断片とします。
fragmentに子がない場合、thisのノード文書をノード文書とし、空文字列をデータとする新しいText ノードをfragmentに追加します。
thisの親の中で、thisをfragmentで置き換えます。
nextがnullでなく、nextの前の兄弟がText ノードである場合、nextの前の兄弟を指定して次のテキストノードとマージします。
previousがText ノードである場合、previousを指定して次のテキストノードとマージします。

Document documentを指定した文字列inputのレンダリング済みテキスト断片は、次の手順を実行した結果です：

fragmentを、documentを与えて文書フラグメントを作成した結果とする。
positionを、inputの位置変数とし、初期状態ではinputの先頭を指すものとする。
textを空文字列とする。
positionがinputの末尾を越えていない間：
1. positionを与えてinputから、 U+000A LF または U+000D CR ではない符号位置の列を収集し、 textをその結果に設定する。
2. textが空文字列でない場合、追加する。データが textであり、ノード文書が documentである新しい Text ノードをfragmentに。
3. positionがinputの末尾を越えておらず、かつ positionの符号位置が U+000A LF または U+000D CR のいずれかである間：
  1. positionの符号位置が U+000D CR であり、次の符号位置が U+000A LF である場合、positionをinput内の次の符号位置へ進める。
  2. positionをinput内の次の符号位置へ進める。
  3. document、「br」、およびHTML 名前空間を与えて要素を作成した結果を、fragmentへ追加する。
fragmentを返す。

Text ノードnodeを指定して次のテキストノードとマージするには：

nextをnodeの次の兄弟とします。
nextがText ノードでない場合、返ります。
node、nodeのデータの長さ、0、およびnextのデータを使用してデータを置き換えます。
nextを削除します。

3.2.8 双方向アルゴリズムに関する要件

3.2.8.1 双方向アルゴリズムの書式制御文字に関する作成適合基準

HTML 要素のうち、その内容に Text ノードを持つもののテキスト内容、および自由形式のテキストを許可するHTML 要素の属性内のテキストには、U+202AからU+202Eまで、およびU+2066からU+2069までの範囲の文字（双方向アルゴリズムの書式制御文字）を含めることができます。[BIDI]

作成者には、双方向アルゴリズムの書式制御文字を手動で管理するのではなく、dir 属性、bdo 要素、およびbdi 要素を使用することが推奨されます。双方向アルゴリズムの書式制御文字は、CSSとの相互作用が不十分です。

3.2.8.2 ユーザーエージェントの適合基準

ユーザーエージェントは、文書および文書の一部をレンダリングするときに文字の適切な順序を決定するため、 Unicode双方向アルゴリズムを実装しなければなりません。[BIDI]

HTMLからUnicode双方向アルゴリズムへの対応付けは、3つの方法のいずれかで行わなければなりません。ユーザーエージェントは、特にCSSの'unicode-bidi'、'direction'、および'content'プロパティを含むCSSを実装し、そのユーザーエージェントスタイルシートに、この仕様のレンダリング節で示される、それらのプロパティを使用した規則を持たなければなりません。あるいは、ユーザーエージェントは、前述のプロパティだけを実装し、前述のすべての規則を含むユーザーエージェントスタイルシートを持っているかのように動作しなければなりません。ただし、文書で指定されたスタイルシートがそれらを上書きできるようにしてはなりません。あるいは、ユーザーエージェントは、同等のセマンティクスを持つ別のスタイル言語を実装しなければなりません。[CSSGC]

次の要素および属性には、レンダリング節によって定義される要件があり、この節の要件により、すべてのユーザーエージェントに対する要件となります（推奨される既定のレンダリングをサポートするものだけではありません）：

dir属性
bdi要素
bdo要素
br要素
pre要素
textarea 要素
wbr要素

3.2.9 ARIAおよびプラットフォームアクセシビリティAPIに関する要件

HTML 要素にアクセシビリティAPIのセマンティクスを実装するためのユーザーエージェント要件は、 HTML Accessibility API Mappingsで定義されています。そこにある規則に加えて、カスタム要素elementについて、既定のARIAロールのセマンティクスは次のように決定されます：[HTMLAAM]

mapを、elementの内部コンテンツ属性マップとします。
map["role"]が存在する場合、それを返します。
ロールなしを返します。

同様に、カスタム要素elementについて、 stateOrPropertyという名前の状態またはプロパティに対する、既定のARIA状態およびプロパティのセマンティクスは、次のように決定されます：

elementの付加された内部が nullでない場合：
1. elementの付加された内部の stateOrPropertyに関連付けられた要素を取得が存在する場合、それを実行した結果を返します。
2. elementの付加された内部の stateOrPropertyに関連付けられた要素群を取得が存在する場合、それを実行した結果を返します。
elementの内部コンテンツ属性マップ[stateOrProperty]が存在する場合、それを返します。
stateOrPropertyの既定値を返します。

ここでいう「既定のセマンティクス」は、ARIAでは「ネイティブ」、「暗黙的」、または「ホスト言語」のセマンティクスとも呼ばれることがあります。[ARIA]

これらの定義が意味することの1つは、既定のセマンティクスが時間とともに変化し得るということです。これにより、カスタム要素は組み込み要素と同じ表現力を持てます。たとえば、a要素の href属性が追加または削除されたときに、既定のARIAロールのセマンティクスがどのように変化するかと比較してください。

この動作例については、カスタム要素の節を参照してください。

HTML要素上でのARIAのrole属性およびaria-*属性の使用を検査するための適合性チェッカー要件は、ARIA in HTMLで定義されています。 [ARIAHTML]

4 HTMLの要素

4.1 文書要素

4.1.1 `html` 要素

Element/html

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLHtmlElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

カテゴリー：

なし。

この要素を使用できる文脈：

文書の文書要素として。

複合文書でサブ文書断片が許可される場所。

コンテンツモデル：

head要素の後に body要素。

text/htmlでのタグの省略：

html要素内の最初のものがコメントでない場合、 html要素の開始タグを省略できます。

html要素の直後にコメントがない場合、html要素の終了タグを省略できます。

既定。

[Exposed=Window]
interface HTMLHtmlElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

html要素は、 HTML文書のルートを表します。

作成者には、ルートのhtml要素に、文書の言語を示すlang 属性を指定することが推奨されます。これにより、音声合成ツールは使用する発音を決定し、翻訳ツールは使用する規則を決定するなどできます。

次の例のhtml要素は、文書の言語が英語であることを宣言しています。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Swapping Songs</title>
</head>
<body>
<h1>Swapping Songs</h1>
<p>Tonight I swapped some of the songs I wrote with some friends, who
gave me some of the songs they wrote. I love sharing my music.</p>
</body>
</html>

4.2 文書メタデータ

4.2.1 `head` 要素

Element/head

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLHeadElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

カテゴリー：

なし。

この要素を使用できる文脈：

html要素内の最初の要素として。

コンテンツモデル：

文書が iframeのsrcdoc文書である場合、または上位レベルのプロトコルからタイトル情報を利用できる場合：0個以上のメタデータコンテンツの要素。そのうちtitle要素は最大1つ、 base要素も最大1つ。

それ以外の場合：1個以上のメタデータコンテンツの要素。そのうち正確に1つがtitle要素であり、 base要素は最大1つ。

text/htmlでのタグの省略：

要素が空である場合、またはhead要素内の最初のものが要素である場合、head要素の開始タグを省略できます。

head要素の直後に ASCII空白またはコメントがない場合、 head要素の終了タグを省略できます。

既定。

[Exposed=Window]
interface HTMLHeadElement : HTMLElement {
  [HTMLConstructor] constructor();
};

head要素は、 Documentのメタデータの集合を表します。

head要素内のメタデータの集合は、大きい場合も小さい場合もあります。次は非常に短い例です：

<!doctype html>
<html lang=en>
 <head>
  <title>A document with a short head</title>
 </head>
 <body>
 ...

次はより長い例です：

<!DOCTYPE HTML>
<HTML LANG="EN">
 <HEAD>
  <META CHARSET="UTF-8">
  <BASE HREF="https://www.example.com/">
  <TITLE>An application with a long head</TITLE>
  <LINK REL="STYLESHEET" HREF="default.css">
  <LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text">
  <SCRIPT SRC="support.js"></SCRIPT>
  <META NAME="APPLICATION-NAME" CONTENT="Long headed application">
 </HEAD>
 <BODY>
 ...

title 要素はほとんどの状況で必須の子ですが、上位レベルのプロトコルがタイトル情報を提供する場合、たとえばHTMLを電子メール作成形式として使用するときの電子メールの件名行では、title要素を省略できます。

4.2.2 `title` 要素

Element/title

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorer1+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLTitleElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

カテゴリー：

メタデータコンテンツ。

この要素を使用できる文脈：

他のtitle要素を含まないhead要素内。

コンテンツモデル：

要素間空白ではないテキスト。

text/htmlでのタグの省略：

どちらのタグも省略できません。

既定。

[Exposed=Window]
interface HTMLTitleElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString text;
};

title要素は、文書のタイトルまたは名前を表します。作成者は、ユーザーの履歴やブックマーク、検索結果など、文脈から切り離して使用される場合でも文書を識別できるタイトルを使用するべきです。文書のタイトルは、最初の見出しとは異なることがよくあります。最初の見出しは、文脈から切り離されたときに単独で意味を成す必要がないためです。

文書ごとにtitle要素は 1つ以下でなければなりません。

Documentにタイトルがなくても妥当である場合、title要素はおそらく必須ではありません。要素が必須となる場合の説明については、head要素のコンテンツモデルを参照してください。

title.text [ = value ]

要素の子テキスト内容を返します。

設定すると、要素の子を指定された値で置き換えます。

text 属性のゲッターは、このtitle要素の子テキスト内容を返さなければなりません。

text属性のセッターは、このtitle要素内を、指定された値ですべて文字列置換しなければなりません。

次に、適切なタイトルの例を、同じページで使用され得る最上位の見出しと対比して示します。

  <title>Introduction to The Mating Rituals of Bees</title>
    ...
  <h1>Introduction</h1>
  <p>This companion guide to the highly successful
  <cite>Introduction to Medieval Bee-Keeping</cite> book is...

次のページは、同じサイトの一部かもしれません。タイトルが主題を曖昧さなく説明している一方で、最初の見出しは読者が文脈を知っていることを前提としているため、その踊りがサルサなのかワルツなのかと疑問に思うことがない点に注意してください：

  <title>Dances used during bee mating rituals</title>
    ...
  <h1>The Dances</h1>

文書のタイトルとして使用する文字列は、document.title IDL属性によって与えられます。

ユーザーエージェントは、ユーザーインターフェースで文書を参照するときに、文書のタイトルを使用するべきです。title要素の内容がこの方法で使用される場合、そのtitle要素の方向性を使用して、ユーザーインターフェース内の文書タイトルの方向性を設定するべきです。

4.2.3 `base` 要素

Element/base

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLBaseElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

カテゴリー：

メタデータコンテンツ。

この要素を使用できる文脈：

他のbase要素を含まないhead要素内。

コンテンツモデル：

何も含まない。

text/htmlでのタグの省略：

終了タグなし。

コンテンツ属性：

グローバル属性

href — 文書基底URL

target — ハイパーリンクのナビゲーションおよびフォーム送信に使用する既定のナビゲーション可能

[Exposed=Window]
interface HTMLBaseElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, ReflectSetter] attribute USVString href;
  [CEReactions, Reflect] attribute DOMString target;
};

base要素により、作成者はURLを解析するための文書基底URLと、ハイパーリンクをたどるための既定のナビゲーション可能の名前を指定できます。この要素は、この情報以外の内容を表しません。

文書ごとにbase要素は 1つ以下でなければなりません。

base要素には、 href属性、 target属性、またはその両方がなければなりません。

hrefコンテンツ属性を指定する場合、その値には空白で囲まれている可能性のある有効なURLを含めなければなりません。

base要素に href属性がある場合、 URLを取るものとして定義された属性を持つツリー内の他のすべての要素より前になければなりません。

href属性を持つbase要素が複数ある場合、最初のもの以外はすべて無視されます。

target属性を指定する場合、その値には有効なナビゲーション可能ターゲット名またはキーワードを含めなければなりません。これは、Document内のハイパーリンクおよびフォームがナビゲーションを引き起こすときに、どのナビゲーション可能を既定として使用するかを指定します。

base要素に target属性がある場合、ハイパーリンクを表すツリー内のすべての要素より前になければなりません。

target属性を持つbase要素が複数ある場合、最初のもの以外はすべて無視されます。

a、area、または form要素 elementと、省略可能な文字列またはnullのtarget （既定値はnull）を指定して、要素のターゲットを取得するには、次の手順を実行します：

targetがnullである場合：
1. elementにtarget属性がある場合、 targetをその属性の値に設定します。
2. それ以外で、elementのノード文書に、target属性を持つ base要素が含まれる場合、targetを、最初のそのようなbase要素の target属性の値に設定します。
targetがnullでなく、ASCIIタブまたは改行と U+003C（<）を含む場合、targetを「_blank」に設定します。
targetを返します。

文書ツリー内で、hrefコンテンツ属性を持つ最初のbase要素である base要素には、凍結基底URLがあります。次のいずれかの状況が発生した場合、要素の凍結基底URLを直ちに設定しなければなりません：

base要素が、そのDocument内で、 hrefコンテンツ属性を持つツリー順で最初のbase 要素になった場合。
base要素が、そのDocument内で、 hrefコンテンツ属性を持つツリー順で最初のbase 要素であり、そのhrefコンテンツ属性が変更された場合。

要素elementの凍結基底URLを設定するには：

documentを、elementのノード文書とします。
urlRecordを、elementのhrefコンテンツ属性の値を、 documentのフォールバック基底URLおよび documentの文字エンコーディングを使用して解析した結果とします。（したがって、base要素は自身の影響を受けません。）
次のいずれかがtrueである場合：
- urlRecordが失敗である。
- urlRecordのスキームが「data」または「javascript」である。または
- urlRecordおよびdocumentに対してDocumentに対してbaseは許可されるか？を実行した結果が「Blocked」である。
その場合、elementの凍結基底 URLをdocumentのフォールバック基底URLに設定し、返ります。
elementの凍結基底 URLをurlRecordに設定します。
documentを指定して基底URLの変更に応答します。

href IDL属性は、取得時に、次のアルゴリズムを実行した結果を返さなければなりません：

documentを、elementのノード文書とします。
urlを、この要素にhref属性があればその値、なければ空文字列とします。
urlRecordを、urlをdocumentのフォールバック基底URLおよび documentの文字エンコーディングを使用して解析した結果とします。（したがって、base要素は、他のbase要素または自身の影響を受けません。）
urlRecordが失敗である場合、urlを返します。
urlRecordの直列化を返します。

この例では、base 要素を使用して文書基底 URLを設定しています：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is an example for the &lt;base&gt; element</title>
        <base href="https://www.example.com/news/index.html">
    </head>
    <body>
        <p>Visit the <a href="archives.html">archives</a>.</p>
    </body>
</html>

上の例のリンクは、「https://www.example.com/news/archives.html」へのリンクになります。

4.2.4 `link` 要素

Element/link

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLLinkElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

HTMLLinkElement/rel

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLLinkElement/relList

現在のすべてのエンジンでサポートされています。

Firefox30+Safari9+Chrome50+

Opera?Edge79+

Edge（旧版）17+Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：

メタデータコンテンツ。

要素がbody内で許可される場合：フローコンテンツ。

要素がbody内で許可される場合：フレージングコンテンツ。

この要素を使用できる文脈：

メタデータコンテンツが期待される場所。

head要素の子であるnoscript要素内。

要素がbody内で許可される場合：フレージングコンテンツが期待される場所。

コンテンツモデル：

何も含まない。

text/htmlでのタグの省略：

終了タグなし。

コンテンツ属性：

グローバル属性

href — ハイパーリンクのアドレス

crossorigin — 要素がオリジン間リクエストを処理する方法

rel — ハイパーリンクを含む文書と宛先リソースとの関係

media — 適用対象の媒体

integrity — Subresource Integrityの検査で使用される完全性メタデータ [SRI]

hreflang — リンク先リソースの言語

type — 参照先リソースの型に関するヒント

referrerpolicy — 要素によって開始されるフェッチに使用するリファラーポリシー

sizes — アイコンのサイズ（rel="icon"の場合）

imagesrcset — 高解像度ディスプレイ、小型モニターなど、さまざまな状況で使用する画像（rel="preload"の場合）

imagesizes — 異なるページレイアウトにおける画像サイズ（rel="preload"の場合）

as — プリロードリクエストの宛先（rel="preload"およびrel="modulepreload"の場合）

blocking — 要素が潜在的にレンダリングをブロックするかどうか

color — サイトのアイコンをカスタマイズするときに使用する色（rel="mask-icon"の場合）

disabled — リンクが無効かどうか

fetchpriority — 要素によって開始されるフェッチの優先度を設定

また、title属性には、この要素上で特別なセマンティクスがあります：リンクのタイトル、CSS スタイルシート集合名

未分類。

[Exposed=Window]
interface HTMLLinkElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, ReflectURL] attribute USVString href;
  [CEReactions] attribute DOMString? crossOrigin;
  [CEReactions, Reflect] attribute DOMString rel;
  [CEReactions] attribute DOMString as;
  [SameObject, PutForwards=value, Reflect="rel"] readonly attribute DOMTokenList relList;
  [CEReactions, Reflect] attribute DOMString media;
  [CEReactions, Reflect] attribute DOMString integrity;
  [CEReactions, Reflect] attribute DOMString hreflang;
  [CEReactions, Reflect] attribute DOMString type;
  [SameObject, PutForwards=value, Reflect] readonly attribute DOMTokenList sizes;
  [CEReactions, Reflect] attribute USVString imageSrcset;
  [CEReactions, Reflect] attribute DOMString imageSizes;
  [CEReactions] attribute DOMString referrerPolicy;
  [SameObject, PutForwards=value, Reflect] readonly attribute DOMTokenList blocking;
  [CEReactions, Reflect] attribute boolean disabled;
  [CEReactions] attribute DOMString fetchPriority;

  // also has obsolete members
};
HTMLLinkElement includes LinkStyle;

link要素により、作成者は文書を他のリソースにリンクできます。

リンクのアドレスは、href属性によって与えられます。href属性が存在する場合、その値は空白で囲まれている可能性のある有効な空でないURLでなければなりません。href属性またはimagesrcset 属性の一方または両方が存在しなければなりません。

href属性とimagesrcset属性の両方が存在しない場合、要素はリンクを定義しません。

示されるリンクの種類（関係）は、rel属性の値によって与えられます。この属性が存在する場合、その値は一意な空白区切りトークンの順序なし集合でなければなりません。許可されるキーワードとその意味は、後の節で定義されます。rel 属性が存在しない場合、キーワードを持たない場合、または使用されたキーワードのいずれもこの仕様の定義に従って許可されていない場合、要素はリンクを作成しません。

relのサポートされるトークンは、link要素で許可され、処理モデルに影響を与え、ユーザーエージェントによってサポートされる、HTMLリンク型で定義されたキーワードです。可能なサポートされるトークンは、 alternate、 dns-prefetch、 expect、 icon、 manifest、 modulepreload、 next、 pingback、 preconnect、 prefetch、 preload、 search、および stylesheetです。 relのサポートされるトークンには、ユーザーエージェントが処理モデルを実装している、このリスト内のトークンだけを含めなければなりません。

理論上、ユーザーエージェントがJavaScriptを実行する検索エンジンである場合、canonicalキーワードの処理モデルをサポートすることがあり得ます。しかし、実際にはその可能性はかなり低いです。したがって、ほとんどの場合、canonicalをrelのサポートされるトークンに含めるべきではありません。

link要素には、 rel属性またはitemprop 属性のいずれか一方がなければならず、両方があってはなりません。

link要素にitemprop 属性がある場合、またはrel属性がbody-okであるキーワードだけを含む場合、その要素はbody内で許可されるといいます。これは、要素をフレージングコンテンツが期待される場所で使用できることを意味します。

rel属性を使用する場合、要素をページのbody内で使用できるのは一部の場合に限られます。itemprop 属性とともに使用する場合、マイクロデータモデルの制約に従うことを条件に、要素をhead要素内とページのbody内の両方で使用できます。

link要素を使用すると、 2つのカテゴリーのリンク、すなわち外部リソースへのリンクとハイパーリンクを作成できます。リンク型の節では、特定のリンク型が外部リソースであるかハイパーリンクであるかを定義します。1つのlink要素で複数のリンクを作成できます（その一部は外部リソースへのリンクで、一部はハイパーリンクである場合があります）。正確にどのリンクがいくつ作成されるかは、rel属性で指定されるキーワードによって決まります。ユーザーエージェントは、要素ごとではなくリンクごとにリンクを処理しなければなりません。

link要素について作成される各リンクは個別に処理されます。たとえば、rel="stylesheet"を持つlink要素が2つある場合、それぞれが別個の外部リソースとして数えられ、それぞれが独自の属性によって個別に影響を受けます。同様に、1つのlink要素のrel属性の値が next stylesheetである場合、nextキーワードについてのハイパーリンクと、stylesheet キーワードについての外部リソースへのリンクの両方を作成し、それらはmediaやtitleなどの他の属性によって異なる影響を受けます。

たとえば、次のlink要素は、同じページへの2つのハイパーリンクを作成します：

<link rel="author license" href="/about">

この要素によって作成される2つのリンクのうち、一方は、対象ページに現在のページの作成者に関する情報があるというセマンティクスを持ち、もう一方は、対象ページに現在のページが提供されるライセンスに関する情報があるというセマンティクスを持ちます。

link要素とその rel属性によって作成されるハイパーリンクは、文書全体に適用されます。これは、a要素およびarea要素のrel属性とは対照的です。これらの属性は、文書内のリンクの位置によって文脈が与えられるリンクの型を示します。

a要素およびarea要素によって作成されるものとは異なり、link要素によって作成されるハイパーリンクは、推奨される既定のレンダリングをサポートするユーザーエージェントでは、既定で文書の一部として表示されません。また、CSSを使用して強制的に表示しても、活性化動作を持ちません。代わりに、主としてページやページの内容を利用する他のソフトウェアによって使用され得るセマンティック情報を提供します。さらに、ユーザーエージェントはそのようなハイパーリンクをたどるための独自のUIを提供できます。

外部リソースへのリンクの正確な動作は、関連するリンク型について定義される正確な関係によって異なります。

crossorigin属性は、CORS設定属性です。外部リソースへのリンクでの使用を意図しています。

media属性は、リソースが適用される媒体を示します。値は有効なメディアクエリーリストでなければなりません。

Subresource_Integrity

現在のすべてのエンジンでサポートされています。

Firefox43+Safari11.1+Chrome45+

Opera?Edge79+

Edge（旧版）17+Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

integrity属性は、この要素が担当するリクエストの完全性メタデータを表します。値はテキストです。この属性は、stylesheet、 preload、または modulepreload キーワードを含むrel属性を持つlink要素にのみ指定しなければなりません。[SRI]

link要素上のhreflang属性は、a要素上の hreflang属性と同じセマンティクスを持ちます。

type属性は、リンク先リソースのMIME型を示します。これは純粋に助言的なものです。値は有効なMIME型文字列でなければなりません。

外部リソースへのリンクでは、type属性は、ユーザーエージェントがサポートしていないリソースのフェッチを避けられるようにするためのヒントとして使用されます。

referrerpolicy属性は、リファラーポリシー属性です。これは外部リソースへのリンクでの使用を意図しており、リンク先リソースをフェッチして処理するときに使用するリファラーポリシーの設定に役立ちます。 [REFERRERPOLICY]

title属性は、リンクのタイトルを示します。 1つの例外を除き、これは純粋に助言的なものです。値はテキストです。例外は、文書ツリー内にあるスタイルシートリンクであり、その場合、title属性はCSS スタイルシート集合を定義します。

link要素上の title属性は、タイトルを持たないリンクが親要素のタイトルを継承しない点で、他のほとんどの要素のグローバルな title属性とは異なります。そのリンクには単にタイトルがありません。

imagesrcset属性を指定しても構いません。これはsrcset属性です。

imagesrcset属性と href属性は、幅記述子が使用されていない場合、合わせてソース集合に画像ソースを提供します。

imagesrcset 属性が存在し、幅記述子を使用する画像候補文字列を 1つでも含む場合、imagesizes属性も存在しなければならず、これはsizes属性です。imagesizes属性は、ソース集合にソースサイズを提供します。

imagesrcset属性と imagesizes属性は、 preloadキーワードを指定するrel属性と、「image」状態にあるas属性の両方を持つlink要素にのみ指定しなければなりません。

これらの属性により、後で対応するsrcset属性およびsizes属性の値を持つimg要素によって使用される、適切なリソースをプリロードできます：

<link rel="preload" as="image"
      imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
      imagesizes="50vw">

<!-- ... later, or perhaps inserted dynamically ... -->
<img src="wolf.jpg" alt="A rad wolf"
     srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
     sizes="50vw">

href属性を省略している点に注意してください。この属性はimagesrcsetをサポートしないブラウザーにのみ関係しますが、その場合は誤った画像がプリロードされる可能性が高いためです。

imagesrcset 属性は、media属性と組み合わせて、アートディレクションのために、 picture要素のソースから選択される適切なリソースをプリロードできます：

<link rel="preload" as="image"
      imagesrcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
      media="(max-width: 800px)">
<link rel="preload" as="image"
      imagesrcset="dog-wide-1x.jpg, dog-wide-2x.jpg 2x"
      media="(min-width: 801px)">

<!-- ... later, or perhaps inserted dynamically ... -->
<picture>
  <source srcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
          media="(max-width: 800px)">
  <img src="dog-wide-1x.jpg" srcset="dog-wide-2x.jpg 2x"
       alt="An awesome dog">
</picture>

sizes属性は、視覚媒体用アイコンのサイズを示します。その値が存在する場合でも、単なる助言です。複数のアイコンを利用できる場合、ユーザーエージェントはこの値を使用して、使用するアイコンを決定しても構いません。属性を指定する場合、その値は一意な空白区切りトークンの順序なし集合でなければならず、それらはASCII大文字・小文字不区別です。各値は、文字列「any」にASCII大文字・小文字不区別で一致するか、先頭に U+0030 DIGIT ZERO（0）文字を持たない2つの有効な非負整数を、単一のU+0078 LATIN SMALL LETTER X またはU+0058 LATIN CAPITAL LETTER X文字で区切った値でなければなりません。この属性は、iconキーワードまたは apple-touch-iconキーワードを指定するrel属性を持つlink要素にのみ指定しなければなりません。

apple-touch-iconキーワードは、定義済みリンク型集合の拡張として登録されていますが、ユーザーエージェントはこれをいかなる方法でもサポートする必要はありません。

as属性は、href属性によって与えられるリソースのプリロードリクエストについて、プリロード宛先またはモジュールプリロード宛先のいずれかを指定します。これは列挙属性です。プリロード宛先とモジュールプリロード宛先の和集合の各項目は、この属性のキーワードであり、同じ名前の状態に対応付けられます。この属性は、preloadキーワードを含む rel属性を持つlink要素に指定しなければなりません。そのような場合、その値はプリロード宛先でなければなりません。modulepreload キーワードを含むrel属性を持つlink要素に指定しても構いません。そのような場合、その値はモジュールプリロード宛先でなければなりません。その他のlink要素には指定してはなりません。

as属性が使用される方法の処理モデルは、各リンク型のリンク先リソースをフェッチして処理するアルゴリズムで示されます。

この属性には欠損値のデフォルトも無効値のデフォルトもありません。これは、この属性の無効な値または欠損値が、どの状態にも対応付けられないことを意味します。これは処理モデルで考慮されます。preloadリンクでは、どちらの条件もエラーです。modulepreload リンクでは、欠損値は「script」として扱われます。

blocking属性は、ブロッキング属性です。これはリンク型stylesheetおよび expectで使用され、これらのキーワードを含むrel属性を持つlink要素にのみ指定しなければなりません。

color属性は、mask-iconリンク型とともに使用されます。この属性は、mask-iconキーワードを含むrel属性を持つlink要素にのみ指定しなければなりません。値は、CSSの<color>生成規則に一致する文字列でなければならず、ユーザーがサイトをピン留めしたときに表示されるアイコンの表示をカスタマイズするため、ユーザーエージェントが使用できる推奨色を定義します。

この仕様には、color属性に関するユーザーエージェント要件はありません。

mask-iconキーワードは、定義済みリンク型集合の拡張として登録されていますが、ユーザーエージェントはこれをいかなる方法でもサポートする必要はありません。

link要素には、関連付けられた明示的に有効というブール値があります。初期値はfalseです。

disabled属性は、stylesheetリンク型とともに使用されるブール属性です。この属性は、stylesheet キーワードを含むrel属性を持つlink要素にのみ指定しなければなりません。

disabled属性が削除されるたびに、link要素の明示的に有効属性をtrueに設定します。

たとえばdocument.querySelector("link").removeAttribute("disabled")を使用して、 disabled属性を動的に削除すると、スタイルシートがフェッチされ、適用されます：

<link disabled rel="alternate stylesheet" href="css/pooh">

HTMLLinkElement/fetchPriority

FirefoxいいえSafari🔰 preview+Chrome102+

Opera?Edge102+

Edge（旧版）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

fetchpriority属性は、フェッチ優先度属性です。これは外部リソースへのリンクでの使用を意図しており、リンク先リソースをフェッチして処理するときに使用する優先度を設定するために使用されます。

color属性を反映するIDL属性はありませんが、後で追加される可能性があります。

HTMLLinkElement/as

現在のすべてのエンジンでサポートされています。

Firefox56+Safari10+Chrome50+

Opera?Edge79+

Edge（旧版）17+Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

as IDL属性は、asコンテンツ属性を、既知の値のみに制限して反映しなければなりません。

crossOrigin IDL属性は、crossorigin コンテンツ属性を、既知の値のみに制限して反映しなければなりません。

HTMLLinkElement/referrerPolicy

現在のすべてのエンジンでサポートされています。

Firefox50+Safari14.1+Chrome58+

Opera?Edge79+

Edge（旧版）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

referrerPolicy IDL属性は、referrerpolicy コンテンツ属性を、既知の値のみに制限して反映しなければなりません。

fetchPriority IDL属性は、fetchpriority コンテンツ属性を、既知の値のみに制限して反映しなければなりません。

relList 属性は、そのsupports() メソッドを呼び出して、どのリンク型がサポートされているかを確認することにより、機能検出に使用できます。

4.2.4.1 `media`属性の処理

リンクがハイパーリンクである場合、media 属性は純粋に助言的なものであり、対象の文書がどの媒体向けに設計されたかを説明します。

ただし、リンクが外部リソースへのリンクである場合、media属性は規範的です。ユーザーエージェントは、media属性の値が環境に一致し、その他の関連条件が適用される場合に外部リソースを適用しなければならず、それ以外の場合は適用してはなりません。

media属性を省略した場合のデフォルトは「all」です。これは、デフォルトではリンクがすべての媒体に適用されることを意味します。

外部リソース自体に、その適用可能性を制限するさらなる制約が定義されている場合があります。たとえば、CSSスタイルシートにいくつかの@mediaブロックが含まれている場合があります。この仕様は、そのような追加の制約または要件を上書きしません。

4.2.4.2 `type`属性の処理

type 属性が存在する場合、ユーザーエージェントは、そのリソースが指定された型であると仮定しなければなりません（それが有効なMIME型文字列でない場合、たとえば空文字列である場合も含みます）。属性が省略されているものの、外部リソースへのリンクの型にデフォルトの型が定義されている場合、ユーザーエージェントはリソースがその型であると仮定しなければなりません。 UAが指定されたリンク関係について指定されたMIME型をサポートしていない場合、UAはリンク先リソースをフェッチして処理するべきではありません。UAが指定されたリンク関係について指定されたMIME型をサポートしている場合、UAは外部リソースへのリンクの特定の型について指定された適切な時点で、リンク先リソースをフェッチして処理するべきです。属性が省略され、外部リソースへのリンクの型にデフォルトの型が定義されていないものの、型が既知でサポートされていればユーザーエージェントがリンク先リソースをフェッチして処理する場合、ユーザーエージェントは、それがサポートされるという仮定のもとでリンク先リソースをフェッチして処理するべきです。

ユーザーエージェントは、type属性を権威あるものと見なしてはなりません。リソースをフェッチした際、ユーザーエージェントは、その実際の型を決定するためにtype属性を使用してはなりません。リソースを適用するかどうかを決定するために使用されるのは、前述の仮定された型ではなく、実際の型（次の段落で定義されます）だけです。

外部リソースへのリンクの型が、リソースのContent-Type メタデータを処理するための規則を定義している場合、その規則が適用されます。それ以外で、リソースが画像であることが期待される場合、ユーザーエージェントは、リソースのContent-Typeメタデータから決定された型を official typeとして、画像スニッフィング規則を適用し、その結果得られるリソースの算出型を実際の型であるかのように使用しても構いません。それ以外で、これらの条件のいずれも適用されない場合、またはユーザーエージェントが画像スニッフィング規則を適用しないことを選択した場合、ユーザーエージェントは、リソースのContent-Typeメタデータを使用してリソースの型を決定しなければなりません。型メタデータが存在しないものの、外部リソースへのリンクの型にデフォルトの型が定義されている場合、ユーザーエージェントは、リソースがその型であると仮定しなければなりません。

stylesheet リンク型は、リソースのContent-Typeメタデータを処理するための規則を定義します。

ユーザーエージェントがリソースの型を確定した後、その型がサポートされており、その他の関連条件が適用される場合はリソースを適用しなければならず、それ以外の場合はリソースを無視しなければなりません。

文書に次のようにラベル付けされたスタイルシートリンクが含まれている場合：

<link rel="stylesheet" href="A" type="text/plain">
<link rel="stylesheet" href="B" type="text/css">
<link rel="stylesheet" href="C">

……CSSスタイルシートだけをサポートする適合UAは、BおよびCのファイルをフェッチし、 Aのファイルをスキップします（text/plainは CSSスタイルシートのMIME型ではないためです）。

BおよびCのファイルについては、次にサーバーから返された実際の型を確認します。text/cssとして送信されたものにはスタイルを適用しますが、text/plain またはその他の型としてラベル付けされたものには適用しません。

2つのファイルのいずれかがContent-Typeメタデータなしで返された場合、またはContent-Type: "null"のような構文的に不正な型で返された場合、 stylesheet リンクのデフォルトの型が適用されます。そのデフォルトの型はtext/cssであるため、それでもスタイルシートは適用されます。

4.2.4.3 `link` 要素からのリソースのフェッチと処理

すべての外部リソースへのリンクには、link 要素elを取るリンク先リソースをフェッチして処理するアルゴリズムがあります。また、link 要素elおよびリクエストrequestを取るリンク先リソースのフェッチ設定手順もあります。個々のリンク型は、独自のリンク先リソースをフェッチして処理するアルゴリズムを提供できますが、明示的に記載されていない限り、既定のリンク先リソースをフェッチして処理するアルゴリズムを使用します。同様に、個々のリンク型は独自のリンク先リソースのフェッチ設定手順を提供できますが、明示的に記載されていない限り、これらの手順は単にtrueを返します。

link 要素elを指定した既定のリンク先リソースをフェッチして処理する手順は、次のとおりです：

optionsを、elからリンクオプションを作成した結果とします。
requestを、optionsを指定してリンクリクエストを作成した結果とします。
requestがnullである場合、返ります。
requestの同期フラグを設定します。
elおよびrequestを指定して、リンク先リソースのフェッチ設定手順を実行します。結果がfalseである場合、返ります。
elのrel 属性がキーワードstylesheetを含む場合、requestの開始元の型を「css」に設定し、それ以外の場合は「link」に設定します。
processResponseConsumeBodyを、レスポンスresponseおよびnull、失敗、またはバイト列bodyBytesを指定した次の手順に設定して、 requestをフェッチします：
1. successをtrueとします。
2. 次のいずれかがtrueである場合：
  - bodyBytesがnullまたは失敗である。あるいは
  - responseのステータスが成功ステータスでない。
  その場合、successをfalseに設定します。
  
  CSS解析エラーやPNGデコードエラーなど、コンテンツ固有のエラーは successに影響しないことに注意してください。
3. それ以外の場合、リンクリソースの重要なサブリソースの読み込みが完了するまで待ちます。
  
  リンク型の重要なサブリソースを定義する仕様（たとえばCSS）は、これらのサブリソースをどのようにフェッチして処理するかを説明することが期待されています。ただし、これは現在明示的ではないため、この仕様では、リンクリソースの重要なサブリソースがフェッチされ処理されるのを待つことを説明し、これが正しく行われることを期待しています。
4. el、success、response、および bodyBytesを指定して、リンク先リソースを処理します。

リンク処理オプションoptionsを指定してリンクリクエストを作成するには：

表明： optionsのhrefは空文字列ではありません。
urlを、optionsのhrefを、 optionsの基底URLに対して URLをエンコーディング解析した結果とします。

文書または環境の代わりに基底URLを渡すことは、issue #9715で追跡されています。
urlが失敗である場合、nullを返します。
requestを、url、optionsの宛先、および optionsのcrossoriginを指定して、潜在的CORS リクエストを作成した結果とします。
requestのポリシーコンテナーを、 optionsのポリシーコンテナーに設定します。
requestの完全性メタデータを、 optionsのintegrityに設定します。
requestの暗号学的nonceメタデータを、 optionsの暗号学的nonce メタデータに設定します。
requestのリファラーポリシーを、 optionsのリファラーポリシーに設定します。
requestのクライアントを、 optionsの環境に設定します。
requestの優先度を、 optionsのフェッチ優先度に設定します。
requestを返します。

ユーザーエージェントは、適用されないすべての外部リソースを先行してフェッチする代わりに、そのようなリソースが必要になったときにだけフェッチして処理することを選択しても構いません。

リンク先リソースをフェッチして処理するアルゴリズムと同様に、すべての外部リソースへのリンクには、link 要素el、ブール値success、レスポンスresponse、およびバイト列bodyBytesを取るリンク先リソースを処理するアルゴリズムがあります。個々のリンク型は、独自のリンク先リソースを処理するアルゴリズムを提供できますが、明示的に記載されていない限り、そのアルゴリズムは何も行いません。

指定されたrel キーワードについて別途指定されていない限り、要素は、リンク先リソースをフェッチして処理するすべての試行と、その重要なサブリソースが完了するまで、要素のノード文書のloadイベントを遅延しなければなりません。（ユーザーエージェントがまだフェッチおよび処理を試みていないリソース、たとえばリソースが必要になるのを待っているために未処理のリソースは、loadイベントを遅延しません。）

4.2.4.4 ``Link`` ヘッダーの処理

外部リソースへのリンクとなり得るすべてのリンク型は、リンク処理オプションを取るリンクヘッダーを処理するアルゴリズムを定義します。このアルゴリズムは、 HTTPレスポンスの`Link` ヘッダーに現れた場合に、リンク型が反応するかどうか、およびどのように反応するかを定義します。

ほとんどのリンク型では、このアルゴリズムは何も行いません。リンク型にリンクヘッダーを処理する手順が定義されているかを素早く確認するには、概要表が役立ちます。

リンク処理オプションは構造体です。これには次の項目があります：

href（デフォルトは空文字列）
initiator（デフォルトは「link」）
integrity（デフォルトは空文字列）
type（デフォルトは空文字列）
暗号学的nonce メタデータ（デフォルトは空文字列）: 文字列
宛先（デフォルトは空文字列）: 宛先型。
crossorigin （デフォルトはCORSなし）: CORS設定属性の状態
リファラーポリシー（デフォルトは空文字列）: リファラーポリシー
ソース集合（デフォルトは null）: Nullまたはソース集合
基底URL: URL
オリジン: オリジン
環境: 環境
ポリシーコンテナー: ポリシーコンテナー
文書（デフォルトは null）: NullまたはDocument
文書準備完了時（デフォルトはnull）: NullまたはDocumentを受け取るアルゴリズム
フェッチ優先度（デフォルトは自動）: フェッチ優先度属性の状態

リンク処理オプションが、解析済みURLではなく基底URLとhrefを持つのは、 URLがオプションのソース集合の結果である可能性があるためです。

link要素 elを指定して要素からリンクオプションを作成するには：

documentをelのノード文書とします。
optionsを、次を持つ新しいリンク処理オプションとします。

crossorigin

elのcrossorigin コンテンツ属性の状態

リファラーポリシー

elのreferrerpolicy コンテンツ属性の状態

ソース集合

elのソース集合

基底URL

documentの文書基底URL

オリジン

documentのオリジン

環境

documentの関連設定オブジェクト

ポリシーコンテナー

documentのポリシーコンテナー

文書

document

暗号学的nonceメタデータ

elの[[CryptographicNonce]]内部スロットの現在の値

フェッチ優先度

elのfetchpriority コンテンツ属性の状態
elにhref属性がある場合、 optionsのhrefを、 elのhref属性の値に設定します。
elにintegrity 属性がある場合、optionsのintegrityを、 elのintegrity コンテンツ属性の値に設定します。
elにtype属性がある場合、 optionsのtypeを、 elのtype属性の値に設定します。
表明：optionsのhrefは空文字列ではないか、または optionsのソース集合はnullではありません。

link要素に href属性も imagesrcset 属性もない場合、リンクを表しません。
optionsを返します。

ヘッダーリストheadersを指定して、ヘッダーからリンクを抽出するには：

linksを新しいリストとします。
rawLinkHeadersを、headersから`Link`を取得、デコード、および分割した結果とします。
rawLinkHeadersの各linkHeaderについて反復します：
1. linkObjectを、linkHeaderを解析した結果とします。[WEBLINK]
2. linkObject["target_uri"]が存在しない場合、続行します。
3. linkObjectをlinksに追加します。
linksを返します。

Documentdoc、レスポンスresponse、および「pre-media」または「media」であるphaseを指定して、リンクヘッダーを処理するには：

linksを、responseのヘッダーリストからリンクを抽出した結果とします。
links内の各linkObjectについて反復します：
1. relをlinkObject["relation_type"]とします。
2. attribsをlinkObject["target_attributes"]とします。
3. 「srcset」、「imagesrcset」、または「media」のいずれかがattribsに存在する場合、 expectedPhaseを「media」とし、それ以外の場合は「pre-media」とします。
4. expectedPhaseがphaseでない場合、続行します。
5. attribs["media"]が存在し、かつattribs["media"]が環境に一致しない場合、続行します。
6. optionsを、次を持つ新しいリンク処理オプションとします。
  
  href
  
  linkObject["target_uri"]
  
  基底URL
  
  docの文書基底URL
  
  オリジン
  
  docのオリジン
  
  環境
  
  docの関連設定オブジェクト
  
  ポリシーコンテナー
  
  docのポリシーコンテナー
  
  文書
  
  doc
7. attribsおよびrelを指定して、optionsに解析済みヘッダー属性からリンクオプションを適用します。それがfalseを返した場合、返ります。
8. attribs["imagesrcset"]が存在し、かつattribs["imagesizes"]も存在する場合、optionsのソース集合を、 linkObject["target_uri"]、attribs["imagesrcset"]、 attribs["imagesizes"]、およびnullを指定してソース集合を作成した結果に設定します。
9. optionsを指定して、relのリンクヘッダーを処理する手順を実行します。

attribsおよび文字列relを指定して、リンク処理オプションoptionsに解析済みヘッダー属性からリンクオプションを適用するには：

relが「preload」である場合：
1. attribs["as"]が存在しない場合、falseを返します。
2. destinationを、attribs["as"]を変換した結果とします。
3. destinationがnullである場合、falseを返します。
4. optionsの宛先を destinationに設定します。
attribs["crossorigin"]が存在し、かつCORS設定属性のキーワードのいずれかにASCII大文字・小文字不区別で一致する場合、 optionsのcrossoriginを、そのキーワードに対応するCORS設定属性の状態に設定します。
attribs["integrity"]が存在する場合、optionsのintegrityを attribs["integrity"]に設定します。
attribs["referrerpolicy"]が存在し、かつ何らかのリファラーポリシーにASCII大文字・小文字不区別で一致する場合、 optionsのリファラーポリシーを、そのリファラーポリシーに設定します。
attribs["nonce"]が存在する場合、optionsのnonceをattribs["nonce"]に設定します。
attribs["type"]が存在する場合、optionsのtypeをattribs["type"]に設定します。
attribs["fetchpriority"]が存在し、かつフェッチ優先度属性のキーワードにASCII大文字・小文字不区別で一致する場合、 optionsのフェッチ優先度を、そのフェッチ優先度属性のキーワードに設定します。
trueを返します。

4.2.4.5 Early Hints

Status/103

Firefoxpreview+SafariいいえChrome103+

OperaいいえEdge103+

Edge（旧版）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Early Hintsにより、ユーザーエージェントは、ナビゲーションリクエストがサーバーによって完全に処理され、レスポンスコードが返される前に、文書で使用される可能性が高いリソースを投機的に読み込むなどの操作を実行できます。サーバーは、最終的なレスポンスを返す前に、103ステータスコードを持つレスポンスを返すことで、Early Hintsを示すことができます。[RFC8297]

互換性上の理由から、Early Hintsは通常HTTP/2以上で配信されますが、読みやすさのため、以下ではHTTP/1.1形式の表記を使用します。

たとえば、次のレスポンス列が与えられた場合：

103 Early Hint
Link: </image.png>; rel=preload; as=image

200 OK
Content-Type: text/html

<!DOCTYPE html>
...
<img src="/image.png">

HTMLコンテンツが到着する前に画像の読み込みが開始されます。

ナビゲーション中に返された最初のEarly Hintレスポンスだけが処理され、その後にオリジン間リダイレクトが続いた場合は破棄されます。

`Link` ヘッダーに加えて、103レスポンスにContent Security Policyヘッダーが含まれる場合があり、これはEarly Hintを処理するときに適用されます。

たとえば、次のレスポンス列が与えられた場合：

103 Early Hint
Content-Security-Policy: style-src: self;
Link: </style.css>; rel=preload; as=style

103 Early Hint
Link: </image.png>; rel=preload; as=image

302 Redirect
Location: /alternate.html

200 OK
Content-Security-Policy: style-src: none;
Link: </font.ttf>; rel=preload; as=font

最終的なリダイレクトチェーン内の最初のEarly Hintレスポンスだけが尊重されるため、フォントとスタイルは読み込まれ、画像は破棄されます。後のContent Security Policyヘッダーは、スタイルをフェッチするリクエストがすでに実行された後に到着しますが、スタイルは文書からアクセスできません。

レスポンスresponseおよび環境reservedEnvironmentを指定して、 Early Hintヘッダーを処理するには：

Early Hintの`Link` ヘッダーは、常に最終的なレスポンスの`Link` ヘッダーより先に処理され、その後にlink要素が処理されます。これは、Early Hintおよび最終レスポンスの`Link` ヘッダーの内容を、それぞれの順序でDocumentのhead要素の先頭に追加することと同等です。

earlyPolicyContainerを、responseおよび reservedEnvironmentを指定してフェッチレスポンスからポリシーコンテナーを作成した結果とします。

これにより、Early HintのレスポンスにContent Security Policyを含めることができ、 Early Hintのリクエストをフェッチするときに、そのポリシーが適用されます。
linksを、responseのヘッダーリストからリンクを抽出した結果とします。
earlyHintsを空のリストとします。
links内の各linkObjectについて反復します：

Early Hintのリンクヘッダーを受信した時点で、earlyRequestのフェッチを開始します。Documentが作成される前にレスポンスが返された場合、earlyResponseをそのフェッチのレスポンスに設定し、Documentが作成された時点で、 link要素であるかのようにプリロード済みリソースのマップで利用可能にすることでコミットします。Documentが先に作成された場合、レスポンスは利用可能になり次第コミットされます。
1. relをlinkObject["relation_type"]とします。
2. optionsを、次を持つ新しいリンク処理オプションとします。
  
  href
  
  linkObject["target_uri"]
  
  initiator
  
  「early-hint」
  
  基底URL
  
  responseのURL
  
  オリジン
  
  responseのURLのオリジン
  
  環境
  
  reservedEnvironment
  
  ポリシーコンテナー
  
  earlyPolicyContainer
3. attribsをlinkObject["target_attributes"]とします。
  
  Early Hintの処理の一部として扱われるのは、as、crossorigin、integrity、およびtype属性だけです。その他の属性、特にblocking、imagesrcset、imagesizes、および mediaは、Documentが作成された後にのみ適用されます。
4. attribsおよびrelを指定して、optionsに解析済みヘッダー属性からリンクオプションを適用します。それがfalseを返した場合、返ります。
5. optionsを指定して、relのリンクヘッダーを処理する手順を実行します。
6. optionsをearlyHintsに追加します。
Documentdocを指定した次のサブ手順を返します。earlyHints内の各optionsについて反復します：
1. optionsの文書準備完了時がnullである場合、 optionsの文書をdocに設定します。
2. それ以外の場合、optionsの文書準備完了時を docで呼び出します。

4.2.4.6 `link` 要素を使用して作成されたハイパーリンクをたどる手段のユーザーへの提供

対話型ユーザーエージェントは、文書内の各link 要素を使用して作成されたハイパーリンクをたどる手段を、そのユーザーインターフェース内のどこかでユーザーに提供しても構いません。このようなハイパーリンクをたどるアルゴリズムの呼び出しでは、userInvolvement引数を「browser UI」に設定しなければなりません。正確なインターフェースはこの仕様では定義されませんが、何らかの形式で（場合によっては簡略化して）、次の情報（以下で再び定義されるように、要素の属性から取得されます）を含めることができます：

この文書とリソースとの関係（rel 属性によって与えられます）
リソースのタイトル（title 属性によって与えられます）。
リソースのアドレス（href 属性によって与えられます）。
リソースの言語（hreflang 属性によって与えられます）。
リソースに最適な媒体（media 属性によって与えられます）。

ユーザーエージェントは、リソースの型（type 属性によって与えられます）など、その他の情報を含めることもできます。

4.2.5 `meta` 要素

Element/meta

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLMetaElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

カテゴリー：

メタデータコンテンツ。

itemprop 属性が存在する場合：フローコンテンツ。

itemprop 属性が存在する場合：フレージングコンテンツ。

この要素を使用できる文脈：

charset属性が存在する場合、または要素のhttp-equiv属性がエンコーディング宣言状態である場合：head要素内。

http-equiv 属性が存在するものの、エンコーディング宣言状態でない場合：head要素内。

http-equiv 属性が存在するものの、エンコーディング宣言状態でない場合：head要素の子であるnoscript要素内。

name属性が存在する場合：メタデータコンテンツが期待される場所。

itemprop 属性が存在する場合：メタデータコンテンツが期待される場所。

itemprop 属性が存在する場合：フレージングコンテンツが期待される場所。

コンテンツモデル：

何も含まない。

text/htmlでのタグの省略：

終了タグなし。

コンテンツ属性：

グローバル属性

name — メタデータ名

http-equiv — プラグマ指令

content — 要素の値

charset — 文字エンコーディング宣言

media — 適用対象の媒体

未分類。

[Exposed=Window]
interface HTMLMetaElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute DOMString name;
  [CEReactions, Reflect="http-equiv"] attribute DOMString httpEquiv;
  [CEReactions, Reflect] attribute DOMString content;
  [CEReactions, Reflect] attribute DOMString media;

  // also has obsolete members
};

meta要素は、title、base、link、style、および script要素を使用して表現できないさまざまな種類のメタデータを表します。

meta要素は、name属性によって文書レベルのメタデータを、http-equiv属性によってプラグマ指令を、HTML文書が文字列形式に直列化される場合（たとえば、ネットワーク経由での送信またはディスクへの保存のため）には、charset属性によってファイルの文字エンコーディング宣言を表すことができます。

name、http-equiv、charset、およびitemprop 属性のうち、正確に1つを指定しなければなりません。

name、http-equiv、または itemprop のいずれかを指定する場合、content属性も指定しなければなりません。それ以外の場合は、省略しなければなりません。

charset属性は、文書によって使用される文字エンコーディングを指定します。これは文字エンコーディング宣言です。属性が存在する場合、その値は文字列「utf-8」にASCII大文字・小文字不区別で一致しなければなりません。

meta要素の charset属性は、 XML文書では効果を持ちませんが、XMLとの間の移行を容易にするため、XML文書でも許可されています。

文書ごとに、charset属性を持つmeta要素は、 1つを超えて存在してはなりません。

content属性は、要素がこれらの目的で使用される場合に、文書メタデータまたはプラグマ指令の値を与えます。許可される値は、この仕様の後続の節で説明されるように、正確な文脈によって異なります。

meta要素がname属性を持つ場合、文書メタデータを設定します。文書メタデータは名前と値のペアとして表現され、meta要素のname属性が名前を与え、同じ要素のcontent属性が値を与えます。名前は、メタデータのどの側面を設定するかを指定します。有効な名前とその値の意味は、後続の節で説明されます。meta 要素にcontent属性がない場合、メタデータの名前と値のペアの値部分は空文字列です。

media属性は、メタデータがどの媒体に適用されるかを示します。値は有効なメディアクエリーリストでなければなりません。 nameがtheme-colorでない限り、media属性は処理モデルに影響せず、作成者は使用してはなりません。

4.2.5.1 標準メタデータ名

Element/meta/name

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer6+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

この仕様は、meta要素のname属性について、いくつかの名前を定義します。

名前は大文字・小文字を区別しません。また、ASCII大文字・小文字不区別で比較しなければなりません。

application-name

値は、ページが表すウェブアプリケーションの名前を与える短い自由形式の文字列でなければなりません。ページがウェブアプリケーションでない場合、application-name メタデータ名を使用してはなりません。ウェブアプリケーション名の翻訳を指定することができ、 lang属性を使用して、各名前の言語を指定します。

文書ごとに、特定の言語を持ち、name属性値が application-nameに ASCII大文字・小文字不区別で一致するmeta要素は、 1つを超えて存在してはなりません。

タイトルには特定の時点におけるページの状態に関連するステータスメッセージなどが含まれ、単なるアプリケーション名ではない場合があるため、ユーザーエージェントはUIでページのtitleよりもアプリケーション名を優先して使用しても構いません。

言語の順序付きリスト（たとえば、イギリス英語、アメリカ英語、英語）を指定して、使用するアプリケーション名を見つけるには、ユーザーエージェントは次の手順を実行しなければなりません：

languagesを言語のリストとします。
default languageを、Documentの文書要素の言語が存在し、かつその言語が不明でない場合、その言語とします。
default languageが存在し、それがlanguages内のどの言語とも同じでない場合、それをlanguagesに追加します。
winning languageを、languages内の最初の言語のうち、Document内に、 name属性値が application-nameに ASCII大文字・小文字不区別で一致し、その言語が対象の言語であるmeta要素が存在する言語とします。

どの言語にもそのようなmeta要素がない場合、返ります。指定されたアプリケーション名はありません。
Document内で、 name属性値が application-nameに ASCII大文字・小文字不区別で一致し、その言語がwinning languageである、ツリー順で最初のmeta要素の content属性の値を返します。

このアルゴリズムは、たとえばブックマークのラベル付けなど、ブラウザーがページ名を必要とする場合に使用されます。アルゴリズムに渡される言語は、ユーザーの優先言語です。

author

値は、ページの作成者の1人の名前を与える自由形式の文字列でなければなりません。

description

値は、ページを説明する自由形式の文字列でなければなりません。値は、たとえば検索エンジンなど、ページのディレクトリーで使用するのに適切でなければなりません。文書ごとに、name属性値が descriptionに ASCII大文字・小文字不区別で一致するmeta要素は、 1つを超えて存在してはなりません。

generator

値は、文書の生成に使用されたソフトウェアパッケージの1つを識別する自由形式の文字列でなければなりません。この値は、マークアップがソフトウェアによって生成されていないページ、たとえばユーザーがテキストエディターでマークアップを記述したページでは使用してはなりません。

「Frontweaver」というツールは、ページの生成に使用されたツールとして自身を識別するため、ページのhead要素内の出力に次のようなものを含めることができます：

<meta name=generator content="Frontweaver 8.2">

keywords

値はコンマ区切りトークンの集合でなければならず、それぞれがページに関連するキーワードです。

イギリスの高速道路で使用される書体に関するこのページでは、ユーザーがページを探すために使用する可能性があるいくつかのキーワードを、meta要素を使用して指定しています：

<!DOCTYPE HTML>
<html lang="en-GB">
 <head>
  <title>Typefaces on UK motorways</title>
  <meta name="keywords" content="british,type face,font,fonts,highway,highways">
 </head>
 <body>
  ...

この機能は歴史的に信頼できない方法で使用され、ユーザーの役に立たない方法で検索エンジンの結果をスパムするために、誤解を招くように使用されることさえあったため、多くの検索エンジンはこのようなキーワードを考慮しません。

作成者がページに適用されるものとして指定したキーワードのリストを取得するには、ユーザーエージェントは次の手順を実行しなければなりません：

keywordsを空のリストとします。
name属性と content属性を持ち、name属性値が keywordsにASCII大文字・小文字不区別で一致する各meta要素について：
1. 要素のcontent属性の値をコンマで分割します。
2. 結果のトークンがあれば、keywordsに追加します。
keywordsから重複をすべて削除します。
keywordsを返します。これは、作成者がページに適用されるものとして指定したキーワードのリストです。

値の信頼性について十分な確信がない場合、ユーザーエージェントはこの情報を使用するべきではありません。

たとえば、コンテンツ管理システムがシステム内のページのキーワード情報を使用して、サイト固有の検索エンジンの索引を作成することは合理的です。しかし、この情報を使用する大規模なコンテンツ集約サービスでは、一部のユーザーが不適切なキーワードを使用して、そのランキング機構を操作しようとする可能性が高いでしょう。

referrer

値は、Documentの既定のリファラーポリシーを定義するリファラーポリシーでなければなりません。[REFERRERPOLICY]

いずれかのmeta要素 elementが文書に挿入された場合、またはそのname属性もしくは content属性が変更された場合、ユーザーエージェントは次のアルゴリズムを実行しなければなりません：

elementが文書ツリー内にない場合、返ります。
elementが、値が「referrer」にASCII大文字・小文字不区別で一致するname属性を持たない場合、返ります。
elementがcontent 属性を持たない場合、またはその属性値が空文字列である場合、返ります。
valueを、elementのcontent 属性の値をASCII小文字に変換したものとします。

valueが次の表の第1列に示されたいずれかの値である場合、 valueを第2列に示された値に設定します：

旧来の値	リファラーポリシー
`never`	`no-referrer`
`default`	既定のリファラーポリシー
`always`	`unsafe-url`
`origin-when-crossorigin`	`origin-when-cross-origin`

valueがリファラーポリシーである場合、elementのノード文書のポリシーコンテナーのリファラーポリシーを policyに設定します。

歴史的な理由により、他の標準メタデータ名とは異なり、referrerの処理モデルは要素の削除に反応せず、ツリー順を使用しません。この状態では、最も最近挿入された、または最も最近変更されたmeta要素だけが効果を持ちます。

theme-color Element/meta/name/theme-color FirefoxいいえSafari15+Chrome🔰 73+ OperaいいえEdge🔰 79+ Edge（旧版）?Internet Explorerいいえ Firefox Android?Safari iOS?Chrome Android80+WebView AndroidいいえSamsung Internet6.2+Opera Androidいいえ

値は、CSSの<color>生成規則に一致する文字列でなければならず、ユーザーエージェントがページまたは周囲のユーザーインターフェースの表示をカスタマイズするために使用するべき推奨色を定義します。たとえば、ブラウザーはページのタイトルバーを指定された値で色付けしたり、タブバーやタスクスイッチャーの強調色として使用したりできます。

HTML文書内では、name属性値が theme-colorに ASCII大文字・小文字不区別で一致するすべてのmeta要素の間で、 media属性値は一意でなければなりません。

この標準自体は、そのテーマ色として「WHATWG green」を使用しています：

<!DOCTYPE HTML>
<title>HTML Standard</title>
<meta name="theme-color" content="#3c790a">
...

media属性は、提供された色を使用するべき文脈を説明するために使用できます。

ダークモードでのみ「WHATWG green」をこの標準のテーマ色として使用する場合、 prefers-color-schemeメディア機能を使用できます：

<!DOCTYPE HTML>
<title>HTML Standard</title>
<meta name="theme-color" content="#3c790a" media="(prefers-color-scheme: dark)">
...

ページのテーマ色を取得するには、ユーザーエージェントは次の手順を実行しなければなりません：

candidate elementsを、次の基準を満たすすべてのmeta要素のツリー順のリストとします：
- 要素が文書ツリー内にある。
- 要素が、値がtheme-colorに ASCII大文字・小文字不区別で一致するname属性を持つ。かつ
- 要素がcontent 属性を持つ。
candidate elements内の各elementについて：
1. elementがmedia属性を持ち、 elementのmedia属性の値が環境に一致しない場合、続行します。
2. valueを、elementのcontent 属性の値から先頭および末尾のASCII空白を除去した結果とします。
3. colorを、valueを解析した結果とします。
4. colorが失敗でない場合、colorを返します。
何も返しません（ページにテーマ色はありません）。

いずれかのmeta要素が文書に挿入された場合、または文書から削除された場合、既存のmeta要素のname、content、または media属性が変更された場合、あるいは、いずれかのmeta要素のmedia属性値が、現在環境に一致する可能性がある、または一致しなくなる可能性があるように環境が変化した場合、ユーザーエージェントは上記のアルゴリズムを再実行し、その結果を影響を受けるUIに適用しなければなりません。

UIでテーマ色を使用するとき、ユーザーエージェントは対象のUIにより適したものにするため、実装固有の方法で色を調整しても構いません。たとえば、ユーザーエージェントがテーマ色を背景として使用し、その上に白いテキストを表示する場合、十分なコントラストを確保するため、そのUI部分ではより暗いテーマ色の変種を使用することがあります。

color-scheme

ページ内のすべてのCSSが読み込まれるのを待つのではなく、目的のカラースキームでページ背景を直ちにレンダリングする際にユーザーエージェントを支援するため、'color-scheme'値をmeta要素で提供できます。

値は、CSSの'color-scheme'プロパティ値の構文に一致する文字列でなければなりません。これはページがサポートするカラースキームを決定します。

文書ごとに、name属性値が color-schemeに ASCII大文字・小文字不区別で一致するmeta要素は、 1つを超えて存在してはなりません。

次の宣言は、ページが暗い背景色と明るい前景色を持つカラースキームを認識し、処理できることを示します：

<meta name="color-scheme" content="dark">

ページがサポートするカラースキームを取得するには、ユーザーエージェントは次の手順を実行しなければなりません：

candidate elementsを、次の基準を満たすすべてのmeta要素のツリー順のリストとします：
- 要素が文書ツリー内にある。
- 要素が、値がcolor-schemeに ASCII大文字・小文字不区別で一致するname属性を持つ。かつ
- 要素がcontent 属性を持つ。
candidate elements内の各elementについて：
1. parsedを、elementのcontent 属性の値を指定してコンポーネント値のリストを解析した結果とします。
2. parsedが有効なCSSの'color-scheme'プロパティ値である場合、 parsedを返します。
nullを返します。

いずれかのmeta要素が文書に挿入された場合、または文書から削除された場合、あるいは既存のmeta要素の name属性または content属性が変更された場合、ユーザーエージェントは上記のアルゴリズムを再実行しなければなりません。

これらの規則は一致するものを見つけるまで後続の要素を検査するため、作成者は旧来のユーザーエージェント向けのフォールバックを処理するため、複数の値を提供できます。プロパティに対するCSSのフォールバックの動作とは逆に、複数のmeta要素は、新しい値の後に旧来の値を配置する必要があります。

4.2.5.2 その他のメタデータ名

誰でも独自の定義済みメタデータ名集合の拡張を作成して使用できます。そのような拡張を登録する要件はありません。

ただし、次のいずれかの場合には、新しいメタデータ名を作成するべきではありません：

名前自体がURLである場合、または付随するcontent属性の値がURLである場合。このような場合、新しいメタデータ名を作成する代わりに、定義済みリンク型集合の拡張として登録することが推奨されます。
名前が、ユーザーエージェントに処理要件があると期待されるもののためである場合。この場合は標準化されるべきです。

また、新しいメタデータ名を作成して使用する前に、すでに使用されているメタデータ名を選択すること、すでに使用されているメタデータ名の目的を重複させること、および新しい標準化名が選択した名前と衝突することを避けるため、WHATWG WikiのMetaExtensionsページを参照することが推奨されます。[WHATWGWIKI]

誰でもいつでもWHATWG WikiのMetaExtensionsページを編集して、メタデータ名を追加できます。新しいメタデータ名は、次の情報を使用して指定できます：

キーワード

定義される実際の名前です。名前は、他の定義済みの名前と紛らわしく似ているべきではありません（たとえば、大文字・小文字だけが異なるなど）。

簡潔な説明

値に要求される形式を含む、メタデータ名の意味についての短い非規範的な説明です。

仕様

メタデータ名のセマンティクスおよび要件についてのより詳細な説明へのリンクです。 Wiki上の別のページでも、外部ページへのリンクでも構いません。

同義語

正確に同じ処理要件を持つ他の名前のリストです。作成者は、同義語として定義された名前を使用するべきではありません（これらは、ユーザーエージェントが旧来のコンテンツをサポートできるようにすることだけを目的としています）。実際に使用されていない同義語は誰でも削除できます。旧来のコンテンツとの互換性のために同義語として処理する必要がある名前だけを、この方法で登録します。

状態

次のいずれかです：

提案済み: その名前は広範なピアレビューおよび承認を受けていません。誰かがそれを提案し、使用しているか、まもなく使用する予定です。
承認済み: その名前は広範なピアレビューおよび承認を受けています。誤った方法で名前を使用する場合を含め、その名前を使用するページの処理方法を明確に定義する仕様があります。
廃止: そのメタデータ名は広範なピアレビューを受け、不十分であると判断されました。既存のページはこのメタデータ名を使用していますが、新しいページは使用を避けるべきです。「簡潔な説明」および「仕様」の項目には、代わりに作成者が使用するべきものがあれば、その詳細が示されます。

メタデータ名が既存の値と重複していることが判明した場合、その名前を削除し、既存の値の同義語として記載するべきです。

メタデータ名が「提案済み」状態で追加され、1か月以上使用も仕様化もされない場合、 WHATWG WikiのMetaExtensionsページから削除しても構いません。

メタデータ名が「提案済み」状態で追加され、既存の値と重複していることが判明した場合、削除して既存の値の同義語として記載するべきです。メタデータ名が「提案済み」状態で追加され、有害であることが判明した場合、「廃止」状態に変更するべきです。

誰でもいつでも状態を変更できますが、上記の定義に従ってのみ変更するべきです。

4.2.5.3 プラグマ指令

http-equiv属性が meta要素に指定されている場合、その要素はプラグマ指令です。

http-equivという名前にもかかわらず、プラグマ指令はHTTPヘッダーとはほぼ完全に無関係です。実装者およびウェブ開発者は、両者を完全に別のものと考え、この名前は歴史的な偶然によるものと考えるのが最善です。

より詳しく言うと、refresh キーワードは、対応する`Refresh`ヘッダーと同じ処理モデルを持ちますが、それ以外の標準化されたすべてのプラグマ指令は、同様の名前を持つヘッダーとは少なくともわずかに異なる動作をします。（そして通常は大きく異なる動作をします。）

新しい文書レベルのプラグマまたはHTTPヘッダー制御の切り替え機能の追加を検討している実装者や仕様作成者は、この不一致に注意し、HTTPヘッダーとhttp-equivプラグマの両方に同じまたは類似した動作を追加して、既存の混乱を永続化させることを避けるべきです。代わりに、HTTPヘッダーだけを提供することを検討するか、文書内プラグマが必要な場合は、charset属性で使用されるモデルと同様に、metaに新しい属性を追加することを検討してください。（DOMは変更可能であるため、文書内プラグマを避けることがより適切な選択であることが多い点に注意してください。したがって、開発者がmeta要素を追加、削除、または変更しない単純な場合であっても、ポリシーは解析中に未適用から適用済みへと変化し、複雑な影響を及ぼす可能性があります。）

http-equiv 属性は、次のキーワードと状態を持つ列挙属性です：

キーワード	適合	状態	簡潔な説明
`content-language`	いいえ	コンテンツ言語	プラグマ設定による既定の言語を設定します。
`content-type`		エンコーディング宣言	`charset`を設定する別形式。
`default-style`		既定のスタイル	既定のCSSスタイルシート集合の名前を設定します。
`refresh`		更新	時間指定リダイレクトとして動作します。
`set-cookie`	いいえ	Set-Cookie	効果はありません。
`x-ua-compatible`		X-UA-Compatible	実際には、Internet Explorerが仕様により厳密に従うことを促します。
`content-security-policy`		コンテンツセキュリティポリシー	`Document`にContent Security Policyを適用します。

meta要素が文書に挿入されたとき、そのhttp-equiv属性が存在し、上記の状態のいずれかを表す場合、ユーザーエージェントは、次のリストで説明されるように、その状態に適したアルゴリズムを実行しなければなりません：

コンテンツ言語状態 (http-equiv="content-language")

この機能は非適合です。作成者には代わりにlang属性を使用することが推奨されます。

このプラグマはプラグマ設定による既定の言語を設定します。このようなプラグマが正常に処理されるまでは、プラグマ設定による既定の言語はありません。

meta要素に content 属性がない場合、返ります。
要素のcontent属性に U+002C COMMA文字（,）が含まれる場合、返ります。
inputを、要素のcontent属性の値とします。
positionをinputの最初の文字に向けます。
positionを指定して、input内のASCII空白をスキップします。
positionを指定して、inputからASCII空白でないコードポイント列を収集します。
candidateを、前の手順の結果として得られた文字列とします。
candidateが空文字列である場合、返ります。
プラグマ設定による既定の言語を candidateに設定します。

値が空白区切りの複数のトークンで構成されている場合、最初のトークン以降は無視されます。

このプラグマは、同じ名前のHTTP`Content-Language` ヘッダーとほぼ、しかし完全には異なります。 [HTTP]

エンコーディング宣言状態 (http-equiv="content-type")

エンコーディング宣言状態は、 charset属性を設定する別形式にすぎません。これは文字エンコーディング宣言です。この状態に関するユーザーエージェント要件は、すべて仕様の解析節で処理されます。

エンコーディング宣言状態にあるhttp-equiv属性を持つmeta要素では、 content属性は、「text/html;」の後に任意の数のASCII空白が任意で続き、さらに「charset=utf-8」が続く文字列にASCII大文字・小文字不区別で一致する値を持たなければなりません。

文書には、エンコーディング宣言状態にあるhttp-equiv属性を持つmeta要素と、 charset属性が存在するmeta要素の両方を含めてはなりません。

エンコーディング宣言状態は HTML文書で使用できますが、その状態にあるhttp-equiv属性を持つ要素をXML文書で使用してはなりません。

既定のスタイル状態 (http-equiv="default-style") Alternative_style_sheets 1つのエンジンでのみサポートされています。 Firefox3+Safari?Chrome1–48 OperaはいEdgeいいえ Edge（旧版）?Internet Explorer8+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

このプラグマは、既定のCSSスタイルシート集合の名前を設定します。

meta要素に content 属性がない場合、またはその属性値が空文字列である場合、返ります。
要素のcontent属性の値を名前として、優先CSSスタイルシート集合名を変更します。[CSSOM]

更新状態 (http-equiv="refresh")

このプラグマは時間指定リダイレクトとして動作します。

Documentオブジェクトには、関連付けられた宣言的に更新する予定（ブール値）があります。初期値はfalseです。

meta要素に content 属性がない場合、またはその属性値が空文字列である場合、返ります。
inputを、要素のcontent属性の値とします。
meta要素のノード文書、input、およびmeta要素を指定して、共有宣言的更新手順を実行します。

Documentオブジェクト document、文字列input、および省略可能なmeta要素 metaを指定した共有宣言的更新手順は、次のとおりです：

documentの宣言的に更新する予定がtrueである場合、返ります。
positionをinputの最初のコードポイントに向けます。
positionを指定して、input内のASCII空白をスキップします。
timeを0とします。
positionを指定して、inputからASCII数字であるコードポイント列を収集し、 timeStringをその結果とします。
timeStringが空文字列である場合：
1. positionが指すinput内のコードポイントがU+002E（.）でない場合、返ります。
それ以外の場合、timeStringを非負整数を解析する規則で解析した結果をtimeに設定します。
positionを指定して、inputからASCII数字およびU+002E FULL STOP文字（.）であるコードポイント列を収集します。収集した文字は無視します。
urlRecordを、documentのURLとします。
positionがinputの末尾を越えていない場合：
1. positionが指すinput内のコードポイントがU+003B（;）、U+002C（,）、またはASCII空白でない場合、返ります。
2. positionを指定して、input内のASCII空白をスキップします。
3. positionが指すinput内のコードポイントがU+003B（;）またはU+002C（,）である場合、 positionを次のコードポイントへ進めます。
4. positionを指定して、input内のASCII空白をスキップします。
positionがinputの末尾を越えていない場合：
1. urlStringを、positionにあるコードポイントから文字列の末尾までの inputの部分文字列とします。
2. positionが指すinput内のコードポイントがU+0055（U）またはU+0075（u）である場合、 positionを次のコードポイントへ進めます。それ以外の場合、 引用符をスキップとラベル付けされた手順へ移動します。
3. positionが指すinput内のコードポイントがU+0052（R）またはU+0072（r）である場合、 positionを次のコードポイントへ進めます。それ以外の場合、解析とラベル付けされた手順へ移動します。
4. positionが指すinput内のコードポイントがU+004C（L）またはU+006C（l）である場合、 positionを次のコードポイントへ進めます。それ以外の場合、解析とラベル付けされた手順へ移動します。
5. positionを指定して、input内のASCII空白をスキップします。
6. positionが指すinput内のコードポイントがU+003D（=）である場合、 positionを次のコードポイントへ進めます。それ以外の場合、解析とラベル付けされた手順へ移動します。
7. positionを指定して、input内のASCII空白をスキップします。
8. 引用符をスキップ：positionが指すinput内のコードポイントがU+0027（'）またはU+0022（"）である場合、 quoteをそのコードポイントとし、positionを次のコードポイントへ進めます。それ以外の場合、 quoteを空文字列とします。
9. urlStringを、positionにあるコードポイントから文字列の末尾までの inputの部分文字列に設定します。
10. quoteが空文字列でなく、urlString内にquoteと等しいコードポイントがある場合、そのコードポイントでurlStringを切り詰め、それとそれ以降のすべてのコードポイントを削除します。
11. 解析：urlStringをdocumentに対してURLをエンコーディング解析した結果を urlRecordに設定します。
12. urlRecordが失敗である場合、返ります。
13. urlRecordのスキームが「javascript」である場合、返ります。
documentの宣言的に更新する予定をtrueに設定します。
次の手順の1つ以上を実行します：
- 更新の期限が到来した後（以下で定義）、ユーザーがリダイレクトをキャンセルしておらず、かつmetaが指定されている場合はdocumentの有効なサンドボックス化フラグ集合にサンドボックス化された自動機能閲覧コンテキストフラグが設定されていない場合、documentを使用して documentのノードナビゲーション可能を urlRecordへナビゲートし、historyHandlingを「replace」に設定します。
  
  前の段落の目的上、次の2つの条件のうち遅い方が発生した時点で、更新の期限が到来したものとします：
  - documentの完全読み込み時刻から少なくとも time秒が経過していること。ユーザーまたはユーザーエージェントの設定を考慮して調整します。
  - metaが指定されている場合、metaが文書documentに挿入されてから少なくとも time秒が経過していること。ユーザーまたはユーザーエージェントの設定を考慮して調整します。
  ここではmetaのノード文書ではなく、documentを使用することが重要です。最初の手順群から更新期限の到来までの間に、そのノード文書が変わっている可能性があり、またmetaは常に指定されるわけではないためです（HTTP`Refresh`ヘッダーの場合）。
- 選択されたときに、documentを使用してdocumentのノードナビゲーション可能を urlRecordへナビゲートするインターフェースをユーザーに提供します。
- 何もしません。
さらに、ユーザーエージェントは、他のあらゆる場合と同様に、タイマーの状態、時間指定リダイレクトの宛先など、その動作のあらゆる側面をユーザーに知らせても構いません。

更新状態にあるhttp-equiv属性を持つmeta要素では、 content属性は、次のいずれかで構成される値を持たなければなりません：

有効な非負整数だけ。または
有効な非負整数の後にU+003B SEMICOLON文字（;）、1つ以上のASCII空白、文字列「URL」にASCII大文字・小文字不区別で一致する部分文字列、 U+003D EQUALS SIGN文字（=）、そしてリテラルのU+0027 APOSTROPHE（'）または U+0022 QUOTATION MARK（"）文字で始まらない有効なURL文字列が続くもの。

前者の場合、整数はページが再読み込みされるまでの秒数を表します。後者の場合、整数はページが指定されたURLのページに置き換えられるまでの秒数を表します。

ニュース組織のトップページでは、ページが5分ごとにサーバーから自動的に再読み込みされるように、ページのhead要素に次のマークアップを含めることができます：

<meta http-equiv="Refresh" content="300">

一連の各ページを次のページへ更新させることで、ページの列を自動スライドショーとして使用できます。たとえば次のようなマークアップを使用します：

<meta http-equiv="Refresh" content="20; URL=page4.html">

Set-Cookie状態 (http-equiv="set-cookie")

このプラグマは非適合であり、効果はありません。

ユーザーエージェントはこのプラグマを無視する必要があります。

X-UA-Compatible状態 (http-equiv="x-ua-compatible")

実際には、このプラグマはInternet Explorerが仕様により厳密に従うことを促します。

X-UA-Compatible状態にあるhttp-equiv属性を持つmeta要素では、 content属性は、文字列「IE=edge」にASCII大文字・小文字不区別で一致する値を持たなければなりません。

ユーザーエージェントはこのプラグマを無視する必要があります。

コンテンツセキュリティポリシー状態 (http-equiv="content-security-policy")

このプラグマは、Documentに Content Security Policyを適用します。[CSP]

meta要素が head要素の子でない場合、返ります。
meta要素に content 属性がない場合、またはその属性値が空文字列である場合、返ります。
policyを、meta要素の content 属性値に対して、ソースを「meta」、処置を「enforce」としてContent Security Policyの直列化されたContent Security Policyを解析するアルゴリズムを実行した結果とします。
policyから、report-uri、 frame-ancestors、およびsandbox 指令のすべての出現を削除します。
policyというポリシーを適用します。

コンテンツセキュリティポリシー状態にあるhttp-equiv属性を持つmeta要素では、 content属性は、有効なContent Security Policyで構成される値を持たなければなりませんが、report-uri、 frame-ancestors、またはsandbox 指令を含めてはなりません。 content属性で指定されたContent Security Policyは、現在の文書に適用されます。[CSP]

meta要素を文書に挿入する時点で、一部のリソースがすでにフェッチされている可能性があります。たとえば、コンテンツセキュリティポリシー状態にあるhttp-equiv 属性を持つmeta要素を動的に挿入する前に、画像が利用可能な画像のリストに格納されている場合があります。すでにフェッチされたリソースは、後からContent Security Policyが適用されても、ブロックされる保証はありません。

ページは、インラインJavaScriptの実行を防ぎ、すべてのプラグインコンテンツをブロックすることで、クロスサイトスクリプティング攻撃のリスクを軽減することを選択できます。たとえば次のようなポリシーを使用します：

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'">

文書内には、特定の状態ごとにmeta要素を同時に 1つを超えて存在させてはなりません。

4.2.5.4 文書の文字エンコーディングの指定

文字エンコーディング宣言は、文書の保存または送信に使用される文字エンコーディングを指定する機構です。

Encoding標準は、UTF-8 文字エンコーディングの使用と、それを識別するための「utf-8」エンコーディングラベルの使用を要求します。これらの要件により、文書の文字エンコーディング宣言が存在する場合は、「utf-8」にASCII大文字・小文字不区別で一致するエンコーディングラベルを指定する必要があります。文字エンコーディング宣言が存在するかどうかにかかわらず、文書をエンコードするために実際に使用される文字エンコーディングはUTF-8でなければなりません。[ENCODING]

上記の規則を強制するため、作成ツールは新しく作成する文書に対してUTF-8を既定で使用しなければなりません。

次の制約も適用されます：

文字エンコーディング宣言は、文字参照またはいかなる種類の文字エスケープも使用せずに直列化しなければなりません。
文字エンコーディング宣言を含む要素は、文書の最初の 1024バイト以内に完全に直列化しなければなりません。

さらに、meta要素に関するいくつかの制約により、文書ごとにmetaベースの文字エンコーディング宣言は 1つしか存在できません。

HTML文書がBOMで始まらず、そのエンコーディングがContent-Typeメタデータによって明示的に与えられておらず、かつ文書がiframeのsrcdoc文書でない場合、エンコーディングは、charset属性を持つmeta要素、またはエンコーディング宣言状態にあるhttp-equiv属性を持つmeta要素を使用して指定しなければなりません。

すべての文字がASCII範囲内にある場合でも、文字エンコーディング宣言は必要です（Content-Typeメタデータ内、またはファイル内で明示的に指定）。フォームにユーザーが入力した非ASCII文字、スクリプトによって生成されたURLなどを処理するために、文字エンコーディングが必要であるためです。

UTF-8以外のエンコーディングを使用すると、既定で文書の文字エンコーディングを使用するフォーム送信や URLエンコーディングで、予期しない結果になる可能性があります。

文書がiframeのsrcdoc文書である場合、文書は文字エンコーディング宣言を持ってはなりません。（この場合、ソースはiframeを含む文書の一部であるため、すでにデコードされています。）

XMLでは、必要に応じて、インラインの文字エンコーディング情報にはXML宣言を使用するべきです。

HTMLで文字エンコーディングがUTF-8であることを宣言するには、作成者は文書の上部付近（head要素内）に次のマークアップを含めることができます：

<meta charset="utf-8">

XMLでは、代わりにマークアップの最上部でXML宣言を使用します：

<?xml version="1.0" encoding="utf-8"?>

4.2.6 `style` 要素

Element/style

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera3.5+Edge79+

Edge（旧版）12+Internet Explorer3+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

HTMLStyleElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLStyleElement/media

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

カテゴリー：

メタデータコンテンツ。

この要素を使用できる文脈：

メタデータコンテンツが期待される場所。

head要素の子である noscript要素内。

コンテンツモデル：

適合するスタイルシートを与えるテキスト。

text/htmlでのタグの省略：

どちらのタグも省略できません。

コンテンツ属性：

グローバル属性

media — 適用対象の媒体

blocking — 要素が潜在的にレンダリングをブロックするかどうか

また、title属性にはこの要素上で特別なセマンティクスがあります：CSSスタイルシート集合名

未分類。

[Exposed=Window]
interface HTMLStyleElement : HTMLElement {
  [HTMLConstructor] constructor();

  attribute boolean disabled;
  [CEReactions, Reflect] attribute DOMString media;
  [SameObject, PutForwards=value, Reflect] readonly attribute DOMTokenList blocking;

  // also has obsolete members
};
HTMLStyleElement includes LinkStyle;

style要素により、作成者はCSSスタイルシートを文書に埋め込むことができます。style要素は、スタイリング処理モデルへの複数の入力の1つです。この要素はユーザー向けのコンテンツを表しません。

HTMLStyleElement/disabled

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge（旧版）13+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

disabledゲッターの手順は次のとおりです：

thisに関連付けられたCSSスタイルシートがない場合、 falseを返します。
thisの関連付けられたCSSスタイルシートの無効化フラグが設定されている場合、 trueを返します。
falseを返します。

disabledセッターの手順は次のとおりです：

thisに関連付けられたCSSスタイルシートがない場合、返ります。
指定された値がtrueである場合、thisの関連付けられたCSSスタイルシートの無効化フラグを設定します。それ以外の場合、thisの関連付けられたCSSスタイルシートの無効化フラグを解除します。

重要な点として、disabled属性への代入は、 style要素に関連付けられたCSSスタイルシートがある場合にのみ効果を持ちます：

const style = document.createElement('style');
style.disabled = true;
style.textContent = 'body { background-color: red; }';
document.body.append(style);
console.log(style.disabled); // false

media属性は、スタイルがどの媒体に適用されるかを示します。値は有効なメディアクエリーリストでなければなりません。ユーザーエージェントは、media属性の値が環境に一致し、その他の関連条件が適用される場合にスタイルを適用しなければならず、それ以外の場合は適用してはなりません。

スタイルの適用範囲は、たとえばCSSで@mediaブロックを使用することにより、さらに制限される場合があります。この仕様は、そのような追加の制約または要件を上書きしません。

media属性を省略した場合のデフォルトは「all」です。これは、既定ではスタイルがすべての媒体に適用されることを意味します。

blocking属性はブロッキング属性です。

Alternative_style_sheets

1つのエンジンでのみサポートされています。

Firefox3+Safari?Chrome1–48

OperaはいEdgeいいえ

Edge（旧版）?Internet Explorer8+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

style要素上のtitle属性はCSSスタイルシート集合を定義します。style要素にtitle属性がない場合、タイトルはありません。祖先のtitle属性はstyle要素には適用されません。style要素が文書ツリー内にない場合、title属性は無視されます。[CSSOM]

style要素上のtitle属性は、link要素上のtitle属性と同様に、タイトルを持たないstyleブロックが親要素のタイトルを継承しない点で、グローバルなtitle属性とは異なります。そのブロックには単にタイトルがありません。

style要素の子テキスト内容は、適合するスタイルシートのものでなければなりません。

style要素が、そのノード文書のパーサーによって作成された場合、その要素は暗黙的に潜在的なレンダリングブロッキングです。

ユーザーエージェントは、次のいずれかの条件が発生するたびに、styleブロックを更新するアルゴリズムを実行しなければなりません：

要素がHTMLパーサーまたはXMLパーサーの開いている要素のスタックから取り出された場合。
要素がHTMLパーサーまたはXMLパーサーの開いている要素のスタック上になく、かつ接続状態になった場合、または切断状態になった場合。
要素がHTMLパーサーまたはXMLパーサーの開いている要素のスタック上になく、かつその子変更手順が実行された場合。

styleブロックを更新するアルゴリズムは次のとおりです：

elementをstyle要素とします。
elementに関連付けられたCSSスタイルシートがある場合、対象のCSSスタイルシートを削除します。
elementが接続されていない場合、返ります。
elementのtype属性が存在し、その値が空文字列でも「text/css」にASCII大文字・小文字不区別で一致するものでもない場合、返ります。

特に、「text/css; charset=utf-8」のようなパラメーターを持つtype値は、このアルゴリズムを早期に終了させます。
要素のインライン動作はContent Security Policyによってブロックされるべきか？アルゴリズムを、style要素、「style」、およびstyle要素の子テキスト内容に対して実行した結果が「Blocked」である場合、返ります。[CSP]
次のプロパティを持つCSSスタイルシートを作成します：

型

text/css

所有者ノード

element

媒体

elementのmedia属性。

これは属性の現在の値のコピーではなく、（現時点では存在しない可能性がある）属性への参照です。CSSOMは、属性が動的に設定、変更、または削除された場合に何が起こるかを定義します。

タイトル

elementが文書ツリー内にある場合は、 elementのtitle属性、それ以外の場合は空文字列。

ここでも、これは属性への参照です。

代替フラグ

未設定。

オリジンクリーンフラグ

設定済み。

場所

親CSSスタイルシート

所有者CSS規則

null

無効化フラグ

既定値のまま。

CSS規則

未初期化のまま。

これは正しくないように思われます。おそらく要素の子テキスト内容を使用するべきでしょうか？ issue #2997として追跡されています。
elementがスクリプトブロッキングスタイルシートに寄与する場合、elementをそのノード文書のスクリプトブロッキングスタイルシート集合に追加します。
elementのmedia属性の値が環境に一致し、elementが潜在的にレンダリングをブロックする場合、 elementでレンダリングをブロックします。

スタイルシートの重要なサブリソースがある場合、その取得試行が完了した後、またはスタイルシートに重要なサブリソースがない場合は、スタイルシートが解析および処理された後、ユーザーエージェントは次の手順を実行しなければなりません：

重要なサブリソースのフェッチは明確に定義されていません。おそらくissue #968が、その最善の解決策です。それまでは、あらゆる重要なサブリソースのリクエストについて、そのレンダリングブロッキングを、style要素が現在レンダリングをブロックしているかどうかに設定するべきです。

elementを、対象のスタイルシートに関連付けられたstyle要素とします。
successをtrueとします。
スタイルシートのいずれかの重要なサブリソースの取得試行が何らかの理由（たとえばDNSエラー、HTTP 404レスポンス、接続の早期終了、サポートされていないContent-Type）で失敗した場合、successをfalseに設定します。

CSS解析エラーやPNGデコードエラーなど、コンテンツ固有のエラーは successに影響しないことに注意してください。
elementおよび次の手順を指定して、ネットワーキングタスクソース上に要素タスクをキューに入れます：
1. successがtrueである場合、elementでloadという名前のイベントを発火します。
2. それ以外の場合、elementでerrorという名前のイベントを発火します。
3. elementがスクリプトブロッキングスタイルシートに寄与する場合：
  1. 表明：elementのノード文書のスクリプトブロッキングスタイルシート集合はelementを含みます。
  2. elementを、そのノード文書のスクリプトブロッキングスタイルシート集合から削除します。
4. elementでレンダリングのブロックを解除します。

要素は、スタイルシートの重要なサブリソースがある場合、その取得試行がすべて完了するまで、要素のノード文書のloadイベントを遅延しなければなりません。

この仕様はスタイルシステムを指定しませんが、ほとんどのウェブブラウザーがCSSをサポートすることが期待されます。[CSS]

LinkStyle インターフェースもこの要素によって実装されます。[CSSOM]

次の文書では、作品のタイトルとラテン語の単語を既定の斜体のままにしつつ、強調箇所を斜体ではなく明るい赤色のテキストとしてスタイル設定しています。適切な要素を使用することで文書の再スタイル設定が容易になることを示しています。

<!DOCTYPE html>
<html lang="en-US">
 <head>
  <title>My favorite book</title>
  <style>
   body { color: black; background: white; }
   em { font-style: normal; color: red; }
  </style>
 </head>
 <body>
  <p>My <em>favorite</em> book of all time has <em>got</em> to be
  <cite>A Cat's Life</cite>. It is a book by P. Rahmel that talks
  about the <i lang="la">Felis catus</i> in modern human society.</p>
 </body>
</html>

4.2.7 スタイル設定とスクリプトの相互作用

スタイルシートが他のリソースを参照していない場合（たとえば、@import規則を持たない style 要素によって与えられる内部スタイルシートであった場合）、スタイル規則はスクリプトから直ちに利用可能にしなければなりません。それ以外の場合、スタイル規則は、イベントループがレンダリングを更新する手順に到達した時点でのみ、スクリプトから利用可能にしなければなりません。

HTMLパーサーまたはXMLパーサーのDocumentの文脈にある要素 elは、次のすべてがtrueである場合、スクリプトブロッキングスタイルシートに寄与します：

elは、そのDocumentのパーサーによって作成された。
elは、style 要素、またはelがパーサーによって作成された時点でスタイル設定処理モデルに寄与する外部リソースリンクであったlink 要素のいずれかである。
elのmedia属性の値が環境に一致する。
要素がパーサーによって作成された時点で、elのスタイルシートが有効であった。
イベントループが最後に手順1へ到達した時点で、elのルートがそのDocumentであった。
ユーザーエージェントが、その特定のスタイルシートの読み込みをまだ断念していない。ユーザーエージェントは、いつでもスタイルシートの読み込みを断念しても構いません。

スタイルシートが読み込まれる前にその読み込みを断念し、その後も最終的にはスタイルシートが読み込まれた場合、スクリプトが誤った情報を使用して動作する可能性があります。たとえば、スタイルシートが要素の色を緑に設定していても、結果のスタイルを検査するスクリプトがシートの読み込み前に実行された場合、スクリプトは要素が黒（または既定の色）であると判断し、その結果、不適切な選択を行う可能性があります（たとえば、ページ上の別の場所の色として緑ではなく黒を使用することを決定するなど）。実装者は、スクリプトが誤った情報を使用する可能性と、低速なネットワークリクエストの完了を待つ間何もしないことによる性能への影響とのバランスを取らなければなりません。

上記の規則に対応する規則が <?xml-stylesheet?> 処理命令にも適用されることが予想されます。しかし、これはまだ十分に調査されていません。

Documentは、初期状態で空である順序付き集合であるスクリプトブロッキングスタイルシート集合を持ちます。

Document documentは、次の手順がtrueを返す場合、スクリプトをブロックするスタイルシートを持ちます：

documentのスクリプトブロッキングスタイルシート集合が空でない場合、 trueを返します。
documentのノードナビゲーション可能がnullである場合、 falseを返します。
containerDocumentを、documentのノードナビゲーション可能のコンテナー文書とします。
containerDocumentがnullでなく、containerDocumentのスクリプトブロッキングスタイルシート集合が空でない場合、 trueを返します。
falseを返します。

Documentは、スクリプトをブロックするスタイルシートを持たない場合、スクリプトをブロックするスタイルシートを持ちません。

4.3 セクション

Introduction_to_HTML/Document_and_website_structure#HTML_for_structuring_content

現在のすべてのエンジンでサポートされています。

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge（旧版）12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

4.3.1 `body` 要素

Element/body

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLBodyElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer4+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

なし。

html要素内の2番目の要素として。

text/htmlにおけるタグの省略：

body要素の開始タグは、要素が空である場合、またはbody要素内の最初のものが ASCII空白でもコメントでもない場合に省略できます。ただし、 body要素内の最初のものが meta、noscript、 link、script、style、またはtemplate要素である場合を除きます。

body要素の終了タグは、 body要素の直後にコメントが続かない場合に省略できます。

コンテンツ属性：

グローバル属性

onafterprint

onbeforeprint

onbeforeunload

onhashchange

onlanguagechange

onmessage

onmessageerror

onoffline

ononline

onpageswap

onpagehide

onpagereveal

onpageshow

onpopstate

onrejectionhandled

onstorage

onunhandledrejection

onunload

[Exposed=Window]
interface HTMLBodyElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

HTMLBodyElement includes WindowEventHandlers;

body要素は文書の内容を表します。

適合文書には、body要素は1つだけ存在します。 document.body IDL属性は、文書のbody要素へスクリプトが容易にアクセスできるようにします。

一部のDOM操作（たとえば、ドラッグ＆ドロップモデルの一部）は、「body要素」を用いて定義されています。これは、用語の定義に従ったDOM内の特定の要素を指し、任意のbody要素を指すものではありません。

body要素は、Windowオブジェクトの多数のイベントハンドラーをイベントハンドラーコンテンツ属性として公開します。また、それらのイベントハンドラーIDL属性もミラーリングします。

Windowを反映するbody要素上のイベントハンドラー集合によって名前が付けられ、body 要素上で公開されるWindowオブジェクトのイベントハンドラーは、通常HTML要素がサポートする同じ名前の汎用イベントハンドラーを置き換えます。

したがって、たとえばDocumentのbody要素の子で送出された、バブリングするerrorイベントは、最初にその要素のonerrorイベントハンドラーコンテンツ属性をトリガーし、次にルートhtml要素のものをトリガーし、その後にbody要素上のonerrorイベントハンドラーコンテンツ属性をトリガーします。これは、イベントがターゲットからbodyへ、htmlへ、Documentへ、Windowへとバブルし、body上のイベントハンドラーがbodyではなくWindowを監視しているためです。しかし、 addEventListener()を使用してbodyに付加された通常のイベントリスナーは、イベントがbodyを通過してバブルしたときに実行され、Windowオブジェクトに到達したときには実行されません。

このページは、ユーザーがオンラインかどうかを示すインジケーターを更新します：

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>Online or offline?</title>
  <script>
   function update(online) {
     document.getElementById('status').textContent =
       online ? 'Online' : 'Offline';
   }
  </script>
 </head>
 <body ononline="update(true)"
       onoffline="update(false)"
       onload="update(navigator.onLine)">
  <p>You are: <span id="status">(Unknown)</span></p>
 </body>
</html>

4.3.2 `article`要素

Element/article

現在のすべてのエンジンでサポートされています。

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge（旧版）12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

カテゴリー：: フローコンテンツ。; セクショニングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: セクショニングコンテンツが期待される場所。
コンテンツモデル：: フローコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

article要素は、文書、ページ、アプリケーション、またはサイト内の完全な、または自己完結した構成物であり、原則として独立して配布または再利用できるもの、たとえばシンジケーションで利用できるものを表します。これは、フォーラムの投稿、雑誌または新聞の記事、ブログのエントリー、ユーザーが投稿したコメント、対話型ウィジェットまたはガジェット、あるいはその他の独立したコンテンツ項目である可能性があります。

article 要素が入れ子になっている場合、内側のarticle要素は、原則として外側の記事の内容に関連する記事を表します。たとえば、ユーザー投稿コメントを受け付けるサイトのブログエントリーでは、コメントをブログエントリーのarticle要素内に入れ子にしたarticle要素として表すことができます。

article要素に関連付けられた作成者情報（address要素を参照）は、入れ子になったarticle要素には適用されません。

シンジケーションで再配布されるコンテンツに特に使用する場合、 article要素は、 Atomのentry要素と目的が似ています。[ATOM]

schema.orgマイクロデータ語彙は、CreativeWorkのサブタイプの1つを使用して、article要素の公開日を提供するために使用できます。

ページの主要コンテンツ（すなわち、フッター、ヘッダー、ナビゲーションブロック、およびサイドバーを除く）がすべて単一の自己完結した構成物である場合、そのコンテンツをarticleでマーク付けしても構いませんが、その場合は技術的には冗長です（ページは単一の文書であるため、単一の構成物であることが自明だからです）。

この例は、いくつかのschema.org注釈とともにarticle要素を使用したブログ投稿を示しています：

<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h2 itemprop="headline">The Very First Rule of Life</h2>
  <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <footer>
  <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
 </footer>
</article>

同じブログ投稿で、コメントの一部を表示したものを次に示します：

<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h2 itemprop="headline">The Very First Rule of Life</h2>
  <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <section>
  <h1>Comments</h1>
  <article itemprop="comment" itemscope itemtype="http://schema.org/Comment" id="c1">
   <link itemprop="url" href="#c1">
   <footer>
    <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">George Washington</span>
    </span></p>
    <p><time itemprop="dateCreated" datetime="2009-10-10">15 minutes ago</time></p>
   </footer>
   <p>Yeah! Especially when talking about your lobbyist friends!</p>
  </article>
  <article itemprop="comment" itemscope itemtype="http://schema.org/Comment" id="c2">
   <link itemprop="url" href="#c2">
   <footer>
    <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">George Hammond</span>
    </span></p>
    <p><time itemprop="dateCreated" datetime="2009-10-10">5 minutes ago</time></p>
   </footer>
   <p>Hey, you have the same first name as me.</p>
  </article>
 </section>
</article>

各コメントの情報（誰がいつ書いたかなど）を提供するためにfooterが使用されていることに注目してください。この場合のように適切であれば、footer要素はセクションの先頭に現れることができます。（この場合にheaderを使用しても誤りではありません。主に作成者の好みの問題です。）

この例では、article要素がポータルページ上でウィジェットをホストするために使用されています。ウィジェットは、特定のスタイルとスクリプトによる動作を得るため、カスタマイズされた組み込み要素として実装されています。

<!DOCTYPE HTML>
<html lang=en>
<title>eHome Portal</title>
<script src="/scripts/widgets.js"></script>
<link rel=stylesheet href="/styles/main.css">
<article is="stock-widget">
 <h2>Stocks</h2>
 <table>
  <thead> <tr> <th> Stock <th> Value <th> Delta
  <tbody> <template> <tr> <td> <td> <td> </template>
 </table>
 <p> <input type=button value="Refresh" onclick="this.parentElement.refresh()">
</article>
<article is="news-widget">
 <h2>News</h2>
 <ul>
  <template>
   <li>
    <p><img> <strong></strong>
    <p>
  </template>
 </ul>
 <p> <input type=button value="Refresh" onclick="this.parentElement.refresh()">
</article>

4.3.3 `section`要素

Element/section

現在のすべてのエンジンでサポートされています。

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge（旧版）12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

カテゴリー：: フローコンテンツ。; セクショニングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: セクショニングコンテンツが期待される場所。
コンテンツモデル：: フローコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

section要素は、文書またはアプリケーションの一般的なセクションを表します。この文脈におけるセクションとは、通常は見出しを伴う、テーマ別にまとめられたコンテンツです。

セクションの例には、章、タブ付きダイアログボックス内の各タブページ、または論文の番号付きセクションがあります。ウェブサイトのホームページは、導入、ニュース項目、連絡先情報のセクションに分割できます。

要素の内容をシンジケーションすることが妥当な場合、作成者には section要素の代わりにarticle要素を使用することが推奨されます。

section要素は、汎用コンテナー要素ではありません。スタイル設定の目的だけ、またはスクリプト処理を便利にするためだけに要素が必要な場合、作成者には代わりにdiv要素を使用することが推奨されます。一般的な規則として、section要素は、その要素の内容が文書のアウトラインに明示的に掲載される場合にのみ適切です。

次の例では、2つの短いセクションを含む、リンゴに関する記事（より大きなウェブページの一部）を示します。

<article>
 <hgroup>
  <h2>Apples</h2>
  <p>Tasty, delicious fruit!</p>
 </hgroup>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h3>Red Delicious</h3>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
 </section>
 <section>
  <h3>Granny Smith</h3>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
 </section>
</article>

次に、2つのセクションを持つ卒業式プログラムを示します。1つは卒業生のリスト用で、もう1つは式典の説明用です。（この例のマークアップでは、要素間空白の量を最小限に抑えるためにときどき使用される、一般的ではないスタイルを採用しています。）

<!DOCTYPE Html>
<Html Lang=En
 ><Head
   ><Title
     >Graduation Ceremony Summer 2022</Title
   ></Head
 ><Body
   ><H1
     >Graduation</H1
   ><Section
     ><H2
       >Ceremony</H2
     ><P
       >Opening Procession</P
     ><P
       >Speech by Valedictorian</P
     ><P
       >Speech by Class President</P
     ><P
       >Presentation of Diplomas</P
     ><P
       >Closing Speech by Headmaster</P
   ></Section
   ><Section
     ><H2
       >Graduates</H2
     ><Ul
       ><Li
         >Molly Carpenter</Li
       ><Li
         >Anastasia Luccio</Li
       ><Li
         >Ebenezar McCoy</Li
       ><Li
         >Karrin Murphy</Li
       ><Li
         >Thomas Raith</Li
       ><Li
         >Susan Rodriguez</Li
     ></Ul
   ></Section
 ></Body
></Html>

この例では、書籍の著者が一部のセクションを章として、一部を付録としてマーク付けし、 CSSを使用してこの2種類のセクションの見出しを異なる方法でスタイル設定しています。

<style>
 section { border: double medium; margin: 2em; }
 section.chapter h2 { font: 2em Roboto, Helvetica Neue, sans-serif; }
 section.appendix h2 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
</style>
<header>
 <hgroup>
  <h1>My Book</h1>
  <p>A sample with not much content</p>
 </hgroup>
 <p><small>Published by Dummy Publicorp Ltd.</small></p>
</header>
<section class="chapter">
 <h2>My First Chapter</h2>
 <p>This is the first of my chapters. It doesn't say much.</p>
 <p>But it has two paragraphs!</p>
</section>
<section class="chapter">
 <h2>It Continues: The Second Chapter</h2>
 <p>Bla dee bla, dee bla dee bla. Boom.</p>
</section>
<section class="chapter">
 <h2>Chapter Three: A Further Example</h2>
 <p>It's not like a battle between brightness and earthtones would go
 unnoticed.</p>
 <p>But it might ruin my story.</p>
</section>
<section class="appendix">
 <h2>Appendix A: Overview of Examples</h2>
 <p>These are demonstrations.</p>
</section>
<section class="appendix">
 <h2>Appendix B: Some Closing Remarks</h2>
 <p>Hopefully this long example shows that you <em>can</em> style
 sections, so long as they are used to indicate actual sections.</p>
</section>

4.3.4 `nav` 要素

Element/nav

現在のすべてのエンジンでサポートされています。

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge（旧版）12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

カテゴリー：: フローコンテンツ。; セクショニングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: セクショニングコンテンツが期待される場所。
コンテンツモデル：: フローコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

nav要素は、他のページまたはページ内の部分へリンクするページのセクション、すなわちナビゲーションリンクを持つセクションを表します。

ページ上のすべてのリンク群をnav要素内に置く必要はありません。この要素は主として、主要なナビゲーションブロックで構成されるセクションを対象としています。特に、フッターには利用規約、ホームページ、著作権ページなど、サイト内の各種ページへの短いリンク一覧を含めることがよくあります。このような場合にはfooter要素だけで十分です。このような場合にnav要素を使用することもできますが、通常は不要です。

最初のレンダリング時にナビゲーション情報が省略されることで恩恵を受けるユーザー、またはナビゲーション情報を直ちに利用できることで恩恵を受けるユーザーを対象とするユーザーエージェント（スクリーンリーダーなど）は、この要素を、ページ上で最初にスキップするコンテンツ、要求時に提供するコンテンツ、またはその両方を決定する方法として使用できます。

次の例には2つのnav要素があります。 1つはサイト全体の主要ナビゲーション用、もう1つはページ自体の副次的ナビゲーション用です。

<body>
 <h1>The Wiki Center Of Exampland</h1>
 <nav>
  <ul>
   <li><a href="/">Home</a></li>
   <li><a href="/events">Current Events</a></li>
   ...more...
  </ul>
 </nav>
 <article>
  <header>
   <h2>Demos in Exampland</h2>
   <p>Written by A. N. Other.</p>
  </header>
  <nav>
   <ul>
    <li><a href="#public">Public demonstrations</a></li>
    <li><a href="#destroy">Demolitions</a></li>
    ...more...
   </ul>
  </nav>
  <div>
   <section id="public">
    <h2>Public demonstrations</h2>
    <p>...more...</p>
   </section>
   <section id="destroy">
    <h2>Demolitions</h2>
    <p>...more...</p>
   </section>
   ...more...
  </div>
  <footer>
   <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
  </footer>
 </article>
 <footer>
  <p><small>© copyright 1998 Exampland Emperor</small></p>
 </footer>
</body>

次の例では、ページ上の複数の場所にリンクが存在しますが、そのうちナビゲーションセクションと見なされる場所は1つだけです。

<body itemscope itemtype="http://schema.org/Blog">
 <header>
  <h1>Wake up sheeple!</h1>
  <p><a href="news.html">News</a> -
     <a href="blog.html">Blog</a> -
     <a href="forums.html">Forums</a></p>
  <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
  <nav>
   <h2>Navigation</h2>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
   <header>
    <h2 itemprop="headline">My Day at the Beach</h2>
   </header>
   <div itemprop="articleBody">
    <p>Today I went to the beach and had a lot of fun.</p>
    ...more content...
   </div>
   <footer>
    <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </main>
 <footer>
  <p>Copyright ©
   <span itemprop="copyrightYear">2010</span>
   <span itemprop="copyrightHolder">The Example Company</span>
  </p>
  <p><a href="about.html">About</a> -
     <a href="policy.html">Privacy Policy</a> -
     <a href="contact.html">Contact Us</a></p>
 </footer>
</body>

上記の例には、schema.org語彙を使用してブログ投稿の公開日およびその他のメタデータを提供するマイクロデータ注釈もあります。

nav要素はリストを含まなければならないわけではなく、他の種類のコンテンツも含めることができます。このナビゲーションブロックでは、文章中にリンクが提供されています：

<nav>
 <h1>Navigation</h1>
 <p>You are on my home page. To the north lies <a href="/blog">my
 blog</a>, from whence the sounds of battle can be heard. To the east
 you can see a large mountain, upon which many <a
 href="/school">school papers</a> are littered. Far up thus mountain
 you can spy a little figure who appears to be me, desperately
 scribbling a <a href="/school/thesis">thesis</a>.</p>
 <p>To the west are several exits. One fun-looking exit is labeled <a
 href="https://games.example.com/">"games"</a>. Another more
 boring-looking exit is labeled <a
 href="https://isp.example.net/">ISP™</a>.</p>
 <p>To the south lies a dark and dank <a href="/about">contacts
 page</a>. Cobwebs cover its disused entrance, and at one point you
 see a rat run quickly out of the page.</p>
</nav>

この例では、メールアプリケーションでユーザーがフォルダーを切り替えられるように、navが使用されています：

<p><input type=button value="Compose" onclick="compose()"></p>
<nav>
 <h1>Folders</h1>
 <ul>
  <li> <a href="/inbox" onclick="return openFolder(this.href)">Inbox</a> <span class=count></span>
  <li> <a href="/sent" onclick="return openFolder(this.href)">Sent</a>
  <li> <a href="/drafts" onclick="return openFolder(this.href)">Drafts</a>
  <li> <a href="/trash" onclick="return openFolder(this.href)">Trash</a>
  <li> <a href="/customers" onclick="return openFolder(this.href)">Customers</a>
 </ul>
</nav>

4.3.5 `aside` 要素

Element/aside

現在のすべてのエンジンでサポートされています。

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge（旧版）12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

カテゴリー：: フローコンテンツ。; セクショニングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: セクショニングコンテンツが期待される場所。
コンテンツモデル：: フローコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

aside要素は、 aside要素の周囲のコンテンツと間接的に関連し、そのコンテンツから分離して考えることができるコンテンツで構成されるページのセクションを表します。このようなセクションは、印刷タイポグラフィではサイドバーとして表されることがよくあります。

この要素は、プルクォートやサイドバーなどのタイポグラフィ効果、広告、nav要素のグループ、およびページの主要コンテンツから分離していると見なされるその他のコンテンツに使用できます。

括弧書きは文書の主要な流れの一部であるため、括弧書きのためだけにaside要素を使用するのは適切ではありません。

次の例は、ヨーロッパに関するはるかに長いニュース記事内で、スイスについての背景資料をマーク付けするためにasideがどのように使用されるかを示しています。

<aside>
 <h2>Switzerland</h2>
 <p>Switzerland, a land-locked country in the middle of geographic
 Europe, has not joined the geopolitical European Union, though it is
 a signatory to a number of European treaties.</p>
</aside>

次の例は、より長い記事内でプルクォートをマーク付けするためにasideがどのように使用されるかを示しています。

...

<p>He later joined a large company, continuing on the same work.
<q>I love my job. People ask me what I do for fun when I'm not at
work. But I'm paid to do my hobby, so I never know what to
answer. Some people wonder what they would do if they didn't have to
work... but I know what I would do, because I was unemployed for a
year, and I filled that time doing exactly what I do now.</q></p>

<aside>
 <q>People ask me what I do for fun when I'm not at work. But I'm
 paid to do my hobby, so I never know what to answer.</q>
</aside>

<p>Of course his work — or should that be hobby? —
isn't his only passion. He also enjoys other pleasures.</p>

...

次の抜粋は、ブログ上でブログロールやその他の補助コンテンツにasideをどのように使用できるかを示しています：

<body>
 <header>
  <h1>My wonderful blog</h1>
  <p>My tagline</p>
 </header>
 <aside>
  <!-- this aside contains two sections that are tangentially related
  to the page, namely, links to other blogs, and links to blog posts
  from this blog -->
  <nav>
   <h2>My blogroll</h2>
   <ul>
    <li><a href="https://blog.example.com/">Example Blog</a>
   </ul>
  </nav>
  <nav>
   <h2>Archives</h2>
   <ol reversed>
    <li><a href="/last-post">My last post</a>
    <li><a href="/first-post">My first post</a>
   </ol>
  </nav>
 </aside>
 <aside>
  <!-- this aside is tangentially related to the page also, it
  contains twitter messages from the blog author -->
  <h1>Twitter Feed</h1>
  <blockquote cite="https://twitter.example.net/t31351234">
   I'm on vacation, writing my blog.
  </blockquote>
  <blockquote cite="https://twitter.example.net/t31219752">
   I'm going to go on vacation soon.
  </blockquote>
 </aside>
 <article>
  <!-- this is a blog post -->
  <h2>My last post</h2>
  <p>This is my last post.</p>
  <footer>
   <p><a href="/last-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <article>
  <!-- this is also a blog post -->
  <h2>My first post</h2>
  <p>This is my first post.</p>
  <aside>
   <!-- this aside is about the blog post, since it's inside the
   <article> element; it would be wrong, for instance, to put the
   blogroll here, since the blogroll isn't really related to this post
   specifically, only to the page as a whole -->
   <h2>Posting</h2>
   <p>While I'm thinking about it, I wanted to say something about
   posting. Posting is fun!</p>
  </aside>
  <footer>
   <p><a href="/first-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <footer>
  <p><a href="/archives">Archives</a> -
   <a href="/about">About me</a> -
   <a href="/copyright">Copyright</a></p>
 </footer>
</body>

4.3.6 `h1`、`h2`、`h3`、`h4`、`h5`、および`h6` 要素

Element/Heading_Elements

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/Heading_Elements

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/Heading_Elements

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/Heading_Elements

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/Heading_Elements

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/Heading_Elements

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLHeadingElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

見出しコンテンツ。

hgroup 要素の子として。

見出しコンテンツが期待される場所。

コンテンツモデル：

フレージングコンテンツ。

text/htmlにおけるタグの省略：

どちらのタグも省略できません。

[Exposed=Window]
interface HTMLHeadingElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

これらの要素は、それぞれのセクションの見出しを表します。

これらの要素のセマンティクスおよび意味は、見出しとアウトラインに関する節で定義されています。

これらの要素は、その名前の数字によって与えられる見出しレベルを持ちます。見出しレベルは、入れ子になったセクションのレベルに対応します。h1 要素は最上位セクション用、h2 はサブセクション用、h3 はサブサブセクション用、以下同様です。

それぞれの文書アウトライン（見出しおよびセクション構造）に関する限り、次の2つの断片は意味的に同等です：

<body>
<h1>Let's call it a draw(ing surface)</h1>
<h2>Diving in</h2>
<h2>Simple shapes</h2>
<h2>Canvas coordinates</h2>
<h3>Canvas coordinates diagram</h3>
<h2>Paths</h2>
</body>

<body>
 <h1>Let's call it a draw(ing surface)</h1>
 <section>
  <h2>Diving in</h2>
 </section>
 <section>
  <h2>Simple shapes</h2>
 </section>
 <section>
  <h2>Canvas coordinates</h2>
  <section>
   <h3>Canvas coordinates diagram</h3>
  </section>
 </section>
 <section>
  <h2>Paths</h2>
 </section>
</body>

作成者は、簡潔さを理由に前者のスタイルを好む場合も、追加のスタイル設定用フックを理由に後者のスタイルを好む場合もあります。どちらが最善かは、純粋に作成スタイルの好みの問題です。

4.3.7 `hgroup`要素

Element/hgroup

現在のすべてのエンジンでサポートされています。

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge（旧版）12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android2.2+Samsung Internet?Opera Android11.1+

カテゴリー：: フローコンテンツ。; 見出しコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: 見出しコンテンツが期待される場所。
コンテンツモデル：: 0個以上のp要素に続いて、 1個のh1、 h2、 h3、 h4、 h5、またはh6 要素、その後に0個以上の p要素。任意でスクリプト支援要素を混在させることができます。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

hgroup要素は、見出しと関連コンテンツを表します。この要素は、 h1–h6 要素を、副見出し、代替タイトル、またはタグラインを表すコンテンツを含む1個以上のp要素とグループ化するために使用できます。

hgroup要素内に含まれる有効な見出しの例を次に示します。

<hgroup>
 <h1>The reality dysfunction</h1>
 <p>Space is not the only void</p>
</hgroup>

<hgroup>
 <h1>Dr. Strangelove</h1>
 <p>Or: How I Learned to Stop Worrying and Love the Bomb</p>
</hgroup>

4.3.8 `header`要素

Element/header

現在のすべてのエンジンでサポートされています。

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge（旧版）12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

カテゴリー：: フローコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フローコンテンツが期待される場所。
コンテンツモデル：: フローコンテンツ。ただし、headerまたはfooter要素の子孫を含みません。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 祖先にセクショニングコンテンツ要素がある場合：作成者向け；実装者向け。; それ以外の場合：作成者向け；実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

header要素は、導入補助またはナビゲーション補助のグループを表します。

header 要素は、通常は見出し（h1–h6 要素またはhgroup 要素）を含むことを意図していますが、これは必須ではありません。header 要素は、セクションの目次、検索フォーム、または関連するロゴを包むためにも使用できます。

いくつかのheaderの例を示します。最初の例はゲーム用です：

<header>
 <p>Welcome to...</p>
 <h1>Voidwars!</h1>
</header>

次の断片は、仕様のヘッダーをマーク付けするためにこの要素をどのように使用できるかを示しています：

<header>
 <hgroup>
  <h1>Fullscreen API</h1>
  <p>Living Standard — Last Updated 19 October 2015<p>
 </hgroup>
 <dl>
  <dt>Participate:</dt>
  <dd><a href="https://github.com/whatwg/fullscreen">GitHub whatwg/fullscreen</a></dd>
  <dt>Commits:</dt>
  <dd><a href="https://github.com/whatwg/fullscreen/commits">GitHub whatwg/fullscreen/commits</a></dd>
 </dl>
</header>

header 要素はセクショニングコンテンツではなく、新しいセクションを導入しません。

この例では、ページはh1 要素によって与えられるページ見出しと、h2 要素によって見出しが与えられる2つのサブセクションを持ちます。header要素の後のコンテンツも、header要素内で開始された最後のサブセクションの一部です。これは、header要素がアウトラインアルゴリズムに関与しないためです。

<body>
 <header>
  <h1>Little Green Guys With Guns</h1>
  <nav>
   <ul>
    <li><a href="/games">Games</a>
    <li><a href="/forum">Forum</a>
    <li><a href="/download">Download</a>
   </ul>
  </nav>
  <h2>Important News</h2> <!-- this starts a second subsection -->
  <!-- this is part of the subsection entitled "Important News" -->
  <p>To play today's games you will need to update your client.</p>
  <h2>Games</h2> <!-- this starts a third subsection -->
 </header>
 <p>You have three active games:</p>
 <!-- this is still part of the subsection entitled "Games" -->
 ...

Element/footer

現在のすべてのエンジンでサポートされています。

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge（旧版）12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

カテゴリー：: フローコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フローコンテンツが期待される場所。
コンテンツモデル：: フローコンテンツ。ただし、headerまたはfooter要素の子孫を含みません。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 祖先にセクショニングコンテンツ要素がある場合：作成者向け；実装者向け。; それ以外の場合：作成者向け；実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

footer要素は、最も近い祖先のセクショニングコンテンツ要素、またはそのような祖先がない場合はbody要素のフッターを表します。フッターには通常、誰がそのセクションを書いたか、関連文書へのリンク、著作権データなど、そのセクションに関する情報が含まれます。

footer要素がセクション全体を含む場合、それらは付録、索引、長い奥付、詳細なライセンス契約、およびその他の同様のコンテンツを表します。

セクションの作成者または編集者の連絡先情報は、場合によってはfooter内にある address要素に含めます。署名欄や、headerまたはfooterのどちらにも適し得るその他の情報は、どちらか一方（またはどちらにも置かず）に配置できます。これらの要素の主な目的は、作成者が保守およびスタイル設定しやすい自己説明的なマークアップを書くのを支援することにすぎず、作成者に特定の構造を課すことを意図していません。

フッターは通常はセクションの末尾に現れますが、必ずしも末尾に現れる必要はありません。

祖先にセクショニングコンテンツ要素がない場合、ページ全体に適用されます。

footer 要素自体はセクショニングコンテンツではなく、新しいセクションを導入しません。

同じ内容を持つフッターが上部と下部に1つずつあるページを次に示します：

<body>
 <footer><a href="../">Back to index...</a></footer>
 <hgroup>
  <h1>Lorem ipsum</h1>
  <p>The ipsum of all lorems</p>
 </hgroup>
 <p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
 ea commodo consequat. Duis aute irure dolor in reprehenderit in
 voluptate velit esse cillum dolore eu fugiat nulla
 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 culpa qui officia deserunt mollit anim id est laborum.</p>
 <footer><a href="../">Back to index...</a></footer>
</body>

footer要素がサイト全体のフッターとセクションのフッターの両方に使用されている例を次に示します。

<!DOCTYPE HTML>
<HTML LANG="en"><HEAD>
<TITLE>The Ramblings of a Scientist</TITLE>
<BODY>
<H1>The Ramblings of a Scientist</H1>
<ARTICLE>
 <H1>Episode 15</H1>
 <VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD>
  <P><A HREF="/fm/015.ogv">Download video</A>.</P>
 </VIDEO>
 <FOOTER> <!-- footer for article -->
  <P>Published <TIME DATETIME="2009-10-21T18:26-07:00">on 2009/10/21 at 6:26pm</TIME></P>
 </FOOTER>
</ARTICLE>
<ARTICLE>
 <H1>My Favorite Trains</H1>
 <P>I love my trains. My favorite train of all time is a Köf.</P>
 <P>It is fun to see them pull some coal cars because they look so
 dwarfed in comparison.</P>
 <FOOTER> <!-- footer for article -->
  <P>Published <TIME DATETIME="2009-09-15T14:54-07:00">on 2009/09/15 at 2:54pm</TIME></P>
 </FOOTER>
</ARTICLE>
<FOOTER> <!-- site wide footer -->
 <NAV>
  <P><A HREF="/credits.html">Credits</A> —
     <A HREF="/tos.html">Terms of Service</A> —
     <A HREF="/index.html">Blog Index</A></P>
 </NAV>
 <P>Copyright © 2009 Gordon Freeman</P>
</FOOTER>
</BODY>
</HTML>

一部のサイト設計には、「ファットフッター」と呼ばれることがあるものがあります。これは、画像、他の記事へのリンク、フィードバック送信用ページへのリンク、特別提供など、多量の素材を含むフッターで、ある意味ではフッター内の完全な「フロントページ」です。

この断片は、「ファットフッター」を持つサイトのページ下部を示しています：

...
 <footer>
  <nav>
   <section>
    <h1>Articles</h1>
    <p><img src="images/somersaults.jpeg" alt=""> Go to the gym with
    our somersaults class! Our teacher Jim takes you through the paces
    in this two-part article. <a href="articles/somersaults/1">Part
    1</a> · <a href="articles/somersaults/2">Part 2</a></p>
    <p><img src="images/kindplus.jpeg"> Tired of walking on the edge of
    a clif<!-- sic -->? Our guest writer Lara shows you how to bumble
    your way through the bars. <a href="articles/kindplus/1">Read
    more...</a></p>
    <p><img src="images/crisps.jpeg"> The chips are down, now all
    that's left is a potato. What can you do with it? <a
    href="articles/crisps/1">Read more...</a></p>
   </section>
   <ul>
    <li> <a href="/about">About us...</a>
    <li> <a href="/feedback">Send feedback!</a>
    <li> <a href="/sitemap">Sitemap</a>
   </ul>
  </nav>
  <p><small>Copyright © 2015 The Snacker —
  <a href="/tos">Terms of Service</a></small></p>
 </footer>
</body>

4.3.10 `address`要素

Element/address

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フローコンテンツが期待される場所。
コンテンツモデル：: フローコンテンツ。ただし、見出しコンテンツの子孫、セクショニングコンテンツの子孫、およびheader、footer、または address要素の子孫を含みません。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

address要素は、最も近いarticle またはbody要素の祖先の連絡先情報を表します。それがbody 要素である場合、連絡先情報は文書全体に適用されます。

たとえば、HTMLに関連するW3Cウェブサイトのページには、次の連絡先情報が含まれる場合があります：

<ADDRESS>
 <A href="../People/Raggett/">Dave Raggett</A>,
 <A href="../People/Arnaud/">Arnaud Le Hors</A>,
 contact persons for the <A href="Activity">W3C HTML Activity</A>
</ADDRESS>

address要素は、それらの住所が実際に関連する連絡先情報である場合を除き、任意の住所（たとえば郵便住所）を表すために使用してはなりません。（一般に郵便住所をマーク付けするための適切な要素は p要素です。）

address要素には、連絡先情報以外の情報を含めてはなりません。

たとえば、次はaddress要素の不適合な使用です：

<ADDRESS>Last Modified: 1999/12/24 23:37:50</ADDRESS>

通常、address要素は、他の情報とともにfooter要素内に含まれます。

ノードnodeの連絡先情報は、次のリストで最初に適用される項目によって定義される address要素のコレクションです：

nodeがarticle要素である場合
nodeがbody要素である場合: 連絡先情報は、nodeを祖先として持ち、かつnodeの子孫である別のbodyまたは article要素の祖先を持たない、すべてのaddress要素から構成されます。
nodeにarticle要素である祖先要素がある場合
nodeにbody要素である祖先要素がある場合: nodeの連絡先情報は、最も近いarticleまたはbody要素の祖先の連絡先情報と同じです。
nodeのノード文書が body 要素を持つ場合: nodeの連絡先情報は、Documentのbody要素の連絡先情報と同じです。
それ以外の場合: nodeの連絡先情報はありません。

ユーザーエージェントは、ノードの連絡先情報をユーザーに公開しても、セクションの連絡先情報に基づいてセクションを索引付けするなど、その他の目的に使用しても構いません。

この例では、フッターに連絡先情報と著作権表示が含まれています。

<footer>
 <address>
  For more details, contact
  <a href="mailto:js@example.com">John Smith</a>.
 </address>
 <p><small>© copyright 2038 Example Corp.</small></p>
</footer>

4.3.11 見出しとアウトライン

h1–h6 要素には、要素の算出見出しレベルを取得することによって与えられる見出しレベルがあります。

これらの要素は見出しを表します。見出しの見出しレベルが低いほど、その見出しが持つ祖先セクションは少なくなります。

アウトラインは、文書内のすべての見出しをツリー順に並べたものです。

アウトラインは、たとえば目次を生成するときに、文書アウトラインを生成するために使用するべきです。対話型の目次を作成する場合、各項目はユーザーを関連する見出しへ移動させるべきです。

文書に1個以上の見出しがある場合、アウトライン内の少なくとも1つの見出しは、見出しレベル1を持つべきです。

アウトライン内で別の見出しleadの後に続く各見出しは、 leadの見出しレベルより小さい、等しい、または1大きい見出しレベルを持たなければなりません。

次の例は不適合です：

<body>
 <h1>Apples</h1>
 <p>Apples are fruit.</p>
 <section>
  <h3>Taste</h3>
  <p>They taste lovely.</p>
 </section>
</body>

次のように記述すれば、適合するようになります：

<body>
 <h1>Apples</h1>
 <p>Apples are fruit.</p>
 <section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
 </section>
</body>

4.3.11.1 見出しレベルとオフセット

headingoffset コンテンツ属性により、作成者は子孫の見出しレベルをオフセットできます。

headingoffset 属性が指定されている場合、その値は0以上8以下の有効な非負整数でなければなりません。

headingreset コンテンツ属性はブール属性です。これにより作成者は、見出しオフセットの計算が、その属性を持つ要素を越えて走査することを防止できます。

要素elementが与えられたとき、要素の算出見出しレベルを取得するには：

levelを0とします。
elementのローカル名がh1である場合、 levelを1に設定します。
elementのローカル名がh2である場合、 levelを2に設定します。
elementのローカル名がh3である場合、 levelを3に設定します。
elementのローカル名がh4である場合、 levelを4に設定します。
elementのローカル名がh5である場合、 levelを5に設定します。
elementのローカル名がh6である場合、 levelを6に設定します。
表明：levelは0ではありません。
elementが与えられたとき、要素の算出見出しオフセットを取得する結果だけlevelを増加させます。
levelが9より大きい場合、9を返します。
levelを返します。

要素elementが与えられたとき、要素の算出見出しオフセットを取得するには、次の手順を実行します。これらは非負整数を返します。

offsetを0とします。
inclusiveAncestorをelementとします。
inclusiveAncestorがnullでない間：
1. nextOffsetを0とします。
2. inclusiveAncestorがHTML要素であり、headingoffset 属性を持つ場合、非負整数を構文解析する規則を使用してその値を構文解析します。
  
  値を構文解析した結果がエラーでない場合、nextOffsetをその値に設定します。
3. offsetをnextOffsetだけ増加させます。
4. inclusiveAncestorがHTML要素であり、headingreset 属性を持つ場合、offsetを返します。
5. inclusiveAncestorの親がシャドールートである場合、inclusiveAncestorをそのシャドールートのホストに設定し、続行します。
6. inclusiveAncestorをinclusiveAncestorの親要素に設定します。
offsetを返します。

この例は、headingoffset、 headingreset、およびaria-level 属性の組み合わせを、それぞれの見出しレベルを示すコメントとともに示しています。この例はさまざまな組み合わせを説明するものであり、ベストプラクティスの例ではありません。

<body>
  <main>
   <h1>This is a heading level 1</h1>
   <article headingoffset="1">
    <h1>This is a heading level 2</h1>
    <section headingoffset="1">
     <h1>This is a heading level 3</h1>
     <dialog headingreset>
      <h1>This is a heading level 1</h1>
     </dialog>
    </section>
   </article>
   <h1 aria-level="2">This is a heading level 2</h1>
  </main>
</body>

4.3.11.2 アウトラインの例

次のマークアップ断片：

<body>
  <hgroup id="document-title">
    <h1>HTML: Living Standard</h1>
    <p>Last Updated 12 August 2016</p>
  </hgroup>
  <p>Some intro to the document.</p>
  <h2>Table of contents</h2>
  <ol id=toc>...</ol>
  <h2>First section</h2>
  <p>Some intro to the first section.</p>
</body>

…は3つの文書見出しを生成します：

<h1>HTML: Living Standard</h1>
<h2>Table of contents</h2>。
<h2>First section</h2>。

アウトラインをレンダリングした表示は、次のようになる可能性があります：

Top-level section with the heading "HTML: Living Standard" and two subsections; "Table of contents" and "First section".

まず、非常に短い章とサブセクションを持つ書籍である文書を次に示します：

<!DOCTYPE HTML>
<html lang=en>
<title>The Tax Book (all in one page)</title>
<h1>The Tax Book</h1>
<h2>Earning money</h2>
<p>Earning money is good.</p>
<h3>Getting a job</h3>
<p>To earn money you typically need a job.</p>
<h2>Spending money</h2>
<p>Spending is what money is mainly used for.</p>
<h3>Cheap things</h3>
<p>Buying cheap things often not cost-effective.</p>
<h3>Expensive things</h3>
<p>The most expensive thing is often not the most cost-effective either.</p>
<h2>Investing money</h2>
<p>You can lend your money to other people.</p>
<h2>Losing money</h2>
<p>If you spend money or invest money, sooner or later you will lose money.
<h3>Poor judgement</h3>
<p>Usually if you lose money it's because you made a mistake.</p>

そのアウトラインは、次のように表示できます：

The Tax Book
1. Earning money
  1. Getting a job
2. Spending money
  1. Cheap things
  2. Expensive things
3. Investing money
4. Losing money
  1. Poor judgement

title要素は見出しではないことに注意してください。

文書には複数の最上位見出しを含めることができます：

<!DOCTYPE HTML>
<html lang=en>
<title>Alphabetic Fruit</title>
<h1>Apples</h1>
<p>Pomaceous.</p>
<h1>Bananas</h1>
<p>Edible.</p>
<h1>Carambola</h1>
<p>Star.</p>

文書のアウトラインは、次のように表示できます：

Apples
Bananas
Carambola

header要素は、文書のアウトラインに影響しません：

<!DOCTYPE HTML>
<html lang="en">
<title>We're adopting a child! — Ray's blog</title>
<h1>Ray's blog</h1>
<article>
 <header>
  <nav>
   <a href="?t=-1d">Yesterday</a>;
   <a href="?t=-7d">Last week</a>;
   <a href="?t=-1m">Last month</a>
  </nav>
  <h2>We're adopting a child!</h2>
 </header>
 <p>As of today, Janine and I have signed the papers to become
 the proud parents of baby Diane! We've been looking forward to
 this day for weeks.</p>
</article>
</html>

文書のアウトラインは、次のように表示できます：

Ray's blog
1. We're adopting a child!

次の例は適合していますが、見出しレベルが1である見出しを持たないため、推奨されません：

<!DOCTYPE HTML>
<html lang=en>
<title>Alphabetic Fruit</title>
<section>
 <h2>Apples</h2>
 <p>Pomaceous.</p>
</section>
<section>
 <h2>Bananas</h2>
 <p>Edible.</p>
</section>
<section>
 <h2>Carambola</h2>
 <p>Star.</p>
</section>

文書のアウトラインは、次のように表示できます：

1. Apples
2. Bananas
3. Carambola

次の例は適合していますが、最初の見出しの見出しレベルが1ではないため、推奨されません：

<!DOCTYPE HTML>
<html lang=en>
<title>Feathers on The Site of Encyclopedic Knowledge</title>
 <h2>A plea from our caretakers</h2>
 <p>Please, we beg of you, send help! We're stuck in the server room!</p>
<h1>Feathers</h1>
<p>Epidermal growths.</p>

文書のアウトラインは、次のように表示できます：

1. A plea from our caretakers
Feathers

4.3.11.3 アウトラインをユーザーに公開する

ユーザーエージェントには、ナビゲーションを支援するため、ページのアウトラインをユーザーに公開することが推奨されます。これは、スクリーンリーダーなどの非視覚メディアに特に当てはまります。

たとえば、ユーザーエージェントは矢印キーを次のように割り当てることができます：

Shift + ← 左: 前の見出しへ移動する
Shift + → 右: 次の見出しへ移動する
Shift + ↑ 上: 現在の見出しのレベルより1小さいレベルを持つ次の見出しへ移動する
Shift + ↓ 下: 現在の見出しのレベルと同じレベルを持つ次の見出しへ移動する

4.3.12 使用法の概要

この節は非規範的です。

要素	目的
要素	例
`body`	文書の内容。
`body`	`<!DOCTYPE HTML> <html lang="en"> <head> <title>Steve Hill's Home Page</title> </head> <body> <p>Hard Trance is My Life.</p> </body> </html>`
`article`	文書、ページ、アプリケーション、またはサイト内の完全な、または自己完結した構成物であり、原則として独立して配布または再利用できるもの、たとえばシンジケーションで利用できるもの。これはフォーラムの投稿、雑誌または新聞の記事、ブログのエントリー、ユーザーが投稿したコメント、対話型ウィジェットまたはガジェット、あるいはその他の独立したコンテンツ項目である可能性があります。
`article`	`<article> <img src="/tumblr_masqy2s5yn1rzfqbpo1_500.jpg" alt="Yellow smiley face with the caption 'masif'"> <p>My fave Masif tee so far!</p> <footer>Posted 2 days ago</footer> </article> <article> <img src="/tumblr_m9tf6wSr6W1rzfqbpo1_500.jpg" alt=""> <p>Happy 2nd birthday Masif Saturdays!!!</p> <footer>Posted 3 weeks ago</footer> </article>`
`section`	文書またはアプリケーションの一般的なセクション。この文脈におけるセクションとは、通常は見出しを伴う、テーマ別にまとめられたコンテンツです。
`section`	`<h1>Biography</h1> <section> <h1>The facts</h1> <p>1500+ shows, 14+ countries</p> </section> <section> <h1>2010/2011 figures per year</h1> <p>100+ shows, 8+ countries</p> </section>`
`nav`	他のページまたはページ内の部分へリンクするページのセクション、すなわちナビゲーションリンクを持つセクション。
`nav`	`<nav> <p><a href="/">Home</a> <p><a href="/biog.html">Bio</a> <p><a href="/discog.html">Discog</a> </nav>`
`aside`	`aside`要素の周囲のコンテンツと間接的に関連し、そのコンテンツから分離して考えることができるコンテンツで構成されるページのセクション。このようなセクションは、印刷タイポグラフィではサイドバーとして表されることがよくあります。
`aside`	`<h1>Music</h1> <p>As any burner can tell you, the event has a lot of trance.</p> <aside>You can buy the music we played at our <a href="buy.html">playlist page</a>.</aside> <p>This year we played a kind of trance that originated in Belgium, Germany, and the Netherlands in the mid-90s.</p>`
`h1`–`h6`	見出し
`h1`–`h6`	`<h1>The Guide To Music On The Playa</h1> <h2>The Main Stage</h2> <p>If you want to play on a stage, you should bring one.</p> <h2>Amplified Music</h2> <p>Amplifiers up to 300W or 90dB are welcome.</p>`
`hgroup`	見出しと関連コンテンツ。この要素は、`h1`–`h6` 要素を、副見出し、代替タイトル、またはタグラインを表すコンテンツを含む1個以上の`p`要素とグループ化するために使用できます。
`hgroup`	`<hgroup> <h1>Burning Music</h1> <p>The Guide To Music On The Playa</p> </hgroup> <section> <hgroup> <h1>Main Stage</h1> <p>The Fiction Of A Music Festival</p> </hgroup> <p>If you want to play on a stage, you should bring one.</p> </section> <section> <hgroup> <h1>Loudness!</h1> <p>Questions About Amplified Music</p> </hgroup> <p>Amplifiers up to 300W or 90dB are welcome.</p> </section>`
`header`	導入補助またはナビゲーション補助のグループ。
`header`	`<article> <header> <h1>Hard Trance is My Life</h1> <p>By DJ Steve Hill and Technikal</p> </header> <p>The album with the amusing punctuation has red artwork.</p> </article>`
`footer`	最も近い祖先のセクショニングコンテンツ要素、またはそのような祖先がない場合はbody要素のフッター。フッターには通常、誰がそのセクションを書いたか、関連文書へのリンク、著作権データなど、そのセクションに関する情報が含まれます。
`footer`	`<article> <h1>Hard Trance is My Life</h1> <p>The album with the amusing punctuation has red artwork.</p> <footer> <p>Artists: DJ Steve Hill and Technikal</p> </footer> </article>`

4.3.12.1 articleかsectionか？

この節は非規範的です。

sectionは、何か別のものの一部を形成します。articleは、それ自体で 1つのものです。しかし、どちらがどちらであるかをどう判断するのでしょうか。実際の答えは、ほとんどの場合「作成者の意図による」です。

たとえば、「Granny Smith」という章があり、「These juicy, green apples make a great filling for apple pies.」とだけ書かれた書籍を想像できます。この場合、（おそらく）他の種類のリンゴについても多数の章があるため、それはsectionになります。

一方、「Granny Smith. These juicy, green apples make a great filling for apple pies.」とだけ書かれたツイート、redditコメント、tumblr投稿、または新聞の案内広告を想像できます。その場合、それが全体であるため、それらはarticleになります。

記事に対するコメントは、それがコメントしているarticleの一部ではないため、それ自体がarticleです。

4.4 コンテンツのグループ化

4.4.1 `p` 要素

Element/p

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLParagraphElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

フローコンテンツが期待される場所。

hgroup要素の子として。

コンテンツモデル：

フレージングコンテンツ。

text/htmlにおけるタグの省略：

p要素の終了タグは、p要素の直後に address、article、 aside、blockquote、details、dialog、 div、dl、fieldset、figcaption、 figure、、form、h1、 h2、 h3、 h4、 h5、 h6、 header、 hgroup、hr、main、、nav、 ol、p、pre、search、section、 table、またはul要素が続く場合、あるいは親要素にそれ以上のコンテンツがなく、親要素がa、audio、del、ins、map、 noscript、またはvideo要素でも、自律カスタム要素でもないHTML要素である場合に省略できます。

[Exposed=Window]
interface HTMLParagraphElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

p要素は段落を表します。

段落は通常、視覚メディアでは空行によって隣接するブロックから物理的に分離されたテキストブロックとして表されますが、スタイルシートまたはユーザーエージェントが、たとえばインラインの段落記号（¶）を使用するなど、別の方法で段落区切りを表示することも同様に正当です。

次の例は適合するHTML断片です：

<p>The little kitten gently seated herself on a piece of
carpet. Later in her life, this would be referred to as the time the
cat sat on the mat.</p>

<fieldset>
 <legend>Personal information</legend>
 <p>
   <label>Name: <input name="n"></label>
   <label><input name="anon" type="checkbox"> Hide from other users</label>
 </p>
 <p><label>Address: <textarea name="a"></textarea></label></p>
</fieldset>

<p>There was once an example from Femley,<br>
Whose markup was of dubious quality.<br>
The validator complained,<br>
So the author was pained,<br>
To move the error from the markup to the rhyming.</p>

p要素は、より具体的な要素がより適切である場合には使用するべきではありません。

次の例は技術的には正しいものです：

<section>
 <!-- ... -->
 <p>Last modified: 2001-04-23</p>
 <p>Author: fred@example.com</p>
</section>

しかし、次のようにマーク付けする方が適切です：

<section>
 <!-- ... -->
 <footer>Last modified: 2001-04-23</footer>
 <address>Author: fred@example.com</address>
</section>

または：

<section>
 <!-- ... -->
 <footer>
  <p>Last modified: 2001-04-23</p>
  <address>Author: fred@example.com</address>
 </footer>
</section>

リスト要素（特にol およびul要素）は、p要素の子にできません。したがって、文に箇条書きリストが含まれる場合、それをどのようにマーク付けするべきか疑問に思うかもしれません。

たとえば、この素晴らしい文には、次に関する箇条書きがあります

魔法使い、
超光速移動、および
テレパシー、

そして、以下でさらに説明します。

解決策は、HTMLの用語における段落が、論理的な概念ではなく構造的な概念であると理解することです。上記の素晴らしい例には、この仕様で定義される段落が実際には5つあります。リストの前に1つ、各箇条書きに1つずつ、リストの後に1つです。

したがって、上記の例のマークアップは次のようにできます：

<p>For instance, this fantastic sentence has bullets relating to</p>
<ul>
 <li>wizards,
 <li>faster-than-light travel, and
 <li>telepathy,
</ul>
<p>and is further discussed below.</p>

複数の「構造的」段落から構成されるこのような「論理的」段落を便利にスタイル設定したい作成者は、 p要素の代わりにdiv要素を使用できます。

したがって、たとえば上記の例は次のようにできます：

<div>For instance, this fantastic sentence has bullets relating to
<ul>
 <li>wizards,
 <li>faster-than-light travel, and
 <li>telepathy,
</ul>
and is further discussed below.</div>

この例にも構造的な段落は5つありますが、作成者は例の各部分を個別に考慮する代わりに、 divだけをスタイル設定できるようになりました。

4.4.2 `hr` 要素

Element/hr

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLHRElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

カテゴリー：

フローコンテンツ。

この要素を使用できる文脈：

フローコンテンツが期待される場所。

select要素の子孫として。

コンテンツモデル：

なし。

text/htmlにおけるタグの省略：

終了タグはありません。

[Exposed=Window]
interface HTMLHRElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

hr要素は、段落レベルの主題上の区切り、たとえば物語における場面転換や、参考書のセクション内で別の話題へ移行することを表します。あるいは、select要素の一連の選択肢間の区切りを表します。

次の架空のプロジェクトマニュアルからの抜粋は、セクション内の話題を区切るために hr要素を使用する 2つのセクションを示しています。

<section>
 <h1>Communication</h1>
 <p>There are various methods of communication. This section
 covers a few of the important ones used by the project.</p>
 <hr>
 <p>Communication stones seem to come in pairs and have mysterious
 properties:</p>
 <ul>
  <li>They can transfer thoughts in two directions once activated
  if used alone.</li>
  <li>If used with another device, they can transfer one's
  consciousness to another body.</li>
  <li>If both stones are used with another device, the
  consciousnesses switch bodies.</li>
 </ul>
 <hr>
 <p>Radios use the electromagnetic spectrum in the meter range and
 longer.</p>
 <hr>
 <p>Signal flares use the electromagnetic spectrum in the
 nanometer range.</p>
</section>
<section>
 <h1>Food</h1>
 <p>All food at the project is rationed:</p>
 <dl>
  <dt>Potatoes</dt>
  <dd>Two per day</dd>
  <dt>Soup</dt>
  <dd>One bowl per day</dd>
 </dl>
 <hr>
 <p>Cooking is done by the chefs on a set rotation.</p>
</section>

セクション自体の間にhr 要素を置く必要はありません。これは、 section要素と h1 要素自体が主題の変更を暗示するためです。

次のPeter F. Hamilton著Pandora's Starからの抜粋は、場面転換に先行する2つの段落と、それに続く段落を示しています。印刷された書籍では、第2段落と第3段落の間に中央揃えの星印を1つ含む空白として表される場面転換を、ここではhr要素を使用して表しています。

<p>Dudley was ninety-two, in his second life, and fast approaching
time for another rejuvenation. Despite his body having the physical
age of a standard fifty-year-old, the prospect of a long degrading
campaign within academia was one he regarded with dread. For a
supposedly advanced civilization, the Intersolar Commonwealth could be
appallingly backward at times, not to mention cruel.</p>
<p><i>Maybe it won't be that bad</i>, he told himself. The lie was
comforting enough to get him through the rest of the night's
shift.</p>
<hr>
<p>The Carlton AllLander drove Dudley home just after dawn. Like the
astronomer, the vehicle was old and worn, but perfectly capable of
doing its job. It had a cheap diesel engine, common enough on a
semi-frontier world like Gralmond, although its drive array was a
thoroughly modern photoneural processor. With its high suspension and
deep-tread tyres it could plough along the dirt track to the
observatory in all weather and seasons, including the metre-deep snow
of Gralmond's winters.</p>

hr要素は文書のアウトラインに影響しません。

4.4.3 `pre` 要素

Element/pre

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLPreElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer6+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

フローコンテンツが期待される場所。

text/htmlにおけるタグの省略：

どちらのタグも省略できません。

[Exposed=Window]
interface HTMLPreElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

pre要素は、要素ではなくタイポグラフィ上の慣例によって構造が表される、整形済みテキストのブロックを表します。

HTML構文では、 pre要素の開始タグの直後にある先頭の改行文字は削除されます。

pre要素を使用できる場合の例：

空行で段落を示し、行頭に箇条書き記号が付いた行でリストを示すなどしたメールを含める場合。
その言語の慣例に従って構造を示したコンピューターコードの断片を含める場合。
ASCIIアートを表示する場合。

作成者には、整形が失われたときに整形済みテキストがどのように体験されるかを検討することが推奨されます。音声合成装置、点字ディスプレイなどの利用者については、まさにそのようになります。ASCIIアートのような場合、テキストによる説明などの代替表現の方が、文書の読者にとってより広くアクセシブルになる可能性があります。

コンピューターコードのブロックを表すには、pre要素を code要素とともに使用できます。コンピューター出力のブロックを表すには、pre要素を samp要素とともに使用できます。同様に、kbd要素を pre要素内で使用して、ユーザーが入力するテキストを示すことができます。

この要素には、双方向アルゴリズムに関するレンダリング要件があります。

次の断片では、コンピューターコードの例が提示されています。

<p>This is the <code>Panel</code> constructor:</p>
<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>

次の断片では、samp要素とkbd要素が、Zork Iのセッションを示すために、pre要素の内容内で混在しています。

<pre><samp>You are in an open field west of a big white house with a boarded
front door.
There is a small mailbox here.

></samp> <kbd>open mailbox</kbd>

<samp>Opening the mailbox reveals:
A leaflet.

></samp></pre>

次に示すのは、詩そのものの本質的な一部を形成する特異な書式を保持するために、pre要素を使用した現代詩です。

<pre>                maxling

it is with a          heart
               heavy

that i admit loss of a feline
        so           loved

a friend lost to the
        unknown
                                (night)

~cdr 11dec07</pre>

4.4.4 `blockquote`要素

Element/blockquote

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLQuoteElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer6+

Firefox Android?Safari iOS1+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

フローコンテンツが期待される場所。

text/htmlにおけるタグの省略：

どちらのタグも省略できません。

コンテンツ属性：

グローバル属性

cite — 引用元または編集に関する詳細情報へのリンク

デフォルト、属性はcite。

[Exposed=Window]
interface HTMLQuoteElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, ReflectURL] attribute USVString cite;
};

HTMLQuoteElementインターフェースは、 q 要素でも使用されます。

blockquote要素は、別の情報源から引用されたセクションを表します。

blockquote内のコンテンツは別の情報源から引用されなければならず、その情報源にアドレスがある場合は、 cite属性で引用元を示すことができます。

cite 属性が存在する場合、その値は前後に空白を含む可能性がある有効なURLでなければなりません。対応する引用リンクを得るには、属性の値を要素のノード文書を基準として構文解析しなければなりません。ユーザーエージェントは、ユーザーがそのような引用リンクをたどれるようにしても構いませんが、これらは主として私的利用（たとえば、サイトでの引用の利用統計を収集するサーバー側スクリプト）を意図したものであり、読者向けではありません。

blockquoteのコンテンツは、テキストの言語における慣例的な方法で省略したり、文脈を追加したりできます。

たとえば英語では、これは伝統的に角括弧を使用して行われます。「Jane ate the cracker. She then said she liked apples and fish.」という文を含むページを考えると、次のように引用できます：

<blockquote>
 <p>[Jane] then said she liked [...] fish.</p>
</blockquote>

引用の帰属情報がある場合、それはblockquote 要素の外側に配置しなければなりません。

たとえば、ここでは引用後の段落に帰属情報が示されています：

<blockquote>
 <p>I contend that we are both atheists. I just believe in one fewer
 god than you do. When you understand why you dismiss all the other
 possible gods, you will understand why I dismiss yours.</p>
</blockquote>
<p>— Stephen Roberts</p>

以下の他の例は、帰属情報を示す別の方法を示しています。

ここでは、blockquote 要素をfigure 要素およびそのfigcaptionと組み合わせて使用し、引用とその帰属情報を明確に関連付けています（帰属情報は引用の一部ではないため、blockquote 自体の内部には属しません）：

<figure>
 <blockquote>
  <p>The truth may be puzzling. It may take some work to grapple with.
  It may be counterintuitive. It may contradict deeply held
  prejudices. It may not be consonant with what we desperately want to
  be true. But our preferences do not determine what's true. We have a
  method, and that method helps us to reach not absolute truth, only
  asymptotic approaches to the truth — never there, just closer
  and closer, always finding vast new oceans of undiscovered
  possibilities. Cleverly designed experiments are the key.</p>
 </blockquote>
 <figcaption>Carl Sagan, in "<cite>Wonder and Skepticism</cite>", from
 the <cite>Skeptical Inquirer</cite> Volume 19, Issue 1 (January-February
 1995)</figcaption>
</figure>

次の例は、citeをblockquoteとともに使用する例を示しています：

<p>His next piece was the aptly named <cite>Sonnet 130</cite>:</p>
<blockquote cite="https://quotes.example.org/s/sonnet130.html">
  <p>My mistress' eyes are nothing like the sun,<br>
  Coral is far more red, than her lips red,<br>
  ...

この例は、フォーラムの投稿でblockquoteを使用して、ユーザーがどの投稿に返信しているかを示す方法を示しています。各投稿にはarticle要素を使用して、スレッド構造をマークアップしています。

<article>
 <h1><a href="https://bacon.example.com/?blog=109431">Bacon on a crowbar</a></h1>
 <article>
  <header><strong>t3yw</strong> 12 points 1 hour ago</header>
  <p>I bet a narwhal would love that.</p>
  <footer><a href="?pid=29578">permalink</a></footer>
  <article>
   <header><strong>greg</strong> 8 points 1 hour ago</header>
   <blockquote><p>I bet a narwhal would love that.</p></blockquote>
   <p>Dude narwhals don't eat bacon.</p>
   <footer><a href="?pid=29579">permalink</a></footer>
   <article>
    <header><strong>t3yw</strong> 15 points 1 hour ago</header>
    <blockquote>
     <blockquote><p>I bet a narwhal would love that.</p></blockquote>
     <p>Dude narwhals don't eat bacon.</p>
    </blockquote>
    <p>Next thing you'll be saying they don't get capes and wizard
    hats either!</p>
    <footer><a href="?pid=29580">permalink</a></footer>
    <article>
     <article>
      <header><strong>boing</strong> -5 points 1 hour ago</header>
      <p>narwhals are worse than ceiling cat</p>
      <footer><a href="?pid=29581">permalink</a></footer>
     </article>
    </article>
   </article>
  </article>
  <article>
   <header><strong>fred</strong> 1 points 23 minutes ago</header>
   <blockquote><p>I bet a narwhal would love that.</p></blockquote>
   <p>I bet they'd love to peel a banana too.</p>
   <footer><a href="?pid=29582">permalink</a></footer>
  </article>
 </article>
</article>

この例は、短い断片にblockquoteを使用する方法を示し、blockquote 要素内で必ずしもp 要素を使用する必要がないことを示しています：

<p>He began his list of "lessons" with the following:</p>
<blockquote>One should never assume that his side of
the issue will be recognized, let alone that it will
be conceded to have merits.</blockquote>
<p>He continued with a number of similar points, ending with:</p>
<blockquote>Finally, one should be prepared for the threat
of breakdown in negotiations at any given moment and not
be cowed by the possibility.</blockquote>
<p>We shall now discuss these points...

会話を表現する方法の例は後のセクションで示します。この目的でcite要素とblockquote 要素を使用することは適切ではありません。

4.4.5 `ol` 要素

Element/ol

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLOListElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

カテゴリー：

フローコンテンツ。

要素の子に少なくとも1つのli要素が含まれる場合：知覚可能コンテンツ。

この要素を使用できる文脈：

フローコンテンツが期待される場所。

コンテンツモデル：

0個以上のli要素およびスクリプト支援要素。

text/htmlにおけるタグの省略：

どちらのタグも省略できません。

コンテンツ属性：

グローバル属性

reversed — リストを逆順に番号付けする

start — リストの開始値

type — リストマーカーの種類

デフォルト、属性は reversed、start、type。

DOMインターフェース：

[Exposed=Window]
interface HTMLOListElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute boolean reversed;
  [CEReactions, Reflect, ReflectDefault=1] attribute long start;
  [CEReactions, Reflect] attribute DOMString type;

  // also has obsolete members
};

ol要素は、項目が意図的に順序付けられており、その順序を変更すると文書の意味が変わる項目のリストを表します。

リストの項目は、ol 要素の子ノードであるli 要素をツリー順に並べたものです。

Element/ol#attr-reversed

現在のすべてのエンジンでサポートされています。

Firefox18+Safari6+Chrome18+

Opera?Edge79+

Edge（旧版）≤79+Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

reversed属性は真偽属性です。存在する場合、リストが降順のリスト（...、3、2、1）であることを示します。属性が省略されている場合、リストは昇順のリスト（1、2、3、...）です。

start属性が存在する場合、その値は有効な整数でなければなりません。この属性は、リストの開始値を決定するために使用されます。

ol要素には、次のように決定される整数である開始値があります：

ol要素にstart属性がある場合：
1. parsedを、属性の値を整数として構文解析した結果とします。
2. parsedがエラーでない場合、parsedを返します。
ol要素にreversed 属性がある場合、所有される li 要素の数を返します。
1を返します。

type属性は、それが重要となる場合（たとえば、項目が番号または文字によって参照される場合）に、リストで使用するマーカーの種類を指定するために使用できます。属性が指定される場合、その値は次の表のいずれかの行の最初のセルに示される文字の1つと同一でなければなりません。type属性は、最初のセルが属性の値と一致する行の第2列のセルに示される状態を表します。どのセルも一致しない場合、または属性が省略されている場合、属性はdecimal状態を表します。

キーワード	状態	説明	値1～3および3999～4001の例
`1` (U+0031)	decimal	10進数	`1.`	`2.`	`3.`	...	`3999.`	`4000.`	`4001.`	...
`a` (U+0061)	lower-alpha	小文字のラテンアルファベット	`a.`	`b.`	`c.`	...	`ewu.`	`ewv.`	`eww.`	...
`A` (U+0041)	upper-alpha	大文字のラテンアルファベット	`A.`	`B.`	`C.`	...	`EWU.`	`EWV.`	`EWW.`	...
`i` (U+0069)	lower-roman	小文字のローマ数字	`i.`	`ii.`	`iii.`	...	`mmmcmxcix.`	`i̅v̅.`	`i̅v̅i.`	...
`I` (U+0049)	upper-roman	大文字のローマ数字	`I.`	`II.`	`III.`	...	`MMMCMXCIX.`	`I̅V̅.`	`I̅V̅I.`	...

ユーザーエージェントは、ol要素のtype属性の状態と一貫した方法で、リストの項目をレンダリングするべきです。0以下の数値は、type属性にかかわらず、常に10進法を使用するべきです。

CSSユーザーエージェントについては、この属性から 'list-style-type' CSSプロパティへの対応付けが、レンダリングのセクションに示されています（対応付けは単純で、上記の状態は対応するCSS値と同じ名前を持ちます）。

CSSユーザーエージェントでこの属性を実装するために使用されるデフォルトのCSSリストスタイルを再定義することができます。再定義すると、リスト項目のレンダリング方法に影響します。

[ReflectDefault]により、 start IDL属性は、startコンテンツ属性が省略され、reversedコンテンツ属性が指定されている場合、必ずしもリストの開始値と一致しません。

次のマークアップは順序が重要なリストを示しているため、ol 要素が適切です。同じ項目にul要素を使用した例を確認するには、このリストをul セクションの同等のリストと比較してください。

<p>I have lived in the following countries (given in the order of when
I first lived there):</p>
<ol>
 <li>Switzerland
 <li>United Kingdom
 <li>United States
 <li>Norway
</ol>

リストの順序を変更すると、文書の意味が変わることに注意してください。次の例では、最初の2つの項目の相対的な順序を変更したことで、著者の出生地が変わっています：

<p>I have lived in the following countries (given in the order of when
I first lived there):</p>
<ol>
 <li>United Kingdom
 <li>Switzerland
 <li>United States
 <li>Norway
</ol>

4.4.6 `ul` 要素

Element/ul

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLUListElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

カテゴリー：

フローコンテンツ。

要素の子に少なくとも1つのli要素が含まれる場合：知覚可能コンテンツ。

この要素を使用できる文脈：

フローコンテンツが期待される場所。

コンテンツモデル：

0個以上のli要素およびスクリプト支援要素。

text/htmlにおけるタグの省略：

どちらのタグも省略できません。

[Exposed=Window]
interface HTMLUListElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

ul要素は、項目の順序が重要ではない、すなわち順序を変更しても文書の意味が実質的に変わらない項目のリストを表します。

リストの項目は、ul 要素の子ノードであるli 要素です。

次のマークアップは順序が重要ではないリストを示しているため、 ul要素が適切です。同じ項目にol要素を使用した例を確認するには、このリストをolセクションの同等のリストと比較してください。

<p>I have lived in the following countries:</p>
<ul>
 <li>Norway
 <li>Switzerland
 <li>United Kingdom
 <li>United States
</ul>

リストの順序を変更しても文書の意味が変わらないことに注意してください。上の断片では項目をアルファベット順に示していますが、下の断片では2007年時点の当座預金残高の大きさの順に示しています。それでも文書の意味はまったく変わりません：

<p>I have lived in the following countries:</p>
<ul>
 <li>Switzerland
 <li>Norway
 <li>United Kingdom
 <li>United States
</ul>

Element/menu

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer6+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLMenuElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer6+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

カテゴリー：

。

要素の子に少なくとも1つの要素が含まれる場合：。

この要素を使用できる文脈：

が期待される場所。

コンテンツモデル：

0個以上の要素および要素。

text/htmlにおけるタグの省略：

どちらのタグも省略できません。

。

[Exposed=Window]
interface HTMLMenuElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

menu要素は、その内容から構成されるツールバーを、項目の順序なしリスト（li要素で表される）の形で表します。各項目は、ユーザーが実行または起動できるコマンドを表します。

menu要素は、コマンドの順序なしリスト（「ツールバー」）を表現するためのulの単なる意味的な代替です。

この例では、テキスト編集アプリケーションがmenu要素を使用して、一連の編集コマンドを提供しています：

<menu>
 <li><button onclick="copy()"><img src="copy.svg" alt="Copy"></button></li>
 <li><button onclick="cut()"><img src="cut.svg" alt="Cut"></button></li>
 <li><button onclick="paste()"><img src="paste.svg" alt="Paste"></button></li>
</menu>

これを従来型のツールバーメニューのように見せるためのスタイル設定は、アプリケーションに委ねられていることに注意してください。

4.4.8 `li` 要素

Element/li

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLLIElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

カテゴリー：

なし。

この要素を使用できる文脈：

ol要素内。

ul要素内。

要素内。

コンテンツモデル：

フローコンテンツ。

text/htmlにおけるタグの省略：

li要素の終了タグは、li要素の直後に別のli要素が続く場合、または親要素内にそれ以上コンテンツがない場合に省略できます。

コンテンツ属性：

グローバル属性

要素がul要素または要素の子でない場合：value — リスト項目の序数値

デフォルト、属性は value。

[Exposed=Window]
interface HTMLLIElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute long value;

  // also has obsolete members
};

li要素はリスト項目を表します。その親要素がol要素、ul要素、またはmenu要素である場合、この要素は、それらの要素について定義されている親要素のリストの項目です。それ以外の場合、このリスト項目には、他のどのli要素とも定義されたリスト関連の関係がありません。

value属性が存在する場合、その値は有効な整数でなければなりません。この属性は、liのリスト所有者がol要素である場合に、リスト項目の序数値を決定するために使用されます。

'display'の算出値が 'list-item'である要素には、次のように決定されるリスト所有者があります：

要素がレンダリングされていない場合、 nullを返します。要素にはリスト所有者がありません。
ancestorを要素の親とします。
要素にol、 ul、またはmenuの祖先がある場合、 ancestorを、そのような祖先要素のうち最も近いものに設定します。
ancestorの包括的祖先のうち、CSS ボックスを生成する最も近いものを返します。

そのような要素は必ず存在します。少なくとも文書要素は常にCSSボックスを生成するためです。

指定されたリスト所有者ownerが所有する各要素の序数値を決定するには、次の手順を実行します：

iを1とします。
ownerがol 要素である場合、numberingを ownerの開始値とします。それ以外の場合、 numberingを1とします。
ループ：iがownerが所有するリスト項目の数より大きい場合、戻ります。ownerの所有するすべてのリスト項目に序数値が割り当てられました。
itemを、ownerの所有するリスト項目のうち、ツリー順で i番目のものとします。
itemがli 要素であり、value 属性を持つ場合：
1. parsedを、属性の値を整数として構文解析した結果とします。
2. parsedがエラーでない場合、numberingを parsedに設定します。
itemの序数値は numberingです。
ownerがol 要素であり、ownerにreversed属性がある場合、 numberingを1減らします。それ以外の場合、numberingを1増やします。
iを1増やします。
ループというラベルが付いた手順に移動します。

要素のvalue IDL属性は、その序数値に直接対応しません。単にコンテンツ属性を反映するだけです。たとえば、次のリストがあるとします：

<ol>
 <li>Item 1
 <li value="3">Item 3
 <li>Item 4
</ol>

序数値は1、3、4ですが、 value IDL属性を取得すると 0、3、0が返されます。

次の例では、上位10本の映画が逆順で一覧表示されています。figure要素とそのfigcaption 要素を使用して、リストにタイトルを付けている方法に注意してください。

<figure>
 <figcaption>The top 10 movies of all time</figcaption>
 <ol>
  <li value="10"><cite>Josie and the Pussycats</cite>, 2001</li>
  <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
  <li value="8"><cite>A Bug's Life</cite>, 1998</li>
  <li value="7"><cite>Toy Story</cite>, 1995</li>
  <li value="6"><cite>Monsters, Inc</cite>, 2001</li>
  <li value="5"><cite>Cars</cite>, 2006</li>
  <li value="4"><cite>Toy Story 2</cite>, 1999</li>
  <li value="3"><cite>Finding Nemo</cite>, 2003</li>
  <li value="2"><cite>The Incredibles</cite>, 2004</li>
  <li value="1"><cite>Ratatouille</cite>, 2007</li>
 </ol>
</figure>

このマークアップは、ol要素にreversed属性を使用して、次のように記述することもできます：

<figure>
 <figcaption>The top 10 movies of all time</figcaption>
 <ol reversed>
  <li><cite>Josie and the Pussycats</cite>, 2001</li>
  <li><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
  <li><cite>A Bug's Life</cite>, 1998</li>
  <li><cite>Toy Story</cite>, 1995</li>
  <li><cite>Monsters, Inc</cite>, 2001</li>
  <li><cite>Cars</cite>, 2006</li>
  <li><cite>Toy Story 2</cite>, 1999</li>
  <li><cite>Finding Nemo</cite>, 2003</li>
  <li><cite>The Incredibles</cite>, 2004</li>
  <li><cite>Ratatouille</cite>, 2007</li>
 </ol>
</figure>

li要素内に見出し要素（たとえばh1）を含めることは適合しますが、作成者が意図したセマンティクスを伝えない可能性があります。見出しは新しいセクションを開始するため、リスト内の見出しは暗黙的にリストを複数のセクションにまたがるよう分割します。

4.4.9 `dl` 要素

Element/dl

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLDListElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

カテゴリー：

フローコンテンツ。

要素の子に少なくとも1つの名前と値のグループが含まれる場合：知覚可能コンテンツ。

この要素を使用できる文脈：

フローコンテンツが期待される場所。

コンテンツモデル：

次のいずれか：1個以上のdt要素と、それに続く1個以上の dd要素からなるグループが 0個以上。任意でスクリプト支援要素を混在させることができます。

または：1個以上のdiv要素。任意でスクリプト支援要素を混在させることができます。

text/htmlにおけるタグの省略：

どちらのタグも省略できません。

[Exposed=Window]
interface HTMLDListElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

dl要素は、0個以上の名前と値のグループからなる関連付けリスト（説明リスト）を表します。名前と値のグループは、1個以上の名前（dt要素で、子のdiv要素の子である場合もあります）と、それに続く1個以上の値（dd要素で、子のdiv要素の子である場合もあります）からなります。dt要素およびdd要素の子以外のノードと、子のdiv要素の子である dt要素およびdd要素以外のノードは無視されます。単一のdl 要素内では、各名前について複数のdt要素を置くべきではありません。

名前と値のグループは、用語と定義、メタデータの項目と値、質問と回答、またはその他の名前と値のデータのグループである場合があります。

グループ内の値は代替です。同じ値の一部を形成する複数の段落は、すべて同じdd要素内に置かなければなりません。

グループのリストの順序、および各グループ内の名前と値の順序は、重要である場合があります。

グループ全体に適用されるマイクロデータ属性、その他のグローバル属性でグループに注釈を付けるため、または単にスタイル設定のために、dl要素内の各グループをdiv要素で囲むことができます。これはdl要素のセマンティクスを変更しません。

dl要素 dlの名前と値のグループは、次のアルゴリズムを使用して決定されます。名前と値のグループには、名前（dt要素のリストで、初期状態では空）と値（dd 要素のリストで、初期状態では空）があります。

groupsを名前と値のグループの空のリストとします。
currentを新しい名前と値のグループとします。
seenDdをfalseとします。
childをdlの最初の子とします。
grandchildをnullとします。
childがnullでない間：
1. childがdiv要素である場合：
  1. grandchildをchildの最初の子とします。
  2. grandchildがnullでない間：
    1. grandchildについてdtまたは ddを処理します。
    2. grandchildをgrandchildの次の兄弟に設定します。
2. それ以外の場合、childについてdtまたは ddを処理します。
3. childをchildの次の兄弟に設定します。
currentが空でない場合、currentを groupsに付加します。
groupsを返します。

ノードnodeについてdtまたは ddを処理するとは、次の手順に従うことを意味します：

groups、current、およびseenDdを、これらの手順を呼び出したアルゴリズム内の同名の変数とします。
nodeがdt 要素である場合：
1. seenDdがtrueの場合、currentをgroupsに付加し、 currentを新しい名前と値のグループに設定し、seenDdをfalseに設定します。
2. nodeをcurrentの名前に付加します。
それ以外で、nodeがdd要素である場合、 nodeをcurrentの値に付加し、seenDdをtrueに設定します。

名前と値のグループの名前または値が空のリストである場合、多くは dt要素の代わりに誤ってdd要素を使用したり、その逆を行ったりしたことが原因です。適合性チェッカーは、そのような誤りを検出し、マークアップを正しく使用する方法を作成者に助言できる場合があります。

次の例では、1つの項目（「Authors」）が2つの値（「John」と「Luke」）に関連付けられています。

<dl>
 <dt> Authors
 <dd> John
 <dd> Luke
 <dt> Editor
 <dd> Frank
</dl>

次の例では、1つの定義が2つの用語に関連付けられています。

<dl>
 <dt lang="en-US"> <dfn>color</dfn> </dt>
 <dt lang="en-GB"> <dfn>colour</dfn> </dt>
 <dd> A sensation which (in humans) derives from the ability of
 the fine structure of the eye to distinguish three differently
 filtered analyses of a view. </dd>
</dl>

次の例は、一種のメタデータをマークアップするためにdl要素を使用する方法を示しています。例の最後では、1つのグループに2つのメタデータラベル（「Authors」と「Editors」）と 2つの値（「Robert Rothman」と「Daniel Jackson」）があります。この例では、スタイル設定を容易にするため、dt要素と dd要素のグループを div要素で囲んでいます。

<dl>
 <div>
  <dt> Last modified time </dt>
  <dd> 2004-12-23T23:33Z </dd>
 </div>
 <div>
  <dt> Recommended update interval </dt>
  <dd> 60s </dd>
 </div>
 <div>
  <dt> Authors </dt>
  <dt> Editors </dt>
  <dd> Robert Rothman </dd>
  <dd> Daniel Jackson </dd>
 </div>
</dl>

次の例は、一連の指示を示すためにdl要素を使用しています。ここでは指示の順序が重要です（他の例では、ブロックの順序は重要ではありませんでした）。

<p>Determine the victory points as follows (use the
first matching case):</p>
<dl>
 <dt> If you have exactly five gold coins </dt>
 <dd> You get five victory points </dd>
 <dt> If you have one or more gold coins, and you have one or more silver coins </dt>
 <dd> You get two victory points </dd>
 <dt> If you have one or more silver coins </dt>
 <dd> You get one victory point </dd>
 <dt> Otherwise </dt>
 <dd> You get no victory points </dd>
</dl>

次の断片は、dl 要素を用語集として使用する方法を示しています。定義される語を示すためにdfnを使用していることに注意してください。

<dl>
 <dt><dfn>Apartment</dfn>, n.</dt>
 <dd>An execution context grouping one or more threads with one or
 more COM objects.</dd>
 <dt><dfn>Flat</dfn>, n.</dt>
 <dd>A deflated tire.</dd>
 <dt><dfn>Home</dfn>, n.</dt>
 <dd>The user's login directory.</dd>
</dl>

この例は、dl要素内でdiv要素とともにマイクロデータ属性を使用し、フランス料理店のアイスクリームデザートに注釈を付けています。

<dl>
 <div itemscope itemtype="http://schema.org/Product">
  <dt itemprop="name">Café ou Chocolat Liégeois
  <dd itemprop="offers" itemscope itemtype="http://schema.org/Offer">
   <span itemprop="price">3.50</span>
   <data itemprop="priceCurrency" value="EUR">€</data>
  <dd itemprop="description">
   2 boules Café ou Chocolat, 1 boule Vanille, sauce café ou chocolat, chantilly
 </div>

 <div itemscope itemtype="http://schema.org/Product">
  <dt itemprop="name">Américaine
  <dd itemprop="offers" itemscope itemtype="http://schema.org/Offer">
   <span itemprop="price">3.50</span>
   <data itemprop="priceCurrency" value="EUR">€</data>
  <dd itemprop="description">
   1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly
 </div>
</dl>

div要素を使用しない場合、データを項目と関連付けるため、マークアップではdd要素内のデータをitemref属性で次のようにリンクする必要があります。

<dl>
 <dt itemscope itemtype="http://schema.org/Product" itemref="1-offer 1-description">
  <span itemprop="name">Café ou Chocolat Liégeois</span>
 <dd id="1-offer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  <span itemprop="price">3.50</span>
  <data itemprop="priceCurrency" value="EUR">€</data>
 <dd id="1-description" itemprop="description">
  2 boules Café ou Chocolat, 1 boule Vanille, sauce café ou chocolat, chantilly

 <dt itemscope itemtype="http://schema.org/Product" itemref="2-offer 2-description">
  <span itemprop="name">Américaine</span>
 <dd id="2-offer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  <span itemprop="price">3.50</span>
  <data itemprop="priceCurrency" value="EUR">€</data>
 <dd id="2-description" itemprop="description">
  1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly
</dl>

dl要素は、対話のマークアップには不適切です。対話をマークアップする方法の例を参照してください。

4.4.10 `dt` 要素

Element/dt

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: なし。
この要素を使用できる文脈：: dl要素内のdd要素またはdt要素の前。; dl要素の子であるdiv要素内のdd要素またはdt要素の前。
コンテンツモデル：: フローコンテンツ。ただし、子孫にheader、footer、セクショニングコンテンツ、または見出しコンテンツを含まないもの。
text/htmlにおけるタグの省略：: dt要素の終了タグは、dt要素の直後に別のdt要素またはdd要素が続く場合に省略できます。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

dt要素は、説明リスト（dl要素）内の用語と説明のグループにおける用語または名前の部分を表します。

dt要素自体は、 dl要素内で使用されても、その内容が定義される用語であることを示しませんが、これはdfn要素を使用して示すことができます。

この例は、質問にdt要素を、回答にdd要素を使用してマークアップした、よくある質問（FAQ）のリストを示しています。

<article>
 <h1>FAQ</h1>
 <dl>
  <dt>What do we want?</dt>
  <dd>Our data.</dd>
  <dt>When do we want it?</dt>
  <dd>Now.</dd>
  <dt>Where is it?</dt>
  <dd>We are not sure.</dd>
 </dl>
</article>

4.4.11 `dd` 要素

Element/dd

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: なし。
この要素を使用できる文脈：: dl要素内のdt要素またはdd要素の後。; dl要素の子であるdiv要素内のdt要素またはdd要素の後。
コンテンツモデル：: フローコンテンツ。
text/htmlにおけるタグの省略：: dd要素の終了タグは、dd要素の直後に別のdd要素またはdt要素が続く場合、または親要素内にそれ以上コンテンツがない場合に省略できます。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

dd要素は、説明リスト（dl要素）内の用語と説明のグループにおける説明、定義、または値の部分を表します。

dlは、辞書のような語彙リストを定義するために使用できます。次の例では、dfnを含むdtによって示される各項目に、定義のさまざまな部分を示す複数のddがあります。

<dl>
 <dt><dfn>happiness</dfn></dt>
 <dd class="pronunciation">/ˈhæpinəs/</dd>
 <dd class="part-of-speech"><i><abbr>n.</abbr></i></dd>
 <dd>The state of being happy.</dd>
 <dd>Good fortune; success. <q>Oh <b>happiness</b>! It worked!</q></dd>
 <dt><dfn>rejoice</dfn></dt>
 <dd class="pronunciation">/rɪˈdʒɔɪs/</dd>
 <dd><i class="part-of-speech"><abbr>v.intr.</abbr></i> To be delighted oneself.</dd>
 <dd><i class="part-of-speech"><abbr>v.tr.</abbr></i> To cause one to be delighted.</dd>
</dl>

4.4.12 `figure`要素

Element/figure

現在のすべてのエンジンでサポートされています。

Firefox4+Safari5.1+Chrome8+

Opera11+Edge79+

Edge（旧版）12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11+

カテゴリー：: フローコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フローコンテンツが期待される場所。
コンテンツモデル：: 次のいずれか：1個のfigcaption要素と、それに続くフローコンテンツ。; または：フローコンテンツと、それに続く1個のfigcaption 要素。; または：フローコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

figure要素は表します、任意でキャプションを伴い、自己完結しており（完全な文のように）、通常は文書の主要なフローから単一の単位として参照されるフローコンテンツを。

この文脈における「自己完結」は、必ずしも独立していることを意味しません。たとえば、段落内の各文は自己完結しています。文の一部である画像にはfigureは不適切ですが、画像で構成された文全体には適しています。

したがって、この要素はイラスト、図、写真、コードリストなどに注釈を付けるために使用できます。

figureが、キャプション（たとえば図番号）によって識別され、文書の主要なコンテンツから参照される場合、そのコンテンツを主要なコンテンツから離れた場所、たとえばページの横、専用ページ、または付録へ、文書のフローに影響を与えることなく容易に移動できます。

figure要素が相対的な位置、たとえば「上の写真」や「次の図が示すように」によって参照される場合、図を移動するとページの意味が損なわれます。ページの意味に影響を与えずに容易にスタイルを変更できるように、作成者には、そのような相対的参照ではなく、ラベルを使用して図を参照することを検討するよう推奨されます。

要素の最初の子であるfigcaption要素が存在する場合、それはfigure要素の内容のキャプションを表します。子の figcaption 要素がない場合、キャプションはありません。

figure要素の内容は周囲のフローの一部です。ページの目的が、たとえば画像共有サイト上の写真のように図を表示することである場合、figure要素とfigcaption要素を使用して、その図に明示的なキャプションを提供できます。周囲のフローとの関連が間接的にすぎないコンテンツ、または周囲のフローとは別の目的を果たすコンテンツには、aside要素を使用するべきです（その内部に figureを含めることもできます）。たとえば、articleの内容を繰り返す抜粋引用は、aside内に置く方が、 figure内に置くより適切です。これはコンテンツの一部ではなく、読者を引き付けたり主要な話題を強調したりする目的でコンテンツを繰り返したものだからです。

この例は、コードリストをマークアップするためのfigure要素を示しています。

<p>In <a href="#l4">listing 4</a> we see the primary core interface
API declaration.</p>
<figure id="l4">
 <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
 <pre><code>interface PrimaryCore {
 boolean verifyDataLine();
 undefined sendData(sequence&lt;byte> data);
 undefined initSelfDestruct();
}</code></pre>
</figure>
<p>The API is designed to use UTF-8.</p>

ここでは、（ギャラリーのように）ページの主要なコンテンツである写真をマークアップするための figure 要素を示しています。

<!DOCTYPE HTML>
<html lang="en">
<title>Bubbles at work — My Gallery™</title>
<figure>
 <img src="bubbles-work.jpeg"
      alt="Bubbles, sitting in his office chair, works on his
           latest project intently.">
 <figcaption>Bubbles at work</figcaption>
</figure>
<nav><a href="19414.html">Prev</a> — <a href="19416.html">Next</a></nav>

この例では、図ではない画像と、図である画像および動画を示しています。最初の画像は文字どおり例の第2文の一部であるため、自己完結した単位ではなく、したがってfigureは不適切です。

<h2>Malinko's comics</h2>

<p>This case centered on some sort of "intellectual property"
infringement related to a comic (see Exhibit A). The suit started
after a trailer ending with these words:

<blockquote>
 <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
</blockquote>

<p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
preemptive strike using snowballs. A complete copy of the trailer is
included with Exhibit B.

<figure>
 <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
 <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption>
</figure>

<figure>
 <video src="ex-b.mov"></video>
 <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
</figure>

<p>The case was resolved out of court.

ここでは、詩の一部がfigureを使用してマークアップされています。

<figure>
 <p>'Twas brillig, and the slithy toves<br>
 Did gyre and gimble in the wabe;<br>
 All mimsy were the borogoves,<br>
 And the mome raths outgrabe.</p>
 <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
</figure>

この例は、城について論じるより大きな作品の一部となり得るもので、入れ子になった figure要素を使用して、グループ全体のキャプションと、グループ内の各図の個別キャプションの両方を提供しています：

<figure>
 <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
 <figure>
  <figcaption>Etching. Anonymous, ca. 1423.</figcaption>
  <img src="castle1423.jpeg" alt="The castle has one tower, and a tall wall around it.">
 </figure>
 <figure>
  <figcaption>Oil-based paint on canvas. Maria Towle, 1858.</figcaption>
  <img src="castle1858.jpeg" alt="The castle now has two towers and two walls.">
 </figure>
 <figure>
  <figcaption>Film photograph. Peter Jankle, 1999.</figcaption>
  <img src="castle1999.jpeg" alt="The castle lies in ruins, the original tower all that remains in one piece.">
 </figure>
</figure>

前の例は、次のようにより簡潔に記述することもできます（入れ子になったfigure/figcaptionの組の代わりにtitle属性を使用します）：

<figure>
 <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
      alt="The castle has one tower, and a tall wall around it.">
 <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
      alt="The castle now has two towers and two walls.">
 <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
      alt="The castle lies in ruins, the original tower all that remains in one piece.">
 <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
</figure>

図は、コンテンツから暗黙的にのみ参照されることもあります：

<article>
 <h1>Fiscal negotiations stumble in Congress as deadline nears</h1>
 <figure>
  <img src="obama-reid.jpeg" alt="Obama and Reid sit together smiling in the Oval Office.">
  <figcaption>Barack Obama and Harry Reid. White House press photograph.</figcaption>
 </figure>
 <p>Negotiations in Congress to end the fiscal impasse sputtered on Tuesday, leaving both chambers
 grasping for a way to reopen the government and raise the country's borrowing authority with a
 Thursday deadline drawing near.</p>
 ...
</article>

4.4.13 `figcaption`要素

Element/figcaption

現在のすべてのエンジンでサポートされています。

Firefox4+Safari5.1+Chrome8+

Opera11+Edge79+

Edge（旧版）12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11+

カテゴリー：: なし。
この要素を使用できる文脈：: figure要素の最初または最後の子として。
コンテンツモデル：: フローコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

figcaption要素は、親のfigure要素がある場合、そのfigcaption 要素以外の残りの内容に対するキャプションまたは凡例を表します。

この要素には、出典に関する追加情報を含めることができます：

<figcaption>
 <p>A duck.</p>
 <p><small>Photograph courtesy of 🌟 News.</small></p>
</figcaption>

<figcaption>
 <p>Average rent for 3-room apartments, excluding non-profit apartments</p>
 <p>Zürich’s Statistics Office — <time datetime=2017-11-14>14 November 2017</time></p>
</figcaption>

4.4.14 `main` 要素

Element/main

現在のすべてのエンジンでサポートされています。

Firefox21+Safari7+Chrome26+

Opera16+Edge79+

Edge（旧版）12+Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フローコンテンツが期待される場所。ただし、階層的に正しい main要素である場合に限ります。
コンテンツモデル：: フローコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

main要素は、文書の主要な内容を表します。

文書には、hidden属性が指定されていないmain要素を 2個以上含めてはなりません。

階層的に正しいmain要素とは、祖先要素がhtml、body、div、アクセシブル名を持たないform、および自律カスタム要素に限定されているものです。各main要素は、階層的に正しいmain 要素でなければなりません。

この例では、作成者はページの各構成要素がボックス内にレンダリングされる表示形式を使用しています。ヘッダー、フッター、ナビゲーションバー、およびサイドバーとは異なるページの主要なコンテンツを囲むために、main要素を使用しています。

<!DOCTYPE html>
<html lang="en">
<title>RPG System 17</title>
<style>
 header, nav, aside, main, footer {
   margin: 0.5em; border: thin solid; padding: 0.5em;
   background: #EFF; color: black; box-shadow: 0 0 0.25em #033;
 }
 h1, h2, p { margin: 0; }
 nav, main { float: left; }
 aside { float: right; }
 footer { clear: both; }
</style>
<header>
 <h1>System Eighteen</h1>
</header>
<nav>
 <a href="../16/">← System 17</a>
 <a href="../18/">RPXIX →</a>
</nav>
<aside>
 <p>This system has no HP mechanic, so there's no healing.
</aside>
<main>
 <h2>Character creation</h2>
 <p>Attributes (magic, strength, agility) are purchased at the cost of one point per level.</p>
 <h2>Rolls</h2>
 <p>Each encounter, roll the dice for all your skills. If you roll more than the opponent, you win.</p>
</main>
<footer>
 <p>Copyright © 2013
</footer>
</html>

次の例では、複数のmain要素を使用し、サーバーとの往復なしでナビゲーションを機能させ、現在のものではない要素にhidden属性を設定するために、スクリプトを使用しています：

<!doctype html>
<html lang=en-CA>
<meta charset=utf-8>
<title> … </title>
<link rel=stylesheet href=spa.css>
<script src=spa.js async></script>
<nav>
 <a href=/>Home</a>
 <a href=/about>About</a>
 <a href=/contact>Contact</a>
</nav>
<main>
 <h1>Home</h1>
 …
</main>
<main hidden>
 <h1>About</h1>
 …
</main>
<main hidden>
 <h1>Contact</h1>
 …
</main>
<footer>Made with ❤️ by <a href=https://example.com/>Example 👻</a>.</footer>

4.4.15 `search`要素

Element/search

現在のエンジンではサポートされていません。

FirefoxいいえSafariいいえChromeいいえ

OperaいいえEdgeいいえ

Edge（旧版）いいえInternet Explorerいいえ

Firefox Android?Safari iOS?Chrome AndroidいいえWebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フローコンテンツが期待される場所。
コンテンツモデル：: フローコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

search要素は、検索またはフィルタリング操作の実行に関連するフォームコントロールの集合やその他のコンテンツを含む、文書またはアプリケーションの一部を表します。これは、ウェブサイトまたはアプリケーションの検索、現在のウェブページ上の検索結果を検索またはフィルタリングする手段、あるいはグローバルまたはインターネット全体を対象とする検索機能である場合があります。

search要素を、単に検索結果を表示するためだけに使用することは適切ではありません。ただし、「クイック検索」の結果の一部としての候補やリンクは、検索機能の一部として含めることができます。検索結果として返されたウェブページは、代わりにそのウェブページの主要なコンテンツの一部として表示されることが想定されます。

次の例では、作成者はウェブページのheader内に検索フォームを含めています：

<header>
  <h1><a href="/">My fancy blog</a></h1>
  ...
  <search>
    <form action="search.php">
      <label for="query">Find an article</label>
      <input id="query" name="q" type="search">
      <button type="submit">Go!</button>
    </form>
  </search>
</header>

この例では、作成者はウェブアプリケーションの検索機能をすべてJavaScriptで実装しています。サーバー側への送信を行うためのform要素は使用されていませんが、コンテナーとなるsearch要素が、子孫コンテンツの目的が検索機能を表すことであると意味的に識別します。

<search>
  <label>
    Find and filter your query
    <input type="search" id="query">
  </label>
  <label>
    <input type="checkbox" id="exact-only">
    Exact matches only
  </label>

  <section>
    <h3>Results found:</h3>
    <ul id="results">
      <li>
        <p><a href="services/consulting">Consulting services</a></p>
        <p>
          Find out how can we help you improve your business with our integrated consultants, Bob and Bob.
        </p>
      </li>
      ...
    </ul>
    <!--
      when a query returns or filters out all results
      render the no results message here
    -->
    <output id="no-results"></output>
  </section>
</search>

次の例では、ページに2つの検索機能があります。1つ目はウェブページのheader内にあり、ウェブサイトのコンテンツを検索するグローバルな仕組みとして機能します。その目的は、指定されたtitle属性によって示されます。2つ目は、現在のページのコンテンツを検索およびフィルタリングする仕組みを表すため、ページの主要なコンテンツの一部として含まれています。その目的を示す見出しが含まれています。

<body>
  <header>
    ...
    <search title="Website">
      ...
    </search>
  </header>
  <main>
    <h1>Hotels near your location</h1>
     <search>
       <h2>Filter results</h2>
       ...
     </search>
     <article>
      <!-- search result content -->
    </article>
  </main>
</body>

4.4.16 `div` 要素

Element/div

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLDivElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

フローコンテンツが期待される場所。

dl要素の子として。

option要素、optgroup要素、または select要素の子孫として。

コンテンツモデル：

要素がdl要素の子である場合：1個以上の dt要素と、それに続く1個以上の dd要素。任意でスクリプト支援要素を混在させることができます。

それ以外で、要素がoption要素、optgroup要素、または select要素の子孫である場合：透過的。

それ以外：フローコンテンツ。

text/htmlにおけるタグの省略：

どちらのタグも省略できません。

[Exposed=Window]
interface HTMLDivElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

div要素には、特別な意味はまったくありません。これはその子を表します。連続する要素のグループに共通するセマンティクスをマークアップするために、class、lang、およびtitle属性とともに使用できます。また、 dl要素内で、dt要素とdd要素のグループを囲むためにも使用できます。

作成者には、他に適切な要素がない場合の最後の手段としてdiv要素を捉えることが強く推奨されます。div要素の代わりにより適切な要素を使用することで、読者にとってのアクセシビリティが向上し、作成者にとっての保守性も高まります。

たとえば、ブログ投稿はarticleを使用して、章はsectionを使用して、ページのナビゲーション支援はnavを使用して、フォームコントロールのグループはfieldsetを使用してマークアップします。

一方、div要素は、スタイル設定の目的や、同様の方法で注釈を付ける必要があるセクション内の複数の段落を囲むために役立つ場合があります。次の例では、2つの段落要素それぞれに言語を設定する代わりに、div要素を使用して 2つの段落の言語を一度に設定しています：

<article lang="en-US">
 <h1>My use of language and my cats</h1>
 <p>My cat's behavior hasn't changed much since her absence, except
 that she plays her new physique to the neighbors regularly, in an
 attempt to get pets.</p>
 <div lang="en-GB">
  <p>My other cat, coloured black and white, is a sweetie. He followed
  us to the pool today, walking down the pavement with us. Yesterday
  he apparently visited our neighbours. I wonder if he recognises that
  their flat is a mirror image of ours.</p>
  <p>Hm, I just noticed that in the last paragraph I used British
  English. But I'm supposed to write in American English. So I
  shouldn't say "pavement" or "flat" or "colour"...</p>
 </div>
 <p>I should say "sidewalk" and "apartment" and "color"!</p>
</article>

4.5 テキストレベルのセマンティクス

4.5.1 `a` 要素

Element/a

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLAnchorElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

HTMLAnchorElement/download

現在のすべてのエンジンでサポートされています。

Firefox20+Safari10.1+Chrome15+

Opera?Edge79+

Edge（旧版）13+Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLAnchorElement/rel

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLAnchorElement/relList

現在のすべてのエンジンでサポートされています。

Firefox30+Safari9+Chrome65+

Opera?Edge79+

Edge（旧版）18Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：

フローコンテンツ。

フレージングコンテンツ。

要素にhref属性がある場合：インタラクティブコンテンツ。

知覚可能コンテンツ。

この要素を使用できる文脈：

フレージングコンテンツが期待される場所。

コンテンツモデル：

透過的。ただし、子孫にインタラクティブコンテンツ、 a要素、またはtabindex属性が指定された要素を含めてはなりません。

text/htmlにおけるタグの省略：

どちらのタグも省略できません。

コンテンツ属性：

グローバル属性

href — ハイパーリンクのアドレス

target — ハイパーリンクのナビゲーションに使用するナビガブル

download — リソースへナビゲートする代わりにダウンロードするかどうか、およびその場合のファイル名

ping — pingするURL

rel — ハイパーリンクを含む文書内の位置と宛先リソースとの関係

hreflang — リンク先リソースの言語

type — 参照先リソースの種類に関するヒント

referrerpolicy — 要素によって開始されるフェッチのリファラーポリシー

アクセシビリティ上の考慮事項：

要素にhref属性がある場合：作成者向け、実装者向け。

それ以外：作成者向け、実装者向け。

サニタイズ：

デフォルト。属性は href、hreflang、およびtype。また、ナビゲーションURL属性は href。

DOMインターフェース：

[Exposed=Window]
interface HTMLAnchorElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute DOMString download;
  [CEReactions, Reflect] attribute USVString ping;
  [CEReactions, Reflect] attribute DOMString rel;
  [SameObject, PutForwards=value, Reflect="rel"] readonly attribute DOMTokenList relList;

  [CEReactions] attribute DOMString text;

  [CEReactions] attribute DOMString referrerPolicy;

  // also has obsolete members
};
HTMLAnchorElement includes HyperlinkElementUtils;
HTMLAnchorElement includes HTMLHyperlinkElementUtils;

a要素にhref属性がある場合、その内容によってラベル付けされたハイパーリンク（ハイパーテキストアンカー）を表します。

a要素にhref属性がない場合、要素は、その内容のみから構成され、関連性があればリンクが置かれていた可能性のある場所のプレースホルダーを表します。

target、download、ping、rel、hreflang、type、およびreferrerpolicy 属性は、href属性が存在しない場合、省略しなければなりません。

itemprop 属性がa要素に指定される場合、 href属性も指定しなければなりません。

サイトがすべてのページで一貫したナビゲーションツールバーを使用している場合、通常はページ自体へリンクするリンクを、a要素を使用してマークアップできます：

<nav>
 <ul>
  <li> <a href="/">Home</a> </li>
  <li> <a href="/news">News</a> </li>
  <li> <a>Examples</a> </li>
  <li> <a href="/legal">Legal</a> </li>
 </ul>
</nav>

href、target、download、ping、およびreferrerpolicy 属性は、ユーザーがa要素を使用して作成されたハイパーリンクをたどる、またはハイパーリンクをダウンロードする際の動作に影響します。 rel、hreflang、および type属性は、ユーザーがリンクをたどる前に、宛先リソースの予想される性質をユーザーに示すために使用できます。

a.text: textContentと同じです。

HTMLAnchorElement/referrerPolicy

現在のすべてのエンジンでサポートされています。

Firefox50+Safari14+Chrome52+

Opera?Edge79+

Edge（旧版）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

IDL属性referrerPolicyは、referrerpolicy コンテンツ属性を、既知の値のみに制限して反映しなければなりません。

text 属性の取得子は、この要素の子孫テキスト内容を返さなければなりません。

text属性の設定子は、この要素内を指定された値で文字列ですべて置換しなければなりません。

a要素は、その内部にインタラクティブコンテンツ（たとえばボタンや他のリンク）がない限り、段落、リスト、表などの全体、さらにはセクション全体を囲むことができます。この例は、広告ブロック全体をリンクにするためにこれを使用する方法を示しています：

<aside class="advertising">
 <h1>Advertising</h1>
 <a href="https://ad.example.com/?adid=1929&amp;pubid=1422">
  <section>
   <h1>Mellblomatic 9000!</h1>
   <p>Turn all your widgets into mellbloms!</p>
   <p>Only $9.99 plus shipping and handling.</p>
  </section>
 </a>
 <a href="https://ad.example.com/?adid=375&amp;pubid=1422">
  <section>
   <h1>The Mellblom Browser</h1>
   <p>Web browsing at the speed of light.</p>
   <p>No other browser goes faster!</p>
  </section>
 </a>
</aside>

次の例は、少量のスクリプトを使用して、求人一覧表の行全体を実質的にハイパーリンクにする方法を示しています：

<table>
 <tr>
  <th>Position
  <th>Team
  <th>Location
 <tr>
  <td><a href="/jobs/manager">Manager</a>
  <td>Remotees
  <td>Remote
 <tr>
  <td><a href="/jobs/director">Director</a>
  <td>Remotees
  <td>Remote
 <tr>
  <td><a href="/jobs/astronaut">Astronaut</a>
  <td>Architecture
  <td>Remote
</table>
<script>
document.querySelector("table").onclick = ({ target }) => {
  if (target.parentElement.localName === "tr") {
    const link = target.parentElement.querySelector("a");
    if (link) {
      link.click();
    }
  }
}
</script>

4.5.2 `em` 要素

Element/em

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: フレージングコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

em要素は、その内容の強勢による強調を表します。

特定のコンテンツが持つ強勢のレベルは、その祖先であるem要素の数によって示されます。

強勢による強調の位置は、文の意味を変えます。したがって、この要素はコンテンツの不可欠な部分を形成します。この方法で強勢が使用される正確な方法は、言語によって異なります。

これらの例は、強勢による強調を変更すると意味がどのように変わるかを示しています。まず、強勢のない一般的な事実の記述です：

<p>Cats are cute animals.</p>

最初の語を強調すると、話題となっている動物の種類に疑問があることを暗示します（おそらく誰かが犬はかわいいと主張しているのでしょう）：

<p><em>Cats</em> are cute animals.</p>

強勢を動詞へ移すと、文全体が真であるかどうかに疑問があることを強調します（おそらく誰かが猫はかわいくないと言っているのでしょう）：

<p>Cats <em>are</em> cute animals.</p>

形容詞へ移すと、猫の正確な性質が改めて主張されます（おそらく誰かが猫は 意地悪な動物だと示唆したのでしょう）：

<p>Cats are <em>cute</em> animals.</p>

同様に、誰かが猫は野菜だと主張した場合、それを訂正する人は最後の語を強調するでしょう：

<p>Cats are cute <em>animals</em>.</p>

文全体を強調すると、話者がその主張を伝えるために懸命になっていることが明らかになります。この種の強勢による強調は、通常、句読点にも影響するため、ここでは感嘆符が使用されています。

<p><em>Cats are cute animals!</em></p>

かわいさの強調に怒りが混じると、次のようなマークアップになる場合があります：

<p><em>Cats are <em>cute</em> animals!</em></p>

em要素は、汎用の「斜体」要素ではありません。テキストを、異なる雰囲気や声であるかのように、段落の残りの部分から目立たせることを意図する場合があります。この目的には、i要素の方が適切です。

em要素は、重要性を伝えることも意図していません。その目的には、strong要素の方が適切です。

4.5.3 `strong`要素

Element/strong

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: フレージングコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

strong要素は、その内容の強い重要性、重大性、または緊急性を表します。

重要性：strong要素は、見出し、キャプション、または段落内で、本当に重要な部分を、より詳細な部分、より陽気な部分、または単なる定型文から区別するために使用できます。（これは小見出しをマークアップすることとは異なり、その目的にはhgroup要素が適切です。）

たとえば、前の段落の最初の語は、段落の残りのより詳細なテキストから区別するために、strongでマークアップされています。

重大性：strong要素は、警告または注意書きをマークアップするために使用できます。

緊急性：strong要素は、ユーザーが文書の他の部分よりも先に確認する必要がある内容を示すために使用できます。

コンテンツの一部の相対的な重要性のレベルは、その祖先であるstrong要素の数によって示されます。各strong要素は、その内容の重要性を高めます。

strong要素でテキストの一部の重要性を変更しても、文の意味は変わりません。

ここでは、「chapter」という語と実際の章番号は単なる定型文であり、章の実際の名前がstrongでマークアップされています：

<h1>Chapter 1: <strong>The Praxis</strong></h1>

次の例では、キャプション内の図の名前が、前にある定型文と後にある説明から区別するために、 strongでマークアップされています：

<figcaption>Figure 1. <strong>Ant colony dynamics</strong>. The ants in this colony are
affected by the heat source (upper left) and the food source (lower right).</figcaption>

この例では、見出しは実際には「Flowers, Bees, and Honey」ですが、作成者は見出しに軽妙な付け足しを加えています。したがって、後半部分と区別するために、最初の部分をマークアップする目的でstrong要素が使用されています。

<h1><strong>Flowers, Bees, and Honey</strong> and other things I don't understand</h1>

ゲーム内の警告通知の例を次に示します。さまざまな部分が、その重要度に応じてマークアップされています：

<p><strong>Warning.</strong> This dungeon is dangerous.
<strong>Avoid the ducks.</strong> Take any gold you find.
<strong><strong>Do not take any of the diamonds</strong>,
they are explosive and <strong>will destroy anything within
ten meters.</strong></strong> You have been warned.</p>

この例では、strong要素を使用して、ユーザーが最初に読むことを意図したテキストの部分を示しています。

<p>Welcome to Remy, the reminder system.</p>
<p>Your tasks for today:</p>
<ul>
 <li><p><strong>Turn off the oven.</strong></p></li>
 <li><p>Put out the trash.</p></li>
 <li><p>Do the laundry.</p></li>
</ul>

4.5.4 `small` 要素

Element/small

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: フレージングコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

small要素は、細則などの補足コメントを表します。

細則には通常、免責事項、注意事項、法的制約、または著作権表示が含まれます。細則は、帰属表示やライセンス要件を満たすために使用される場合もあります。

small 要素は、em要素によって強調されたテキストの強調を弱めたり、strong要素によって重要と示されたテキストの重要性を下げたりしません。テキストを強調されていない、または重要でないものとして示すには、それぞれem要素またはstrong要素でマークアップしないだけです。

small要素は、複数の段落、リスト、またはテキストのセクションなど、長い範囲のテキストに使用するべきではありません。短い範囲のテキストのみを対象としています。たとえば、利用規約を列挙するページのテキストは、small要素の適切な候補ではありません。その場合、そのテキストは補足コメントではなく、ページの主要なコンテンツだからです。

small要素を小見出しに使用してはなりません。その目的には、hgroup要素を使用します。

この例では、small要素を使用して、ホテルの客室料金に付加価値税が含まれていないことを示しています：

<dl>
 <dt>Single room
 <dd>199 € <small>breakfast included, VAT not included</small>
 <dt>Double room
 <dd>239 € <small>breakfast included, VAT not included</small>
</dl>

この2番目の例では、small要素を、記事内の補足コメントに使用しています。

<p>Example Corp today announced record profits for the
second quarter <small>(Full Disclosure: Foo News is a subsidiary of
Example Corp)</small>, leading to speculation about a third quarter
merger with Demo Group.</p>

これは、複数の段落にわたる場合があり、テキストの主要なフローから除外されるサイドバーとは異なります。次の例では、同じ記事のサイドバーを示しています。このサイドバーにも細則があり、サイドバー内の情報の出典を示しています。

<aside>
 <h1>Example Corp</h1>
 <p>This company mostly creates small software and Web
 sites.</p>
 <p>The Example Corp company mission is "To provide entertainment
 and news on a sample basis".</p>
 <p><small>Information obtained from <a
 href="https://example.com/about.html">example.com</a> home
 page.</small></p>
</aside>

この最後の例では、small要素が、 重要な細則であるとマークされています。

<p><strong><small>Continued use of this service will result in a kiss.</small></strong></p>

4.5.5 `s` 要素

Element/s

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: フレージングコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

s要素は、もはや正確でない、またはもはや関連性がない内容を表します。

s要素は、文書の編集を示す場合には適切ではありません。文書から削除されたテキスト範囲をマークするには、 del要素を使用します。

この例では、対象の商品に新しい特別価格が設定されたため、希望小売価格がもはや関連性のないものとしてマークされています。

<p>Buy our Iced Tea and Lemonade!</p>
<p><s>Recommended retail price: $3.99 per bottle</s></p>
<p><strong>Now selling for just $2.99 a bottle!</strong></p>

4.5.6 `cite` 要素

Element/cite

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: フレージングコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

cite要素は、作品（たとえば、書籍、論文、随筆、詩、楽譜、楽曲、脚本、映画、テレビ番組、ゲーム、彫刻、絵画、演劇制作、戯曲、オペラ、ミュージカル、展覧会、判例報告、コンピュータープログラムなど）の題名を表します。これは、引用または詳細に参照されている作品（すなわち出典表記）である場合も、単に言及されただけの作品である場合もあります。

人物の名前は作品の題名ではありません。その人物が「大した人物」だと呼ばれている場合であっても同様です。したがって、この要素を人物の名前のマークアップに使用してはなりません。（場合によっては、名前にb要素が適切なことがあります。たとえば、有名人の名前が注意を引くために異なるスタイルでレンダリングされるキーワードとなるゴシップ記事などです。別の場合で、要素が本当に必要であれば、span要素を使用できます。）

次の例は、cite 要素の典型的な使用法を示す：

<p>My favorite book is <cite>The Reality Dysfunction</cite> by
Peter F. Hamilton. My favorite comic is <cite>Pearls Before
Swine</cite> by Stephan Pastis. My favorite track is <cite>Jive
Samba</cite> by the Cannonball Adderley Sextet.</p>

これは正しい使用法である：

<p>According to the Wikipedia article <cite>HTML</cite>, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.</p>

しかし、次は誤った使用法である。ここでの cite 要素には、作品のタイトルをはるかに超える内容が含まれているためである：

<!-- do not copy this example, it is an example of bad usage! -->
<p>According to <cite>the Wikipedia article on HTML</cite>, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.</p>

cite 要素は、参考文献におけるあらゆる引用の重要な部分であるが、タイトルを示すためにのみ使用される：

<p><cite>Universal Declaration of Human Rights</cite>, United Nations,
December 1948. Adopted by General Assembly resolution 217 A (III).</p>

引用情報は 引用文ではない（引用文には q 要素が適切である）。

これは誤った使用法である。cite は引用文のためのものではないためである：

<p><cite>This is wrong!</cite>, said Ian.</p>

これも誤った使用法である。人物は作品ではないためである：

<p><q>This is still wrong!</q>, said <cite>Ian</cite>.</p>

正しい使用法では cite 要素を使用しない：

<p><q>This is correct</q>, said Ian.</p>

前述のとおり、b 要素は、特定の種類の文書で名前をキーワードとして示すために適切な場合がある：

<p>And then <b>Ian</b> said <q>this might be right, in a
gossip column, maybe!</q>.</p>

作品のタイトルを慣習的に句読記号で区切る場合（たとえば、英語の記事タイトルを囲む引用符や、日本語の書籍タイトルを囲む隅付き括弧（『』））、その句読記号はタイトルの一部ではなく、 cite 要素の外側に置かれる。

これは正しい使用法である：

<p>My review of 『<cite lang="ja">阪急電車</cite>』 was titled “<cite>A cute series of short stories</cite>”.</p>

4.5.7 `q` 要素

Element/q

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: フレージングコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性; cite — 引用元、または編集に関する詳細情報へのリンク
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLQuoteElementを使用します。

q要素は、別の出典から引用されたフレージングコンテンツを表します。

要素の内容を引用する引用符などの引用用句読点は、q要素の直前、直後、または内部に記述してはなりません。これらはユーザーエージェントによってレンダリングに挿入されます。

q要素内の内容は、別の出典から引用されたものでなければなりません。その出典にアドレスがある場合は、cite属性で示すことができます。小説や脚本の登場人物を引用する場合のように、出典は架空のものであってもかまいません。

cite属性が存在する場合、その値は前後に空白を含む可能性のある有効な URLでなければなりません。対応する引用リンクを取得するには、属性の値を要素のノード文書を基準として解析しなければなりません。ユーザーエージェントは、ユーザーがそのような引用リンクをたどれるようにしてもかまいませんが、これらは主として読者向けではなく、私的な用途（たとえば、サイトにおける引用の使用状況を収集するサーバー側スクリプト）を意図しています。

q要素は、引用を表さない引用符の代わりに使用してはなりません。たとえば、皮肉な発言をマークアップするために q要素を使用することは不適切です。

引用をマークアップするためにq要素を使用するかどうかは完全に任意です。q要素を使用せず、明示的な引用符を使用することも同様に正しい方法です。

q要素の簡単な使用例を示します：

<p>The man said <q>Things that are impossible just take
longer</q>. I disagreed with him.</p>

次に、q要素内に明示的な引用リンクがあり、さらにその外側にも明示的な出典表記がある例を示します：

<p>The W3C page <cite>About W3C</cite> says the W3C's
mission is <q cite="https://www.w3.org/Consortium/">To lead the
World Wide Web to its full potential by developing protocols and
guidelines that ensure long-term growth for the Web</q>. I
disagree with this mission.</p>

次の例では、引用自体の中に別の引用が含まれています：

<p>In <cite>Example One</cite>, he writes <q>The man
said <q>Things that are impossible just take longer</q>. I
disagreed with him</q>. Well, I disagree even more!</p>

次の例では、q要素の代わりに引用符を使用しています：

<p>His best argument was ❝I disagree❞, which
I thought was laughable.</p>

次の例には引用はありません。引用符は単語を示すために使用されています。この場合にq要素を使用することは不適切です。

<p>The word "ineffable" could have been used to describe the disaster
resulting from the campaign's mismanagement.</p>

4.5.8 `dfn` 要素

Element/dfn

現在のすべてのエンジンでサポートされています。

Firefox1+Safari6+Chrome15+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: フレージングコンテンツ。ただし、子孫にdfn要素を含めてはなりません。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性; さらに、title属性はこの要素において特別なセマンティクスを持ちます：完全な用語または略語の展開形
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

dfn要素は、用語を定義する箇所を表します。dfn要素に最も近い祖先である段落、説明リストグループ、またはセクションには、dfn要素によって示される用語の定義も含まれていなければなりません。

定義される用語：dfn要素にtitle属性がある場合、その属性の正確な値が定義される用語です。それ以外で、要素が要素子ノードをちょうど1つだけ含み、子のText ノードを含まず、その子要素がtitle属性を持つabbr要素である場合、その属性の正確な値が定義される用語です。それ以外の場合、dfn要素の子孫テキスト内容が定義される用語を示します。

dfn要素のtitle属性が存在する場合、その属性には定義される用語だけを含めなければなりません。

祖先要素のtitle属性は、dfn要素に影響しません。

dfn要素へリンクするa要素は、dfn要素によって定義された用語の使用例を表します。

次の断片では、「Garage Door Opener」という用語が最初の段落で最初に定義され、 2番目の段落で使用されています。どちらの場合も、実際に表示されるのはその略語です。

<p>The <dfn><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>
<!-- ... later in the document: -->
<p>Teal'c activated his <abbr title="Garage Door Opener">GDO</abbr>
and so Hammond ordered the iris to be opened.</p>

a要素を追加することで、参照を明示的にできます：

<p>The <dfn id=gdo><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>
<!-- ... later in the document: -->
<p>Teal'c activated his <a href=#gdo><abbr title="Garage Door Opener">GDO</abbr></a>
and so Hammond ordered the iris to be opened.</p>

4.5.9 `abbr` 要素

Element/abbr

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome2+

Opera?Edge79+

Edge（旧版）12+Internet Explorer7+

Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: フレージングコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性; さらに、title属性はこの要素において特別なセマンティクスを持ちます：完全な用語または略語の展開形
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

abbr要素は、任意でその展開形を伴う略語または頭字語を表します。title属性は、略語の展開形を提供するために使用できます。この属性を指定する場合、その値には略語の展開形だけを含めなければなりません。

次の段落には、abbr要素でマークアップされた略語が含まれています。この段落は、「Web Hypertext Application Technology Working Group」という用語を定義しています。

<p>The <dfn id=whatwg><abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr></dfn>
is a loose unofficial collaboration of web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.</p>

別の記述方法は次のとおりです：

<p>The <dfn id=whatwg>Web Hypertext Application Technology
Working Group</dfn> (<abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr>)
is a loose unofficial collaboration of web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.</p>

この段落には2つの略語があります。定義されているのは一方だけであることに注目してください。もう一方には関連付けられた展開形がないため、abbr要素を使用していません。

<p>The
<abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>
started working on HTML5 in 2004.</p>

この段落では、略語をその定義へリンクしています。

<p>The <a href="#whatwg"><abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>
community does not have much representation from Asia.</p>

この段落では、展開形を与えずに略語をマークアップしています。これは、略語にスタイル（たとえばスモールキャピタル）を適用するためのフックとして使用することを意図している可能性があります。

<p>Philip` and Dashiva both denied that they were going to
get the issue counts from past revisions of the specification to
backfill the <abbr>WHATWG</abbr> issue graph.</p>

略語が複数形である場合、展開形の文法上の数（複数形または単数形）は、要素の内容の文法上の数と一致しなければなりません。

ここでは複数形を表す文字が要素の外側にあるため、展開形は単数形です：

<p>Two <abbr title="Working Group">WG</abbr>s worked on
this specification: the <abbr>WHATWG</abbr> and the
<abbr>HTMLWG</abbr>.</p>

ここでは複数形を表す文字が要素の内側にあるため、展開形は複数形です：

<p>Two <abbr title="Working Groups">WGs</abbr> worked on
this specification: the <abbr>WHATWG</abbr> and the
<abbr>HTMLWG</abbr>.</p>

略語は必ずしもこの要素を使用してマークアップする必要はありません。次の場合に役立つことが想定されています：

作成者が展開形を示したい略語。abbr要素をtitle属性とともに使用することは、展開形を行内（たとえば括弧内）に含める方法の代替となります。
文書の読者にとって馴染みがない可能性が高い略語。この場合、作成者には、略語をabbr要素とtitle属性を使用してマークアップするか、略語が最初に使用されるときに展開形をテキスト内に含めることが推奨されます。
存在を意味的に注釈付けする必要がある略語。たとえば、スタイルシートから識別して特定のスタイルを与える場合です。この場合、abbr要素をtitle属性なしで使用できます。

title属性で展開形を一度提供しても、同じ文書内で同じ内容を持つもののtitle属性を持たない他のabbr要素が、同じ展開形を持つかのように動作するとは限りません。各abbr要素は独立しています。

4.5.10 `ruby` 要素

Element/ruby

現在のすべてのエンジンでサポートされています。

Firefox38+Safari5+Chrome5+

Opera?Edge79+

Edge（旧版）12+Internet Explorer5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: 本文を参照してください。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

ruby要素を使用すると、 1つ以上のフレージングコンテンツの範囲にルビ注釈を付けることができます。ルビ注釈とは、親文字と並べて表示される短いテキストで、主として東アジアの組版で発音の手引きやその他の注釈を含めるために使用されます。日本語では、この組版形式は「ふりがな」とも呼ばれます。

ruby要素のコンテンツモデルは、次のシーケンスを1つ以上並べたものです：

次のいずれか：
- フレージングコンテンツ。ただし、ruby要素を含まず、子孫にもruby要素を含まないもの
- 子孫にruby要素を持たない単一のruby要素
次のいずれか：
- 1個以上のrt要素
- rp要素の後に、 1つ以上のrt要素が続き、それぞれの要素自体の後にrp要素が続く

ruby要素とrt要素は、特に以下に説明するものを含む（ただし決してこれらに限定されない）さまざまな種類の注釈に使用できます。特に日本語のルビと、日本語のルビをレンダリングする方法の詳細については、日本語組版処理の要件を参照してください。[JLREQ]

執筆時点では、CSSにはHTMLのruby要素のレンダリングを完全に制御する方法がまだありません。将来的に、以下で説明するスタイルをサポートするようCSSが拡張されることが期待されています。

日本語における個々の親文字用のモノルビ

各表意文字（親文字）に、1文字以上のひらがなまたはカタカナ（ルビ注釈）を配置します。これは漢字の読みを示すために使用されます。

<ruby>B<rt>annotation</ruby>

この例では、各注釈が単一の親文字に対応していることに注目してください。

<ruby>君<rt>くん</ruby><ruby>子<rt>し</ruby>は<ruby>和<rt>わ</ruby>して<ruby>同<rt>どう</ruby>ぜず。

君くん子しは和わして同どうぜず。

この例は、親文字の各セグメントとそれぞれに対応する2つの注釈を含む1個のruby要素を使用して、次のように記述することもできます。これは、上のマークアップのように、親文字セグメントと注釈を1つずつ持つ2個のruby要素を連続して使用する代わりとなります：

<ruby>君<rt>くん</rt>子<rt>し</ruby>は<ruby>和<rt>わ</ruby>して<ruby>同<rt>どう</ruby>ぜず。

熟語用のモノルビ

これは前の事例と似ています。熟語内の各表意文字（親文字）に、その読みをひらがなまたはカタカナ（ルビ注釈）で示します。違いは、親文字の各セグメントが互いに独立しているのではなく、熟語を形成している点です。

<ruby>B<rt>annotation</rt>B<rt>annotation</ruby>

この例でも、各注釈が単一の親文字に対応していることに注目してください。この例では、各熟語が単一のruby要素に対応します。

ここでは、各注釈が対応する親文字の上（縦書きでは横）に配置され、隣接する文字にははみ出さないようにレンダリングされることが想定されています。

<ruby>鬼<rt>き</rt>門<rt>もん</rt></ruby>の<ruby>方<rt>ほう</rt>角<rt>がく</rt></ruby>を<ruby>凝<rt>ぎょう</rt>視<rt>し</rt></ruby>する

鬼き門もんの方ほう角がくを凝ぎょう視しする

熟語ルビ

意味上は前の事例と同一です（親文字である熟語内の各表意文字に、ひらがなまたはカタカナによる読みを注釈として示します）が、レンダリングには、より複雑な熟語ルビのレンダリングを使用します。

これは、上の熟語用モノルビと同じ例です。異なるレンダリングは、異なるスタイル（たとえばCSS）を使用して実現されることが想定されており、ここには示していません。

<ruby>鬼<rt>き</rt>門<rt>もん</rt></ruby>の<ruby>方<rt>ほう</rt>角<rt>がく</rt></ruby>を<ruby>凝<rt>ぎょう</rt>視<rt>し</rt></ruby>する

熟語ルビのレンダリングの詳細については、日本語組版処理の要件の附属書Fを参照してください。[JLREQ]

意味を説明するグループルビ

注釈は、発音の代わりに（または発音に加えて）親文字の意味を説明します。そのため、親文字と注釈のどちらも複数の文字で構成できます。

<ruby>BASE<rt>annotation</ruby>

ここでは、表意文字からなる熟語に対応するカタカナを注釈として示しています。

<ruby>境界面<rt>インターフェース</ruby>

境界面インターフェース

ここでは、表意文字からなる熟語の英訳を注釈として示しています。

<ruby lang="ja">編集者<rt lang="en">editor</ruby>

編集者editor

熟字訓用のグループルビ

1対1の対応付けが困難であるため、複数の親文字に対応する音声的な読みを示します。（英語の「Colonel」や「Lieutenant」は、方言によっては個々の文字と発音を直接対応付けることがかなり不明瞭な単語の例です。）

この例では、花の一種の名前にグループルビを使用して音声的な読みを示しています：

<ruby>紫陽花<rt>あじさい</ruby>

紫陽花あじさい

音声的注釈と意味的注釈の両方を持つテキスト（両側ルビ）

上で説明したルビのスタイルを組み合わせることがあります。

その結果、同じ単一の親文字セグメントを対象とする2つの注釈が生じる場合、注釈を単に連続して配置できます。

<ruby>BASE<rt>annotation 1<rt>annotation 2</ruby>

<ruby>B<rt>a<rt>a</ruby><ruby>A<rt>a<rt>a</ruby><ruby>S<rt>a<rt>a</ruby><ruby>E<rt>a<rt>a</ruby>

この作為的な例では、いくつかの記号に英語とフランス語の名前を付けています。

<ruby>
 ♥ <rt> Heart <rt lang=fr> Cœur </rt>
 ☘ <rt> Shamrock <rt lang=fr> Trèfle </rt>
 ✶ <rt> Star <rt lang=fr> Étoile </rt>
</ruby>

次の例のような、より複雑な状況では、入れ子になったruby要素を使用して内側の注釈を示し、そのruby全体に「外側」のレベルで注釈を付けます。

<ruby><ruby>B<rt>a</rt>A<rt>n</rt>S<rt>t</rt>E<rt>n</rt></ruby><rt>annotation</ruby>

ここでは、音声的な読みと意味の両方をルビ注釈で示しています。入れ子になったruby要素の注釈は、各親文字に対するモノルビの音声注釈を示し、外側のruby要素の子である rt要素内の注釈は、ひらがなを使用して意味を示します。

<ruby><ruby>東<rt>とう</rt>南<rt>なん</rt></ruby><rt>たつみ</rt></ruby>の方角

東とう南なんたつみの方角

これは同じ例ですが、意味を日本語ではなく英語で示しています：

<ruby><ruby>東<rt>とう</rt>南<rt>なん</rt></ruby><rt lang=en>Southeast</rt></ruby>の方角

東とう南なん Southeast の方角

ruby要素の祖先を持たない ruby要素内では、コンテンツがセグメント化され、各セグメントは親文字セグメント、注釈セグメント、無視されるセグメントの3つのカテゴリーに分類されます。無視されるセグメントは文書のセマンティクスの一部を形成しません（これらは一部の要素間空白とrp要素で構成されます。後者はルビをまったくサポートしない旧来のユーザーエージェント向けに使用されます）。親文字セグメントは重複できます（DOM内の任意の位置で重複するセグメントは最大2つまでで、重複するセグメントより開始点が早いセグメントは、その重複するセグメントと同じかそれより後の終了点を持ち、重複するセグメントより終了点が遅いセグメントは、その重複するセグメントと同じかそれより前の開始点を持ちます）。注釈セグメントはrt要素に対応します。各注釈セグメントは親文字セグメントに関連付けることができ、各親文字セグメントには注釈セグメントを関連付けることができます。（適合する文書では、各親文字セグメントは少なくとも1つの注釈セグメントに関連付けられ、各注釈セグメントは1つの親文字セグメントに関連付けられます。）ruby要素は、そこに含まれる親文字セグメントの和集合と、それらの親文字セグメントから注釈セグメントへの対応付けを表します。セグメントはDOM範囲によって記述され、注釈セグメントの範囲は常に要素をちょうど1つだけ含みます。[DOM]

任意の時点におけるruby要素のコンテンツのセグメント化とカテゴリー分類は、次のアルゴリズムを実行して得られる結果です：

base text segmentsを、親文字セグメントの空のリストとします。各セグメントは、親文字サブセグメントのリストを持つ可能性があります。
annotation segmentsを、注釈セグメントの空のリストとします。各セグメントは、親文字セグメントまたはサブセグメントに関連付けられる可能性があります。
rootを、このアルゴリズムの対象となるruby要素とします。
rootにruby要素の祖先がある場合、endと付されたステップへ移ります。
current parentをrootとします。
indexを0とします。
start indexをnullとします。
saved start indexをnullとします。
current base textをnullとします。
Start mode：indexがcurrent parent内の子ノード数以上である場合、 end modeと付されたステップへ移ります。
current parent内のindex番目のノードがrt要素またはrp要素である場合、 annotation modeと付されたステップへ移ります。
start indexをindexの値に設定します。
Base mode：current parent内のindex番目のノードがruby要素であり、かつcurrent parentがrootと同じ要素である場合、ルビレベルをプッシュし、start modeと付されたステップへ移ります。
current parent内のindex番目のノードがrt要素またはrp要素である場合、現在の親文字を設定し、annotation modeと付されたステップへ移ります。
indexを1増やします。
Base mode post-increment：indexがcurrent parent内の子ノード数以上である場合、end modeと付されたステップへ移ります。
base modeと付されたステップへ戻ります。
Annotation mode：current parent内のindex番目のノードがrt要素である場合、ルビ注釈をプッシュし、 annotation mode incrementと付されたステップへ移ります。
current parent内のindex番目のノードがrp要素である場合、 annotation mode incrementと付されたステップへ移ります。
current parent内のindex番目のノードがText ノードでないか、または要素間空白ではないText ノードである場合、base modeと付されたステップへ移ります。
Annotation mode increment：lookahead indexをindexに 1を加えた値とします。
Annotation mode white-space skipper：lookahead indexが current parent内の子ノード数と等しい場合、end modeと付されたステップへ移ります。
current parent内のlookahead index番目のノードがrt要素またはrp要素である場合、 indexをlookahead indexに設定し、annotation modeと付されたステップへ移ります。
current parent内のlookahead index番目のノードがText ノードでないか、または要素間空白ではないText ノードである場合、base modeと付されたステップへ移ります（indexはそれ以上増やさないため、ここまでに確認した要素間空白は次の親文字セグメントの一部になります）。
lookahead indexを1増やします。
annotation mode white-space skipperと付されたステップへ移ります。
End mode：current parentがrootと同じ要素でない場合、ルビレベルをポップし、 base mode post-incrementと付されたステップへ移ります。
End：base text segmentsとannotation segmentsを返します。これらのいずれのリストのセグメントによっても記述されないruby要素の内容は、暗黙的に無視されるセグメントに属します。

上記のステップで現在の親文字を設定すると述べている場合、アルゴリズムのその時点で次のステップを実行することを意味します：

text rangeを、始点が境界点（current parent、start index）であり、終点が境界点（current parent、index）であるDOM範囲とします。
new text segmentを、範囲text rangeによって記述される親文字セグメントとします。
new text segmentをbase text segmentsに追加します。
current base textをnew text segmentとします。
start indexをnullとします。

上記のステップでルビレベルをプッシュすると述べている場合、アルゴリズムのその時点で次のステップを実行することを意味します：

current parentを、current parent内のindex番目のノードとします。
indexを0とします。
saved start indexをstart indexの値に設定します。
start indexをnullとします。

上記のステップでルビレベルをポップすると述べている場合、アルゴリズムのその時点で次のステップを実行することを意味します：

indexを、root内におけるcurrent parentの位置とします。
current parentをrootとします。
indexを1増やします。
start indexをsaved start indexの値に設定します。
saved start indexをnullとします。

上記のステップでルビ注釈をプッシュすると述べている場合、アルゴリズムのその時点で次のステップを実行することを意味します：

rtを、current parentのindex番目のノードであるrt要素とします。
annotation rangeを、始点が境界点（current parent、index）であり、終点が境界点（current parent、indexに1を加えた値）であるDOM範囲とします（つまり、rtだけを含む範囲です）。
new annotation segmentを、範囲annotation rangeによって記述される注釈セグメントとします。
current base textがnullでない場合、new annotation segmentをcurrent base textに関連付けます。
new annotation segmentをannotation segmentsに追加します。

この例では、日本語のテキスト漢字内の各表意文字に、ひらがなによる読みを注釈として付けています。

...
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
...

これは次のようにレンダリングされる可能性があります：

The two main ideographs, each with its annotation in hiragana rendered in a smaller font above it.

この例では、繁体字中国語のテキスト漢字内の各表意文字に、注音符号による読みを注釈として付けています。

<ruby>漢<rt>ㄏㄢˋ</rt>字<rt>ㄗˋ</rt></ruby>

これは次のようにレンダリングされる可能性があります：

The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it.

この例では、簡体字中国語のテキスト汉字内の各表意文字に、ピンインによる読みを注釈として付けています。

...<ruby>汉<rt>hàn</rt>字<rt>zì</rt></ruby>...

これは次のようにレンダリングされる可能性があります：

The two main ideographs, each with its pinyin annotation rendered in a smaller font above it.

この、より作為的な例では、頭字語「HTML」に4つの注釈があります。1つは頭字語全体に対して、それが何であるかを簡潔に説明するもの、1つは「HT」という文字を「Hypertext」に展開するもの、 1つは「M」という文字を「Markup」に展開するもの、もう1つは「L」という文字を「Language」に展開するものです。

<ruby>
 <ruby>HT<rt>Hypertext</rt>M<rt>Markup</rt>L<rt>Language</rt></ruby>
 <rt>An abstract language for describing documents and applications
</ruby>

4.5.11 `rt` 要素

Element/rt

現在のすべてのエンジンでサポートされています。

Firefox38+Safari5+Chrome5+

Opera?Edge79+

Edge（旧版）?Internet Explorer5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: なし。
この要素を使用できる文脈：: ruby要素の子として。
コンテンツモデル：: フレージングコンテンツ。
text/htmlにおけるタグの省略：: rt要素の終了タグは、rt要素の直後にrt要素またはrp要素が続く場合、または親要素内にそれ以上の内容がない場合に省略できます。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

rt要素は、ルビ注釈のルビテキスト部分をマークします。ruby要素の子である場合、それ自体は何も表しませんが、ruby要素は、その要素が何を表すかを決定する一部として、この要素を使用します。

ruby要素の子ではない rt要素は、その子と同じものを表します。

4.5.12 `rp` 要素

Element/rp

現在のすべてのエンジンでサポートされています。

Firefox38+Safari5+Chrome5+

Opera?Edge79+

Edge（旧版）?Internet Explorer5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: なし。
この要素を使用できる文脈：: ruby要素の子として、 rt要素の直前または直後。
コンテンツモデル：: テキスト。
text/htmlにおけるタグの省略：: rp要素の終了タグは、rp要素の直後にrt要素またはrp要素が続く場合、または親要素内にそれ以上の内容がない場合に省略できます。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

rp要素は、ルビ注釈をサポートしないユーザーエージェントで表示するために、ルビ注釈のルビテキスト部分の周囲へ括弧またはその他の内容を提供するために使用できます。

ruby要素の子である rp要素は何も表しません。親要素がruby要素ではないrp要素は、その子を表します。

テキスト漢字内の各表意文字に音声的な読みを注釈として付けた上の例は、旧来のユーザーエージェントで読みが括弧内に表示されるように、rpを使用して次のように拡張できます：

...
<ruby>漢<rp>（</rp><rt>かん</rt><rp>）</rp>字<rp>（</rp><rt>じ</rt><rp>）</rp></ruby>
...

適合するユーザーエージェントでは上記のようにレンダリングされますが、ルビをサポートしないユーザーエージェントでは次のようにレンダリングされます：

... 漢（かん）字（じ）...

1つのセグメントに複数の注釈がある場合、rp要素を注釈の間に配置することもできます。次に、英語とフランス語による名前が付けられたいくつかの記号を示した以前の作為的な例を、今回はrp要素も使用して再掲します：

<ruby>
♥<rp>: </rp><rt>Heart</rt><rp>, </rp><rt lang=fr>Cœur</rt><rp>.</rp>
☘<rp>: </rp><rt>Shamrock</rt><rp>, </rp><rt lang=fr>Trèfle</rt><rp>.</rp>
✶<rp>: </rp><rt>Star</rt><rp>, </rp><rt lang=fr>Étoile</rt><rp>.</rp>
</ruby>

これにより、ルビをサポートしないユーザーエージェントでは、例が次のようにレンダリングされます：

♥: Heart, Cœur. ☘: Shamrock, Trèfle. ✶: Star, Étoile.

4.5.13 `data` 要素

Element/data

現在のすべてのエンジンでサポートされています。

Firefox22+Safari10+Chrome62+

Opera?Edge79+

Edge（旧版）18Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLDataElement

現在のすべてのエンジンでサポートされています。

Firefox22+Safari10+Chrome62+

Opera?Edge79+

Edge（旧版）14+Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLDataElement/value

現在のすべてのエンジンでサポートされています。

Firefox22+Safari10+Chrome62+

Opera?Edge79+

Edge（旧版）14+Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

フレージングコンテンツが期待される場所。

text/htmlにおけるタグの省略：

どちらのタグも省略できません。

value — 機械可読な値

属性valueを持つデフォルト。

[Exposed=Window]
interface HTMLDataElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute DOMString value;
};

data要素は、その内容と、 value属性に含まれるその内容の機械可読な形式をあわせて表します。

value属性は存在しなければなりません。その値は、要素の内容を機械可読な形式で表現したものでなければなりません。

値が日付または時刻に関連する場合は、代わりに、より具体的なtime要素を使用できます。

この要素は、複数の目的に使用できます。

マイクロフォーマット、またはこの仕様で定義されるマイクロデータ属性と組み合わせた場合、この要素は、データプロセッサー向けの機械可読な値と、ウェブブラウザーでレンダリングするための人間可読な値の両方を提供します。この場合、value属性で使用する形式は、使用中のマイクロフォーマットまたはマイクロデータの語彙によって決定されます。

ただし、この要素は、スクリプトが人間可読な値とともにリテラル値を保存する必要がある場合に、ページ内のスクリプトと組み合わせて使用することもできます。そのような場合、使用する形式はスクリプトの必要性だけによって決まります。（data-*属性も、このような状況で役立つことがあります。）

ここでは、短い表の数値をdata要素を使用してエンコードしています。これにより、一方の列では数値がテキスト形式で、もう一方の列では分解された形式で示されているにもかかわらず、表の並べ替え用JavaScriptライブラリーが各列に並べ替え機能を提供できます。

<script src="sortable.js"></script>
<table class="sortable">
 <thead> <tr> <th> Game <th> Corporations <th> Map Size
 <tbody>
  <tr> <td> 1830 <td> <data value="8">Eight</data> <td> <data value="93">19+74 hexes (93 total)</data>
  <tr> <td> 1856 <td> <data value="11">Eleven</data> <td> <data value="99">12+87 hexes (99 total)</data>
  <tr> <td> 1870 <td> <data value="10">Ten</data> <td> <data value="149">4+145 hexes (149 total)</data>
</table>

4.5.14 `time` 要素

Element/time

現在のすべてのエンジンでサポートされています。

Firefox22+Safari7+Chrome62+

Opera49+Edge79+

Edge（旧版）18Internet Explorerいいえ

Firefox Android?Safari iOS4+Chrome Android?WebView Android?Samsung Internet?Opera Android46+

HTMLTimeElement

現在のすべてのエンジンでサポートされています。

Firefox22+Safari10+Chrome62+

Opera49+Edge79+

Edge（旧版）14+Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android46+

HTMLTimeElement/dateTime

現在のすべてのエンジンでサポートされています。

Firefox22+Safari10+Chrome62+

Opera49+Edge79+

Edge（旧版）14+Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android46+

フレージングコンテンツが期待される場所。

要素にdatetime属性がある場合：フレージングコンテンツ。

それ以外：テキスト。ただし、以下の本文で説明する要件に一致しなければなりません。

text/htmlにおけるタグの省略：

どちらのタグも省略できません。

datetime — 機械可読な値

属性datetimeを持つデフォルト。

DOMインターフェース：

[Exposed=Window]
interface HTMLTimeElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute DOMString dateTime;
};

time要素は、その内容と、 datetime属性に含まれるその内容の機械可読な形式をあわせて表します。内容の種類は、以下で説明するさまざまな種類の日付、時刻、タイムゾーンオフセット、および期間に限定されます。

datetime属性を指定してもかまいません。指定する場合、その値は要素の内容を機械可読な形式で表現したものでなければなりません。

datetime コンテンツ属性を持たないtime要素は、要素の子孫を持ってはなりません。

time要素の日時値は、要素にdatetimeコンテンツ属性がある場合はその値であり、それ以外の場合はtime要素の子テキスト内容です。

time要素の日時値は、次の構文のいずれかに一致しなければなりません。

有効な月文字列

<time>2011-11</time>

有効な日付文字列

<time>2011-11-18</time>

有効な年なし日付文字列

<time>11-18</time>

有効な時刻文字列

<time>14:54</time>

<time>14:54:39</time>

<time>14:54:39.929</time>

有効なローカル日時文字列

<time>2011-11-18T14:54</time>

<time>2011-11-18T14:54:39</time>

<time>2011-11-18T14:54:39.929</time>

<time>2011-11-18 14:54</time>

<time>2011-11-18 14:54:39</time>

<time>2011-11-18 14:54:39.929</time>

日付を伴うがタイムゾーンオフセットを伴わない時刻は、1日を通じて、各タイムゾーンの同じ特定の時刻に行われるイベントを指定する場合に役立ちます。たとえば、 2020年の新年は、すべてのタイムゾーンで同一の正確な瞬間ではなく、各タイムゾーンの 2020-01-01 00:00に祝われます。ビデオ会議など、すべてのタイムゾーンで同一の時刻に発生するイベントには、有効なグローバル日時文字列の方が役立つ可能性があります。

有効なタイムゾーンオフセット文字列

<time>Z</time>

<time>+0000</time>

<time>+00:00</time>

<time>-0800</time>

<time>-08:00</time>

日付を伴わない時刻（または複数の日付で繰り返されるイベントを指す時刻）では、通常、タイムゾーンオフセットを指定するよりも、その時刻を制御する地理的位置を指定する方が役立ちます。これは、地理的位置では夏時間に応じてタイムゾーンオフセットが変化するためです。場合によっては、地理的位置自体がタイムゾーンを変更することもあります。たとえば、 2011年末のサモアで起きたように、タイムゾーンの境界が引き直される場合です。タイムゾーンの境界と各ゾーン内で適用される規則を記述する、タイムゾーンデータベースとして知られるデータベースが存在します。[TZDATABASE]

有効なグローバル日時文字列

<time>2011-11-18T14:54Z</time>

<time>2011-11-18T14:54:39Z</time>

<time>2011-11-18T14:54:39.929Z</time>

<time>2011-11-18T14:54+0000</time>

<time>2011-11-18T14:54:39+0000</time>

<time>2011-11-18T14:54:39.929+0000</time>

<time>2011-11-18T14:54+00:00</time>

<time>2011-11-18T14:54:39+00:00</time>

<time>2011-11-18T14:54:39.929+00:00</time>

<time>2011-11-18T06:54-0800</time>

<time>2011-11-18T06:54:39-0800</time>

<time>2011-11-18T06:54:39.929-0800</time>

<time>2011-11-18T06:54-08:00</time>

<time>2011-11-18T06:54:39-08:00</time>

<time>2011-11-18T06:54:39.929-08:00</time>

<time>2011-11-18 14:54Z</time>

<time>2011-11-18 14:54:39Z</time>

<time>2011-11-18 14:54:39.929Z</time>

<time>2011-11-18 14:54+0000</time>

<time>2011-11-18 14:54:39+0000</time>

<time>2011-11-18 14:54:39.929+0000</time>

<time>2011-11-18 14:54+00:00</time>

<time>2011-11-18 14:54:39+00:00</time>

<time>2011-11-18 14:54:39.929+00:00</time>

<time>2011-11-18 06:54-0800</time>

<time>2011-11-18 06:54:39-0800</time>

<time>2011-11-18 06:54:39.929-0800</time>

<time>2011-11-18 06:54-08:00</time>

<time>2011-11-18 06:54:39-08:00</time>

<time>2011-11-18 06:54:39.929-08:00</time>

日付とタイムゾーンオフセットを伴う時刻は、特定のイベント、または時刻が特定の地理的位置に固定されていない、繰り返し行われる仮想イベントを指定する場合に役立ちます。たとえば、小惑星が衝突した正確な時刻や、世界の特定地域で夏時間が実施されているかどうかに関係なく毎日UTC 1400に行われる一連の会議の特定の1回などです。正確な時刻が特定の地理的位置のローカルタイムゾーンオフセットによって変化するイベントには、その地理的位置と組み合わせた有効なローカル日時文字列の方が役立つ可能性があります。

有効な週文字列

<time>2011-W47</time>

4桁以上のASCII数字。そのうち少なくとも1桁はU+0030 DIGIT ZERO (0)ではないもの

<time>2011</time>

<time>0001</time>

有効な期間文字列

<time>PT4H18M3S</time>

<time>4h 18m 3s</time>

要素の内容の機械可読な等価物は、次のアルゴリズムを使用して、要素の日時値から取得しなければなりません：

要素の日時値から月文字列を解析することで月が返される場合、それが機械可読な等価物です。返ります。
要素の日時値から日付文字列を解析することで日付が返される場合、それが機械可読な等価物です。返ります。
要素の日時値から年なし日付文字列を解析することで年なし日付が返される場合、それが機械可読な等価物です。返ります。
要素の日時値から時刻文字列を解析することで時刻が返される場合、それが機械可読な等価物です。返ります。
要素の日時値からローカル日時文字列を解析することでローカル日時が返される場合、それが機械可読な等価物です。返ります。
要素の日時値からタイムゾーンオフセット文字列を解析することでタイムゾーンオフセットが返される場合、それが機械可読な等価物です。返ります。
要素の日時値からグローバル日時文字列を解析することでグローバル日時が返される場合、それが機械可読な等価物です。返ります。
要素の日時値から週文字列を解析することで週が返される場合、それが機械可読な等価物です。返ります。
要素の日時値がASCII数字だけで構成され、そのうち少なくとも1桁が U+0030 DIGIT ZERO (0)ではない場合、機械可読な等価物は、それらの数字を年として表す 10進数として解釈した値です。返ります。
要素の日時値から期間文字列を解析することで期間が返される場合、それが機械可読な等価物です。返ります。
機械可読な等価物はありません。

上で参照されているアルゴリズムは、任意の文字列sに対して、いずれか1つのアルゴリズムだけが値を返すように設計されることを意図しています。より効率的な方法として、これらすべてのデータ型を1回の処理で解析する単一のアルゴリズムを作成できる可能性があります。そのようなアルゴリズムの開発は、読者への演習として残されています。

time要素は、たとえばマイクロフォーマットで日付をエンコードするために使用できます。次の例は、time要素を使用する hCalendarの変種によって、イベントをエンコードする仮想的な方法を示しています：

<div class="vevent">
 <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
 <span class="summary">Web 2.0 Conference</span>:
 <time class="dtstart" datetime="2005-10-05">October 5</time> -
 <time class="dtend" datetime="2005-10-07">7</time>,
 at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>

ここでは、Atomの語彙に基づく架空のマイクロデータ語彙をtime要素とともに使用し、ブログ投稿の公開日をマークアップしています。

<article itemscope itemtype="https://n.example.org/rfc4287">
 <h1 itemprop="title">Big tasks</h1>
 <footer>Published <time itemprop="published" datetime="2009-08-29">two days ago</time>.</footer>
 <p itemprop="content">Today, I went out and bought a bike for my kid.</p>
</article>

この例では、別の記事の公開日をtimeを使用してマークアップしています。今回はschema.orgのマイクロデータ語彙を使用しています：

<article itemscope itemtype="http://schema.org/BlogPosting">
 <h1 itemprop="headline">Small tasks</h1>
 <footer>Published <time itemprop="datePublished" datetime="2009-08-30">yesterday</time>.</footer>
 <p itemprop="articleBody">I put a bike bell on her bike.</p>
</article>

次の断片では、time要素を使用して日付をISO8601形式でエンコードし、後でスクリプトによって処理できるようにしています：

<p>Our first date was <time datetime="2006-09-23">a Saturday</time>.</p>

次の2番目の断片では、値に時刻も含まれています：

<p>We stopped talking at <time datetime="2006-09-24T05:00-07:00">5am the next morning</time>.</p>

ページによって読み込まれたスクリプト（したがって、time要素を使用して日付と時刻をマークアップするというページ内部の規則を把握しているスクリプト）は、ページ内を走査して、そこに含まれるすべてのtime要素を調べ、日付と時刻の索引を作成できます。

たとえば、この要素は文字列「Friday」を伝えると同時に、2011年11月18日が「Friday」に対応する意味であるという追加のセマンティクスも伝えます：

Today is <time datetime="2011-11-18">Friday</time>.

この例では、太平洋標準時のタイムゾーンにおける特定の時刻を指定しています：

Your next meeting is at <time datetime="2011-11-18T15:00-08:00">3pm</time>.

4.5.15 `code` 要素

Element/code

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: フレージングコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

code要素は、コンピューターコードの断片を表します。これは、XML要素名、ファイル名、コンピュータープログラム、またはコンピューターが認識するその他の任意の文字列である場合があります。

マークアップされるコンピューターコードの言語を示す正式な方法はありません。たとえば、構文強調表示スクリプトが適切な規則を使用できるよう、使用されている言語をcode要素にマークしたい作成者は、class属性を使用できます。たとえば、要素に「language-」という接頭辞を持つクラスを追加します。

次の例は、段落内で要素名とコンピューターコードを、句読点も含めてマークアップするために、この要素を使用する方法を示しています。

<p>The <code>code</code> element represents a fragment of computer
code.</p>

<p>When you call the <code>activate()</code> method on the
<code>robotSnowman</code> object, the eyes glow.</p>

<p>The example below uses the <code>begin</code> keyword to indicate
the start of a statement block. It is paired with an <code>end</code>
keyword, which is followed by the <code>.</code> punctuation character
(full stop) to indicate the end of the program.</p>

次の例は、pre要素とcode要素を使用して、コードブロックをマークアップする方法を示しています。

<pre><code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code></pre>

この例では、使用されている言語を示すためにクラスを使用しています。

詳細については、pre要素を参照してください。

4.5.16 `var` 要素

Element/var

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: フレージングコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

var要素は変数を表します。これは、数式またはプログラミングの文脈における実際の変数、定数を表す識別子、物理量を識別する記号、関数のパラメーター、または単に文章内でプレースホルダーとして使用される用語である場合があります。

次の段落では、文字「n」が文章内の変数として使用されています：

<p>If there are <var>n</var> pipes leading to the ice
cream factory then I expect at <em>least</em> <var>n</var>
flavors of ice cream to be available for purchase!</p>

数学、特に最も単純な式を超えるものには、MathMLの方が適切です。ただし、var要素は、MathMLの式でその後言及される特定の変数を参照するために引き続き使用できます。

この例では、方程式と、その方程式内の変数を参照する凡例が示されています。式自体はMathMLでマークアップされていますが、図の凡例内の変数にはvarを使用しています。

<figure>
 <math>
  <mi>a</mi>
  <mo>=</mo>
  <msqrt>
   <msup><mi>b</mi><mn>2</mn></msup>
   <mi>+</mi>
   <msup><mi>c</mi><mn>2</mn></msup>
  </msqrt>
 </math>
 <figcaption>
  Using Pythagoras' theorem to solve for the hypotenuse <var>a</var> of
  a triangle with sides <var>b</var> and <var>c</var>
 </figcaption>
</figure>

ここでは、質量とエネルギーの等価性を表す方程式を文中で使用し、var要素を使用して、その方程式内の変数と定数をマークしています：

<p>Then she turned to the blackboard and picked up the chalk. After a few moment's
thought, she wrote <var>E</var> = <var>m</var> <var>c</var><sup>2</sup>. The teacher
looked pleased.</p>

4.5.17 `samp` 要素

Element/samp

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: フレージングコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

samp要素は、別のプログラムまたはコンピューティングシステムからのサンプル出力または引用された出力を表します。

詳細については、pre要素およびkbd要素を参照してください。

この要素は、ウェブアプリケーションで即時の出力を提供するために使用できるoutput要素と対比できます。

この例は、samp 要素を行内で使用する方法を示しています：

<p>The computer said <samp>Too much cheese in tray
two</samp> but I didn't know what that meant.</p>

この2番目の例は、コンソールプログラムからのサンプル出力のブロックを示しています。入れ子にした samp要素とkbd要素により、スタイルシートを使用してサンプル出力の特定部分にスタイルを適用できます。また、非常に精密なスタイル設定を可能にするため、sampの一部には、さらに詳細なマークアップで注釈が付けられています。これを実現するため、span要素が使用されています。

<pre><samp><span class="prompt">jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd>
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown

<span class="prompt">jdoe@demo:~$</span> <span class="cursor">_</span></samp></pre>

この3番目の例は、入力のブロックと、それに対応する出力を示しています。この例では、code要素とsamp要素の両方を使用しています。

<pre>
<code class="language-javascript">console.log(2.3 + 2.4)</code>
<samp>4.699999999999999</samp>
</pre>

4.5.18 `kbd` 要素

Element/kbd

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: フレージングコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

kbd要素は、ユーザー入力（通常はキーボード入力ですが、音声コマンドなどの他の入力を表すために使用することもできます）を表します。

kbd要素がsamp要素内に入れ子になっている場合、システムによってエコーされた入力を表します。

kbd要素がsamp要素を含む場合、メニュー項目を呼び出す場合など、システム出力に基づく入力を表します。

kbd要素が別のkbd要素内に入れ子になっている場合、入力機構に応じた実際のキーまたはその他の単一の入力単位を表します。

ここでは、押すべきキーを示すためにkbd要素を使用しています：

<p>To make George eat an apple, press <kbd><kbd>Shift</kbd> + <kbd>F3</kbd></kbd></p>

この2番目の例では、ユーザーに特定のメニュー項目を選択するよう伝えています。外側のkbd要素は入力のブロックをマークし、内側のkbd要素は入力の各手順を表します。また、その内部のsamp要素は、その手順がシステムによって表示されたもの（この場合はメニューのラベル）に基づく入力であることを示します：

<p>To make George eat an apple, select
    <kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd>
</p>

このような精密さは必須ではありません。次の記述も同様に適切です：

<p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p>

4.5.19 `sub`要素と`sup`要素

Element/sub

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/sup

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: フレージングコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: sub 要素：作成者向け、実装者向け。; sup 要素：作成者向け、実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

sup 要素は上付き文字を表し、sub 要素は下付き文字を表します。

これらの要素は、単なる視覚的な表示のためではなく、特定の意味を持つ組版上の慣例をマークアップするためだけに使用しなければなりません。たとえば、LaTeX文書作成システムの名称に sub要素や sup 要素を使用することは不適切です。一般に作成者は、これらの要素が存在しないと内容の意味が変わる場合に限って使用するべきです。

特定の言語では、一部の略語における組版上の慣例として上付き文字が使用されます。

<p>Their names are
<span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span> and
<span lang="fr"><abbr>M<sup>me</sup></abbr> Denise</span>.</p>

sub 要素は、下付き文字を持つ変数について、var要素の内部で使用できます。

ここでは、sub 要素を使用して、変数群の中で変数を識別する下付き文字を表しています：

<p>The coordinate of the <var>i</var>th point is
(<var>x<sub><var>i</var></sub></var>, <var>y<sub><var>i</var></sub></var>).
For example, the 10th point has coordinate
(<var>x<sub>10</sub></var>, <var>y<sub>10</sub></var>).</p>

数式では下付き文字と上付き文字がよく使用されます。作成者には、数学をマークアップするために MathMLを使用することが推奨されますが、詳細な数学的マークアップが必要でない場合は、sub要素と sup 要素を使用することもできます。[MATHML]

<var>E</var>=<var>m</var><var>c</var><sup>2</sup>

f(<var>x</var>, <var>n</var>) = log<sub>4</sub><var>x</var><sup><var>n</var></sup>

4.5.20 `i` 要素

Element/i

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: フレージングコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

i要素は、別の声調や雰囲気にあるテキスト、または分類学上の名称、専門用語、別の言語からの慣用句、音訳、思考、西洋の文章における船名など、異なる性質のテキストであることを示す方法で通常の文章から区別されたテキストの範囲を表します。

本文と異なる言語の用語には、lang属性（XMLでは、XML名前空間内のlang属性）で注釈を付けるべきです。

次の例は、i要素の使用例を示しています：

<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
<p>The term <i>prose content</i> is defined above.</p>
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

次の例では、夢の場面をi要素を使用してマークアップしています。

<p>Raymond tried to sleep.</p>
<p><i>The ship sailed away on Thursday</i>, he
dreamt. <i>The ship had many people aboard, including a beautiful
princess called Carey. He watched her, day-in, day-out, hoping she
would notice him, but she never did.</i></p>
<p><i>Finally one night he picked up the courage to speak with
her—</i></p>
<p>Raymond woke with a start as the fire alarm rang out.</p>

作成者は、i要素のclass属性を使用して、その要素が使用されている理由を識別できます。これにより、特定用途のスタイル（たとえば、分類学上の用語ではなく夢の場面）を後日変更する場合でも、作成者が文書全体（または関連する一連の文書）を調べて各使用箇所に注釈を付け直す必要がなくなります。

作成者には、i要素よりも他の要素の方が適切でないか検討することが推奨されます。たとえば、強勢をマークアップするにはem要素を、用語を定義する箇所をマークアップするにはdfn要素を使用します。

他の要素と同様に、スタイルシートを使用してi要素の書式を設定できます。したがって、i要素内の内容が必ず斜体で表示されるとは限りません。

4.5.21 `b` 要素

Element/b

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: フレージングコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

b要素は、追加の重要性を伝えることも、別の声調や雰囲気を暗示することもなく、実用上の目的で注意を引くテキストの範囲を表します。たとえば、文書の要約内のキーワード、レビュー内の商品名、対話型のテキスト駆動ソフトウェアにおける操作可能な語句、記事のリード文などです。

次の例は、キーワードを重要なものとしてマークアップせずに強調するためのb要素の使用例を示しています：

<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>

次の例では、テキストアドベンチャー内のオブジェクトを、b要素を使用して特別なものとして強調しています。

<p>You enter a small room. Your <b>sword</b> glows
brighter. A <b>rat</b> scurries past the corner wall.</p>

b要素が適切となる別の事例は、リード文またはリード段落をマークアップする場合です。次の例は、子猫がウサギを母親代わりに受け入れたことに関するBBCの記事をマークアップする方法を示しています：

<article>
 <h2>Kittens 'adopted' by pet rabbit</h2>
 <p><b class="lede">Six abandoned kittens have found an
 unexpected new mother figure — a pet rabbit.</b></p>
 <p>Veterinary nurse Melanie Humble took the three-week-old
 kittens to her Aberdeen home.</p>
[...]

i要素と同様に、作成者はb要素のclass属性を使用して、その要素が使用されている理由を識別できます。これにより、特定用途のスタイルを後日変更する場合でも、作成者が各使用箇所に注釈を付け直す必要がなくなります。

b要素は、他に適切な要素がない場合の最後の手段として使用するべきです。特に、見出しにはh1 からh6 までの要素を使用し、強勢にはem要素を使用し、重要性はstrong要素で示し、マークまたは強調表示するテキストにはmark要素を使用するべきです。

次の使用方法は誤りです：

<p><b>WARNING!</b> Do not frob the barbinator!</p>

前の例で使用するべき正しい要素は、bではなくstrongです。

他の要素と同様に、スタイルシートを使用してb要素の書式を設定できます。したがって、b要素内の内容が必ず太字で表示されるとは限りません。

4.5.22 `u` 要素

Element/u

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: フレージングコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

u要素は、明確には言語化されていないものの明示的にレンダリングされる非テキスト注釈を伴うテキストの範囲を表します。たとえば、中国語の文章でテキストが固有名詞であることを示す場合（中国語の固有名詞記号）や、テキストの綴りが誤っていることを示す場合です。

ほとんどの場合、別の要素の方が適切です。強勢をマークするにはem要素を使用するべきです。キーワードや語句をマークするには、文脈に応じてb要素またはmark要素を使用するべきです。書籍名をマークするにはcite要素を使用するべきです。明示的なテキスト注釈を付けるにはruby要素を使用するべきです。専門用語、分類学上の名称、音訳、思考、または西洋の文章における船名を示すにはi要素を使用するべきです。

視覚的な表示におけるu要素のデフォルトのレンダリングは、ハイパーリンクの慣例的なレンダリング（下線）と衝突します。作成者には、ハイパーリンクと混同される可能性がある場所でu要素を使用しないことが推奨されます。

この例では、単語の綴りが誤っていることを示すためにu要素を使用しています：

<p>The <u>see</u> is full of fish.</p>

4.5.23 `mark` 要素

Element/mark

現在のすべてのエンジンでサポートされています。

Firefox4+Safari5.1+Chrome7+

Opera11+Edge79+

Edge（旧版）12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: フレージングコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

mark要素は、別の文脈における関連性のために、ある文書内で参照目的でマークまたは強調表示された一連のテキストを表します。文章から参照される引用またはその他のテキストブロックで使用する場合、元々は存在しなかった強調表示であり、そのブロックが最初に書かれた時点では元の作成者が重要と考えていなかった可能性があるものの、現在は予想外の観点から精査されている部分へ読者の注意を向けるために追加されたことを示します。文書の主要な文章で使用する場合、ユーザーの現在の活動との関連性が高い可能性があるため強調表示された文書の一部を示します。

この例は、引用の特定部分へ注意を向けるためにmark要素を使用する方法を示しています：

<p lang="en-US">Consider the following quote:</p>
<blockquote lang="en-GB">
 <p>Look around and you will find, no-one's really
 <mark>colour</mark> blind.</p>
</blockquote>
<p lang="en-US">As we can tell from the <em>spelling</em> of the word,
the person writing this quote is clearly not American.</p>

（ただし、その要素の綴りが誤っていることを示すことが目的である場合は、場合によってはクラスを伴うu要素の方が適切です。）

mark要素の別の例は、何らかの検索文字列に一致する文書の一部を強調表示する場合です。誰かが文書を閲覧し、サーバーがユーザーが「kitten」という語を検索していることを認識している場合、サーバーは1つの段落を次のように変更した文書を返すことがあります：

<p>I also have some <mark>kitten</mark>s who are visiting me
these days. They're really cute. I think they like my garden! Maybe I
should adopt a <mark>kitten</mark>.</p>

次の断片では、テキストの段落がコード断片の特定部分を参照しています。

<p>The highlighted part below is where the error lies:</p>
<pre><code>var i: Integer;
begin
   i := <mark>1.1</mark>;
end.</code></pre>

これは構文強調表示とは別のものであり、構文強調表示にはspanの方が適切です。両方を組み合わせると、次のようになります：

<p>The highlighted part below is where the error lies:</p>
<pre><code><span class=keyword>var</span> <span class=ident>i</span>: <span class=type>Integer</span>;
<span class=keyword>begin</span>
   <span class=ident>i</span> := <span class=literal><mark>1.1</mark></span>;
<span class=keyword>end</span>.</code></pre>

これは、元々は強調されていなかった引用文の一部を強調表示するためにmarkを使用する別の例です。この例では、一般的な組版上の慣例に従い、作成者は引用内のmark要素が斜体でレンダリングされるよう明示的にスタイルを設定しています。

<style>
 blockquote mark, q mark {
   font: inherit; font-style: italic;
   text-decoration: none;
   background: transparent; color: inherit;
 }
 .bubble em {
   font: inherit; font-size: larger;
   text-decoration: underline;
 }
</style>
<article>
 <h1>She knew</h1>
 <p>Did you notice the subtle joke in the joke on panel 4?</p>
 <blockquote>
  <p class="bubble">I didn't <em>want</em> to believe. <mark>Of course
  on some level I realized it was a known-plaintext attack.</mark> But I
  couldn't admit it until I saw for myself.</p>
 </blockquote>
 <p>(Emphasis mine.) I thought that was great. It's so pedantic, yet it
 explains everything neatly.</p>
</article>

なお、この例における、引用される元のテキストの一部であるem要素と、コメント対象の一部を強調表示するmark要素との違いにも注意してください。

次の例は、テキスト範囲の重要性を示す場合（strong）と、テキスト範囲の関連性を示す場合（mark）との違いを示しています。これは教科書からの抜粋であり、試験に関連する部分が強調表示されています。安全上の警告は重要ではあるものの、試験には関連しないようです。

<h3>Wormhole Physics Introduction</h3>

<p><mark>A wormhole in normal conditions can be held open for a
maximum of just under 39 minutes.</mark> Conditions that can increase
the time include a powerful energy source coupled to one or both of
the gates connecting the wormhole, and a large gravity well (such as a
black hole).</p>

<p><mark>Momentum is preserved across the wormhole. Electromagnetic
radiation can travel in both directions through a wormhole,
but matter cannot.</mark></p>

<p>When a wormhole is created, a vortex normally forms.
<strong>Warning: The vortex caused by the wormhole opening will
annihilate anything in its path.</strong> Vortexes can be avoided when
using sufficiently advanced dialing technology.</p>

<p><mark>An obstruction in a gate will prevent it from accepting a
wormhole connection.</mark></p>

4.5.24 `bdi` 要素

Element/bdi

現在のすべてのエンジンでサポートされています。

Firefox10+Safari6+Chrome16+

Opera?Edge79+

Edge（旧版）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: フレージングコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性; さらに、dirグローバル属性は、この要素において特別なセマンティクスを持ちます。
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

bdi要素は、双方向テキストの書式設定のために周囲から分離されるテキストの範囲を表します。[BIDI]

dirグローバル属性のデフォルトは、この要素ではautoです（他の要素のように親要素から継承されることはありません）。

この要素には、双方向アルゴリズムに関係するレンダリング要件があります。

この要素は、方向性が不明なユーザー生成コンテンツを埋め込む場合に特に役立ちます。

この例では、ユーザー名と、そのユーザーが投稿した件数を示しています。bdi要素を使用しなかった場合、アラビア語ユーザーのユーザー名がテキストを混乱させることになります（双方向アルゴリズムは、コロンと数字「3」を「posts」の隣ではなく「User」という語の隣に配置します）。

<ul>
 <li>User <bdi>jcranmer</bdi>: 12 posts.
 <li>User <bdi>hober</bdi>: 5 posts.
 <li>User <bdi>إيان</bdi>: 3 posts.
</ul>

`bdi`要素を `b`要素に置き換えると、ユーザー名が双方向アルゴリズムを混乱させ、3番目の箇条書きは「User 3 :」に続いてアラビア語の名前（右から左）、その後に「posts」とピリオドが表示されることになります。

4.5.25 `bdo` 要素

Element/bdo

現在のすべてのエンジンでサポートされています。

Firefox10+Safari4+Chrome15+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: フレージングコンテンツ。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性; さらに、dirグローバル属性は、この要素において特別なセマンティクスを持ちます。
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

bdo要素は、その子に対する明示的なテキスト方向の書式制御を表します。これにより作成者は、方向の上書きを明示的に指定して、 Unicode双方向アルゴリズムを上書きできます。[BIDI]

作成者は、この要素にdir属性を指定しなければなりません。左から右への上書きを指定するには値ltrを、右から左への上書きを指定するには値rtlを使用します。値autoを指定してはなりません。

この要素には、双方向アルゴリズムに関係するレンダリング要件があります。

4.5.26 `span` 要素

Element/span

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLSpanElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari6+Chrome15+

Opera?Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

フレージングコンテンツが期待される場所。

text/htmlにおけるタグの省略：

どちらのタグも省略できません。

[Exposed=Window]
interface HTMLSpanElement : HTMLElement {
  [HTMLConstructor] constructor();
};

span要素は、それ自体では何の意味も持ちませんが、グローバル属性、たとえばclass、 lang、またはdirとともに使用すると便利です。これは、その子を表します。

この例では、コード断片をspan要素とclass属性を使用してマークアップし、キーワードと識別子をCSSで色分けできるようにしています：

<pre><code class="lang-c"><span class="keyword">for</span> (<span class="ident">j</span> = 0; <span class="ident">j</span> &lt; 256; <span class="ident">j</span>++) {
  <span class="ident">i_t3</span> = (<span class="ident">i_t3</span> & 0x1ffff) | (<span class="ident">j</span> &lt;&lt; 17);
  <span class="ident">i_t6</span> = (((((((<span class="ident">i_t3</span> >> 3) ^ <span class="ident">i_t3</span>) >> 1) ^ <span class="ident">i_t3</span>) >> 8) ^ <span class="ident">i_t3</span>) >> 5) & 0xff;
  <span class="keyword">if</span> (<span class="ident">i_t6</span> == <span class="ident">i_t1</span>)
    <span class="keyword">break</span>;
}</code></pre>

4.5.27 `br` 要素

Element/br

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLBRElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

フレージングコンテンツが期待される場所。

なし。

text/htmlにおけるタグの省略：

終了タグはありません。

[Exposed=Window]
interface HTMLBRElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

br要素は改行を表します。

改行は通常、視覚メディアにおいて後続のテキストを物理的に新しい行へ移動することで表されますが、スタイルシートまたはユーザーエージェントが、たとえば緑色の点や追加の間隔など、異なる方法で改行をレンダリングすることも同様に正当です。

br要素は、詩や住所のように、実際に内容の一部である改行にのみ使用しなければなりません。

次の例は、br要素の正しい使用方法です：

<p>P. Sherman<br>
42 Wallaby Way<br>
Sydney</p>

br要素は、段落内の主題的なグループを分離するために使用してはなりません。

次の例は、br要素を誤用しているため、非適合です：

<p><a ...>34 comments.</a><br>
<a ...>Add a comment.</a></p>

<p><label>Name: <input name="name"></label><br>
<label>Address: <input name="address"></label></p>

上記に代わる正しい記述は次のとおりです：

<p><a ...>34 comments.</a></p>
<p><a ...>Add a comment.</a></p>

<p><label>Name: <input name="name"></label></p>
<p><label>Address: <input name="address"></label></p>

段落が単一のbr要素だけで構成される場合、それはプレースホルダーとなる空行（たとえばテンプレート内のもの）を表します。このような空行を表示上の目的で使用してはなりません。

br要素内のいかなる内容も、周囲のテキストの一部とみなしてはなりません。

この要素には、双方向アルゴリズムに関係するレンダリング要件があります。

4.5.28 `wbr` 要素

Element/wbr

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera11.6+Edge79+

Edge（旧版）?Internet Explorer5.5–7

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: なし。
text/htmlにおけるタグの省略：: 終了タグはありません。
コンテンツ属性：: グローバル属性
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: デフォルト。
DOMインターフェース：: HTMLElementを使用します。

wbr要素は改行可能位置を表します。

次の例では、効果を狙って1つの長い単語として記述された発言が引用されています。ただし、テキストを読みやすい形で折り返せるようにするため、引用内の個々の単語をwbr要素で区切っています。

<p>So then she pointed at the tiger and screamed
"there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<wbr>me"!</p>

wbr要素内のいかなる内容も、周囲のテキストの一部とみなしてはなりません。

var wbr = document.createElement("wbr");
wbr.textContent = "This is wrong";
document.body.appendChild(wbr);

この要素には、双方向アルゴリズムに関係するレンダリング要件があります。

4.5.29 使用方法の概要

この節は非規範的です。

要素	目的	例
`a`	ハイパーリンク	`Visit my <a href="drinks.html">drinks</a> page.`
`em`	強勢	`I must say I <em>adore</em> lemonade.`
`strong`	重要性	`This tea is <strong>very hot</strong>.`
`small`	付記	`These grapes are made into wine. <small>Alcohol is addictive.</small>`
`s`	不正確なテキスト	`Price: <s>£4.50</s> £2.00!`
`cite`	作品の題名	`The case <cite>Hugo v. Danielle</cite> is relevant here.`
`q`	引用	`The judge said <q>You can drink water from the fish tank</q> but advised against it.`
`dfn`	定義箇所	`The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals.`
`abbr`	略語	`Organic food in Ireland is certified by the <abbr title="Irish Organic Farmers and Growers Association">IOFGA</abbr>.`
`ruby`、`rt`、`rp`	ルビ注釈	`<ruby> OJ <rp>(<rt>Orange Juice<rp>)</ruby>`
`data`	機械可読な等価物	`Available starting today! <data value="UPC:022014640201">North Coast Organic Apple Cider</data>`
`time`	日付または時刻に関連するデータの機械可読な等価物	`Available starting on <time datetime="2011-11-18">November 18th</time>!`
`code`	コンピューターコード	`The <code>fruitdb</code> program can be used for tracking fruit production.`
`var`	変数	`If there are <var>n</var> fruit in the bowl, at least <var>n</var>÷2 will be ripe.`
`samp`	コンピューター出力	`The computer said <samp>Unknown error -3</samp>.`
`kbd`	ユーザー入力	`Hit <kbd>F1</kbd> to continue.`
`sub`	下付き文字	`Water is H<sub>2</sub>O.`
`sup`	上付き文字	`The Hydrogen in heavy water is usually <sup>2</sup>H.`
`i`	別の声調	`Lemonade consists primarily of <i>Citrus limon</i>.`
`b`	キーワード	`Take a <b>lemon</b> and squeeze it with a <b>juicer</b>.`
`u`	注釈	`The mixture of apple juice and <u class="spelling">eldeflower</u> juice is very pleasant.`
`mark`	強調表示	`Elderflower cordial, with one <mark>part</mark> cordial to ten <mark>part</mark>s water, stands a<mark>part</mark> from the rest.`
`bdi`	テキスト方向の分離	`The recommended restaurant is <bdi lang="">My Juice Café (At The Beach)</bdi>.`
`bdo`	テキスト方向の書式設定	`The proposal is to write English, but in reverse order. "Juice" would become "<bdo dir=rtl>Juice</bdo>">`
`span`	その他	`In French we call it <span lang="fr">sirop de sureau</span>.`
`br`	改行	`Simply Orange Juice Company<br>Apopka, FL 32703<br>U.S.A.`
`wbr`	改行可能位置	`www.simply<wbr>orange<wbr>juice.com`

4.6 リンク

4.6.1 はじめに

リンクは、a、area、 form、およびlink要素によって作成される概念的な構成物であり、2つのリソース間の接続を表します。そのうちの1つは現在のDocumentです。HTMLには 3種類のリンクがあります：

外部リソースへのリンク: これらは、現在の文書を補強するために使用されるリソースへのリンクであり、通常はユーザーエージェントによって自動的に処理されます。すべての外部リソースへのリンクには、リソースの取得方法を説明するリンクされたリソースをフェッチして処理するアルゴリズムがあります。
ハイパーリンク: これらは、通常ユーザーエージェントによってユーザーに提示され、ユーザーがユーザーエージェントをそれらのリソースへナビゲートさせることができるようにする、他のリソースへのリンクです。たとえば、ブラウザーで訪問したり、ダウンロードしたりするために使用されます。
内部リソースへのリンク: これらは、現在の文書内のリソースへのリンクであり、それらのリソースに特別な意味または動作を与えるために使用されます。

href属性および rel属性を持つlink要素では、 rel属性のキーワードについて、リンク種別の節でそのキーワードに対して定義されているとおりにリンクを作成しなければなりません。

同様に、href属性と rel属性を持つa要素およびarea要素では、 rel属性のキーワードについて、リンク種別の節でそのキーワードに対して定義されているとおりにリンクを作成しなければなりません。ただし、link要素とは異なり、 href属性を持つ a要素およびarea要素は、rel属性を持たない場合、またはそのrel属性にハイパーリンクを指定するものとして定義されたキーワードがない場合にも、ハイパーリンクを作成しなければなりません。この暗黙のハイパーリンクには、要素のノード文書を、要素のhref属性で指定されたリソースへリンクすること以外に、特別な意味（リンク種別）はありません。

同様に、rel属性を持つform要素では、 rel属性のキーワードについて、リンク種別の節でそのキーワードに対して定義されているとおりにリンクを作成しなければなりません。form要素は、rel属性を持たない場合、またはそのrel属性にハイパーリンクを指定するものとして定義されたキーワードがない場合にも、ハイパーリンクを作成しなければなりません。

ハイパーリンクは、そのハイパーリンクの処理セマンティクスを変更する1つ以上のハイパーリンク注釈を持つことができます。

4.6.2 `a`要素および`area`要素によって作成されるリンク

a要素および area 要素のhref属性の値は、前後に空白を含む可能性がある有効なURLでなければなりません。

a要素および area 要素のhref 属性は必須ではありません。これらの要素がhref 属性を持たない場合、ハイパーリンクを作成しません。

target属性が存在する場合、その値は有効なナビゲーション可能なターゲット名またはキーワードでなければなりません。これは使用されるナビゲーション可能の名前を指定します。ユーザーエージェントは、ハイパーリンクをたどる際にこの名前を使用します。

download属性が存在する場合、作成者がそのハイパーリンクをリソースのダウンロードに使用する意図があることを示します。この属性は値を持つことができます。値がある場合、ローカルファイルシステム上でリソースに名前を付ける際に使用することを作成者が推奨するデフォルトのファイル名を指定します。許可される値に制限はありませんが、ほとんどのファイルシステムではファイル名に使用できる句読点に制限があり、ユーザーエージェントはそれに応じてファイル名を調整する可能性があることに、作成者は注意する必要があります。

Element/a#attr-ping

現在のすべてのエンジンでサポートされています。

Firefox🔰 1+Safari6+Chrome12+

Opera?Edge79+

Edge（旧版）17+Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android≤37+Samsung Internet?Opera Android?

ping属性が存在する場合、ユーザーがハイパーリンクをたどったときに通知を受けることを希望するリソースのURLを指定します。値は空白区切りのトークンの集合でなければならず、その各トークンは、スキームが HTTP(S)スキームである有効な空でないURLでなければなりません。この値は、ユーザーエージェントがハイパーリンク監査を行うために使用します。

a要素および area 要素のrel属性は、要素が作成するリンクの種類を制御します。属性の値は、一意な空白区切りトークンの順序なし集合でなければなりません。許可されるキーワードとその意味は以下で定義します。

relのサポートされるトークンは、HTMLリンク種別で定義されたキーワードのうち、a要素および area 要素で許可され、処理モデルに影響を与え、ユーザーエージェントによってサポートされているものです。使用可能なサポートされるトークンは、noreferrer、 noopener、およびopenerです。 relのサポートされるトークンには、この一覧のうち、ユーザーエージェントが処理モデルを実装しているトークンだけを含めなければなりません。

rel 属性にはデフォルト値がありません。属性が省略されている場合、または属性内のどの値もユーザーエージェントによって認識されない場合、文書とリンク先リソースとの間には、両者の間にハイパーリンクが存在すること以外の特定の関係はありません。

referrerpolicy属性は、リファラーポリシー属性です。その目的は、ハイパーリンクをたどる際に使用するリファラーポリシーを設定することです。[REFERRERPOLICY]

a要素または area 要素の活性化動作が呼び出されたとき、ユーザーエージェントは、ハイパーリンクをナビゲーションに使用するか、それとも指定されたリソースをダウンロードするかについて、ユーザーが希望を示せるようにしてもかまいません。

ユーザーの希望がない場合、要素にdownload 属性がなければデフォルトはナビゲーションとするべきであり、この属性があれば指定されたリソースのダウンロードとするべきです。

イベントeventが与えられたa要素または area 要素elementの活性化動作は、次のとおりです：

elementにhref 属性がない場合、返ります。
hyperlinkSuffixをnullとします。
elementがa要素であり、 eventのターゲットが、ismap 属性を指定されたimgである場合：
1. xとyを0とします。
2. eventのisTrusted属性がtrueに初期化されている場合、xを画像の左端からクリック位置までのCSSピクセル単位の距離に設定し、yを画像の上端からクリック位置までのCSSピクセル単位の距離に設定します。
3. xが負の場合、xを0に設定します。
4. yが負の場合、yを0に設定します。
5. hyperlinkSuffixを、U+003F (?)、ASCII数字を使用して10進整数として表したxの値、 U+002C (,)、およびASCII数字を使用して10進整数として表したyの値を連結したものに設定します。
userInvolvementを、eventのユーザーのナビゲーション関与とします。
ユーザーがハイパーリンクをダウンロードする希望を示している場合、 userInvolvementを「ブラウザーUI」に設定します。

つまり、ユーザーがダウンロードするという明確な希望を示している場合、これは単なる「活性化」とはみなされなくなります。
elementにdownload 属性がある場合、またはユーザーがハイパーリンクをダウンロードする希望を示している場合、 hyperlinkSuffixをhyperlinkSuffixに設定し、 userInvolvementをuserInvolvementに設定して、 elementによって作成されたハイパーリンクをダウンロードします。
それ以外の場合、hyperlinkSuffixをhyperlinkSuffixに設定し、 userInvolvementをuserInvolvementに設定して、 elementによって作成されたハイパーリンクをたどります。

4.6.3 ハイパーリンク要素のAPI

interface mixin HyperlinkElementUtils {
  readonly attribute USVString origin;
  [CEReactions] attribute USVString protocol;
  [CEReactions] attribute USVString username;
  [CEReactions] attribute USVString password;
  [CEReactions] attribute USVString host;
  [CEReactions] attribute USVString hostname;
  [CEReactions] attribute USVString port;
  [CEReactions] attribute USVString pathname;
  [CEReactions] attribute USVString search;
  [CEReactions] attribute USVString hash;

  [CEReactions, Reflect] attribute DOMString hreflang;
  [CEReactions, Reflect] attribute DOMString type;
};

hyperlink.origin HTMLAnchorElement/origin 現在のすべてのエンジンでサポートされています。 Firefox26+Safari5.1+Chrome8+ Opera?Edge79+ Edge（旧版）17+Internet Explorerいいえ Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android? HTMLAreaElement/origin 現在のすべてのエンジンでサポートされています。 Firefox26+Safari10+Chrome32+ Opera?Edge79+ Edge（旧版）17+Internet Explorerいいえ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android?

ハイパーリンクのURLのオリジンを返します。

hyperlink.protocol HTMLAnchorElement/protocol 現在のすべてのエンジンでサポートされています。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge（旧版）12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? HTMLAreaElement/protocol 現在のすべてのエンジンでサポートされています。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge（旧版）12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

ハイパーリンクのURLのスキームを返します。

設定して、URLのスキームを変更できます。

hyperlink.username HTMLAnchorElement/username 現在のすべてのエンジンでサポートされています。 Firefox26+Safari10+Chrome32+ Opera?Edge79+ Edge（旧版）?Internet Explorerいいえ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? HTMLAreaElement/username 現在のすべてのエンジンでサポートされています。 Firefox26+Safari10+Chrome32+ Opera?Edge79+ Edge（旧版）?Internet Explorerいいえ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

ハイパーリンクのURLのユーザー名を返します。

設定して、URLのユーザー名を変更できます。

hyperlink.password HTMLAnchorElement/password 現在のすべてのエンジンでサポートされています。 Firefox26+Safari10+Chrome32+ Opera?Edge79+ Edge（旧版）?Internet Explorerいいえ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? HTMLAreaElement/password 現在のすべてのエンジンでサポートされています。 Firefox26+Safari10+Chrome32+ Opera?Edge79+ Edge（旧版）?Internet Explorerいいえ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

ハイパーリンクのURLのパスワードを返します。

設定して、URLのパスワードを変更できます。

hyperlink.host HTMLAnchorElement/host 現在のすべてのエンジンでサポートされています。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge（旧版）12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? HTMLAreaElement/host 現在のすべてのエンジンでサポートされています。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge（旧版）12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

ハイパーリンクのURLのホストとポート（スキームのデフォルトポートと異なる場合）を返します。

設定して、URLのホストとポートを変更できます。

hyperlink.hostname HTMLAnchorElement/hostname 現在のすべてのエンジンでサポートされています。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge（旧版）12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? HTMLAreaElement/hostname 現在のすべてのエンジンでサポートされています。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge（旧版）12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

ハイパーリンクのURLのホストを返します。

設定して、URLのホストを変更できます。

hyperlink.port HTMLAnchorElement/port 現在のすべてのエンジンでサポートされています。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge（旧版）12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? HTMLAreaElement/port 現在のすべてのエンジンでサポートされています。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge（旧版）12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

ハイパーリンクのURLのポートを返します。

設定して、URLのポートを変更できます。

hyperlink.pathname HTMLAnchorElement/pathname 現在のすべてのエンジンでサポートされています。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge（旧版）12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? HTMLAreaElement/pathname 現在のすべてのエンジンでサポートされています。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge（旧版）12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

ハイパーリンクのURLのパスを返します。

設定して、URLのパスを変更できます。

hyperlink.search HTMLAnchorElement/search 現在のすべてのエンジンでサポートされています。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge（旧版）12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? HTMLAreaElement/search 現在のすべてのエンジンでサポートされています。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge（旧版）12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

ハイパーリンクのURLのクエリーを返します（空でない場合は先頭の「?」を含みます）。

設定して、URLのクエリーを変更できます（先頭の「?」は無視されます）。

hyperlink.hash HTMLAnchorElement/hash 現在のすべてのエンジンでサポートされています。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge（旧版）12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? HTMLAreaElement/hash 現在のすべてのエンジンでサポートされています。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge（旧版）12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

ハイパーリンクのURLのフラグメントを返します（空でない場合は先頭の「#」を含みます）。

設定して、URLのフラグメントを変更できます（先頭の「#」は無視されます）。

HyperlinkElementUtils ミックスインを実装する要素は、ハイパーリンク要素です。

ハイパーリンク要素には、関連付けられたurl（nullまたはURL）があります。初期値はnullです。

ハイパーリンク要素には、次のオリジンを抽出する手順があります：

thisのurlがnullの場合、nullを返します。
thisのurlのオリジンを返します。

ハイパーリンク要素は、関連付けられたurlを設定するアルゴリズムを持たなければなりません。

ハイパーリンク要素が作成されたとき、ユーザーエージェントはurlを設定しなければなりません。

ハイパーリンク要素には、関連付けられたurlを再初期化するアルゴリズムがあり、次の手順を実行します：

要素のurlがnullではなく、そのスキームが「blob」であり、かつ不透明パスを持つ場合、これらの手順を終了します。
urlを設定します。

ハイパーリンク要素は、関連付けられたhrefを更新するアルゴリズムを持たなければなりません。

ハイパーリンクを作成するハイパーリンク要素のhreflang属性が存在する場合、リンク先リソースの言語を指定します。これは単なる助言です。値は有効なBCP 47言語タグでなければなりません。[BCP47] ユーザーエージェントは、この属性を信頼できる情報とみなしてはなりません。リソースをフェッチした際、ユーザーエージェントはリソースの言語を決定するために、リソースへのリンクに含まれるメタデータではなく、リソースに関連付けられた言語情報だけを使用しなければなりません。

ハイパーリンク要素の type属性が存在する場合、リンク先リソースのMIMEタイプを指定します。これは単なる助言です。値は有効なMIMEタイプ文字列でなければなりません。ユーザーエージェントは、type属性を信頼できる情報とみなしてはなりません。リソースをフェッチした際、ユーザーエージェントはそのタイプを決定するために、リソースへのリンクに含まれるメタデータを使用してはなりません。

originの取得手順は次のとおりです：

urlを再初期化します。
thisのurlがnullの場合、空文字列を返します。
thisのurlのオリジンのシリアル化を返します。

protocolの取得手順は次のとおりです：

urlを再初期化します。
thisのurlがnullの場合、「:」を返します。
thisのurlのスキームに「:」を続けて返します。

protocol の設定手順は次のとおりです：

urlを再初期化します。
thisのurlがnullの場合、返ります。
与えられた値に「:」を続けたものを、基本URLパーサーで解析します。このとき、thisのurlをurlとして、スキーム開始状態を状態オーバーライドとして使用します。

URLパーサーは連続する複数のコロンを無視するため、「https:」（または「https::::」でさえ）という値を指定することは、「https」という値を指定することと同じです。
hrefを更新します。

usernameの取得手順は次のとおりです：

urlを再初期化します。
thisのurlがnullの場合、空文字列を返します。
thisのurlのユーザー名を返します。

username の設定手順は次のとおりです：

urlを再初期化します。
urlを、thisのurlとします。
urlがnullであるか、urlがユーザー名、パスワード、ポートを持てない場合、返ります。
urlと与えられた値を指定して、ユーザー名を設定します。
hrefを更新します。

passwordの取得手順は次のとおりです：

urlを再初期化します。
urlを、thisのurlとします。
urlがnullの場合、空文字列を返します。
urlのパスワードを返します。

password の設定手順は次のとおりです：

urlを再初期化します。
urlを、thisのurlとします。
urlがnullであるか、urlがユーザー名、パスワード、ポートを持てない場合、返ります。
urlと与えられた値を指定して、パスワードを設定します。
hrefを更新します。

hostの取得手順は次のとおりです：

urlを再初期化します。
urlを、thisのurlとします。
urlまたはurlのホストがnullの場合、空文字列を返します。
urlのポートがnullの場合、 urlのホストをシリアル化して返します。
urlのホストをシリアル化したものに、「:」と、urlのポートをシリアル化したものを続けて返します。

host の設定手順は次のとおりです：

urlを再初期化します。
urlを、thisのurlとします。
urlがnullであるか、urlが不透明パスを持つ場合、返ります。
与えられた値を基本URLパーサーで解析します。このとき、 urlをurlとして、ホスト状態を状態オーバーライドとして使用します。
hrefを更新します。

hostnameの取得手順は次のとおりです：

urlを再初期化します。
urlを、thisのurlとします。
urlまたはurlのホストがnullの場合、空文字列を返します。
urlのホストをシリアル化して返します。

hostname の設定手順は次のとおりです：

urlを再初期化します。
urlを、thisのurlとします。
urlがnullであるか、urlが不透明パスを持つ場合、返ります。
与えられた値を基本URLパーサーで解析します。このとき、 urlをurlとして、ホスト名状態を状態オーバーライドとして使用します。
hrefを更新します。

portの取得手順は次のとおりです：

urlを再初期化します。
urlを、thisのurlとします。
urlまたはurlのポートがnullの場合、空文字列を返します。
urlのポートをシリアル化して返します。

port の設定手順は次のとおりです：

urlを再初期化します。
urlを、thisのurlとします。
urlがnullであるか、urlがユーザー名、パスワード、ポートを持てない場合、返ります。
与えられた値が空文字列の場合、urlのポートをnullに設定します。
それ以外の場合、与えられた値を基本URLパーサーで解析します。このとき、 urlをurlとして、ポート状態を状態オーバーライドとして使用します。
hrefを更新します。

pathnameの取得手順は次のとおりです：

urlを再初期化します。
urlを、thisのurlとします。
urlがnullの場合、空文字列を返します。
urlをURLパスシリアル化した結果を返します。

pathname の設定手順は次のとおりです：

urlを再初期化します。
urlを、thisのurlとします。
urlがnullであるか、urlが不透明パスを持つ場合、返ります。
urlのパスを空リストに設定します。
与えられた値を基本URLパーサーで解析します。このとき、 urlをurlとして、パス開始状態を状態オーバーライドとして使用します。
hrefを更新します。

searchの取得手順は次のとおりです：

urlを再初期化します。
urlを、thisのurlとします。
urlがnullであるか、urlのクエリーがnullまたは空文字列の場合、空文字列を返します。
「?」にurlのクエリーを続けて返します。

searchの設定手順は次のとおりです：

urlを再初期化します。
urlを、thisのurlとします。
urlがnullの場合、これらの手順を終了します。
与えられた値が空文字列の場合、urlのクエリーをnullに設定します。
それ以外の場合：
1. inputを、与えられた値から先頭の「?」を1つ、存在する場合に削除したものとします。
2. urlのクエリーを空文字列に設定します。
3. inputを基本URLパーサーで解析します。このとき、 urlをurlとして、クエリー状態を状態オーバーライドとして使用します。
hrefを更新します。

hashの取得手順は次のとおりです：

urlを再初期化します。
urlを、thisのurlとします。
urlがnullであるか、urlのフラグメントがnullまたは空文字列の場合、空文字列を返します。
「#」にurlのフラグメントを続けて返します。

hash の設定手順は次のとおりです：

urlを再初期化します。
urlを、thisのurlとします。
urlがnullの場合、返ります。
与えられた値が空文字列の場合、urlのフラグメントをnullに設定します。
それ以外の場合：
1. inputを、与えられた値から先頭の「#」を1つ、存在する場合に削除したものとします。
2. urlのフラグメントを空文字列に設定します。
3. inputを基本URLパーサーで解析します。このとき、 urlをurlとして、フラグメント状態を状態オーバーライドとして使用します。
hrefを更新します。

4.6.4 `a`要素および`area`要素のAPI

interface mixin HTMLHyperlinkElementUtils {
  [CEReactions, ReflectSetter] stringifier attribute USVString href;
  [CEReactions, Reflect] attribute DOMString target;
};

hyperlink.toString()

hyperlink.href HTMLAnchorElement/href 現在のすべてのエンジンでサポートされています。 Firefox1+Safari1+Chrome1+ Opera12.1+Edge79+ Edge（旧版）12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ HTMLAnchorElement/toString 現在のすべてのエンジンでサポートされています。 Firefox22+Safari3+Chrome52+ Opera?Edge79+ Edge（旧版）12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android? HTMLAreaElement/href 現在のすべてのエンジンでサポートされています。 Firefox1+Safari1+Chrome1+ Opera12.1+Edge79+ Edge（旧版）12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ HTMLAreaElement/toString 現在のすべてのエンジンでサポートされています。 Firefox22+Safari10.1+Chrome32+ Opera?Edge79+ Edge（旧版）12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

ハイパーリンクのURLを返します。

設定して、URLを変更できます。

hrefの取得手順は次のとおりです：

urlを再初期化します。
urlを、thisのurlとします。
urlがnullであり、かつthisがhref コンテンツ属性を持たない場合、空文字列を返します。
それ以外で、urlがnullの場合、thisのhref コンテンツ属性の値を返します。
urlをシリアル化して返します。

a要素およびarea要素に対する、 insertedNodeが与えられたHTML要素の挿入手順は次のとおりです：

insertedNodeが接続されていない場合、返ります。
insertedNodeのノード文書を指定して、投機的読み込みを検討します。

a要素およびarea要素に対する、 removedNode、isSubtreeRoot、およびoldAncestorが与えられたHTML要素の除去手順は次のとおりです：

oldAncestorが接続されていない場合、返ります。
oldAncestorのノード文書を指定して、投機的読み込みを検討します。

a要素およびarea要素に対する、 movedNodeが与えられたHTML要素の移動手順は次のとおりです：

movedNodeのノード文書を指定して、投機的読み込みを検討します。

element、localName、oldValue、 value、およびnamespaceが与えられた、次の属性変更手順は、すべてのa要素およびarea要素に使用されます：

namespaceがnullでない場合、返ります。
oldValueがvalueと等しい場合、返ります。
localNameがhrefの場合、 elementを指定してurlを設定します。

これはblob: URLでのみ観察できます。これは、それらの解析にBlob URLストアの検索が伴うためです。
localNameがhref、 referrerpolicy、またはrelの場合、 elementのノード文書を指定して、投機的読み込みを検討します。

HTMLAnchorElement またはHTMLAreaElement要素の hrefを更新するには、要素のhref コンテンツ属性の値を、要素のurlをシリアル化したものに設定します。

HTMLAnchorElement 要素およびHTMLAreaElement要素の urlを設定するアルゴリズムは次のとおりです：

この要素のurlをnullに設定します。
この要素のhref コンテンツ属性が存在しない場合、返ります。
urlを、この要素のhref コンテンツ属性の値と、この要素のノード文書を指定して、URLをエンコーディング解析した結果とします。
urlが失敗でない場合、この要素のurlをurlに設定します。

4.6.5 ハイパーリンクをたどる

次のいずれかが真である場合、要素elementはナビゲートできません：

elementのノード文書が完全にアクティブでない、または
elementがa要素でなく、かつ接続されていない。

これは、form要素のフォーム送信でも使用されます。 a要素に対する例外は、ウェブコンテンツとの互換性のためです。

a、area、またはform要素 element、URLレコード url、および文字列targetが与えられたとき、要素のnoopenerを取得するには、次の手順を実行します。これらはブール値を返します。

elementのリンク種別にnoopenerまたはnoreferrer キーワードが含まれる場合、trueを返します。
elementのリンク種別にopenerキーワードが含まれず、かつtargetが「_blank」とASCII大文字小文字不区別で一致する場合、trueを返します。
urlのblob URLエントリーがnullでない場合：
1. blobOriginを、urlのblob URLエントリーの環境のオリジンとします。
2. topLevelOriginを、elementの関連設定オブジェクトのトップレベルオリジンとします。
3. blobOriginがtopLevelOriginと同一サイトでない場合、trueを返します。
falseを返します。

要素subjectによって作成されたハイパーリンクをたどるには、任意のhyperlinkSuffix（デフォルトはnull）と任意のuserInvolvement（デフォルトは「なし」）が与えられたとき：

subjectがナビゲートできない場合、返ります。
targetAttributeValueを空文字列とします。
subjectがa要素またはarea要素の場合、 targetAttributeValueを、subjectを指定して要素のターゲットを取得した結果に設定します。
urlRecordを、subjectのhref属性値と、 subjectのノード文書を指定して、URLをエンコーディング解析した結果とします。
urlRecordが失敗の場合、返ります。
noopenerを、subject、urlRecord、および targetAttributeValueを使用して要素のnoopenerを取得した結果とします。
targetNavigableを、targetAttributeValue、subjectのノードナビガブル、および noopenerを指定してナビガブルを選択する規則を適用した最初の戻り値とします。
targetNavigableがnullの場合、返ります。
urlStringを、urlRecordにURLシリアライザーを適用した結果とします。
hyperlinkSuffixがnullでない場合、それをurlStringに付加します。
subjectのノード文書を使用して、targetNavigableを urlStringへナビゲートします。このとき、referrerPolicyをsubjectのハイパーリンクリファラーポリシーに、 userInvolvementをuserInvolvementに、 sourceElementをsubjectに設定します。

他の多くの種類のナビゲーションとは異なり、ハイパーリンクをたどる場合、文書が完全に読み込まれていないときの特別な「置換」動作はありません。これは、ユーザーが開始したハイパーリンクをたどる処理と、たとえば aElement.click()を介してスクリプトによって起動された処理の両方に当てはまります。

要素subjectのハイパーリンクリファラーポリシーは、次の手順によって返される値です：

subjectのリンク種別にnoreferrer キーワードが含まれる場合、「no-referrer」を返します。
subjectのreferrerpolicy コンテンツ属性の現在の状態を返します。

4.6.6 リソースのダウンロード

HTMLAnchorElement/download

現在のすべてのエンジンでサポートされています。

Firefox20+Safari10.1+Chrome15+

Opera?Edge79+

Edge（旧版）13+Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

場合によっては、リソースは直ちに表示するのではなく、後で使用することを目的としています。リソースが直ちに使用されるのではなく、後で使用するためにダウンロードされることを意図していると示すには、そのリソースへのハイパーリンクを作成するa要素またはarea要素にdownload 属性を指定できます。

さらに、この属性には値を指定して、ユーザーエージェントがリソースをファイルシステムに保存するときに使用するファイル名を指定できます。この値は、`Content-Disposition` HTTPヘッダーのfilenameパラメーターによって上書きできます。 [RFC6266]

クロスオリジンの場合、悪意のある可能性がある動作についてユーザーが警告されることを避けるため、download 属性を`Content-Disposition` HTTPヘッダー、具体的にはattachment処理種別と組み合わせる必要があります。（これは、ユーザーが十分に理解しないまま、機密性の高い個人情報または秘密情報をダウンロードさせられることから保護するためです。）

要素subjectによって作成されたハイパーリンクをダウンロードするには、任意のhyperlinkSuffix（デフォルトはnull）と任意のuserInvolvement（デフォルトは「なし」）が与えられたとき：

subjectがナビゲートできない場合、返ります。
subjectのノード文書のアクティブなサンドボックス化フラグ集合にサンドボックス化されたダウンロード閲覧コンテキストフラグが設定されている場合、返ります。
urlStringを、subjectのhref属性値と、 subjectのノード文書を指定して、URLをエンコーディング解析してシリアル化した結果とします。
urlStringが失敗の場合、返ります。
hyperlinkSuffixがnullでない場合、それをurlStringに付加します。
userInvolvementが「ブラウザーUI」でない場合：
1. 表明：subjectはdownload 属性を持ちます。
2. navigationを、subjectの関連グローバルオブジェクトのナビゲーションAPIとします。
3. filenameを、subjectのdownload 属性の値とします。
4. continueを、navigationでダウンロード要求の navigateイベントを発火した結果とします。このとき、destinationURLをurlStringに、 userInvolvementを userInvolvementに、sourceElementをsubjectに、filenameをfilenameに設定します。
5. continueがfalseの場合、返ります。
6. subjectのノードナビガブルを指定して、ナビゲーションの中止についてナビゲーションAPIに通知します。
次の手順を並行に実行します：
1. ユーザーエージェントは、潜在的に敵対的なダウンロードからユーザーを保護できると判断した場合、任意でこれらの手順を中止してもかまいません。
2. requestを、URLがurlString、クライアントがエントリー設定オブジェクト、起動元が「download」、宛先が空文字列であり、同期フラグおよびURL資格情報使用フラグが設定された新しい要求とします。
3. responseを、requestをフェッチした結果とします。
4. subjectのノードナビガブルとnullを使用して、 responseをダウンロードとして処理します。

応答 responseを、ナビガブルnavigableおよびナビゲーションIDまたはnullである navigationIdとともにダウンロードとして処理するには：

suggestedFilenameを、responseについて推奨ファイル名を取得した結果とします。
download behaviorを、navigableおよび新しいWebDriver BiDiナビゲーション状態を使用してWebDriver BiDiダウンロード開始を実行した結果とします。このナビゲーション状態のidはnavigationId、statusは「pending」、 urlはresponseのURL、suggestedFilenameは suggestedFilenameです。
download behaviorがnullでなく、かつdownload behaviorのallowedがfalseの場合：
1. navigableおよび新しいWebDriver BiDiナビゲーション状態を使用してWebDriver BiDiダウンロード終了を呼び出します。このナビゲーション状態のidはnavigationId、statusは「canceled」、 urlはresponseのURLです。
2. 返ります。
download behaviorがnullでない場合、destinationFolderを download behaviorのdestinationFolderとします。
次の手順を並行に実行します：
1. responseを後で使用するために保存する実装定義の手順を実行します。 destinationFolderがnullでない場合、ユーザーエージェントはファイルをそのパスに保存するべきです。ユーザーエージェントがファイル名を必要とする場合、 suggestedFilenameを使用するべきです。
2. 次のいずれかが真の場合：
  - ダウンロードがユーザーによってキャンセルされた。
  - ダウンロードがユーザーエージェントによってキャンセルされた。
  - エラーが発生した（たとえば、ネットワークエラー、ストレージ不足、使用できない保存先フォルダー）。
  その場合：
  1. navigableおよび新しいWebDriver BiDiナビゲーション状態を使用してWebDriver BiDiダウンロード終了を呼び出します。このナビゲーション状態のidはnavigationId、statusは「canceled」、 urlはresponseのURLです。
  2. 返ります。
3. ダウンロードが正常に完了したとき、navigableおよび新しいWebDriver BiDiナビゲーション状態を使用してWebDriver BiDiダウンロード終了を呼び出します。このナビゲーション状態のidはnavigationId、statusは「complete」、 downloadedFilepathは、利用可能な場合はダウンロードされたファイルの絶対パス、そうでない場合はnull、urlはresponseのURLです。

応答 responseについて推奨ファイル名を取得するには：

このアルゴリズムは、信頼されていないサイトからファイルをダウンロードする際のセキュリティ上の危険を軽減することを目的としており、ユーザーエージェントにはこれに従うことが強く求められます。

filenameをundefined値とします。
responseが`Content-Disposition` ヘッダーを持ち、そのヘッダーがattachment処理種別を指定し、かつファイル名情報を含む場合、filenameをそのヘッダーによって指定された値とし、以下の サニタイズとラベル付けされた手順へ移ります。[RFC6266]
interface originを、ダウンロードをもたらしたダウンロードまたはナビゲート操作が開始されたDocumentのオリジンとします（存在する場合）。
response originを、responseのURLのオリジンとします。ただし、そのURLのスキーム成分がdataの場合、 response originをinterface originと同じものとします（存在する場合）。
interface originがない場合、trusted operationをtrueとします。それ以外の場合、response originがinterface originと同一オリジンであれば trusted operationをtrueとし、そうでなければfalseとします。
trusted operationがtrueであり、responseが`Content-Disposition` ヘッダーを持ち、そのヘッダーがファイル名情報を含む場合、filenameをそのヘッダーで指定された値とし、以下のサニタイズとラベル付けされた手順へ移ります。[RFC6266]
ダウンロードがa要素またはarea要素によって作成されたハイパーリンクから開始されたものでない場合、またはダウンロードの開始時に、開始元となったハイパーリンクの要素がdownload 属性を持たなかった場合、またはそのような属性があってもダウンロード開始時の値が空文字列であった場合、提案されたファイル名なしとラベル付けされた手順へ移ります。
proposed filenameを、ダウンロード開始時にダウンロードを開始したハイパーリンクの要素のdownload 属性の値とします。
trusted operationがtrueの場合、filenameを proposed filenameの値とし、以下のサニタイズとラベル付けされた手順へ移ります。
responseが`Content-Disposition` ヘッダーを持ち、そのヘッダーがattachment処理種別を指定する場合、 filenameをproposed filenameの値とし、以下のサニタイズとラベル付けされた手順へ移ります。 [RFC6266]
提案されたファイル名なし：trusted operationがtrueである場合、またはユーザーが対象の応答をダウンロードする希望を示した場合、filenameを responseのURLから実装定義の方法で導出した値とし、以下の サニタイズとラベル付けされた手順へ移ります。
filenameを、ユーザーが希望するファイル名またはユーザーエージェントが選択したファイル名に設定し、以下のサニタイズとラベル付けされた手順へ移ります。

アルゴリズムがこの手順に到達した場合、ダウンロードはresponseとは異なるオリジンから開始され、そのオリジンはファイルがダウンロードに適していると示さず、ダウンロードはユーザーによって開始されていません。これは、download 属性がダウンロードを起動するために使用されたか、responseがユーザーエージェントのサポートするタイプではないためである可能性があります。

これは危険となる可能性があります。たとえば、敵対的なサーバーが、データが敵対的なサーバーからのものであるとユーザーに思わせることで、ユーザーに気付かれずに個人情報をダウンロードさせ、その後その情報を敵対的なサーバーへ再アップロードさせようとしている可能性があります。

したがって、responseがまったく異なる出所からのものであることを何らかの方法でユーザーに通知し、混乱を防ぐため、潜在的に敵対的なinterface originから提案されたファイル名は無視することがユーザーの利益になります。
サニタイズ：任意で、ユーザーがfilenameに影響を与えられるようにします。たとえば、ユーザーエージェントはユーザーにファイル名を尋ね、その際、上記で決定された filenameの値をデフォルト値として提示できます。
filenameをローカルファイルシステムに適したものになるよう調整します。

たとえば、ファイル名で使用できない文字を削除したり、先頭および末尾の空白を取り除いたりすることが考えられます。
プラットフォームの慣例がファイルシステム上のファイルの種類を決定するために拡張子を一切使用しない場合、 filenameをファイル名として返します。
claimed typeを、既知である場合はresponseのContent-Typeメタデータによって指定されたタイプとします。named typeを、既知である場合はfilenameの拡張子によって指定されたタイプとします。この手順において、タイプとは、MIMEタイプから拡張子への対応付けです。
named typeがユーザーの設定と一致する場合（たとえば、 filenameの値がユーザーへの問い合わせによって決定された場合）、 filenameをファイル名として返します。
claimed typeとnamed typeが同じタイプである場合（つまり、 responseのContent-Typeメタデータによって指定されたタイプが filenameの拡張子によって指定されたタイプと一致する場合）、 filenameをファイル名として返します。
claimed typeが既知の場合、filenameを変更して claimed typeに対応する拡張子を追加します。

それ以外で、named typeが潜在的に危険であることが分かっている場合（たとえば、プラットフォームの慣例によってネイティブ実行可能ファイル、シェルスクリプト、 HTMLアプリケーション、または実行可能なマクロを含む文書として扱われる場合）、任意で filenameを変更して、既知の安全な拡張子（たとえば「.txt」）を追加します。

この最後の手順により実行可能ファイルをダウンロードできなくなる可能性があり、これは望ましくない場合があります。常にそうであるように、実装者はこの点についてセキュリティと使いやすさのバランスを取らざるを得ません。
filenameをファイル名として返します。

このアルゴリズムにおいて、ファイルの拡張子は、プラットフォームの慣例によってファイルの種類を識別するために使用される、ファイル名の任意の部分で構成されます。たとえば、多くのオペレーティングシステムは、ファイル名の最後のドット（「.」）に続く部分を使用してファイルの種類を決定し、それに基づいてファイルを開く方法または実行する方法を決定します。

ユーザーエージェントは、生成されるファイルをユーザーのファイルシステム内のどこに保存するかを決定する際、応答自体、そのURL、およびdownload 属性によって提供されるディレクトリまたはパス情報をすべて無視するべきです。

4.6.7 ハイパーリンク監査

a要素またはarea要素によって作成されたハイパーリンクがping属性を持ち、ユーザーがそのハイパーリンクをたどり、要素のhref属性の値を、要素のノード文書を基準として、失敗せずに解析できる場合、ユーザーエージェントはping属性の値を取得し、その文字列をASCII空白で分割し、結果として得られた各トークンを、要素のノード文書を基準として解析し、その後、結果として得られた各URL ping URLについて、解析が失敗を返した場合は無視して、次の手順を実行しなければなりません：

ping URLのスキームが HTTP(S)スキームでない場合、返ります。
任意で、返ります。（たとえば、ユーザーエージェントは、ユーザーが明示した設定に従って、一部またはすべてのping URLを無視することを望む場合があります。）
settingsObjectを、要素のノード文書の関連設定オブジェクトとします。
requestを、URLが ping URL、メソッドが`POST`、ヘッダーリストが« (`Content-Type`, `text/ping`) »、本体が`PING`、クライアントが settingsObject、宛先が空文字列、資格情報モードが「include」、リファラーが「no-referrer」であり、URL資格情報使用フラグが設定され、かつ起動元タイプが「ping」である新しい要求とします。
target URLを、要素のhref属性の値と、要素のノード文書を指定して、URLをエンコーディング解析してシリアル化した結果とし、次のようにします：

監査対象のハイパーリンクを含むDocumentオブジェクトのURLと ping URLが同一オリジンを持つ場合

オリジンは異なるが、監査対象のハイパーリンクを含むDocumentのURLのスキームが「https」でない場合

requestは、ハイパーリンクを含む文書のURLを値とする`Ping-From`ヘッダーと、 target URLを値とする`Ping-To` HTTPヘッダーを含まなければなりません。

それ以外の場合

requestは、target URLを値とする`Ping-To` HTTPヘッダーを含まなければなりません。requestは`Ping-From`ヘッダーを含みません。
requestをフェッチします。

これは主要なフェッチと並行に実行してもよく、そのフェッチの結果とは独立しています。

ユーザーエージェントは、たとえばHTTPの`Referer` （原文どおり）ヘッダーの送信を無効にする設定と組み合わせるなどして、ユーザーがこの動作を調整できるようにするべきです。ユーザーの設定に基づき、UAはping属性を完全に無視するか、一覧内のURLを選択的に無視してもかまいません（たとえば、すべての第三者URLを無視するなど）。これは上記の手順で明示的に考慮されています。

ユーザーエージェントは、応答で返されたエンティティ本体をすべて無視しなければなりません。ユーザーエージェントは、応答本体の受信を開始した後、接続を途中で閉じてもかまいません。

ハイパーリンクを作成し、ping属性を持つa要素またはarea要素が存在する場合、ユーザーエージェントは、ハイパーリンクをたどるとバックグラウンドで副次的な要求も送信されることを、実際のターゲットURLの一覧を表示することを含め、ユーザーに示してもかまいません。

たとえば、視覚的なユーザーエージェントは、ステータスバーまたはツールチップに、ハイパーリンクの実際のURLとともにターゲットping URLのホスト名を表示できます。

ping属性は、ウェブページがどのサイト外リンクが最も人気であるかを追跡したり、広告主がクリックスルー率を追跡したりできる点で、HTTP リダイレクトやJavaScriptなどの既存技術と重複しています。

ただし、ping属性は、それらの代替手段と比較して、ユーザーに次の利点を提供します：

ユーザーが最終的なターゲットURLを隠されずに確認できます。
UAが帯域外通知についてユーザーに知らせることができます。
UAが利用可能なネットワーク帯域幅の使用を最適化し、ターゲットページをより速く読み込めます。

4.6.7.1 ``Ping-From``ヘッダーおよび``Ping-To``ヘッダー

`Ping-From`および`Ping-To` HTTP要求ヘッダーは、ハイパーリンク監査要求に含まれます。これらの値はURLをシリアル化したものです。

4.6.8 リンク種別

Link_types

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera9+Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

Link_types

次の表は、この仕様で定義されているリンク種別を、対応するキーワードごとに要約したものです。この表は非規範的です。リンク種別の実際の定義は、後続のいくつかの節で示します。

この節では、参照先文書という用語は、リンクを表す要素によって識別されるリソースを指し、 現在の文書という用語は、リンクを表す要素が含まれているリソースを指します。

link、a、area、またはform要素に適用されるリンク種別を決定するには、要素のrel属性をASCII空白で分割しなければなりません。結果として得られたトークンが、その要素に適用されるリンク種別のキーワードです。

特に指定がない限り、1つのrel属性内で、同じキーワードを複数回指定してはなりません。

以下の表に続くいくつかの節では、特定のキーワードの同義語を列挙しています。示された同義語は、ユーザーエージェントが指定どおりに処理しなければなりませんが、文書では使用してはなりません（たとえば「copyright」キーワード）。

キーワードは常にASCII大文字小文字不区別であり、そのように比較しなければなりません。

したがって、rel="next"はrel="NEXT"と同じです。

body-okであるキーワードは、link要素がbody内で許可されるかどうかに影響します。 body-okキーワードは、dns-prefetch、 modulepreload、 pingback、 preconnect、 prefetch、 preload、および stylesheetです。

ウェブブラウザーによって実装される新しいリンク種別は、この標準に追加されます。それ以外は拡張として登録できます。

リンク種別	次に対する効果...			body-ok	``Link`` 処理を持つ	簡単な説明
リンク種別	`link`	`a`および`area`	`form`	body-ok	``Link`` 処理を持つ	簡単な説明
`alternate`	ハイパーリンク		許可されない	·	·	現在の文書の代替表現を示します。
`canonical`	ハイパーリンク	許可されない		·	·	現在の文書の優先URLを示します。
`author`	ハイパーリンク		許可されない	·	·	現在の文書または記事の作成者へのリンクを示します。
`bookmark`	許可されない	ハイパーリンク	許可されない	·	·	最も近い祖先の節の恒久リンクを示します。
`dns-prefetch`	外部リソース	許可されない		はい	·	ユーザーエージェントがターゲットリソースのオリジンについて先行してDNS解決を実行するべきであることを指定します。
`expect`	内部リソース	許可されない		·	·	ターゲットIDを持つ要素が現在の文書に現れることを期待します。
`external`	許可されない	注釈		·	·	参照先文書が現在の文書と同じサイトの一部ではないことを示します。
`help`	ハイパーリンク			·	·	文脈依存のヘルプへのリンクを提供します。
`icon`	外部リソース	許可されない		·	·	現在の文書を表すアイコンをインポートします。
`manifest`	外部リソース	許可されない		·	·	アプリケーションマニフェストをインポートまたはリンクします。 [MANIFEST]
`modulepreload`	外部リソース	許可されない		はい	·	ユーザーエージェントが先行してモジュールスクリプトをフェッチし、後で評価するために文書のモジュールマップへ格納しなければならないことを指定します。任意で、モジュールの依存関係もフェッチできます。
`license`	ハイパーリンク			·	·	現在の文書の主要コンテンツが、参照先文書で説明される著作権ライセンスの対象であることを示します。
`next`	ハイパーリンク			·	·	現在の文書がシリーズの一部であり、シリーズ内の次の文書が参照先文書であることを示します。
`nofollow`	許可されない	注釈		·	·	現在の文書の元の作成者または発行者が参照先文書を支持していないことを示します。
`noopener`	許可されない	注釈		·	·	ハイパーリンクが本来なら補助的なものを作成する場合（つまり、適切な`target`属性値を持つ場合）、非補助閲覧コンテキストを持つトップレベル走査可能を作成します。
`noreferrer`	許可されない	注釈		·	·	``Referer`` （原文どおり）ヘッダーは含まれません。さらに、`noopener`と同じ効果を持ちます。
`opener`	許可されない	注釈		·	·	ハイパーリンクが本来なら非補助閲覧コンテキストを持つトップレベル走査可能を作成する場合（つまり、`target`属性値として「`_blank`」を持つ場合）、補助閲覧コンテキストを作成します。
`pingback`	外部リソース	許可されない		はい	·	現在の文書へのpingbackを処理するpingbackサーバーのアドレスを示します。
`preconnect`	外部リソース	許可されない		はい	はい	ユーザーエージェントがターゲットリソースのオリジンへ先行して接続するべきであることを指定します。
`prefetch`	外部リソース	許可されない		はい	·	後続のナビゲーションで必要になる可能性が高いため、ユーザーエージェントがターゲットリソースを先行してフェッチし、キャッシュするべきであることを指定します。
`preload`	外部リソース	許可されない		はい	はい	`as`属性によって指定されたプリロード宛先（および対応する宛先に関連付けられた優先度）に従って、ユーザーエージェントが現在のナビゲーション用にターゲットリソースを先行してフェッチし、キャッシュしなければならないことを指定します。
`prev`	ハイパーリンク			·	·	現在の文書がシリーズの一部であり、シリーズ内の前の文書が参照先文書であることを示します。
`privacy-policy`	ハイパーリンク		許可されない	·	·	現在の文書に適用されるデータ収集および利用慣行に関する情報へのリンクを示します。
`search`	ハイパーリンク			·	·	現在の文書および関連ページ内を検索するために使用できるリソースへのリンクを示します。
`stylesheet`	外部リソース	許可されない		はい	·	スタイルシートをインポートします。
`tag`	許可されない	ハイパーリンク	許可されない	·	·	現在の文書に適用されるタグ（指定されたアドレスによって識別される）を示します。
`terms-of-service`	ハイパーリンク		許可されない	·	·	現在の文書の提供者と、その文書を利用しようとするユーザーとの間の合意に関する情報へのリンクを示します。

4.6.8.1 リンク種別「`alternate`」

Alternative_style_sheets

1つのエンジンのみでサポートされています。

Firefox3+Safari?Chrome1–48

OperaはいEdgeいいえ

Edge（旧版）?Internet Explorer8+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

alternateキーワードは、link、 a、およびarea要素で使用できます。

このキーワードの意味は、他の属性の値によって異なります。

要素がlink要素であり、 rel属性にキーワードstylesheetも含まれている場合

alternateキーワードは、 stylesheetキーワードの意味を、そのキーワードについて説明されている方法で変更します。alternateキーワードは、それ自体ではリンクを作成しません。

ここでは、一連のlink要素がいくつかのスタイルシートを提供します：

<!-- a persistent style sheet -->
<link rel="stylesheet" href="default.css">

<!-- the preferred alternate style sheet -->
<link rel="stylesheet" href="green.css" title="Green styles">

<!-- some alternate style sheets -->
<link rel="alternate stylesheet" href="contrast.css" title="High contrast">
<link rel="alternate stylesheet" href="big.css" title="Big fonts">
<link rel="alternate stylesheet" href="wide.css" title="Wide screen">

alternateキーワードが、値 application/rss+xmlまたは値application/atom+xmlに設定されたtype属性とともに使用される場合

このキーワードは、配信フィードを参照するハイパーリンクを作成します（ただし、必ずしも現在のページと完全に同じコンテンツを配信するとは限りません）。

フィード自動検出の目的では、ユーザーエージェントは、文書内でalternateキーワードが使用され、 type属性が値 application/rss+xmlまたは値application/atom+xmlに設定されているすべての link要素を考慮するべきです。ユーザーエージェントにデフォルトの配信フィードという概念がある場合、最初のそのような要素（ツリー順で）をデフォルトとして使用するべきです。

次のlink要素は、ブログの配信フィードを示します：

<link rel="alternate" type="application/atom+xml" href="posts.xml" title="Cool Stuff Blog">
<link rel="alternate" type="application/atom+xml" href="posts.xml?category=robots" title="Cool Stuff Blog: robots category">
<link rel="alternate" type="application/atom+xml" href="comments.xml" title="Cool Stuff Blog: Comments">

このようなlink要素は、フィード自動検出を行うユーザーエージェントによって使用され、最初のものがデフォルトになります（該当する場合）。

次の例では、a要素を使用して、さまざまな配信フィードをユーザーに提供しています：

<p>You can access the planets database using Atom feeds:</p>
<ul>
 <li><a href="recently-visited-planets.xml" rel="alternate" type="application/atom+xml">Recently Visited Planets</a></li>
 <li><a href="known-bad-planets.xml" rel="alternate" type="application/atom+xml">Known Bad Planets</a></li>
 <li><a href="unexplored-planets.xml" rel="alternate" type="application/atom+xml">Unexplored Planets</a></li>
</ul>

これらのリンクはフィード自動検出には使用されません。

それ以外の場合

このキーワードは、現在の文書の代替表現を参照するハイパーリンクを作成します。

参照先文書の性質は、hreflang属性および type属性によって示されます。

alternateキーワードがhreflang属性とともに使用され、その属性の値が文書要素の言語と異なる場合、参照先文書が翻訳であることを示します。

alternateキーワードがtype属性とともに使用される場合、参照先文書が指定された形式で現在の文書を再構成したものであることを示します。

hreflang 属性およびtype属性は、alternateキーワードとともに指定する場合、組み合わせて使用できます。

次の例は、代替形式を使用し、他の言語を対象とし、他のメディア向けに意図されたページの版を指定する方法を示しています：

<link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML">
<link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML">
<link rel=alternate href="/en/html/print" hreflang=en type=text/html media=print title="English HTML (for printing)">
<link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)">
<link rel=alternate href="/en/pdf" hreflang=en type=application/pdf title="English PDF">
<link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF">

この関係は推移的です。つまり、文書がリンク種別「alternate」で他の2つの文書にリンクしている場合、それらの文書が最初の文書の代替表現であることを示すだけでなく、その2つの文書が互いの代替表現であることも示します。

4.6.8.2 リンク種別「`author`」

authorキーワードは、link、 a、およびarea要素で使用できます。このキーワードはハイパーリンクを作成します。

a要素およびarea要素の場合、authorキーワードは、ハイパーリンクを定義する要素に最も近い祖先のarticle要素がある場合はその作成者について、そうでない場合はページ全体の作成者について、参照先文書が追加情報を提供することを示します。

link要素の場合、authorキーワードは、参照先文書がページ全体の作成者について追加情報を提供することを示します。

「参照先文書」は、作成者の電子メールアドレスを示すmailto: URLである場合があり、実際にそうであることがよくあります。[MAILTO]

同義語：歴史的な理由により、ユーザーエージェントは、値「made」の rev属性を持つlink、a、およびarea要素も、リンク関係として authorキーワードが指定されているものとして扱わなければなりません。

4.6.8.3 リンク種別「`bookmark`」

bookmarkキーワードは、 a要素および area要素で使用できます。このキーワードはハイパーリンクを作成します。

bookmarkキーワードは、対象のリンク要素に最も近い祖先のarticle要素、または祖先に article要素がない場合は、リンク要素が最も密接に関連付けられている節の恒久リンクを示します。

次の断片には3つの恒久リンクがあります。ユーザーエージェントは、恒久リンクが指定されている場所を見ることで、どの恒久リンクが仕様のどの部分に適用されるかを判断できます。

 ...
 <body>
  <h1>Example of permalinks</h1>
  <div id="a">
   <h2>First example</h2>
   <p><a href="a.html" rel="bookmark">This permalink applies to
   only the content from the first H2 to the second H2</a>. The DIV isn't
   exactly that section, but it roughly corresponds to it.</p>
  </div>
  <h2>Second example</h2>
  <article id="b">
   <p><a href="b.html" rel="bookmark">This permalink applies to
   the outer ARTICLE element</a> (which could be, e.g., a blog post).</p>
   <article id="c">
    <p><a href="c.html" rel="bookmark">This permalink applies to
    the inner ARTICLE element</a> (which could be, e.g., a blog comment).</p>
   </article>
  </article>
 </body>
 ...

4.6.8.4 リンク種別「`canonical`」

canonicalキーワードは link要素で使用できます。このキーワードはハイパーリンクを作成します。

canonicalキーワードは、 href属性によって指定された URLが現在の文書の優先URLであることを示します。これは、The Canonical Link Relationで詳しく説明されているように、検索エンジンが重複コンテンツを減らすのに役立ちます。[RFC6596]

4.6.8.5 リンク種別「`dns-prefetch`」

Link_types/dns-prefetch

Firefox3+Safari?Chrome46+

Opera?Edge79+

Edge（旧版）いいえInternet Explorer?

Firefox Android?Safari iOS?Chrome AndroidはいWebView Android46+Samsung Internet?Opera Android?

dns-prefetch キーワードはlink要素で使用できます。このキーワードは外部リソースへのリンクを作成します。このキーワードは body-okです。

dns-prefetch キーワードは、ユーザーが指定されたリソースのオリジンにあるリソースを必要とする可能性が非常に高く、DNS解決に伴う遅延コストを先取りすることでユーザー体験が改善されるため、そのオリジンに対して先行してDNS解決を実行することが有益である可能性が高いことを示します。

dns-prefetch キーワードによって指定されるリソースにはデフォルトのタイプはありません。

この種類のリンクをフェッチして処理する適切な時点は、次のとおりです：

すでに閲覧コンテキストに接続されているlink要素上に外部リソースへのリンクが作成されたとき。
外部リソースへのリンクのlink要素が閲覧コンテキストに接続された状態になるとき。
すでに閲覧コンテキストに接続されている外部リソースへのリンクのlink要素のhref属性が変更されたとき。

この種類のリンクされたリソースについて、link要素 elが与えられた場合の、リンクされたリソースをフェッチして処理する手順は次のとおりです：

urlを、elのhref属性の値と、 elのノード文書を指定して、URLをエンコーディング解析した結果とします。
urlが失敗の場合、返ります。
partitionKeyを、elのノード文書の関連設定オブジェクトを指定して、ネットワークパーティションキーを決定した結果とします。
ユーザーエージェントは、partitionKeyとurlのオリジンを指定して、オリジンを解決するべきです。

このアルゴリズムの結果はキャッシュできるため、将来のフェッチが高速になる可能性があります。

4.6.8.6 リンク種別「`expect`」

expectキーワードは link要素で使用できます。このキーワードは内部リソースへのリンクを作成します。

expectキーワードによって作成された内部リソースへのリンクは、それが示す要素が文書に接続され、完全に解析されるまでレンダリングをブロックするために使用できます。

expectキーワードによって指定されるリソースにはデフォルトのタイプはありません。

link要素 elについて、次の条件のいずれかが発生したとき：

expect内部リソースへのリンクが、すでに閲覧コンテキストに接続されているel上に作成されたとき。
expect内部リソースへのリンクがel上に作成され、 elが閲覧コンテキストに接続された状態になるとき。
expect内部リソースへのリンクがel上に作成され、 elがすでに閲覧コンテキストに接続されており、 elのhref属性が設定、変更、または削除されたとき、または
expect内部リソースへのリンクがel上に作成され、 elがすでに閲覧コンテキストに接続されており、 elのmedia属性が設定、変更、または削除されたとき。

その場合、elを処理します。

link要素 elが与えられたとき、内部リソースへのリンクを処理するには、次の手順を実行します：

docを、elのノード文書とします。
urlを、elのhref属性の値と docを指定して、URLをエンコーディング解析した結果とします。
これが失敗した場合、またはurlが、フラグメントを除外をtrueに設定してもdocのURLと等しくない場合、 elでレンダリングのブロックを解除し、返ります。
indicatedElementを、docとurlを指定して示された部分を選択した結果とします。
次のすべてが真の場合：
- docの現在の文書準備状態が「loading」である。
- elが内部リソースへのリンクを作成する。
- elが閲覧コンテキストに接続されている。
- elのrel属性にexpectが含まれている。
- elがレンダリングをブロックする可能性がある。
- elのmedia属性が環境に一致する。かつ
- indicatedElementが要素でないか、または関連付けられたDocumentがdocであるHTMLパーサーの開いている要素のスタック上にある。
その場合、elでレンダリングをブロックします。
それ以外の場合、elでレンダリングのブロックを解除します。

Document docが与えられたとき、内部リソースへのリンクを処理するには：

docのレンダリングブロック要素集合に含まれる各expectlink要素 linkについて、それぞれlinkを処理します。

element、localName、oldValue、 value、およびnamespaceが与えられた、次の属性変更手順は、expectlink要素が動的なidおよびnameの変更に応答することを保証するために使用されます：

namespaceがnullでない場合、返ります。
elementがHTMLパーサーの開いている要素のスタック内にある場合、返ります。
次のいずれかが真の場合：
- localNameがidである。または
- localNameがnameであり、かつ elementがa要素である。
その場合、elementのノード文書を指定して、内部リソースへのリンクを処理します。

4.6.8.7 リンク種別「`external`」

externalキーワードは、 a、area、およびform要素で使用できます。このキーワードはハイパーリンクを作成しませんが、要素によって作成される他のハイパーリンク（他のキーワードが作成しない場合は暗黙のハイパーリンク）に注釈を付けます。

externalキーワードは、リンクが現在の文書が属するサイトの一部ではない文書へ通じていることを示します。

4.6.8.8 リンク種別「`help`」

helpキーワードは、link、 a、area、およびform要素で使用できます。このキーワードはハイパーリンクを作成します。

a、area、およびform要素の場合、helpキーワードは、参照先文書がハイパーリンクを定義する要素の親およびその子について、追加のヘルプ情報を提供することを示します。

次の例では、フォームコントロールに文脈依存のヘルプが関連付けられています。ユーザーエージェントは、たとえばユーザーが「Help」または「F1」キーを押したときに参照先文書を表示するなど、この情報を使用できます。

 <p><label> Topic: <input name=topic> <a href="help/topic.html" rel="help">(Help)</a></label></p>

link要素の場合、helpキーワードは、参照先文書がページ全体のヘルプを提供することを示します。

a要素およびarea要素の場合、一部のブラウザーでは、helpキーワードによりリンクで異なるカーソルが使用されます。

4.6.8.9 リンク種別「`icon`」

Link_types#icon

現在のすべてのエンジンでサポートされています。

Firefox2+Safari3.1+Chrome4+

Opera9+Edge79+

Edge（旧版）12+Internet Explorer11

Firefox Android4+Safari iOSいいえChrome Android18+WebView Android38+Samsung Internet4.0+Opera Androidいいえ

caniuse.com 表

iconキーワードはlink要素で使用できます。このキーワードは外部リソースへのリンクを作成します。

指定されたリソースはページまたはサイトを表すアイコンであり、ユーザーエージェントがユーザーインターフェースでページを表す際に使用するべきです。

アイコンは、聴覚的アイコン、視覚的アイコン、またはその他の種類のアイコンである場合があります。複数のアイコンが提供された場合、ユーザーエージェントはtype、media、およびsizes属性に従って最も適切なアイコンを選択しなければなりません。同等に適切なアイコンが複数ある場合、ユーザーエージェントはアイコン一覧を収集した時点でツリー順に最後に宣言されたものを使用しなければなりません。ユーザーエージェントがアイコンを使用しようとしたものの、詳しく調べた結果、実際には不適切であると判断された場合（たとえば、サポートされていない形式を使用しているため）、ユーザーエージェントは属性によって決定される次に適切なアイコンを試さなければなりません。

ユーザーエージェントは、アイコン一覧が変更されたときにアイコンを更新する必要はありませんが、更新することが推奨されます。

iconキーワードによって指定されるリソースにはデフォルトのタイプはありません。ただし、リソースのタイプを決定する目的では、ユーザーエージェントはリソースが画像であると想定しなければなりません。

sizesキーワードは、アイコンのサイズを生のピクセル単位で表します（CSSピクセルとは異なります）。

デバイスピクセル密度が1CSSピクセルあたり2デバイスピクセル（2x、192dpi）のディスプレイ向けで、幅が50CSSピクセルのアイコンは、生のピクセルでは幅100ピクセルになります。この機能は、小さい高解像度アイコンと大きい低解像度アイコンで異なるリソースを使用すること（たとえば50×50 2xと100×100 1x）を示すことをサポートしません。

属性値を解析して処理するには、ユーザーエージェントはまず属性値をASCII空白で分割し、その後、結果として得られた各キーワードを解析して、それが何を表すかを決定しなければなりません。

anyキーワードは、リソースに、たとえばSVG画像によって提供されるような拡大縮小可能なアイコンが含まれていることを表します。

その他のキーワードが何を表すかを決定するには、次のようにさらに解析しなければなりません：

キーワードにU+0078 LATIN SMALL LETTER XまたはU+0058 LATIN CAPITAL LETTER X文字がちょうど1つ含まれていない場合、このキーワードは何も表しません。そのキーワードについて返ります。
width stringを「x」または「X」の前の文字列とします。
height stringを「x」または「X」の後の文字列とします。
width stringまたはheight stringのいずれかがU+0030 DIGIT ZERO (0)文字で始まるか、ASCII数字以外の文字を含む場合、このキーワードは何も表しません。そのキーワードについて返ります。
width stringに非負整数を解析する規則を適用して widthを取得します。
height stringに非負整数を解析する規則を適用して heightを取得します。
このキーワードは、リソースに幅widthデバイスピクセル、高さ heightデバイスピクセルのビットマップアイコンが含まれていることを表します。

sizes属性で指定されるキーワードは、リンクされたリソースで実際には利用できないアイコンサイズを表してはなりません。

この種類のリンクされたリソースについて、link要素elおよび要求requestが与えられた場合の、リンクされたリソースのフェッチ設定手順は次のとおりです：

requestの宛先を「image」に設定します。
trueを返します。

この種類のリンクされたリソースについてのリンクヘッダーを処理する手順は、何もしません。

iconキーワードを持つlinkが存在しない場合、URLのスキームがHTTP(S)スキームであるDocumentオブジェクトについて、ユーザーエージェントは代わりに次の手順を並行に実行してもかまいません：

requestを、DocumentオブジェクトのURLを基準として URL「/favicon.ico」を解決して得られたURLレコードをURLとし、クライアントがDocumentオブジェクトの関連設定オブジェクト、宛先が「image」であり、同期フラグが設定され、資格情報モードが「include」であり、 URL資格情報使用フラグが設定された新しい要求とします。
responseを、requestをフェッチした結果とします。
responseの安全でない応答を、iconキーワードを使用して宣言されたかのようにアイコンとして使用します。

次の断片は、複数のアイコンを持つアプリケーションの先頭部分を示しています。

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>lsForums — Inbox</title>
  <link rel=icon href=favicon.png sizes="16x16" type="image/png">
  <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
  <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
  <link rel=icon href=iphone.png sizes="57x57" type="image/png">
  <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
  <link rel=stylesheet href=lsforums.css>
  <script src=lsforums.js></script>
  <meta name=application-name content="lsForums">
 </head>
 <body>
  ...

歴史的な理由により、iconキーワードの前にキーワード「shortcut」を置いてもかまいません。「shortcut」キーワードが存在する場合、rel属性の値全体は文字列「shortcut icon」（トークン間に単一のU+0020 SPACE文字があり、それ以外のASCII空白はない）とASCII大文字小文字不区別で一致しなければなりません。

4.6.8.10 リンク種別「`license`」

licenseキーワードは、 link、 a、area、およびform要素で使用できます。このキーワードはハイパーリンクを作成します。

licenseキーワードは、現在の文書の主要コンテンツが提供される著作権ライセンスの条件を、参照先文書が示すことを表します。

この仕様では、文書の主要コンテンツと、その主要コンテンツの一部とはみなされないコンテンツを区別する方法を指定しません。この区別はユーザーに明確に示すべきです。

写真共有サイトを考えます。そのサイトのページでは写真を説明して表示し、ページを次のようにマークアップできます：

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>Exampl Pictures: Kissat</title>
  <link rel="stylesheet" href="/style/default">
 </head>
 <body>
  <h1>Kissat</h1>
  <nav>
   <a href="../">Return to photo index</a>
  </nav>
  <figure>
   <img src="/pix/39627052_fd8dcd98b5.jpg">
   <figcaption>Kissat</figcaption>
  </figure>
  <p>One of them has six toes!</p>
  <p><small><a rel="license" href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a></small></p>
  <footer>
   <a href="/">Home</a> | <a href="../">Photo index</a>
   <p><small>© copyright 2009 Exampl Pictures. All Rights Reserved.</small></p>
  </footer>
 </body>
</html>

この場合、licenseは写真（文書の主要コンテンツ）だけに適用され、文書全体には適用されません。特に、ページ自体のデザインには適用されません。ページ自体のデザインには、文書末尾に示された著作権が適用されます。これはスタイル設定によってより明確にできます（たとえば、ライセンスへのリンクを写真の近くに目立つよう配置し、ページの著作権をページ下部の薄い小さな文字で表示するなど）。

同義語：歴史的な理由により、ユーザーエージェントはキーワード「copyright」もlicenseキーワードと同様に扱わなければなりません。

4.6.8.11 リンク種別「`manifest`」

Link_types/manifest

1つのエンジンのみでサポートされています。

Firefox?Safari?Chromeいいえ

Opera?Edgeいいえ

Edge（旧版）?Internet Explorer?

Firefox Android?Safari iOS?Chrome Android39+WebView Android?Samsung Internet?Opera Android?

manifestキーワードはlink要素で使用できます。このキーワードは外部リソースへのリンクを作成します。

manifestキーワードは、現在の文書に関連付けられたメタデータを提供するマニフェストファイルを示します。

manifestキーワードによって指定されるリソースにはデフォルトのタイプはありません。

ウェブアプリケーションがインストールされていない場合、このリンク種別のリンクされたリソースをフェッチして処理する適切な時点は、ユーザーエージェントが必要と判断したときです。たとえば、ユーザーがウェブアプリケーションをインストールすることを選択したときです。

インストールされたウェブアプリケーションについて、このリンク種別のリンクされたリソースをフェッチして処理する適切な時点は次のとおりです：

すでに閲覧コンテキストに接続されているlink要素上に外部リソースへのリンクが作成されたとき。
外部リソースへのリンクのlink要素が閲覧コンテキストに接続された状態になるとき。
すでに閲覧コンテキストに接続されている外部リソースへのリンクのlink要素のhref属性が変更されたとき。

いずれの場合も、rel属性にトークンmanifestが含まれる、ツリー順で最初のlink要素だけを使用できます。

ユーザーエージェントは、このリンク種別によってloadイベントを遅延させてはなりません。

navigableを、elのノード文書のノードナビガブルとします。
navigableがnullの場合、falseを返します。
navigableがトップレベル走査可能でない場合、falseを返します。
requestの起動元を「manifest」に設定します。
requestの宛先を「manifest」に設定します。
requestのモードを「cors」に設定します。
requestの資格情報モードを、elのcrossorigin コンテンツ属性に対するCORS設定属性の資格情報モードに設定します。
trueを返します。

link要素 el、ブール値success、応答response、およびバイト列bodyBytesが与えられたとき、この種類のリンクされたリソースを処理するには：

responseのContent-TypeメタデータがJSON MIMEタイプでない場合、successをfalseに設定します。
successがtrueの場合：
1. document URLを、elのノード文書のURLとします。
2. manifest URLを、responseのURLとします。
3. clientを、elのノード文書の関連設定オブジェクトとします。
4. document URL、manifest URL、bodyBytes、および clientを指定して、マニフェストを処理します。[MANIFEST]

この種類のリンクされたリソースについてのリンクヘッダーを処理する手順は、何もしません。

4.6.8.12 リンク種別「`modulepreload`」

Link_types/modulepreload

Firefox115+Safari?Chrome66+

Opera?Edge79+

Edge（旧版）いいえInternet Explorer?

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

modulepreload キーワードは link要素で使用できます。このキーワードは外部リソースへのリンクを作成します。このキーワードはbody-okです。

modulepreload キーワードは、preloadキーワードに対する特化された代替であり、モジュールスクリプトのプリロード向けに調整された処理モデルを備えています。具体的には、モジュールスクリプト固有のフェッチ動作（たとえば、crossorigin 属性の異なる解釈を含む）を使用し、その結果を後で評価するために適切なモジュールマップへ配置します。これに対して、preloadキーワードを使用する同様の外部リソースへのリンクは、文書のモジュールマップに影響を与えることなく、結果をプリロードキャッシュへ配置します。

さらに、実装は、モジュールスクリプトが依存関係を宣言するという事実を利用して、指定されたモジュールの依存関係もフェッチできます。ユーザーエージェントは、それらの依存関係も後で必要になる可能性が非常に高いことを認識しているため、これは最適化の機会として意図されています。通常、サービスワーカーなどの技術を使用するか、サーバー側で監視しない限り、観察できません。特に、適切なloadイベントまたは errorイベントは、指定されたモジュールがフェッチされた後に発生し、依存関係を待ちません。

ユーザーエージェントは、このリンク種別によってloadイベントを遅延させてはなりません。

モジュールプリロード宛先は、「json」、「style」、「text」、またはスクリプト様の宛先です。

このようなリンクについてリンクされたリソースをフェッチして処理する適切な時点は次のとおりです：

すでに閲覧コンテキストに接続されているlink要素上に外部リソースへのリンクが作成されたとき。
外部リソースへのリンクのlink要素が閲覧コンテキストに接続された状態になるとき。
すでに閲覧コンテキストに接続されている外部リソースへのリンクのlink要素のhref属性が変更されたとき。

他の一部のリンク関係とは異なり、このようなlinkの関連属性（as、crossorigin、およびreferrerpolicy など）を変更しても、新しいフェッチは起動されません。これは、文書のモジュールマップが以前のフェッチによってすでに設定されているため、再フェッチしても意味がないからです。

link要素 elが与えられた場合の、modulepreload リンクに対するリンクされたリソースをフェッチして処理するアルゴリズムは次のとおりです：

elのhref属性の値が空文字列の場合、返ります。
destinationを、elのas属性の現在の状態（宛先）とし、どの状態にもない場合は「script」とします。
destinationがモジュールプリロード宛先でない場合、 elを指定してネットワークタスクソースに要素タスクをキューに追加し、elでerrorという名前のイベントを発火して、返ります。
urlを、elのhref属性の値と、 elのノード文書を指定して、URLをエンコーディング解析した結果とします。
urlが失敗の場合、返ります。
settings objectを、elのノード文書の関連設定オブジェクトとします。
credentials modeを、elのcrossorigin 属性に対するCORS設定属性の資格情報モードとします。
cryptographic nonceを el.[[CryptographicNonce]]とします。
integrity metadataを、elのintegrity属性が指定されている場合はその値とし、そうでない場合は空文字列とします。
elがintegrity属性を持たない場合、integrity metadataを、urlとsettings objectを使用してモジュール完全性メタデータを解決した結果に設定します。
referrer policyを、elのreferrerpolicy 属性の現在の状態とします。
fetch priorityを、elのfetchpriority 属性の現在の状態とします。
optionsを、暗号学的ノンスが cryptographic nonce、完全性メタデータが integrity metadata、パーサーメタデータが「not-parser-inserted」、資格情報モードが credentials mode、リファラーポリシーが referrer policy、およびフェッチ優先度が fetch priorityであるスクリプトフェッチオプションとします。
url、destination、settings object、options、および resultが与えられた次の手順を指定して、modulepreloadモジュールスクリプトグラフをフェッチします：
1. resultがnullの場合、elでerrorという名前のイベントを発火して、返ります。
2. elでloadという名前のイベントを発火します。

この種類のリンクされたリソースについてのリンクヘッダーを処理する手順は、何もしません。

次の断片は、複数のモジュールがプリロードされたアプリケーションの先頭部分を示しています：

<!DOCTYPE html>
<html lang="en">
<title>IRCFog</title>

<link rel="modulepreload" href="app.mjs">
<link rel="modulepreload" href="helpers.mjs">
<link rel="modulepreload" href="irc.mjs">
<link rel="modulepreload" href="fog-machine.mjs">

<script type="module" src="app.mjs">
...

アプリケーションのモジュールグラフが次のようになっていると仮定します：

The module graph is rooted at app.mjs, which depends on irc.mjs and fog-machine.mjs. In turn, irc.mjs depends on helpers.mjs.

ここでは、アプリケーション開発者がmodulepreload を使用してモジュールグラフ内のすべてのモジュールを宣言し、ユーザーエージェントがそれらすべてのフェッチを開始するようにしています。このようなプリロードがなく、HTTP/2 Server Pushなどの技術が使用されていない場合、ユーザーエージェントはhelpers.mjsを発見するまでに複数回のネットワーク往復を行う必要があるかもしれません。このように、modulepreload link要素は、アプリケーションのモジュールの一種の「マニフェスト」として使用できます。

次のコードは、modulepreload リンクをimport() と組み合わせて使用し、ネットワークフェッチを事前に完了させることで、import() が呼び出されたときに、モジュールがモジュールマップ内ですでに準備済み（ただし未評価）となるようにする方法を示しています：

<link rel="modulepreload" href="awesome-viewer.mjs">

<button onclick="import('./awesome-viewer.mjs').then(m => m.view())">
  View awesome thing
</button>

4.6.8.13 リンク種別「`nofollow`」

nofollowキーワードは、 a、area、およびform要素で使用できます。このキーワードはハイパーリンクを作成しませんが、要素によって作成される他のハイパーリンク（他のキーワードが作成しない場合は暗黙のハイパーリンク）に注釈を付けます。

nofollowキーワードは、リンクがページの元の作成者または発行者によって支持されていないこと、または参照先文書へのリンクが主として2つのページに関係する人々の商業的関係を理由として含められていることを示します。

4.6.8.14 リンク種別「`noopener`」

Link_types/noopener

現在のすべてのエンジンでサポートされています。

Firefox52+Safari10.1+Chrome49+

Opera?Edge79+

Edge（旧版）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Link_types/noopener

現在のすべてのエンジンでサポートされています。

Firefox52+Safari10.1+Chrome49+

Opera?Edge79+

Edge（旧版）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

noopenerキーワードは、 a、area、およびform要素で使用できます。このキーワードはハイパーリンクを作成しませんが、要素によって作成される他のハイパーリンク（他のキーワードが作成しない場合は暗黙のハイパーリンク）に注釈を付けます。

このキーワードは、ハイパーリンクをたどった結果として新しく作成されるトップレベル走査可能が、補助閲覧コンテキストを含まないことを示します。たとえば、結果として得られるWindowのopenerゲッターはnullを返します。

処理モデルも参照してください。

これは通常、補助閲覧コンテキストを持つトップレベル走査可能を作成します（ターゲット名が「example」である既存のナビガブルがないと仮定します）：

<a href=help.html target=example>Help!</a>

これは、非補助閲覧コンテキストを持つトップレベル走査可能を作成します（同じことを仮定します）：

<a href=help.html target=example rel=noopener>Help!</a>

これらは同等であり、親ナビガブルのみをナビゲートします：

<a href=index.html target=_parent>Home</a>

<a href=index.html target=_parent rel=noopener>Home</a>

4.6.8.15 リンク種別「`noreferrer`」

Link_types/noreferrer

現在のすべてのエンジンでサポートされています。

Firefox33+Safari5+Chrome16+

Opera?Edge79+

Edge（旧版）13+Internet Explorer🔰 11

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet1.5+Opera Android?

Link_types/noreferrer

現在のすべてのエンジンでサポートされています。

Firefox33+Safari5+Chrome16+

Opera?Edge79+

Edge（旧版）13+Internet Explorer🔰 11

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet1.5+Opera Android?

noreferrerキーワードは、 a、area、およびform要素で使用できます。このキーワードはハイパーリンクを作成しませんが、要素によって作成される他のハイパーリンク（他のキーワードが作成しない場合は暗黙のハイパーリンク）に注釈を付けます。

これは、リンクをたどる際にリファラー情報が漏洩しないことを示し、同じ条件下でnoopenerキーワードの動作も暗示します。

リファラーが直接操作される処理モデルも参照してください。

<a href="..." rel="noreferrer" target="_blank">は、 <a href="..." rel="noreferrer noopener" target="_blank">と同じ動作をします。

4.6.8.16 リンク種別「`opener`」

openerキーワードは、a、area、およびform要素で使用できます。このキーワードはハイパーリンクを作成しませんが、要素によって作成される他のハイパーリンク（他のキーワードが作成しない場合は暗黙のハイパーリンク）に注釈を付けます。

このキーワードは、ハイパーリンクをたどった結果として新しく作成されるトップレベル走査可能が、補助閲覧コンテキストを含むことを示します。

処理モデルも参照してください。

次の例では、openerを使用して、ヘルプページのポップアップがそのオープナーをナビゲートできるようにしています。たとえば、ユーザーが探しているものが別の場所にある場合に利用できます。別の方法として、_blankの代わりに名前付きターゲットを使用できますが、既存の名前と衝突する可能性があります。

<a href="..." rel=opener target=_blank>Help!</a>

4.6.8.17 リンク種別「`pingback`」

pingbackキーワードは link要素で使用できます。このキーワードは外部リソースへのリンクを作成します。このキーワードは body-okです。

pingbackキーワードのセマンティクスについては、Pingback 1.0を参照してください。[PINGBACK]

4.6.8.18 リンク種別「`preconnect`」

Link_types/preconnect

現在のすべてのエンジンでサポートされています。

Firefox39+Safari11.1+Chrome46+

Opera?Edge79+

Edge（旧版）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet4.0+Opera Android?

preconnectキーワードは link要素で使用できます。このキーワードは外部リソースへのリンクを作成します。このキーワードは body-okです。

preconnectキーワードは、ユーザーが指定されたリソースのオリジンにあるリソースを必要とする可能性が非常に高く、接続確立に伴う遅延コストを先取りすることでユーザー体験が改善されるため、そのオリジンへの接続を先行して開始することが有益である可能性が高いことを示します。

preconnectキーワードによって指定されるリソースにはデフォルトのタイプはありません。

ユーザーエージェントは、このリンク種別によってloadイベントを遅延させてはなりません。

この種類のリンクをフェッチして処理する適切な時点は次のとおりです：

すでに閲覧コンテキストに接続されているlink要素上に外部リソースへのリンクが作成されたとき。
外部リソースへのリンクのlink要素が閲覧コンテキストに接続された状態になるとき。
すでに閲覧コンテキストに接続されている外部リソースへのリンクのlink要素のhref属性が変更されたとき。
すでに閲覧コンテキストに接続されている外部リソースへのリンクのlink要素の crossorigin 属性が設定、変更、または削除されたとき。

この種類のリンクされたリソースについて、link要素 elが与えられた場合の、リンクされたリソースをフェッチして処理する手順は、elからリンクオプションを作成し、その結果を指定して事前接続することです。

この種類のリンクされたリソースについて、リンク処理オプションoptionsが与えられた場合のリンクヘッダーを処理する手順は、optionsを指定して事前接続することです。

リンク処理オプションoptionsが与えられたとき、事前接続するには：

optionsの hrefが空文字列の場合、返ります。
urlを、optionsのhrefと、 optionsの基底URLを指定して、URLをエンコーディング解析した結果とします。

文書または環境の代わりに基底URLを渡すことは、issue #9715で追跡されています。
urlが失敗の場合、返ります。
urlのスキームがHTTP(S)スキームでない場合、返ります。
partitionKeyを、optionsの環境を指定して、ネットワークパーティションキーを決定した結果とします。
useCredentialsをtrueとします。
optionsのcrossoriginがAnonymousであり、かつ optionsのオリジンがurlのオリジンと同一オリジンでない場合、useCredentialsをfalseに設定します。
ユーザーエージェントは、partitionKey、urlのオリジン、およびuseCredentialsを指定して、接続を取得するべきです。

この接続は取得されますが、直接使用されません。その後の使用のために接続プール内に残ります。

ユーザーエージェントは、可能な場合には常に事前接続を開始し、完全な接続ハンドシェイク（HTTPではDNS+TCP、HTTPSオリジンではDNS+TCP+TLS）を実行するよう試みるべきですが、リソース制約またはその他の理由により、部分的なハンドシェイク（HTTPではDNSのみ、 HTTPSオリジンではDNSまたはDNS+TCP）を実行するか、完全に省略することを選択できます。

オリジンごとの最適な接続数は、交渉されたプロトコル、ユーザーの現在の接続性プロファイル、利用可能なデバイスリソース、グローバル接続制限、およびその他の文脈固有の変数に依存します。そのため、いくつの接続を開くべきかの決定はユーザーエージェントに委ねられます。

4.6.8.19 リンク種別「`prefetch`」

Link_types/prefetch

Firefox2+SafariいいえChrome8+

Opera?Edge79+

Edge（旧版）12+Internet Explorer11

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet1.5+Opera Android?

prefetchキーワードは link要素で使用できます。このキーワードは外部リソースへのリンクを作成します。このキーワードは body-okです。

prefetchキーワードは、ユーザーが将来のナビゲーションでこのリソースを必要とする可能性が非常に高いため、指定されたリソースまたは同一サイトの文書を先行してフェッチし、キャッシュすることが有益である可能性が高いことを示します。

prefetchキーワードによって指定されるリソースにはデフォルトのタイプはありません。

この種類のリンクをフェッチして処理する適切な時点は次のとおりです：

すでに閲覧コンテキストに接続されているlink要素上に外部リソースへのリンクが作成されたとき。
外部リソースへのリンクのlink要素が閲覧コンテキストに接続された状態になるとき。
すでに閲覧コンテキストに接続されている外部リソースへのリンクのlink要素のhref属性が変更されたとき。
すでに閲覧コンテキストに接続されている外部リソースへのリンクのlink要素の crossorigin 属性が設定、変更、または削除されたとき。

link要素 elが与えられた場合の、prefetchリンクに対するリンクされたリソースをフェッチして処理するアルゴリズムは次のとおりです：

elのhref属性の値が空文字列の場合、返ります。
optionsを、elからリンクオプションを作成した結果とします。
requestを、optionsを指定してリンク要求を作成した結果とします。
requestがnullの場合、返ります。
requestの起動元を「prefetch」に設定します。
processPrefetchResponseを、応答responseおよびnull、失敗、またはバイト列bytesOrNullが与えられた次の手順とします：
1. responseがネットワークエラーの場合、elでerrorという名前のイベントを発火します。
2. それ以外の場合、elでloadという名前のイベントを発火します。
ユーザーエージェントは、processResponseConsumeBodyを processPrefetchResponseに設定して、requestをフェッチするべきです。ユーザーエージェントは、現在の文書に必要な他の要求を優先するため、requestのフェッチを遅延してもかまいません。

この種類のリンクされたリソースについてのリンクヘッダーを処理する手順は、何もしません。

4.6.8.20 リンク種別「`preload`」

Link_types/preload

1つのエンジンのみでサポートされています。

Firefox85+Safari?Chrome🔰 50+

Opera37+Edge🔰 79+

Edge（旧版）いいえInternet Explorer?

Firefox Android?Safari iOS?Chrome Android?WebView Android50+Samsung Internet5.0+Opera Android?

preloadキーワードは link要素で使用できます。このキーワードは外部リソースへのリンクを作成します。このキーワードは body-okです。

preloadキーワードは、ユーザーが現在のナビゲーションでこのリソースを必要とする可能性が非常に高いため、ユーザーエージェントが as属性によって指定されたプリロード宛先と、fetchpriority属性によって指定された優先度に従って、指定されたリソースを先行してフェッチし、キャッシュすることを示します。

ユーザーエージェントは、リソースが読み込まれるときに、画像を先行してデコードしたり、スタイルシートを作成したりするなど、追加の処理を実行する場合があります。ただし、これらの追加処理には観察可能な効果があってはなりません。

preloadキーワードによって指定されるリソースにはデフォルトのタイプはありません。

ユーザーエージェントは、このリンク種別によってloadイベントを遅延させてはなりません。

このようなリンクについてリンクされたリソースをフェッチして処理する適切な時点は次のとおりです：

すでに閲覧コンテキストに接続されているlink要素上に外部リソースへのリンクが作成されたとき。
外部リソースへのリンクのlink要素が閲覧コンテキストに接続された状態になるとき。
すでに閲覧コンテキストに接続されている外部リソースへのリンクのlink要素のhref属性が変更されたとき。
すでに閲覧コンテキストに接続されている外部リソースへのリンクのlink要素のas属性が変更されたとき。
すでに閲覧コンテキストに接続されているものの、以前は type属性が要求の宛先に対してサポートされていないタイプを指定していたため取得されなかった外部リソースへのリンクのlink要素のtype属性が設定、削除、または変更されたとき。
すでに閲覧コンテキストに接続されているものの、以前は media属性が環境に一致しなかったため取得されなかった外部リソースへのリンクのlink要素のmedia属性が変更または削除されたとき。

Documentは、初期状態で空の順序付きマップであるプリロード済みリソースのマップを持ちます。

プリロードキーは構造体です。次の項目を持ちます：

URL: URL
宛先: プリロード宛先
モード: 「same-origin」、「cors」、または「no-cors」のいずれかである要求モード
資格情報モード: 資格情報モード

プリロードエントリーは構造体です。次の項目を持ちます：

完全性メタデータ: 文字列
応答: Nullまたは応答
応答が利用可能になったとき: Null、または応答またはnullを受け入れるアルゴリズム

Windowwindowについて、 URLurl、文字列destination、文字列 mode、文字列credentialsMode、文字列integrityMetadata、および応答を受け入れるアルゴリズムである onResponseAvailableが与えられたとき、プリロード済みリソースを消費するには：

keyを、URLがurl、宛先がdestination、モードがmode、および資格情報モードが credentialsModeであるプリロードキーとします。
preloadsを、windowの関連付けられたDocumentのプリロード済みリソースのマップとします。
keyがpreloads内に存在しない場合、falseを返します。
entryをpreloads[key]とします。
consumerIntegrityMetadataを、integrityMetadataを解析した結果とします。
preloadIntegrityMetadataを、entryの完全性メタデータを解析した結果とします。
次の条件のいずれも該当しない場合：
- consumerIntegrityMetadataがno metadataである。
- consumerIntegrityMetadataがpreloadIntegrityMetadataと等しい。または
  
  この比較では、未知の完全性オプションが無視されます。issue #116を参照してください。
その場合、falseを返します。

プリロードとコンシューマーの完全性メタデータが一致しない場合、両方がデータと一致していても、ネットワークから追加のフェッチが行われます。

ネットワークエラーをプリロードキャッシュに追加することは重要です。これにより、プリロード要求でエラーが発生した場合、誤った応答が後でネットワークから再要求されなくなります。これにはセキュリティ上の影響もあります。開発者がプリロード要求にはサブリソース完全性メタデータを指定するものの、その後のリソース要求には指定しない場合を考えてください。プリロード要求がサブリソース完全性検証に失敗して破棄された場合、リソース要求は完全性を検証せずに、潜在的に悪意のある応答をネットワークからフェッチして消費します。 [SRI]
preloads[key]を削除します。
entryの応答がnullの場合、entryの応答が利用可能になったときを onResponseAvailableに設定します。
それ以外の場合、entryの応答を指定して onResponseAvailableを呼び出します。
trueを返します。

この節の目的では、文字列typeは、次のアルゴリズムがtrueを返す場合にプリロード宛先destinationと一致します：

typeが空文字列の場合、trueを返します。
destinationが「fetch」の場合、trueを返します。
mimeTypeRecordを、typeを解析した結果とします。
mimeTypeRecordが失敗の場合、falseを返します。
mimeTypeRecordがユーザーエージェントによってサポートされていない場合、falseを返します。
次のいずれかが真の場合：
- destinationが「script」であり、 mimeTypeRecordがJavaScript MIMEタイプである。
- destinationが「image」であり、 mimeTypeRecordが画像MIMEタイプである。
- destinationが「font」であり、 mimeTypeRecordがフォントMIMEタイプである。
- destinationが「style」であり、 mimeTypeRecordのエッセンスがtext/cssである。または
- destinationが「track」であり、 mimeTypeRecordのエッセンスがtext/vttである。
その場合、trueを返します。
falseを返します。

要求requestについてプリロードキーを作成するには、URLがrequestのURL、宛先がrequestの宛先、モードがrequestのモード、および資格情報モードがrequestの資格情報モードである新しいプリロードキーを返します。

プリロード宛先は、「fetch」、「font」、「image」、「script」、「style」、または「track」です。

文字列destinationが与えられたとき、プリロード宛先を変換するには：

destinationがプリロード宛先でない場合、nullを返します。
destinationを変換した結果を返します。

リンク処理オプションoptionsと、任意の processResponse（応答を受け入れるアルゴリズム）が与えられたとき、プリロードするには：

optionsのtypeが、optionsの宛先と一致しない場合、返ります。
optionsの宛先が「image」であり、 optionsのソース集合がnullでない場合、 optionsのhrefを、optionsのソース集合から画像ソースを選択した結果に設定します。
requestを、optionsを指定してリンク要求を作成した結果とします。
requestがnullの場合、返ります。
unsafeEndTimeを0とします。
entryを、完全性メタデータがoptionsのintegrityである新しいプリロードエントリーとします。
keyを、requestを指定してプリロードキーを作成した結果とします。
optionsの文書がnullの場合、requestの起動元タイプを「early hint」に設定します。
controllerをnullとします。
Document documentが与えられたreportTimingを、documentの関連グローバルオブジェクトを指定して controllerのタイミングを報告することとします。
controllerを、processResponseConsumeBodyを、応答responseおよびnull、失敗、またはバイト列bodyBytesが与えられた次の手順に設定して、 requestをフェッチした結果に設定します：
1. bodyBytesがバイト列の場合、responseの本体を、bodyBytesを本体として使用したものに設定します。
  
  processResponseConsumeBody を使用することで、本体全体を抽出しています。これは、プリロードが消費されるかどうか（現時点では不確定）に関係なく、プリローダーが本体全体をネットワークから読み込むことを保証するために必要です。その後、この手順は要求の本体を同じバイトを含む新しい本体にリセットします。これにより、すでに一度読み取っていても、他の仕様が実際の消費時にそこから読み取れます。
2. それ以外の場合、responseをネットワークエラーに設定します。
3. unsafeEndTimeを安全でない共有現在時刻に設定します。
4. optionsの文書がnullでない場合、 optionsの文書を指定して reportTimingを呼び出します。
5. entryの応答が利用可能になったときがnullの場合、 entryの応答をresponseに設定します。それ以外の場合、responseを指定してentryの応答が利用可能になったときを呼び出します。
6. processResponseが与えられている場合、responseを指定して processResponseを呼び出します。
Document documentが与えられたcommitを、次の手順とします：
1. entryの応答がnullでない場合、documentを指定して reportTimingを呼び出します。
2. documentのプリロード済みリソースのマップ [key]をentryに設定します。
optionsの文書がnullの場合、optionsの文書準備完了時をcommitに設定します。それ以外の場合、optionsの文書を指定してcommitを呼び出します。

elのソース集合を更新します。
optionsを、elからリンクオプションを作成した結果とします。
destinationを、elのas属性の状態を表すキーワードを変換した結果とします。
destinationがnullの場合、返ります。
optionsの宛先をdestinationに設定します。
optionsをプリロードし、応答responseが与えられた次の手順を使用します：
1. responseがネットワークエラーの場合、elでerrorという名前のイベントを発火します。それ以外の場合、elでloadという名前のイベントを発火します。
  
  実際のブラウザーの動作はここでの仕様とは異なり、その動作を変更できるかどうかはまだ調査されていません。issue #1142を参照してください。

この種類のリンクについて、リンク処理オプションoptionsが与えられた場合のリンクヘッダーを処理する手順は、optionsをプリロードすることです。

4.6.8.21 リンク種別「`privacy-policy`」

privacy-policy キーワードは link、a、およびarea要素で使用できます。このキーワードはハイパーリンクを作成します。

privacy-policy キーワードは、Additional Link Relation Typesでさらに詳しく説明されているように、参照先文書に現在の文書に適用されるデータ収集および利用慣行に関する情報が含まれていることを示します。参照先文書は独立したプライバシーポリシーである場合も、より一般的な文書の特定の節である場合もあります。[RFC6903]

4.6.8.22 リンク種別「`search`」

searchキーワードは link、 a、area、およびform要素で使用できます。このキーワードはハイパーリンクを作成します。

searchキーワードは、参照先文書が、その文書および関連リソースを検索するための専用インターフェースを提供することを示します。

OpenSearch記述文書は、link要素および searchリンク種別とともに使用して、ユーザーエージェントが検索インターフェースを自動検出できるようにできます。 [OPENSEARCH]

4.6.8.23 リンク種別「`stylesheet`」

stylesheet キーワードはlink 要素で使用できます。このキーワードは、スタイル処理モデルに寄与する外部リソースへのリンクを作成します。このキーワードは body-okです。

指定されたリソースは、文書をどのように表示するかを記述するCSSスタイルシートです。

Alternative_style_sheets

1つのエンジンのみでサポートされています。

Firefox3+Safari?Chrome1–48

OperaはいEdgeいいえ

Edge（旧版）?Internet Explorer8+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

alternateキーワードも link要素に指定されている場合、そのリンクは代替スタイルシートです。この場合、title属性を、空でない値とともに link要素に指定しなければなりません。

stylesheet キーワードによって指定されるリソースのデフォルトのタイプは、text/cssです。

この種類のlink要素は、その要素がノード文書のパーサーによって作成された場合、暗黙的にレンダリングをブロックする可能性があります。

stylesheet キーワードを持つlink要素のdisabled属性が設定されたとき、無効化し、関連付けられたCSSスタイルシートを無効にします。

この種類のリンクをフェッチして処理する適切な時点は次のとおりです：

すでに閲覧コンテキストに接続されているlink要素上に外部リソースへのリンクが作成されたとき。
外部リソースへのリンクのlink要素が閲覧コンテキストに接続された状態になるとき。
すでに閲覧コンテキストに接続されている外部リソースへのリンクのlink要素のhref属性が変更されたとき。
すでに閲覧コンテキストに接続されている外部リソースへのリンクの link要素の disabled属性が設定、変更、または削除されたとき。
すでに閲覧コンテキストに接続されている外部リソースへのリンクの link要素の crossorigin 属性が設定、変更、または削除されたとき。
すでに閲覧コンテキストに接続されている外部リソースへのリンクのlink要素のtype属性が、以前に取得した外部リソースがある場合、そのContent-Typeメタデータと一致しない、または一致しなくなった値に設定または変更されたとき。
すでに閲覧コンテキストに接続されているものの、以前はtype属性がサポートされていないタイプを指定していたため取得されなかった外部リソースへのリンクのlink要素のtype属性が削除または変更されたとき。
すでに閲覧コンテキストに接続されている外部リソースへのリンクが、代替スタイルシートである状態からそうでない状態へ、またはその逆へ変化したとき。

クワーク：文書がクワークモードに設定され、外部リソースのURLと同一オリジンを持ち、外部リソースのContent-Typeメタデータがサポートされているスタイルシートタイプでない場合、ユーザーエージェントは代わりにそれをtext/cssであると仮定しなければなりません。

この種類のリンクされたリソースについて、link要素 elおよび要求 requestが与えられた場合の、リンクされたリソースのフェッチ設定手順は次のとおりです：

elのdisabled属性が設定されている場合、falseを返します。
elがスクリプトをブロックするスタイルシートに寄与する場合、elを、そのノード文書のスクリプトをブロックするスタイルシート集合に追加します。
elのmedia属性の値が環境に一致し、かつelがレンダリングをブロックする可能性がある場合、 elでレンダリングをブロックします。
elが現在レンダリングをブロックしている場合、 requestのレンダリングブロックをtrueに設定します。
trueを返します。

デフォルトのリンクされたリソースをフェッチして処理するアルゴリズムの代わりに、CSSOMのCSSスタイルシートをフェッチするアルゴリズムを使用する計画については、issue #968を参照してください。それまでの間、すべての重要なサブリソースの要求は、そのレンダリングブロックを、link要素が現在レンダリングをブロックしているかどうかに設定するべきです。

link要素 el、ブール値success、応答response、およびバイト列 bodyBytesが与えられたとき、この種類のリンクされたリソースを処理するには：

リソースのContent-Typeメタデータが text/cssでない場合、 successをfalseに設定します。
elがスタイル処理モデルに寄与する外部リソースへのリンクを作成しなくなった場合、または問題のリソースがフェッチされて以降、それを再びフェッチすることが適切になった場合：
1. elを、elのノード文書のスクリプトをブロックするスタイルシート集合から削除します。
2. 返ります。
elが関連付けられたCSSスタイルシートを持つ場合、CSSスタイルシートを削除します。
successがtrueの場合：
1. 次のプロパティを使用してCSSスタイルシートを作成します：
  
  タイプ
  
  text/css
  
  場所
  
  responseのURLリスト[0]
  
  w3c/csswg-drafts issue #9316が修正されるという前提で、ここではURLを提供しています。
  
  所有者ノード
  
  el
  
  メディア
  
  elのmedia属性。
  
  これは、属性の現在の値のコピーではなく、属性（この時点では存在しない可能性があります）への参照です。CSSOMは、属性が動的に設定、変更、または削除されたときに何が起こるかを定義します。
  
  タイトル
  
  elが文書ツリー内にある場合はelのtitle属性、そうでない場合は空文字列。
  
  これも同様に、属性の現在の値のコピーではなく、属性への参照です。
  
  代替フラグ
  
  そのリンクが代替スタイルシートであり、かつelの明示的に有効がfalseの場合に設定し、それ以外の場合は設定しません。
  
  オリジンクリーンフラグ
  
  リソースがCORS同一オリジンの場合に設定し、それ以外の場合は設定しません。
  
  親CSSスタイルシート
  
  所有者CSS規則
  
  null
  
  無効フラグ
  
  デフォルト値のままにします。
  
  CSS規則
  
  初期化しないままにします。
  
  これは正しくないように見えます。おそらくbodyBytesを使用するべきでしょうか？issue #2997として追跡されています。
  
  CSSの環境エンコーディングは、次の手順を実行した結果です： [CSSSYNTAX]
  1. elがcharset属性を持つ場合、その属性の値からエンコーディングを取得します。成功した場合、結果として得られたエンコーディングを返します。[ENCODING]
  2. それ以外の場合、文書の文字エンコーディングを返します。 [DOM]
2. elでloadという名前のイベントを発火します。
それ以外の場合、elでerrorという名前のイベントを発火します。
elがスクリプトをブロックするスタイルシートに寄与する場合：
1. 表明：elのノード文書のスクリプトをブロックするスタイルシート集合はelを含みます。
2. elを、そのノード文書のスクリプトをブロックするスタイルシート集合から削除します。
elでレンダリングのブロックを解除します。

この種類のリンクされたリソースについてのリンクヘッダーを処理する手順は、何もしません。

4.6.8.24 リンク種別「`tag`」

tagキーワードはa要素および area要素で使用できます。このキーワードはハイパーリンクを作成します。

tagキーワードは、参照先文書が表すタグが現在の文書に適用されることを示します。

タグが現在の文書に適用されることを示すため、一連のページ全体で人気のタグを一覧表示するタグクラウドのマークアップでこのキーワードを使用することは不適切です。

この文書は宝石についてのものであるため、「https://en.wikipedia.org/wiki/Gemstone」で タグ付けし、米国の町、Rubyパッケージ形式、またはスイスの機関車形式などではなく、「宝飾品」の種類の宝石に適用されるものとして明確に分類しています：

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>My Precious</title>
 </head>
 <body>
  <header><h1>My precious</h1> <p>Summer 2012</p></header>
  <p>Recently I managed to dispose of a red gem that had been
  bothering me. I now have a much nicer blue sapphire.</p>
  <p>The red gem had been found in a bauxite stone while I was digging
  out the office level, but nobody was willing to haul it away. The
  same red gem stayed there for literally years.</p>
  <footer>
   Tags: <a rel=tag href="https://en.wikipedia.org/wiki/Gemstone">Gemstone</a>
  </footer>
 </body>
</html>

この文書には2つの記事があります。ただし、「tag」リンクはページ全体に適用されます（article要素内を含め、どこに配置されていても同様です）。

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>Gem 4/4</title>
 </head>
 <body>
  <article>
   <h1>801: Steinbock</h1>
   <p>The number 801 Gem 4/4 electro-diesel has an ibex and was rebuilt in 2002.</p>
  </article>
  <article>
   <h1>802: Murmeltier</h1>
   <figure>
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b0/Trains_de_la_Bernina_en_hiver_2.jpg"
         alt="The 802 was red with pantographs and tall vents on the side.">
    <figcaption>The 802 in the 1980s, above Lago Bianco.</figcaption>
   </figure>
   <p>The number 802 Gem 4/4 electro-diesel has a marmot and was rebuilt in 2003.</p>
  </article>
  <p class="topic"><a rel=tag href="https://en.wikipedia.org/wiki/Rhaetian_Railway_Gem_4/4">Gem 4/4</a></p>
 </body>
</html>

4.6.8.25 リンク種別「`terms-of-service`」

terms-of-service キーワードは link、a、およびarea要素で使用できます。このキーワードはハイパーリンクを作成します。

terms-of-service キーワードは、Additional Link Relation Typesでさらに詳しく説明されているように、参照先文書に、現在の文書の提供者と現在の文書を利用しようとするユーザーとの間の合意に関する情報が含まれていることを示します。[RFC6903]

4.6.8.26 連続リンク種別

一部の文書は、文書の連続体の一部を形成します。

文書の連続体とは、各文書が前の兄弟および次の兄弟を持つことができるものです。前の兄弟を持たない文書はその連続体の先頭であり、次の兄弟を持たない文書はその連続体の末尾です。

文書は複数の連続体の一部である場合があります。

4.6.8.26.1 リンク種別「`next`」

nextキーワードは link、 a、area、およびform要素で使用できます。このキーワードはハイパーリンクを作成します。

nextキーワードは、文書が連続体の一部であり、リンクがその連続体内で論理的に次の文書へ通じていることを示します。

nextキーワードがlink要素とともに使用される場合、ユーザーエージェントは、そのようなリンクをdns-prefetch、preconnect、または prefetchキーワードのいずれかを使用しているかのように処理するべきです。ユーザーエージェントがどのキーワードを使用するかは実装依存です。たとえば、ユーザーエージェントは、データ、バッテリー電力、または処理能力を節約しようとするときに、より低コストなpreconnect処理モデルを使用したり、類似の状況における過去のユーザー動作をヒューリスティックに分析した結果に応じてキーワードを選択したりする場合があります。

4.6.8.26.2 リンク種別「`prev`」

prevキーワードは link、 a、area、およびform要素で使用できます。このキーワードはハイパーリンクを作成します。

prevキーワードは、文書が連続体の一部であり、リンクがその連続体内で論理的に前の文書へ通じていることを示します。

同義語：歴史的な理由により、ユーザーエージェントはキーワード「previous」もprevキーワードと同様に扱わなければなりません。

4.6.8.27 その他のリンク種別

定義済みリンク種別集合の拡張は、既存のrel値に関する microformatsページで登録できます。[MFREL]

誰でも、種別を追加するために既存のrel値に関するmicroformatsページをいつでも自由に編集できます。拡張種別には、次の情報を指定しなければなりません：

キーワード

実際に定義される値。値は、他の定義済みの値と紛らわしいほど似ているべきではありません（たとえば、大文字小文字だけが異なるなど）。

値にU+003A COLON文字（:）が含まれる場合、それは絶対URLでもなければなりません。

次に対する効果... link

次のいずれか：

許可されない: キーワードをlink要素に指定してはなりません。
ハイパーリンク: キーワードをlink要素に指定できます。これはハイパーリンクを作成します。
外部リソース: キーワードをlink要素に指定できます。これは外部リソースへのリンクを作成します。

次に対する効果... aおよびarea

次のいずれか：

許可されない: キーワードをa要素およびarea要素に指定してはなりません。
ハイパーリンク: キーワードをa要素およびarea要素に指定できます。これはハイパーリンクを作成します。
外部リソース: キーワードをa要素およびarea要素に指定できます。これは外部リソースへのリンクを作成します。
ハイパーリンク注釈: キーワードをa要素およびarea要素に指定できます。これは、要素によって作成される他のハイパーリンクに注釈を付けます。

次に対する効果... form

次のいずれか：

許可されない: キーワードをform要素に指定してはなりません。
ハイパーリンク: キーワードをform要素に指定できます。これはハイパーリンクを作成します。
外部リソース: キーワードをform要素に指定できます。これは外部リソースへのリンクを作成します。
ハイパーリンク注釈: キーワードをform要素に指定できます。これは、要素によって作成される他のハイパーリンクに注釈を付けます。

簡単な説明

キーワードの意味についての短い非規範的な説明。

仕様

キーワードのセマンティクスおよび要件についての、より詳細な説明へのリンク。これはwiki上の別のページ、または外部ページへのリンクである場合があります。

同義語

処理要件が完全に同一である他のキーワード値の一覧。作成者は、同義語として定義された値を使用するべきではありません。それらは、ユーザーエージェントがレガシーコンテンツをサポートできるようにすることだけを意図しています。実際には使用されていない同義語は誰でも削除できます。レガシーコンテンツとの互換性のために同義語として処理する必要がある名前だけを、この方法で登録します。

状態

次のいずれか：

提案済み: キーワードは広範なピアレビューおよび承認を受けていません。誰かが提案しており、使用しているか、まもなく使用する予定です。
承認済み: キーワードは広範なピアレビューおよび承認を受けています。キーワードを使用するページを、誤った方法で使用する場合を含め、どのように処理するかを明確に定義する仕様があります。
廃止済み: キーワードは広範なピアレビューを受け、その結果、問題があると判断されました。既存のページはこのキーワードを使用していますが、新しいページは使用を避けるべきです。「簡単な説明」および「仕様」の項目には、代わりに作成者が何を使用するべきかが、該当する場合に詳しく示されます。

キーワードが既存の値と重複していることが判明した場合、そのキーワードを削除し、既存の値の同義語として一覧に記載するべきです。

キーワードが「提案済み」の状態で1か月以上登録されているものの、使用も仕様化もされていない場合、レジストリーから削除できます。

キーワードが「提案済み」の状態で追加され、既存の値と重複していることが判明した場合、それを削除し、既存の値の同義語として一覧に記載するべきです。キーワードが「提案済み」の状態で追加され、有害であることが判明した場合、その状態を「廃止済み」に変更するべきです。

誰でもいつでも状態を変更できますが、上記の定義に従う場合にのみ変更するべきです。

適合性チェッカーは、値が許可されるかどうかを確定するために、既存のrel値に関する microformatsページで提供される情報を使用しなければなりません。この仕様で定義された値、または「提案済み」もしくは「承認済み」と記された値は、「次に対する効果...」フィールドで説明される適用対象の要素で使用された場合に受け入れなければなりません。一方、「廃止済み」と記された値、またはこの仕様にも前述のページにも記載されていない値は、無効として拒否しなければなりません。適合性チェッカーは、この情報をキャッシュしてもかまいません（たとえば、性能上の理由、または信頼性の低いネットワーク接続の使用を避けるため）。

作成者が、この仕様にもwikiページにも定義されていない新しい種別を使用した場合、適合性チェッカーは、上記で説明した詳細と「提案済み」の状態を使用して、その値をwikiへ追加することを提案するべきです。

既存のrel値に関する microformatsページで「提案済み」または「承認済み」の状態を持つ拡張として定義された種別は、「次に対する効果...」フィールドに従って、rel属性をlink、a、およびarea 要素で使用できます。[MFREL]

4.7 編集

ins要素およびdel要素は、文書に対する編集を表します。

4.7.1 `ins`要素

Element/ins

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: 透過的。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性; cite — 引用元、または編集に関する詳細情報へのリンク; datetime — 変更の日付と（任意で）時刻
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: 属性cite、datetimeを持つデフォルト。
DOMインターフェース：: HTMLModElementを使用します。

ins要素は、文書への追加を表します。

次は、単一の段落の追加を表します：

<aside>
 <ins>
  <p> I like fruit. </p>
 </ins>
</aside>

次も同様です。ここではaside要素内のすべてがフレージングコンテンツとして数えられるため、段落は1つだけです：

<aside>
 <ins>
  Apples are <em>tasty</em>.
 </ins>
 <ins>
  So are pears.
 </ins>
</aside>

ins要素は、暗黙の段落の境界をまたぐべきではありません。

次の例は2つの段落の追加を表しており、そのうち2つ目は2つの部分に分けて挿入されています。そのため、この例の最初のins要素は段落境界をまたいでおり、これは望ましくない形式とみなされます。

<aside>
 <!-- don't do this -->
 <ins datetime="2005-03-16 00:00Z">
  <p> I like fruit. </p>
  Apples are <em>tasty</em>.
 </ins>
 <ins datetime="2007-12-19 00:00Z">
  So are pears.
 </ins>
</aside>

これをマークアップするより良い方法を次に示します。より多くの要素を使用しますが、どの要素も暗黙の段落の境界をまたぎません。

<aside>
 <ins datetime="2005-03-16 00:00Z">
  <p> I like fruit. </p>
 </ins>
 <ins datetime="2005-03-16 00:00Z">
  Apples are <em>tasty</em>.
 </ins>
 <ins datetime="2007-12-19 00:00Z">
  So are pears.
 </ins>
</aside>

4.7.2 `del`要素

Element/del

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

カテゴリー：: フローコンテンツ。; フレージングコンテンツ。; 知覚可能コンテンツ。
この要素を使用できる文脈：: フレージングコンテンツが期待される場所。
コンテンツモデル：: 透過的。
text/htmlにおけるタグの省略：: どちらのタグも省略できません。
コンテンツ属性：: グローバル属性; cite — 引用元、または編集に関する詳細情報へのリンク; datetime — 変更の日付と（任意で）時刻
アクセシビリティ上の考慮事項：: 作成者向け。; 実装者向け。
サニタイズ：: 属性cite、datetimeを持つデフォルト。
DOMインターフェース：: HTMLModElementを使用します。

del要素は、文書からの削除を表します。

del要素は、暗黙の段落の境界をまたぐべきではありません。

次は、完了した項目が、その完了日時とともに取り消し線で消されている「やること」リストを示しています。

<h1>To Do</h1>
<ul>
 <li>Empty the dishwasher</li>
 <li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li>
 <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
 <li>Buy a printer</li>
</ul>

4.7.3 `ins`要素および `del` 要素に共通する属性

cite属性は、変更について説明する文書のURLを指定するために使用できます。その文書が長い場合、たとえば会議の議事録である場合、作成者は、その文書内で変更について論じている特定の部分を指すフラグメントを含めることが推奨されます。

cite属性が存在する場合、その値は、変更について説明する空白で囲まれている可能性がある妥当なURLでなければなりません。対応する引用リンクを取得するには、属性の値を要素のノード文書を基準として解析しなければなりません。ユーザーエージェントは、ユーザーがそのような引用リンクをたどれるようにしてもかまいませんが、それらは主として非公開の用途（たとえば、サイトの編集に関する統計を収集するサーバー側スクリプト）のためのものであり、読者向けではありません。

datetime属性は、変更の時刻および日付を指定するために使用できます。

存在する場合、datetime 属性の値は、任意の時刻を伴う妥当な日付文字列でなければなりません。

ユーザーエージェントは、datetime 属性を日付または時刻文字列を解析するアルゴリズムに従って解析しなければなりません。それが日付またはグローバル日時を返さない場合、変更には関連付けられたタイムスタンプがありません（値は不適合であり、任意の時刻を伴う妥当な日付文字列ではありません）。それ以外の場合、変更には、指定された日付またはグローバル日時に行われたことが記録されます。指定された値がグローバル日時である場合、ユーザーエージェントは、関連付けられたタイムゾーンオフセット情報を使用して、指定された日時をどのタイムゾーンで表示するかを決定するべきです。

この値はユーザーに表示してもかまいませんが、主として非公開の用途を意図しています。

ins要素および del 要素は、 HTMLModElement インターフェースを実装しなければなりません：

HTMLModElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer6+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

[Exposed=Window]
interface HTMLModElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, ReflectURL] attribute USVString cite;
  [CEReactions, Reflect] attribute DOMString dateTime;
};

4.7.4 編集と段落

この節は非規範的です。

ins要素およびdel要素は段落化に影響を与えないため、段落が（明示的なp要素なしで）暗黙に形成される場合には、ins要素またはdel要素が、段落全体もしくはその他の非フレージングコンテンツ要素と、別の段落の一部の両方にまたがることが可能な場合があります。例：

<section>
 <ins>
  <p>
   This is a paragraph that was inserted.
  </p>
  This is another paragraph whose first sentence was inserted
  at the same time as the paragraph above.
 </ins>
 This is a second sentence, which was there all along.
</section>

一部の段落だけをp要素で囲むことで、 1つの段落の末尾、2つ目の段落全体、および3つ目の段落の先頭を、同じins要素またはdel要素で覆うことさえできます（ただし、これは非常に紛らわしく、良い慣行とはみなされません）：

<section>
 This is the first paragraph. <ins>This sentence was
 inserted.
 <p>This second paragraph was inserted.</p>
 This sentence was inserted too.</ins> This is the
 third paragraph in this example.
 <!-- (don't do this) -->
</section>

ただし、暗黙の段落の定義方法により、同じins要素またはdel要素を使用して、 1つの段落の末尾と、その直後の段落の先頭をマークアップすることはできません。代わりに、次の例のように、1つ（または2つ）のp要素と、2つのins要素または del要素を使用する必要があります：

<section>
 <p>This is the first paragraph. <del>This sentence was
 deleted.</del></p>
 <p><del>This sentence was deleted too.</del> That
 sentence needed a separate &lt;del&gt; element.</p>
</section>

上記で説明した混乱も一因として、作成者には、暗黙の段落の境界をまたぐins要素または del要素を使用する代わりに、すべての段落を常にp要素でマークアップすることが強く推奨されます。

4.7.5 編集とリスト

この節は非規範的です。

ol要素および ul要素のコンテンツモデルでは、 ins要素およびdel要素を子として許可しません。リストは、そうでなければ削除済みとしてマークされる項目を含め、常にすべての項目を表します。

項目が挿入または削除されたことを示すには、ins要素またはdel要素を、li要素の内容の周囲に配置できます。項目が別の項目に置き換えられたことを示すには、単一のli要素に、1つ以上のdel要素と、それに続く1つ以上の ins要素を含めることができます。

次の例では、最初は空だったリストに、時間の経過とともに項目が追加および削除されています。例の強調された部分は、リストの「現在」の状態に当たる部分を示します。ただし、リスト項目の番号は編集を考慮しません。

<h1>Stop-ship bugs</h1>
<ol>
 <li><ins datetime="2008-02-12T15:20Z">Bug 225:
 Rain detector doesn't work in snow</ins></li>
 <li><del datetime="2008-03-01T20:22Z"><ins datetime="2008-02-14T12:02Z">Bug 228:
 Water buffer overflows in April</ins></del></li>
 <li><ins datetime="2008-02-16T13:50Z">Bug 230:
 Water heater doesn't use renewable fuels</ins></li>
 <li><del datetime="2008-02-20T21:15Z"><ins datetime="2008-02-16T14:25Z">Bug 232:
 Carbon dioxide emissions detected after startup</ins></del></li>
</ol>

次の例では、最初は果物だけだったリストが、色だけのリストに置き換えられています。

<h1>List of <del>fruits</del><ins>colors</ins></h1>
<ul>
 <li><del>Lime</del><ins>Green</ins></li>
 <li><del>Apple</del></li>
 <li>Orange</li>
 <li><del>Pear</del></li>
 <li><ins>Teal</ins></li>
 <li><del>Lemon</del><ins>Yellow</ins></li>
 <li>Olive</li>
 <li><ins>Purple</ins></li>
</ul>

4.7.6 編集と表

この節は非規範的です。

表モデルの一部を形成する要素には、ins要素およびdel要素を許可しない複雑なコンテンツモデル要件があるため、表への編集を示すことは困難な場合があります。

行全体または列全体が追加または削除されたことを示すには、その行または列の各セルの内容全体を、それぞれins要素またはdel要素で囲むことができます。

ここでは、表に行が追加されています：

<table>
 <thead>
  <tr> <th> Game name           <th> Game publisher   <th> Verdict
 <tbody>
  <tr> <td> Diablo 2            <td> Blizzard         <td> 8/10
  <tr> <td> Portal              <td> Valve            <td> 10/10
  <tr> <td> <ins>Portal 2</ins> <td> <ins>Valve</ins> <td> <ins>10/10</ins>
</table>

ここでは列が削除されています（削除された時刻と、その理由を説明するページへのリンクも示されています）：

<table>
 <thead>
  <tr> <th> Game name           <th> Game publisher   <th> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">Verdict</del>
 <tbody>
  <tr> <td> Diablo 2            <td> Blizzard         <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">8/10</del>
  <tr> <td> Portal              <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
  <tr> <td> Portal 2            <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
</table>

一般的に言えば、より複雑な編集（たとえば、セルが削除され、それ以降のすべてのセルが上または左へ移動したこと）を示す良い方法はありません。

4.8 埋め込みコンテンツ

4.8.1 `picture`要素

Element/picture

現在のすべてのエンジンでサポートされています。

Firefox38+Safari9.1+Chrome38+

Opera?Edge79+

Edge（旧版）13+Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLPictureElement

現在のすべてのエンジンでサポートされています。

Firefox38+Safari9.1+Chrome38+

Opera?Edge79+

Edge（旧版）13+Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

埋め込みコンテンツ。

埋め込みコンテンツが期待される場所。

0個以上のsource 要素と、それに続く1個のimg 要素。任意でスクリプト支援要素を混在させることができます。

text/htmlにおけるタグの省略：

どちらのタグも省略できません。

未分類。

[Exposed=Window]
interface HTMLPictureElement : HTMLElement {
  [HTMLConstructor] constructor();
};

picture要素は、その内部のimg要素に複数のソースを提供するコンテナーであり、画面のピクセル密度、ビューポートの大きさ、画像形式、その他の要因に基づいて、使用する画像リソースを作成者が宣言的に制御したり、ユーザーエージェントへヒントを与えたりできるようにします。これはその子を表します。

picture要素は、外見が似ている video要素およびaudio要素とは多少異なります。これらはすべてsource 要素を含みますが、source 要素のsrc属性は、要素がpicture要素内に入れ子にされている場合には意味を持たず、リソース選択アルゴリズムも異なります。また、picture要素自体は何も表示しません。これは単に、内部のimg要素が複数のURLから選択できるようにする文脈を提供するだけです。

4.8.2 `source`要素

Element/source

現在のすべてのエンジンでサポートされています。

Firefox3.5+Safari3.1+Chrome3+

Opera?Edge79+

Edge（旧版）12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLSourceElement

現在のすべてのエンジンでサポートされています。

Firefox3.5+Safari3.1+Chrome3+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

カテゴリー：

なし。

この要素を使用できる文脈：

picture要素の子として、 img要素より前。

メディア要素の子として、すべてのフローコンテンツまたは track要素より前。

コンテンツモデル：

なし。

text/htmlにおけるタグの省略：

終了タグはありません。

コンテンツ属性：

グローバル属性

type — 埋め込みリソースのタイプ

media — 適用可能なメディア

src（audioまたはvideo内）— リソースのアドレス

srcset（picture内）— さまざまな状況、たとえば高解像度ディスプレイ、小型モニターなどで使用する画像

sizes（picture内）— 異なるページレイアウトに対応する画像サイズ

width（picture内）— 水平寸法

height（picture内）— 垂直寸法

未分類。

[Exposed=Window]
interface HTMLSourceElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, ReflectURL] attribute USVString src;
  [CEReactions, Reflect] attribute DOMString type;
  [CEReactions, Reflect] attribute USVString srcset;
  [CEReactions, Reflect] attribute DOMString sizes;
  [CEReactions, Reflect] attribute DOMString media;
  [CEReactions, Reflect] attribute unsigned long width;
  [CEReactions, Reflect] attribute unsigned long height;
};

source要素を使用すると、作成者はimg要素に対して複数の代替ソース集合を指定したり、メディア要素に対して複数の代替メディアリソースを指定したりできます。これは単独では何も表しません。

type属性を指定してもかまいません。指定する場合、その値は妥当なMIMEタイプ文字列でなければなりません。

media 属性も指定してもかまいません。指定する場合、その値には妥当なメディアクエリーリストを含めなければなりません。値が環境に一致しない場合、ユーザーエージェントは次のsource要素へ進みます。

media 属性は、メディア要素のリソース選択アルゴリズム中に一度だけ評価されます。これに対して、picture要素を使用する場合、ユーザーエージェントは環境の変化に反応します。

残りの要件は、親がpicture 要素であるか、メディア要素であるかに依存します：

source要素の親がpicture 要素である場合

srcset 属性は存在しなければならず、これはsrcset 属性です。

srcset 属性は、source要素が選択された場合、画像ソースをソース集合に提供します。

srcset 属性に、幅記述子を使用する画像候補文字列が含まれている場合、sizes属性も指定してもかまいません。さらに、後続の兄弟であるimg 要素が自動サイズを許可しない場合、sizes属性は存在しなければなりません。 sizes 属性はsizes属性であり、source要素が選択された場合、ソースサイズをソース集合に提供します。

img 要素が自動サイズを許可する場合、それより前の兄弟である source要素では sizes属性を省略できます。この場合、autoを指定することと同等です。

source要素は寸法属性をサポートします。 img要素は、自身のimg要素上の属性の代わりに、source要素の width属性およびheight属性を使用して、レンダリングされる寸法およびアスペクト比を決定できます。これはレンダリングの節で定義されているとおりです。

type属性は、ソース集合内の画像のタイプを示し、ユーザーエージェントが指定されたタイプをサポートしていない場合に、次のsource要素へ進めるようにします。

type属性が指定されていない場合、ユーザーエージェントは、画像をフェッチした後でその画像形式をサポートしていないことが判明しても、別のsource要素を選択しません。

source 要素に、後続の兄弟であるsource要素または img要素があり、その要素にsrcset属性が指定されている場合、少なくとも次のいずれかを持たなければなりません：

media属性が指定されており、その値が先頭および末尾の ASCII空白を除去した後に空文字列ではなく、かつ文字列「all」とASCII 大文字小文字不区別で一致しないこと。
type属性が指定されていること。

src属性は存在してはなりません。

source 要素の親がメディア要素である場合

src 属性は、メディアリソースのURLを示します。その値は空白で囲まれている可能性がある妥当な空でないURLでなければなりません。この属性は存在しなければなりません。

type属性は、メディアリソースのタイプを示し、ユーザーエージェントがフェッチする前にこのメディアリソースを再生できるかどうかを判断する助けになります。特定のMIMEタイプで定義される codecsパラメーターは、リソースがどのようにエンコードされているかを正確に指定するために必要となる場合があります。 [RFC6381]

source要素がすでにvideo要素またはaudio要素に挿入されているときに、そのsrc属性またはtype属性を動的に変更しても効果はありません。再生対象を変更するには、メディア要素上のsrc属性を直接使用してください。利用可能なリソースから選択するために、canPlayType() メソッドを使用してもかまいません。一般に、文書が解析された後でsource要素を手動で操作することは、不必要に複雑な方法です。

次の一覧は、type属性でcodecs=MIME パラメーターを使用する方法の例を示しています。

MP4コンテナー内のH.264制約付きベースラインプロファイル動画（メインおよび拡張動画と互換）レベル3と低複雑度AAC音声

<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

MP4コンテナー内のH.264拡張プロファイル動画（ベースライン互換）レベル3と低複雑度AAC音声

<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>

MP4コンテナー内のH.264メインプロファイル動画レベル3と低複雑度AAC音声

<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>

MP4コンテナー内のH.264「High」プロファイル動画（メイン、ベースライン、拡張プロファイルとは非互換）レベル3と低複雑度AAC音声

<source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>

MP4コンテナー内のMPEG-4 Visual Simple Profile Level 0動画と低複雑度AAC音声

<source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>

MP4コンテナー内のMPEG-4 Advanced Simple Profile Level 0動画と低複雑度AAC音声

<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>

3GPPコンテナー内のMPEG-4 Visual Simple Profile Level 0動画とAMR音声

<source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>

Oggコンテナー内のTheora動画とVorbis音声

<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>

Oggコンテナー内のTheora動画とSpeex音声

<source src='video.ogv' type='video/ogg; codecs="theora, speex"'>

Oggコンテナー内のVorbis音声のみ

<source src='audio.ogg' type='audio/ogg; codecs=vorbis'>

Oggコンテナー内のSpeex音声のみ

<source src='audio.spx' type='audio/ogg; codecs=speex'>

Oggコンテナー内のFLAC音声のみ

<source src='audio.oga' type='audio/ogg; codecs=flac'>

Oggコンテナー内のDirac動画とVorbis音声

<source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>

srcset属性および sizes属性は存在してはなりません。

sourceのHTML要素挿入手順は、 insertedNodeが与えられたとき、次のとおりです：

parentをinsertedNodeの親とします。
parentが、src属性を持たず、かつその networkStateの値がNETWORK_EMPTY であるメディア要素の場合、そのメディア要素のリソース選択アルゴリズムを呼び出します。
parentがpicture要素の場合、 parentの子のchildごとに反復し、childがimg要素である場合、これをchildに対する関連する変異として数えます。

sourceのHTML要素移動手順は、movedNode、 isSubtreeRoot、およびoldAncestorが与えられたとき、次のとおりです：

isSubtreeRootがtrueで、oldAncestorがpicture 要素の場合、oldAncestorの子の childごとに反復します：childが img要素である場合、これをchildに対する関連する変異として数えます。

sourceのHTML要素削除手順は、 removedNode、isSubtreeRoot、およびoldAncestorが与えられたとき、次のとおりです：

isSubtreeRootがtrueで、oldAncestorがpicture 要素の場合、oldAncestorの子の childごとに反復します：childが img要素である場合、これをchildに対する関連する変異として数えます。

提供されたメディアリソースをすべてのユーザーエージェントがレンダリングできるかどうか作成者が確信できない場合、最後のsource要素上の errorイベントを待ち受けて、フォールバック動作を起動できます：

<script>
 function fallback(video) {
   // replace <video> with its contents
   while (video.hasChildNodes()) {
     if (video.firstChild instanceof HTMLSourceElement)
       video.removeChild(video.firstChild);
     else
       video.parentNode.insertBefore(video.firstChild, video);
   }
   video.parentNode.removeChild(video);
 }
</script>
<video controls autoplay>
 <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
         onerror="fallback(parentNode)">
 ...
</video>

4.8.3 `img` 要素

Element/img

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLImageElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari1+Chrome1+

Opera8+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

HTMLImageElement/alt

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLImageElement/srcset

現在のすべてのエンジンでサポートされています。

Firefox38+Safari8+Chrome34+

Opera?Edge79+

Edge（旧版）12+Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLImageElement/sizes

現在のすべてのエンジンでサポートされています。

Firefox38+Safari9.1+Chrome38+

Opera?Edge79+

Edge（旧版）13+Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLImageElement/useMap

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLImageElement/isMap

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

フォーム関連要素。

要素がusemap属性またはcontrols属性を持つ場合：インタラクティブコンテンツ。

知覚可能コンテンツ。

この要素を使用できる文脈：

埋め込みコンテンツが期待される場所。

picture要素の子として、すべてのsource要素の後。

コンテンツモデル：

なし。

text/htmlにおけるタグの省略：

終了タグはありません。

コンテンツ属性：

グローバル属性

alt — 画像が利用できない場合に使用する代替テキスト

src — リソースのアドレス

srcset — さまざまな状況、たとえば高解像度ディスプレイ、小型モニターなどで使用する画像

sizes — 異なるページレイアウトに対応する画像サイズ

crossorigin — 要素がクロスオリジン要求をどのように処理するか

usemap — 使用するイメージマップの名前

ismap — 画像がサーバー側イメージマップであるかどうか

controls — ユーザーエージェントのコントロールを表示

width — 水平寸法

height — 垂直寸法

referrerpolicy — 要素によって開始されるフェッチのリファラーポリシー

decoding — この画像を表示用に処理するときに使用するデコードのヒント

loading — 読み込みの延期を決定するときに使用

fetchpriority — 要素によって開始されるフェッチの優先度を設定

アクセシビリティ上の考慮事項：

要素が空でないalt 属性を持つ場合：作成者向け；実装者向け。

それ以外の場合：作成者向け；実装者向け。

サニタイズ：

未分類。

DOMインターフェース：

[Exposed=Window,
 LegacyFactoryFunction=Image(optional unsigned long width, optional unsigned long height)]
interface HTMLImageElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute DOMString alt;
  [CEReactions, ReflectURL] attribute USVString src;
  [CEReactions, Reflect] attribute USVString srcset;
  [CEReactions, Reflect] attribute DOMString sizes;
  [CEReactions] attribute DOMString? crossOrigin;
  [CEReactions, Reflect] attribute DOMString useMap;
  [CEReactions, Reflect] attribute boolean isMap;
  [CEReactions, Reflect] attribute boolean controls;
  [CEReactions, ReflectSetter] attribute unsigned long width;
  [CEReactions, ReflectSetter] attribute unsigned long height;
  readonly attribute unsigned long naturalWidth;
  readonly attribute unsigned long naturalHeight;
  readonly attribute boolean complete;
  readonly attribute USVString currentSrc;
  [CEReactions] attribute DOMString referrerPolicy;
  [CEReactions] attribute DOMString decoding;
  [CEReactions] attribute DOMString loading;
  [CEReactions] attribute DOMString fetchPriority;

  Promise<undefined> decode();

  // also has obsolete members
};

img要素は画像を表します。

img要素には寸法属性ソースがあり、初期値は要素自身です。

HTMLImageElement/src

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

Element/img#attr-srcset

現在のすべてのエンジンでサポートされています。

Firefox38+Safari8+Chrome34+

Opera?Edge79+

Edge（旧版）≤18+Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

src属性およびsrcset属性によって指定される画像と、親がpicture要素である場合に、それ以前の兄弟であるすべてのsource要素のsrcset属性によって指定される画像が埋め込みコンテンツです。alt属性の値は、画像を処理できない人、または画像の読み込みを無効にしている人のために同等のコンテンツを提供します（すなわち、これはimg要素のフォールバックコンテンツです）。

alt 属性の値に関する要件は、別の節で説明されています。

src属性およびsrcset属性の少なくとも一方は存在しなければなりません。

src属性が存在する場合、その値には、ページ化もスクリプト化もされていない、非インタラクティブで任意にアニメーション化された画像リソースを参照する空白で囲まれている可能性がある妥当な空でないURLを含めなければなりません。

上記の要件は、画像が静的ビットマップ（たとえばPNG、GIF、 JPEG）、単一ページのベクター文書（単一ページPDF、SVG文書要素を持つXMLファイル）、アニメーションビットマップ（APNG、アニメーションGIF）、アニメーションベクターグラフィックス（宣言的SMILアニメーションを使用するSVG文書要素を持つXMLファイル）などであり得ることを意味します。ただし、これらの定義は、スクリプトを含むSVGファイル、複数ページPDFファイル、インタラクティブMNGファイル、HTML 文書、プレーンテキスト文書などを除外します。[PNG] [GIF] [JPEG] [PDF] [XML] [APNG] [SVG] [MNG]

srcset属性はsrcset 属性です。

srcset属性および src属性（幅記述子が使用されていない場合）は、source要素が選択されなかった場合に、画像ソースをソース集合に提供します。

srcset属性が存在し、幅記述子を使用する画像候補文字列が含まれている場合、sizes属性も存在しなければなりません。 srcset属性が指定されておらず、かつ loading属性が遅延状態である場合、sizes属性に値「auto」（ASCII 大文字小文字不区別）を指定してもかまいません。sizes属性はsizes属性であり、source要素が選択されなかった場合に、ソースサイズをソース集合に提供します。

img要素が自動サイズを許可するのは、次の場合です：

そのloading属性が遅延状態であり、かつ
そのsizes属性の値が「auto」（ASCII 大文字小文字不区別）であるか、「auto,」で始まる（ASCII 大文字小文字不区別）場合。

Attributes/crossorigin

現在のすべてのエンジンでサポートされています。

Firefox8+Safari6+Chrome13+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

crossorigin 属性はCORS設定属性です。その目的は、クロスオリジンアクセスを許可する第三者サイトの画像をcanvasとともに使用できるようにすることです。

referrerpolicy属性はリファラーポリシー属性です。その目的は、画像をフェッチするときに使用されるリファラーポリシーを設定することです。[REFERRERPOLICY]

decoding 属性は、この画像をデコードする望ましい方法を示します。この属性が存在する場合、画像デコードのヒントでなければなりません。この属性の欠損値のデフォルトおよび無効値のデフォルトは、いずれも自動状態です。

HTMLImageElement/fetchPriority

FirefoxいいえSafari🔰 preview+Chrome102+

Opera?Edge102+

Edge（旧版）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

fetchpriority属性はフェッチ優先度属性です。その目的は、画像をフェッチするときに使用される優先度を設定することです。

loading属性は遅延読み込み属性です。その目的は、ビューポート外にある画像を読み込むためのポリシーを示すことです。

loading属性の状態が即時状態に変更されたとき、ユーザーエージェントは次の手順を実行しなければなりません：

resumptionStepsをimg要素の遅延読み込み再開手順とします。
resumptionStepsがnullの場合、戻ります。
imgの遅延読み込み再開手順をnullに設定します。
resumptionStepsを呼び出します。

<img src="1.jpeg" alt="1">
<img src="2.jpeg" loading=eager alt="2">
<img src="3.jpeg" loading=lazy alt="3">
<div id=very-large></div> <!-- Everything after this div is below the viewport -->
<img src="4.jpeg" alt="4">
<img src="5.jpeg" loading=lazy alt="5">

上記の例では、画像は次のように読み込まれます：

1.jpeg、2.jpeg、 4.jpeg: 画像は即時に読み込まれ、ウィンドウのloadイベントを遅延させます。
3.jpeg: 画像はビューポート内にあるため、レイアウトが判明したときに読み込まれますが、ウィンドウのloadイベントを遅延させません。
5.jpeg: 画像はビューポート内へスクロールされたときにのみ読み込まれ、ウィンドウの loadイベントを遅延させません。

CSSが画像の幅と高さのプロパティを設定する場合でも、画像の読み込み後にページレイアウトがずれるのを防ぐため、開発者には、遅延読み込みされる画像上のwidth属性およびheight属性を介して、望ましいアスペクト比を指定することが推奨されます。

imgのHTML要素挿入手順は、insertedNodeが与えられたとき、次のとおりです：

insertedNodeの親がpicture要素の場合、これをinsertedNodeに対する関連する変異として数えます。

imgのHTML要素移動手順は、 movedNode、 isSubtreeRoot、およびoldAncestorが与えられたとき、次のとおりです：

isSubtreeRootがtrueで、oldAncestorがpicture 要素の場合、これをmovedNodeに対する関連する変異として数えます。

imgのHTML要素削除手順は、removedNode、 oldAncestor、およびisSubtreeRootが与えられたとき、次のとおりです：

isSubtreeRootがtrueで、oldAncestorがpicture 要素の場合、これをremovedNodeに対する関連する変異として数えます。

img要素をレイアウト用の道具として使用してはなりません。特に、img 要素を透明画像の表示に使用するべきではありません。そのような画像は意味を伝えることがほとんどなく、文書に有用なものを追加することもほとんどないためです。

img要素が何を表すかは、src 属性およびalt 属性に依存します。

src属性が設定され、 alt属性が空文字列に設定されている場合

画像は装飾的であるか、残りのコンテンツを補足するものであり、文書内の他の情報と重複しています。

画像が利用可能で、ユーザーエージェントがその画像を表示するよう設定されている場合、要素は要素の画像データを表します。

それ以外の場合、要素は何も表さず、レンダリングから完全に省略してもかまいません。ユーザーエージェントは、画像が存在するもののレンダリングから省略されたことをユーザーへ通知してもかまいません。

src属性が設定され、 alt属性が空でない値に設定されている場合

画像はコンテンツの重要な部分です。alt属性は、画像と同等のテキストまたは画像の代替を示します。

画像が利用可能で、ユーザーエージェントがその画像を表示するよう設定されている場合、要素は要素の画像データを表します。

それ以外の場合、要素はalt属性によって与えられるテキストを表します。ユーザーエージェントは、画像が存在するもののレンダリングから省略されたことをユーザーへ通知してもかまいません。

src属性が設定され、 alt属性が設定されていない場合

画像はコンテンツの重要な部分である可能性がありますが、利用可能な画像のテキストによる同等物はありません。

適合文書では、alt属性が存在しないことは、画像がコンテンツの重要な部分であるものの、画像が生成された時点では画像の代替テキストが利用できなかったことを示します。

画像が利用可能で、ユーザーエージェントがその画像を表示するよう設定されている場合、要素は要素の画像データを表します。

画像に、値が空文字列であるsrc属性がある場合、要素は何も表しません。

それ以外の場合、ユーザーエージェントは、レンダリングされていない画像が存在することを示す何らかの標識を表示するべきであり、ユーザーから要求された場合、そうするよう設定されている場合、またはナビゲーションに応じて文脈情報を提供する必要がある場合には、次のように導出される画像のキャプション情報を提供してもかまいません：

画像に、値が空文字列でないtitle属性がある場合、その属性の値を返します。
画像が、子としてfigcaption 要素を持つfigure要素の子孫であり、 figcaption 要素およびその子孫を無視したとき、figure要素に、要素間空白およびimg要素以外のフローコンテンツの子孫がない場合、そのような最初のfigcaption 要素の内容を返します。
何も返しません。（キャプション情報はありません。）

src属性が設定されておらず、alt属性が空文字列に設定されているか、alt属性がまったく設定されていない場合

要素は何も表しません。

それ以外の場合

要素はalt属性によって与えられるテキストを表します。

alt属性は助言的情報を表しません。ユーザーエージェントは、alt属性の内容を、 title属性の内容と同じ方法で提示してはなりません。

ユーザーエージェントは、任意の画像を表示するか、任意の画像が表示されないようにする選択肢を、常にユーザーへ提供してもかまいません。また、視覚障害があるため、またはグラフィックス機能のないテキスト端末を使用しているためなど、ユーザーが画像を見ることができない場合に、ユーザーが画像を利用できるようにするためのヒューリスティックを適用してもかまいません。そのようなヒューリスティックには、たとえば画像内で見つかったテキストの光学文字認識（OCR）が含まれる場合があります。

ユーザーエージェントには、alt属性が欠落している場合を修復することが推奨されますが、作成者はそのような動作に依存してはなりません。画像の代替として機能するテキストを提供するための要件は、以下で詳しく説明されています。

img 要素の内容は、存在する場合でも、レンダリングの目的では無視されます。

usemap 属性が存在する場合、画像に関連付けられたイメージマップがあることを示せます。

ismap属性は、 href属性を持つ a要素の子孫である要素上で使用された場合、その存在によって、要素がサーバー側イメージマップへのアクセスを提供することを示します。これは、対応するa要素上でイベントがどのように処理されるかに影響します。

ismap属性はブール属性です。この属性は、 href属性を持つ祖先のa要素がない要素に指定してはなりません。

usemap属性およびismap属性を、 picture要素内で media属性が指定された source要素とともに使用すると、混乱を招く動作になる可能性があります。

controls 属性はブール属性です。存在する場合、ユーザーエージェントがユーザーインターフェースをユーザーへ公開してもよいことを示します。この属性は、alt属性を持たない要素、または alt属性の値が空文字列である要素に指定してはなりません。

controls属性が存在する場合、ユーザーエージェントは画像に対するコントロール（たとえば、全画面表示用のコントロール）を公開してもかまいません。提供される具体的なコントロールは実装定義であり、プラットフォーム固有であるか、ユーザーの設定に基づく場合があります。

ユーザーエージェントがimg 要素上にコントロールを表示することによってユーザーインターフェースを公開する場合、ユーザーエージェントがそのインターフェースと対話している間、ユーザー操作イベントを抑制するべきです。

Issue #12318では、画像コントロールとアニメーション画像との相互作用を追跡しています。そのissueが解決されるまで、ユーザーエージェントは画像のアニメーションコントロールを公開するべきではありません。

img要素は寸法属性をサポートします。

HTMLImageElement/crossOrigin

現在のすべてのエンジンでサポートされています。

Firefox8+Safari6+Chrome13+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer11

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

crossOrigin IDL属性は、crossorigin コンテンツ属性を、既知の値のみに制限して反映しなければなりません。

HTMLImageElement/referrerPolicy

現在のすべてのエンジンでサポートされています。

Firefox50+Safari14+Chrome52+

Opera?Edge79+

Edge（旧版）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

referrerPolicy IDL属性は、referrerpolicy コンテンツ属性を、既知の値のみに制限して反映しなければなりません。

HTMLImageElement/decoding

現在のすべてのエンジンでサポートされています。

Firefox63+Safari11.1+Chrome65+

Opera?Edge79+

Edge（旧版）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

SVGImageElement/decoding

Firefox63+SafariいいえChrome65+

Opera?Edge79+

Edge（旧版）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

decoding IDL属性は、decoding コンテンツ属性を、既知の値のみに制限して反映しなければなりません。

HTMLImageElement/loading

現在のすべてのエンジンでサポートされています。

Firefox75+Safari15.4+Chrome77+

Opera?Edge79+

Edge（旧版）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

loading IDL属性は、loadingコンテンツ属性を、既知の値のみに制限して反映しなければなりません。

fetchPriority IDL属性は、fetchpriority コンテンツ属性を、既知の値のみに制限して反映しなければなりません。

image.width [ = value ] HTMLImageElement/width 現在のすべてのエンジンでサポートされています。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge（旧版）12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

image.height [ = value ] HTMLImageElement/height 現在のすべてのエンジンでサポートされています。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge（旧版）12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

これらの属性は、画像の実際にレンダリングされた寸法を返します。寸法が不明な場合は0を返します。

対応するコンテンツ属性を変更するために、これらを設定できます。

image.naturalWidth HTMLImageElement/naturalWidth 現在のすべてのエンジンでサポートされています。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge（旧版）12+Internet Explorer9+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

image.naturalHeight HTMLImageElement/naturalHeight 現在のすべてのエンジンでサポートされています。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge（旧版）12+Internet Explorer9+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

これらの属性は、画像の密度補正済みの自然な幅と高さを返します。画像が利用可能でない場合は0を返します。

image.complete HTMLImageElement/complete 現在のすべてのエンジンでサポートされています。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge（旧版）12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

画像が完全にダウンロード済みであるか、画像が指定されていない場合はtrueを返します。それ以外の場合はfalseを返します。

image.currentSrc HTMLImageElement/currentSrc 現在のすべてのエンジンでサポートされています。 Firefox38+Safari9.1+Chrome38+ Opera?Edge79+ Edge（旧版）13+Internet Explorerいいえ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

画像の絶対URLを返します。

image.decode() HTMLImageElement/decode 現在のすべてのエンジンでサポートされています。 Firefox68+Safari11.1+Chrome64+ Opera?Edge79+ Edge（旧版）?Internet Explorerいいえ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? SVGImageElement/decode Firefox68+SafariいいえChrome64+ Opera?Edge79+ Edge（旧版）?Internet Explorerいいえ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

このメソッドは、ユーザーエージェントに画像を並行してデコードさせ、デコードが完了すると履行されるpromiseを返します。

画像をデコードできない場合、promiseは「EncodingError」 DOMException で拒否されます。

image = new Image([ width [, height ] ]) HTMLImageElement/Image 現在のすべてのエンジンでサポートされています。 Firefox1+Safari1+Chrome1+ Opera8+Edge79+ Edge（旧版）12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

新しいimg要素を返します。該当する場合、そのwidth属性およびheight属性は、対応する引数で渡された値に設定されます。

img要素 imageの寸法を決定するには：

imageがレンダリングされている場合、そのレンダリングされた幅および高さをCSSピクセル単位で返します。[CSS]
imageが利用可能で、密度補正済みの自然な幅と高さを持つ場合、その密度補正済みの自然な幅と高さをCSS ピクセル単位で返します。
幅0、高さ0を返します。

width の取得手順は、thisの寸法の幅を返します。

height の取得手順は、thisの寸法の高さを返します。

naturalWidthおよびnaturalHeightの取得手順は次のとおりです：

画像が利用可能でない場合、 0を返します。
画像の密度補正済みの自然な幅と高さの対応する成分を、CSSピクセル単位で返します。[CSS]

画像の密度補正済みの自然な幅と高さは、そのメタデータで指定された向きを考慮するため、naturalWidthおよび naturalHeightは、 'image-orientation'プロパティの値に関係なく、画像を正しく配向するために必要な回転を適用した後の寸法を反映します。

completeの取得手順は次のとおりです：

次のいずれかがtrueの場合：
- src属性および srcset属性の両方が省略されている；
- srcset属性が省略され、src 属性の値が空文字列である；
- img要素の現在の要求の状態が完全に利用可能であり、その保留中の要求がnullである；または
- img要素の現在の要求の状態が壊れているであり、その保留中の要求がnullである。
trueを返します。
falseを返します。

currentSrc IDL属性は、img要素の現在の要求の現在の URLを返さなければなりません。

decode() メソッドは、呼び出されたとき、次の手順を実行しなければなりません：

promiseを新しいpromiseとします。
次の手順を実行するマイクロタスクをキューに追加します：
これは、画像データの更新もマイクロタスク内で行われるためです。したがって、次のようなコードで
```
img.src = "stars.jpg";
img.decode();
```
stars.jpgを正しくデコードするには、すべての処理を1つのマイクロタスク分遅延させる必要があります。
1. globalをthisの関連するグローバルオブジェクトとします。
2. 次のいずれかがtrueの場合：
  - thisのノード文書が完全にアクティブでない；または
  - thisの現在の要求の状態が壊れているである。
  promiseを「EncodingError」 DOMException で拒否します。
3. それ以外の場合、並行して、次のいずれかが発生するまで待ち、対応する処理を実行します：
  
  このimg要素のノード文書が完全にアクティブでなくなる
  
  このimg要素の現在の要求が変更または変異する
  
  このimg要素の現在の要求の状態が壊れているになる
  
  globalを用いて、DOM操作タスクソース上に、 promiseを「EncodingError」 DOMException で拒否するグローバルタスクをキューに追加します。
  
  このimg要素の現在の要求の状態が完全に利用可能になる
  
  画像をデコードします。
  
  この画像についてデコードを実行する必要がない場合（たとえばベクターグラフィックスであるため）、またはデコード処理が正常に完了した場合、globalを用いてDOM操作タスクソース上に、 promiseをundefinedで解決するグローバルタスクをキューに追加します。
  
  デコードが失敗した場合（たとえば画像データが無効であるため）、globalを用いて DOM操作タスクソース上に、 promiseを「EncodingError」 DOMException で拒否するグローバルタスクをキューに追加します。
  
  ユーザーエージェントは、少なくともイベントループ内の次の成功したレンダリングを更新する手順の終了時までは、デコード済みのメディアデータが容易に利用可能な状態を維持するべきです。これはAPI契約の重要な部分であり、可能な限り破られるべきではありません。（通常、これに違反するのは、デコード済み画像データを破棄する必要がある低メモリー状況、またはこの期間中デコード済み形式で保持するには画像が大きすぎる場合だけです。）
  
  アニメーション画像は、すべてのフレームが読み込まれた後にのみ完全に利用可能になります。したがって、実装がその時点より前に最初のフレームをデコードできる場合でも、上記の手順はそうせず、代わりにすべてのフレームが利用可能になるまで待ちます。
promiseを返します。

decode()メソッドを使用しない場合、img要素を読み込んでから表示する処理は、次のようになります：

const img = new Image();
img.src = "nebula.jpg";
img.onload = () => {
    document.body.appendChild(img);
};
img.onerror = () => {
    document.body.appendChild(new Text("Could not load the nebula :("));
};

ただし、画像をDOMへ挿入した後に行われる描画によってメインスレッド上で同期デコードが発生するため、これは目立つフレーム落ちを引き起こす可能性があります。

代わりに、decode() メソッドを使用して次のように書き換えられます：

const img = new Image();
img.src = "nebula.jpg";
img.decode().then(() => {
    document.body.appendChild(img);
}).catch(() => {
    document.body.appendChild(new Text("Could not load the nebula :("));
});

後者の形式では、ユーザーエージェントが画像を並行してデコードし、デコード処理が完了してから初めて DOMへ挿入する（したがって描画させる）ことができるため、元の形式で生じるフレーム落ちを回避できます。

decode()メソッドは、デコード済み画像データが少なくとも1フレーム分利用可能であることを保証しようとするため、requestAnimationFrame() APIと組み合わせることができます。これは、すべてのDOM変更がアニメーションフレームコールバックとしてまとめて処理されることを保証するコーディングスタイルまたはフレームワークとともに使用できることを意味します：

const container = document.querySelector("#container");

const { containerWidth, containerHeight } = computeDesiredSize();
requestAnimationFrame(() => {
 container.style.width = containerWidth;
 container.style.height = containerHeight;
});

// ...

const img = new Image();
img.src = "supernova.jpg";
img.decode().then(() => {
    requestAnimationFrame(() => container.appendChild(img));
});

HTMLImageElementオブジェクトを作成するために、DOMのcreateElement()などのファクトリーメソッドに加えて、レガシーファクトリー関数Image(width, height)が提供されます。呼び出されたとき、レガシーファクトリー関数は次の手順を実行しなければなりません：

documentを現在のグローバルオブジェクトの関連付けられたDocumentとします。
imgを、document、「img」、およびHTML 名前空間を与えて要素を作成した結果とします。
widthが与えられている場合、「width」および widthを使用して、imgの属性値を設定します。
heightが与えられている場合、「height」および heightを使用して、imgの属性値を設定します。
imgを返します。

単一の画像でも、文脈に応じて適切な代替テキストが異なる場合があります。

次の各場合では同じ画像が使用されていますが、altテキストは毎回異なります。この画像は、スイスのジュネーヴ州にあるカルージュ自治体の紋章です。

ここでは補助的なアイコンとして使用されています：

<p>I lived in <img src="carouge.svg" alt=""> Carouge.</p>

ここでは町を表すアイコンとして使用されています：

<p>Home town: <img src="carouge.svg" alt="Carouge"></p>

ここでは町についての文章の一部として使用されています：

<p>Carouge has a coat of arms.</p>
<p><img src="carouge.svg" alt="The coat of arms depicts a lion, sitting in front of a tree."></p>
<p>It is used as decoration all over the town.</p>

ここでは、説明が画像の代替としてではなく画像とともに提供されている、類似の文章を補助する方法として使用されています：

<p>Carouge has a coat of arms.</p>
<p><img src="carouge.svg" alt=""></p>
<p>The coat of arms depicts a lion, sitting in front of a tree.
It is used as decoration all over the town.</p>

ここでは物語の一部として使用されています：

<p>She picked up the folder and a piece of paper fell out.</p>
<p><img src="carouge.svg" alt="Shaped like a shield, the paper had a
red background, a green tree, and a yellow lion with its tongue
hanging out and whose tail was shaped like an S."></p>
<p>She stared at the folder. S! The answer she had been looking for all
this time was simply the letter S! How had she not seen that before? It all
came together now. The phone call where Hector had referred to a lion's tail,
the time Maria had stuck her tongue out...</p>

ここでは、公開時点では画像が何になるかは不明で、何らかの紋章になることだけが分かっています。そのため代替テキストを提供できず、代わりに画像の短いキャプションだけがtitle属性で提供されています：

<p>The last user to have uploaded a coat of arms uploaded this one:</p>
<p><img src="last-uploaded-coat-of-arms.cgi" title="User-uploaded coat of arms."></p>

理想的には、この場合でも、たとえば前のユーザーに尋ねることによって、作成者は実際の代替テキストを提供する方法を見つけるでしょう。代替テキストを提供しないと、画像を見ることができない人、たとえば盲目のユーザー、非常に低帯域幅の接続を使用するユーザー、バイト単位で料金を支払うユーザー、またはテキスト専用ウェブブラウザーを使用せざるを得ないユーザーにとって、文書が利用しにくくなります。

次に、同じ画像を異なる文脈で使用し、その都度適切な代替テキストが異なる例をさらに示します。

<article>
 <h1>My cats</h1>
 <h2>Fluffy</h2>
 <p>Fluffy is my favorite.</p>
 <img src="fluffy.jpg" alt="She likes playing with a ball of yarn.">
 <p>She's just too cute.</p>
 <h2>Miles</h2>
 <p>My other cat, Miles just eats and sleeps.</p>
</article>

<article>
 <h1>Photography</h1>
 <h2>Shooting moving targets indoors</h2>
 <p>The trick here is to know how to anticipate; to know at what speed and
 what distance the subject will pass by.</p>
 <img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be
 photographed quite nicely using this technique.">
 <h2>Nature by night</h2>
 <p>To achieve this, you'll need either an extremely sensitive film, or
 immense flash lights.</p>
</article>

<article>
 <h1>About me</h1>
 <h2>My pets</h2>
 <p>I've got a cat named Fluffy and a dog named Miles.</p>
 <img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy.">
 <p>My dog Miles and I like go on long walks together.</p>
 <h2>music</h2>
 <p>After our walks, having emptied my mind, I like listening to Bach.</p>
</article>

<article>
 <h1>Fluffy and the Yarn</h1>
 <p>Fluffy was a cat who liked to play with yarn. She also liked to jump.</p>
 <aside><img src="fluffy.jpg" alt="" title="Fluffy"></aside>
 <p>She would play in the morning, she would play in the evening.</p>
</article>

4.8.4 画像

4.8.4.1 はじめに

この節は非規範的です。

単一の画像リソースしかない場合にHTMLへ画像を埋め込むには、img 要素とそのsrc属性を使用します。

<h2>From today's featured article</h2>
<img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
was an English <a href="/wiki/Music_hall">music hall</a> singer, ...

ただし、作成者がユーザーエージェントによる選択が可能な複数の画像リソースを使用したいと考える状況がいくつかあります：

ユーザーごとに異なる環境特性を持つ可能性があります：
- ユーザーの物理的な画面サイズが互いに異なる可能性があります。
  
  携帯電話の画面は対角4インチである一方、ノートパソコンの画面は対角14インチである可能性があります。
  
  これは、画像のレンダリングサイズがビューポートのサイズに依存する場合にのみ関係します。
- ユーザーの画面ピクセル密度が互いに異なる可能性があります。
  
  物理的な画面サイズに関係なく、ある携帯電話の画面は、別の携帯電話の画面と比較して 1インチ当たり3倍の物理ピクセルを持つ可能性があります。
- ユーザーのズームレベルが互いに異なる可能性、または単一のユーザーについて時間の経過とともに変化する可能性があります。
  
  ユーザーは、より詳細に見るために特定の画像を拡大する可能性があります。
  
  ズームレベルと画面ピクセル密度（前項）は、いずれもCSSピクセル当たりの物理画面ピクセル数に影響する可能性があります。この比率は通常、デバイスピクセル比と呼ばれます。
- ユーザーの画面の向きが互いに異なる可能性、または単一のユーザーについて時間の経過とともに変化する可能性があります。
  
  タブレットは直立させて持つことも、90度回転させて持つこともできるため、画面は「縦向き」または「横向き」になります。
- ユーザーのネットワーク速度、ネットワーク遅延、および帯域幅コストが互いに異なる可能性、または単一のユーザーについて時間の経過とともに変化する可能性があります。
  
  ユーザーは、職場では高速、低遅延、定額の接続を使用し、自宅では低速、低遅延、定額の接続を使用し、それ以外の場所では速度可変、高遅延、従量制の接続を使用する可能性があります。
作成者は、通常はビューポートの幅に応じて、同じ画像内容を異なるレンダリングサイズで表示したい場合があります。これは通常、ビューポートに基づく選択と呼ばれます。

ウェブページの上部に、常にビューポート全体の幅にわたるバナーがある可能性があります。この場合、画像のレンダリングサイズは画面の物理的なサイズに依存します（ブラウザーウィンドウが最大化されているものと仮定します）。

別のウェブページでは、小さい物理サイズの画面には1列、中程度の物理サイズの画面には2列、大きい物理サイズの画面には3列で画像を配置し、それぞれの場合に画像のレンダリングサイズを変えてビューポートを埋める可能性があります。この場合、画面が小さいにもかかわらず、1列レイアウトの画像のレンダリングサイズが2列レイアウトと比較して 大きくなる可能性があります。
作成者は、画像のレンダリングサイズに応じて異なる画像内容を表示したい場合があります。これは通常、アートディレクションと呼ばれます。

ウェブページが物理サイズの大きい画面で表示される場合（ブラウザーウィンドウが最大化されているものと仮定します）、作成者は画像の重要な部分を囲む、それほど重要でない部分も含めたいと考える可能性があります。同じウェブページが物理サイズの小さい画面で表示される場合、作成者は画像の重要な部分のみを表示したいと考える可能性があります。
作成者は、ユーザーエージェントがどの画像形式をサポートするかに応じて、同じ画像内容を異なる画像形式で表示したい場合があります。これは通常、画像形式に基づく選択と呼ばれます。

ウェブページには、JPEG、WebP、およびJPEG XRの画像形式による画像があり、後者2つはJPEGと比較して優れた圧縮能力を持つ可能性があります。異なるユーザーエージェントは異なる画像形式をサポートでき、一部の形式はより優れた圧縮率を提供するため、作成者はそれらをサポートするユーザーエージェントにはより優れた形式を提供し、サポートしないユーザーエージェントには JPEGによるフォールバックを提供したいと考えます。

上記の状況は相互に排他的ではありません。たとえば、異なるデバイスピクセル比用の異なるリソースと、アートディレクション用の異なるリソースを組み合わせることは合理的です。

スクリプトを使用してこれらの問題を解決することは可能ですが、そうすると別の問題が生じます：

一部のユーザーエージェントは、ウェブページの読み込みをより早く完了させるため、スクリプトを実行できるようになる前にHTMLマークアップで指定された画像を積極的にダウンロードします。スクリプトがダウンロードする画像を変更すると、ユーザーエージェントは2つの別々のダウンロードを開始する可能性があり、かえってページの読み込み性能を悪化させる可能性があります。
作成者がHTMLマークアップで画像をまったく指定せず、代わりにスクリプトから単一のダウンロードを開始する場合、上記の二重ダウンロードの問題は回避されますが、スクリプトを無効にしているユーザーには画像がまったくダウンロードされず、積極的な画像ダウンロードの最適化も無効になります。

これを考慮し、この仕様では上記の問題に宣言的な方法で対処するための機能をいくつか導入します。

画像のレンダリングサイズが固定されている場合の、デバイスピクセル比に基づく選択

img要素上の src属性およびsrcset 属性を、x記述子とともに使用して、サイズだけが異なる複数の画像を提供できます（小さい画像は大きい画像を縮小したものです）。

画像のレンダリングサイズがビューポートの幅に依存する場合（ビューポートに基づく選択）、 x記述子は適切ではありませんが、アートディレクションとともに使用できます。

<h2>From today's featured article</h2>
<img src="/uploads/100-marie-lloyd.jpg"
     srcset="/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
     alt="" width="100" height="150">
<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
was an English <a href="/wiki/Music_hall">music hall</a> singer, ...

ユーザーエージェントは、ユーザーの画面のピクセル密度、ズームレベル、および場合によってはユーザーのネットワーク状態などのその他の要因に応じて、指定されたリソースのいずれかを選択できます。

srcset属性をまだ理解しない古いユーザーエージェントとの後方互換性のため、URLの1つが img要素のsrc属性に指定されます。これにより、古いユーザーエージェントでも有用なものが表示されます（ただし、ユーザーが望むより低解像度である可能性があります）。新しいユーザーエージェントでは、src 属性は、1x記述子とともにsrcsetに指定されたかのように、リソース選択に参加します。

画像のレンダリングサイズは、width属性および height属性で指定され、これによりユーザーエージェントは画像がダウンロードされる前に画像用の空間を割り当てられます。

ビューポートに基づく選択

srcset属性およびsizes属性を、 w記述子とともに使用して、サイズだけが異なる複数の画像を提供できます（小さい画像は大きい画像を縮小したものです）。

この例では、バナー画像が（適切なCSSを使用して）ビューポートの幅全体を占めます。

<h1><img sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
     src="wolf-400.jpg" alt="The rad wolf"></h1>

ユーザーエージェントは、指定されたw記述子とsizes属性で指定されたレンダリングサイズから各画像の実効ピクセル密度を計算します。その後、ユーザーの画面のピクセル密度、ズームレベル、および場合によってはユーザーのネットワーク状態などのその他の要因に応じて、指定されたリソースのいずれかを選択できます。

ユーザーの画面の幅が320CSSピクセルの場合、これは wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5xを指定することと同等です。一方、ユーザーの画面の幅が1200CSSピクセルの場合、これはwolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33xを指定することと同等です。w記述子およびsizes 属性を使用することにより、ユーザーエージェントはユーザーのデバイスの大きさに関係なく、ダウンロードする正しい画像ソースを選択できます。

後方互換性のため、URLの1つがimg要素の src属性に指定されます。新しいユーザーエージェントでは、srcset属性が w記述子を使用する場合、src属性は無視されます。

この例では、ウェブページはビューポートの幅に応じて3つのレイアウトを持ちます。狭いレイアウトは画像が1列（各画像の幅は約100%）、中間のレイアウトは画像が2列（各画像の幅は約50%）、最も広いレイアウトは画像が3列で、ページ余白もあります（各画像の幅は約33%）。これらのレイアウトの切り替えは、ビューポートの幅がそれぞれ30emおよび50emのときに行われます。

<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
     srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
     src="swing-400.jpg" alt="Kettlebell Swing">

sizes属性は、 30emおよび50emにレイアウトのブレークポイントを設定し、これらのブレークポイント間の画像サイズを100vw、50vw、または calc(33vw - 100px)と宣言します。これらのサイズは、CSSで指定される実際の画像幅と必ずしも完全に一致する必要はありません。

ユーザーエージェントは、trueと評価される<media-condition>（括弧内の部分）を持つ最初の項目を使用し、すべてがfalseと評価される場合は最後の項目（calc(33vw - 100px)）を使用して、sizes 属性から幅を選択します。

たとえば、ビューポートの幅が29emの場合、 (max-width: 30em)はtrueと評価され、100vwが使用されるため、リソース選択の目的における画像サイズは29emです。一方、ビューポートの幅が32emの場合、 (max-width: 30em)はfalseと評価されますが、 (max-width: 50em)はtrueと評価され、 50vwが使用されるため、リソース選択の目的における画像サイズは 16em（ビューポート幅の半分）です。レイアウトが異なるため、わずかに広いビューポートの方が小さい画像になることに注意してください。

その後、ユーザーエージェントは前の例と同様に実効ピクセル密度を計算し、適切なリソースを選択できます。

この例は前の例と同じですが、画像が遅延読み込みされます。この場合、sizes属性でautoキーワードを使用でき、ユーザーエージェントはwidth属性（またはCSSで指定された幅）をソースサイズとして使用します。

<img loading="lazy" width="200" height="200" sizes="auto"
     srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
     src="swing-400.jpg" alt="Kettlebell Swing">

autoキーワードをサポートしない旧来のユーザーエージェントとの後方互換性を向上させるため、必要に応じてフォールバックサイズを指定できます。

<img loading="lazy" width="200" height="200"
     sizes="auto, (max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
     srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
     src="swing-400.jpg" alt="Kettlebell Swing">

アートディレクションに基づく選択

picture要素および source要素を、 media 属性とともに使用して、画像内容が異なる複数の画像を提供できます（たとえば、小さい画像は大きい画像を切り抜いたものにできます）。

<picture>
  <source media="(min-width: 45em)" srcset="large.jpg">
  <source media="(min-width: 32em)" srcset="med.jpg">
  <img src="small.jpg" alt="The wolf runs through the snow.">
</picture>

ユーザーエージェントは、media属性内のメディアクエリーが一致する最初のsource要素を選択し、その後、そのsrcset属性から適切なURLを選択します。

画像のレンダリングサイズは、どのリソースが選択されるかに応じて異なります。画像がダウンロードされる前にユーザーエージェントが使用できる寸法を指定するには、 CSSを使用できます。

img { width: 300px; height: 300px }
@media (min-width: 32em) { img { width: 500px; height:300px } }
@media (min-width: 45em) { img { width: 700px; height:400px } }

この例では、アートディレクションに基づく選択と、デバイスピクセル比に基づく選択を組み合わせます。ビューポートの半分を占めるバナーが、広い画面用と狭い画面用の 2つの版で提供されます。

<h1>
 <picture>
  <source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">
  <img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="The Breakfast Combo">
 </picture>
</h1>

画像形式に基づく選択

source要素上の type属性を使用して、異なる形式による複数の画像を提供できます。

<h2>From today's featured article</h2>
<picture>
 <source srcset="/uploads/100-marie-lloyd.webp" type="image/webp">
 <source srcset="/uploads/100-marie-lloyd.jxr" type="image/vnd.ms-photo">
 <img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
</picture>
<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
was an English <a href="/wiki/Music_hall">music hall</a> singer, ...

この例では、ユーザーエージェントは、サポートされるMIMEタイプを値とするtype属性を持つ最初のソースを選択します。ユーザーエージェントがWebP画像をサポートする場合、最初のsource要素が選択されます。そうではなく、JPEG XR画像をサポートする場合、2番目のsource要素が選択されます。どちらの形式もサポートされない場合、img要素が選択されます。

4.8.4.1.1 適応型画像

この節は非規範的です。

CSSとメディアクエリーを使用して、ユーザーの環境、特に異なるビューポートの寸法およびピクセル密度へ動的に適応するグラフィカルなページレイアウトを構築できます。しかしコンテンツについては、 CSSは役立ちません。代わりに、img要素の srcset属性およびpicture要素があります。この節では、これらの機能の使用方法を示す例を順に説明します。

広い画面（600CSS ピクセルより広い）では、a-rectangle.pngという名前の300×150画像を使用し、小さい画面（600CSSピクセル以下）では、 a-square.pngという名前の小さい100×100画像を使用する状況を考えます。このマークアップは次のようになります：

<figure>
 <picture>
  <source srcset="a-square.png" media="(max-width: 600px)">
  <img src="a-rectangle.png" alt="Barney Frank wears a suit and glasses.">
 </picture>
 <figcaption>Barney Frank, 2011</figcaption>
</figure>

alt 属性に何を入れるかの詳細については、画像の代替として機能するテキストを提供するための要件の節を参照してください。

これには、画像の読み込み中にどの寸法を使用すべきかをユーザーエージェントが必ずしも把握できないという問題があります。ページの読み込み中にレイアウトを何度もリフローする必要をなくすため、 CSSおよびCSSメディアクエリーを使用して寸法を提供できます：

<style>
 #a { width: 300px; height: 150px; }
 @media (max-width: 600px) { #a { width: 100px; height: 100px; } }
</style>
<figure>
 <picture>
  <source srcset="a-square.png" media="(max-width: 600px)">
  <img src="a-rectangle.png" alt="Barney Frank wears a suit and glasses." id="a">
 </picture>
 <figcaption>Barney Frank, 2011</figcaption>
</figure>

あるいは、source要素およびimg要素上で width属性およびheight属性を使用して、幅と高さを提供できます：

<figure>
 <picture>
  <source srcset="a-square.png" media="(max-width: 600px)" width="100" height="100">
  <img src="a-rectangle.png" width="300" height="150"
  alt="Barney Frank wears a suit and glasses.">
 </picture>
 <figcaption>Barney Frank, 2011</figcaption>
</figure>

img要素は、 src属性とともに使用されます。この属性は、picture要素をサポートしない旧来のユーザーエージェントで使用する画像のURLを示します。これにより、src属性にどの画像を提供するかという問題が生じます。

作成者が旧来のユーザーエージェントで最大の画像を使用したい場合、マークアップは次のようにできます：

<picture>
 <source srcset="pear-mobile.jpeg" media="(max-width: 720px)">
 <source srcset="pear-tablet.jpeg" media="(max-width: 1280px)">
 <img src="pear-desktop.jpeg" alt="The pear is juicy.">
</picture>

ただし、旧来のモバイルユーザーエージェントの方が重要である場合、3つすべての画像を source要素に列挙し、src属性を完全に上書きできます。

<picture>
 <source srcset="pear-mobile.jpeg" media="(max-width: 720px)">
 <source srcset="pear-tablet.jpeg" media="(max-width: 1280px)">
 <source srcset="pear-desktop.jpeg">
 <img src="pear-mobile.jpeg" alt="The pear is juicy.">
</picture>

この時点で、src属性は、 pictureをサポートするユーザーエージェントによって実際には完全に無視されるため、src属性のデフォルトには、最小でも最大でもない画像を含め、任意の画像を使用できます：

<picture>
 <source srcset="pear-mobile.jpeg" media="(max-width: 720px)">
 <source srcset="pear-tablet.jpeg" media="(max-width: 1280px)">
 <source srcset="pear-desktop.jpeg">
 <img src="pear-tablet.jpeg" alt="The pear is juicy.">
</picture>

上記ではmax-widthメディア機能を使用し、画像が対象とする最大の（ビューポート）寸法を指定しています。代わりに min-widthを使用することもできます。

<picture>
 <source srcset="pear-desktop.jpeg" media="(min-width: 1281px)">
 <source srcset="pear-tablet.jpeg" media="(min-width: 721px)">
 <img src="pear-mobile.jpeg" alt="The pear is juicy.">
</picture>

4.8.4.2 `source`、 `img`、および`link` 要素に共通する属性

4.8.4.2.1 Srcset属性

srcset属性は、この節で要件が定義される属性です。

存在する場合、その値は1つ以上の画像候補文字列で構成されなければならず、それぞれは次のものとU+002C COMMA文字（,）で区切られます。画像候補文字列が記述子を含まず、URLの後に ASCII空白も含まない場合、後続の画像候補文字列が存在するなら、それは1つ以上のASCII空白で始まらなければなりません。

画像候補文字列は、次の構成要素でこの順序に従って構成され、この一覧の後に説明する追加の制約を受けます：

0個以上のASCII 空白。
U+002C COMMA文字（,）で始まらず、また終わらない妥当な空でないURLであり、ページ化もスクリプト化もされていない、非インタラクティブで任意にアニメーション化された画像リソースを参照するもの。
0個以上のASCII 空白。
0個、または次のいずれか1つ：
- 幅記述子。これは、ASCII空白、0より大きい数を与えて幅記述子値を表す妥当な非負整数、および U+0077 LATIN SMALL LETTER W文字で構成されます。
- ピクセル密度記述子。これは、ASCII空白、0より大きい数を与えてピクセル密度記述子値を表す妥当な浮動小数点数、およびU+0078 LATIN SMALL LETTER X文字で構成されます。
0個以上のASCII 空白。

同じ要素について、別の画像候補文字列の幅記述子値と同じ幅記述子値を持つ画像候補文字列が存在してはなりません。

同じ要素について、別の画像候補文字列のピクセル密度記述子値と同じピクセル密度記述子値を持つ画像候補文字列が存在してはなりません。この要件の目的では、記述子を持たない画像候補文字列は、1x記述子を持つ画像候補文字列と同等です。

ある要素の画像候補文字列に幅記述子が指定されている場合、その要素の他のすべての画像候補文字列にも幅記述子が指定されなければなりません。

画像候補文字列の幅記述子で指定された幅は、画像候補文字列のURLによって指定されるリソースに自然な幅がある場合、その自然な幅と一致しなければなりません。

要素にsizes属性が存在する場合、その要素のすべての画像候補文字列には幅記述子が指定されなければなりません。

4.8.4.2.2 Sizes属性

sizes属性は、この節で要件が定義される属性です。

存在する場合、その値は妥当なソースサイズリストでなければなりません。

妥当なソースサイズリストは、次の文法に一致する文字列です： [CSSVALUES] [MQ]

<source-size-list> = <source-size>#? , <source-size-value>
<source-size> = <media-condition> <source-size-value> | auto
<source-size-value> = <length> | auto

<source-size-value>が<length>である場合、負であってはならず、数学関数以外のCSS関数を使用してはなりません。

キーワードautoは、sizes属性を解析するで計算される幅です。存在する場合、これは最初の項目でなければならず、<source-size-list>値全体が文字列「auto」（ASCII大文字小文字不区別）であるか、文字列「auto,」（ASCII大文字小文字不区別）で始まらなければなりません。

画像の読み込みを開始したimg要素が、（画像データを更新するまたは環境の変化に反応するアルゴリズムによって）自動サイズを許可し、かつレンダリングされている場合、 autoは具体的オブジェクトサイズの幅です。それ以外の場合、auto値は無視され、存在する場合は次のソースサイズが代わりに使用されます。

次の条件が満たされる場合、autoキーワードを、source要素のsizes属性およびimg要素のsizes属性に指定できます。それ以外の場合、autoを指定してはなりません。

要素が、後続の兄弟であるimg要素を持つsource要素である。
要素がimg 要素である。
上記いずれかの条件で参照されるimg要素が自動サイズを許可する。

さらに、width属性およびheight属性、またはCSSを使用して寸法を指定することが強く推奨されます。寸法が指定されていない場合、sizes="auto"はレンダリングの節でcontain-intrinsic-size: 300px 150pxを意味するため、画像は300x150の寸法でレンダリングされる可能性があります。

<source-size-value>は、意図される画像のレイアウト幅を示します。作成者は、<media-condition>を使用して、異なる環境に対して異なる幅を指定できます。

<source-size-value>では、何に対する割合なのかという混乱を避けるため、パーセンテージは許可されません。 'vw'単位は、ビューポートの幅に相対的なサイズに使用できます。

4.8.4.3 処理モデル

img要素には、現在の要求および保留中の要求があります。現在の要求は、初期状態では新しい画像要求に設定されます。保留中の要求は、初期状態では nullに設定されます。

画像要求には、状態、現在のURL、および画像データがあります。

画像要求の状態は、次のいずれかです：

利用不可: ユーザーエージェントが画像データをまったく取得していないか、画像データの一部または全部を取得しているものの、画像の寸法を取得できるほどにはまだ画像をデコードしていない状態。
部分的に利用可能: ユーザーエージェントが画像データの一部を取得し、少なくとも画像の寸法が利用可能な状態。
完全に利用可能: ユーザーエージェントが画像データのすべてを取得し、少なくとも画像の寸法が利用可能な状態。
壊れている: ユーザーエージェントが取得可能なすべての画像データを取得したものの、画像の寸法を取得できるほどにさえ画像をデコードできない状態（たとえば、画像が破損している、形式がサポートされていない、またはデータを取得できなかった場合）。

画像要求の現在のURLは、初期状態では空文字列です。

画像要求の画像データは、デコード済みの画像データです。

画像要求の状態が部分的に利用可能または完全に利用可能のいずれかである場合、その画像要求は利用可能であるといいます。

img要素の現在の要求の状態が完全に利用可能であり、ユーザーエージェントがメディアデータをエラーなしでデコードできる場合、そのimg要素は完全にデコード可能であるといいます。

画像要求の状態は、初期状態では利用不可です。

img要素の現在の要求が利用可能である場合、そのimg要素は、幅が画像の密度補正済みの自然な幅（存在する場合）、高さが画像の密度補正済みの自然な高さ（存在する場合）で、外観が画像の自然な外観である描画ソースを提供します。

img要素は、 srcset属性が指定されているか、親がpicture要素である場合、srcsetまたは pictureを使用するといいます。

各img要素には最後に選択されたソースがあり、初期状態ではnullでなければなりません。

各画像要求には現在のピクセル密度があり、初期状態では1でなければなりません。

各画像要求には優先される密度補正済み寸法があり、これは幅と高さで構成される構造体またはnullのいずれかです。初期状態ではnullでなければなりません。

img要素 imgの密度補正済みの自然な幅と高さを決定するには：

densityを、imgの現在の要求の現在のピクセル密度とします。
dimensionsを、imgの現在の要求の優先される密度補正済み寸法とします。

優先される密度補正済み寸法は、画像内のメタ情報に基づいて、表示用に画像を準備するアルゴリズムで設定されます。
dimensionsがnullでない場合、dimensionsの幅を dimensionsの幅をdensityで割った値に設定し、 dimensionsの高さをdimensionsの高さをdensityで割った値に設定して、dimensionsを返します。
intrinsicWidth、intrinsicHeight、および intrinsicRatioを、それぞれimgの固有の幅、固有の高さ、および固有のアスペクト比（存在する場合）とします。
intrinsicWidthが存在しない状態でない場合、intrinsicWidthを intrinsicWidthをdensityで割った値に設定します。
intrinsicHeightが存在しない状態でない場合、intrinsicHeightを intrinsicHeightをdensityで割った値に設定します。
intrinsicWidth、intrinsicHeight、およびintrinsicRatioを使用し、300×150のデフォルトオブジェクトサイズでデフォルトサイズ設定アルゴリズムを適用した結果を返します。

たとえば、現在のピクセル密度が3.125である場合、これはCSSインチ当たり300デバイスピクセルが存在することを意味します。したがって、画像データが300x600の場合、その画像は 96CSSピクセル×192CSSピクセルの密度補正済みの自然な幅と高さを持ちます。

すべてのimg要素およびlink要素は、ソース集合に関連付けられます。

ソース集合は、0個以上の画像ソースからなる順序付き集合およびソースサイズです。

画像ソースは、URLと、任意でピクセル密度記述子または幅記述子のいずれかです。

ソースサイズは、<source-size-value>です。ソースサイズがビューポートに相対的な単位を持つ場合、それはimg要素のノード文書のビューポートに相対的に解釈されなければなりません。その他の単位は、Media Queriesと同じように解釈されなければなりません。 [MQ]

この節のアルゴリズムにおけるパースエラーは、入力と要件との致命的でない不一致を示します。ユーザーエージェントには、パースエラーを何らかの方法で公開することが推奨されます。

画像の種類およびそれが妥当な画像であるかどうかを決定するとき、画像のフェッチが成功したかどうか（たとえば、応答ステータスが正常ステータスであったかどうか）は無視されなければなりません。

これにより、サーバーはエラー応答とともに画像を返し、それを表示させることができます。

ユーザーエージェントは、画像の関連付けられたContent-Typeヘッダーを 公式タイプとして、画像の種類を決定するために画像スニッフィング規則を適用するべきです。これらの規則が適用されない場合、画像の種類は、画像の関連付けられたContent-Typeヘッダーによって指定された種類でなければなりません。

ユーザーエージェントは、img要素で画像以外のリソース（たとえば、文書要素がHTML要素であるXMLファイル）をサポートしてはなりません。ユーザーエージェントは、画像リソースに埋め込まれた実行可能コード（たとえばスクリプト）を実行してはなりません。ユーザーエージェントは、複数ページのリソース（たとえばPDFファイル）の最初のページのみを表示しなければなりません。ユーザーエージェントは、リソースがインタラクティブに動作することを許可してはなりませんが、リソース内のアニメーションは尊重するべきです。

この仕様では、どの画像形式をサポートすべきかは規定しません。

4.8.4.3.1 画像を取得するタイミング

デフォルトでは、画像は直ちに取得されます。ユーザーエージェントは、代わりにオンデマンドで画像を取得するオプションをユーザーに提供してもよいです。（たとえば、オンデマンドオプションは、帯域幅に制約のあるユーザーによって使用される可能性があります。）

画像を直ちに取得する場合、ユーザーエージェントは、その要素が作成されたとき、または関連する変異が生じたときは常に、そうするよう記載されている場合にはアニメーションを再開するフラグを設定して、img 要素の画像データを更新しなければなりません。

画像をオンデマンドで取得する場合、ユーザーエージェントは、画像データが必要になるたび（すなわちオンデマンドで）、ただしimg要素の現在の要求の状態が利用不可である場合に限り、 img要素の画像データを更新しなければなりません。img要素に関連する変異が生じた場合、ユーザーエージェントが画像をオンデマンドでのみ取得するなら、img要素の現在の要求の状態は利用不可に戻らなければなりません。

4.8.4.3.2 DOM変異への反応

img要素に対する関連する変異は、次のとおりです：

要素のsrc、srcset、width、またはsizes属性が設定、変更、または削除された。
要素のsrc 属性が、以前の値と同じ値に設定された。これは、画像データを更新するアルゴリズムの アニメーションを再開するフラグを設定しなければなりません。
要素のcrossorigin 属性の状態が変更された。
要素のreferrerpolicy 属性の状態が変更された。
imgまたはsourceのHTML 要素挿入手順、 HTML要素削除手順、およびHTML要素移動手順が、その変異を関連する変異として数える。
要素の親がpicture要素であり、以前の兄弟であるsource要素の srcset、 sizes、 media、 type、 width、または height属性が設定、変更、または削除された。
要素の採用手順が実行された。
要素が自動サイズを許可する場合：要素がレンダリングされるようになるか、されなくなる、またはその具体的オブジェクトサイズの幅が変化する。これは、画像データを更新するアルゴリズムの イベントを省略する可能性があるフラグを設定しなければなりません。

4.8.4.3.3 利用可能な画像のリスト

各Documentオブジェクトは、利用可能な画像のリストを持たなければなりません。このリスト内の各画像は、絶対URL、CORS 設定属性モード、およびそのモードがCORS なしでない場合はオリジンから構成されるタプルによって識別されます。さらに各画像には、上位層キャッシュを無視するフラグがあります。ユーザーエージェントは、あるDocument オブジェクトの利用可能な画像のリストから別のオブジェクトへ、いつでもエントリーをコピーしてもよいです（たとえば、 Documentが作成されたとき、ユーザーエージェントは、他のDocumentで読み込まれているすべての画像を追加できます）が、その際、この方法でコピーされたエントリーのキーを変更してはならず、コピーされたエントリーの上位層キャッシュを無視するフラグを設定解除しなければなりません。ユーザーエージェントは、そのようなリストから画像をいつでも削除してもよいです（たとえば、メモリーを節約するため）。ユーザーエージェントは、上位層キャッシュを無視するフラグが設定されていない場合、リソースに対する上位層キャッシュの意味論（たとえば、HTTPの`Cache-Control` 応答ヘッダー）に応じて、利用可能な画像のリスト内のエントリーを適切に削除しなければなりません。

利用可能な画像のリストは、 src属性を、以前に読み込まれたURLへ変更するときの同期的な切り替えを可能にし、またHTTPによるキャッシュを許可しない場合でも、同じ文書内で画像を再ダウンロードすることを避けることを意図しています。以前の画像がまだ読み込み中である間に同じ画像を再ダウンロードすることを避けるためには使用されません。

ユーザーエージェントは、画像データを利用可能な画像のリストとは別に保存することもできます。

たとえば、リソースにHTTP応答ヘッダー `Cache-Control: must-revalidate`があり、その上位層キャッシュを無視するフラグが設定されていない場合、ユーザーエージェントはそのリソースを利用可能な画像のリストから削除しますが、画像データを別に保持し、サーバーが 304 Not Modifiedステータスで応答した場合にそれを使用できます。

4.8.4.3.4 画像のデコード

画像データは通常、ファイルサイズを削減するためにエンコードされています。これは、ユーザーエージェントが画像を画面に表示するには、データをデコードする必要があることを意味します。デコードとは、画像のメディアデータを、画面への表示に適したビットマップ形式へ変換する処理です。この処理は、コンテンツの表示に関わる他の処理と比較して遅い可能性があることに注意してください。そのため、ユーザーエージェントは最良のユーザー体験を作り出すために、デコードをいつ実行するかを選択できます。

画像のデコードが完了するまで他のコンテンツの表示を妨げる場合、画像のデコードは同期的であるといいます。通常、これは画像とその他のコンテンツを同時に不可分に表示する効果があります。ただし、この表示はデコードの実行にかかる時間だけ遅延します。

画像のデコードが他のコンテンツの表示を妨げない場合、画像のデコードは非同期的であるといいます。これは画像以外のコンテンツをより速く表示する効果があります。ただし、デコードが完了するまで、画像コンテンツは画面に表示されません。デコードが完了すると、画面が画像で更新されます。

同期デコードモードと非同期デコードモードのどちらでも、同じ時間が経過した後に最終的なコンテンツが画面に表示されます。主な違いは、ユーザーエージェントが最終的なコンテンツの表示に先立って、画像以外のコンテンツを表示するかどうかです。

ユーザーエージェントが同期デコードまたは非同期デコードのどちらを実行するかを決定するのを支援するため、decoding属性を img要素に設定できます。 decoding属性に使用できる値は、次の画像デコードヒントキーワードです：

キーワード	状態	説明
`sync`	同期	他のコンテンツと不可分に表示するため、この画像を同期的にデコードすることを優先する旨を示します。
`async`	非同期	他のコンテンツの表示を遅延させないため、この画像を非同期的にデコードすることを優先する旨を示します。
`auto`	自動	デコードモードに優先事項がないことを示します（デフォルト）。

画像をデコードするとき、ユーザーエージェントは decoding 属性の状態によって示される優先事項を尊重するべきです。示された状態が自動である場合、ユーザーエージェントは任意のデコード動作を自由に選択できます。

decode()メソッドを使用して、デコード動作を制御することもできます。decode()メソッドは、コンテンツを画面へ表示する処理とは独立してデコードを実行するため、decoding属性の影響を受けません。

4.8.4.3.5 画像データの更新

このアルゴリズムは、並行して実行されている手順から呼び出すことはできません。ユーザーエージェントが、並行して実行されている手順からこのアルゴリズムを呼び出す必要がある場合、そうするためのタスクをキューに追加する必要があります。

ユーザーエージェントがimg要素の画像データを更新するとき、任意で アニメーションを再開するフラグを設定し、任意でイベントを省略する可能性がある フラグを設定して、次の手順を実行しなければなりません：

要素のノード文書が完全にアクティブでない場合：
1. このアルゴリズムの実行を並行して続行します。
2. 要素のノード文書が完全にアクティブになるまで待機します。
3. このimg要素に対するこのアルゴリズムの別のインスタンスが、このインスタンスの後に開始された場合（中止され、もはや実行中でない場合も含む）、返します。
4. このアルゴリズムを続行するため、マイクロタスクをキューに追加します。
ユーザーエージェントが画像をサポートできない場合、または画像のサポートが無効にされている場合、現在の要求および保留中の要求に対する画像要求を中止し、現在の要求の状態を利用不可に設定し、保留中の要求をnullに設定して、返します。
previousURLを、現在の要求の現在のURLとします。
selected sourceをnullとし、selected pixel densityを未定義とします。
要素がsrcsetまたは pictureを使用せず、空文字列ではない値を持つsrc属性が指定されている場合、selected sourceを要素のsrc属性の値に設定し、 selected pixel densityを 1.0に設定します。
要素の最後に選択されたソースをselected sourceに設定します。
selected sourceがnullでない場合：
1. urlStringを、要素のノード文書を基準として、selected sourceを指定してURLをエンコーディング解析してシリアル化する結果とします。
2. urlStringが失敗の場合、この内側の一連の手順を中止します。
3. keyを、urlString、img 要素のcrossorigin 属性のモード、およびそのモードがCORS なしでない場合はノード文書のオリジンから構成されるタプルとします。
4. 利用可能な画像のリストにkeyのエントリーが含まれる場合：
  1. そのエントリーの上位層キャッシュを無視するフラグを設定します。
  2. 現在の要求および保留中の要求に対する画像要求を中止します。
  3. 保留中の要求を nullに設定します。
  4. 現在の要求を、画像データがそのエントリーのデータであり、状態が完全に利用可能である新しい画像要求に設定します。
  5. img要素を指定して、現在の要求を表示用に準備します。
  6. 現在の要求の現在のピクセル密度をselected pixel densityに設定します。
  7. img要素と次の手順を指定して、DOM操作タスクソース上で要素タスクをキューに追加します：
    1. アニメーションを再開するが設定されている場合、アニメーションを再開します。
    2. 現在の要求の現在のURLを urlStringに設定します。
    3. イベントを省略する可能性があるが設定されていないか、または previousURLがurlStringと等しくない場合、img 要素で、loadという名前のイベントを発火します。
  8. 画像データを更新するアルゴリズムを中止します。
このアルゴリズムを呼び出したタスクが続行できるように、このアルゴリズムの残りを実行するためのマイクロタスクをキューに追加します。
このimg要素に対するこのアルゴリズムの別のインスタンスが、このインスタンスの後に開始された場合（中止され、もはや実行中でない場合も含む）、返します。

たとえば、src、srcset、およびcrossorigin 属性がすべて連続して設定された場合に複数の要求が発生することを避けるため、最後のインスタンスだけが効果を持ちます。
selected sourceおよびselected pixel densityを、それぞれ画像ソースを選択する結果であるURLおよびピクセル密度とします。
selected sourceがnullの場合：
1. 現在の要求の状態を壊れているに設定し、現在の要求および保留中の要求に対する画像要求を中止し、保留中の要求をnullに設定します。
2. img要素と次の手順を指定して、DOM操作タスクソース上で要素タスクをキューに追加します：
  1. 現在の要求の現在の URLを空文字列に変更します。
  2. 次のすべてがtrueの場合：
    - 要素がsrc属性を持つか、またはsrcsetまたは pictureを使用する；かつ
    - イベントを省略する可能性があるが設定されていないか、または previousURLが空文字列ではない、
    その場合、img要素で errorという名前のイベントを発火します。
3. 返します。
urlStringを、要素のノード文書を基準として、selected sourceを指定してURLをエンコーディング解析してシリアル化する結果とします。
urlStringが失敗の場合：
1. 現在の要求および保留中の要求に対する画像要求を中止します。
2. 現在の要求の状態を壊れているに設定します。
3. 保留中の要求を nullに設定します。
4. img要素と次の手順を指定して、DOM操作タスクソース上で要素タスクをキューに追加します：
  1. 現在の要求の現在の URLをselected sourceに変更します。
  2. イベントを省略する可能性があるが設定されていないか、または previousURLがselected sourceと等しくない場合、img 要素で、errorという名前のイベントを発火します。
5. 返します。
保留中の要求が nullではなく、urlStringが保留中の要求の現在のURLと同じである場合、返します。
urlStringが現在の要求の現在のURLと同じであり、現在の要求の状態が部分的に利用可能である場合：
1. 保留中の要求に対する画像要求を中止します。
2. アニメーションを再開するが設定されている場合、img要素を指定して、DOM 操作タスクソース上で要素タスクをキューに追加し、アニメーションを再開します。
3. 返します。
保留中の要求に対する画像要求を中止します。
image requestを、現在のURLがurlStringである新しい画像要求に設定します。
現在の要求の状態が利用不可または壊れている場合、現在の要求をimage requestに設定します。それ以外の場合、保留中の要求をimage requestに設定します。
requestを、urlString、「image」、および要素のcrossorigin コンテンツ属性の現在の状態を指定して、潜在的CORS要求を作成する結果とします。
requestのクライアントを、要素のノード文書の関連設定オブジェクトに設定します。
要素がsrcsetまたは pictureを使用する場合、requestの起動元を「imageset」に設定します。
requestのリファラーポリシーを、要素のreferrerpolicy 属性の現在の状態に設定します。
requestの優先度を、要素のfetchpriority 属性の現在の状態に設定します。
delay load eventを、imgの遅延読み込み属性が即時状態である場合、または imgについてスクリプトが無効である場合はtrueとし、それ以外の場合はfalseとします。
imgを指定した要素を遅延読み込みするかどうかの手順がtrueを返す場合：
1. imgの遅延読み込み再開手順を、画像をフェッチするとラベル付けされた手順から始まるこのアルゴリズムの残りに設定します。
2. img要素について、遅延読み込み要素の交差監視を開始します。
3. 返します。
画像をフェッチする：requestをフェッチします。このアルゴリズムから返し、残りの手順を、応答responseに対するフェッチのprocessResponseの一部として実行します。

この方法で取得されたリソースがある場合、それがimage requestの画像データです。これはCORS同一オリジンまたは CORSクロスオリジンのいずれかであり、これは画像と他のAPIとの相互作用に影響します（たとえば、canvasで使用される場合）。

delay load eventがtrueの場合、画像のフェッチは、リソースがフェッチされた後にネットワークタスクソースによってキューに追加されるタスク（以下で定義）が実行されるまで、要素のノード文書の loadイベントを遅延しなければなりません。

残念ながら、これはユーザーのローカルネットワークの簡易的なポートスキャンを実行するために使用できます（特にスクリプトと組み合わせた場合。ただし、このような攻撃を実行するためにスクリプトが実際に必要なわけではありません）。ユーザーエージェントは、この攻撃を軽減するため、上記より厳格なクロスオリジンアクセス制御ポリシーを実装してもよいですが、残念ながらそのようなポリシーは通常、既存のウェブコンテンツと互換性がありません。
可能な限り早く、次のリストから最初に該当するエントリーへ移動します：
リソースタイプがmultipart/x-mixed-replace の場合
画像がフェッチされている間にネットワークタスクソースによってキューに追加される次のタスクは、次の手順を実行しなければなりません：
1. image requestが保留中の要求であり、少なくとも1つのボディ部分が完全にデコードされている場合、現在の要求に対する画像要求を中止し、保留中の要求を現在の要求へ昇格します。
2. それ以外の場合、image requestが保留中の要求であり、ユーザーエージェントが、画像の寸法を取得できないほど致命的な方法で image requestの画像が破損していると判断できる場合、現在の要求に対する画像要求を中止し、保留中の要求を現在の要求へ昇格し、現在の要求の状態を壊れているに設定します。
3. それ以外の場合、image requestが現在の要求であり、その状態が利用不可であり、ユーザーエージェントがimage requestの画像の幅と高さを判断できる場合、現在の要求の状態を部分的に利用可能に設定します。
4. それ以外の場合、image requestが現在の要求であり、その状態が利用不可であり、ユーザーエージェントが、画像の寸法を取得できないほど致命的な方法で image requestの画像が破損していると判断できる場合、現在の要求の状態を壊れているに設定します。
画像がフェッチされている間にネットワークタスクソースによってキューに追加される各タスクは、画像の表示を更新しなければなりません。ただし、新しいボディ部分が到着するたび、ユーザーエージェントが画像の幅と高さを判断できる場合、img要素を指定して、img要素の現在の要求を表示用に準備し、以前の画像を置き換えなければなりません。 1つのボディ部分が完全にデコードされたら、次の手順を実行します：
1. img要素の現在の要求の状態を完全に利用可能に設定します。
2. イベントを省略する可能性があるが設定されていないか、または previousURLがurlStringと等しくない場合、img要素を指定して、DOM 操作タスクソース上で要素タスクをキューに追加し、 loadという名前のイベントを発火します。
リソースタイプとデータが、以下で説明するように、サポートされる画像形式に対応する場合
画像がフェッチされている間にネットワークタスクソースによってキューに追加される次のタスクは、次の手順を実行しなければなりません：
1. ユーザーエージェントがimage requestの画像の幅と高さを判断でき、 image requestが保留中の要求である場合、image requestの状態を部分的に利用可能に設定します。
2. それ以外の場合、ユーザーエージェントがimage requestの画像の幅と高さを判断でき、image requestが現在の要求である場合、img要素を指定して、image requestを表示用に準備し、image requestの状態を部分的に利用可能に設定します。
3. それ以外の場合、ユーザーエージェントが、画像の寸法を取得できないほど致命的な方法で image requestの画像が破損していると判断でき、かつ image requestが保留中の要求である場合：
  1. 現在の要求および保留中の要求に対する画像要求を中止します。
  2. 保留中の要求を現在の要求へ昇格します。
  3. 現在の要求の状態を壊れているに設定します。
  4. img 要素で、errorという名前のイベントを発火します。
4. それ以外の場合、ユーザーエージェントが、画像の寸法を取得できないほど致命的な方法で image requestの画像が破損していると判断でき、かつ image requestが現在の要求である場合：
  1. image requestに対する画像要求を中止します。
  2. イベントを省略する可能性があるが設定されていないか、または previousURLがurlStringと等しくない場合、img 要素で、errorという名前のイベントを発火します。
そのタスク、および画像がフェッチされている間にネットワークタスクソースによってキューに追加される後続の各タスクは、image requestが現在の要求である場合、画像の表示を適切に更新しなければなりません（たとえば、画像がプログレッシブJPEGである場合、各パケットによって画像の解像度を改善できます）。

さらに、リソースがフェッチされた後にネットワークタスクソースによってキューに追加される最後のタスクは、追加で次の手順を実行しなければなりません：
1. image requestが保留中の要求である場合、現在の要求に対する画像要求を中止し、保留中の要求を現在の要求へ昇格し、img要素を指定して、image requestを表示用に準備します。
2. image requestを完全に利用可能状態に設定します。
3. 上位層キャッシュを無視するフラグを設定して、キーkeyを使用して画像を利用可能な画像のリストに追加します。
4. イベントを省略する可能性があるが設定されていないか、または previousURLがurlStringと等しくない場合、img要素で、 loadという名前のイベントを発火します。
それ以外の場合

画像データはサポートされるファイル形式ではありません。ユーザーエージェントは、 image requestの状態を壊れているに設定し、現在の要求および保留中の要求に対する画像要求を中止し、image requestが保留中の要求である場合は保留中の要求を現在の要求へ昇格し、その後、イベントを省略する可能性があるが設定されていないか、またはpreviousURLがurlStringと等しくない場合、img要素を指定して、DOM 操作タスクソース上で要素タスクをキューに追加し、img要素で errorという名前のイベントを発火します。

ユーザーエージェントが要素xについて上記のアルゴリズムを実行している間、その要素が接続されていない場合でも、要素のノード文書から要素xへの強い参照が存在しなければなりません。

画像要求またはnullのimage requestについて、画像要求を中止するとは、次の手順を実行することを意味します：

image requestがnullの場合、返します。
image requestの画像データがある場合、それを破棄します。
image requestに対するフェッチアルゴリズムのすべてのインスタンスを中止し、そのアルゴリズムによって生成された保留中のタスクを破棄します。

img要素について保留中の要求を現在の要求へ昇格するとは、次の手順を実行することを意味します：

img 要素の現在の要求を保留中の要求に設定します。
img 要素の保留中の要求を nullに設定します。

4.8.4.3.6 表示用の画像の準備

画像要素imgが与えられたとき、画像要求 reqについて表示用の画像を準備するには：

exifTagMapを、関連するコーデックによって定義される、reqの画像データから取得したEXIFタグとします。 [EXIF]
physicalWidthおよびphysicalHeightを、関連するコーデックによって定義される、reqの画像データから取得した幅および高さとします。
dimXを、exifTagMapのタグ0xA002 （PixelXDimension）の値とします。
dimYを、exifTagMapのタグ0xA003 （PixelYDimension）の値とします。
resXを、exifTagMapのタグ0x011A （XResolution）の値とします。
resYを、exifTagMapのタグ0x011B （YResolution）の値とします。
resUnitを、exifTagMapのタグ0x0128 （ResolutionUnit）の値とします。
次のすべてがtrueの場合：
- dimXが正の整数である；
- dimYが正の整数である；
- resXが正の浮動小数点数である；
- resYが正の浮動小数点数である；
- physicalWidth × 72 / resXが dimXである；
- physicalHeight × 72 / resYが dimYである；
- resUnitが2（Inch）である、
その場合：
1. reqの画像データが CORSクロスオリジンである場合、 imgの自然な寸法を dimXおよびdimYに設定し、それに応じてimgのピクセルデータを拡縮します。
2. それ以外の場合、reqの優先される密度補正済み寸法を、幅がdimXに設定され、高さがdimYに設定された構造体に設定します。
reqのimg要素の表示を適切に更新します。

EXIFの解像度は1インチ当たりのCSSポイントに相当するため、解像度からサイズを計算する際の基数は72です。

画像がすでに表示された後にEXIFが到着した場合にどうなるかは、まだ規定されていません。 issue #4929を参照してください。

4.8.4.3.7 画像ソースの選択

img要素elが与えられたとき、画像ソースを選択するには：

elのソース集合を更新します。
elのソース集合が空の場合、 URLとしてnullを返し、ピクセル密度として未定義を返します。
elのソース集合から画像を選択する結果を返します。

ソース集合 sourceSetが与えられたとき、ソース集合から画像ソースを選択するには：

sourceSet内のエントリーbが、sourceSet内の以前のエントリー aと同じ関連付けられたピクセル密度記述子を持つ場合、エントリーbを削除します。sourceSet内のどのエントリーも以前のエントリーと同じ関連付けられたピクセル密度記述子を持たなくなるまで、この手順を繰り返します。
実装定義の方法で、sourceSetから1つの画像ソースを選択します。 selectedSourceをこの選択とします。
selectedSourceおよびそれに関連付けられたピクセル密度を返します。

4.8.4.3.8 属性からのソース集合の作成

文字列default source、文字列 srcset、文字列sizes、および要素またはnullのimgが与えられて、ソース集合を作成するよう求められた場合：

source setを空のソース集合とします。
srcsetが空文字列でない場合、 source setをsrcsetを解析する結果に設定します。
source setのソースサイズを、imgを使用して sizesを解析する結果に設定します。
default sourceが空文字列でなく、 source setにピクセル密度記述子の値が1である画像ソースが含まれず、かつ幅記述子を持つ画像ソースもない場合、 default sourceをsource setに付加します。
source setのソース密度を正規化します。
source setを返します。

4.8.4.3.9 ソース集合の更新

指定されたimgまたは link要素 elについてソース集合を更新するよう求められた場合、ユーザーエージェントは次を行わなければなりません：

elのソース集合を空のソース集合に設定します。
elementsを« el »とします。
elが、親ノードが picture 要素であるimg要素の場合、相対的な順序を維持したまま、elementsの内容をelの親ノードの子要素で置換します。
elがimg要素の場合は imgをelとし、それ以外の場合はnullとします。
elements内の各childについて反復します：
1. childがelである場合：
  1. default sourceを空文字列とします。
  2. srcsetを空文字列とします。
  3. sizesを空文字列とします。
  4. elがsrcset属性を持つ img要素である場合、 srcsetをその属性の値に設定します。
  5. それ以外の場合、elがimagesrcset 属性を持つlink要素である場合、srcsetをその属性の値に設定します。
  6. elがsizes属性を持つ img要素である場合、 sizesをその属性の値に設定します。
  7. それ以外の場合、elがimagesizes 属性を持つlink要素である場合、sizesをその属性の値に設定します。
  8. elがsrc属性を持つimg要素である場合、default sourceをその属性の値に設定します。
  9. それ以外の場合、elがhref属性を持つ link要素である場合、 default sourceをその属性の値に設定します。
  10. elのソース集合を、 default source、srcset、 sizes、およびimgを指定してソース集合を作成する結果に設定します。
  11. 返します。
    
    elがlink要素である場合、elementsにはelのみが含まれるため、この手順には直ちに到達し、アルゴリズムの残りは実行されません。
2. childがsource要素でない場合、続行します。
3. childがsrcset 属性を持たない場合、次の子へ続行します。
4. childのsrcset属性を解析し、返されたソース集合をsource setとします。
5. source setが画像ソースを0個持つ場合、次の子へ続行します。
6. childがmedia属性を持ち、その値が環境に一致しない場合、次の子へ続行します。
7. imgを使用してchildのsizes属性を解析し、返された値をsource setのソースサイズとします。
8. childがtype属性を持ち、その値が未知またはサポートされていないMIMEタイプである場合、次の子へ続行します。
9. childがwidthまたはheight属性を持つ場合、 elの寸法属性ソースを childに設定します。それ以外の場合、elの寸法属性ソースを elに設定します。
10. source setのソース密度を正規化します。
11. elのソース集合を source setに設定します。
12. 返します。

各img 要素は、画像ソースを選択するため、以前の兄弟である source要素と、 img要素自体を独立して考慮し、同じpicture要素内の他のimg要素や、関連するimg要素の後続の兄弟であるsource要素を含む、その他の（無効な）要素を無視します。

4.8.4.3.10 srcset属性の解析

要素からsrcset属性を解析するよう求められた場合、要素のsrcset属性の値を次のように解析します：

inputを、このアルゴリズムに渡された値とします。
positionを、初期状態では文字列の先頭を指す、 input内のポインターとします。
candidatesを、初期状態では空のソース集合とします。
分割ループ：positionを指定して、inputからASCII 空白またはU+002C COMMA文字である符号位置の列を収集します。 U+002C COMMA文字が1つでも収集された場合、それはパースエラーです。
positionがinputの末尾を越えている場合、 candidatesを返します。
positionを指定して、inputからASCII空白ではない符号位置の列を収集し、その結果を urlとします。
descriptorsを新しい空のリストとします。
urlがU+002C（,）で終わる場合：
1. urlの末尾にあるすべてのU+002C COMMA文字を削除します。これによって複数の文字が削除された場合、それはパースエラーです。
それ以外の場合：
1. 記述子トークナイザー：positionを指定して、input内のASCII空白をスキップします。
2. current descriptorを空文字列とします。
3. stateを記述子内とします。
4. cをpositionにある文字とします。 stateの値に応じて、次を行います。この手順の目的では、「EOF」はpositionがinputの末尾を越えたことを表す特別な文字です。
  
  記述子内
  
  cの値に応じて、次を行います：
  
  ASCII 空白
  
  current descriptorが空でない場合、 current descriptorをdescriptorsに付加し、 current descriptorを空文字列とします。 stateを記述子の後に設定します。
  
  U+002C COMMA（,）
  
  positionをinput内の次の文字へ進めます。 current descriptorが空でない場合、 current descriptorをdescriptorsに付加します。 記述子パーサーとラベル付けされた手順へ移動します。
  
  U+0028 LEFT PARENTHESIS（(）
  
  cをcurrent descriptorに付加します。 stateを括弧内に設定します。
  
  EOF
  
  current descriptorが空でない場合、 current descriptorをdescriptorsに付加します。 記述子パーサーとラベル付けされた手順へ移動します。
  
  それ以外
  
  cをcurrent descriptorに付加します。
  
  括弧内
  
  cの値に応じて、次を行います：
  
  U+0029 RIGHT PARENTHESIS（)）
  
  cをcurrent descriptorに付加します。 stateを記述子内に設定します。
  
  EOF
  
  current descriptorをdescriptorsに付加します。 記述子パーサーとラベル付けされた手順へ移動します。
  
  それ以外
  
  cをcurrent descriptorに付加します。
  
  記述子の後
  
  cの値に応じて、次を行います：
  
  ASCII 空白
  
  この状態にとどまります。
  
  EOF
  
  記述子パーサーとラベル付けされた手順へ移動します。
  
  それ以外
  
  stateを記述子内に設定します。 positionをinput内の前の文字に設定します。
  
  positionをinput内の次の文字へ進めます。この手順を繰り返します。
  
  将来の追加との互換性を保つため、このアルゴリズムは複数の記述子および括弧を持つ記述子をサポートします。
記述子パーサー：errorをいいえとします。
widthを存在しないとします。
densityを存在しないとします。
future-compat-hを存在しないとします。
descriptors内の各記述子について、次の一覧から適切な一連の手順を実行します：
記述子が妥当な非負整数と、それに続くU+0077 LATIN SMALL LETTER W文字で構成される場合
1. ユーザーエージェントがsizes属性をサポートしない場合、errorをはいとします。
  
  適合するユーザーエージェントはsizes 属性をサポートします。ただし実際には、ユーザーエージェントは通常、機能を段階的に実装して提供します。
2. widthおよびdensityが両方とも存在しない状態でない場合、 errorをはいとします。
3. 記述子に非負整数を解析する規則を適用します。結果が0の場合、errorをはいとします。それ以外の場合、widthをその結果とします。
記述子が妥当な浮動小数点数と、それに続くU+0078 LATIN SMALL LETTER X文字で構成される場合
1. width、density、およびfuture-compat-hがすべて存在しない状態でない場合、 errorをはいとします。
2. 記述子に浮動小数点数値を解析する規則を適用します。結果が0未満の場合、errorをはいとします。それ以外の場合、 densityをその結果とします。
  
  densityが0の場合、自然な寸法は無限大になります。ユーザーエージェントには、画像をどの程度の大きさまでレンダリングできるかについて制限があることが期待されます。
記述子が妥当な非負整数と、それに続くU+0068 LATIN SMALL LETTER H文字で構成される場合
これはパースエラーです。
1. future-compat-hおよびdensityが両方とも存在しない状態でない場合、 errorをはいとします。
2. 記述子に非負整数を解析する規則を適用します。結果が0の場合、errorをはいとします。それ以外の場合、future-compat-hをその結果とします。
それ以外

errorをはいとします。
future-compat-hが存在しない状態ではなく、widthが 存在しない場合、errorをはいとします。
errorが依然としていいえである場合、 URLがurlであり、widthが存在しない状態でなければ幅 widthに関連付けられ、densityが存在しない状態でなければピクセル密度densityに関連付けられた新しい画像ソースをcandidatesに付加します。それ以外の場合、パースエラーです。
分割ループとラベル付けされた手順に戻ります。

4.8.4.3.11 sizes属性の解析

要素elementから、img要素またはnullの imgを使用して、sizes属性を解析するよう求められた場合：

unparsed sizes listを、elementのsizes 属性の値（属性が存在しない場合は空文字列）からコンポーネント値のコンマ区切りリストを解析する結果とします。[CSSSYNTAX]
sizeをnullとします。
unparsed sizes list内の各unparsed sizeについて：
1. unparsed sizeの末尾から、連続するすべての<whitespace-token>を削除します。 unparsed sizeが空になった場合、それはパースエラーです；続行します。
2. unparsed size内の最後のコンポーネント値が妥当な非負の<source-size-value>である場合、 sizeをその値に設定し、 unparsed sizeからそのコンポーネント値を削除します。数学関数以外のCSS関数は無効です。それ以外の場合、パースエラーです；続行します。
3. sizeがautoであり、 imgがnullでなく、imgがレンダリングされており、かつimgが自動サイズを許可する場合、 sizeを、CSSピクセル単位による imgの具体的オブジェクトサイズの幅に設定します。
  
  sizeが依然としてautoである場合、それは無視されます。
4. unparsed sizeの末尾から、連続するすべての<whitespace-token>を削除します。 unparsed sizeが空になった場合：
  1. これがunparsed sizes list内の最後の項目でなかった場合、それはパースエラーです。
  2. sizeがautoでない場合、 sizeを返します。それ以外の場合、続行します。
5. unparsed size内に残っているコンポーネント値を <media-condition>として解析します。正しく解析されない場合、または正しく解析されても<media-condition>がfalseと評価される場合、続行します。[MQ]
6. sizeがautoでない場合、 sizeを返します。それ以外の場合、続行します。
100vwを返します。

<media-condition>を伴わない、<length>である単独の<source-size-value>を、 <source-size-list>内の最後ではないエントリーとして使用することは無効です。ただし、解析アルゴリズムは<source-size-list>内の任意の位置でそれを許可し、リスト内の先行するエントリーが使用されなかった場合は、直ちにそれをサイズとして受け入れます。これは、将来の拡張を可能にし、末尾の余分なコンマなどの単純な作成者の誤りから保護するためです。単独のautoキーワードの後には、旧来のユーザーエージェント向けのフォールバックを提供するため、他のエントリーを続けることが許可されます。

4.8.4.3.12 ソース密度の正規化

画像ソースは、そのURLに伴ってピクセル密度記述子、幅記述子、またはまったく記述子を持たない場合があります。ソース集合を正規化すると、すべての画像ソースにピクセル密度記述子が与えられます。

ソース集合 source setのソース密度を正規化するよう求められた場合、ユーザーエージェントは次を行わなければなりません：

source sizeを、source setのソースサイズとします。
source set内の各画像ソースについて：
1. 画像ソースがピクセル密度記述子を持つ場合、次の画像ソースへ続行します。
2. それ以外の場合、画像ソースが幅記述子を持つ場合、幅記述子を、幅記述子値をsource sizeで割った値と、 xの単位を持つピクセル密度記述子で置換します。
  
  ソースサイズが0の場合、密度は無限大となり、自然な寸法は0×0になります。
3. それ以外の場合、画像ソースに1xのピクセル密度記述子を与えます。

4.8.4.3.13 環境の変化への反応

ユーザーエージェントは、環境の変化に反応するため、いつでも次のアルゴリズムを実行して、img 要素の画像を更新してもよいです。（ユーザーエージェントは、このアルゴリズムを実行することを 要求されません。たとえば、ユーザーがもうページを見ていない場合、その間に環境が再び変化する可能性に備えて、どの画像を使用するかを決定する前に、ユーザーがページへ戻るまで待つことをユーザーエージェントが望む可能性があります。）

ユーザーエージェントには、特にユーザーがビューポートのサイズを変更したとき（たとえば、ウィンドウのサイズ変更またはページのズーム変更によって）、およびimg要素が文書へ挿入されたときに、このアルゴリズムを実行することが推奨されます。これにより、密度補正済みの自然な幅と高さが新しいビューポートに一致し、またアートディレクションが関与する場合に正しい画像が選択されます。

安定状態を待機します。同期区間は、アルゴリズムが同期区間が終了したと述べるまでの、このアルゴリズムの残りのすべての手順で構成されます。（同期区間内の手順には⌛が付けられます。）
⌛ img要素が srcsetまたは pictureを使用しない場合、そのノード文書が完全にアクティブでない場合、リソースタイプがmultipart/x-mixed-replaceである画像データを持つ場合、またはその保留中の要求がnullでない場合、返します。
⌛ selected sourceおよびselected pixel densityを、それぞれ画像ソースを選択する結果であるURLとピクセル密度とします。
⌛ selected sourceがnullの場合、返します。
⌛ selected sourceおよびselected pixel densityが、要素の最後に選択されたソースおよび現在のピクセル密度と同じ場合、返します。
⌛ urlStringを、要素のノード文書を基準として、selected sourceを指定してURLをエンコーディング解析してシリアル化する結果とします。
⌛ urlStringが失敗の場合、返します。
⌛ corsAttributeStateを、要素のcrossorigin コンテンツ属性の状態とします。
⌛ originを、img要素のノード文書のオリジンとします。
⌛ clientを、img要素のノード文書の関連設定オブジェクトとします。
⌛ keyを、urlString、 corsAttributeState、およびcorsAttributeStateがCORSなしでない場合は originから構成されるタプルとします。
⌛ image requestを、現在のURLが urlStringである新しい画像要求とします。
⌛ 要素の保留中の要求をimage requestに設定します。
同期区間を終了し、残りの手順を並行して続行します。
利用可能な画像のリストに keyのエントリーが含まれる場合、 image requestの画像データをそのエントリーのデータに設定します。次の手順へ続行します。

それ以外の場合：
1. requestを、urlString、「image」、および corsAttributeStateを指定して潜在的CORS 要求を作成する結果とします。
2. requestのクライアントを clientに設定し、requestの起動元を「imageset」に設定し、 requestの同期フラグを設定します。
3. requestのリファラーポリシーを、要素のreferrerpolicy 属性の現在の状態に設定します。
4. requestの優先度を、要素のfetchpriority 属性の現在の状態に設定します。
5. responseを、requestをフェッチする結果とします。
6. responseの安全でない応答がネットワークエラーである場合、画像形式がサポートされていない場合（前述のように、画像スニッフィング規則を適用して判断）、ユーザーエージェントが、画像の寸法を取得できないほど致命的な方法で image requestの画像が破損していると判断できる場合、またはリソースタイプが multipart/x-mixed-replaceである場合、保留中の要求をnullに設定し、これらの手順を中止します。
7. それ以外の場合、responseの安全でない応答がimage requestの画像データです。これは CORS同一オリジンまたは CORSクロスオリジンのいずれかであり、これは画像と他のAPIとの相互作用に影響します（たとえば、canvasで使用される場合）。
img要素と次の手順を指定して、DOM操作タスクソース上で要素タスクをキューに追加します：
1. このアルゴリズムが開始されてから、img要素に関連する変異が生じた場合、保留中の要求をnullに設定し、これらの手順を中止します。
2. img 要素の最後に選択されたソースをselected sourceに設定し、img 要素の現在のピクセル密度を selected pixel densityに設定します。
3. image requestの状態を完全に利用可能に設定します。
4. 上位層キャッシュを無視するフラグを設定して、キーkeyを使用して画像を利用可能な画像のリストに追加します。
5. 保留中の要求を現在の要求へ昇格します。
6. img 要素を指定して、image requestを表示用に準備します。
7. img 要素で、loadという名前のイベントを発火します。

4.8.4.4 画像の代替として機能するテキストを提供するための要件

4.8.4.4.1 一般的なガイドライン

別途規定されている場合を除き、alt属性を指定しなければならず、その値は空であってはなりません。その値は画像の適切な代替でなければなりません。alt属性に対する具体的な要件は、次の各節で説明するように、画像が何を表すことを意図しているかによって異なります。

代替テキストを記述するときに考慮すべき最も一般的な規則は次のとおりです：すべての画像をそのalt 属性のテキストで置換しても、ページの意味が変わらないようにすることが意図されています。

したがって一般に、画像を含められなかった場合に何を記述したかを考えることで、代替テキストを記述できます。

この帰結として、alt属性の値には、画像のキャプション、タイトル、または凡例と見なされる可能性のあるテキストを決して含めるべきではありません。これは、ユーザーが画像の代わりに使用できる代替テキストを含むことを想定しており、画像を補足することを意図していません。title属性は補足情報に使用できます。

もう1つの帰結として、alt属性の値は、画像の隣の文章ですでに提供されている情報を繰り返すべきではありません。

代替テキストについて考える1つの方法は、画像が存在することに言及せず、画像を含むページを電話越しに誰かへどのように読み上げるかを考えることです。画像の代わりに述べる内容は、通常、代替テキストを記述するうえでの良い出発点になります。

4.8.4.4.2 画像のみを含むリンクまたはボタン

ハイパーリンクを作成するa要素、またはbutton 要素がテキスト内容を持たず、1つ以上の画像を含む場合、alt 属性には、合わせてリンクまたはボタンの目的を伝えるテキストを含めなければなりません。

この例では、ユーザーは3色の一覧から好みの色を選ぶよう求められます。各色は画像によって示されますが、画像を表示しないようユーザーエージェントを設定しているユーザーには、代わりに色の名前が使用されます：

<h1>Pick your color</h1>
<ul>
 <li><a href="green.html"><img src="green.jpeg" alt="Green"></a></li>
 <li><a href="blue.html"><img src="blue.jpeg" alt="Blue"></a></li>
 <li><a href="red.html"><img src="red.jpeg" alt="Red"></a></li>
</ul>

この例では、各ボタンが、ユーザーの望む色出力の種類を示す一連の画像を持ちます。いずれの場合も、最初の画像が代替テキストを提供するために使用されます。

<button name="rgb"><img src="red" alt="RGB"><img src="green" alt=""><img src="blue" alt=""></button>
<button name="cmyk"><img src="cyan" alt="CMYK"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>

各画像がテキストの一部を表すため、次のように記述することもできます：

<button name="rgb"><img src="red" alt="R"><img src="green" alt="G"><img src="blue" alt="B"></button>
<button name="cmyk"><img src="cyan" alt="C"><img src="magenta" alt="M"><img src="yellow" alt="Y"><img src="black" alt="K"></button>

ただし、他の代替テキストではこれは機能しない場合があり、それぞれの場合にすべての代替テキストを1つの画像に入れる方が適切である可能性があります：

<button name="rgb"><img src="red" alt="sRGB profile"><img src="green" alt=""><img src="blue" alt=""></button>
<button name="cmyk"><img src="cyan" alt="CMYK profile"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>

4.8.4.4.3 代替のグラフィカル表現を持つ句または段落：チャート、図、グラフ、地図、イラスト

フローチャート、図、グラフ、または道順を示す単純な地図など、何かをグラフィカルな形式でより明確に表現できる場合があります。そのような場合、img 要素を使用して画像を提供できますが、画像を表示できないユーザー（たとえば、接続が非常に遅い、テキスト専用ブラウザーを使用している、ハンズフリーの自動車用音声ウェブブラウザーによるページの読み上げを聞いている、または単に視覚障害があるため）でも伝えられるメッセージを理解できるように、より簡略なテキスト版も提供しなければなりません。

テキストはalt 属性で提供しなければならず、src 属性で指定された画像と同じメッセージを伝えなければなりません。

代替テキストは画像の説明ではなく、画像の代替であることを理解することが重要です。

次の例では、画像形式のフローチャートがあり、 alt 属性内のテキストがフローチャートを文章形式で言い換えています：

<p>In the common case, the data handled by the tokenization stage
comes from the network, but it can also come from script.</p>
<p><img src="images/parsing-model-overview.svg" alt="The Network
passes data to the Input Stream Preprocessor, which passes it to the
Tokenizer, which passes it to the Tree Construction stage. From there,
data goes to both the DOM and to Script Execution. Script Execution is
linked to the DOM, and, using document.write(), passes data to the
Tokenizer."></p>

別の例を示します。これは、説明に画像を含める問題に対する良い解決策と悪い解決策を示します。

最初に、良い解決策を示します。この例は、画像が存在しなかった場合に文章へ記述した内容そのものを代替テキストにすべきであることを示しています。

<!-- This is the correct way to do things. -->
<p>
 You are standing in an open field west of a house.
 <img src="house.jpeg" alt="The house is white, with a boarded front door.">
 There is a small mailbox here.
</p>

次に、悪い解決策を示します。この誤った方法では、代替テキストは画像のテキストによる代替ではなく、単なる画像の説明です。画像が表示されない場合、最初の例ほどテキストが自然に流れないため、これは悪い方法です。

<!-- This is the wrong way to do things. -->
<p>
 You are standing in an open field west of a house.
 <img src="house.jpeg" alt="A white house, with a boarded front door.">
 There is a small mailbox here.
</p>

「板張りのドアがある白い家の写真」のようなテキストも、同様に悪い代替テキストです（ただし、title 属性、またはこの画像を持つfigure のfigcaption 要素には適している可能性があります）。

4.8.4.4.4 代替のグラフィカル表現を持つ短い句またはラベル：アイコン、ロゴ

文書にはアイコン形式の情報を含められます。アイコンは、視覚ブラウザーのユーザーが機能を一目で認識できるようにすることを意図しています。

場合によっては、アイコンは同じ意味を伝えるテキストラベルを補足します。そのような場合、 alt 属性は存在しなければなりませんが、空でなければなりません。

ここでは、アイコンの隣に同じ意味を伝えるテキストがあるため、空のalt 属性を持ちます：

<nav>
 <p><a href="/help/"><img src="/icons/help.png" alt=""> Help</a></p>
 <p><a href="/configure/"><img src="/icons/configuration.png" alt="">
 Configuration Tools</a></p>
</nav>

他の場合、アイコンの隣にその意味を説明するテキストはなく、アイコン自体が説明不要であることを想定しています。そのような場合、同等のテキストラベルをalt 属性で提供しなければなりません。

ここでは、ニュースサイトの投稿に、そのトピックを示すアイコンが付けられています。

<body>
 <article>
  <header>
   <h1>Ratatouille wins <i>Best Movie of the Year</i> award</h1>
   <p><img src="movies.png" alt="Movies"></p>
  </header>
  <p>Pixar has won yet another <i>Best Movie of the Year</i> award,
  making this its 8th win in the last 12 years.</p>
 </article>
 <article>
  <header>
   <h1>Latest TWiT episode is online</h1>
   <p><img src="podcasts.png" alt="Podcasts"></p>
  </header>
  <p>The latest TWiT episode has been posted, in which we hear
  several tech news stories as well as learning much more about the
  iPhone. This week, the panelists compare how reflective their
  iPhones' Apple logos are.</p>
 </article>
</body>

多くのページには、会社、組織、プロジェクト、バンド、ソフトウェアパッケージ、国などの特定の主体を表すロゴ、記章、旗、または紋章が含まれます。

ロゴが、たとえばページ見出しとして主体を表すために使用されている場合、alt 属性には、ロゴによって表される主体の名前を含めなければなりません。alt 属性には「ロゴ」という語のようなテキストを含めてはなりません。伝えられているのは、それがロゴであるという事実ではなく、主体そのものだからです。

ロゴが、それが表す主体の名前の隣で使用されている場合、ロゴは補足的なものであり、そのalt 属性は代わりに空でなければなりません。

ロゴが単に装飾素材として使用されている場合（ブランド表示として、または、たとえばロゴが属する主体に言及する記事の脇の画像として）、純粋に装飾的な画像に関する以下の項目が適用されます。ロゴ自体が実際に論じられている場合、それは代替のグラフィカル表現（ロゴ自体）を持つ句または段落（ロゴの説明）として使用されており、上記の最初の項目が適用されます。

次の断片には、上記4つのすべての場合が示されています。最初に、会社を表すために使用されるロゴを示します：

<h1><img src="XYZ.gif" alt="The XYZ company"></h1>

次に、会社名のすぐ隣でロゴを使用している段落を示します。そのため、代替テキストはありません：

<article>
 <h2>News</h2>
 <p>We have recently been looking at buying the <img src="alpha.gif"
 alt=""> ΑΒΓ company, a small Greek company
 specializing in our type of product.</p>

この3番目の断片では、買収について論じるより大きな記事の一部として、ロゴがasideで使用されています：

<aside><p><img src="alpha-large.gif" alt=""></p></aside>
 <p>The ΑΒΓ company has had a good quarter, and our
 pie chart studies of their accounts suggest a much bigger blue slice
 than its green and orange slices, which is always a good sign.</p>
</article>

最後に、ロゴについて論じる論説があり、そのためロゴは代替テキストで詳細に説明されています。

<p>Consider for a moment their logo:</p>

<p><img src="/images/logo" alt="It consists of a green circle with a
green question mark centered inside it."></p>

<p>How unoriginal can you get? I mean, oooooh, a question mark, how
<em>revolutionary</em>, how utterly <em>ground-breaking</em>, I'm
sure everyone will rush to adopt those specifications now! They could
at least have tried for some sort of, I don't know, sequence of
rounded squares with varying shades of green and bold white outlines,
at least that would look good on the cover of a blue book.</p>

この例は、画像が利用可能でなく、代わりにテキストが使用される場合に、そもそも画像が存在しなかったかのように、そのテキストが周囲のテキストへ途切れなく流れ込むよう、代替テキストを記述すべきであることを示しています。

4.8.4.4.5 組版上の効果のためにグラフィックへレンダリングされたテキスト

画像が単にテキストで構成され、その目的がテキストのレンダリングに使用された実際の組版効果を強調することではなく、単にテキストそのものを伝えることである場合があります。

そのような場合、alt 属性は存在しなければならず、画像自体に記述されているものと同じテキストで構成されなければなりません。

「Earth Day」というテキストを含み、すべての文字が花や植物で装飾されたグラフィックを考えます。テキストが単に見出しとして使用され、グラフィカルなユーザー向けにページを華やかにするだけであれば、正しい代替テキストは単に同じ「Earth Day」というテキストであり、装飾について言及する必要はありません：

<h1><img src="earthdayheading.png" alt="Earth Day"></h1>

彩飾写本では、一部の文字にグラフィックを使用する場合があります。そのような状況における代替テキストは、画像が表す文字そのものです。

<p><img src="initials/o.svg" alt="O">nce upon a time and a long long time ago, late at
night, when it was dark, over the hills, through the woods, across a great ocean, in a land far
away, in a small house, on a hill, under a full moon...

外字、異体字、または新しい通貨記号など、Unicodeでは他の方法で表せない文字を表すために画像が使用される場合、代替テキストは、たとえば文字の発音を示すひらがなまたはカタカナを使用するなど、同じものをより一般的な方法で記述したものにするべきです。

1997年のこの例では、中央に1本ではなく2本の線がある、曲がったEのように見える新奇な通貨記号が画像を使用して表されています。代替テキストは文字の発音を示します。

<p>Only <img src="euro.png" alt="euro ">5.99!

文字が同一の目的を果たせる場合、画像を使用するべきではありません。装飾のため、または適切な文字が存在しないため（外字の場合など）、テキストを直接テキストとして表現できない場合に限り、画像が適切です。

デフォルトのシステムフォントが特定の文字をサポートしないために作成者が画像を使用したくなる場合、画像よりウェブフォントの方が優れた解決策です。

4.8.4.4.6 周囲のテキストの一部をグラフィカルに表現したもの

多くの場合、画像は実際には単なる補足であり、その存在は周囲のテキストを強調するだけです。このような場合、alt 属性は存在しなければなりませんが、その値は空文字列でなければなりません。

一般に、画像を削除してもページの有用性が少しも低下せず、画像を含めることで視覚ブラウザーのユーザーが概念をはるかに理解しやすくなる場合、その画像はこのカテゴリーに該当します。

前の段落をグラフィカルな形式で繰り返すフローチャート：

<p>The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</p>
<p><img src="images/parsing-model-overview.svg" alt=""></p>

このような場合、単なるキャプションで構成される代替テキストを含めるのは誤りです。キャプションを含める場合、title 属性を使用するか、figure 要素およびfigcaption 要素を使用できます。後者の場合、画像は実際には代替のグラフィカル表現を持つ句または段落となり、したがって代替テキストが必要になります。

<!-- Using the title="" attribute -->
<p>The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</p>
<p><img src="images/parsing-model-overview.svg" alt=""
        title="Flowchart representation of the parsing model."></p>

<!-- Using <figure> and <figcaption> -->
<p>The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</p>
<figure>
 <img src="images/parsing-model-overview.svg" alt="The Network leads to
 the Input Stream Preprocessor, which leads to the Tokenizer, which
 leads to the Tree Construction stage. The Tree Construction stage
 leads to two items. The first is Script Execution, which leads via
 document.write() back to the Tokenizer. The second item from which
 Tree Construction leads is the DOM. The DOM is related to the Script
 Execution.">
 <figcaption>Flowchart representation of the parsing model.</figcaption>
</figure>

<!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
<p>The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</p>
<p><img src="images/parsing-model-overview.svg"
        alt="Flowchart representation of the parsing model."></p>
<!-- Never put the image's caption in the alt="" attribute! -->

前の段落をグラフィカルな形式で繰り返すグラフ：

<p>According to a study covering several billion pages,
about 62% of documents on the web in 2007 triggered the Quirks
rendering mode of web browsers, about 30% triggered the Almost
Standards mode, and about 9% triggered the Standards mode.</p>
<p><img src="rendering-mode-pie-chart.png" alt=""></p>

4.8.4.4.7 補助的な画像

画像がコンテンツにとって重要ではないものの、純粋に装飾的でもテキストと完全に重複しているわけでもない場合があります。このような場合、alt属性は存在しなければならず、その値は空文字列、または画像が伝える情報のテキストによる表現のいずれかにするべきです。画像にそのタイトルを示すキャプションがある場合、alt 属性の値は空であってはなりません（空だと非視覚的な読者を大いに混乱させるためです）。

政治家についてのニュース記事で、その人物の顔が画像に表示されている場合を考えます。画像は記事に関連するため、純粋に装飾的ではありません。政治家の外見を示すため、記事と完全に重複しているわけでもありません。代替テキストを提供する必要があるかどうかは、画像が文章の解釈に影響するかどうかによって決定される、作成者の判断です。

この最初の変形では、画像は文脈なしで表示され、代替テキストは提供されません：

<p><img src="president.jpeg" alt=""> Ahead of today's referendum,
the President wrote an open letter to all registered voters. In it, she admitted that the country was
divided.</p>

写真が単なる顔である場合、それを説明することに価値がない可能性があります。その人物が赤毛か金髪か、白い肌か黒い肌か、片目か両目かは、読者にとって重要ではありません。

ただし、写真がより動的で、たとえば政治家が怒っている、特に幸せそうである、または打ちのめされている様子を示す場合、記事の調子を伝えるために何らかの代替テキストが役立ちます。その調子は、そうでなければ見落とされる可能性があります：

<p><img src="president.jpeg" alt="The President is sad.">
Ahead of today's referendum, the President wrote an open letter to all
registered voters. In it, she admitted that the country was divided.
</p>

<p><img src="president.jpeg" alt="The President is happy!">
Ahead of today's referendum, the President wrote an open letter to all
registered voters. In it, she admitted that the country was divided.
</p>

その人物が「悲しい」のか「幸せ」なのかは、段落の残りをどのように解釈するかに違いをもたらします。彼女は国が分裂していることを不幸に思っていると言っている可能性が高いのか、それとも分裂した国という見通しが自身の政治的経歴にとって好都合だと言っているのか。解釈は画像によって異なります。

画像にキャプションがある場合、代替テキストを含めることで、キャプションが何を指しているのか非視覚的なユーザーが混乱することを避けられます。

<p>Ahead of today's referendum, the President wrote an open letter to
all registered voters. In it, she admitted that the country was divided.</p>
<figure>
 <img src="president.jpeg"
      alt="A high forehead, cheerful disposition, and dark hair round out the President's face.">
 <figcaption> The President of Ruritania. Photo © 2014 PolitiPhoto. </figcaption>
</figure>

4.8.4.4.8 情報を何も追加しない純粋に装飾的な画像

画像が装飾的ではあるものの、特にページ固有ではない場合、たとえばサイト全体のデザイン体系の一部を形成する画像の場合、その画像は文書のマークアップではなく、サイトのCSSで指定するべきです。

ただし、周囲のテキストでは論じられていないものの、何らかの関連性を持つ装飾画像は、img 要素を使用してページへ含められます。そのような画像は装飾的ですが、依然としてコンテンツの一部を形成します。このような場合、alt 属性は存在しなければなりませんが、その値は空文字列でなければなりません。

関連性があるにもかかわらず画像が純粋に装飾的である例には、Burning Manのイベントに関するブログ投稿内のBlack Rock Cityの風景写真や、詩を朗読するページ上の、その詩に着想を得た絵画の画像などがあります。次の断片は後者の例を示します（この断片には最初の詩節のみが含まれています）：

<h1>The Lady of Shalott</h1>
<p><img src="shalott.jpeg" alt=""></p>
<p>On either side the river lie<br>
Long fields of barley and of rye,<br>
That clothe the wold and meet the sky;<br>
And through the field the road run by<br>
To many-tower'd Camelot;<br>
And up and down the people go,<br>
Gazing where the lilies blow<br>
Round an island there below,<br>
The island of Shalott.</p>

4.8.4.4.9 リンクを持たず、1つのより大きな画像を形成する画像のグループ

1つの画像が複数の小さな画像ファイルに分割され、それらを一緒に表示して再び完全な画像を形成する場合、画像のうち1つは、画像全体に適用される関連規則に従って、そのalt 属性を設定しなければならず、残りのすべての画像は、そのalt 属性を空文字列に設定しなければなりません。

次の例では、XYZ Corpの会社ロゴを表す画像が2つの部分に分割されており、最初の部分には「XYZ」という文字が、 2番目の部分には「Corp」という語が含まれています。代替テキスト（「XYZ Corp」）は、すべて最初の画像にあります。

<h1><img src="logo1.png" alt="XYZ Corp"><img src="logo2.png" alt=""></h1>

次の例では、評価が3つの塗りつぶされた星と2つの空の星で示されています。代替テキストを「★★★☆☆」とすることもできましたが、作成者は代わりに、より役立つよう「5段階中3」という形式で評価を示すことにしました。これは最初の画像の代替テキストであり、残りの画像は空の代替テキストを持ちます。

<p>Rating: <meter max=5 value=3><img src="1" alt="3 out of 5"
  ><img src="1" alt=""><img src="1" alt=""><img src="0" alt=""
  ><img src="0" alt=""></meter></p>

4.8.4.4.10 リンクを持ち、1つのより大きな画像を形成する画像のグループ

一般に、リンクのために画像を分割する代わりに、イメージマップを使用するべきです。

ただし、画像が実際に分割され、その分割画像の構成部分のいずれかがリンクの唯一の内容である場合、リンクごとに1つの画像が、リンクの目的を表す代替テキストをそのalt 属性に持たなければなりません。

次の例では、空飛ぶスパゲッティ・モンスターの紋章を表す画像が、左側の麺状の付属肢と右側の麺状の付属肢で別々の画像になっており、ユーザーが冒険の中で左側または右側を選択できるようになっています。

<h1>The Church</h1>
<p>You come across a flying spaghetti monster. Which side of His
Noodliness do you wish to reach out for?</p>
<p><a href="?go=left" ><img src="fsm-left.png"  alt="Left side. "></a
  ><img src="fsm-middle.png" alt=""
  ><a href="?go=right"><img src="fsm-right.png" alt="Right side."></a></p>

4.8.4.4.11 コンテンツの重要な部分

場合によっては、画像がコンテンツの不可欠な部分であることがあります。これは、たとえばフォトギャラリーの一部であるページなどに当てはまります。画像こそが、それを含むページの 主目的です。

コンテンツの重要な部分である画像に代替テキストを提供する方法は、画像の由来によって異なります。

一般的な場合

詳細な代替テキストを提供できる場合、たとえば画像が雑誌レビューの一連のスクリーンショットの一部、漫画の一部、またはその写真について述べるブログ記事内の写真である場合、画像の代わりとして機能できるテキストを alt属性の内容として指定しなければなりません。

新しいOSのスクリーンショットギャラリー内の、代替テキストを持つスクリーンショット：

<figure>
 <img src="KDE%20Light%20desktop.png"
      alt="The desktop is blue, with icons along the left hand side in
           two columns, reading System, Home, K-Mail, etc. A window is
           open showing that menus wrap to a second line if they
           cannot fit in the window. The window has a list of icons
           along the top, with an address bar below it, a list of
           icons for tabs along the left edge, a status bar on the
           bottom, and two panes in the middle. The desktop has a bar
           at the bottom of the screen with a few buttons, a pager, a
           list of open applications, and a clock.">
 <figcaption>Screenshot of a KDE desktop.</figcaption>
</figure>

財務報告書内のグラフ：

<img src="sales.gif"
     title="Sales graph"
     alt="From 1998 to 2005, sales increased by the following percentages
     with each year: 624%, 75%, 138%, 40%, 35%, 9%, 21%">

売上グラフの代替テキストとして「売上グラフ」では不十分であることに注意してください。良いキャプションとなるテキストが、一般に代替テキストとして適切であるとは限りません。

完全な説明が困難な画像

場合によっては、画像の性質上、詳細な代替テキストを提供することが現実的でないことがあります。たとえば、画像が不鮮明であったり、複雑なフラクタルであったり、詳細な地形図であったりする場合です。

このような場合、alt 属性には適切な代替テキストを含めなければなりませんが、多少簡潔であってもかまいません。

画像を十分に表現できるテキストが、単純に存在しない場合もあります。たとえば、ロールシャッハ・インクブロット・テストを有用に説明するために言えることはほとんどありません。ただし、簡潔であっても、説明がある方が何もないよりはましです：

<figure>
 <img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right
 symmetry with indistinct edges, with a small gap in the center, two
 larger gaps offset slightly from the center, with two similar gaps
 under them. The outline is wider in the top half than the bottom
 half, with the sides extending upwards higher than the center, and
 the center extending below the sides.">
 <figcaption>A black outline of the first of the ten cards
 in the Rorschach inkblot test.</figcaption>
</figure>

次の例は、代替テキストの非常に悪い使用方法であることに注意してください：

<!-- This example is wrong. Do not copy it. -->
<figure>
 <img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
 of the first of the ten cards in the Rorschach inkblot test.">
 <figcaption>A black outline of the first of the ten cards
 in the Rorschach inkblot test.</figcaption>
</figure>

このようにキャプションを代替テキストへ含めることは役に立ちません。画像を利用できないユーザーに対して実質的にキャプションを重複させ、 2回同じことを聞かせるだけで、キャプションを1度だけ読んだり聞いたりした場合より役立つわけではないためです。

完全な説明が困難な画像の別の例は、定義上、細部が無限に続くフラクタルです。

次の例は、マンデルブロ集合の画像全体に対する代替テキストを提供する方法の1つを示します。

<img src="ms1.jpeg" alt="The Mandelbrot set appears as a cardioid with
its cusp on the real axis in the positive direction, with a smaller
bulb aligned along the same center line, touching it in the negative
direction, and with these two shapes being surrounded by smaller bulbs
of various sizes.">

同様に、人物の伝記などにおける顔写真は、コンテンツに非常に関連し重要であると考えられますが、テキストで完全に代替することは困難です：

<section class="bio">
 <h1>A Biography of Isaac Asimov</h1>
 <p>Born <b>Isaak Yudovich Ozimov</b> in 1920, Isaac was a prolific author.</p>
 <p><img src="headpics/asimov.jpeg" alt="Isaac Asimov had dark hair, a tall forehead, and wore glasses.
 Later in life, he wore long white sideburns."></p>
 <p>Asimov was born in Russia, and moved to the US when he was three years old.</p>
 <p>...</p>
</section>

このような場合、代替テキスト内で画像自体の存在に言及する必要はなく、実際、そのような記述は推奨されません。ブラウザー自体が画像の存在を報告するため、そのテキストは重複するからです。たとえば、代替テキストが「アイザック・アシモフの写真」であれば、適合するユーザーエージェントは、より有用な「（画像）アイザック・アシモフは黒髪で、額が広く、眼鏡をかけていました……」ではなく、「（画像）アイザック・アシモフの写真」と読み上げる可能性があります。

内容が不明な画像

残念ながら、代替テキストをまったく利用できない場合があります。これは、関連する代替テキストなしに何らかの自動的な方法で画像が取得されるため（たとえばウェブカメラ）、ユーザーが提供した画像を使用してスクリプトがページを生成しているもののユーザーが適切または使用可能な代替テキストを提供しなかったため（たとえば写真共有サイト）、または作成者自身が画像が何を表すかを知らないため（たとえば視覚障害のある写真家がブログで画像を共有する場合）です。

このような場合、alt 属性を省略してもかまいませんが、さらに次の条件のいずれかを満たさなければなりません：

img要素が、要素間空白以外の内容を持つfigcaption 要素を含む figure 要素内にあり、かつ、 figcaption 要素とその子孫を無視したとき、figure 要素が、要素間空白および img要素以外のフローコンテンツの子孫を持たないこと。
title属性が存在し、空でない値を持つこと。

title属性に依存することは、多くのユーザーエージェントが、この仕様で要求されているようなアクセシブルな方法で属性を公開していないため、現在は推奨されません（たとえばツールチップを表示するためにマウスなどのポインティングデバイスを必要とし、キーボードのみを使用するユーザーや、最新の電話またはタブレットを使用する人など、タッチのみを使用するユーザーを除外します）。

このような場合は、絶対的な最小限に抑えなければなりません。作成者が実際の代替テキストを提供できる可能性が少しでもある場合、alt属性を省略することは許容されません。

写真共有サイト上の写真について、サイトがキャプション以外のメタデータを持たない画像を受信した場合、次のようにマークアップできます：

<figure>
 <img src="1100670787_6a7c664aef.jpg">
 <figcaption>Bubbles traveled everywhere with us.</figcaption>
</figure>

ただし、画像の重要な部分に関する詳細な説明をユーザーから取得し、ページに含める方が望ましいでしょう。

視覚障害のあるユーザーのブログに、そのユーザーが撮影した写真が表示される場合。当初、ユーザーは自分が撮影した写真に何が写っているかまったく分からない可能性があります：

<article>
 <h1>I took a photo</h1>
 <p>I went out today and took a photo!</p>
 <figure>
  <img src="photo2.jpeg">
  <figcaption>A photograph taken blindly from my front porch.</figcaption>
 </figure>
</article>

ただし、最終的には、ユーザーが友人から画像の説明を得て、代替テキストを含められるようになる可能性があります：

<article>
 <h1>I took a photo</h1>
 <p>I went out today and took a photo!</p>
 <figure>
  <img src="photo2.jpeg" alt="The photograph shows my squirrel
  feeder hanging from the edge of my roof. It is half full, but there
  are no squirrels around. In the background, out-of-focus trees fill the
  shot. The feeder is made of wood with a metal grate, and it contains
  peanuts. The edge of the roof is wooden too, and is painted white
  with light blue streaks.">
  <figcaption>A photograph taken blindly from my front porch.</figcaption>
 </figure>
</article>

画像の要点そのものが、テキストによる説明を利用できず、ユーザーが説明を提供することにある場合もあります。たとえば、CAPTCHA画像の目的は、ユーザーが実際にグラフィックを読めるかどうかを確認することです。CAPTCHAをマークアップする方法の1つを次に示します（title属性に注意してください）：

<p><label>What does this image say?
<img src="captcha.cgi?id=8934" title="CAPTCHA">
<input type=text name=captcha></label>
(If you cannot see the image, you can use an <a
href="?audio">audio</a> test instead.)</p>

別の例として、正しい代替テキストを持つページを作成することを目的として、画像を表示し、代替テキストの入力を求めるソフトウェアがあります。このようなページは、次のような画像の表を持つことができます：

<table>
 <thead>
  <tr> <th> Image <th> Description
 <tbody>
  <tr>
   <td> <img src="2421.png" title="Image 640 by 100, filename 'banner.gif'">
   <td> <input name="alt2421">
  <tr>
   <td> <img src="2422.png" title="Image 200 by 480, filename 'ad3.gif'">
   <td> <input name="alt2422">
</table>

この例でも、可能な限り多くの有用な情報が、依然としてtitle属性に含まれていることに注意してください。

一部のユーザーは画像をまったく利用できないため（たとえば接続が非常に遅い、テキスト専用ブラウザーを使用している、ハンズフリーの自動車用音声ウェブブラウザーによるページの読み上げを聞いている、または単に視覚障害があるため）、alt属性を代替テキストとともに提供する代わりに省略することが許可されるのは、上記の例のように、代替テキストを利用できず、かつ利用可能にすることもできない場合に限られます。作成者が努力を怠ったことは、alt属性を省略する許容可能な理由ではありません。

4.8.4.4.12 ユーザー向けではない画像

一般に、作成者は画像を表示する以外の目的でimg要素を使用することを避けるべきです。

img 要素が画像を表示する以外の目的、たとえばページビューを数えるサービスの一部として使用される場合、alt属性は空文字列でなければなりません。

このような場合、width属性とheight属性は、どちらも0に設定するべきです。

4.8.4.4.13 画像を表示できることが分かっている特定の人物向けのメールまたは私的文書内の画像

この節は、一般にアクセス可能な文書、またはウェブサイト上の文書、公開メーリングリストに送信されるメール、ソフトウェア文書など、対象読者が必ずしも作成者に個人的に知られているわけではない文書には適用されません。

画像を表示できることが分かっている特定の人物を対象とする私的な通信（HTMLメールなど）に画像が含まれる場合、alt 属性を省略してもかまいません。ただし、このような場合でも、画像をサポートしないメールクライアントをユーザーが使用する場合、または文書が画像を容易に見ることができない他のユーザーへ転送される場合でもメールを使用できるようにするため、作成者には代替テキスト（上記の項目で説明した、関係する画像の種類に応じて適切なもの）を含めることを強く推奨します。

4.8.4.4.14 マークアップ生成器向けの指針

マークアップ生成器（WYSIWYG作成ツールなど）は、可能な限り、ユーザーから代替テキストを取得するべきです。ただし、多くの場合、それが不可能であることも認識されています。

リンクの唯一の内容である画像について、マークアップ生成器はリンク先を調べ、リンク先のタイトルまたはURLを判断し、この方法で取得した情報を代替テキストとして使用するべきです。

キャプションを持つ画像について、マークアップ生成器はfigure要素と figcaption 要素、またはtitle 属性を使用して、画像のキャプションを提供するべきです。

最後の手段として、実装者は、画像が情報を何も追加しないものの周囲のコンテンツに固有である純粋に装飾的な画像であると仮定して、alt 属性を空文字列に設定するか、画像がコンテンツの重要な部分であると仮定して、 alt属性を完全に省略するべきです。

マークアップ生成器は、代替テキストを取得できず、そのためalt属性を省略した img 要素に、generator-unable-to-provide-required-alt 属性を指定してもかまいません。この属性の値は空文字列でなければなりません。このような属性を含む文書は適合しませんが、適合性チェッカーはこのエラーを黙って無視します。

これは、最新の自動適合性チェッカーが偽の代替テキストと正しい代替テキストを区別できないため、マークアップ生成器がalt属性を省略するエラーを、偽の代替テキストを提供するというさらに悪質なエラーに置き換えるよう圧力を受けることを避けるためのものです。

マークアップ生成器は一般に、画像自体のファイル名を代替テキストとして使用することを避けるべきです。同様に、マークアップ生成器は、表示用ユーザーエージェント（たとえばウェブブラウザー）でも同じように利用できる内容から代替テキストを生成することを避けるべきです。

これは、ページが一度生成されると通常は更新されない一方、後でページを読み取るブラウザーはユーザーによって更新できるため、ブラウザーの方が、マークアップ生成器がページを生成した時点よりも最新かつ精密に調整されたヒューリスティックを持つ可能性が高いためです。

4.8.4.4.15 適合性チェッカー向けの指針

適合性チェッカーは、次に示す条件のいずれかが適用されない限り、alt 属性がないことをエラーとして報告しなければなりません：

img 要素が、上記の条件を満たすfigure 要素内にある。
img 要素が、空文字列ではない値を持つtitle 属性を持つ（これも上記で説明したとおり）。
適合性チェッカーが、文書を、画像を表示できることが分かっている特定の人物向けのメールまたは文書であると仮定するよう設定されている。
img 要素が、値が空文字列である（不適合な）generator-unable-to-provide-required-alt 属性を持つ。alt 属性がないことをエラーとして報告しない適合性チェッカーは、空のgenerator-unable-to-provide-required-alt 属性が存在することもエラーとして報告してはなりません。（この場合は、文書が適合している場合を表すものではなく、生成器が適切な代替テキストを判断できなかったことのみを表します。バリデーターはこの場合にエラーを表示する必要はありません。そのようなエラーは、バリデーターを黙らせることのみを目的として、マークアップ生成器が偽の代替テキストを含めることを助長する可能性があるためです。当然、適合性チェッカーは、generator-unable-to-provide-required-alt 属性が存在する場合でも、alt属性がないことをエラーとして報告してもかまいません。たとえば、マークアップ生成器を使用したことによる多かれ少なかれ避けられない結果である可能性のあるものも含め、すべての適合性エラーを報告するユーザーオプションが存在する場合があります。）

4.8.5 `iframe`要素

Element/iframe

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera15+Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android14+

HTMLIFrameElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

HTMLIFrameElement/src

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLObjectElement/width

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLObjectElement/height

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

埋め込みコンテンツ。

埋め込みコンテンツが期待される場所。

なし。

text/htmlにおけるタグの省略：

どちらのタグも省略できません。

コンテンツ属性：

グローバル属性

src — リソースのアドレス

srcdoc — iframe内でレンダリングする文書

name — コンテンツナビガブルの名前

sandbox — 入れ子のコンテンツに対するセキュリティ規則

allow — iframeの内容に適用される権限ポリシー

allowfullscreen — iframeの内容による requestFullscreen()の使用を許可するかどうか

width — 水平方向の寸法

height — 垂直方向の寸法

referrerpolicy — 要素によって開始されるフェッチに対するリファラーポリシー

loading — 読み込みの延期を決定するときに使用

[Exposed=Window]
interface HTMLIFrameElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, ReflectURL] attribute USVString src;
  [CEReactions] attribute (TrustedHTML or DOMString) srcdoc;
  [CEReactions, Reflect] attribute DOMString name;
  [SameObject, PutForwards=value, Reflect] readonly attribute DOMTokenList sandbox;
  [CEReactions, Reflect] attribute DOMString allow;
  [CEReactions, Reflect] attribute boolean allowFullscreen;
  [CEReactions, Reflect] attribute DOMString width;
  [CEReactions, Reflect] attribute DOMString height;
  [CEReactions] attribute DOMString referrerPolicy;
  [CEReactions] attribute DOMString loading;
  readonly attribute Document? contentDocument;
  readonly attribute WindowProxy? contentWindow;
  Document? getSVGDocument();

  // also has obsolete members
};

iframe要素は、そのコンテンツナビガブルを表します。

src属性は、要素のコンテンツナビガブルに含めるページのURLを指定します。この属性が存在する場合、空白で囲まれている可能性がある妥当な空でない URLでなければなりません。itemprop 属性が iframe要素に指定されている場合、 src属性も指定しなければなりません。

Element/iframe#attr-srcdoc

現在のすべてのエンジンでサポートされています。

Firefox25+Safari6+Chrome20+

Opera?Edge79+

Edge（旧版）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android?

srcdoc 属性は、要素のコンテンツナビガブルに含めるページの内容を指定します。属性の値は、Documentであり、そのURLがabout:srcdocに一致するiframe srcdoc文書を構築するために使用されます。

srcdoc属性が存在する場合、その値は、次の構文上の構成要素を指定された順序で含むHTML構文を使用しなければなりません：

任意の数のコメントおよびASCII 空白。
任意で、DOCTYPE。
任意の数のコメントおよびASCII 空白。
html要素の形式による文書要素。
任意の数のコメントおよびASCII 空白。

上記の要件は、XML文書にも適用されます。

ここではブログが、以下で説明するsandbox 属性と組み合わせてsrcdoc属性を使用し、この機能をサポートするユーザーエージェントのユーザーに対して、ブログ投稿のコメント内のスクリプトインジェクションからの追加の保護層を提供しています：

<article>
 <h1>I got my own magazine!</h1>
 <p>After much effort, I've finally found a publisher, and so now I
 have my own magazine! Isn't that awesome?! The first issue will come
 out in September, and we have articles about getting food, and about
 getting in boxes, it's going to be great!</p>
 <footer>
  <p>Written by <a href="/users/cap">cap</a>, 1 hour ago.
 </footer>
 <article>
  <footer> Thirteen minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
  <iframe sandbox srcdoc="<p>did you get a cover picture yet?"></iframe>
 </article>
 <article>
  <footer> Nine minutes ago, <a href="/users/cap">cap</a> wrote: </footer>
  <iframe sandbox srcdoc="<p>Yeah, you can see it <a href=&quot;/gallery?mode=cover&amp;amp;page=1&quot;>in my gallery</a>."></iframe>
 </article>
 <article>
  <footer> Five minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
  <iframe sandbox srcdoc="<p>hey that's earl's table.
<p>you should get earl&amp;amp;me on the next cover."></iframe>
 </article>

引用符をエスケープする必要があること（そうしないとsrcdoc属性が途中で終了します）、およびサンドボックス化された内容内で言及される生のアンパサンド（たとえばURLまたは文章内のもの）を 二重にエスケープする必要があることに注意してください。最初は、 srcdoc属性を最初に解析するときにアンパサンドを保持するためであり、もう1回は、サンドボックス化された内容を解析するときにアンパサンドが誤って解釈されることを防ぐためです。

さらに、iframe srcdoc文書ではDOCTYPE が任意であり、html、 head、およびbody要素には省略可能な開始タグと終了タグがあり、iframe srcdoc 文書ではtitle要素も任意であるため、 srcdoc属性内のマークアップは、文書全体を表すにもかかわらず比較的簡潔にできます。構文上、文字どおりに現れる必要があるのは body要素の内容だけだからです。その他の要素も依然として存在しますが、暗黙的に存在するだけです。

HTML構文では、作成者は、属性の内容を囲むためにU+0022 QUOTATION MARK文字（"）を使用し、すべてのU+0026 AMPERSAND（&）文字とU+0022 QUOTATION MARK（"）文字をエスケープし、さらにsandbox属性を指定して、内容を安全に埋め込むことだけを覚えておけばよいです。（また、引用符が&quot;ではなく"となるように、引用符より先にアンパサンドをエスケープすることを忘れないでください。）

XMLでは、U+003C LESS-THAN SIGN文字（<）もエスケープする必要があります。属性値の正規化を防ぐため、XMLの空白文字の一部、具体的にはU+0009 CHARACTER TABULATION（タブ）、U+000A LINE FEED（LF）、およびU+000D CARRIAGE RETURN（CR）もエスケープする必要があります。[XML]

src 属性とsrcdoc 属性が両方とも指定された場合、srcdoc属性が優先されます。これにより作成者は、srcdoc属性をサポートしない旧来のユーザーエージェント向けに、フォールバックとなるURLを提供できます。

insertedNodeが与えられたとき、iframeのHTML 要素接続後手順は次のとおりです：

insertedNodeがsandbox 属性を持つ場合、その属性の値とinsertedNodeの iframe サンドボックスフラグ集合を指定して、サンドボックス化ディレクティブを解析します。
insertedNodeのために新しい子ナビガブルを作成します。
initialInsertionをtrueに設定して、 insertedNodeの iframe属性を処理します。

removedNodeが与えられたとき、iframeのHTML要素削除手順は、 removedNodeを指定して子ナビガブルを破棄することです。

これは、unloadイベントが一切発火することなく発生します（要素のコンテンツ文書は、アンロードされるのではなく、破棄されます）。

上記のとおり、iframeはシャドウツリー内にある間も処理されますが、その動作の他のいくつかの側面は、シャドウツリーに関して十分に定義されていません。詳細については、issue #763を参照してください。

nullでないコンテンツナビガブルを持つiframe 要素の srcdoc属性が設定、変更、または削除されるたびに、ユーザーエージェントはiframe属性を処理しなければなりません。

同様に、nullでないコンテンツナビガブルを持つものの、srcdoc属性が指定されていないiframe要素の src属性が設定、変更、または削除されるたびに、ユーザーエージェントはiframe属性を処理しなければなりません。

要素elementについて、任意のブール値initialInsertion （デフォルトは false）を使用して、iframe属性を処理するには：

elementのsrcdoc属性が指定されている場合：
1. elementの現在のナビゲーションは遅延読み込みされたブール値を falseに設定します。
2. elementを指定した要素を遅延読み込みするかどうかの手順がtrueを返す場合：
  1. elementの遅延読み込み再開手順を、 srcdocリソースへナビゲートとラベル付けされた手順から始まる、このアルゴリズムの残りに設定します。
  2. elementの現在のナビゲーションは遅延読み込みされたブール値を trueに設定します。
  3. elementについて遅延読み込み要素の交差監視を開始します。
  4. 返します。
3. srcdocリソースへナビゲート：element、about:srcdoc、空文字列、およびelementのsrcdoc 属性の値を指定して、iframeまたは frameをナビゲートします。
  
  結果のDocumentは、 iframe srcdoc文書と見なさなければなりません。
それ以外の場合：
1. urlを、elementおよび initialInsertionを指定してiframe要素と frame要素に共通する属性処理手順を実行した結果とします。
2. urlがnullの場合、返します。
3. urlが about:blankに一致し、 initialInsertionがtrueの場合：
  1. elementを指定してiframe loadイベント手順を実行します。
  2. 返します。
4. referrerPolicyを、elementのreferrerpolicy コンテンツ属性の現在の状態とします。
5. elementの現在のナビゲーションは遅延読み込みされたブール値を falseに設定します。
6. elementを指定した要素を遅延読み込みするかどうかの手順が trueを返す場合：
  1. elementの遅延読み込み再開手順を、 ナビゲートとラベル付けされた手順から始まる、このアルゴリズムの残りに設定します。
  2. elementの現在のナビゲーションは遅延読み込みされたブール値を trueに設定します。
  3. elementについて遅延読み込み要素の交差監視を開始します。
  4. 返します。
7. ナビゲート：element、url、および referrerPolicyを指定して、iframeまたは frameをナビゲートします。

要素 elementとブール値initialInsertionが与えられたとき、iframe要素と frame要素に共通する属性処理手順は次のとおりです：

urlを、URLレコードabout:blankとします。
elementにsrc属性が指定されており、その値が空文字列でない場合：
1. maybeURLを、その属性の値を指定し、 elementのノード文書を基準としてURLをエンコーディング解析した結果とします。
2. maybeURLが失敗でない場合、urlを maybeURLに設定します。
elementのノードナビガブルの包括的祖先ナビガブルに、そのアクティブ文書のURLが、 フラグメントを除外をtrueに設定して urlと等しいナビガブルが含まれる場合、 nullを返します。
urlが about:blankに一致し、 initialInsertionがtrueの場合、elementのコンテンツナビガブルのアクティブ文書とurlを指定して、URLおよび履歴更新手順を実行します。

これは、urlがabout:blank?fooのようなものである場合に必要です。 urlが単なるabout:blankであれば、これは何もしません。
urlを返します。

要素 element、URLurl、リファラーポリシー referrerPolicy、任意の文字列またはnullのsrcdocString（デフォルトは null）、および任意のブール値initialInsertion（デフォルトはfalse）が与えられたとき、 iframeまたはframeをナビゲートするには：

historyHandlingを「auto」とします。
elementのコンテンツナビガブルのアクティブ文書が完全に読み込まれていない場合、 historyHandlingを「replace」に設定します。
elementがiframeである場合：
1. elementの保留中のリソースタイミング開始時刻を、 elementのノード文書の関連するグローバルオブジェクトを指定した現在の高分解能時刻に設定します。
2. elementの保留中のリソースタイミングURLを urlに設定します。
elementのノード文書を使用して、elementのコンテンツナビガブルをurlへナビゲートし、 historyHandlingを historyHandlingに、referrerPolicyをreferrerPolicyに、documentResourceを srcdocStringに、initialInsertionをinitialInsertionに設定します。

各Documentは、iframe読み込み進行中フラグとiframe 読み込み抑制フラグを持ちます。Documentが作成されるとき、これらのフラグは、その Documentについて設定解除されなければなりません。

iframe要素 elementが与えられたとき、iframe loadイベント手順を実行するには：

表明：elementのコンテンツナビガブルは nullではありません。
childDocumentを、elementのコンテンツナビガブルのアクティブ文書とします。
childDocumentのiframe 読み込み抑制フラグが設定されている場合、返します。
elementの保留中のリソースタイミング開始時刻が nullでない場合：
1. 表明：elementの保留中のリソースタイミングURLは nullではありません。
2. globalを、elementのノード文書の関連するグローバルオブジェクトとします。
3. fallbackTimingInfoを、その開始時刻がelementの保留中のリソースタイミング開始時刻であり、その応答終了時刻が、globalを指定した現在の高分解能時刻である、新しいフェッチタイミング情報とします。
4. fallbackTimingInfo、elementの保留中のリソースタイミングURLを解析した結果、「iframe」、 global、空文字列、新しい応答本文情報、および0を指定して、リソースタイミングを記録します。
5. elementの保留中のリソースタイミング開始時刻を nullに設定します。
6. elementの保留中のリソースタイミングURLを nullに設定します。
childDocumentのiframe読み込み進行中フラグを設定します。
elementで、loadという名前のイベントを発火します。
childDocumentのiframe読み込み進行中フラグを設定解除します。

これはスクリプトと組み合わせることで、ローカルネットワーク上の HTTPサーバーのURL空間を調査するために使用できます。ユーザーエージェントは、この攻撃を軽減するため、上記よりも厳格なクロスオリジンアクセス制御ポリシーを実装してもかまいませんが、残念ながら、そのようなポリシーは通常、既存のウェブコンテンツと互換性がありません。

要素型がloadイベントを遅延させる可能性がある場合、その型の各要素 elementについて、elementのコンテンツナビガブルがnullでなく、次のいずれかがtrueである場合、ユーザーエージェントは elementのノード文書のloadイベントを遅延させなければなりません：

elementのコンテンツナビガブルのアクティブ文書が読み込み後タスクの準備ができていない；
elementのコンテンツナビガブルの loadイベントを遅延させているがtrueである；または
何かが、elementのコンテンツナビガブルのアクティブ文書のload イベントを遅延させている。

loadイベントの処理中に、 elementのコンテンツナビガブルが再びナビゲートされた場合、それによってさらにloadイベントが遅延します。

各iframe要素は、初期値がfalseである、関連付けられた現在のナビゲーションは遅延読み込みされたブール値を持ちます。これはiframe属性を処理するアルゴリズムで設定および設定解除されます。

現在のナビゲーションは遅延読み込みされたブール値が falseであるiframe要素は、 loadイベントを遅延させる可能性があります。

各 iframe 要素には、 null または DOMHighResTimeStamp である、関連付けられた保留中のリソースタイミング開始時刻があり、初期状態では null に設定される。

各iframe要素は、初期値がnullである、関連付けられたnullまたは URLの保留中のリソースタイミングURLを持ちます。

要素が作成されたとき、srcdoc属性が設定されておらず、src属性も設定されていないか、設定されていてもその値を解析できない場合、要素のコンテンツナビガブルは、初期 about:blankのDocumentにとどまります。

ユーザーがこのページから別の場所へナビゲートした場合、 iframeのコンテンツナビガブルのアクティブな WindowProxyオブジェクトは、新しい Documentオブジェクトに対する新しいWindowオブジェクトをプロキシしますが、 src属性は変更されません。

name 属性が存在する場合、妥当なナビガブルターゲット名でなければなりません。指定された値は、要素のコンテンツナビガブルが作成されるときに存在する場合、その名前として使用されます。

Element/iframe#attr-sandbox

現在のすべてのエンジンでサポートされています。

Firefox17+Safari5+Chrome4+

Opera?Edge79+

Edge（旧版）12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

このsandbox 属性は、指定されると、iframeによってホストされるすべてのコンテンツに対して追加の制限一式を有効にします。その値は、一意なスペース区切りトークンの順序なし集合でなければならず、トークンはASCII 大文字・小文字不区別です。許可される値は次のとおりです：

allow-downloads
allow-forms
allow-modals
allow-orientation-lock
allow-pointer-lock
allow-popups
allow-popups-to-escape-sandbox
allow-presentation
allow-same-origin
allow-scripts
allow-top-navigation
allow-top-navigation-by-user-activation
allow-top-navigation-to-custom-protocols

この属性が設定されると、コンテンツは一意な不透明オリジンからのものとして扱われ、フォーム、スクリプト、および迷惑となる可能性のあるさまざまなAPIが無効になり、リンクが他のナビガブルをターゲットにすることが防止されます。allow-same-origin キーワードは、コンテンツを不透明オリジンへ強制する代わりに、実際のオリジンからのものとして扱わせます；allow-top-navigation キーワードは、コンテンツがその走査可能なナビガブルをナビゲートすることを許可します； allow-top-navigation-by-user-activation キーワードも同様に動作しますが、閲覧コンテキストのアクティブウィンドウが一時的活性化を持つ場合に限り、そのようなナビゲーションを許可します；allow-top-navigation-to-custom-protocols は、非フェッチスキームへのナビゲーションが外部ソフトウェアへ引き渡されることを再び有効にします；また、allow-forms、 allow-modals、 allow-orientation-lock、 allow-pointer-lock、 allow-popups、 allow-presentation、 allow-scripts、およびallow-popups-to-escape-sandbox キーワードは、それぞれフォーム、モーダルダイアログ、画面方向のロック、ポインターロックAPI、ポップアップ、プレゼンテーションAPI、スクリプト、およびサンドボックス化されていない補助閲覧コンテキストの作成を再び有効にします。allow-downloads キーワードは、コンテンツがダウンロードを実行することを許可します。[POINTERLOCK] [SCREENORIENTATION] [PRESENTATION]

allow-top-navigation およびallow-top-navigation-by-user-activation キーワードを両方指定してはなりません。そうすることは冗長であるためです；そのような不適合なマークアップでは、allow-top-navigation のみが効果を持ちます。

同様に、allow-top-navigation-to-custom-protocols キーワードは、allow-top-navigation またはallow-popups のいずれかが指定されている場合、指定してはなりません。そうすることは冗長であるためです。

サンドボックス化されたコンテンツ内でalert()、confirm()、およびprompt()を許可するには、allow-modals およびallow-same-origin の両方のキーワードを指定する必要があり、読み込まれるURLはトップレベルオリジンと同一オリジンである必要があります。allow-same-origin キーワードがない場合、コンテンツは常にクロスオリジンとして扱われ、クロスオリジンコンテンツは単純ダイアログを表示できません。

埋め込まれたページがiframeを含むページと同一オリジンである場合に、allow-scripts およびallow-same-origin キーワードを一緒に設定すると、埋め込まれたページは単にsandbox 属性を削除してから自身を再読み込みでき、事実上サンドボックスから完全に脱出できます。

これらのフラグは、iframe要素のコンテンツナビガブルがナビゲートされるときにのみ効果を持ちます。これらを削除すること、またはsandbox属性全体を削除することは、すでに読み込まれたページには影響しません。

敵対的である可能性のあるファイルは、iframe要素を含むファイルと同じサーバーから提供するべきではありません。攻撃者が、敵対的なコンテンツをiframe内ではなく直接訪問するようユーザーを説得できる場合、敵対的なコンテンツをサンドボックス化してもほとんど役に立ちません。敵対的なHTMLコンテンツによって引き起こされ得る損害を制限するため、そのコンテンツは専用の別ドメインから提供するべきです。異なるドメインを使用することで、ユーザーがだまされて、sandbox属性による保護なしにそれらのページを直接訪問した場合でも、ファイル内のスクリプトがサイトを攻撃できなくなります。

非nullのコンテンツナビガブルを持つ間に、iframe要素のsandbox属性が設定または変更された場合、ユーザーエージェントは、その属性値とiframe要素のiframe サンドボックス化フラグ集合を指定して、サンドボックス化指令を解析しなければなりません。

非nullのコンテンツナビガブルを持つ間に、iframe要素のsandbox属性が削除された場合、ユーザーエージェントは、iframe要素のiframeサンドボックス化フラグ集合を空にしなければなりません。

この例では、内容が完全に不明で、敵対的である可能性のあるユーザー提供のHTMLコンテンツがページに埋め込まれています。別のドメインから提供されるため、通常のすべてのクロスサイト制限の影響を受けます。さらに、埋め込まれたページではスクリプト、プラグイン、およびフォームが無効化され、自身以外のフレームまたはウィンドウ（あるいは自身が埋め込んだフレームまたはウィンドウ）をナビゲートできません。

<p>We're not scared of you! Here is your content, unedited:</p>
<iframe sandbox src="https://usercontent.example.net/getusercontent.cgi?id=12193"></iframe>

別のドメインを使用することが重要です。攻撃者がそのページを直接訪問するようユーザーを説得した場合でも、そのページがサイトのオリジンのコンテキストで実行されず、ページ内で見つかった攻撃に対してユーザーが脆弱にならないようにするためです。

この例では、別のサイトのガジェットが埋め込まれています。このガジェットではスクリプトとフォームが有効であり、オリジンに関するサンドボックス制限も解除されているため、ガジェットは元のサーバーと通信できます。それでもサンドボックスは、プラグインとポップアップを無効にし、ユーザーがマルウェアやその他の迷惑行為にさらされる危険を減らすため、有用です。

<iframe sandbox="allow-same-origin allow-forms allow-scripts"
        src="https://maps.example.com/embedded.html"></iframe>

ファイルAに次の断片が含まれているとします：

<iframe sandbox="allow-same-origin allow-forms" src=B></iframe>

ファイルBにもiframeが含まれているとします：

<iframe sandbox="allow-scripts" src=C></iframe>

さらに、ファイルCにリンクが含まれているとします：

<a href=D>Link</a>

この例では、すべてのファイルがtext/htmlとして提供されるものとします。

このシナリオのページCでは、すべてのサンドボックス化フラグが設定されています。スクリプトは無効です。これは、A内のiframeでスクリプトが無効にされており、B内のiframeに設定された allow-scripts キーワードよりも優先されるためです。フォームも無効です。これは、内側のiframe（B内）に allow-forms キーワードが設定されていないためです。

ここで、A内のスクリプトがAおよびB内のすべてのsandbox属性を削除するとします。これによって直ちに何かが変化することはありません。ユーザーがC内のリンクをクリックして、ページDがB内のiframeへ読み込まれると、ページDは、B内のiframeに allow-same-origin およびallow-forms キーワードが設定されているかのように動作します。これは、ページBが読み込まれた時点で、A内のiframeにあるコンテンツナビガブルがその状態であったためです。

一般に、sandbox属性を動的に削除または変更することは推奨されません。何が許可され、何が許可されないかを判断することが非常に困難になる可能性があるためです。

このallow 属性は、指定されると、iframeのコンテンツナビガブル内の Documentについて権限ポリシーが初期化されるときに使用されるコンテナーポリシーを決定します。その値は、シリアル化された権限ポリシーでなければなりません。[PERMISSIONSPOLICY]

この例では、iframeを使用して、オンラインナビゲーションサービスの地図を埋め込んでいます。allow属性を使用して、入れ子になったコンテキスト内でGeolocation APIを有効にしています。

<iframe src="https://maps.example.com/" allow="geolocation"></iframe>

このallowfullscreen属性はブール属性です。指定されると、iframe要素のコンテンツナビガブル内の Documentオブジェクトが、任意のオリジンから「fullscreen」機能を使用できるようにする権限ポリシーで初期化されることを示します。これは、権限ポリシー属性を処理するアルゴリズムによって強制されます。[PERMISSIONSPOLICY]

ここでは、iframeを使用して、動画サイトのプレーヤーを埋め込んでいます。allowfullscreen 属性は、プレーヤーが動画を全画面表示できるようにするために必要です。

<article>
 <header>
  <p><img src="/usericons/1627591962735"> <b>Fred Flintstone</b></p>
  <p><a href="/posts/3095182851" rel=bookmark>12:44</a> — <a href="#acl-3095182851">Private Post</a></p>
 </header>
 <p>Check out my new ride!</p>
 <iframe src="https://video.example.com/embed?id=92469812" allowfullscreen></iframe>
</article>

allowもallowfullscreen も、iframe要素のコンテンツナビガブル内の機能へのアクセスを、その要素のノード文書がその機能の使用をまだ許可されていない場合に付与することはできません。

Documentオブジェクト documentが、ポリシー制御機能featureの使用を許可されているかどうかを判断するには、次の手順を実行します：

documentの閲覧コンテキストがnullの場合、falseを返します。
documentが完全にアクティブでない場合、 falseを返します。
feature、document、およびdocumentのオリジンについて、オリジンについて文書内で機能が有効かを実行した結果が「Enabled」の場合、 trueを返します。
falseを返します。

allow属性とallowfullscreen 属性は、iframeのコンテンツナビガブルのアクティブ文書の権限ポリシーにのみ影響するため、コンテンツナビガブルがナビゲートされるときにのみ効果を持ちます。これらを追加または削除しても、すでに読み込まれた文書には影響しません。

このiframe要素は、埋め込まれたコンテンツが特定の寸法を持つ場合（たとえば、広告ユニットは明確に定義された寸法を持ちます）のために、寸法属性をサポートします。

iframe要素は、指定された初期コンテンツが正常に使用されるかどうかにかかわらず、常に新しい子ナビガブルを作成するため、フォールバックコンテンツを持つことはありません。

このreferrerpolicy属性は、リファラーポリシー属性です。その目的は、iframe 属性を処理するときに使用されるリファラーポリシーを設定するとともに、内部祖先オリジンオブジェクトリスト作成手順において、一部のオリジンのマスクを可能にすることです。[REFERRERPOLICY]

このloading属性は、遅延読み込み属性です。その目的は、ビューポートの外側にあるiframe 要素を読み込むためのポリシーを示すことです。

loading属性の状態が即時状態へ変更された場合、ユーザーエージェントは次の手順を実行しなければなりません：

resumptionStepsを、iframe要素の遅延読み込み再開手順とします。
resumptionStepsがnullの場合、返します。
iframeの遅延読み込み再開手順をnullに設定します。
resumptionStepsを呼び出します。

iframe要素の子孫は何も表しません。（iframe要素をサポートしない旧来のユーザーエージェントでは、その内容はフォールバックコンテンツとして機能し得るマークアップとして解析されます。）

HTMLパーサーは、iframe要素内のマークアップをテキストとして扱います。

HTMLIFrameElement/srcdoc

現在のすべてのエンジンでサポートされています。

Firefox25+Safari6+Chrome20+

Opera?Edge79+

Edge（旧版）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

このsrcdocの取得手順は次のとおりです：

attributeを、null、srcdocのローカル名、およびthisを指定して、名前空間とローカル名で属性を取得する結果とします。
attributeがnullの場合、空文字列を返します。
attributeの値を返します。

srcdocの設定手順は次のとおりです：

compliantStringを、TrustedHTML、 thisの関連するグローバルオブジェクト、指定された値、「HTMLIFrameElement srcdoc」、および「script」を使用して、Trusted Type 準拠文字列を取得するアルゴリズムを呼び出した結果とします。
this、srcdocのローカル名、およびcompliantStringを指定して、属性値を設定します。

sandboxのDOMTokenListについてサポートされるトークンは、sandbox属性で定義され、ユーザーエージェントによってサポートされる許可された値です。

HTMLIFrameElement/referrerPolicy

現在のすべてのエンジンでサポートされています。

Firefox50+Safari14+Chrome52+

Opera?Edge79+

Edge（旧版）?Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

このreferrerPolicy IDL属性は、referrerpolicy コンテンツ属性を、既知の値のみに制限して反映しなければなりません。

このloading IDL属性は、loadingコンテンツ属性を、既知の値のみに制限して反映しなければなりません。

HTMLIFrameElement/contentDocument

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer8+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

このcontentDocumentの取得手順は、thisのコンテンツ文書を返すことです。

HTMLIFrameElement/contentWindow

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera8+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

このcontentWindowの取得手順は、thisのコンテンツウィンドウを返すことです。

次は、広告仲介業者からの広告を含めるためにiframeを使用するページの例です：

<iframe src="https://ads.example.com/?customerid=923513721&amp;format=banner"
        width="468" height="60"></iframe>

4.8.6 `embed` 要素

Element/embed

現在のすべてのエンジンでサポートされています。

Firefox1+Safari4+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLEmbedElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

埋め込みコンテンツが期待される場所。

なし。

text/htmlにおけるタグの省略：

終了タグはありません。

コンテンツ属性：

グローバル属性

src — リソースのアドレス

type — 埋め込まれるリソースの種別

width — 水平方向の寸法

height — 垂直方向の寸法

名前空間を持たないその他の任意の属性（本文を参照）。

[Exposed=Window]
interface HTMLEmbedElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, ReflectURL] attribute USVString src;
  [CEReactions, Reflect] attribute DOMString type;
  [CEReactions, Reflect] attribute DOMString width;
  [CEReactions, Reflect] attribute DOMString height;
  Document? getSVGDocument();

  // also has obsolete members
};

embed要素は、外部アプリケーションまたはインタラクティブコンテンツの統合点を提供します。

src属性は、埋め込まれるリソースのURLを示します。この属性が存在する場合、その値には前後を空白で囲まれている可能性がある妥当な空でないURLを含めなければなりません。

itemprop 属性がembed要素に指定されている場合、src属性も指定しなければなりません。

type属性が存在する場合、インスタンス化するプラグインを選択する際に用いるMIMEタイプを示します。その値は妥当なMIMEタイプ文字列でなければなりません。type属性とsrc属性の両方が存在する場合、 type属性は、src属性によって指定されるリソースの明示的なContent-Typeメタデータと同じタイプを指定しなければなりません。

次のいずれかの条件が成立している間、要素についてインスタンス化されたすべてのプラグインを削除しなければならず、embed要素は何も表しません：

要素がsrc属性もtype属性も持たない。
要素が祖先にメディア要素を持つ。
要素が、フォールバックコンテンツを表示していない 祖先のobject要素を持つ。

embed要素は、次の条件がすべて同時に満たされる場合、潜在的にアクティブであるといいます：

要素が文書内にあるか、またはイベントループが最後に手順 1へ到達した時点で文書内にあった。
要素のノード文書が完全にアクティブである。
要素にsrc属性または type属性のいずれか（または両方）が設定されている。
要素のsrc 属性が存在しないか、その値が空文字列ではない。
要素がメディア要素の子孫ではない。
要素が、フォールバックコンテンツを表示していないobject要素の子孫ではない。
要素がレンダリングされているか、またはイベントループが最後に手順1へ到達した時点でレンダリングされていた。

潜在的にアクティブではなかったembed要素が潜在的にアクティブになるたび、また、潜在的にアクティブなままであるembed要素のsrc属性が設定、変更、または削除されるか、そのtype属性が設定、変更、または削除されるたびに、ユーザーエージェントは、その要素についてembed要素のセットアップ手順を実行するため、その要素を指定してembedタスクソース上で要素タスクをキューに追加しなければなりません。

指定されたembed要素 elementについてのembed要素のセットアップ手順は次のとおりです：

その後、elementについてembed要素のセットアップ手順を実行する別のタスクがキューに追加されている場合、返します。
elementにsrc属性が設定されている場合：
1. urlを、elementのノード文書を基準として、elementのsrc属性の値を指定して URLをエンコーディング解析する結果とします。
2. urlが失敗の場合、返します。
3. requestを、URLがurl、クライアントが elementのノード文書の関連設定オブジェクト、宛先が「embed」、資格情報モードが「include」、モードが「navigate」、起動元タイプが「embed」であり、URL資格情報使用フラグが設定された新しい要求とします。
4. requestをフェッチし、processResponseを、応答 responseが与えられた次の手順に設定します：
  1. その後、elementについてembed要素のセットアップ手順を実行する別のタスクがキューに追加されている場合、返します。
  2. responseがネットワークエラーの場合、elementでloadという名前のイベントを発火し、返します。
  3. typeを、elementおよびresponseを指定してコンテンツの種別を決定した結果とします。
  4. typeに応じて切り替えます：
    null
    elementについてプラグインなしを表示します。
    それ以外
    elementのコンテンツナビガブルがnullの場合、 elementについて新しい子ナビガブルを作成します。
    
    elementのノード文書を使用し、responseをresponseに設定し、 historyHandlingを「replace」に設定して、 elementのコンテンツナビガブルをresponseのURLへナビゲートします。
    
    elementのコンテンツナビガブルがさらに他の場所へナビゲートされた場合でも、elementのsrc属性は更新されません。
    
    elementは、ここでそのコンテンツナビガブルを表します。
  リソースのフェッチは、elementのノード文書のloadイベントを遅延しなければなりません。
それ以外の場合、elementについてプラグインなしを表示します。

embed要素elementおよび応答 responseが与えられたとき、コンテンツの種別を決定するには、次の手順を実行します：

elementがtype属性を持ち、その属性の値がプラグインによってサポートされるタイプである場合、type属性の値を返します。
responseのURLのパス構成要素が、プラグインによってサポートされるパターンに一致する場合、そのプラグインが処理できるタイプを返します。

たとえば、プラグインは、末尾が4文字の文字列「.swf」であるパス構成要素を持つURLを処理できると宣言する場合があります。
responseに明示的なContent-Type メタデータがあり、その値がプラグインによってサポートされるタイプである場合、その値を返します。
nullを返します。

上記のアルゴリズムが、responseに非okステータスを持たせることを許可しているのは意図的です。これにより、サーバーはエラー応答であってもプラグイン用データを返すことができます（たとえば、HTTP 500 Internal Server Errorコードにもプラグイン用データを含められます）。

embed要素elementについてプラグインなしを表示するには：

elementを指定して子ナビガブルを破棄します。
elementの内容として、elementに対応するプラグインが見つからなかったことを示す表示を行います。
elementは、ここで何も表しません。

embed要素にはフォールバックコンテンツがなく、その子孫は無視されます。

潜在的にアクティブであったembed要素が潜在的にアクティブではなくなるたび、その要素についてインスタンス化されていたすべてのプラグインをアンロードしなければなりません。

embed要素は、loadイベントを遅延させる可能性があります。

embed要素は、寸法属性をサポートします。

4.8.7 `object`要素

Element/object

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorerはい

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLObjectElement

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLObjectElement/data

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLObjectElement/type

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLObjectElement/name

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

埋め込みコンテンツ。

埋め込みコンテンツが期待される場所。

透過的。

text/htmlにおけるタグの省略：

どちらのタグも省略できません。

コンテンツ属性：

グローバル属性

data — リソースのアドレス

type — 埋め込まれるリソースの種別

name — コンテンツナビガブルの名前

form — 要素をform要素に関連付ける

width — 水平方向の寸法

height — 垂直方向の寸法

[Exposed=Window]
interface HTMLObjectElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, ReflectURL] attribute USVString data;
  [CEReactions, Reflect] attribute DOMString type;
  [CEReactions, Reflect] attribute DOMString name;
  readonly attribute HTMLFormElement? form;
  [CEReactions, Reflect] attribute DOMString width;
  [CEReactions, Reflect] attribute DOMString height;
  readonly attribute Document? contentDocument;
  readonly attribute WindowProxy? contentWindow;
  Document? getSVGDocument();

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  boolean reportValidity();
  undefined setCustomValidity(DOMString error);

  // also has obsolete members
};

object要素によってインスタンス化されるコンテンツの種別に応じて、ノードはその他のインターフェースもサポートします。

object要素は外部リソースを表すことができ、そのリソースは、その種別に応じて画像または子ナビガブルとして扱われます。

data属性は、リソースのURLを指定します。この属性は存在しなければならず、その値には前後を空白で囲まれている可能性がある妥当な空でないURLを含めなければなりません。

type 属性が存在する場合、リソースの種別を指定します。この属性が存在する場合、その値は妥当な MIMEタイプ文字列でなければなりません。

name 属性が存在する場合、その値は妥当なナビガブルターゲット名でなければなりません。指定された値は、該当する場合、要素のコンテンツナビガブルに名前を付けるために使用され、要素のコンテンツナビガブルが作成されるときに存在している場合に適用されます。

次のいずれかの条件が発生するたびに：

要素が作成された、
要素がHTML パーサーまたはXMLパーサーの開いている要素のスタックから取り出された、
要素がHTMLパーサーまたはXMLパーサーの開いている要素のスタック上になく、かつ文書に挿入されるか、または文書から削除された、
要素のノード文書について、完全にアクティブであるかどうかが変化した、
要素の祖先であるいずれかのobject要素が、フォールバックコンテンツを表示する状態へ、またはその状態から変化した、
要素のclassid属性が設定、変更、または削除された、
要素のclassid属性が存在せず、そのdata属性が設定、変更、または削除された、
要素のclassid属性も data属性も存在せず、そのtype属性が設定、変更、または削除された、
要素がレンダリングされている状態からレンダリングされていない状態へ、またはその逆に変化した、

...ユーザーエージェントは、object 要素を指定して、 DOM 操作タスクソースで要素タスクをキューに入れ、 object 要素が何を表すかを（再）決定するために、次の手順を実行しなければならない。このタスクがキューに入れられているか、または実行中である間は、要素のノード文書の load イベントを遅延させなければならない。

ユーザーが、このobject要素の通常の動作の代わりに、そのフォールバックコンテンツを表示することを希望すると示した場合、下のフォールバックとラベル付けされた手順へ移動します。

たとえば、そのコンテンツがユーザーにとってよりアクセシブルな形式を使用しているため、要素のフォールバックコンテンツを表示するようユーザーが要求する場合があります。
要素が祖先にメディア要素を持つ場合、またはフォールバックコンテンツを表示していない 祖先のobject要素を持つ場合、または要素が非nullの閲覧コンテキストを持つ文書内にない場合、または要素のノード文書が完全にアクティブでない場合、または要素が依然としてHTMLパーサーもしくはXMLパーサーの開いている要素のスタック内にある場合、または要素がレンダリングされていない場合、下の フォールバックとラベル付けされた手順へ移動します。
data属性が存在し、その値が空文字列ではない場合：
1. type属性が存在し、その値がユーザーエージェントによってサポートされるタイプではない場合、ユーザーエージェントは、コンテンツをフェッチして実際のタイプを調べることなく、下のフォールバックとラベル付けされた手順へ移動してもよいです。
2. urlを、要素のノード文書を基準として、data属性の値を指定してURLをエンコーディング解析する結果とします。
3. urlが失敗の場合、要素でerrorという名前のイベントを発火し、下の フォールバックとラベル付けされた手順へ移動します。
4. requestを、URLがurl、クライアントが要素のノード文書の関連設定オブジェクト、宛先が「object」、資格情報モードが「include」、モードが「navigate」、起動元タイプが「object」であり、URL資格情報使用フラグが設定された新しい要求とします。
5. requestをフェッチします。
  
  リソースのフェッチは、リソースがフェッチされた後にネットワークタスクソースによってキューに追加されるタスク（次に定義）が実行されるまで、要素のノード文書のloadイベントを遅延しなければなりません。
6. リソースがまだ利用可能でない場合（たとえば、リソースがキャッシュ内で利用できず、リソースを読み込むためにネットワーク経由で要求を行う必要があった場合）、下の フォールバックとラベル付けされた手順へ移動します。リソースが利用可能になった時点でネットワークタスクソースによってキューに追加されるタスクは、この手順からこのアルゴリズムを再開しなければなりません。リソースは段階的に読み込むことができます。ユーザーエージェントは、リソースの処理を開始するのに十分なデータが取得された時点で、リソースを「利用可能」と見なしてもよいです。
7. 読み込みに失敗した場合（たとえば、HTTP 404エラーまたはDNSエラーが発生した場合）、要素でerrorという名前のイベントを発火し、下の フォールバックとラベル付けされた手順へ移動します。
8. 次のようにresource typeを決定します：
  1. resource typeを不明とします。
  2. ユーザーエージェントが、このリソースについてContent-Typeヘッダーに厳密に従うよう構成されており、リソースに関連付けられた Content-Typeメタデータがある場合、resource typeをリソースのContent-Typeメタデータで指定されたタイプとし、下のハンドラーとラベル付けされた手順へ移動します。
    
    これは脆弱性を生じさせる可能性があります。サイトが特定のタイプを使用するリソースを埋め込もうとしているにもかかわらず、リモートサイトがその指定を上書きし、異なるセキュリティ特性を持つ別の種類のコンテンツを起動するリソースをユーザーエージェントへ提供できるためです。
  3. 次の一覧から適切な一連の手順を実行します：
    リソースに関連付けられたContent-Type メタデータがある場合
    binaryをfalseとします。
    
    リソースのContent-Type メタデータで指定されたタイプが「text/plain」であり、リソースにリソースがテキストかバイナリーかを区別する規則を適用した結果、そのリソースが text/plainではない場合、binaryをtrueに設定します。
    
    リソースのContent-Type メタデータで指定されたタイプが「application/octet-stream」である場合、binaryをtrueに設定します。
    
    binaryがfalseの場合、resource typeをリソースの Content-Typeメタデータで指定されたタイプとし、下のハンドラーとラベル付けされた手順へ移動します。
    
    object要素にtype属性が存在し、その値がapplication/octet-stream ではない場合、次の手順を実行します：
    
    属性値が「image/」で始まるタイプであり、かつXML MIMEタイプではない場合、 resource typeをそのtype属性で指定されたタイプとします。
    
    下のハンドラーとラベル付けされた手順へ移動します。
    それ以外で、リソースに関連付けられた Content-Typeメタデータがない場合
    object要素にtype属性が存在する場合、tentative typeをそのtype属性で指定されたタイプとします。
    
    それ以外の場合、tentative typeをリソースの計算済みタイプとします。
    
    tentative typeがapplication/octet-stream でない場合、resource typeを tentative typeとし、下のハンドラーとラベル付けされた手順へ移動します。
  4. 指定されたリソースのURL（リダイレクト後）にURLパーサーアルゴリズムを適用した結果、URLレコードが得られ、そのパス構成要素がプラグインによってサポートされるパターンに一致する場合、 resource typeをそのプラグインが処理できるタイプとします。
    
    たとえば、プラグインは、末尾が4文字の文字列「.swf」であるパス構成要素を持つリソースを処理できると宣言する場合があります。
  この手順が終了した時点、または上記のいずれかの下位手順から次の手順へ直接移動した時点で、resource typeが依然として不明である可能性があります。どちらの場合も、次の手順によってフォールバックが開始されます。
9. ハンドラー：次のうち最初に一致する場合に従ってコンテンツを処理します：
  
  resource typeがXML MIME タイプである場合、またはresource typeが「image/」で始まらない場合
  
  object要素のコンテンツナビガブルがnullの場合、要素について新しい子ナビガブルを作成します。
  
  responseを、フェッチから得られた応答とします。
  
  responseのURLがabout:blankに一致しない場合、要素のノード文書を使用し、historyHandlingを「replace」に設定して、要素のコンテンツナビガブルをresponseのURLへナビゲートします。
  
  object要素のコンテンツナビガブルがさらに他の場所へナビゲートされた場合でも、そのdata属性は更新されません。
  
  object要素は、そのコンテンツナビガブルを表します。
  
  resource typeが「image/」で始まり、画像のサポートが無効化されていない場合
  
  object要素を指定して子ナビガブルを破棄します。
  
  画像の種別を決定するため、画像スニッフィング規則を適用します。
  
  object要素は、指定された画像を表します。
  
  画像が不正である、またはサポートされていない形式であるなどの理由でレンダリングできない場合、下のフォールバックとラベル付けされた手順へ移動します。
  
  それ以外
  
  指定されたresource typeはサポートされていません。下の フォールバックとラベル付けされた手順へ移動します。
  
  前の手順がresource typeを不明のまま終了した場合、この場合が適用されます。
10. 要素の内容は、object要素が表すものの一部ではありません。
11. object要素がそのコンテンツナビガブルを表していない場合、リソースが完全に読み込まれた時点で、object要素を指定してDOM 操作タスクソース上で要素タスクをキューに追加し、要素でloadという名前のイベントを発火します。
  
  要素がそのコンテンツナビガブルを実際に表す場合、作成されたDocumentの読み込みが完全に完了したときに、同様のタスクがキューに追加されます。
12. 返します。
フォールバック：object要素は、要素の子を表します。これが要素のフォールバックコンテンツです。要素を指定して子ナビガブルを破棄します。

上記のアルゴリズムにより、object要素の内容は、参照されたリソースを表示できない場合（たとえば、404エラーが返された場合）にのみ使用されるフォールバックコンテンツとして機能します。これにより、異なる能力を持つ複数のユーザーエージェントを対象として、複数のobject要素を互いに入れ子にでき、ユーザーエージェントは自身がサポートする最初のものを選択できます。

object要素は、loadイベントを遅延させる可能性があります。

form属性は、 object要素をそのフォーム所有者に明示的に関連付けるために使用されます。

object要素は、寸法属性をサポートします。

HTMLObjectElement/contentDocument

現在のすべてのエンジンでサポートされています。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer8+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

contentDocumentの取得手順は、thisのコンテンツ文書を返すことです。

HTMLObjectElement/contentWindow

現在のすべてのエンジンでサポートされています。

Firefox22+Safari13+Chrome53+

Opera?Edge79+

Edge（旧版）17+Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

contentWindowの取得手順は、thisのコンテンツウィンドウを返すことです。

willValidate、validity、およびvalidationMessage属性、ならびにcheckValidity()、reportValidity()、およびsetCustomValidity()メソッドは、制約検証APIの一部です。formIDL属性は、要素のフォームAPIの一部です。

この例では、object要素を使用して、 HTMLページを別のHTMLページ内に埋め込んでいます。

<figure>
 <object data="clock.html"></object>
 <figcaption>My HTML Clock</figcaption>
</figure>

4.8.8 `video` 要素

Element/video

現在のすべてのエンジンでサポートされています。

Firefox3.5+Safari3.1+Chrome3+

Opera10.5+Edge79+

Edge（レガシー）12+Internet Explorer9+

Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLVideoElement

現在のすべてのエンジンでサポートされています。

Firefox3.5+Safari3.1+Chrome3+

Opera10.5+Edge79+

Edge（レガシー）12+Internet Explorer9+

Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+

要素が controls 属性を持つ場合: インタラクティブコンテンツ。

可触コンテンツ。

この要素を使用できる文脈:

埋め込みコンテンツが期待される場所。

コンテンツモデル:

要素が src 属性を持つ場合: 0 個以上の track 要素、その後に透過的コンテンツ。ただし、子孫にメディア要素を含めてはならない。

要素が src 属性を持たない場合: 0 個以上の source 要素、その後に 0 個以上の track 要素、その後に透過的コンテンツ。ただし、子孫にメディア要素を含めてはならない。

text/html におけるタグの省略:

どちらのタグも省略できない。

コンテンツ属性:

グローバル属性

src — リソースのアドレス

crossorigin — 要素がオリジン間リクエストを処理する方法

poster — 動画再生前に表示するポスターフレーム

preload — メディアリソースに必要になる可能性が高いバッファリング量を示すヒント

autoplay — ページの読み込み時にメディアリソースを自動的に開始できることを示すヒント

playsinline — ユーザーエージェントに、要素の再生領域内で動画コンテンツを表示するよう促す

loop — メディアリソースを繰り返し再生するかどうか

muted — デフォルトでメディアリソースをミュートするかどうか

controls — ユーザーエージェントのコントロールを表示する

loading — 読み込みの遅延を決定するときに使用される

width — 水平方向の寸法

height — 垂直方向の寸法

アクセシビリティに関する考慮事項:

未分類。

[Exposed=Window]
interface HTMLVideoElement : HTMLMediaElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute unsigned long width;
  [CEReactions, Reflect] attribute unsigned long height;
  readonly attribute unsigned long videoWidth;
  readonly attribute unsigned long videoHeight;
  [CEReactions, ReflectURL] attribute USVString poster;
  [CEReactions, Reflect] attribute boolean playsInline;

};

video 要素は、動画や映画、およびキャプション付きの音声ファイルを再生するために使用される。

video 要素内にコンテンツを提供してもよい。ユーザーエージェントは、このコンテンツをユーザーに表示するべきではない。このコンテンツは、 video をサポートしない古いウェブブラウザーを対象とし、そのような古いブラウザーのユーザーに動画コンテンツへアクセスする方法を説明するテキストを表示できるようにすることを意図している。

特に、このコンテンツはアクセシビリティ上の問題に対処することを意図したものではない。弱視者、盲人、難聴者、ろう者、およびその他の身体的または認知的障害を持つ人々が動画コンテンツを利用できるようにするため、さまざまな機能が利用できる。キャプションは、動画ストリームに埋め込むか、 track 要素を使用して外部ファイルとして提供できる。手話トラックは動画ストリームに埋め込むことができる。音声解説は、動画ストリームに埋め込むか、track 要素から参照される WebVTT ファイルを使用してテキスト形式で提供し、ユーザーエージェントに音声として合成させることができる。 WebVTT は章タイトルの提供にも使用できる。メディア要素をまったく使用したくないユーザー向けには、 video 要素の近くの本文からトランスクリプトまたはその他のテキストによる代替にリンクするだけで提供できる。[WEBVTT]

video 要素は、メディアデータが、関連する音声データを伴う場合もある動画データであると想定されるメディア要素である。

video 要素は、 slot 要素を含まない内部シャドーツリーを持つ。

src、crossorigin、 preload、autoplay、 loop、muted、および controls 属性は、すべてのメディア要素に共通する属性である。

poster 属性は、動画データが利用できない間にユーザーエージェントが表示できる画像ファイルの URLを指定する。この属性が存在する場合、その値は空白で囲まれている可能性がある妥当な空でない URLでなければならない。

指定されたリソースを使用する場合、要素が作成されたとき、または poster 属性が設定、変更、もしくは削除されたとき、ユーザーエージェントは、要素のポスター表示フラグの値にかかわらず、要素のポスターフレームを決定するため、次の手順を実行しなければならない。

この video 要素について実行中のこのアルゴリズムの既存のインスタンスがある場合、ポスターフレームを変更せずに、そのアルゴリズムのインスタンスを中止する。
poster 属性の値が空文字列であるか、属性が存在しない場合:
1. video 要素のポスター遅延読み込み再開手順を null に設定する。
2. ポスターフレームは存在しない。 return。
urlを、poster 属性の値を、要素のノード文書を基準として与え、URL をエンコーディング解析した結果とする。
urlが失敗である場合、return。ポスターフレームは存在しない。
requestを新しいリクエストとする。その URLはurl、クライアントは要素のノード文書の関連する設定オブジェクト、宛先は「image」、開始元の種類は「video」、資格情報モードは「include」であり、 URL 資格情報使用フラグが設定されているものとする。
video を与えた要素を遅延読み込みするかの手順が true を返す場合:
1. posterResumptionStepsを、フェッチとラベル付けされた手順から始まるこのアルゴリズムの残りの部分とする。
2. video 要素のポスター遅延読み込み再開手順を posterResumptionStepsに設定する。
3. Return。
requestをフェッチする。これは要素のノード文書の load イベントを遅延させなければならない。
このようにして画像が取得された場合、ポスターフレームはその画像である。それ以外の場合、ポスターフレームは存在しない。

poster 属性によって与えられる画像、すなわちポスターフレームは、動画がどのようなものかをユーザーに伝える、動画を代表するフレーム（通常は最初の空白でないフレームのいずれか）であることを意図している。

playsinline 属性はブール属性である。この属性が存在する場合、デフォルトでは動画を全画面または独立したサイズ変更可能なウィンドウで表示するのではなく、要素の再生領域に制約された状態で、文書内に「インライン」で表示するべきであることをユーザーエージェントに示すヒントとして機能する。

playsinline 属性が存在しないことは、デフォルトで動画が全画面表示されることを意味しない。実際、ほとんどのユーザーエージェントは、デフォルトですべての動画をインライン再生することを選択しており、そのようなユーザーエージェントでは playsinline 属性は効果を持たない。

poster 属性が存在し、 loading 属性が遅延状態にある場合、ユーザーエージェントは、要素の遅延読み込み再開手順が呼び出されるまで、ポスター画像のソースデータの読み込みを遅延させなければならない。

<video src="1.mp4" poster="1.jpg" type="video/mp4">
<video src="2.mp4" type="video/mp4" loading="eager">
<video src="3.mp4" type="video/mp4" loading="lazy">
<video src="4.mp4" type="video/mp4" loading="lazy" autoplay>
<div id="very-large"></div> <!-- Everything after this div is below the viewport -->
<video src="5.mp4" type="video/mp4">
<video src="6.mp4" type="video/mp4" loading="lazy">
<video src="7.mp4" type="video/mp4" autoplay loading="lazy">
<video src="8.mp4" type="video/mp4" poster="8.jpg" loading="lazy">
<video src="9.mp4" type="video/mp4" preload="none" poster="9.jpg" loading="lazy">
<video src="10.mp4" type="video/mp4" preload="metadata" loading="lazy">
<video src="11.mp4" type="video/mp4" poster="11.jpg" preload="none" loading="eager">

上の例では、動画は次のように読み込まれる。

1.mp4: 動画とポスター画像は即時に読み込まれ、ウィンドウの load イベントを遅延させる。
2.mp4, 5.mp4: 動画は即時に読み込まれ、ウィンドウの load イベントを遅延させる。
3.mp4: 動画はビューポート内にあるため、レイアウトが判明した時点で読み込まれるが、ウィンドウの load イベントは遅延させない。
4.mp4: 動画はビューポート内にあるため、レイアウトが判明した時点で読み込まれ、自動再生が開始されるが、ウィンドウの load イベントは遅延させない。
6.mp4: 動画はスクロールによってビューポート内に入った時点でのみ読み込まれ、ウィンドウの load イベントは遅延させない。
7.mp4: 動画はスクロールによってビューポート内に入った時点でのみ読み込まれ、自動再生が開始され、ウィンドウの load イベントは遅延させない。
8.mp4: 動画とポスター画像はスクロールによってビューポート内に入った時点でのみ読み込まれ、ウィンドウの load イベントは遅延させない。
9.mp4: 動画は再生されるまで読み込まれない。ポスター画像はスクロールによってビューポート内に入った時点でのみ読み込まれ、ウィンドウの load イベントは遅延させない。
10.mp4: 動画のメタデータはスクロールによってビューポート内に入った時点でのみ読み込まれ、ウィンドウの load イベントは遅延させない。
11.mp4: 動画は再生されるまで読み込まれない。ポスター画像は即時に読み込まれ、ウィンドウの load イベントを遅延させる。

video 要素は、次の一覧のうち最初に一致する条件について指定されたものを表現する。

動画データが利用できない場合（要素の readyState 属性が HAVE_NOTHINGであるか、または HAVE_METADATA であるものの動画データがまだまったく取得されていないか、要素の readyState 属性がそれ以降のいずれかの値であるものの、メディアリソースが動画チャンネルを持たない場合）: video 要素は、存在する場合はそのポスターフレームを表現し、それ以外の場合は透明な黒を、自然寸法を持たない状態で表現する。
video 要素が一時停止されており、現在の再生位置が動画の最初のフレームで、要素のポスター表示フラグが設定されている場合: video 要素は、存在する場合はそのポスターフレームを表現し、それ以外の場合は動画の最初のフレームを表現する。
video 要素が一時停止されており、現在の再生位置に対応する動画フレームが利用できない場合（たとえば、動画がシーク中またはバッファリング中であるため）
video 要素が再生可能な状態でも一時停止状態でもない場合（たとえば、シーク中または停止中の場合）: video 要素は、最後にレンダリングされた動画フレームを表現する。
video 要素が一時停止されている場合: video 要素は、現在の再生位置に対応する動画フレームを表現する。
それ以外の場合（video 要素が動画チャンネルを持ち、再生可能な状態である場合）: video 要素は、継続的に増加する「現在」の位置にある動画フレームを表現する。現在の再生位置が変化し、最後にレンダリングされたフレームが動画内の現在の再生位置に対応するフレームではなくなった場合、新しいフレームをレンダリングしなければならない。

動画フレームは、イベントループが最後に手順 1に到達したときに選択されていた動画トラックから取得しなければならない。

動画ストリーム内のどのフレームが特定の再生位置に対応するかは、動画ストリームの形式によって定義される。

video 要素はさらに、テキストトラックキューのアクティブフラグが設定され、そのテキストトラックが表示中モードにあるすべてのテキストトラックキューと、現在の再生位置におけるメディアリソースの音声も表現する。

メディアリソースに関連付けられた音声は、再生される場合、要素の実効メディア音量で、現在の再生位置と同期して再生されなければならない。ユーザーエージェントは、イベントループが最後に手順 1 に到達したときに有効化されていた音声トラックの音声を再生しなければならない。

上記に加えて、ユーザーエージェントは、動画または要素の再生領域内のその他の領域にテキストやアイコンを重ねるか、別の適切な方法を使用して、「バッファリング中」「動画が読み込まれていない」「エラー」などのメッセージ、またはより詳細な情報をユーザーに提供してもよい。

動画をレンダリングできないユーザーエージェントは、代わりに、要素に外部の動画再生ユーティリティまたは動画データ自体へのリンクを表現させてもよい。

video 要素のメディアリソースが動画チャンネルを持つ場合、要素は描画ソースを提供する。その幅はメディアリソースの自然幅、高さはメディアリソースの自然高であり、その外観は、利用できる場合は現在の再生位置に対応する動画フレーム、それ以外の場合（たとえば動画がシーク中またはバッファリング中の場合）は以前の外観があればそれを、さらにそれもない場合（たとえば動画がまだ最初のフレームを読み込み中であるため）は黒色となる。

video.videoWidth HTMLVideoElement/videoWidth 現在のすべてのエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge（レガシー）12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
video.videoHeight HTMLVideoElement/videoHeight 現在のすべてのエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge（レガシー）12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+: これらの属性は動画の自然寸法を返し、その寸法が不明な場合は 0 を返す。

メディアリソースの自然幅および自然高は、リソースが使用する形式で定義される、リソースの寸法、アスペクト比、クリーンアパーチャ、解像度などを考慮した後のCSS ピクセル単位の寸法である。アナモルフィック形式が、動画データの寸法にアスペクト比を適用して「正しい」寸法を得る方法を定義していない場合、ユーザーエージェントは、一方の寸法を増加させ、他方を変更しないことで、その比率を適用しなければならない。

videoWidth の取得手順は次のとおりである。

thisの readyState 属性が HAVE_NOTHING である場合、0 を返す。
動画の自然幅を CSS ピクセル単位で返す。

videoHeight の取得手順は次のとおりである。

thisの readyState 属性が HAVE_NOTHING である場合、0 を返す。
動画の自然高を CSS ピクセル単位で返す。

動画の自然幅または自然高が変化するたびに（たとえば、選択された動画トラックが変更された場合を含む）、要素の readyState 属性が HAVE_NOTHING でない場合、ユーザーエージェントは、メディア要素を与えてメディア要素タスクをキューに入れ、メディア要素で resize という名前のイベントを発火しなければならない。

video 要素は、寸法属性をサポートする。

これに反するスタイル規則がない場合、動画コンテンツは、そのアスペクト比を維持しながら、再生領域内に完全に収まる最大の大きさで、再生領域の中央に配置されるよう、要素の再生領域内でレンダリングされるべきである。したがって、再生領域のアスペクト比が動画のアスペクト比と一致しない場合、動画はレターボックスまたはピラーボックスとして表示される。動画を含まない要素の再生領域の部分は何も表現しない。

CSS を実装するユーザーエージェントでは、上記の要件は、レンダリングの節で提案されるスタイル規則を使用して実装できる。

video 要素の再生領域の自然幅は、ポスターフレームが利用でき、要素が現在そのポスターフレームを表現している場合、そのポスターフレームの自然幅である。それ以外の場合、動画リソースの自然幅が利用できればその値であり、それ以外の場合、自然幅は欠落している。

video 要素の再生領域の自然高は、ポスターフレームが利用でき、要素が現在そのポスターフレームを表現している場合、そのポスターフレームの自然高である。それ以外の場合、動画リソースの自然高が利用できればその値であり、それ以外の場合、自然高は欠落している。

デフォルトオブジェクトサイズは、幅が 300 CSS ピクセル、高さが 150 CSS ピクセルである。[CSSIMAGES]

ユーザーエージェントは、クローズドキャプション、音声解説トラック、および動画ストリームに関連付けられたその他の追加データの表示を有効または無効にするためのコントロールを提供するべきである。ただし、このような機能も、ページの通常のレンダリングを妨げるべきではない。

ユーザーエージェントは、全画面表示や独立したサイズ変更可能なウィンドウなど、ユーザーにとってより適切な方法で動画コンテンツを表示できるようにしてもよい。ユーザーエージェントは、動画の再生時にデフォルトでこのような表示モードを開始してもよいが、playsinline 属性が指定されている場合は、そのようにするべきではない。他のユーザーインターフェイス機能と同様に、この機能を有効にするコントロールは、ユーザーエージェントがユーザーにユーザーインターフェイスを公開している場合を除き、ページの通常のレンダリングを妨げるべきではない。ただし、このような独立した表示モードでは、controls 属性が存在しない場合でも、ユーザーエージェントは完全なユーザーインターフェイスを表示してもよい。

ユーザーエージェントは、動画再生がユーザー体験を妨げる可能性のあるシステム機能に影響を与えることを許可してもよい。たとえば、動画再生中にスクリーンセーバーを無効にしてもよい。

この例は、動画が正しく再生できなかったことを検出する方法を示している。

<script>
 function failed(e) {
   // video playback failed - show a message saying why
   switch (e.target.error.code) {
     case e.target.error.MEDIA_ERR_ABORTED:
       alert('You aborted the video playback.');
       break;
     case e.target.error.MEDIA_ERR_NETWORK:
       alert('A network error caused the video download to fail part-way.');
       break;
     case e.target.error.MEDIA_ERR_DECODE:
       alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
       break;
     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
       alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
       break;
     default:
       alert('An unknown error occurred.');
       break;
   }
 }
</script>
<p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>
<p><a href="tgif.vid">Download the video file</a>.</p>

4.8.9 `audio` 要素

Element/audio

現在のすべてのエンジンでサポートされています。

Firefox3.5+Safari3.1+Chrome3+

Opera10.5+Edge79+

Edge（レガシー）12+Internet Explorer9+

Firefox Android?Safari iOS3+Chrome Android?WebView Android3+Samsung Internet?Opera Android11+

HTMLAudioElement

現在のすべてのエンジンでサポートされています。

Firefox3.5+Safari3.1+Chrome3+

Opera10.5+Edge79+

Edge（レガシー）12+Internet Explorer9+

Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+

要素が controls 属性を持つ場合: インタラクティブコンテンツ。

要素が controls 属性を持つ場合: 可触コンテンツ。

この要素を使用できる文脈:

埋め込みコンテンツが期待される場所。

コンテンツモデル:

要素が src 属性を持つ場合: 0 個以上の track 要素、その後に透過的コンテンツ。ただし、子孫にメディア要素を含めてはならない。

text/html におけるタグの省略:

どちらのタグも省略できない。

コンテンツ属性:

グローバル属性

src — リソースのアドレス

crossorigin — 要素がオリジン間リクエストを処理する方法

preload — メディアリソースに必要になる可能性が高いバッファリング量を示すヒント

autoplay — ページの読み込み時にメディアリソースを自動的に開始できることを示すヒント

loop — メディアリソースを繰り返し再生するかどうか

muted — デフォルトでメディアリソースをミュートするかどうか

controls — ユーザーエージェントのコントロールを表示する

loading — 読み込みの遅延を決定するときに使用される

アクセシビリティに関する考慮事項:

未分類。

[Exposed=Window,
 LegacyFactoryFunction=Audio(optional DOMString src)]
interface HTMLAudioElement : HTMLMediaElement {
  [HTMLConstructor] constructor();
};

audio 要素は、音または音声ストリームを表現する。

audio 要素内にコンテンツを提供してもよい。ユーザーエージェントは、このコンテンツをユーザーに表示するべきではない。このコンテンツは、 audio をサポートしない古いウェブブラウザーを対象とし、そのような古いブラウザーのユーザーに音声コンテンツへアクセスする方法を説明するテキストを表示できるようにすることを意図している。

特に、このコンテンツはアクセシビリティ上の問題に対処することを意図したものではない。ろう者や、その他の身体的または認知的障害を持つ人々が音声コンテンツを利用できるようにするため、さまざまな機能が利用できる。キャプションまたは手話動画が利用できる場合、audio 要素の代わりに video 要素を使用して音声を再生でき、ユーザーは視覚的な代替を有効にできる。ナビゲーションを支援する章タイトルは、 track 要素と WebVTT ファイルを使用して提供できる。そして当然ながら、 audio 要素の近くの本文からトランスクリプトまたはその他のテキストによる代替にリンクするだけで提供できる。 [WEBVTT]

audio 要素は、メディアデータが音声データであると想定されるメディア要素である。

audio 要素は、 slot 要素を含まない内部シャドーツリーを持つ。

src、crossorigin、 preload、autoplay、 loop、muted、controls、および loading 属性は、すべてのメディア要素に共通する属性である。

audio 要素に controls 属性がない場合、ユーザーエージェントによって表示されないため、遅延読み込みできない。

<audio src="1.mp3" type="audio/mpeg" controls>
<audio src="2.mp3" type="audio/mpeg" controls loading="eager">
<audio src="3.mp3" type="audio/mpeg" controls loading="lazy">
<audio src="4.mp3" type="audio/mpeg" controls loading="lazy" autoplay>
<div id="very-large"></div> <!-- Everything after this div is below the viewport -->
<audio src="5.mp3" type="audio/mpeg" controls>
<audio src="6.mp3" type="audio/mpeg" controls loading="lazy">
<audio src="7.mp3" type="audio/mpeg" controls autoplay loading="lazy">
<audio src="8.mp3" type="audio/mpeg" controls preload="metadata" loading="lazy">

上の例では、音声ファイルは次のように読み込まれる。

1.mp3, 2.mp3, 5.mp3: 音声ファイルは即時に読み込まれ、ウィンドウの load イベントを遅延させる。
3.mp3: 音声はビューポート内にあるため、レイアウトが判明した時点で読み込まれるが、ウィンドウの load イベントは遅延させない。
4.mp3: 音声はビューポート内にあるため、レイアウトが判明した時点で読み込まれ、自動再生が開始されるが、ウィンドウの load イベントは遅延させない。
6.mp3: 音声はスクロールによってビューポート内に入った時点でのみ読み込まれ、ウィンドウの load イベントは遅延させない。
7.mp3: 音声はスクロールによってビューポート内に入った時点でのみ読み込まれ、自動再生が開始され、ウィンドウの load イベントは遅延させない。
8.mp3: 音声のメタデータはスクロールによってビューポート内に入った時点でのみ読み込まれ、ウィンドウの load イベントは遅延させない。

audio = new Audio([ url ]) HTMLAudioElement/Audio 現在のすべてのエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome4+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+: 新しい audio 要素を返す。該当する場合、その src 属性は、引数に渡された値に設定される。

HTMLAudioElement オブジェクトを作成するため、DOM の createElement() などのファクトリーメソッドに加えて、旧来のファクトリー関数 Audio(src)が提供される。呼び出されたとき、旧来のファクトリー関数は次の手順を実行しなければならない。

documentを、現在のグローバルオブジェクトの関連付けられた Documentとする。
audioを、document、「audio」、および HTML 名前空間を与えて要素を作成した結果とする。
「preload」および「auto」を使用して、 audioの属性値を設定する。
srcが与えられている場合、「src」および srcを使用して、audioの属性値を設定する。（これにより、返す前にユーザーエージェントがオブジェクトのリソース選択アルゴリズムを呼び出すことになる。）
audioを返す。

4.8.10 `track` 要素

Element/track

現在のすべてのエンジンでサポートされています。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge（レガシー）12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android25+WebView Android?Samsung Internet?Opera Android12.1+

HTMLTrackElement

現在のすべてのエンジンでサポートされています。

Firefox31+Safari6+Chrome23+

Opera12+Edge79+

Edge（レガシー）12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+

HTMLTrackElement/src

現在のすべてのエンジンでサポートされています。

Firefox31+Safari6+Chrome23+

Opera12+Edge79+

Edge（レガシー）12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+

カテゴリー:

なし。

この要素を使用できる文脈:

メディア要素の子として、すべてのフローコンテンツより前。

コンテンツモデル:

なし。

text/html におけるタグの省略:

終了タグはない。

コンテンツ属性:

グローバル属性

kind — テキストトラックの種類

src — リソースのアドレス

srclang — テキストトラックの言語

label — ユーザーに表示されるラベル

default — 他のテキストトラックのほうが適切でない場合にトラックを有効にする

アクセシビリティに関する考慮事項:

未分類。

[Exposed=Window]
interface HTMLTrackElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString kind;
  [CEReactions, ReflectURL] attribute USVString src;
  [CEReactions, Reflect] attribute DOMString srclang;
  [CEReactions, Reflect] attribute DOMString label;
  [CEReactions, Reflect] attribute boolean default;

  const unsigned short NONE = 0;
  const unsigned short LOADING = 1;
  const unsigned short LOADED = 2;
  const unsigned short ERROR = 3;
  readonly attribute unsigned short readyState;

  readonly attribute TextTrack track;
};

track 要素を使用すると、著者はメディア要素に明示的な外部の時間指定テキストトラックを指定できる。この要素自体は何も表現しない。

kind 属性は、次のキーワードおよび状態を持つ列挙属性である。

キーワード	状態	簡単な説明
`subtitles`	字幕	音声は利用できるものの理解できない場合（たとえば、ユーザーがメディアリソースの音声トラックの言語を理解できないため）に適した、会話の書き起こしまたは翻訳。動画上に重ねて表示される。
`captions`	キャプション	音声が利用できない、または明瞭に聞き取れない場合（たとえば、ミュートされている、周囲の雑音にかき消されている、またはユーザーがろう者であるため）に適した、会話、効果音、関連する音楽上の合図、およびその他の関連する音声情報の書き起こしまたは翻訳。動画上に重ねて表示され、難聴者向けであることを適切に示すラベルが付けられる。
`descriptions`	解説	視覚コンポーネントが遮られている、利用できない、または使用できない場合（たとえば、ユーザーが運転中に画面を使用せずアプリケーションを操作している、またはユーザーが盲人であるため）に音声合成することを意図した、メディアリソースの動画コンポーネントのテキストによる解説。音声として合成される。
`chapters`	章メタデータ	スクリプトから使用することを意図したトラック。ユーザーエージェントによって表示されない。
`metadata`	メタデータ	スクリプトから使用することを意図したトラック。ユーザーエージェントによって表示されない。

この属性の欠落値のデフォルトは字幕状態であり、その無効値のデフォルトはメタデータ状態である。

src 属性は、テキストトラックデータのURLを指定する。その値は空白で囲まれている可能性がある妥当な空でない URLでなければならない。この属性は存在しなければならない。

要素には、関連付けられたトラック URL（文字列）があり、初期値は空文字列である。

要素の src 属性が設定されたとき、次の手順を実行する。

trackURLを失敗とする。
valueを、要素の src 属性値とする。
valueが空文字列でない場合、trackURLを、valueを要素のノード文書を基準として与え、URL をエンコーディング解析してシリアル化した結果に設定する。
trackURLが失敗でない場合、要素のトラック URLをtrackURLに設定し、それ以外の場合は空文字列に設定する。

要素のトラック URLが WebVTT リソースを識別し、要素の kind 属性が章メタデータ状態またはメタデータ状態でない場合、WebVTT ファイルはキューテキストを使用する WebVTT ファイルでなければならない。 [WEBVTT]

srclang 属性は、テキストトラックデータの言語を指定する。その値は妥当な BCP 47 言語タグでなければならない。要素の kind 属性が字幕状態にある場合、この属性は存在しなければならない。 [BCP47]

要素に、値が空文字列でない srclang 属性がある場合、要素のトラック言語はその属性の値である。それ以外の場合、要素にはトラック言語がない。

label 属性は、ユーザーが読み取れるトラックのタイトルを指定する。このタイトルは、ユーザーエージェントがユーザーインターフェイス内に字幕、キャプション、および音声解説トラックを一覧表示するときに使用される。

label 属性が存在する場合、その値は空文字列であってはならない。さらに、同じメディア要素の子である 2 つの track 要素について、それらの kind 属性が同じ状態にあり、それらの srclang 属性がともに欠落しているか同じ言語を表す値を持ち、かつそれらの label 属性がともに欠落しているか同じ値を持つことがあってはならない。

要素に、値が空文字列でない label 属性がある場合、要素のトラックラベルはその属性の値である。それ以外の場合、要素のトラックラベルは空文字列である。

default 属性はブール属性であり、指定された場合、ユーザーの設定が別のトラックのほうが適切であることを示していない場合に、そのトラックを有効にすることを示す。

各メディア要素には、kind 属性が字幕状態またはキャプション状態にあり、かつ default 属性が指定された track 要素の子を 2 つ以上含めてはならない。

各メディア要素には、kind 属性が解説状態にあり、かつ default 属性が指定された track 要素の子を 2 つ以上含めてはならない。

各メディア要素には、kind 属性が章メタデータ状態にあり、かつ default 属性が指定された track 要素の子を 2 つ以上含めてはならない。

kind 属性がメタデータ状態にあり、かつ default 属性が指定された track 要素の数には制限がない。

track.readyState

次の一覧の数値で表されるテキストトラックの準備状態を返す。

track.NONE (0): テキストトラック未読み込み状態。
track.LOADING (1): テキストトラック読み込み中状態。
track.LOADED (2): テキストトラック読み込み済み状態。
track.ERROR (3): テキストトラック読み込み失敗状態。

track.track

track 要素のテキストトラックを返す。

readyState 属性は、次の一覧で定義されるとおり、track 要素のテキストトラックのテキストトラックの準備状態に対応する数値を返さなければならない。

NONE （数値 0）: テキストトラック未読み込み状態。
LOADING （数値 1）: テキストトラック読み込み中状態。
LOADED （数値 2）: テキストトラック読み込み済み状態。
ERROR （数値 3）: テキストトラック読み込み失敗状態。

track の取得手順は、thisのテキストトラックを返すことである。

kind IDL 属性は、同じ名前のコンテンツ属性を、既知の値のみに制限して反映しなければならない。

この動画には、複数の言語の字幕がある。

<video src="brave.webm">
 <track kind=subtitles src=brave.en.vtt srclang=en label="English">
 <track kind=captions src=brave.en.hoh.vtt srclang=en label="English for the Hard of Hearing">
 <track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français">
 <track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">
</video>

（最後の 2 つにある lang 属性は、字幕自体の言語ではなく、label 属性の言語を示す。字幕の言語は srclang 属性によって指定される。）

4.8.11 メディア要素

HTMLMediaElement オブジェクト（この仕様では audio および video）は、単にメディア要素と呼ばれる。

HTMLMediaElement

現在のすべてのエンジンでサポートされています。

Firefox3.5+Safari3.1+Chrome3+

Opera10.5+Edge79+

Edge（レガシー）12+Internet Explorer5.5+

Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+

HTMLMediaElement/src

現在のすべてのエンジンでサポートされています。

Firefox3.5+Safari3.1+Chrome3+

Opera12.1+Edge79+

Edge（レガシー）12+Internet Explorer9+

Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

HTMLMediaElement/autoplay

現在のすべてのエンジンでサポートされています。

Firefox3.5+Safari3.1+Chrome3+

Opera12.1+Edge79+

Edge（レガシー）12+Internet Explorer9+

Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

HTMLMediaElement/loop

現在のすべてのエンジンでサポートされています。

Firefox11+Safari4+Chrome3+

Opera12.1+Edge79+

Edge（レガシー）12+Internet Explorer9+

Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

HTMLMediaElement/controls

現在のすべてのエンジンでサポートされています。

Firefox3.5+Safari3.1+Chrome3+

Opera12.1+Edge79+

Edge（レガシー）12+Internet Explorer9+

Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

HTMLMediaElement/defaultMuted

現在のすべてのエンジンでサポートされています。

Firefox11+Safari6+Chrome15+

Opera12.1+Edge79+

Edge（レガシー）12+Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

enum CanPlayTypeResult { "" /* empty string */, "maybe", "probably" };
typedef (MediaStream or MediaSource or Blob) MediaProvider;

[Exposed=Window]
interface HTMLMediaElement : HTMLElement {

  // error state
  readonly attribute MediaError? error;

  // network state
  [CEReactions, ReflectURL] attribute USVString src;
  attribute MediaProvider? srcObject;
  readonly attribute USVString currentSrc;
  [CEReactions] attribute DOMString? crossOrigin;
  const unsigned short NETWORK_EMPTY = 0;
  const unsigned short NETWORK_IDLE = 1;
  const unsigned short NETWORK_LOADING = 2;
  const unsigned short NETWORK_NO_SOURCE = 3;
  readonly attribute unsigned short networkState;
  [CEReactions] attribute DOMString preload;
  readonly attribute TimeRanges buffered;
  undefined load();
  CanPlayTypeResult canPlayType(DOMString type);

  // ready state
  const unsigned short HAVE_NOTHING = 0;
  const unsigned short HAVE_METADATA = 1;
  const unsigned short HAVE_CURRENT_DATA = 2;
  const unsigned short HAVE_FUTURE_DATA = 3;
  const unsigned short HAVE_ENOUGH_DATA = 4;
  readonly attribute unsigned short readyState;
  readonly attribute boolean seeking;

  // playback state
  attribute double currentTime;
  undefined fastSeek(double time);
  readonly attribute unrestricted double duration;
  object getStartDate();
  readonly attribute boolean paused;
  attribute double defaultPlaybackRate;
  attribute double playbackRate;
  attribute boolean preservesPitch;
  readonly attribute TimeRanges played;
  readonly attribute TimeRanges seekable;
  readonly attribute boolean ended;
  [CEReactions, Reflect] attribute boolean autoplay;
  [CEReactions, Reflect] attribute boolean loop;
  Promise<undefined> play();
  undefined pause();

  // controls
  [CEReactions, Reflect] attribute boolean controls;
  attribute double volume;
  attribute boolean muted;
  [CEReactions, Reflect="muted"] attribute boolean defaultMuted;
  [CEReactions] attribute DOMString loading;

  // tracks
  [SameObject] readonly attribute AudioTrackList audioTracks;
  [SameObject] readonly attribute VideoTrackList videoTracks;
  [SameObject] readonly attribute TextTrackList textTracks;
  TextTrack addTextTrack(TextTrackKind kind, optional DOMString label = "", optional DOMString language = "");
};

メディア要素の属性である src、crossorigin、preload、autoplay、 loop、muted、controls、および loading は、すべてのメディア要素に適用される。これらはこの節で定義する。

loading 属性は遅延読み込み属性である。その目的は、ビューポート外にあるメディアリソースを読み込むための方針を示すことである。

loading 属性の状態が即時状態に変更されたとき、ユーザーエージェントは次の手順を実行しなければならない。

resumptionStepsを、メディア要素の遅延読み込み再開手順とする。
posterResumptionStepsを null とする。

メディア要素が video 要素である場合、 posterResumptionStepsを、その video 要素のポスター遅延読み込み再開手順に設定する。
resumptionStepsが null で、かつ posterResumptionStepsも null である場合、 return。
resumptionStepsが null でない場合:
1. メディア要素の遅延読み込み再開手順を null に設定する。
2. resumptionStepsを呼び出す。
posterResumptionStepsが null でない場合:
1. video 要素のポスター遅延読み込み再開手順を null に設定する。
2. posterResumptionStepsを呼び出す。

loading IDL 属性は、loading コンテンツ属性を、既知の値のみに制限して反映しなければならない。

loading 属性が遅延状態にある場合、データのフェッチを遅延させることによって、preload 属性よりも優先される。

autoplay 属性が存在し、 loading 属性が遅延状態にある場合、ユーザーエージェントは、要素の遅延読み込み再開手順が呼び出されるまで、再生の開始（および自動再生によって生じる可能性のある関連するネットワークリクエスト）も遅延させなければならない。

メディア要素は、音声データ、または動画と音声のデータをユーザーに提示するために使用される。この節は音声用および動画用のメディア要素に等しく適用されるため、この節ではこれをメディアデータと呼ぶ。メディアリソースという用語は、メディアデータの完全な集合、たとえば完全な動画ファイルまたは完全な音声ファイルを指すために使用される。

メディアリソースには、関連付けられたオリジンがある。これは「none」「multiple」「rewritten」のいずれか、またはオリジンである。初期値は「none」である。

メディアリソースは、複数の音声トラックおよび動画トラックを持つことができる。メディア要素に関して、メディアリソースの動画データは、イベントループが最後に手順 1に到達したときに、要素の videoTracks 属性によって示される、現在選択されているトラックがあればそのトラックの動画データのみである。また、メディアリソースの音声データは、イベントループが最後に手順 1に到達したときに、要素の audioTracks 属性によって示される、現在有効なすべてのトラックがあれば、それらをミキシングした結果である。

audio 要素と video 要素はどちらも、音声と動画の両方に使用できる。両者の主な違いは、audio 要素には、動画やキャプションなどの視覚コンテンツ用の再生領域がない一方で、video 要素にはそれがある、という点だけである。

各メディア要素は、一意のメディア要素イベントタスクソースを持つ。

メディア要素 elementおよび一連の手順stepsを使用してメディア要素タスクをキューに入れるには、 elementおよびstepsを与え、メディア要素のメディア要素イベントタスクソース上で要素タスクをキューに入れる。

4.8.11.1 エラーコード

MediaError

現在のすべてのエンジンでサポートされています。

Firefox4+Safari3.1+Chrome3+

Opera12.1+Edge79+

Edge（レガシー）12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

media.error HTMLMediaElement/error 現在のすべてのエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

要素の現在のエラー状態を表す MediaError オブジェクトを返す。

エラーがない場合は null を返す。

すべてのメディア要素には、関連付けられたエラー状態があり、これは要素のリソース選択アルゴリズムが最後に呼び出されて以降に要素が遭遇した最後のエラーを記録する。error 属性は、取得時に、この最後のエラーについて作成された MediaError オブジェクトを返さなければならず、エラーが発生していない場合は null を返さなければならない。

[Exposed=Window]
interface MediaError {
  const unsigned short MEDIA_ERR_ABORTED = 1;
  const unsigned short MEDIA_ERR_NETWORK = 2;
  const unsigned short MEDIA_ERR_DECODE = 3;
  const unsigned short MEDIA_ERR_SRC_NOT_SUPPORTED = 4;

  readonly attribute unsigned short code;
  readonly attribute DOMString message;
};

media.error.code MediaError/code 現在のすべてのエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+: 以下の一覧から、現在のエラーのエラーコードを返す。
media.error.message MediaError/message 現在のすべてのエンジンでサポートされています。 Firefox52+Safari15+Chrome59+ Opera?Edge79+ Edge（レガシー）?Internet Explorerいいえ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?: 遭遇したエラー状態について、具体的で有用な診断メッセージを返す。メッセージおよびメッセージ形式は、通常、異なるユーザーエージェント間で統一されていない。そのようなメッセージが利用できない場合は、空文字列を返す。

各 MediaError オブジェクトは、文字列であるメッセージと、次のいずれかであるコードを持つ。

MEDIA_ERR_ABORTED（数値 1）: メディアリソースのフェッチ処理が、ユーザーの要求に応じてユーザーエージェントによって中止された。
MEDIA_ERR_NETWORK（数値 2）: リソースが使用可能であることが確認された後、何らかのネットワークエラーにより、ユーザーエージェントがメディアリソースのフェッチを停止した。
MEDIA_ERR_DECODE（数値 3）: リソースが使用可能であることが確認された後、メディアリソースのデコード中に何らかのエラーが発生した。
MEDIA_ERR_SRC_NOT_SUPPORTED（数値 4）: src 属性または割り当てられたメディアプロバイダーオブジェクトによって示されるメディアリソースが適切でなかった。

上記の値のいずれかであるエラーコードを与えて、MediaError を作成するには、コードが与えられたエラーコードであり、メッセージが、エラー状態の原因についてユーザーエージェントが提供できる任意の詳細を含む文字列、またはユーザーエージェントがそのような詳細を提供できない場合は空文字列である、新しい MediaError オブジェクトを返す。このメッセージ文字列には、与えられたエラーコードによってすでに利用できる情報だけを含めてはならない。たとえば、コードを単に文字列形式へ翻訳したものだけであってはならない。エラーコードによって提供される情報を超える追加情報が利用できない場合、メッセージは空文字列に設定しなければならない。

code の取得手順は、thisのコードを返すことである。

message の取得手順は、thisのメッセージを返すことである。

4.8.11.2 メディアリソースの場所

メディア要素の src コンテンツ属性は、表示するメディアリソース（動画、音声）のURLを与える。この属性が存在する場合、その値は空白で囲まれている可能性がある妥当な空でない URLでなければならない。

メディア要素に itemprop 属性が指定されている場合、src 属性も指定しなければならない。

メディア要素の crossorigin コンテンツ属性は、 CORS 設定属性である。

メディア要素が src 属性を持つ状態で作成された場合、ユーザーエージェントは直ちに、メディア要素のリソース選択アルゴリズムを呼び出さなければならない。

メディア要素の src 属性が設定または変更された場合、ユーザーエージェントはメディア要素のメディア要素読み込みアルゴリズムを呼び出さなければならない。（source 要素が存在する場合でも、src 属性を削除しても、この処理は行われない。）

HTMLMediaElement/crossOrigin

現在のすべてのエンジンでサポートされています。

Firefox22+Safari10+Chrome33+

Opera?Edge79+

Edge（レガシー）13+Internet Explorerいいえ

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

crossOrigin IDL 属性は、 crossorigin コンテンツ属性を、既知の値のみに制限して反映しなければならない。

メディアプロバイダーオブジェクトは、 URLとは別に、メディアリソースを表現できるオブジェクトである。 MediaStream オブジェクト、MediaSource オブジェクト、および Blob オブジェクトはすべてメディアプロバイダーオブジェクトである。

各メディア要素には、割り当てられたメディアプロバイダーオブジェクトがあり、これはメディアプロバイダーオブジェクトまたは null であり、初期値は null である。

media.srcObject [ = source ] HTMLMediaElement/srcObject 1 つのエンジンでのみサポートされています。 Firefox🔰 42+Safari11+Chrome🔰 108+ Opera?Edge🔰 108+ Edge（レガシー）?Internet Explorerいいえ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

メディア要素にメディアプロバイダーオブジェクトを割り当てられるようにする。

media.currentSrc HTMLMediaElement/currentSrc 現在のすべてのエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

現在のメディアリソースがある場合、その URLを返す。

メディアリソースがない場合、またはそれが URLを持たない場合は、空文字列を返す。

currentSrc IDL 属性は、初期状態では空文字列に設定しなければならない。その値は、以下で定義するリソース選択アルゴリズムによって変更される。

srcObject の取得手順は、 thisの割り当てられたメディアプロバイダーオブジェクトを返すことである。

srcObject の設定手順は次のとおりである。

thisの割り当てられたメディアプロバイダーオブジェクトを、与えられた値に設定する。
thisのメディア要素読み込みアルゴリズムを呼び出す。

メディアリソースを指定する方法は 3 つある。 srcObject IDL 属性、src コンテンツ属性、および source 要素である。IDL 属性が最も優先され、次にコンテンツ属性、最後に要素が優先される。

4.8.11.3 MIME タイプ

メディアリソースは、そのタイプ、具体的にはMIME タイプによって記述でき、場合によっては codecs パラメーターを伴う。（codecs パラメーターが許可されるかどうかは、MIME タイプによって異なる。）[RFC6381]

通常、タイプはやや不完全な記述である。たとえば「video/mpeg」はコンテナータイプ以外の情報を何も示さず、「video/mp4; codecs="avc1.42E01E, mp4a.40.2"」のようなタイプでも、実際のビットレートなどの情報は含まれない（最大ビットレートのみ）。したがって、あるタイプが与えられた場合、ユーザーエージェントは多くの場合、そのタイプのメディアを再生できる可能性があるか（確信度には幅がある）、またはそのタイプのメディアを確実に再生できないかしか判断できない。

ユーザーエージェントがレンダリングできないと認識しているタイプとは、たとえばコンテナータイプを認識しない、または列挙されたコーデックをサポートしていないため、ユーザーエージェントが確実にサポートしていないリソースを記述するタイプである。

パラメーターを持たない MIME タイプ「application/octet-stream」は、決してユーザーエージェントがレンダリングできないと認識しているタイプではない。潜在的なメディアリソースのラベル付けに使用される場合、ユーザーエージェントはそのタイプを、明示的なContent-Type メタデータがない場合と同等に扱わなければならない。

ここで特別扱いされるのは、パラメーターを持たない MIME タイプ「application/octet-stream」だけである。何らかのパラメーターが付いている場合は、他のMIME タイプと同様に扱われる。これは、不明なMIME タイプのパラメーターを無視するべきであるという規則からの逸脱である。

media.canPlayType(type) HTMLMediaElement/canPlayType 現在のすべてのエンジンでサポートされています。 Firefox3.5+Safari4+Chrome3+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+: ユーザーエージェントが指定されたタイプのメディアリソースを再生できるとどの程度確信しているかに基づいて、空文字列（否定的な応答）、「maybe」、または「probably」を返す。

canPlayType(type) メソッドは、 typeがユーザーエージェントがレンダリングできないと認識しているタイプであるか、タイプ「application/octet-stream」である場合、空文字列を返さなければならない。ユーザーエージェントが、そのタイプがこの audio または video 要素で使用した場合にレンダリングできるメディアリソースを表すと確信している場合は、「probably」を返さなければならず、それ以外の場合は「maybe」を返さなければならない。実装者には、タイプがサポートされるかされないかを確実に判定できない限り、「maybe」を返すことが推奨される。一般に、ユーザーエージェントは、codecs パラメーターを許可するタイプについて、そのパラメーターが存在しない場合に「probably」を返すべきではない。

このスクリプトは、ユーザーエージェントが（架空の）新しい形式をサポートしているかを検査し、 video 要素を使用するかどうかを動的に決定する。

<section id="video">
 <p><a href="playing-cats.nfv">Download video</a></p>
</section>
<script>
 const videoSection = document.getElementById('video');
 const videoElement = document.createElement('video');
 const support = videoElement.canPlayType('video/x-new-fictional-format;codecs="kittens,bunnies"');
 if (support === "probably") {
   videoElement.setAttribute("src", "playing-cats.nfv");
   videoSection.replaceChildren(videoElement);
 }
</script>

source 要素の type 属性により、ユーザーエージェントは、レンダリングできない形式を使用するリソースのダウンロードを回避できる。

4.8.11.4 ネットワーク状態

media.networkState HTMLMediaElement/networkState 現在のすべてのエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer9+ Firefox Android4+Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+: 以下の一覧のコードから、要素の現在のネットワーク活動状態を返す。

メディア要素がネットワークとやり取りする際、その現在のネットワーク活動は networkState 属性によって表される。取得時には、要素の現在のネットワーク状態を返さなければならず、その値は次のいずれかでなければならない。

NETWORK_EMPTY（数値 0）: 要素はまだ初期化されていない。すべての属性は初期状態にある。
NETWORK_IDLE（数値 1）: 要素のリソース選択アルゴリズムはアクティブであり、リソースを選択しているが、現在は実際にはネットワークを使用していない。
NETWORK_LOADING（数値 2）: ユーザーエージェントはデータを積極的にダウンロードしようとしている。
NETWORK_NO_SOURCE（数値 3）: 要素のリソース選択アルゴリズムはアクティブであるが、使用するリソースをまだ見つけていない。

以下で定義するリソース選択アルゴリズムは、 networkState 属性の値がいつ変化するか、およびこの状態の変化を示すためにどのイベントが発火するかを正確に記述する。

4.8.11.5 メディアリソースの読み込み

media.load() HTMLMediaElement/load 現在のすべてのエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+: 要素をリセットし、新しいメディアリソースを最初から選択して読み込む処理を開始させる。

すべてのメディア要素には、自動再生可能フラグがあり、その初期状態は true でなければならない。また、load イベント遅延フラグがあり、その初期状態は false でなければならない。load イベント遅延フラグが true の間、要素はその文書のload イベントを遅延させなければならない。

メディア要素で load() メソッドが呼び出されたとき、ユーザーエージェントは次の手順を実行しなければならない。

resumptionStepsを、メディア要素の遅延読み込み再開手順とする。
resumptionStepsが null でない場合:
1. メディア要素の遅延読み込み再開手順を null に設定する。
2. resumptionStepsを呼び出す。
メディア要素読み込みアルゴリズムを実行する。

メディア要素には、関連付けられたブール値現在停止しているがあり、初期値は false である。

メディア要素読み込みアルゴリズムは、次の手順からなる。

この要素の現在停止しているを false に設定する。
この要素についてすでに実行中のリソース選択アルゴリズムのインスタンスをすべて中止する。
pending tasksを、いずれかのタスクキューにある、メディア要素のメディア要素イベントタスクソースからのすべてのタスクのリストとする。
pending tasks内の、保留中の再生 promise を解決するか、保留中の再生 promise を却下する各タスクについて、対応するタスクがキューに入れられた順序で、それらの promise を直ちに解決または却下する。
pending tasks内の各タスクを、そのタスクキューから削除する。

基本的に、メディア要素が新しいリソースの読み込みを開始すると、保留中のイベントとコールバックは破棄され、解決または却下される途中の promise は直ちに解決または却下される。
メディア要素の networkState が NETWORK_LOADING または NETWORK_IDLE に設定されている場合、メディア要素を与えてメディア要素タスクをキューに入れ、メディア要素で abort という名前のイベントを発火する。
メディア要素の networkState が NETWORK_EMPTY に設定されていない場合:
1. メディア要素を与えてメディア要素タスクをキューに入れ、メディア要素で emptied という名前のイベントを発火する。
2. メディア要素についてフェッチ処理が進行中である場合、ユーザーエージェントはそれを停止するべきである。
3. メディア要素の割り当てられたメディアプロバイダーオブジェクトが MediaSource オブジェクトである場合、それを切り離す。
4. メディア要素のメディアリソース固有トラックを破棄する。
5. readyState が HAVE_NOTHING に設定されていない場合は、その状態に設定する。
6. paused 属性が false の場合：
  1. paused 属性を true に設定する。
  2. 保留中の再生 promise を取得し、その結果と "AbortError" DOMException を使用して、保留中の再生 promise を却下する。
7. seeking が true の場合、false に設定する。
8. 現在の再生位置を 0 に設定する。
  
  公式再生位置を 0 に設定する。
  
  これによって公式再生位置が変更された場合、メディア要素を与えてメディア要素タスクをキューに入れ、メディア要素で timeupdate という名前のイベントを発火する。
9. タイムラインオフセットを非数（NaN）に設定する。
10. duration 属性を非数（NaN）に更新する。
  
  ユーザーエージェントは、この特定の duration の変更については durationchange イベントを発火しない。
playbackRate 属性を、defaultPlaybackRate 属性の値に設定する。
error 属性を null に設定し、自動再生可能フラグを true に設定する。
メディア要素のリソース選択アルゴリズムを呼び出す。
この要素で以前に再生されていたメディアリソースの再生は停止する。

メディア要素のリソース選択アルゴリズムは次のとおりである。このアルゴリズムは常にタスクの一部として呼び出されるが、アルゴリズムの最初の手順の 1 つは、残りの手順を並行して実行し続けるために return することである。さらに、このアルゴリズムはイベントループ機構と密接に連携する。特に、イベントループアルゴリズムの一部としてトリガーされる同期区間を持つ。そのような区間内の手順には ⌛ が付けられている。

要素の networkState 属性を NETWORK_NO_SOURCE 値に設定する。
要素のポスター表示フラグを true に設定する。
メディア要素の遅延読み込み属性が即時状態にあるか、スクリプティングが無効である場合、メディア要素の load イベント遅延フラグを true に設定する（これによりload イベントが遅延する）。
このアルゴリズムを呼び出したタスクが続行できるようにしながら、安定状態を待つ。同期区間は、このアルゴリズムが同期区間の終了を示すまでの、このアルゴリズムの残りのすべての手順からなる。（同期区間内の手順には ⌛ が付けられている。）
⌛ メディア要素のパーサー待機フラグが false の場合、保留中のテキストトラックのリストを設定する。
⌛ modeを null とする。
⌛ candidateを null とする。
⌛ メディア要素の割り当てられたメディアプロバイダーオブジェクトが null でない場合、modeをオブジェクトに設定する。
⌛ それ以外の場合、メディア要素が src 属性を持つ場合、modeを属性に設定する。
⌛ それ以外の場合、メディア要素が source 要素の子を持つ場合、modeを子に設定し、candidateをツリー順で最初の source 要素の子に設定する。
⌛ それ以外の場合:
1. ⌛ networkState を NETWORK_EMPTY に設定する。
2. ⌛ 要素のload イベント遅延フラグを false に設定する。これにより、load イベントの遅延が停止する。
3. 同期区間を終了して return。
⌛ メディア要素の networkState を NETWORK_LOADING に設定する。
⌛ メディア要素を与えてメディア要素タスクをキューに入れ、メディア要素で loadstart という名前のイベントを発火する。
次の一覧から適切な手順を実行する。
modeがオブジェクトの場合
1. ⌛ currentSrc 属性を空文字列に設定する。
2. 同期区間を終了し、残りの手順を並行して続行する。
3. 割り当てられたメディアプロバイダーオブジェクトを用いてリソースフェッチアルゴリズムを実行する。そのアルゴリズムがこのアルゴリズムを中止せずに return した場合、読み込みは失敗した。
4. メディアプロバイダーによる失敗: この手順に到達したことは、メディアリソースの読み込みに失敗したことを示す。保留中の再生 promise を取得し、メディア要素を与えてメディア要素タスクをキューに入れ、その結果を用いて専用メディアソース失敗手順を実行する。
5. 前の手順でキューに入れられたタスクが実行されるまで待つ。
6. Return。要素は、このアルゴリズムが再びトリガーされるまで、別のリソースの読み込みを試みない。
modeが属性の場合
1. ⌛ src 属性の値が空文字列である場合、同期区間を終了し、以下の 属性による失敗手順へ移動する。
2. ⌛ urlRecordを、src 属性が最後に変更された時点のメディア要素のノード文書を基準として、src 属性の値を与えてURL をエンコーディング解析した結果とする。
3. ⌛ urlRecordが失敗でない場合、currentSrc 属性を、urlRecordにURL シリアライザーを適用した結果に設定する。
4. 同期区間を終了し、残りの手順を並行して続行する。
5. urlRecordが失敗でない場合、urlRecordを用いてリソースフェッチアルゴリズムを実行する。そのアルゴリズムがこのアルゴリズムを中止せずに return した場合、読み込みは失敗した。
6. 属性による失敗: この手順に到達したことは、メディアリソースの読み込みに失敗したか、 urlRecordが失敗であることを示す。保留中の再生 promise を取得し、メディア要素を与えてメディア要素タスクをキューに入れ、その結果を用いて専用メディアソース失敗手順を実行する。
7. 前の手順でキューに入れられたタスクが実行されるまで待つ。
8. Return。要素は、このアルゴリズムが再びトリガーされるまで、別のリソースの読み込みを試みない。
それ以外の場合（modeが子の場合）
1. ⌛ pointerを、メディア要素の子リスト内の隣接する 2 つのノードによって定義される位置とする。リストの先頭（リストに最初の子がある場合はその前）およびリストの末尾（リストに最後の子がある場合はその後）も、それ自体をノードとして扱う。一方のノードはpointerの前のノードであり、もう一方のノードは pointerの後のノードである。初期状態では、candidateノードと、存在する場合は次のノードとの間、またはそれが最後のノードである場合はリストの末尾との間の位置をpointerとする。
  
  ノードが挿入、削除、または移動されてメディア要素内に入る際、 pointerは次のように更新しなければならない。
  
  pointerを定義する 2 つのノードの間に新しいノードが挿入または移動された場合
  
  pointerを、pointerの前のノードと新しいノードとの間の位置とする。言い換えると、pointer位置での挿入はpointerの後に入る。
  
  pointerの前のノードが削除された場合
  
  pointerを、pointerの後のノードと、そのノードの前のノードとの間の位置とする。言い換えると、pointerは残りのノードに対して相対的に移動しない。
  
  pointerの後のノードが削除された場合
  
  pointerを、pointerの前のノードと、そのノードの後のノードとの間の位置とする。前の場合と同様に、pointerは残りのノードに対して相対的に移動しない。
  
  その他の変更はpointerに影響しない。
2. ⌛ 候補を処理: candidateが src 属性を持たないか、その src 属性の値が空文字列である場合、同期区間を終了し、以下の 要素による失敗手順へ移動する。
3. ⌛ candidateが、値が環境に一致しない media 属性を持つ場合、同期区間を終了し、以下の 要素による失敗手順へ移動する。
4. ⌛ urlRecordを、candidateの src 属性が最後に変更された時点のcandidateのノード文書を基準として、その src 属性の値を与えてURL をエンコーディング解析した結果とする。
5. ⌛ urlRecordが失敗である場合、同期区間を終了し、以下の 要素による失敗手順へ移動する。
6. ⌛ candidateが type 属性を持ち、その値をMIME タイプとして解析したとき（そのパラメーターを定義するタイプについては、codecs パラメーターによって記述される任意のコーデックを含む）、ユーザーエージェントがレンダリングできないと認識しているタイプを表す場合、同期区間を終了し、以下の 要素による失敗手順へ移動する。
7. ⌛ currentSrc 属性を、urlRecordにURL シリアライザーを適用した結果に設定する。
8. 同期区間を終了し、残りの手順を並行して続行する。
9. urlRecordを用いてリソースフェッチアルゴリズムを実行する。そのアルゴリズムがこのアルゴリズムを中止せずに return した場合、読み込みは失敗した。
10. 要素による失敗: メディア要素を与えてメディア要素タスクをキューに入れ、 candidateで error という名前のイベントを発火する。
11. 安定状態を待つ。同期区間は、このアルゴリズムが同期区間の終了を示すまでの、このアルゴリズムの残りのすべての手順からなる。（同期区間内の手順には ⌛ が付けられている。）
12. ⌛ メディア要素のメディアリソース固有トラックを破棄する。
13. ⌛ 次の候補を探す: candidateを null とする。
14. ⌛ 検索ループ: pointerの後のノードがリストの末尾である場合、以下の待機手順へ移動する。
15. ⌛ pointerの後のノードが source 要素である場合、candidateをその要素とする。
16. ⌛ pointerを進め、pointerの前のノードが、以前 pointerの後にあったノードとなり、pointerの後のノードが、存在する場合は以前pointerの後にあったノードの次のノードとなるようにする。
17. ⌛ candidateが null の場合、検索ループ手順へ戻る。それ以外の場合、 候補を処理手順へ戻る。
18. ⌛ 待機: 要素の networkState 属性を NETWORK_NO_SOURCE 値に設定する。
19. ⌛ 要素のポスター表示フラグを true に設定する。
20. ⌛ メディア要素を与えてメディア要素タスクをキューに入れ、要素のload イベント遅延フラグを false に設定する。これにより、load イベントの遅延が停止する。
21. 同期区間を終了し、残りの手順を並行して続行する。
22. pointerの後のノードが、リストの末尾以外のノードになるまで待つ。（この手順は永久に待ち続ける可能性がある。）
23. 安定状態を待つ。同期区間は、このアルゴリズムが同期区間の終了を示すまでの、このアルゴリズムの残りのすべての手順からなる。（同期区間内の手順には ⌛ が付けられている。）
24. ⌛ 要素のload イベント遅延フラグを再び true に設定する（これにより、まだ発火していない場合はload イベントが再び遅延する）。
25. ⌛ networkState を再び NETWORK_LOADING に設定する。
26. ⌛ 上の次の候補を探す手順へ戻る。
promise のリストpromisesを用いる専用メディアソース失敗手順は次のとおりである。
1. error 属性を、MEDIA_ERR_SRC_NOT_SUPPORTED を用いてMediaError を作成した結果に設定する。
2. メディア要素のメディアリソース固有トラックを破棄する。
3. 要素の networkState 属性を NETWORK_NO_SOURCE 値に設定する。
4. 要素のポスター表示フラグを true に設定する。
5. メディア要素で error という名前のイベントを発火する。
6. promisesおよび「NotSupportedError」 DOMException を用いて保留中の再生 promise を却下する。
7. 要素のload イベント遅延フラグを false に設定する。これにより、load イベントの遅延が停止する。

レスポンスresponse、メディアリソースresource、および「entire resource」または（数値、数値もしくは「until end」）のタプルbyteRangeを与えて、メディアレスポンスを検証するには:

responseがネットワークエラーである場合、false を返す。
byteRangeが「entire resource」である場合、true を返す。
internalResponseを、responseの安全でないレスポンスとする。
internalResponseのステータスが 200 の場合、true を返す。
internalResponseのステータスが 206 でない場合、false を返す。
internalResponseからcontent-range 値を抽出した結果が失敗である場合、 false を返す。

抽出された値は使用されず、特にbyteRangeと比較されないことに注意。したがって、この手順は「Content-Range」ヘッダーの構文検証として機能するが、レスポンスの「Content-Range」値がリクエストの「Range」値と一致しない場合でも、失敗とは見なされない。
originを、internalResponseの URLが null の場合は「rewritten」、それ以外の場合はinternalResponseの URLのオリジンとする。
previousOriginを、resourceのオリジンとする。
次のいずれかが true の場合:
- previousOriginが「none」である。
- originとpreviousOriginが「rewritten」である。
- originとpreviousOriginがオリジンであり、originが previousOriginと同一オリジンである。
その場合、resourceのオリジンをoriginに設定する。

それ以外の場合、responseがCORS オリジン間である場合、false を返す。

それ以外の場合、resourceのオリジンを「multiple」に設定する。

これにより、Range ヘッダーを持つ不透明なレスポンスが、異なるオリジンからの他のレスポンスと連結されることで情報を漏えいしないことが保証される。
true を返す。

メディア要素および、与えられたURL レコードまたはメディアプロバイダーオブジェクトについてのリソースフェッチアルゴリズムは次のとおりである。

メディア要素を与えた要素を遅延読み込みするかの手順が true を返す場合:
1. resumptionStepsを、mode を remote とするとラベル付けされた手順から始まるこのアルゴリズムの残りの部分とする。
2. メディア要素の遅延読み込み再開手順を resumptionStepsに設定する。
3. メディア要素について遅延読み込み要素の交差監視を開始する。
4. Return。
modeをremoteとする。
アルゴリズムがメディアプロバイダーオブジェクトを用いて呼び出された場合、modeをlocalに設定する。

それ以外の場合:
1. isTopLevelSelfFetchを false とする。
2. settingsObjectを、メディア要素のノード文書の関連する設定オブジェクトとする。
3. globalを、メディア要素のノード文書の関連するグローバルオブジェクトとする。
4. 次の条件がすべて true の場合:
  - globalが Window オブジェクトである。
  - globalのナビゲーション可能が null でない。
  - globalのナビゲーション可能の親が null である。
  - settingsObjectの作成 URLが URL レコードと等しい。
  その場合、isTopLevelSelfFetchを true に設定する。
5. stringOrEnvironmentを、isTopLevelSelfFetchが true の場合は「top-level-self-fetch」、それ以外の場合はsettingsObjectとする。
6. objectを、URL レコードの blob URL エントリーおよび stringOrEnvironmentを使用してblob オブジェクトを取得した結果とする。
7. objectがメディアプロバイダーオブジェクトである場合、 modeをlocalに設定する。
modeがremoteの場合、current media resourceを、このアルゴリズムに渡された URL レコードによって与えられるリソースとする。それ以外の場合、current media resourceをメディアプロバイダーオブジェクトによって与えられるリソースとする。いずれの場合も、current media resourceはここで要素のメディアリソースとなる。
メディア要素の保留中のテキストトラックのリストから、すべてのメディアリソース固有テキストトラックがあれば、それらを削除する。
次の一覧から適切な手順を実行する。
modeが remote の場合
1. 必要に応じて、次の下位手順を実行する。これは、ユーザーエージェントが、ユーザーが明示的に要求するまでリソースのフェッチを試みないことを意図している場合に想定される動作である（たとえば、preload 属性の none キーワードを実装する方法として）。
  1. networkState を NETWORK_IDLE に設定する。
  2. メディア要素を与えてメディア要素タスクをキューに入れ、要素で suspend という名前のイベントを発火する。
  3. メディア要素を与えてメディア要素タスクをキューに入れ、要素のload イベント遅延フラグを false に設定する。これにより、load イベントの遅延が停止する。
  4. タスクが実行されるまで待つ。
  5. 実装定義のイベント（たとえば、ユーザーがメディア要素の再生開始を要求すること）を待つ。
  6. 要素のload イベント遅延フラグを再び true に設定する（これにより、まだ発火していない場合はload イベントが再び遅延する）。
  7. networkState を NETWORK_LOADING に設定する。
2. destinationを、メディア要素が audio 要素である場合は「audio」、それ以外の場合は「video」とする。
3. requestを、current media resourceの URL レコード、destination、およびメディア要素の crossorigin コンテンツ属性の現在の状態を与えて潜在的 CORS リクエストを作成した結果とする。
4. requestのクライアントを、メディア要素のノード文書の関連する設定オブジェクトに設定する。
5. requestの開始元の種類を destinationに設定する。
6. 「entire resource」または（数値、数値もしくは「until end」）のタプルであるbyteRangeを、メディアデータ内の不足データを満たすために必要なバイト範囲とする。この値は実装定義であり、コーデック、ネットワーク状態、またはその他のヒューリスティックに依存してもよい。ユーザーエージェントは、リソース全体をフェッチすると判断してもよく、その場合byteRangeは「entire resource」となる。バイトオフセットから末尾までフェッチすると判断してもよく、その場合byteRangeは（数値、「until end」）となる。また、2 つのバイトオフセット間の範囲をフェッチすると判断してもよく、その場合 byteRangeは 2 つのオフセットを表す（数値、数値）のタプルとなる。
7. byteRangeが「entire resource」でない場合:
  1. byteRange[1]が「until end」である場合、 byteRange[0]を与えてrequestに Range ヘッダーを追加する。
  2. それ以外の場合、byteRange[0]およびbyteRange[1]を与えて requestにRange ヘッダーを追加する。
8. requestをフェッチする。その processResponseは、レスポンスresponseを与えて実行する次の手順に設定する。
  1. globalを、メディア要素のノード文書の関連するグローバルオブジェクトとする。
  2. updateMediaを、メディア要素を与えてメディア要素タスクをキューに入れ、以下のメディアデータ処理手順のリストから最初に適切な手順を実行することとする。（以下に記述する処理がネットワーキングタスクソースを使用するのではなく、適切なメディア要素イベントタスクソースに対して行われるよう、新しいタスクを使用する。）
  3. processEndOfMediaを次の手順とする。メディアデータのデコードを含むフェッチ処理がエラーなしで完了し、すべてのデータがネットワークアクセスなしでユーザーエージェントに利用可能である場合、ユーザーエージェントは以下の 最終手順へ進まなければならない。これは、ウェブラジオなどの無限リソースをストリーミングしている場合や、リソースがユーザーエージェントのデータキャッシュ能力より長い場合などには、決して発生しない可能性がある。
  4. responseをcurrent media resourceおよび byteRangeを用いて検証した結果が false の場合、これらの手順を中止する。
  5. それ以外の場合、updateMedia、processEndOfMedia、空のアルゴリズム、およびglobalを与えて、responseの本体を逐次的に読み取る。
  6. この方法で取得したresponseの安全でないレスポンスの内容を用いて、メディアデータを更新する。responseはCORS 同一オリジンまたは CORS オリジン間であり得る。これは、メディアデータで参照される字幕が API に公開されるかどうか、および video 要素について、動画を canvas に描画したときに canvas が汚染されるかどうかに影響する。
  メディア要素停止タイムアウトは、実装定義の時間であり、約 3 秒であるべきである。メディアデータを積極的に取得しようとしているメディア要素が、メディア要素停止タイムアウトに等しい時間、データをまったく受信できなかった場合、ユーザーエージェントはメディア要素を与えてメディア要素タスクをキューに入れ、次を実行しなければならない。
  1. 要素の現在停止しているを true に設定する。
  2. 要素で stalled という名前のイベントを発火する。
  ユーザーエージェントは、ユーザーがメディアデータのダウンロードを選択的にブロックしたり低速化したりできるようにしてもよい。メディア要素のダウンロードが完全にブロックされた場合、ユーザーエージェントは、接続が閉じられたかのようにではなく、停止したかのように動作しなければならない。ユーザーエージェントは、たとえば同じ帯域幅を共有する他の接続とダウンロードを均衡させるため、ダウンロード速度を自動的に制限してもよい。
  
  ユーザーエージェントは、たとえば 1 時間のメディアリソースの 5 分間をバッファリングした後、ユーザーがリソースを再生するかどうかを決定するのを待っている間、インタラクティブなリソースでユーザー入力を待っている間、またはユーザーがページから離れた場合など、いつでも追加コンテンツをダウンロードしないと判断してもよい。メディア要素のダウンロードが一時停止された場合、ユーザーエージェントはメディア要素を与えてメディア要素タスクをキューに入れ、networkState を NETWORK_IDLE に設定し、要素で suspend という名前のイベントを発火しなければならない。リソースのダウンロードが再開された場合、ユーザーエージェントはメディア要素を与えてメディア要素タスクをキューに入れ、networkState を NETWORK_LOADING に設定しなければならない。これらのタスクがキューに入れられる間、読み込みは一時停止される（したがって、上記のとおり progress イベントは発火しない）。
  
  preload 属性は、autoplay 属性がない場合でも、著者がどの程度のバッファリングを推奨すると考えているかについてのヒントを提供する。
  
  ユーザーエージェントがダウンロードを完全に一時停止すると判断した場合、たとえばユーザーが再生を開始するまで追加コンテンツをダウンロードせず待機する場合、ユーザーエージェントはメディア要素を与えてメディア要素タスクをキューに入れ、要素のload イベント遅延フラグを false に設定しなければならない。これにより、load イベントの遅延が停止する。
  
  上記の手順はリクエストを発行するためのアルゴリズムを示しているが、ユーザーエージェントは、特にエラー状態に直面した場合、それらの正確な手順以外の方法を使用してもよい。たとえば、ユーザーエージェントはサーバーに再接続したり、ストリーミングプロトコルに切り替えたりしてもよい。ユーザーエージェントは、リソースのフェッチを試みることを断念した場合に限り、そのリソースをエラーと見なし、上記の手順のエラー分岐へ進まなければならない。
  
  メディアリソースの形式を判定するため、ユーザーエージェントは音声および動画を特にスニッフィングする規則を使用しなければならない。
  
  読み込みが一時停止されていない間（以下を参照）、350 ミリ秒（±200 ミリ秒）ごと、または受信した各バイトごとのうち、頻度の低いほうで、メディア要素を与えてメディア要素タスクをキューに入れ、次を実行する。
  1. 要素の現在停止しているを false に設定する。
  2. 要素で progress という名前のイベントを発火する。
  ユーザーエージェントがメディアリソースの一部を取得するために依然としてネットワークアクセスを必要とする可能性がある間、ユーザーエージェントはこの手順に留まらなければならない。
  
  たとえば、ユーザーエージェントが動画の前半を破棄した場合、再生が終了した後でも、ユーザーが先頭へシークし直す可能性が常にあるため、ユーザーエージェントはこの手順に留まる。実際、この状況では、再生が終了すると、前述のとおり、ユーザーエージェントは最終的に suspend イベントを発火することになる。
それ以外の場合（modeがlocalの場合）

current media resourceによって記述されるリソースがある場合、それにはメディアデータが含まれる。これはCORS 同一オリジンである。

current media resourceが生のデータストリーム（たとえば File オブジェクトからのもの）である場合、メディアリソースの形式を判定するため、ユーザーエージェントは音声および動画を特にスニッフィングする規則を使用しなければならない。それ以外の場合、データストリームが事前にデコードされているなら、形式は関連する仕様によって与えられる形式である。

current media resourceの新しいデータが利用可能になるたびに、メディア要素を与えてメディア要素タスクをキューに入れ、以下のメディアデータ処理手順のリストから最初に適切な手順を実行する。

current media resourceが恒久的に使い果たされたとき（たとえば Blob のすべてのバイトが処理されたとき）、デコードエラーがなかった場合、ユーザーエージェントは以下の最終手順へ進まなければならない。これは、current media resourceが MediaStream である場合などには、決して発生しない可能性がある。
メディアデータ処理手順のリストは次のとおりである。
ネットワークエラーによりメディアデータをまったくフェッチできず、ユーザーエージェントがリソースのフェッチを試みることを断念した場合

メディアデータをフェッチできるが、検査によってサポートされていない形式であることが判明したか、それ以外の理由でまったくレンダリングできない場合
DNS エラー、HTTP 4xx および 5xx エラー（および他のプロトコルにおける同等のエラー）、ユーザーエージェントがcurrent media resourceを使用可能かどうか確認する前に発生するその他の致命的なネットワークエラー、サポートされていないコンテナー形式を使用するファイル、またはすべてのデータでサポートされていないコーデックを使用するファイルは、ユーザーエージェントに次の手順を実行させなければならない。
1. ユーザーエージェントはフェッチ処理を取り消すべきである。
2. このサブアルゴリズムを中止し、リソース選択アルゴリズムへ戻る。
メディアリソースに音声トラックがあることが判明した場合
1. 音声トラックを表現する AudioTrack オブジェクトを作成する。
2. メディア要素の audioTracks 属性の AudioTrackList オブジェクトを、新しい AudioTrack オブジェクトで更新する。
3. enableを不明とする。
4. メディアリソースまたは current media resourceのURLのいずれかが、有効にする特定の音声トラックの集合を示している場合、またはユーザーエージェントがユーザー体験を改善するための特定の音声トラックの選択を容易にする情報を持っている場合、この音声トラックが有効にするものの 1 つであればenableをtrueに設定し、それ以外の場合はenableをfalseに設定する。
  
  これはメディアフラグメント構文によってトリガーされる可能性があるが、たとえばユーザーエージェントがステレオ音声トラックより 5.1 サラウンド音声トラックを選択することによってもトリガーされ得る。
5. enableがまだ不明である場合、メディア要素がまだ有効化された音声トラックを持っていなければ、enableをtrueに設定し、それ以外の場合は enableをfalseに設定する。
6. enableがtrueの場合、この音声トラックを有効化し、それ以外の場合はこの音声トラックを有効化しない。
7. この AudioTrackList オブジェクトで、track 属性を新しい AudioTrack オブジェクトに初期化した TrackEventを使用して、 addtrack という名前のイベントを発火する。
メディアリソースに動画トラックがあることが判明した場合
1. 動画トラックを表現する VideoTrack オブジェクトを作成する。
2. メディア要素の videoTracks 属性の VideoTrackList オブジェクトを、新しい VideoTrack オブジェクトで更新する。
3. enableを不明とする。
4. メディアリソースまたは current media resourceのURLのいずれかが、有効にする特定の動画トラックの集合を示している場合、またはユーザーエージェントがユーザー体験を改善するための特定の動画トラックの選択を容易にする情報を持っている場合、この動画トラックがそのような最初の動画トラックであればenableをtrueに設定し、それ以外の場合はenableをfalseに設定する。
  
  これもメディアフラグメント構文によってトリガーされる可能性がある。
5. enableがまだ不明である場合、メディア要素がまだ選択された動画トラックを持っていなければ、enableをtrueに設定し、それ以外の場合は enableをfalseに設定する。
6. enableがtrueの場合、このトラックを選択して、以前に選択されていた動画トラックの選択を解除する。それ以外の場合、この動画トラックを選択しない。他のトラックの選択が解除された場合、change イベントが発火する。
7. この VideoTrackList オブジェクトで、track 属性を新しい VideoTrack オブジェクトに初期化した TrackEventを使用して、 addtrack という名前のイベントを発火する。
メディアリソースの継続時間、寸法、およびその他のメタデータを判定できるだけのメディアデータがフェッチされた時点
これは、リソースが使用可能であることを示す。ユーザーエージェントは次の下位手順に従わなければならない。
1. メディアデータに基づいて、現在の再生位置および最も早い可能な位置のためのメディアタイムラインを確立する。
2. タイムラインオフセットを、存在する場合、前の手順で確立されたメディアタイムラインの時刻 0 に対応する日時に更新する。メディアリソースによって明示的な時刻と日付が与えられていない場合、タイムラインオフセットを非数（NaN）に設定しなければならない。
3. 現在の再生位置および公式再生位置を、最も早い可能な位置に設定する。
4. duration 属性を、既知である場合、上で確立されたメディアタイムライン上のリソースの最後のフレームの時刻で更新する。未知である場合（たとえば、原理上無限であるストリーム）、 duration 属性を正の無限大の値に更新する。
  
  この時点で、ユーザーエージェントはメディア要素を与えてメディア要素タスクをキューに入れ、要素で durationchange という名前のイベントを発火する。
5. video 要素について、videoWidth 属性および videoHeight 属性を設定し、メディア要素を与えてメディア要素タスクをキューに入れ、メディア要素で resize という名前のイベントを発火する。
  
  その後、寸法が変更された場合、さらに resize イベントが発火する。
6. readyState 属性を HAVE_METADATA に設定する。
  
  readyState 属性を新しい値に設定する処理の一部として、 loadedmetadata DOM イベントが発火する。
7. jumpedを false とする。
8. メディア要素のデフォルト再生開始位置が 0 より大きい場合、その時刻へシークし、jumpedを true とする。
9. メディア要素のデフォルト再生開始位置を 0 に設定する。
10. initial playback positionを 0 とする。
11. メディアリソースまたは current media resourceのURLのいずれかが特定の開始時刻を示している場合、initial playback positionをその時刻に設定し、 jumpedがまだ false であれば、その時刻へシークする。
  
  たとえば、メディアフラグメント構文をサポートするメディア形式では、フラグメントを使用して開始位置を示すことができる。
12. 有効化された音声トラックがない場合、音声トラックを 1 つ有効化する。これによりchange イベントが発火する。
13. 選択された動画トラックがない場合、動画トラックを 1 つ選択する。これによりchange イベントが発火する。
readyState 属性が HAVE_CURRENT_DATA に達した後、loadeddata イベントが発火した後に、要素のload イベント遅延フラグを false に設定する。これにより、load イベントの遅延が停止する。

各メディアリソースのメタデータを引き続きフェッチしながらネットワーク使用量を削減しようとするユーザーエージェントは、この時点でバッファリングも停止し、前述の規則に従うことになる。この規則には、 networkState 属性が NETWORK_IDLE 値へ切り替わること、および suspend イベントが発火することが含まれる。

ユーザーエージェントは、再生前にメディアリソースの継続時間を判定し、この手順を実行することが要求される。
メディアリソース全体がフェッチされた時点（ただし、そのいずれかがデコードされる前である可能性がある）

メディア要素で progress という名前のイベントを発火する。

networkState を NETWORK_IDLE に設定し、メディア要素で suspend という名前のイベントを発火する。

ユーザーエージェントがメディアデータを破棄し、その後それを再取得するためにネットワーク活動を再開する必要が生じた場合、メディア要素を与えてメディア要素タスクをキューに入れ、 networkState を NETWORK_LOADING に設定しなければならない。

ユーザーエージェントがメディアリソースを読み込んだ状態で保持できる場合、アルゴリズムは以下の最終手順へ進み、そこでアルゴリズムを中止する。

一部のメディアデータを受信した後で接続が中断され、ユーザーエージェントがリソースのフェッチを試みることを断念した場合
ユーザーエージェントがcurrent media resourceを使用可能かどうか確認した後（すなわち、メディア要素の readyState 属性が HAVE_NOTHING でなくなった後）に発生する致命的なネットワークエラーは、ユーザーエージェントに次の手順を実行させなければならない。
1. ユーザーエージェントはフェッチ処理を取り消すべきである。
2. error 属性を、MEDIA_ERR_NETWORK を用いてMediaError を作成した結果に設定する。
3. 要素の networkState 属性を NETWORK_IDLE 値に設定する。
4. 要素のload イベント遅延フラグを false に設定する。これにより、load イベントの遅延が停止する。
5. メディア要素で error という名前のイベントを発火する。
6. 全体のリソース選択アルゴリズムを中止する。
メディアデータが破損している場合
ユーザーエージェントがcurrent media resourceを使用可能かどうか確認した後（すなわち、メディア要素の readyState 属性が HAVE_NOTHING でなくなった後）に発生するメディアデータのデコードにおける致命的なエラーは、ユーザーエージェントに次の手順を実行させなければならない。
1. ユーザーエージェントはフェッチ処理を取り消すべきである。
2. error 属性を、MEDIA_ERR_DECODE を用いてMediaError を作成した結果に設定する。
3. 要素の networkState 属性を NETWORK_IDLE 値に設定する。
4. 要素のload イベント遅延フラグを false に設定する。これにより、load イベントの遅延が停止する。
5. メディア要素で error という名前のイベントを発火する。
6. 全体のリソース選択アルゴリズムを中止する。
メディアデータのフェッチ処理がユーザーによって中止された場合
たとえばユーザーが「停止」ボタンを押したため、フェッチ処理がユーザーによって中止された場合、ユーザーエージェントは次の手順を実行しなければならない。これらの手順の実行中に load() メソッド自体が呼び出された場合は、上の手順がその特定の種類の中止を処理するため、これらの手順には従わない。
1. ユーザーエージェントはフェッチ処理を取り消すべきである。
2. error 属性を、MEDIA_ERR_ABORTED を用いてMediaError を作成した結果に設定する。
3. メディア要素で abort という名前のイベントを発火する。
4. メディア要素の readyState 属性が HAVE_NOTHING に等しい値を持つ場合、要素の networkState 属性を NETWORK_EMPTY 値に設定し、要素のポスター表示フラグを true に設定し、要素で emptied という名前のイベントを発火する。
  
  それ以外の場合、要素の networkState 属性を NETWORK_IDLE 値に設定する。
5. 要素のload イベント遅延フラグを false に設定する。これにより、load イベントの遅延が停止する。
6. 全体のリソース選択アルゴリズムを中止する。
メディアデータをフェッチできるが、致命的でないエラーがあるか、一部にサポートされていないコーデックを使用しているため、ユーザーエージェントがコンテンツを完全に正しくレンダリングできないものの、再生自体は妨げられない場合

サーバーが、部分的には使用可能だが最適にはレンダリングできないデータを返した場合、ユーザーエージェントは処理できる部分だけをレンダリングし、残りを無視しなければならない。

メディアリソースが、ユーザーエージェントがサポートするメディアリソース固有テキストトラックを宣言していることが判明した場合

メディアデータが CORS 同一オリジンである場合、関連するデータを用いてメディアリソース固有テキストトラックを公開する手順を実行する。

オリジン間動画は字幕を公開しない。公開すると、悪意のあるサイトがユーザーのイントラネット上にある機密動画から字幕を読み取るなどの攻撃が可能になるためである。
最終手順: ユーザーエージェントがこの手順に到達した場合（これはリソース全体が読み込まれ、利用可能な状態に保持された場合に限り発生する）、全体のリソース選択アルゴリズムを中止する。

メディア要素がメディア要素のメディアリソース固有トラックを破棄するとき、ユーザーエージェントはメディア要素のテキストトラックのリストから、すべてのメディアリソース固有テキストトラックを削除し、次にメディア要素の audioTracks 属性の AudioTrackList オブジェクトを空にし、次にメディア要素の videoTracks 属性の VideoTrackList オブジェクトを空にしなければならない。この処理の一部としてイベント（特に removetrack イベント）は発火しない。その代わりに、このアルゴリズムを呼び出すアルゴリズムによって発火する error イベントおよび emptied イベントを使用できる。

preload 属性は、次のキーワードおよび状態を持つ列挙属性である。

キーワード	状態	簡単な説明
`auto`	自動	リソース全体を楽観的にダウンロードすることまで含めて、サーバーに負担を与える危険なしにユーザーエージェントがユーザーのニーズを優先できることを、ユーザーエージェントに示す。
`none`	なし	著者がユーザーにメディアリソースが必要になるとは想定していないか、サーバーが不要なトラフィックを最小限に抑えたいことを、ユーザーエージェントに示す。この状態は、何らかの理由でバッファリングが開始された場合（たとえばユーザーが「再生」を押した後）に、実際にメディアリソースをどの程度積極的にダウンロードするかについてのヒントは提供しない。
`metadata`	メタデータ	著者がユーザーにメディアリソースが必要になるとは想定していないものの、リソースのメタデータ（寸法、トラック一覧、継続時間など）、および場合によっては最初の数フレームをフェッチすることは妥当であると、ユーザーエージェントに示す。ユーザーエージェントがメタデータを超えるデータを正確にフェッチしない場合、メディア要素の `readyState` 属性は最終的に `HAVE_METADATA` に設定される。ただし、通常はいくつかのフレームも取得されるため、おそらく `HAVE_CURRENT_DATA` または `HAVE_FUTURE_DATA` になる。メディアリソースの再生中は、帯域幅を希少なものとして考慮するべきであることをユーザーエージェントに示す。たとえば、一貫した再生を維持できる最も遅い速度でメディアデータを取得するよう、ダウンロードを制限することを示唆する。

この属性の空値のデフォルトは自動状態である。

この属性の欠落値のデフォルトおよび無効値のデフォルトは、どちらも実装定義である。ただし、サーバー負荷の削減と最適なユーザー体験の提供との妥協点として、メタデータ状態が推奨される。

この属性は、メディアリソースがバッファリング中または再生中になった後でも変更できる。上の表の説明は、そのことを考慮して解釈する。

著者は、ユーザーが再生を開始した時点で、属性を「none」または「metadata」から「auto」へ動的に切り替えてもよい。たとえば、多数の動画を含むページでは、多数の動画は要求されるまでダウンロードしないが、そのうち 1 つが要求された後は積極的にダウンロードすることを示すために使用できる。

preload 属性は、著者が最適なユーザー体験につながると考えているものについて、ユーザーエージェントにヒントを提供することを意図している。たとえば、明示的なユーザー設定または利用可能な接続性に基づいて、この属性は完全に無視されてもよい。

preload IDL 属性は、同じ名前のコンテンツ属性を、既知の値のみに制限して反映しなければならない。

autoplay 属性は、preload 属性より優先され得る（メディアが再生される場合、preload 属性によるヒントにかかわらず、その前に当然バッファリングする必要があるため）。ただし、両方を含めてもエラーではない。

audio 要素および video 要素でスクリプティングが有効な場合、 loading 属性は、要素の遅延読み込み再開手順が実行されるまで、 preload 属性によって示された動作を延期できる。

media.buffered HTMLMediaElement/buffered 現在のすべてのエンジンでサポートされています。 Firefox4+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+: ユーザーエージェントがバッファリングしたメディアリソースの範囲を表す TimeRanges オブジェクトを返す。

buffered の取得手順は、 thisのメディアリソースがある場合、そのうちユーザーエージェントがバッファリングした範囲を表す、新しい正規化済み TimeRanges オブジェクトを返すことである。ユーザーエージェントは、面倒な検査によってしか判定できないメディアストリームについても、利用可能な範囲を正確に判定しなければならない。

通常、これは時刻 0 を起点とする単一の範囲となるが、たとえばユーザーエージェントがシークに応じて HTTP Range リクエストを使用する場合、複数の範囲が存在することがある。

ユーザーエージェントは、以前にバッファリングしたデータを破棄してもよい。

したがって、ある時点で buffered 属性によって返されたオブジェクトの範囲内に含まれていた時刻位置が、後の時点で同じ属性によって返されたオブジェクトの範囲に含まれなくなることがある。

取得するたびに新しいオブジェクトを返すことは、属性の getter として不適切なパターンであり、変更するには高いコストがかかるため、ここでは既定のものとして残されているにすぎない。新しい API で模倣してはならない。

4.8.11.6 メディアリソース内のオフセット

media.duration HTMLMediaElement/duration 現在のすべてのエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

メディアリソースの開始が時刻 0 であると仮定して、メディアリソースの長さを秒単位で返す。

継続時間が利用できない場合は NaN を返す。

境界のないストリームの場合は Infinity を返す。

media.currentTime [ = value ] HTMLMediaElement/currentTime 現在のすべてのエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

公式再生位置を秒単位で返す。

設定して、指定された時刻へシークできる。

メディアリソースには、時刻（秒単位）をメディアリソース内の位置へ対応付けるメディアタイムラインがある。タイムラインの原点は、その最も早く定義された位置である。タイムラインの継続時間は、その最後に定義された位置である。

メディアタイムラインの確立: メディアリソースが、原点が負でない明示的なタイムラインを何らかの方法で指定する場合（すなわち、各フレームに特定の時間オフセットを与え、最初のフレームに 0 または正のオフセットを与える場合）、メディアタイムラインはそのタイムラインであるべきである。（メディアリソースがタイムラインを指定できるかどうかは、メディアリソースの形式に依存する。）メディアリソースが明示的な開始時刻と日付を指定する場合、その時刻と日付はメディアタイムラインのゼロ地点と見なすべきである。タイムラインオフセットはその時刻と日付となり、 getStartDate() メソッドを使用して公開される。

メディアリソースが不連続なタイムラインを持つ場合、ユーザーエージェントはリソースの開始時に使用されたタイムラインをリソース全体にわたって延長しなければならない。これにより、基礎となるメディアデータに順序が前後したタイムコードや重複するタイムコードがあっても、メディアリソースのメディアタイムラインは、以下で定義する最も早い可能な位置から始まり、線形に増加する。

たとえば、2 つのクリップが 1 つの動画ファイルに連結されているものの、動画形式が 2 つのクリップの元の時刻を公開している場合、動画データが公開するタイムラインは、たとえば 00:15..00:29 の後に 00:05..00:38 が続くものとなり得る。しかし、ユーザーエージェントはそれらの時刻を公開せず、代わりに単一の動画として 00:15..00:29 および 00:29..01:02 を公開する。

明示的なタイムラインを持たないメディアリソースというまれな場合、メディアタイムライン上の時刻 0 は、メディアリソースの最初のフレームに対応するべきである。フレーム継続時間すら含め、いかなる種類の明示的なタイミングも持たないメディアリソースというさらにまれな場合、ユーザーエージェントは各フレームの時刻を実装定義の方法で自ら決定しなければならない。

明示的なタイムラインを持たないが、明示的なフレーム継続時間を持つファイル形式の例として、 Animated GIF 形式がある。明示的なタイミングをまったく持たないファイル形式の例として、 JPEG-push 形式（JPEG フレームを含む multipart/x-mixed-replace。 MJPEG ストリームの形式としてよく使用される）がある。

タイミング情報を持たないリソースの場合でも、ユーザーエージェントがサーバーによって最初に提供されたフレームより前の位置へシークできるなら、時刻 0 はメディアリソースの最も早くシーク可能な時刻に対応するべきである。それ以外の場合は、サーバーから受信した最初のフレーム（ユーザーエージェントがストリームの受信を開始したメディアリソース内の地点）に対応するべきである。

執筆時点では、明示的なフレーム時間オフセットを持たないにもかかわらず、サーバーが送信した最初のフレームより前のフレームへのシークをサポートする既知の形式はない。

10 月の晴れた金曜日の午後にストリーミングを開始し、接続するユーザーエージェントに対して常に同じメディアタイムライン上のメディアデータを送信し、その時刻 0 をこのストリームの開始時点に設定しているテレビ放送事業者からのストリームを考える。数か月後、このストリームに接続したユーザーエージェントは、最初に受信するフレームの時刻が数百万秒になっていることに気付く。 getStartDate() メソッドは常に放送開始日を返す。これにより、コントローラーは、放送開始からの相対時刻（「8 か月、4 時間、12 分、23 秒」）ではなく、実際の時刻（たとえば「午後 2:30」）をスクラバーに表示できる。

複数の連結された断片からなる動画を運ぶストリームを考える。サーバーはユーザーエージェントが特定の時刻を要求することを許可せず、あらかじめ定められた順序で動画データをストリーミングするだけであり、最初に配信されるフレームは常に時刻 0 のフレームとして識別される。ユーザーエージェントがこのストリームに接続し、タイムスタンプ 2010-03-20 23:15:00 UTC から 2010-03-21 00:05:00 UTC、および 2010-02-12 14:25:00 UTC から 2010-02-12 14:35:00 UTC を覆うものとして定義された断片を受信した場合、ユーザーエージェントはこれを 0 秒から始まり 3,600 秒（1 時間）まで延びるメディアタイムラインとして公開する。ストリーミングサーバーが 2 番目のクリップの終端で切断したと仮定すると、duration 属性は 3,600 を返す。getStartDate() メソッドは、2010-03-20 23:15:00 UTC に対応する時刻を持つ Date オブジェクトを返す。しかし、別のユーザーエージェントが 5 分後に接続した場合、そのユーザーエージェントは（おそらく）タイムスタンプ 2010-03-20 23:20:00 UTC から 2010-03-21 00:05:00 UTC、および 2010-02-12 14:25:00 UTC から 2010-02-12 14:35:00 UTC を覆う断片を受信し、これを 0 秒から始まり 3,300 秒（55 分）まで延びるメディアタイムラインとして公開する。この場合、getStartDate() メソッドは、2010-03-20 23:20:00 UTC に対応する時刻を持つ Date オブジェクトを返す。

これら両方の例で、seekable 属性は、コントローラーが実際に UI に表示したい範囲を与える。通常、サーバーが任意の時刻へのシークをサポートしない場合、これはユーザーエージェントがストリームに接続した瞬間から、ユーザーエージェントが取得した最新フレームまでの時間範囲となる。ただし、ユーザーエージェントがより以前の情報を破棄し始めた場合、実際の範囲はより短くなる可能性がある。

いずれの場合も、ユーザーエージェントは、確立されたメディアタイムラインを使用した最も早い可能な位置（以下で定義）が 0 以上であることを保証しなければならない。

メディアタイムラインには、関連付けられたクロックもある。どのクロックを使用するかはユーザーエージェント定義であり、メディアリソースに依存してもよいが、ユーザーの実時間時計を近似するべきである。

メディア要素には現在の再生位置があり、初期状態（すなわちメディアデータがない状態）では 0 秒でなければならない。現在の再生位置はメディアタイムライン上の時刻である。

メディア要素には公式再生位置もあり、初期状態では 0 秒に設定しなければならない。公式再生位置は、スクリプトの実行中に安定した状態に保たれる現在の再生位置の近似値である。

メディア要素にはデフォルト再生開始位置もあり、初期状態では 0 秒に設定しなければならない。この時刻は、メディアが読み込まれる前でも要素をシークできるようにするために使用される。

各メディア要素にはポスター表示フラグがある。メディア要素が作成されたとき、このフラグは true に設定しなければならない。このフラグは、video 要素で動画コンテンツの代わりにポスターフレームを表示する時点を制御するために使用される。

currentTime 属性は、取得時に、メディア要素のデフォルト再生開始位置が 0 でない限り、それを返さなければならない。0 である場合は、要素の公式再生位置を返さなければならない。返される値は秒単位で表さなければならない。設定時に、メディア要素の readyState が HAVE_NOTHING である場合、メディア要素のデフォルト再生開始位置を新しい値に設定しなければならない。それ以外の場合、公式再生位置を新しい値に設定し、その後その新しい値へシークしなければならない。新しい値は秒単位として解釈しなければならない。

メディアリソースがストリーミングリソースである場合、ユーザーエージェントは、リソースの特定の部分がバッファーから期限切れになった後、それらを取得できない可能性がある。同様に、一部のメディアリソースは、0 から始まらないメディアタイムラインを持つ可能性がある。最も早い可能な位置とは、ユーザーエージェントが再び取得できる可能性のあるストリームまたはリソース内の最も早い位置である。これはメディアタイムライン上の時刻でもある。

最も早い可能な位置は API で明示的に公開されない。存在する場合は seekable 属性の TimeRanges オブジェクト内の最初の範囲の開始時刻に対応し、存在しない場合は現在の再生位置に対応する。

最も早い可能な位置が変化したとき: 現在の再生位置が最も早い可能な位置より前である場合、ユーザーエージェントは最も早い可能な位置へシークしなければならない。それ以外の場合、ユーザーエージェントが過去 15～250 ミリ秒以内に要素で timeupdate イベントを発火しておらず、かつそのようなイベントのイベントハンドラーをまだ実行していない場合、ユーザーエージェントはメディア要素を与えてメディア要素タスクをキューに入れ、要素で timeupdate という名前のイベントを発火しなければならない。

上記の要件、およびクリップのメタデータが判明したときに適用されるリソースフェッチアルゴリズムの要件により、現在の再生位置が最も早い可能な位置より小さくなることは決してない。

ユーザーエージェントが、音声トラックまたは動画トラックが終了し、そのトラックに関連するすべてのメディアデータが、最も早い可能な位置より前にあるメディアタイムラインの部分に対応することをいつでも認識した場合、ユーザーエージェントはメディア要素を与えてメディア要素タスクをキューに入れ、次の手順を実行してもよい。

必要に応じて、audioTracks 属性の AudioTrackList オブジェクト、または videoTracks 属性の VideoTrackList オブジェクトからトラックを削除する。
前述の AudioTrackList または VideoTrackList オブジェクトで、トラックを表す AudioTrack または VideoTrack オブジェクトに track 属性を初期化した TrackEventを使用して、 removetrack という名前のイベントを発火する。

duration 属性は、メディアタイムライン上のメディアリソースの終端時刻を秒単位で返さなければならない。メディアデータが利用できない場合、属性は非数（NaN）値を返さなければならない。メディアリソースに境界があることが分かっていない場合（たとえば、ストリーミングラジオ、または終了時刻が発表されていないライブイベント）、属性は正の Infinity 値を返さなければならない。

ユーザーエージェントは、メディアデータの一部を再生する前、および readyState を HAVE_METADATA 以上の値に設定する前に、たとえそのためにリソースの複数の部分をフェッチする必要があっても、メディアリソースの継続時間を決定しなければならない。

メディアリソースの長さが既知の値へ変化したとき（たとえば、未知から既知へ変化した場合、または以前に確立された長さから新しい長さへ変化した場合）、ユーザーエージェントはメディア要素を与えてメディア要素タスクをキューに入れ、メディア要素で durationchange という名前のイベントを発火しなければならない。（新しいメディアリソースの読み込みの一部として継続時間がリセットされたときは、イベントは発火しない。）継続時間の変更により現在の再生位置がメディアリソースの終端時刻より大きくなった場合、ユーザーエージェントはメディアリソースの終端時刻へシークもしなければならない。

「無限」のストリームが何らかの理由で終了した場合、継続時間は正の Infinity からストリーム内の最後のフレームまたはサンプルの時刻へ変化し、durationchange イベントが発火する。同様に、ユーザーエージェントが最初にメディアリソースの継続時間を正確に決定する代わりに推定し、後で新しい情報に基づいてその推定を修正した場合、継続時間は変化し、durationchange イベントが発火する。

一部の動画ファイルには、メディアタイムライン上の時刻 0 に対応する明示的な日付と時刻もあり、これはタイムラインオフセットと呼ばれる。初期状態では、タイムラインオフセットを非数（NaN）に設定しなければならない。

getStartDate() メソッドは、現在のタイムラインオフセットを表す新しい Date オブジェクトを返さなければならない。

loop 属性は真偽属性であり、指定された場合、メディア要素がメディアリソースの終端に達したときに、先頭へシークして戻ることを示す。

4.8.11.7 準備状態

media.readyState HTMLMediaElement/readyState 現在のすべてのエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer5.5+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+: 以下の一覧のコードから、現在の再生位置をレンダリングすることに関する要素の現在の状態を表す値を返す。

メディア要素には、現在の現在の再生位置でレンダリングできる準備がどの程度整っているかを記述する準備状態がある。可能な値は次のとおりであり、特定の時点におけるメディア要素の準備状態は、要素の状態を記述する最大の値である。

HAVE_NOTHING（数値 0）

メディアリソースに関する情報は利用できない。現在の再生位置のデータは利用できない。 networkState 属性が NETWORK_EMPTY に設定されているメディア要素は、常に HAVE_NOTHING 状態にある。

HAVE_METADATA（数値 1）

リソースの継続時間を利用できるだけのリソースが取得されている。 video 要素の場合、動画の寸法も利用できる。直近の現在の再生位置については、メディアデータを利用できない。

HAVE_CURRENT_DATA（数値 2）

直近の現在の再生位置のデータは利用できるが、ユーザーエージェントが再生方向に現在の再生位置を少しでも正常に進めると、直ちに HAVE_METADATA 状態へ戻ってしまうほどしかデータを利用できないか、または再生方向に取得できるデータがそれ以上存在しない。たとえば動画では、現在の再生位置が現在のフレームの終端にあるとき、ユーザーエージェントが現在のフレームのデータを持つが次のフレームのデータを持たない場合、および再生が終了した場合に相当する。

HAVE_FUTURE_DATA（数値 3）

直近の現在の再生位置のデータに加え、 HAVE_METADATA 状態へ直ちに戻ることなく、ユーザーエージェントが再生方向に現在の再生位置を少なくとも少し進められるだけのデータも利用でき、かつテキストトラックの準備ができている。たとえば動画では、現在の再生位置が 2 つのフレーム間の瞬間にあるときに、ユーザーエージェントが少なくとも現在のフレームと次のフレームのデータを持つ場合、または現在の再生位置がフレームの途中にあるときに、ユーザーエージェントが現在のフレームの動画データと、少なくとも少し再生を継続できる音声データを持つ場合に相当する。再生が終了している場合、現在の再生位置は決して進められないため、ユーザーエージェントはこの状態になることができない。

HAVE_ENOUGH_DATA（数値 4）

HAVE_FUTURE_DATA 状態について記述されたすべての条件が満たされ、さらに次のいずれかの条件も true である。

ユーザーエージェントは、データがフェッチされている速度から、現在の再生位置が要素の playbackRate で進んだとしても、再生がメディアリソースの終端に到達する前に、利用可能なデータを追い越すことはないと推定している。
ユーザーエージェントは、これ以上待っても追加のデータを取得できない状態に入り、したがって再生をさらに遅延させても何も得られない。（たとえば、バッファーが満杯である可能性がある。）

実際には、HAVE_METADATA と HAVE_CURRENT_DATA の違いはごくわずかである。この違いが実際に関係するほぼ唯一の場面は、video 要素を canvas に描画するときであり、何かが描画される場合（HAVE_CURRENT_DATA 以上）と、何も描画されない場合（HAVE_METADATA 以下）を区別する。同様に、HAVE_CURRENT_DATA （現在のフレームのみ）と HAVE_FUTURE_DATA （少なくともこのフレームと次のフレーム）の違いも、ごくわずかになり得る（極端な場合、わずか 1 フレーム）。この区別が実際に重要になる唯一の場面は、ページが「フレーム単位」のナビゲーション用インターフェイスを提供するときである。

networkState が NETWORK_EMPTY でないメディア要素の準備状態が変化したとき、ユーザーエージェントは以下の手順に従わなければならない。

次の一覧から最初に適用可能な一連の下位手順を適用する。
以前の準備状態が HAVE_NOTHING で、新しい準備状態が HAVE_METADATA の場合

メディア要素を与えてメディア要素タスクをキューに入れ、要素で loadedmetadata という名前のイベントを発火する。

このタスクが実行される前に、イベントループ機構の一部としてレンダリングが更新され、必要に応じて video 要素のサイズが変更される。

以前の準備状態が HAVE_METADATA で、新しい準備状態が HAVE_CURRENT_DATA 以上の場合

このメディア要素について、load() アルゴリズムが最後に呼び出されてからこれが初めて発生する場合、ユーザーエージェントはメディア要素を与えてメディア要素タスクをキューに入れ、要素で loadeddata という名前のイベントを発火しなければならない。

新しい準備状態が HAVE_FUTURE_DATA または HAVE_ENOUGH_DATA である場合、以下の関連する手順も続いて実行しなければならない。

以前の準備状態が HAVE_FUTURE_DATA 以上で、新しい準備状態が HAVE_CURRENT_DATA 以下の場合

メディア要素の readyState 属性が HAVE_FUTURE_DATA より低い値へ変化する前に、その要素が再生可能状態であり、要素の再生が終了しておらず、再生がエラーにより停止しておらず、ユーザー操作のために一時停止しておらず、帯域内コンテンツのために一時停止していない場合、ユーザーエージェントはメディア要素を与えてメディア要素タスクをキューに入れ、要素で timeupdate という名前のイベントを発火し、さらにメディア要素を与えてメディア要素タスクをキューに入れ、要素で waiting という名前のイベントを発火しなければならない。

以前の準備状態が HAVE_CURRENT_DATA 以下で、新しい準備状態が HAVE_FUTURE_DATA の場合

ユーザーエージェントはメディア要素を与えてメディア要素タスクをキューに入れ、要素で canplay という名前のイベントを発火しなければならない。

要素の paused 属性が false の場合、ユーザーエージェントは要素について再生中であることを通知しなければならない。

新しい準備状態が HAVE_ENOUGH_DATA の場合
以前の準備状態が HAVE_CURRENT_DATA 以下である場合、ユーザーエージェントはメディア要素を与えてメディア要素タスクをキューに入れ、要素で canplay という名前のイベントを発火しなければならず、要素の paused 属性が false の場合は、要素について再生中であることを通知しなければならない。

ユーザーエージェントはメディア要素を与えてメディア要素タスクをキューに入れ、要素で canplaythrough という名前のイベントを発火しなければならない。

要素が自動再生の対象でない場合、ユーザーエージェントはこれらの下位手順を中止しなければならない。

ユーザーエージェントは次の下位手順を実行してもよい。
1. paused 属性を false に設定する。
2. 要素のポスター表示フラグが true の場合、それを false に設定し、時が進む手順を実行する。
3. 要素を与えてメディア要素タスクをキューに入れ、要素で play という名前のイベントを発火する。
4. 要素について再生中であることを通知する。
別の方法として、要素が video 要素である場合、ユーザーエージェントは要素がビューポートと交差するかどうかの監視を開始してもよい。要素がビューポートと交差し始めたとき、要素が依然として自動再生の対象であれば、上記の下位手順を実行する。任意で、要素がビューポートと交差しなくなったとき、自動再生可能フラグが依然として true であり、autoplay 属性が依然として指定されている場合、次の下位手順を実行する。
1. 内部一時停止手順を実行し、自動再生可能フラグを true に設定する。
2. 要素を与えてメディア要素タスクをキューに入れ、要素で pause という名前のイベントを発火する。
要素がビューポートと交差し始めたり交差しなくなったりするたびに、自動再生可能フラグが true である限り、再生と一時停止の下位手順は複数回実行され得る。

ユーザーエージェントは自動再生をサポートする必要はなく、この点に関するユーザー設定を尊重することが推奨される。著者には、スクリプトを使用して動画を強制的に再生するのではなく、autoplay 属性を使用することが強く推奨される。これにより、ユーザーが望む場合にその動作を上書きできる。

メディア要素の準備状態は、これらの状態間を不連続に移動する可能性がある。たとえば、メディア要素の状態は、HAVE_CURRENT_DATA および HAVE_FUTURE_DATA 状態を経由せずに、HAVE_METADATA から HAVE_ENOUGH_DATA へ直接移動する可能性がある。

readyState IDL 属性は、取得時に、メディア要素の現在の準備状態を記述する、上で説明した値を返さなければならない。

autoplay 属性は真偽属性である。存在する場合、ユーザーエージェントは（ここで説明するアルゴリズムに従い）停止せずに実行できるようになり次第、メディアリソースの再生を自動的に開始する。

著者には、自動再生をトリガーするためにスクリプトを使用するのではなく、 autoplay 属性を使用することが強く推奨される。これにより、たとえばスクリーンリーダーを使用している場合など、自動再生が望ましくないときにユーザーがそれを上書きできる。著者には、自動再生の動作をまったく使用せず、ユーザーエージェントがユーザーによる明示的な再生開始を待つようにすることも推奨される。

4.8.11.8 メディアリソースの再生

media.paused HTMLMediaElement/paused 現在のすべてのエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

再生が一時停止中の場合は true を返し、それ以外の場合は false を返す。

media.ended HTMLMediaElement/ended 現在のすべてのエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

再生がメディアリソースの終端に達している場合は true を返す。

media.defaultPlaybackRate [ = value ] HTMLMediaElement/defaultPlaybackRate 現在のすべてのエンジンでサポートされています。 Firefox20+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

ユーザーがメディアリソースを早送りまたは逆再生していないときの、デフォルト再生速度を返す。

設定して、デフォルト再生速度を変更できる。

デフォルト速度は再生に直接影響しないが、ユーザーが早送りモードへ切り替え、その後通常の再生モードへ戻ったとき、再生速度はデフォルト再生速度へ戻ることが期待される。

media.playbackRate [ = value ] HTMLMediaElement/playbackRate 現在のすべてのエンジンでサポートされています。 Firefox20+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

現在の再生速度を返す。1.0 が通常速度である。

設定して、再生速度を変更できる。

media.preservesPitch HTMLMediaElement/preservesPitch Firefox101+Safari🔰 4+Chrome86+ Opera?Edge86+ Edge（レガシー）?Internet Explorerいいえ Firefox Android?Safari iOS🔰 4+Chrome Android?WebView Android?Samsung Internet?Opera Android?

playbackRate が 1.0 でないときに、ピッチを維持するアルゴリズムが使用される場合は true を返す。デフォルト値は true である。

false に設定すると、playbackRate に応じてメディアリソースの音声ピッチを上げ下げできる。これは美的理由およびパフォーマンス上の理由で有用である。

media.played

ユーザーエージェントが再生したメディアリソースの範囲を表す TimeRanges オブジェクトを返す。

media.play() HTMLMediaElement/play 現在のすべてのエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge（レガシー）12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+

paused 属性を false に設定し、必要に応じてメディアリソースを読み込んで再生を開始する。再生が終了していた場合は、先頭から再開する。

media.pause() HTMLMediaElement/pause 現在のすべてのエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

paused 属性を true に設定し、必要に応じてメディアリソースを読み込む。

paused 属性は、メディア要素が一時停止中かどうかを表す。この属性は初期状態で true でなければならない。

メディア要素は、その readyState 属性が HAVE_NOTHING 状態、HAVE_METADATA 状態、または HAVE_CURRENT_DATA 状態である場合、または要素がユーザー操作のために一時停止しているか、帯域内コンテンツのために一時停止している場合、ブロックされたメディア要素である。

メディア要素は、その paused 属性が false であり、要素の再生が終了しておらず、再生がエラーにより停止しておらず、要素がブロックされたメディア要素でない場合、再生可能状態にあるという。

再生可能状態にある要素が、その readyState 属性が HAVE_FUTURE_DATA より低い値へ変化したため再生を停止した結果として、waiting DOM イベントが発火することがある。

メディア要素は、次のすべてが true の場合、自動再生の対象であるという。

その自動再生可能フラグが true である。
その paused 属性が true である。
その autoplay 属性が指定されている。
それが audio または video 要素である場合、その遅延読み込み属性が即時状態にあるか、遅延状態にある間に読み込みを開始しているか、または要素についてスクリプティングが無効である。
そのノード文書の有効なサンドボックス化フラグ集合に、サンドボックス化された自動機能閲覧コンテキストフラグが設定されていない。
そのノード文書が「autoplay」機能の使用を許可されている。

メディア要素は、ユーザーエージェントおよびシステムが現在のコンテキストでメディア再生を許可している場合、再生を許可されているという。

たとえば、ユーザーエージェントはメディア要素の Window オブジェクトが一時的な有効化を持つ場合にのみ再生を許可しつつ、ミュート中は例外として再生を許可してもよい。

メディア要素は、次の場合に再生が終了したという。

要素の readyState 属性が HAVE_METADATA 以上であり、かつ
次のいずれかである。
- 現在の再生位置がメディアリソースの終端であり、かつ
- 再生方向が順方向であり、かつ
- メディア要素に loop 属性が指定されていない。
または:
- 現在の再生位置が最も早い可能な位置であり、かつ
- 再生方向が逆方向である。

ended 属性は、イベントループが最後に手順 1へ到達した時点で、メディア要素の再生が終了しており、再生方向が順方向であった場合は true を返し、それ以外の場合は false を返さなければならない。

メディア要素は、要素の readyState 属性が HAVE_METADATA 以上であり、ユーザーエージェントがメディアデータの処理中に致命的でないエラーに遭遇し、そのエラーのために現在の再生位置のコンテンツを再生できない場合、エラーにより停止したという。

メディア要素は、その paused 属性が false で、readyState 属性が HAVE_FUTURE_DATA または HAVE_ENOUGH_DATA であり、ユーザーエージェントがメディアリソースを続行するためにユーザーが選択を行う必要のある地点に達した場合、ユーザー操作のために一時停止しているという。

メディア要素は、再生が終了していると同時に、ユーザー操作のために一時停止している可能性がある。

再生可能状態にあるメディア要素が、ユーザー操作のために一時停止したことによって再生を停止した場合、ユーザーエージェントはメディア要素を与えてメディア要素タスクをキューに入れ、要素で timeupdate という名前のイベントを発火しなければならない。

メディア要素は、その paused 属性が false で、readyState 属性が HAVE_FUTURE_DATA または HAVE_ENOUGH_DATA であり、ユーザーエージェントがメディアリソースに時間的に固定され、長さが 0 でないコンテンツを再生するため、またはメディアリソースの一部分に時間的に固定されているが、その部分より長いコンテンツを再生するために、メディアリソースの再生を中断している場合、帯域内コンテンツのために一時停止しているという。

メディア要素が帯域内コンテンツのために一時停止する場合の一例は、ユーザーエージェントが外部 WebVTT ファイルの音声解説を再生しており、キューに対して生成された合成音声がテキストトラックキュー開始時刻とテキストトラックキュー終了時刻の間の時間より長い場合である。

再生方向が順方向のときに、現在の再生位置がメディアリソースの終端に達した場合、ユーザーエージェントは次の手順に従わなければならない。

メディア要素に loop 属性が指定されている場合、メディアリソースの最も早い可能な位置へシークして return。
上で定義したとおり、イベントループが手順 1へ戻ると、ended IDL 属性は true を返し始める。
メディア要素および次の手順を与えて、メディア要素タスクをキューに入れる。
1. メディア要素で timeupdate という名前のイベントを発火する。
2. メディア要素の再生が終了しており、再生方向が順方向であり、 pausedが false の場合:
  1. paused 属性を true に設定する。
  2. メディア要素で pause という名前のイベントを発火する。
  3. 保留中の再生 promise を取得し、その結果と「AbortError」 DOMException を用いて保留中の再生 promise を却下する。
3. メディア要素で ended という名前のイベントを発火する。

再生方向が逆方向のときに、現在の再生位置がメディアリソースの最も早い可能な位置に達した場合、ユーザーエージェントはメディア要素を与えてメディア要素タスクをキューに入れ、要素で timeupdate という名前のイベントを発火することだけを行わなければならない。

ここでいう「達する」という語は、現在の再生位置が通常の再生中に変化する必要があることを意味しない。たとえば、シークによって達することもある。

defaultPlaybackRate 属性は、メディアリソースをその固有速度の何倍で再生するかという、望ましい速度を与える。この属性は変更可能である。取得時には最後に設定された値を返さなければならず、まだ設定されていない場合は 1.0 を返さなければならない。設定時には属性を新しい値に設定しなければならない。

defaultPlaybackRate は、ユーザーエージェントがユーザーにユーザーインターフェイスを公開するときに使用される。

playbackRate 属性は、実効再生速度、すなわちメディアリソースがその固有速度の何倍で再生されるかを与える。これが defaultPlaybackRate と等しくない場合、ユーザーが早送りまたはスローモーション再生などの機能を使用していることを意味する。この属性は変更可能である。取得時には最後に設定された値を返さなければならず、まだ設定されていない場合は 1.0 を返さなければならない。設定時には、ユーザーエージェントは次の手順に従わなければならない。

指定された値がユーザーエージェントによってサポートされていない場合、「NotSupportedError」 DOMException を投げる。
playbackRate を新しい値に設定し、要素が再生可能状態である場合、再生速度を変更する。

defaultPlaybackRate または playbackRate 属性の値が変化したとき（スクリプトによって設定された場合、またはたとえばユーザー操作に応じてユーザーエージェントが直接変更した場合）、ユーザーエージェントはメディア要素を与えてメディア要素タスクをキューに入れ、メディア要素で ratechange という名前のイベントを発火しなければならない。ユーザーエージェントは属性の変更を滑らかに処理し、その変更に応じて知覚可能な空白や再生のミュートを発生させてはならない。

preservesPitch の取得手順は、再生中にピッチを維持するアルゴリズムが有効である場合に true を返すことである。設定手順は、知覚可能な空白や再生のミュートを発生させることなく、対応してピッチを維持するアルゴリズムを有効または無効に切り替えることである。デフォルトでは、そのようなピッチを維持するアルゴリズムを有効にしなければならない（すなわち、getter は初期状態で true を返す）。

played の取得手順は、通常の再生中に thisの現在の再生位置が通常どおり単調に増加することで到達した、存在する場合の、thisのメディアリソースのメディアタイムライン上の点の範囲を表す、新しい正規化済み TimeRanges オブジェクトを返すことである。

各メディア要素には、保留中の再生 promise のリストがあり、初期状態では空でなければならない。

メディア要素について保留中の再生 promise を取得するには、ユーザーエージェントは次の手順を実行しなければならない。

promisesを promise の空のリストとする。
メディア要素の保留中の再生 promise のリストを promisesへコピーする。
メディア要素の保留中の再生 promise のリストを空にする。
promisesを返す。

promise のリストpromisesを持つメディア要素について保留中の再生 promise を解決するには、ユーザーエージェントはpromises内の各 promise を undefined で解決しなければならない。

promise のリストpromisesおよび例外名errorを持つメディア要素について保留中の再生 promise を却下するには、ユーザーエージェントはpromises内の各 promise をerrorで却下しなければならない。

メディア要素について再生中であることを通知するには、ユーザーエージェントは次の手順を実行しなければならない。

保留中の再生 promise を取得し、 promisesをその結果とする。
要素および次の手順を与えてメディア要素タスクをキューに入れる。
1. 要素で playing という名前のイベントを発火する。
2. promisesを用いて保留中の再生 promise を解決する。

メディア要素で play() メソッドが呼び出されたとき、ユーザーエージェントは次の手順を実行しなければならない。

メディア要素が再生を許可されていない場合、「NotAllowedError」 DOMException で却下された promiseを返す。
メディア要素の error 属性が null でなく、そのコードが MEDIA_ERR_SRC_NOT_SUPPORTED である場合、「NotSupportedError」 DOMException で却下された promiseを返す。

これは、専用メディアソース失敗手順が実行されたことを意味する。メディア要素読み込みアルゴリズムが error 属性をクリアするまで、再生はできない。
resumptionStepsを、メディア要素の遅延読み込み再開手順とする。
resumptionStepsが null でない場合:
1. メディア要素の遅延読み込み再開手順を null に設定する。
2. resumptionStepsを呼び出す。
promiseを新しい promise とし、promiseを保留中の再生 promise のリストに付加する。
メディア要素について内部再生手順を実行する。
promiseを返す。

メディア要素の内部再生手順は次のとおりである。

メディア要素の networkState 属性の値が NETWORK_EMPTY である場合、メディア要素のリソース選択アルゴリズムを呼び出す。
再生が終了しており、再生方向が順方向である場合、メディアリソースの最も早い可能な位置へシークする。

これにより、ユーザーエージェントはメディア要素を与えてメディア要素タスクをキューに入れ、メディア要素で timeupdate という名前のイベントを発火することになる。
メディア要素の paused 属性が true の場合:
1. paused の値を false に変更する。
2. ポスター表示フラグが true の場合、要素のポスター表示フラグを false に設定し、 時が進む手順を実行する。
3. メディア要素を与えてメディア要素タスクをキューに入れ、要素で play という名前のイベントを発火する。
4. メディア要素の readyState 属性の値が HAVE_NOTHING、 HAVE_METADATA、または HAVE_CURRENT_DATA である場合、メディア要素を与えてメディア要素タスクをキューに入れ、要素で waiting という名前のイベントを発火する。
  
  それ以外の場合、メディア要素の readyState 属性の値は HAVE_FUTURE_DATA または HAVE_ENOUGH_DATA であるため、要素について再生中であることを通知する。
それ以外の場合、メディア要素の readyState 属性の値が HAVE_FUTURE_DATA または HAVE_ENOUGH_DATA である場合、保留中の再生 promise を取得し、メディア要素を与えてメディア要素タスクをキューに入れ、その結果を用いて保留中の再生 promise を解決する。

メディア要素はすでに再生中である。ただし、キューに入れられたタスクが実行される前に promiseが却下される可能性がある。
メディア要素の自動再生可能フラグを false に設定する。

pause() メソッドが呼び出されたとき、およびユーザーエージェントがメディア要素を一時停止する必要があるとき、ユーザーエージェントは次の手順を実行しなければならない。

メディア要素の networkState 属性の値が NETWORK_EMPTY である場合、メディア要素のリソース選択アルゴリズムを呼び出す。
メディア要素について内部一時停止手順を実行する。

メディア要素の内部一時停止手順は次のとおりである。

メディア要素の自動再生可能フラグを false に設定する。
メディア要素の paused 属性が false の場合、次の手順を実行する。
1. paused の値を true に変更する。
2. 保留中の再生 promise を取得し、 promisesをその結果とする。
3. メディア要素および次の手順を与えて、メディア要素タスクをキューに入れる。
  1. 要素で timeupdate という名前のイベントを発火する。
  2. 要素で pause という名前のイベントを発火する。
  3. promisesおよび「AbortError」 DOMException を用いて保留中の再生 promise を却下する。
4. 公式再生位置を現在の再生位置に設定する。

要素の playbackRate が正または 0 である場合、再生方向は順方向である。それ以外の場合は逆方向である。

メディア要素が再生可能状態にあり、その Document が完全にアクティブな Document である場合、その現在の再生位置は、メディアタイムラインのクロックの単位時間あたり、要素の playbackRate 単位のメディア時間で単調に増加しなければならない。（この仕様では常にこれを増加と呼ぶが、要素の playbackRate が負である場合、その増加は実際には減少となり得る。）

要素の playbackRate は 0.0 にできる。この場合、再生が一時停止していないにもかかわらず、現在の再生位置は移動しない（paused は true にならず、pause イベントも発火しない）。

この仕様は、ユーザーエージェントが適切な再生速度をどのように実現するかを定義しない。利用可能なプロトコルおよびメディアによっては、ユーザーエージェントがサーバーと交渉し、適切な速度でメディアデータを提供させることも考えられる。その場合（速度が変更されてからサーバーがストリームの再生速度を更新するまでの期間を除き）、クライアントは実際にはフレームを破棄したり補間したりする必要がない。

ユーザーエージェントが安定状態を提供するたびに、公式再生位置を現在の再生位置に設定しなければならない。

要素の playbackRate が 1.0 でなく、preservesPitch が true である場合、ユーザーエージェントは音声の元のピッチを維持するためにピッチ調整を適用しなければならない。それ以外の場合、ユーザーエージェントはピッチ調整を行わずに音声を高速化または低速化しなければならない。

メディア要素が再生可能状態にある場合、再生される音声データは、要素の実効メディア音量で、現在の再生位置と同期しなければならない。ユーザーエージェントは、イベントループが最後に手順 1へ到達したときに有効化されていた音声トラックの音声を再生しなければならない。

メディア要素が再生可能状態にない場合、要素について音声を再生してはならない。

再生可能状態にありながら文書内にないメディア要素は、動画を再生してはならないが、音声コンポーネントは再生するべきである。メディア要素へのすべての参照が削除されたという理由だけで、メディア要素は再生を停止してはならない。メディア要素が、それ以上いかなる音声も再生できない状態になった後にのみ、その要素をガベージコレクションしてもよい。

明示的な参照が存在しない要素でも、その要素が依然として積極的に再生中でなくても、音声を再生する可能性がある。たとえば、一時停止されていないがコンテンツのバッファリングを待って停止している場合や、まだバッファリング中だが、再生を開始する suspend イベントリスナーを持つ場合がある。メディアリソースに音声トラックがないメディア要素であっても、メディアリソースを変更するイベントリスナーを持っていれば、最終的に再び音声を再生する可能性がある。

各メディア要素には、新たに導入されたキューのリストがあり、初期状態では空でなければならない。メディア要素のテキストトラックのリストにあるテキストトラックのキューのリストへテキストトラックキューが追加されるたびに、そのキューをメディア要素の新たに導入されたキューのリストへ追加しなければならない。メディア要素のテキストトラックのリストへテキストトラックが追加されるたびに、そのテキストトラックのキューのリスト内のすべてのキューをメディア要素の新たに導入されたキューのリストへ追加しなければならない。メディア要素の新たに導入されたキューのリストへ新しいキューが追加されたとき、メディア要素のポスター表示フラグが設定されていない場合、ユーザーエージェントは時が進む手順を実行しなければならない。

メディア要素のテキストトラックのリストにあるテキストトラックのキューのリストからテキストトラックキューが削除されたとき、およびメディア要素のテキストトラックのリストからテキストトラックが削除されたとき、メディア要素のポスター表示フラグが設定されていない場合、ユーザーエージェントは時が進む手順を実行しなければならない。

メディア要素の現在の再生位置が変化したとき（たとえば、再生またはシークにより）、ユーザーエージェントは 時が進む手順を実行しなければならない。動画内のショットの切り替わりと字幕を同期させるなど、キューイベントの発火タイミングの正確性に依存するユースケースをサポートするため、ユーザーエージェントは、キューイベントをメディアタイムライン上の位置にできる限り近い時点で発火するべきであり、理想的には 20 ミリ秒以内であるべきである。手順の実行中に現在の再生位置が変化した場合、ユーザーエージェントは手順が完了するまで待ち、その後直ちに手順を再実行しなければならない。したがって、これらの手順は可能な限り頻繁に、または必要に応じて実行される。

1 回の反復に長い時間がかかると、ユーザーエージェントが「追いつく」ために先へ急ぐ際、継続時間の短いキューが飛ばされる可能性がある。そのため、それらのキューは activeCues リストに現れない。

時が進む手順は次のとおりである。

current cuesを、メディア要素のすべての非表示または表示中のテキストトラック（無効なものを除く）のうち、開始時刻が現在の再生位置以下であり、終了時刻が現在の再生位置より大きい、すべてのキューを含むように初期化されたキューのリストとする。
other cuesを、current cuesに存在しない、メディア要素の非表示および表示中のテキストトラックのすべてのキューを含むように初期化されたキューのリストとする。
このアルゴリズムがこのメディア要素について以前にも実行されている場合、 last timeを、このアルゴリズムが最後に実行された時点の現在の再生位置とする。
現在の再生位置が、このアルゴリズムが最後に実行されてから、通常の再生中の通常どおりの単調な増加によってのみ変化した場合、 missed cuesを、other cues内のキューのうち、開始時刻が last time以上で、終了時刻が現在の再生位置以下であるもののリストとする。それ以外の場合、missed cuesを空のリストとする。
missed cues内のキューのうち、メディア要素の新たに導入されたキューのリストにも含まれるものをすべて削除し、その後、要素の新たに導入されたキューのリストを空にする。
その時刻が、通常の再生中に現在の再生位置が通常どおり単調に増加することによって到達され、ユーザーエージェントが過去 15～250 ミリ秒以内に要素で timeupdate イベントを発火しておらず、かつそのようなイベントのイベントハンドラーをまだ実行していない場合、ユーザーエージェントはメディア要素を与えてメディア要素タスクをキューに入れ、要素で timeupdate という名前のイベントを発火しなければならない。（明示的なシークなど、それ以外の場合には、関連するイベントは現在の再生位置を変更する全体的な処理の一部として発火する。）

したがって、このイベントは約 66 Hz より速く、または 4 Hz より遅く発火してはならない（イベントハンドラーの実行に 250 ミリ秒より長くかからないと仮定する）。ユーザーエージェントには、動画のデコード中にユーザーエージェントが無理なく処理できる頻度より UI 更新が頻繁にならないよう、システム負荷およびイベントを毎回処理する平均コストに基づいてイベント頻度を変化させることが推奨される。
current cues内のすべてのキューのテキストトラックキュー有効フラグが設定され、other cues内のどのキューにもテキストトラックキュー有効フラグが設定されておらず、missed cuesが空である場合、return。
その時刻が、通常の再生中に現在の再生位置が通常どおり単調に増加することによって到達され、other cues内に、テキストトラックキューの終了時一時停止フラグが設定され、かつテキストトラックキュー有効フラグが設定されているか、missed cuesにも含まれるキューがある場合、メディア要素を直ちに一時停止する。

明示的なシークなど、それ以外の場合には、キューのテキストトラックキューの終了時一時停止フラグが設定されていても、そのキューの終了時刻を通過することによって再生は一時停止されない。
eventsを、初期状態では空のタスクのリストとする。このリスト内の各タスクは、テキストトラック、テキストトラックキュー、および時刻に関連付けられる。これらは、タスクがキューに入れられる前にリストをソートするために使用される。

affected tracksを、初期状態では空のテキストトラックのリストとする。

以下の手順で、時刻timeを持つテキストトラックキュー targetについて、eventという名前のイベントを準備すると記述されている場合、ユーザーエージェントは次の手順を実行しなければならない。
1. trackを、テキストトラックキュー targetが関連付けられているテキストトラックとする。
2. targetでeventという名前のイベントを発火するタスクを作成する。
3. 新たに作成したタスクを、時刻time、テキストトラック track、およびテキストトラックキュー targetに関連付けてeventsへ追加する。
4. trackをaffected tracksへ追加する。
missed cues内の各テキストトラックキューについて、テキストトラックキュー開始時刻を持つ TextTrackCue オブジェクトについて、enter という名前のイベントを準備する。
other cues内の各テキストトラックキューのうち、テキストトラックキュー有効フラグが設定されているか、missed cues内にあるものについて、テキストトラックキュー終了時刻とテキストトラックキュー開始時刻の遅いほうを持つ TextTrackCue オブジェクトについて、exit という名前のイベントを準備する。
current cues内の各テキストトラックキューのうち、テキストトラックキュー有効フラグが設定されていないものについて、テキストトラックキュー開始時刻を持つ TextTrackCue オブジェクトについて、enter という名前のイベントを準備する。
events内のタスクを時刻の昇順（より早い時刻のタスクを先）にソートする。

events内で同じ時刻を持つタスクを、これらのタスクに関連付けられたテキストトラックキューの相対的なテキストトラックキュー順によってさらにソートする。

最後に、events内で同じ時刻および同じテキストトラックキュー順を持つタスクを、 enter イベントを発火するタスクが、 exit イベントを発火するものより前になるようにソートする。
events内の各タスクについて、リスト順にメディア要素を与えてメディア要素タスクをキューに入れる。
affected tracksを、メディア要素のテキストトラックのリストにテキストトラックが現れる順と同じ順序にソートし、重複を削除する。
affected tracks内の各テキストトラックについて、リスト順にメディア要素を与えてメディア要素タスクをキューに入れ、 TextTrack オブジェクトで cuechange という名前のイベントを発火し、さらにテキストトラックに対応する track 要素がある場合、その track 要素でも cuechange という名前のイベントを発火する。
current cues内のすべてのキューのテキストトラックキュー有効フラグを設定し、other cues内のすべてのキューのテキストトラックキュー有効フラグを設定解除する。
affected tracks内の表示中の各テキストトラックについて、テキストトラックの言語が空文字列でない場合はそれをフォールバック言語として提供し、テキストトラックのレンダリングを更新する規則を実行する。たとえば、WebVTT に基づくテキストトラックでは、 WebVTT テキストトラックの表示を更新する規則を実行する。[WEBVTT]

上記のアルゴリズムの目的上、テキストトラックキューは、単にテキストトラックに関連付けられているだけでなく、テキストトラックのキューのリストに掲載されている場合に限り、テキストトラックの一部と見なされる。

メディア要素のノード文書が完全にアクティブな文書でなくなった場合、文書が再びアクティブになるまで再生は停止する。

メディア要素が Document から削除されたとき、ユーザーエージェントは次の手順を実行しなければならない。

メディア要素を Document から削除したタスクが続行できるようにしながら、安定状態を待つ。同期区間は、このアルゴリズムの残りのすべての手順からなる。（同期区間内の手順には ⌛ が付けられている。）
⌛ メディア要素が文書内にある場合、return。
⌛ メディア要素について内部一時停止手順を実行する。

4.8.11.9 シーク

media.seeking

ユーザーエージェントが現在シーク中である場合は true を返す。

media.seekable HTMLMediaElement/seekable 現在のすべてのエンジンでサポートされています。 Firefox8+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

ユーザーエージェントがシークできるメディアリソースの範囲を表す TimeRanges オブジェクトを返す。

media.fastSeek(time) HTMLMediaElement/fastSeek Firefox31+Safari8+Chromeいいえ Opera?Edgeいいえ Edge（レガシー）?Internet Explorerいいえ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

精度より速度を優先し、指定された time の近くへ可能な限り高速にシークする。（正確な時刻へシークするには、currentTime 属性を使用する。）

メディアリソースが読み込まれていない場合、これは何もしない。

seeking 属性の初期値は false でなければならない。

fastSeek(time) メソッドは、 速度優先近似フラグを設定して、timeで指定された時刻へシークしなければならない。

ユーザーエージェントがメディアリソース内の特定の新しい再生位置へ、任意で速度優先近似フラグを設定してシークする必要がある場合、それはユーザーエージェントが次の手順を実行しなければならないことを意味する。このアルゴリズムはイベントループ機構と密接に連携する。特に、イベントループアルゴリズムの一部としてトリガーされる同期区間を持つ。その区間内の手順には ⌛ が付けられている。

メディア要素のポスター表示フラグを false に設定する。
メディア要素の readyState が HAVE_NOTHING である場合、return。
要素の seeking IDL 属性が true である場合、このアルゴリズムの別のインスタンスがすでに実行中である。その別のアルゴリズムインスタンスが現在実行している手順の完了を待たずに中止する。
seeking IDL 属性を true に設定する。
シークが DOM メソッド呼び出しまたは IDL 属性の設定に応じて行われた場合、スクリプトを続行する。これらの手順の残りは並行して実行しなければならない。⌛ が付けられた手順を除き、このアルゴリズムの別のインスタンスが呼び出されることにより、いつでも中止され得る。
新しい再生位置がメディアリソースの終端より後である場合、代わりにメディアリソースの終端とする。
新しい再生位置が最も早い可能な位置より小さい場合、代わりにその位置とする。
（この時点で変更されている可能性のある）新しい再生位置が、seekable 属性で与えられる範囲のいずれにも含まれていない場合、それを seekable 属性で与えられる範囲のいずれかにある位置のうち、新しい再生位置に最も近い位置とする。 2 つの位置がともこの制約を満たす場合（すなわち、新しい再生位置が seekable 属性内の 2 つの範囲のちょうど中間にある場合）、現在の再生位置に最も近い位置を使用する。 seekable 属性で範囲がまったく与えられていない場合、seeking IDL 属性を false に設定して return。
速度優先近似フラグが設定されている場合、再生を速やかに再開できる値へ 新しい再生位置を調整する。この手順の前の新しい再生位置が現在の再生位置より前であった場合、調整後の新しい再生位置も現在の再生位置より前でなければならない。同様に、この手順の前の新しい再生位置が現在の再生位置より後であった場合、調整後の新しい再生位置も現在の再生位置より後でなければならない。

たとえば、ユーザーエージェントは近くのキーフレームに合わせることができる。これにより、再生を再開する前に中間フレームをデコードしてから破棄するための時間を費やさずに済む。
メディア要素を与えてメディア要素タスクをキューに入れ、要素で seeking という名前のイベントを発火する。
現在の再生位置を新しい再生位置に設定する。

メディア要素がシークを開始する直前に再生可能状態であったが、シークによってその readyState 属性が HAVE_FUTURE_DATA より低い値へ変化した場合、要素で waiting イベントが発火する。

この手順は現在の再生位置を設定するため、ユーザーエージェントがその位置のメディアデータを実際にレンダリングできるようになる前（次の手順で決定される）であっても、再生が「メディアリソースの終端に達する」時点に関する規則（ループを処理するロジックの一部）など、他の条件を直ちにトリガーし得る。

currentTime 属性は現在の再生位置ではなく、公式再生位置を返すため、このアルゴリズムとは別に、スクリプト実行前に更新される。
ユーザーエージェントが、新しい再生位置のメディアデータを利用できるかどうかを確定するまで待ち、利用できる場合は、その位置を再生するのに十分なデータをデコードするまで待つ。
安定状態を待つ。同期区間は、このアルゴリズムの残りのすべての手順からなる。（同期区間内の手順には ⌛ が付けられている。）
⌛ seeking IDL 属性を false に設定する。
⌛ 時が進む手順を実行する。
⌛ メディア要素を与えてメディア要素タスクをキューに入れ、要素で timeupdate という名前のイベントを発火する。
⌛ メディア要素を与えてメディア要素タスクをキューに入れ、要素で seeked という名前のイベントを発火する。

seekable の取得手順は、ユーザーエージェントがシークできる、存在する場合の thisのメディアリソースの範囲を表す、新しい正規化済み TimeRanges オブジェクトを返すことである。

たとえば、単純な動画ファイルであり、ユーザーエージェントとサーバーが HTTP Range リクエストをサポートしているため、ユーザーエージェントがメディアリソース内のどこへでもシークできる場合、属性は 1 つの範囲を持つオブジェクトを返す。その範囲の開始は最初のフレームの時刻（最も早い可能な位置、通常は 0）であり、終了は最初のフレームの時刻に duration 属性の値を加えたものと同じである（これは最後のフレームの時刻に等しく、正の Infinity の場合もある）。

たとえば、ユーザーエージェントが無限ストリーム上のスライディングウィンドウをバッファリングしている場合など、範囲が継続的に変化する可能性がある。これは、たとえば DVR でライブテレビを視聴するときに見られる動作である。

ユーザーエージェントは、何がシーク可能であるかについて非常に寛容かつ楽観的な見方を採用するべきである。ユーザーエージェントは、シークを高速化できるよう、可能な場合は最近のコンテンツもバッファリングするべきである。

たとえば、HTTP Range リクエストをサポートしない HTTP サーバーから配信される大きな動画ファイルを考える。ブラウザーは、現在のフレームおよび後続フレームについて取得されたデータのみをバッファリングし、再生を再開することによって最初へシークする場合を除いて、シークを決して許可しない方法でこれを実装できる。しかし、これは質の低い実装となる。高品質な実装では、コンテンツの直近数分間（十分なストレージ容量が利用できる場合はそれ以上）をバッファリングし、ユーザーが待ち時間なしで戻って驚くような場面を再視聴できるようにする。さらに、必要に応じてファイルを先頭から再読み込みすることによる任意のシークも許可する。この方法は遅いものの、以前のバッファリングされていない地点へ到達するためだけに動画を文字どおり再開し、最初から最後まで視聴し直すよりは便利である。

メディアリソースは、内部的にスクリプト化されていたり、インタラクティブであったりする可能性がある。したがって、メディア要素は非線形に再生される可能性がある。これが発生した場合、ユーザーエージェントは、現在の再生位置が不連続に変化するたびに、シークのアルゴリズムが使用されたかのように動作しなければならない（これにより、関連するイベントが発火する）。

4.8.11.10 複数のメディアトラックを持つメディアリソース

メディアリソースは、複数の埋め込み音声トラックおよび動画トラックを持つことができる。たとえば、主要な動画トラックおよび音声トラックに加えて、メディアリソースは、外国語による吹き替え会話、監督による解説、音声解説、別のアングル、または手話の重ね合わせを持つことができる。

media.audioTracks HTMLMediaElement/audioTracks 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?: メディアリソース内で利用可能な音声トラックを表す AudioTrackList オブジェクトを返す。
media.videoTracks HTMLMediaElement/videoTracks 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorerいいえ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?: メディアリソース内で利用可能な動画トラックを表す VideoTrackList オブジェクトを返す。

メディア要素の audioTracks 属性は、メディア要素のメディアリソース内で利用可能な音声トラックを表す、ライブな AudioTrackList オブジェクトを返さなければならない。

メディア要素の videoTracks 属性は、メディア要素のメディアリソース内で利用可能な動画トラックを表す、ライブな VideoTrackList オブジェクトを返さなければならない。

別のメディアリソースが要素に読み込まれた場合でも、各メディア要素につき、 AudioTrackList オブジェクトは常に 1 つだけ、VideoTrackList オブジェクトも常に 1 つだけであり、これらのオブジェクトは再利用される。（ただし、AudioTrack および VideoTrack オブジェクトは再利用されない。）

4.8.11.10.1 `AudioTrackList` および `VideoTrackList` オブジェクト

AudioTrackList

現在のすべてのエンジンでサポートされています。

Firefox🔰 33+Safari7+Chrome🔰 37+

Opera?Edge🔰 79+

Edge（レガシー）いいえInternet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

VideoTrackList

現在のすべてのエンジンでサポートされています。

Firefox🔰 33+Safari7+Chrome🔰 37+

Opera?Edge🔰 79+

Edge（レガシー）いいえInternet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

AudioTrackList

現在のすべてのエンジンでサポートされています。

Firefox🔰 33+Safari7+Chrome🔰 37+

Opera?Edge🔰 79+

Edge（レガシー）いいえInternet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

caniuse.com の表

AudioTrackList および VideoTrackList インターフェイスは、前節で定義された属性によって使用される。

AudioTrack

現在のすべてのエンジンでサポートされています。

Firefox🔰 33+Safari8+Chrome🔰 37+

Opera?Edge🔰 79+

Edge（レガシー）いいえInternet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

VideoTrack

現在のすべてのエンジンでサポートされています。

Firefox🔰 33+Safari7+Chrome🔰 37+

Opera?Edge🔰 79+

Edge（レガシー）いいえInternet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

[Exposed=Window]
interface AudioTrackList : EventTarget {
  readonly attribute unsigned long length;
  getter AudioTrack (unsigned long index);
  AudioTrack? getTrackById(DOMString id);

  attribute EventHandler onchange;
  attribute EventHandler onaddtrack;
  attribute EventHandler onremovetrack;
};

[Exposed=Window]
interface AudioTrack {
  readonly attribute DOMString id;
  readonly attribute DOMString kind;
  readonly attribute DOMString label;
  readonly attribute DOMString language;
  attribute boolean enabled;
};

[Exposed=Window]
interface VideoTrackList : EventTarget {
  readonly attribute unsigned long length;
  getter VideoTrack (unsigned long index);
  VideoTrack? getTrackById(DOMString id);
  readonly attribute long selectedIndex;

  attribute EventHandler onchange;
  attribute EventHandler onaddtrack;
  attribute EventHandler onremovetrack;
};

[Exposed=Window]
interface VideoTrack {
  readonly attribute DOMString id;
  readonly attribute DOMString kind;
  readonly attribute DOMString label;
  readonly attribute DOMString language;
  attribute boolean selected;
};

media.audioTracks.length AudioTrackList/length 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

media.videoTracks.length VideoTrackList/length 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

リスト内のトラック数を返す。

audioTrack = media.audioTracks[index]

videoTrack = media.videoTracks[index]

指定された AudioTrack または VideoTrack オブジェクトを返す。

audioTrack = media.audioTracks.getTrackById(id) AudioTrackList/getTrackById 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

videoTrack = media.videoTracks.getTrackById(id) VideoTrackList/getTrackById 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

指定された識別子を持つ AudioTrack または VideoTrack オブジェクトを返す。その識別子を持つトラックがない場合は null を返す。

audioTrack.id AudioTrack/id 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari8+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

videoTrack.id VideoTrack/id 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

指定されたトラックの ID を返す。形式がメディアフラグメント構文をサポートしている場合、これはフラグメントで使用できる ID であり、 getTrackById() メソッドでも使用できる。

audioTrack.kind AudioTrack/kind 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari8+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

videoTrack.kind VideoTrack/kind 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

指定されたトラックが属するカテゴリーを返す。可能なトラックカテゴリーは以下に示す。

audioTrack.label AudioTrack/label 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari8+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

videoTrack.label VideoTrack/label 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

指定されたトラックのラベルが分かっている場合はそれを返し、それ以外の場合は空文字列を返す。

audioTrack.language AudioTrack/language 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari8+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

videoTrack.language VideoTrack/language 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

指定されたトラックの言語が分かっている場合はそれを返し、それ以外の場合は空文字列を返す。

audioTrack.enabled [ = value ] AudioTrack/enabled 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari8+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

指定されたトラックが有効な場合は true を返し、それ以外の場合は false を返す。

設定して、トラックを有効にするかどうかを変更できる。複数の音声トラックが同時に有効にされている場合、それらはミックスされる。

media.videoTracks.selectedIndex VideoTrackList/selectedIndex 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

存在する場合は現在選択されているトラックのインデックスを返し、それ以外の場合は −1 を返す。

videoTrack.selected [ = value ] VideoTrack/selected 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

指定されたトラックが有効な場合は true を返し、それ以外の場合は false を返す。

設定して、トラックを選択するかどうかを変更できる。選択される動画トラックは 0 個または 1 個である。以前のトラックが選択されている間に新しいトラックを選択すると、以前のトラックの選択は解除される。

AudioTrackList オブジェクトは、0 個以上の音声トラックからなる動的なリストを表し、そのうち 0 個以上を同時に有効にできる。各音声トラックは AudioTrack オブジェクトによって表される。

VideoTrackList オブジェクトは、0 個以上の動画トラックからなる動的なリストを表し、そのうち 0 個または 1 個を同時に選択できる。各動画トラックは VideoTrack オブジェクトによって表される。

AudioTrackList および VideoTrackList オブジェクト内のトラックは、一貫した順序で並べなければならない。メディアリソースが順序を定義する形式である場合、その順序を使用しなければならない。それ以外の場合、順序はメディアリソース内でトラックが宣言される相対的な順序でなければならない。使用される順序をリストの自然順序と呼ぶ。

したがって、これらのオブジェクト内の各トラックにはインデックスがある。最初のトラックのインデックスは 0 であり、後続の各トラックには前のトラックより 1 大きい番号が付く。メディアリソースが音声トラックまたは動画トラックを動的に追加または削除する場合、トラックのインデックスも動的に変化する。メディアリソース全体が変更された場合、以前のすべてのトラックは削除され、新しいトラックに置き換えられる。

AudioTrackList の length 属性、および VideoTrackList の length 属性の getter は、取得時にそれぞれのオブジェクトによって表されているトラック数を返さなければならない。

任意の時点における AudioTrackList および VideoTrackList オブジェクトのサポートされるプロパティインデックスは、トラックが表されている場合、それぞれのオブジェクトによって表されるトラック数から 1 を引いた数までの 0 以上の数である。AudioTrackList または VideoTrackList オブジェクトがトラックをまったく表していない場合、そのオブジェクトにはサポートされるプロパティインデックスはない。

AudioTrackList または VideoTrackList オブジェクトlist内の指定されたインデックスindexについてインデックス付きプロパティの値を決定するには、ユーザーエージェントはlist内のindex番目のトラックを表す AudioTrack または VideoTrack オブジェクトを返さなければならない。

AudioTrackList の getTrackById(id) メソッド、および VideoTrackList の getTrackById(id) メソッドは、それぞれ AudioTrackList または VideoTrackList オブジェクト内で、識別子がid引数の値と等しい最初の AudioTrack または VideoTrack オブジェクトを、それぞれ上で定義したリストの自然順序で返さなければならない。指定された引数に一致するトラックがない場合、メソッドは null を返さなければならない。

AudioTrack および VideoTrack オブジェクトは、メディアリソースの特定のトラックを表す。各トラックは識別子、カテゴリー、ラベル、および言語を持つことができる。トラックのこれらの側面は、トラックの存続期間中は永続的である。トラックがメディアリソースの AudioTrackList または VideoTrackList オブジェクトから削除された場合でも、これらの側面は変化しない。

さらに、各 AudioTrack オブジェクトは有効または無効にできる。これが音声トラックの有効状態である。 AudioTrack が作成されたとき、その有効状態は false（無効）に設定しなければならない。リソースフェッチアルゴリズムはこれを上書きできる。

同様に、各 VideoTrackList オブジェクトにつき、1 つの VideoTrack オブジェクトを選択できる。これが動画トラックの選択状態である。 VideoTrack が作成されたとき、その選択状態は false（未選択）に設定しなければならない。リソースフェッチアルゴリズムはこれを上書きできる。

AudioTrack の id 属性、および VideoTrack の id 属性は、トラックに識別子がある場合はそれを返し、それ以外の場合は空文字列を返さなければならない。メディアリソースがメディアフラグメント構文をサポートする形式である場合、特定のトラックについて返される識別子は、そのようなフラグメントのトラック次元におけるトラック名として使用した場合に、そのトラックを有効にする識別子と同じでなければならない。 [INBAND]

たとえば Ogg ファイルでは、これはトラックの Name ヘッダーフィールドとなる。 [OGGSKELETONHEADERS]

AudioTrack の kind 属性、および VideoTrack の kind 属性は、トラックにカテゴリーがある場合はそれを返し、それ以外の場合は空文字列を返さなければならない。

トラックのカテゴリーは、メディアリソース内のトラックに含まれるメタデータに基づいて決定され、下表の第 2 列および第 3 列の定義に照らしてそのトラックに最も適した、第 1 列に示される文字列である。各行の第 3 列のセルは、その行の第 1 列のセルで示されたカテゴリーが何に適用されるかを示す。カテゴリーは、音声トラックに適用される場合にのみ音声トラックに適切であり、動画トラックに適用される場合にのみ動画トラックに適切である。カテゴリーは、音声に適切な場合にのみ AudioTrack オブジェクトについて返さなければならず、動画に適切な場合にのみ VideoTrack オブジェクトについて返さなければならない。

Ogg ファイルでは、トラックの Role ヘッダーフィールドが関連するメタデータを与える。 DASH メディアリソースでは、Role 要素がその情報を伝達する。WebM では、現在のところ FlagDefault 要素だけが値へ対応付けられる。メディアコンテナーから HTML への帯域内メディアリソーストラックの取り込みに、さらなる詳細がある。 [OGGSKELETONHEADERS] [DASH] [WEBMCG] [INBAND]

`AudioTrack` の `kind` および `VideoTrack` の `kind` の戻り値
カテゴリー	定義	適用対象...	例
"`alternative`"	主要トラックの代替となり得るもの。たとえば、曲の別テイク（音声）や別アングル（動画）。	音声および動画。	Ogg: "audio/alternate" または "video/alternate"; DASH: "main" および "commentary" ロールを伴わない "alternate"。音声の場合は "dub" ロールも伴わない（その他のロールは無視される）。
"`captions`"	キャプションが焼き込まれた主要動画トラックのバージョン。（従来のコンテンツ用。新しいコンテンツではテキストトラックを使用する。）	動画のみ。	DASH: "caption" および "main" ロールを同時に持つ（その他のロールは無視される）。
"`descriptions`"	動画トラックの音声解説。	音声のみ。	Ogg: "audio/audiodesc"。
"`main`"	主要な音声トラックまたは動画トラック。	音声および動画。	Ogg: "audio/main" または "video/main"; WebM: "FlagDefault" 要素が設定されている; DASH: "caption"、"subtitle"、および "dub" ロールを伴わない "main" ロール（その他のロールは無視される）。
"`main-desc`"	音声解説がミックスされた主要音声トラック。	音声のみ。	MPEG-2 TS 内の AC3 音声: bsmod=2 かつ full_svc=1。
"`sign`"	音声トラックの手話通訳。	動画のみ。	Ogg: "video/sign"。
"`subtitles`"	字幕が焼き込まれた主要動画トラックのバージョン。（従来のコンテンツ用。新しいコンテンツではテキストトラックを使用する。）	動画のみ。	DASH: "subtitle" および "main" ロールを同時に持つ（その他のロールは無視される）。
"`translation`"	主要音声トラックの翻訳版。	音声のみ。	Ogg: "audio/dub"。DASH: "dub" および "main" ロールを同時に持つ（その他のロールは無視される）。
"`commentary`"	主要な音声トラックまたは動画トラックに対する解説。たとえば、監督による解説。	音声および動画。	DASH: "main" ロールを伴わない "commentary" ロール（その他のロールは無視される）。
""（空文字列）	明示的な種類がない、またはトラックのメタデータによって示された種類をユーザーエージェントが認識しない。	音声および動画。

AudioTrack の label 属性、および VideoTrack の label 属性は、トラックにラベルがある場合はそれを返し、それ以外の場合は空文字列を返さなければならない。[INBAND]

AudioTrack の language 属性、および VideoTrack の language 属性は、トラックに言語がある場合はその言語の BCP 47 言語タグを返し、それ以外の場合は空文字列を返さなければならない。ユーザーエージェントがその言語を BCP 47 言語タグとして表現できない場合（たとえば、メディアリソースの形式内の言語情報が、定義された解釈を持たない自由形式の文字列である場合）、メソッドは、トラックに言語がないかのように空文字列を返さなければならない。[INBAND]

AudioTrack の enabled 属性は、取得時に、トラックが現在有効である場合は true を返し、それ以外の場合は false を返さなければならない。設定時には、新しい値が true の場合はトラックを有効にし、それ以外の場合は無効にしなければならない。（トラックがすでに AudioTrackList オブジェクト内にない場合、トラックの有効化または無効化は、AudioTrack オブジェクト上の属性値を変更すること以外には影響を持たない。）

AudioTrackList 内で無効であった音声トラックが有効にされるたび、および有効であった音声トラックが無効にされるたびに、ユーザーエージェントはメディア要素を与えてメディア要素タスクをキューに入れ、AudioTrackList オブジェクトで change という名前のイベントを発火しなければならない。

メディアタイムライン上の特定の位置にデータを持たない音声トラック、またはその位置に存在しない音声トラックは、そのタイムライン上のその地点では無音であると解釈しなければならない。

VideoTrackList の selectedIndex 属性は、存在する場合は現在選択されているトラックのインデックスを返さなければならない。VideoTrackList オブジェクトが現在トラックをまったく表していない場合、またはいずれのトラックも選択されていない場合は、代わりに −1 を返さなければならない。

VideoTrack の selected 属性は、取得時に、トラックが現在選択されている場合は true を返し、それ以外の場合は false を返さなければならない。設定時には、新しい値が true の場合はトラックを選択し、それ以外の場合は選択を解除しなければならない。トラックが VideoTrackList 内にある場合、そのリスト内の他のすべての VideoTrack オブジェクトの選択を解除しなければならない。（トラックがすでに VideoTrackList オブジェクト内にない場合、トラックの選択または選択解除は、VideoTrack オブジェクト上の属性値を変更すること以外には影響を持たない。）

VideoTrackList 内で以前選択されていなかったトラックが選択されるたび、および VideoTrackList 内で選択されていたトラックが、その代わりとなる新しいトラックが選択されることなく選択解除されるたびに、ユーザーエージェントはメディア要素を与えてメディア要素タスクをキューに入れ、VideoTrackList オブジェクトで change という名前のイベントを発火しなければならない。このタスクは、存在する場合、 resize イベントを発火するタスクより前にキューに入れなければならない。

メディアタイムライン上の特定の位置にデータを持たない動画トラックは、そのタイムライン上のその地点では透明な黒であると解釈しなければならない。その寸法は、その位置より前の最後のフレームと同じものとし、その位置がそのトラックのすべてのデータより前である場合は、そのトラックの最初のフレームと同じものとする。現在の位置にまったく存在しないトラックは、存在するがデータを持たないものとして扱わなければならない。

たとえば、動画に再生開始から 1 時間後に初めて導入されるトラックがあり、ユーザーがそのトラックを選択してから先頭へ戻った場合、ユーザーエージェントは、そのトラックがメディアリソースの先頭から始まっていたが、1 時間経過するまでは単に透明であったかのように動作する。

以下は、AudioTrackList および VideoTrackList インターフェイスを実装するすべてのオブジェクトが、イベントハンドラー IDL 属性としてサポートしなければならないイベントハンドラー（および対応するイベントハンドラーイベント型）である。

イベントハンドラー	イベントハンドラーイベント型
`onchange` AudioTrackList/change_event 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? TextTrackList/change_event 現在のすべてのエンジンでサポートされています。 Firefox31+Safari7+Chrome33+ Opera?Edge79+ Edge（レガシー）18Internet Explorerいいえ Firefox Android?Safari iOS?Chrome Android?WebView Android4.4+Samsung Internet?Opera Android? VideoTrackList/change_event 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?	`change`
`onaddtrack` AudioTrackList/addtrack_event 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? TextTrackList/addtrack_event 現在のすべてのエンジンでサポートされています。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer11 Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ VideoTrackList/addtrack_event 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?	`addtrack`
`onremovetrack` AudioTrackList/removetrack_event 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? TextTrackList/removetrack_event 現在のすべてのエンジンでサポートされています。 Firefox31+Safari7+Chrome33+ Opera20+Edge79+ Edge（レガシー）18Internet Explorerいいえ Firefox Android?Safari iOS?Chrome Android?WebView Android4.4+Samsung Internet?Opera Android20+ VideoTrackList/removetrack_event 現在のすべてのエンジンでサポートされています。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge（レガシー）いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?	`removetrack`

4.8.11.10.2 特定の音声トラックおよび動画トラックを宣言的に選択する

audioTracks および videoTracks 属性を使用すると、どのトラックを再生するかをスクリプトで選択できるが、メディアリソースの URLのフラグメントで特定のトラックを指定することにより、特定のトラックを宣言的に選択することもできる。フラグメントの形式は、メディアリソースのMIME タイプに依存する。 [RFC2046] [URL]

この例では、メディアフラグメント構文をサポートする形式を使用する動画を、デフォルトの動画トラックの代わりに「Alternative」というラベルの付いた別アングルが有効になるように埋め込んでいる。

<video src="myvideo#track=Alternative"></video>

4.8.11.11 時間指定テキストトラック

4.8.11.11.1 テキストトラックモデル

メディア要素は、関連付けられたテキストトラックのグループを持つことができ、これはメディア要素のテキストトラックのリストと呼ばれる。テキストトラックは、次のように並べ替えられる。

メディア要素の子である track 要素に対応するテキストトラックを、ツリー順で並べる。
addTextTrack() メソッドを使用して追加されたテキストトラックを、追加された順に古いものから並べる。
メディアリソース固有テキストトラック（メディアリソース内のデータに対応するテキストトラック）を、メディアリソースの形式仕様で定義された順序で並べる。

テキストトラックは TextTrack オブジェクトであり、次のものから構成される。

テキストトラックの種類

これは、ユーザーエージェントがトラックをどのように処理するかを決定する。種類は文字列で表される。使用可能な文字列は次のとおりである。

subtitles
captions
descriptions
chapters
metadata

track 要素に対応するテキストトラックの場合、トラックの種類は動的に変化し得る。

ラベル

これは、ユーザーがトラックを識別できるようにすることを意図した、人間が読める文字列である。

track 要素に対応するテキストトラックの場合、トラックのラベルは動的に変化し得る。

テキストトラックのラベルが空文字列である場合、ユーザーエージェントは、ユーザーインターフェイスで使用するために、テキストトラックの他のプロパティ（たとえば、テキストトラックの種類や言語）から適切なラベルを自動的に生成するべきである。この自動生成されたラベルは API には公開されない。

帯域内メタデータトラックディスパッチ型

これは、帯域内メタデータトラックを文書内の異なるスクリプトへ振り分けられるようにするために、メディアリソースから特に帯域内メタデータトラック用として抽出される文字列である。

たとえば、従来のテレビ局の放送をウェブ上でストリーミングし、ウェブ固有のインタラクティブ機能で拡張する場合、広告ターゲティング用メタデータ、クイズ番組中のトリビアゲームデータ、スポーツ中継中の選手の状態、料理番組中のレシピ情報などを含むテキストトラックを持つことができる。各番組の開始および終了に伴って、新しいトラックがストリームに追加または削除される可能性があり、各トラックが追加されるたびに、ユーザーエージェントはこの属性の値を使用して専用のスクリプトモジュールに結び付けることができる。

帯域内メタデータテキストトラック以外では、帯域内メタデータトラックディスパッチ型は空文字列である。異なるメディア形式について、この値をどのように設定するかは、メディアリソース固有テキストトラックを公開する手順で説明する。

言語

これは、テキストトラックのキューの言語を表す文字列（BCP 47 言語タグ）である。 [BCP47]

track 要素に対応するテキストトラックの場合、テキストトラックの言語は動的に変化し得る。

識別子

文字列。

準備状態

次のいずれか。

未読み込み: テキストトラックのキューがまだ取得されていないことを示す。
読み込み中: テキストトラックが読み込み中であり、これまでに致命的なエラーが発生していないことを示す。パーサーによって、さらにキューがトラックへ追加される可能性がある。
読み込み済み: テキストトラックが致命的なエラーなしで読み込まれたことを示す。
読み込み失敗: テキストトラックは有効にされたが、ユーザーエージェントが取得を試みた際に、何らかの理由で失敗したことを示す（たとえば、URLを解析できなかった、ネットワークエラー、未知のテキストトラック形式など）。一部またはすべてのキューが欠落している可能性が高く、それらは取得されない。

テキストトラックの準備状態は、トラックが取得されるにつれて動的に変化する。

モード

次のいずれか。

無効: テキストトラックがアクティブではないことを示す。トラックを DOM に公開する目的を除き、ユーザーエージェントはテキストトラックを無視する。アクティブなキューはなく、イベントは発火せず、ユーザーエージェントはトラックのキューを取得しようとしない。
非表示: テキストトラックはアクティブだが、ユーザーエージェントがキューを積極的に表示していないことを示す。トラックのキューを取得する試みがまだ行われていない場合、ユーザーエージェントはまもなくその試みを行う。ユーザーエージェントはどのキューがアクティブかのリストを維持し、それに応じてイベントを発火する。
表示中: テキストトラックがアクティブであることを示す。トラックのキューを取得する試みがまだ行われていない場合、ユーザーエージェントはまもなくその試みを行う。ユーザーエージェントはどのキューがアクティブかのリストを維持し、それに応じてイベントを発火する。さらに、種類が subtitles または captions であるテキストトラックでは、必要に応じてキューが動画に重ねて表示される。種類が descriptions であるテキストトラックでは、ユーザーエージェントはキューを非視覚的な方法でユーザーが利用できるようにする。また、種類が chapters であるテキストトラックでは、ユーザーエージェントはキューを選択することによってメディアリソース内の任意の地点へ移動できる仕組みをユーザーに提供する。

0 個以上のキューのリスト

テキストトラックキューのリストと、テキストトラックのレンダリングを更新する規則。たとえば WebVTT では、WebVTT テキストトラックの表示を更新する規則。[WEBVTT]

テキストトラックがまだ読み込まれていないか、依然として読み込み中であること、または DOM 操作により、テキストトラックのキューのリストは動的に変化し得る。

各メディア要素は、初期状態で空でなければならない保留中のテキストトラックのリスト、初期状態で false でなければならないパーサーでブロック中フラグ、および同様に初期状態で false でなければならない自動トラック選択実行済みフラグを持つ。

ユーザーエージェントがメディア要素の保留中のテキストトラックのリストを設定する必要がある場合、ユーザーエージェントは、要素のテキストトラックのリスト内にある各テキストトラックのうち、テキストトラックモードが無効ではなく、かつテキストトラック準備状態が読み込み中であるものを、要素の保留中のテキストトラックのリストへ追加しなければならない。

track 要素の親ノードが変更されるたびに、ユーザーエージェントは、その要素に対応するテキストトラックを、それが含まれているすべての保留中のテキストトラックのリストから削除しなければならない。

テキストトラックのテキストトラック準備状態が、読み込み済みまたは読み込み失敗のいずれかへ変化するたびに、ユーザーエージェントは、そのトラックを、それが含まれているすべての保留中のテキストトラックのリストから削除しなければならない。

メディア要素が HTML パーサーまたは XML パーサーによって作成された場合、ユーザーエージェントは、要素のパーサーでブロック中フラグを true に設定しなければならない。メディア要素が、 HTML パーサーまたは XML パーサーの開いている要素のスタックから取り出された場合、ユーザーエージェントは、自動テキストトラック選択に関するユーザー設定を尊重し、保留中のテキストトラックのリストを設定し、要素のパーサーでブロック中フラグを false に設定しなければならない。

メディア要素のテキストトラックは、要素の保留中のテキストトラックのリストが空であり、かつ要素のパーサーでブロック中フラグが false である場合に準備完了となる。

各メディア要素は、初期状態で未設定でなければならない保留中のテキストトラック変更通知フラグを持つ。

メディア要素のテキストトラックのリストに含まれるテキストトラックのテキストトラックモードの値が変化するたびに、ユーザーエージェントはメディア要素について次の手順を実行しなければならない。

メディア要素の保留中のテキストトラック変更通知フラグが設定されている場合、return。
メディア要素の保留中のテキストトラック変更通知フラグを設定する。
メディア要素を与えてメディア要素タスクをキューに入れ、次の手順を実行する。
1. メディア要素の保留中のテキストトラック変更通知フラグを未設定にする。
2. メディア要素の textTracks 属性の TextTrackList オブジェクトで、change という名前のイベントを発火する。
メディア要素のポスター表示フラグが設定されていない場合、 時が進む手順を実行する。

この節に列挙されるタスクのタスクソースは、 DOM 操作タスクソースである。

テキストトラックキューは、テキストトラック内の時間依存データの単位であり、たとえば字幕やキャプションでは、ある時刻に表示され、別の時刻に消えるテキストに対応する。

各テキストトラックキューは、次のものから構成される。

識別子: 任意の文字列。
開始時刻: キューが適用されるメディアデータの範囲の開始を表す、秒および秒の小数部で示される時刻。
終了時刻: キューが適用されるメディアデータの範囲の終了を表す、秒および秒の小数部で示される時刻。または、無制限テキストトラックキューの場合は正の Infinity。
終了時一時停止フラグ: キューが適用される範囲の終端に達したときに、メディアリソースの再生を一時停止するかどうかを示すブール値。
追加の形式固有データ: キューの実データを含む、その形式で必要とされる追加フィールド。たとえば WebVTT には、テキストトラックキューの書字方向などがある。 [WEBVTT]

無制限テキストトラックキューは、テキストトラックキュー終了時刻が正の Infinity に設定されたテキストトラックキューである。アクティブな無制限テキストトラックキューは、通常の再生中に現在の再生位置が通常どおり単調に増加することでは、非アクティブになり得ない（たとえば、終了時刻が告知されていないライブイベントの章用メタデータキュー）。

テキストトラックキュー開始時刻およびテキストトラックキュー終了時刻は負の値になり得る。（ただし、現在の再生位置が負になることはないため、時刻 0 より前に完全に位置するキューはアクティブになれない。）

各テキストトラックキューには、対応する TextTrackCue オブジェクト（より具体的には、TextTrackCueを継承するオブジェクト。たとえば WebVTT キューは VTTCue インターフェイスを使用する）がある。テキストトラックキューのメモリー内表現は、この TextTrackCue API を介して動的に変更できる。[WEBVTT]

テキストトラックキューには、その特定の種類のテキストトラックキューの仕様で定義されるテキストトラックのレンダリングを更新する規則が関連付けられる。これらの規則は、キューを表すオブジェクトが addCue() メソッドを使用して TextTrack オブジェクトへ追加された場合に特に使用される。

さらに、各テキストトラックキューは、2 つの動的情報を持つ。

有効フラグ: このフラグは初期状態で未設定でなければならない。このフラグは、キューがアクティブまたは非アクティブになったときにイベントが適切に発火することを保証し、正しいキューがレンダリングされるようにするために使用される。

ユーザーエージェントは、テキストトラックキューが、そのテキストトラックのテキストトラックキューのリストから削除されるたび、テキストトラック自体が、そのメディア要素のテキストトラックのリストから削除されるたび、またはそのテキストトラックモードが無効へ変更されるたび、およびメディア要素の readyStateが HAVE_NOTHING へ戻されるたびに、このフラグを同期的に未設定にしなければならない。この方法により、関連する事象の前に表示中であったテキストトラック内の 1 つ以上のキューについてフラグが未設定になった場合、ユーザーエージェントは、影響を受けるすべてのキューについてフラグを未設定にした後、それらのテキストトラックのテキストトラックのレンダリングを更新する規則を適用しなければならない。たとえば、WebVTT に基づくテキストトラックでは、 WebVTT テキストトラックの表示を更新する規則。[WEBVTT]
表示状態: これは、キューを一貫した位置に保つために、レンダリングモデルの一部として使用される。初期状態では空でなければならない。テキストトラックキュー有効フラグが未設定になるたびに、ユーザーエージェントはテキストトラックキュー表示状態を空にしなければならない。

メディア要素のテキストトラックに属するテキストトラックキューは、テキストトラックキュー順で互いに対して並べられる。この順序は次のように決定される。まず、キューを、それぞれのテキストトラックごとにグループ化し、そのグループを、それぞれのテキストトラックがメディア要素のテキストトラックのリストに現れる順序と同じ順序にする。次に、各グループ内でキューを開始時刻の早い順に並べる。次に、同じ開始時刻を持つキューを、終了時刻の遅い順に並べる。最後に、同一の終了時刻を持つキューを、それぞれのテキストトラックキューのリストへ最後に追加された順に、古いものから並べる（したがって、たとえば WebVTT ファイルのキューでは、初期状態ではファイルに列挙された順序となる）。[WEBVTT]

4.8.11.11.2 帯域内テキストトラックの取得

メディアリソース固有テキストトラックは、メディアリソース内で見つかったデータに対応するテキストトラックである。

そのようなデータを処理およびレンダリングする規則は、関連する仕様によって定義される。たとえば、メディアリソースが動画である場合は、動画形式の仕様によって定義される。一部の従来形式の詳細は、メディアコンテナーから HTML への帯域内メディアリソーストラックの取り込みにある。 [INBAND]

メディアリソースが、ユーザーエージェントによってテキストトラックと同等であると認識され、サポートされるデータを含む場合、ユーザーエージェントは、関連データを使用してメディアリソース固有テキストトラックを公開する手順を次のように実行する。

関連データを新しいテキストトラックに関連付ける。そのテキストトラックはメディアリソース固有テキストトラックである。
関連する仕様で定義される関連データの意味に基づいて、新しいテキストトラックの種類、ラベル、言語、および識別子を設定する。そのデータにラベルがない場合、ラベルを空文字列に設定しなければならない。

メディアリソースがメディアフラグメント構文をサポートする形式である場合、識別子は、そのようなフラグメントのトラック次元におけるトラック名として使用した場合に、そのトラックを有効にする識別子と同じでなければならない。
テキストトラックキューのリストを、対象となる形式に適したテキストトラックのレンダリングを更新する規則に関連付ける。
新しいテキストトラックの種類が chapters または metadata である場合、メディアリソースの型に基づいて、テキストトラックの帯域内メタデータトラックディスパッチ型を次のように設定する。

メディアリソースが Ogg ファイルである場合

テキストトラックの帯域内メタデータトラックディスパッチ型を、Name ヘッダーフィールドの値に設定しなければならない。[OGGSKELETONHEADERS]

メディアリソースが WebM ファイルである場合

テキストトラックの帯域内メタデータトラックディスパッチ型を、CodecID 要素の値に設定しなければならない。[WEBMCG]

メディアリソースが MPEG-2 ファイルである場合

stream typeを、ファイルのプログラムマップセクションでテキストトラックの型を記述する "stream_type" フィールドの値を 8 ビット符号なし整数として解釈したものとする。 lengthを、プログラムマップセクションの同じ部分にあるトラックの "ES_info_length" フィールドの値を、動画および関連する音声情報の汎用符号化で定義される整数として解釈したものとする。descriptor bytesを、 "ES_info_length" フィールドに続くlengthバイトとする。テキストトラックの帯域内メタデータトラックディスパッチ型を、stream typeバイトと 0 個以上のdescriptor bytesバイトを連結し、 ASCII 大文字 16 進数字を使用して 16 進数で表したものに設定しなければならない。 [MPEG2]

メディアリソースが MPEG-4 ファイルである場合

stsd boxを、ファイルの最初の moov box にあるテキストトラックの trak box の最初の mdia box の最初の minf box の最初の stbl box の最初の stsd box とし、そのような stsd box が存在しない場合は null とする。 stsd boxが null である場合、またはstsd boxが mett box も metx box も持たない場合、テキストトラックの帯域内メタデータトラックディスパッチ型を空文字列に設定しなければならない。それ以外で、stsd boxが mett box を持つ場合、テキストトラックの帯域内メタデータトラックディスパッチ型を、文字列 "mett"、 U+0020 SPACE 文字、およびstsd boxの最初の mett box にある最初の mime_format フィールドの値を連結したものに設定するか、その box にそのフィールドがない場合は空文字列に設定しなければならない。それ以外で、stsd boxが mett box を持たず、 metx box を持つ場合、テキストトラックの帯域内メタデータトラックディスパッチ型を、文字列 "metx"、 U+0020 SPACE 文字、およびstsd boxの最初の metx box にある最初の namespace フィールドの値を連結したものに設定するか、その box にそのフィールドがない場合は空文字列に設定しなければならない。 [MPEG4]
キューを公開するためのガイドラインに従って、これまでに解析されたキューで、新しいテキストトラックのキューのリストを設定し、必要に応じて動的な更新を開始する。
新しいテキストトラックの準備状態を読み込み済みに設定する。
新しいテキストトラックのモードを、ユーザー設定およびそのデータに関する関連仕様の要件と整合するモードに設定する。

たとえば、他にアクティブな字幕がなく、これが強制字幕トラック（音声トラックの主要言語による字幕トラックだが、実際に別の言語で話される音声に対してのみ字幕を提供するもの）である場合、ここでその字幕を有効にできる。
新しいテキストトラックを、メディア要素のテキストトラックのリストに追加する。
メディア要素の textTracks 属性の TextTrackList オブジェクトで、TrackEventを使用し、 track 属性をテキストトラックに初期化して、 addtrack という名前のイベントを発火する。

4.8.11.11.3 帯域外テキストトラックの取得

track 要素が作成された場合、それを新しいテキストトラックに関連付けなければならない（その値は以下で定義するとおりに設定する）。

テキストトラックの種類は、要素の kind 属性の状態から、次の表に従って決定される。第 1 列のセルに示された状態について、種類は第 2 列に示された文字列となる。

状態	文字列
字幕	`subtitles`
キャプション	`captions`
解説	`descriptions`
章メタデータ	`chapters`
メタデータ	`metadata`

テキストトラックのラベルは、要素のトラックラベルである。

テキストトラックの言語は、存在する場合は要素のトラック言語であり、それ以外の場合は空文字列である。

テキストトラックの識別子は、存在する場合は要素の id 属性値であり、それ以外の場合は空文字列である。

kind、 label、 srclang、および id 属性が設定、変更、または削除されると、テキストトラックは、上記の定義に従って更新されなければならない。

トラック URLの変更は、以下のアルゴリズムで処理される。

テキストトラック準備状態の初期値は未読み込みであり、テキストトラックモードの初期値は無効である。

テキストトラックキューのリストは初期状態で空である。参照されるファイルが解析されると、動的に変更される。このリストには、対象となる形式に適したテキストトラックのレンダリングを更新する規則が関連付けられる。WebVTT では、これは WebVTT テキストトラックの表示を更新する規則である。[WEBVTT]

track 要素の親要素が変更され、新しい親がメディア要素である場合、ユーザーエージェントは、その track 要素に対応するテキストトラックを、メディア要素のテキストトラックのリストへ追加し、次にメディア要素を与えてメディア要素タスクをキューに入れ、メディア要素の textTracks 属性の TextTrackList オブジェクトで、TrackEventを使用し、 track 属性をテキストトラックに初期化して、 addtrack という名前のイベントを発火しなければならない。

track 要素の親要素が変更され、以前の親がメディア要素であった場合、ユーザーエージェントは、その track 要素に対応するテキストトラックを、メディア要素のテキストトラックのリストから削除し、次にメディア要素を与えてメディア要素タスクをキューに入れ、メディア要素の textTracks 属性の TextTrackList オブジェクトで、TrackEventを使用し、 track 属性をテキストトラックに初期化して、 removetrack という名前のイベントを発火しなければならない。

track 要素に対応するテキストトラックが、メディア要素のテキストトラックのリストに追加された場合、ユーザーエージェントはメディア要素を与えてメディア要素タスクをキューに入れ、メディア要素について次の手順を実行しなければならない。

要素のパーサーでブロック中フラグが true である場合、return。
要素の自動トラック選択実行済みフラグが true である場合、return。
この要素について、自動テキストトラック選択に関するユーザー設定を尊重する。

ユーザーエージェントがメディア要素について自動テキストトラック選択に関するユーザー設定を尊重する必要がある場合、ユーザーエージェントは次の手順を実行しなければならない。

subtitles および captions について、自動テキストトラック選択を実行する。
descriptions について、自動テキストトラック選択を実行する。
メディア要素のテキストトラックのリストに、テキストトラックの種類が chapters または metadata であり、default 属性が設定された track 要素に対応し、かつテキストトラックモードが無効に設定されているテキストトラックがある場合、そのようなすべてのトラックのテキストトラックモードを非表示に設定する。
要素の自動トラック選択実行済みフラグを true に設定する。

上記の手順で、1 つ以上のテキストトラックの種類について自動テキストトラック選択を実行すると記されている場合、それは次の手順を実行することを意味する。

candidatesを、メディア要素のテキストトラックのリスト内にあるテキストトラックのうち、テキストトラックの種類が、存在する場合はアルゴリズムに渡された種類のいずれかであるものからなるリストとし、テキストトラックのリストに示される順序で並べる。
candidatesが空である場合、return。
candidates内のいずれかのテキストトラックのテキストトラックモードが表示中に設定されている場合、return。
ユーザーが、candidates内のトラックについて、そのテキストトラックの種類、テキストトラックの言語、およびテキストトラックのラベルに基づいて有効にすることを希望している場合、そのトラックのテキストトラックモードを表示中に設定する。

たとえば、ユーザーは「可能な場合は常にフランス語のキャプションを使用する」、「タイトルに『Commentary』を含む字幕トラックがある場合は有効にする」、または「音声解説トラックが利用可能な場合は 1 つ有効にする。理想的にはスイスドイツ語、それがなければ標準スイスドイツ語または標準ドイツ語」といったブラウザー設定を行える。

それ以外で、candidates内に、default 属性が設定された track 要素に対応し、かつテキストトラックモードが無効に設定されているテキストトラックがある場合、そのような最初のトラックのテキストトラックモードを表示中に設定する。

track 要素に対応するテキストトラックで、次のいずれかの状況が発生した場合、ユーザーエージェントは、そのテキストトラックおよびその track 要素について、track 処理モデルを開始しなければならない。

track 要素が作成された。
テキストトラックのテキストトラックモードが変更された。
track 要素の親要素が変更され、新しい親がメディア要素になった。

ユーザーエージェントが、テキストトラックおよびその track 要素についてtrack 処理モデルを開始する場合、次のアルゴリズムを実行しなければならない。このアルゴリズムはイベントループ機構と密接に連携する。特に、イベントループアルゴリズムの一部としてトリガーされる同期区間を持つ。その区間内の手順には ⌛ が付けられている。

このテキストトラックおよびその track 要素について、このアルゴリズムの別の実行がすでに進行中である場合、その別のアルゴリズムにこの要素を処理させて return。
テキストトラックのテキストトラックモードが非表示または表示中のいずれにも設定されていない場合、return。
テキストトラックの track 要素の親がメディア要素ではない場合、return。
これらの手順を実行する原因となった処理を続行できるようにし、残りの手順を並行して実行する。
先頭: 安定状態を待つ。次の手順が同期区間を構成する。（同期区間内の手順には ⌛ が付けられている。）
⌛ テキストトラック準備状態を読み込み中に設定する。
⌛ URLを、track 要素のトラック URLとする。
⌛ track 要素の親がメディア要素である場合、 corsAttributeStateを、親のメディア要素の crossorigin コンテンツ属性の状態とする。それ以外の場合、corsAttributeStateを CORS なしとする。
同期区間を終了し、残りの手順を並行して続行する。
URLが空文字列ではない場合、
1. requestを、URL、"track"、 corsAttributeStateを与え、同一オリジンフォールバックフラグを設定して潜在的 CORS リクエストを作成した結果とする。
2. requestのクライアントを、 track 要素のノード文書の関連する設定オブジェクトに設定する。
3. requestの開始元の型を "track" に設定する。
4. requestをフェッチする。
フェッチアルゴリズムが、データのフェッチ中にそのデータを処理するためにネットワークタスクソースでキューに入れるタスクは、リソースの型を決定しなければならない。リソースの型がサポートされるテキストトラック形式でない場合、以下で説明するように読み込みは失敗する。それ以外の場合、受信したリソースのデータを、適切なパーサー（たとえば WebVTT パーサー）へ渡し、そのパーサーの出力にはテキストトラックキューのリストを使用しなければならない。[WEBVTT]

適切なパーサーは、これらのネットワークタスクソースのタスク中に、各タスクがネットワークから受信済みのデータを使用して実行されるたびに、テキストトラックキューのリストを増分的に更新する。

この仕様は現在、テキストトラックの MIME タイプを確認するかどうか、またはどのように確認するか、あるいは実際のファイルデータを使用してファイル型スニッフィングを行うかどうか、またはどのように行うかを規定していない。この点に関する実装者の意図は異なっており、正しい解決策は不明確である。ここに要件がないため、Content-Type ヘッダーに従うという HTTP 仕様の厳格な要件が優先される（「Content-Type は基礎となるデータのメディア型を指定する。」…… 「メディア型が Content-Type フィールドによって与えられていない場合に限り、受信者は、その内容および／またはリソースを識別するために使用された URI の名前拡張子を調べることにより、メディア型を推測しようとしてもよい。」）。

何らかの理由でフェッチが失敗した場合（ネットワークエラー、サーバーがエラーコードを返す、 CORS が失敗するなど）、またはURLが空文字列である場合、メディア要素を与えて DOM 操作タスクソースで要素タスクをキューに入れ、まずテキストトラック準備状態を読み込み失敗へ変更し、次に track 要素で、error という名前のイベントを発火する。

フェッチは失敗しなかったが、リソースの型がサポートされるテキストトラック形式ではない場合、またはファイルの処理に成功しなかった場合（たとえば、対象となる形式が XML 形式であり、ファイルに XMLが検出してアプリケーションへ報告することを要求する整形式エラーが含まれていた場合）、前述の問題が見つかったネットワークタスクソースでキューに入れられたタスクは、テキストトラック準備状態を読み込み失敗へ変更し、 track 要素で、error という名前のイベントを発火しなければならない。

フェッチが失敗せず、ファイルの処理に成功した場合、データの解析完了後にネットワークタスクソースによってキューに入れられる最後のタスクは、テキストトラック準備状態を読み込み済みへ変更し、 track 要素で、load という名前のイベントを発火しなければならない。

フェッチの進行中に、次のいずれかが発生した場合、
- テキストトラックモードが非表示または表示中に設定されている間に、トラック URLが変更され、 URLと等しくなくなった。または
- トラック URLが URLと等しくない間に、テキストトラックモードが非表示または表示中へ変更された。
……その場合、ユーザーエージェントはフェッチを中止し、そのアルゴリズムによって生成された保留中のタスクをすべて破棄し（特に、URL が変更された時点以降は、テキストトラックキューのリストへキューを追加しない）、次に track 要素を与えて、DOM 操作タスクソースで要素タスクをキューに入れ、まずテキストトラック準備状態を読み込み失敗へ変更し、次に track 要素で、error という名前のイベントを発火しなければならない。
テキストトラック準備状態が読み込み中ではなくなるまで待つ。
テキストトラックモードが非表示または表示中に設定されているのと同時に、トラック URLが URLと等しくなくなるまで待つ。
先頭とラベル付けされた手順へ移動する。

track 要素の src 属性が設定、変更、または削除されるたびに、ユーザーエージェントは直ちに、要素のテキストトラックのテキストトラックキューのリストを空にしなければならない。（存在する場合、これにより、以前に与えられた URL を使用して取得中のリソースからキューを追加する上記のアルゴリズムも停止する。）

4.8.11.11.4 さまざまな形式のキューをテキストトラックキューとして公開するためのガイドライン

特定の形式のテキストトラックキューを、HTML ユーザーエージェントによる処理のためにどのように解釈するかは、その形式によって定義される。そのような仕様がない場合、この節は、実装がそのような形式を一貫して公開しようとする際に従うことのできる制約を示す。

HTML のテキストトラックモデルをサポートするために、時間指定データの各単位はテキストトラックキューへ変換される。この仕様で定義されるテキストトラックキューの各側面に、形式の機能をどのように対応付けるかが定義されていない場合、実装は、その対応付けが上記で定義されたテキストトラックキューの各側面の定義、および次の制約と整合することを保証しなければならない。

テキストトラックキュー識別子: 形式にキューごとの識別子に明確に相当するものがない場合、空文字列に設定するべきである。
テキストトラックキューの終了時一時停止フラグ: false に設定するべきである。

4.8.11.11.5 テキストトラック API

TextTrackList

現在のすべてのエンジンでサポートされています。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge（レガシー）12+Internet Explorer10+

Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

[Exposed=Window]
interface TextTrackList : EventTarget {
  readonly attribute unsigned long length;
  getter TextTrack (unsigned long index);
  TextTrack? getTrackById(DOMString id);

  attribute EventHandler onchange;
  attribute EventHandler onaddtrack;
  attribute EventHandler onremovetrack;
};

media.textTracks.length HTMLMediaElement/textTracks 現在のすべてのエンジンでサポートされています。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet1.0+Opera Android12.1+: メディア要素に関連付けられているテキストトラックの数（たとえば、track 要素からのもの）を返す。これは、メディア要素のテキストトラックのリストに含まれるテキストトラックの数である。
media.textTracks[ n ]: メディア要素のテキストトラックのリストにある n 番目のテキストトラックを返す。
textTrack = media.textTracks.getTrackById(id) TextTrackList/getTrackById 現在のすべてのエンジンでサポートされています。 Firefox31+Safari8+Chrome33+ Opera?Edge79+ Edge（レガシー）18Internet Explorerなし Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?: 指定された識別子を持つ TextTrack オブジェクトを返す。その識別子を持つトラックがない場合は null を返す。

TextTrackList オブジェクトは、指定された順序で動的に更新されるテキストトラックのリストを表す。

メディア要素の textTracks 属性は、メディア要素のテキストトラックのリスト内のテキストトラックを、テキストトラックのリストと同じ順序で表す TextTrackList オブジェクトを返さなければならない。

TextTrackList/length

現在のすべてのエンジンでサポートされています。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge（レガシー）12+Internet Explorer10+

Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

TextTrackList オブジェクトの length 属性は、 TextTrackList オブジェクトによって表されるリスト内のテキストトラックの数を返さなければならない。

TextTrackList オブジェクトの任意の時点におけるサポートされるプロパティインデックスは、存在する場合、0 から、TextTrackList オブジェクトによって表されるリスト内のテキストトラックの数から 1 を引いた数までである。リスト内にテキストトラックがない場合、サポートされるプロパティインデックスは存在しない。

指定されたインデックス indexについて、 TextTrackList オブジェクトのインデックス付きプロパティの値を決定するには、ユーザーエージェントは、TextTrackList オブジェクトによって表されるリスト内の index 番目のテキストトラックを返さなければならない。

getTrackById(id) メソッドは、 TextTrackList オブジェクト内にある TextTrack のうち、その id IDL 属性が id 引数の値と等しい値を返す最初のものを返さなければならない。指定された引数と一致するトラックがない場合、メソッドは null を返さなければならない。

TextTrack

現在のすべてのエンジンでサポートされています。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge（レガシー）12+Internet Explorer10+

Firefox Android31+Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

enum TextTrackMode { "disabled",  "hidden",  "showing" };
enum TextTrackKind { "subtitles",  "captions",  "descriptions",  "chapters",  "metadata" };

[Exposed=Window]
interface TextTrack : EventTarget {
  readonly attribute TextTrackKind kind;
  readonly attribute DOMString label;
  readonly attribute DOMString language;

  readonly attribute DOMString id;
  readonly attribute DOMString inBandMetadataTrackDispatchType;

  attribute TextTrackMode mode;

  readonly attribute TextTrackCueList? cues;
  readonly attribute TextTrackCueList? activeCues;

  undefined addCue(TextTrackCue cue);
  undefined removeCue(TextTrackCue cue);

  attribute EventHandler oncuechange;
};

textTrack = media.addTextTrack(kind [, label [, language ] ])

新しい TextTrack オブジェクトを作成して返す。このオブジェクトは、メディア要素のテキストトラックのリストにも追加される。

textTrack.kind TextTrack/kind 現在のすべてのエンジンでサポートされています。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

テキストトラックの種類を表す文字列を返す。

textTrack.label TextTrack/label 現在のすべてのエンジンでサポートされています。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

存在する場合はテキストトラックのラベルを返し、それ以外の場合は空文字列を返す（オブジェクトがユーザーに公開される場合、オブジェクトの他の属性からカスタムラベルを生成する必要がある可能性が高いことを示す）。

textTrack.language TextTrack/language 現在のすべてのエンジンでサポートされています。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

テキストトラックの言語を表す文字列を返す。

textTrack.id TextTrack/id 現在のすべてのエンジンでサポートされています。 Firefox31+Safari8+Chrome33+ Opera?Edge79+ Edge（レガシー）18Internet Explorerなし Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

指定されたトラックの ID を返す。

帯域内トラックの場合、これは、形式がメディアフラグメント構文をサポートしている場合にフラグメントと共に使用でき、 getTrackById() メソッドでも使用できる ID である。

track 要素に対応するテキストトラックの場合、これは track 要素の ID である。

textTrack.inBandMetadataTrackDispatchType TextTrack/inBandMetadataTrackDispatchType Firefox31+Safari8+Chromeなし Opera?Edgeなし Edge（レガシー）なしInternet Explorerなし Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

テキストトラックの帯域内メタデータトラックディスパッチ型を表す文字列を返す。

textTrack.mode [ = value ] TextTrack/mode 現在のすべてのエンジンでサポートされています。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer10+ Firefox Android31+Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

次のリストの文字列によって表されるテキストトラックモードを返す。

"disabled": テキストトラック無効モード。
"hidden": テキストトラック非表示モード。
"showing": テキストトラック表示中モード。

モードを変更するために設定できる。

textTrack.cues TextTrack/cues 現在のすべてのエンジンでサポートされています。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer10+ Firefox Android31+Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

テキストトラックキューのリストを、 TextTrackCueList オブジェクトとして返す。

textTrack.activeCues TextTrack/activeCues 現在のすべてのエンジンでサポートされています。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer10+ Firefox Android31+Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

テキストトラックキューのリストに含まれるテキストトラックキューのうち、現在アクティブなもの（すなわち、現在の再生位置より前に開始し、その位置より後に終了するもの）を、TextTrackCueList オブジェクトとして返す。

textTrack.addCue(cue) TextTrack/addCue 現在のすべてのエンジンでサポートされています。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

指定されたキューを textTrack のテキストトラックキューのリストに追加する。

textTrack.removeCue(cue) TextTrack/removeCue 現在のすべてのエンジンでサポートされています。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

指定されたキューを textTrack のテキストトラックキューのリストから削除する。

メディア要素の addTextTrack(kind, label, language) メソッドが呼び出された場合、次の手順を実行しなければならない。

新しいテキストトラックを作成し、そのテキストトラックの種類を kindに、そのテキストトラックのラベルを labelに、そのテキストトラックの言語を languageに、そのテキストトラック準備状態をテキストトラック読み込み済み状態に、そのテキストトラックモードをテキストトラック非表示モードに、そのテキストトラックキューのリストを空のリストに設定する。

初期状態では、テキストトラックキューのリストは、いかなるテキストトラックのレンダリングを更新する規則にも関連付けられていない。テキストトラックキューが追加されると、テキストトラックキューのリストには、それに応じた規則が永続的に設定される。
新しいテキストトラックを、メディア要素のテキストトラックのリストへ追加する。
メディア要素を与えてメディア要素タスクをキューに入れ、メディア要素の textTracks 属性の TextTrackList オブジェクトで、 TrackEventを使用し、 track 属性を新しいテキストトラックに初期化して、 addtrack という名前のイベントを発火する。
新しいテキストトラックを返す。

kind の取得手順は、 thisの種類を返すことである。

label の取得手順は、 thisのラベルを返すことである。

language の取得手順は、 thisの言語を返すことである。

id の取得手順は、 thisの識別子を返すことである。

inBandMetadataTrackDispatchType の取得手順は、thisの帯域内メタデータトラックディスパッチ型を返すことである。

mode の取得手順は、 thisのモードに応じて次の文字列を返すことである。

テキストトラック無効モード: "disabled"
テキストトラック非表示モード: "hidden"
テキストトラック表示中モード: "showing"

mode の設定手順は、指定された値に応じたモードを thisのモードに設定することである。

"disabled": テキストトラック無効モード。
"hidden": テキストトラック非表示モード。
"showing": テキストトラック表示中モード。

cues の取得手順は次のとおりである。

thisのモードがテキストトラック無効モードである場合、 null を返す。
thisのテキストトラックキューのリストのうち、終了時刻がスクリプト開始時の最も早い可能な位置以後であるものの部分集合を、テキストトラックキュー順で表すライブな TextTrackCueList オブジェクトを返す。

各 TextTrack オブジェクトについて、オブジェクトを返す場合は、毎回同じ TextTrackCueList オブジェクトを返さなければならない。

スクリプト開始時の最も早い可能な位置は、イベントループが最後に手順 1 に到達した時点での最も早い可能な位置である。

activeCues の取得手順は次のとおりである。

thisのモードがテキストトラック無効モードである場合、 null を返す。
thisのテキストトラックキューのリストのうち、スクリプト開始時に有効フラグが設定されていたものの部分集合を、テキストトラックキュー順で表すライブな TextTrackCueList オブジェクトを返す。

各 TextTrack オブジェクトについて、オブジェクトを返す場合は、毎回同じ TextTrackCueList オブジェクトを返さなければならない。

テキストトラックキューは、そのテキストトラックキュー有効フラグが、イベントループが最後に手順 1へ到達した時点で設定されていた場合、スクリプト開始時に有効フラグが設定されていたものとする。

addCue(cue) メソッドの手順は次のとおりである。

listを、thisのテキストトラックキューのリストとする。
listに、関連付けられたテキストトラックのレンダリングを更新する規則がまだない場合、listを、cueに適したテキストトラックのレンダリングを更新する規則に関連付ける。
listに関連付けられたテキストトラックのレンダリングを更新する規則が、cueに適したテキストトラックのレンダリングを更新する規則と同じでない場合、 "InvalidStateError" DOMExceptionをスローする。
指定されたcueがテキストトラックキューのリストに含まれている場合、そのテキストトラックキューのリストから cueを削除する。
cueをlistに追加する。

removeCue(cue) メソッドの手順は次のとおりである。

指定されたcueが thisのテキストトラックキューのリストに含まれていない場合、 "NotFoundError" DOMExceptionをスローする。
cueを、thisのテキストトラックキューのリストから削除する。

この例では、audio 要素を使用して、多数の効果音を含む音声ファイルから特定の効果音を再生する。ブラウザーが何らかのスクリプトの実行でビジー状態であっても、クリップの終端で正確に終了するように、キューを使用して音声を一時停止する。ページが音声の一時停止をスクリプトに依存していた場合、ブラウザーが指定された正確な時刻にスクリプトを実行できなければ、次のクリップの冒頭が聞こえる可能性がある。

var sfx = new Audio('sfx.wav');
var sounds = sfx.addTextTrack('metadata');

// add sounds we care about
function addFX(start, end, name) {
  var cue = new VTTCue(start, end, '');
  cue.id = name;
  cue.pauseOnExit = true;
  sounds.addCue(cue);
}
addFX(12.783, 13.612, 'dog bark');
addFX(13.612, 15.091, 'kitten mew');

function playSound(id) {
  sfx.currentTime = sounds.getCueById(id).startTime;
  sfx.play();
}

// play a bark as soon as we can
sfx.oncanplaythrough = function () {
  playSound('dog bark');
}
// meow when the user tries to leave,
// and have the browser ask them to stay
window.onbeforeunload = function (e) {
  playSound('kitten mew');
  e.preventDefault();
}

TextTrackCueList

現在のすべてのエンジンでサポートされています。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge（レガシー）12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

[Exposed=Window]
interface TextTrackCueList {
  readonly attribute unsigned long length;
  getter TextTrackCue (unsigned long index);
  TextTrackCue? getCueById(DOMString id);
};

cuelist.length

リスト内のキューの数を返す。

cuelist[index]

リスト内でインデックス indexを持つテキストトラックキューを返す。キューはテキストトラックキュー順で並べられる。

cuelist.getCueById(id)

テキストトラックキュー識別子が idである最初のテキストトラックキューを（テキストトラックキュー順で）返す。

指定された識別子を持つキューがない場合、または引数が空文字列である場合は null を返す。

TextTrackCueList オブジェクトは、指定された順序で動的に更新されるテキストトラックキューのリストを表す。

TextTrackCueList/length

現在のすべてのエンジンでサポートされています。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge（レガシー）12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

length 属性は、 TextTrackCueList オブジェクトによって表されるリスト内のキューの数を返さなければならない。

TextTrackCueList オブジェクトの任意の時点におけるサポートされるプロパティインデックスは、存在する場合、0 から、TextTrackCueList オブジェクトによって表されるリスト内のキューの数から 1 を引いた数までである。リスト内にキューがない場合、サポートされるプロパティインデックスは存在しない。

指定されたインデックス indexについてインデックス付きプロパティの値を決定するには、ユーザーエージェントは、TextTrackCueList オブジェクトによって表されるリスト内の index 番目のテキストトラックキューを返さなければならない。

TextTrackCueList/getCueById

現在のすべてのエンジンでサポートされています。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge（レガシー）12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

getCueById(id) メソッドは、空文字列以外の引数を指定して呼び出された場合、TextTrackCueList オブジェクトによって表されるリスト内にあるテキストトラックキューのうち、テキストトラックキュー識別子が idである最初のものを、存在する場合は返し、それ以外の場合は null を返さなければならない。引数が空文字列である場合、メソッドは null を返さなければならない。

TextTrackCue

現在のすべてのエンジンでサポートされています。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge（レガシー）12+Internet Explorer10+

Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

[Exposed=Window]
interface TextTrackCue : EventTarget {
  readonly attribute TextTrack? track;

  attribute DOMString id;
  attribute double startTime;
  attribute unrestricted double endTime;
  attribute boolean pauseOnExit;

  attribute EventHandler onenter;
  attribute EventHandler onexit;
};

cue.track

このテキストトラックキューが属する TextTrack オブジェクトを、存在する場合は返し、それ以外の場合は null を返す。

cue.id [ = value ]

テキストトラックキュー識別子を返す。

設定できる。

cue.startTime [ = value ]

テキストトラックキュー開始時刻を秒単位で返す。

設定できる。

cue.endTime [ = value ]

テキストトラックキュー終了時刻を秒単位で返す。

無制限テキストトラックキューの場合は、正の Infinity を返す。

設定できる。

cue.pauseOnExit [ = value ]

テキストトラックキューの終了時一時停止フラグが設定されている場合は true を返し、それ以外の場合は false を返す。

設定できる。

TextTrackCue/track

現在のすべてのエンジンでサポートされています。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge（レガシー）12+Internet Explorer10+

Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

track の取得手順は、 thisのテキストトラックキューが、そのキューのリスト内に含まれているテキストトラックを、存在する場合は返し、それ以外の場合は null を返すことである。

TextTrackCue/id

現在のすべてのエンジンでサポートされています。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge（レガシー）12+Internet Explorer10+

Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

id 属性は、取得時には、 TextTrackCue オブジェクトが表すテキストトラックキューのテキストトラックキュー識別子を返さなければならない。設定時には、テキストトラックキュー識別子を新しい値に設定しなければならない。

TextTrackCue/startTime

現在のすべてのエンジンでサポートされています。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge（レガシー）12+Internet Explorer10+

Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

startTime 属性は、取得時には、 TextTrackCue オブジェクトが表すテキストトラックキューのテキストトラックキュー開始時刻を秒単位で返さなければならない。設定時には、テキストトラックキュー開始時刻を、秒単位として解釈した新しい値に設定しなければならない。その後、 TextTrackCue オブジェクトのテキストトラックキューが、テキストトラックのキューのリストに含まれ、そのテキストトラックがメディア要素のテキストトラックのリストに含まれ、かつメディア要素のポスター表示フラグが設定されていない場合、そのメディア要素について 時が進む手順を実行する。

TextTrackCue/endTime

現在のすべてのエンジンでサポートされています。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge（レガシー）12+Internet Explorer10+

Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

endTime 属性は、取得時には、 TextTrackCue オブジェクトが表すテキストトラックキューのテキストトラックキュー終了時刻を、秒単位または正の Infinity として返さなければならない。設定時に、新しい値が負の Infinity または非数（NaN）値である場合、 TypeError 例外をスローする。それ以外の場合、テキストトラックキュー終了時刻を新しい値に設定しなければならない。その後、TextTrackCue オブジェクトのテキストトラックキューが、テキストトラックのキューのリストに含まれ、そのテキストトラックがメディア要素のテキストトラックのリストに含まれ、かつメディア要素のポスター表示フラグが設定されていない場合、そのメディア要素について 時が進む手順を実行する。

TextTrackCue/pauseOnExit

現在のすべてのエンジンでサポートされています。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge（レガシー）12+Internet Explorer10+

Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

pauseOnExit 属性は、取得時には、 TextTrackCue オブジェクトが表すテキストトラックキューのテキストトラックキューの終了時一時停止フラグが設定されている場合は true を返し、それ以外の場合は false を返さなければならない。設定時には、新しい値が true である場合はテキストトラックキューの終了時一時停止フラグを設定し、それ以外の場合は未設定にしなければならない。

4.8.11.11.6 テキストトラック API のオブジェクトのイベントハンドラー

TextTrackList インターフェイスを実装するすべてのオブジェクトが、イベントハンドラー IDL 属性としてサポートしなければならないイベントハンドラー（および対応するイベントハンドラーイベント型）は次のとおりである。

イベントハンドラー	イベントハンドラーイベント型
`onchange`	`change`
`onaddtrack`	`addtrack`
`onremovetrack`	`removetrack`

TextTrack インターフェイスを実装するすべてのオブジェクトが、イベントハンドラー IDL 属性としてサポートしなければならないイベントハンドラー（および対応するイベントハンドラーイベント型）は次のとおりである。

イベントハンドラー	イベントハンドラーイベント型
`oncuechange` TextTrack/cuechange_event 現在のすべてのエンジンでサポートされています。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+	`cuechange`

TextTrackCue インターフェイスを実装するすべてのオブジェクトが、イベントハンドラー IDL 属性としてサポートしなければならないイベントハンドラー（および対応するイベントハンドラーイベント型）は次のとおりである。

イベントハンドラー	イベントハンドラーイベント型
`onenter` TextTrackCue/enter_event 現在のすべてのエンジンでサポートされています。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+	`enter`
`onexit` TextTrackCue/exit_event 現在のすべてのエンジンでサポートされています。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge（レガシー）12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+	`exit`

4.8.11.11.7 メタデータテキストトラックのベストプラクティス

この節は非規範的である。

テキストトラックは、インタラクティブな表示または拡張表示のために、メディアデータに関連するデータを格納するために使用できる。

たとえば、スポーツ中継を表示するページには、現在の得点に関する情報を含めることができる。ロボット競技がライブストリーミングされているとする。次のように、画像に得点を重ねて表示できる。

ユーザーが動画内の任意の地点へシークした場合でも得点表示を正しくレンダリングするには、メタデータテキストトラックキューを、得点に適した長さにする必要がある。たとえば、上のフレームでは、試合番号を示し、試合全体の長さにわたって継続するキューが 1 つ、青チームの得点が変化するまで継続するキューが 1 つ、赤チームの得点が変化するまで継続するキューが 1 つある可能性がある。動画が単にライブイベントのストリームである場合、右下の時刻はキューに基づくのではなく、現在の動画時刻から自動的に導出されると考えられる。しかし、動画がハイライトのみである場合は、それもキューで指定できる。

次に、これらの断片が WebVTT ファイル内でどのように見えるかを示す。

WEBVTT

...

05:10:00.000 --> 05:12:15.000
matchtype:qual
matchnumber:37

...

05:11:02.251 --> 05:11:17.198
red:78

05:11:03.672 --> 05:11:54.198
blue:66

05:11:17.198 --> 05:11:25.912
red:80

05:11:25.912 --> 05:11:26.522
red:83

05:11:26.522 --> 05:11:26.982
red:86

05:11:26.982 --> 05:11:27.499
red:89

...

ここで重要なのは、関連するイベントが適用される時間の長さにわたるキューとして情報が与えられている点である。代わりに、たとえば得点が変化したときに、05:11:17.198 で "red+2"、05:11:25.912 で "red+3" などのように、長さが 0 の（または非常に短く、ほぼ長さが 0 の）キューとして得点を指定すると問題が生じる。主に、通知の見落としがないことを確認するためにスクリプトがキューのリスト全体をたどる必要があるため、シークの実装がはるかに困難になる。また、キューが短い場合、スクリプトがそれらを明示的に監視しない限り、キューがアクティブになったことを認識できない可能性もある。

この方法でキューを使用する場合、作成者は現在の注釈を更新するために cuechange イベントを使用することが推奨される。（特に、timeupdate イベントを使用することは、キューが変更されていない場合でも処理を行う必要があり、さらに重要なこととして、メタデータキューがアクティブになってから表示が更新されるまでの遅延が大きくなるため、あまり適切ではない。これは、timeupdate イベントの発生頻度が制限されているためである。）

目次

詳細目次

1 はじめに

1.1 この仕様はどこに位置付けられるか？

1.2 これは HTML5 か？

1.3 背景

1.4 対象読者

1.5 適用範囲

1.6 歴史

1.7 設計上の注記

1.7.1 スクリプト実行の直列化可能性

1.7.2 拡張性

1.8 HTML 構文と XML 構文

1.9 この仕様の構成

1.9.1 この仕様の読み方

1.9.2 表記規則

1.10 HTML の簡単な紹介

1.10.1 HTML を使用した安全な アプリケーションの作成

1.10.2 スクリプト API の 使用時に避けるべき一般的な落とし穴

1.10.3 HTML 作成時の誤りを検出する方法：バリデーターと適合性チェッカー

1.11 作者に対する適合性要件

1.11.1 表現用マークアップ

1.11.2 構文エラー

1.11.3 コンテンツモデル および属性値に関する制限

1.12 推奨文献

2 共通基盤

2.1 用語

2.1.1 並列処理

2.1.2 リソース

2.1.3 XML 互換性

2.1.4 DOM ツリー

2.1.5 スクリプティング

2.1.6 プラグイン

2.1.7 文字エンコーディング

2.1.8 適合性クラス

2.1.9 依存関係

2.1.10 拡張性

2.1.11 XPath および XSLT との相互作用

2.2 ポリシー制御機能

2.3 共通マイクロ構文

2.3.1 共通のパーサー慣用句

2.3.2 ブール属性

2.3.3 キーワードと列挙属性

2.3.4 数値

2.3.4.1 符号付き整数

2.3.4.2 非負整数

2.3.4.3 浮動小数点数

2.3.4.4 パーセンテージと長さ

2.3.4.5 0 でないパーセンテージと長さ

2.3.4.6 浮動小数点数のリスト

2.3.4.7 寸法のリスト

2.3.5 日付と時刻

2.3.5.1 月

2.3.5.2 日付

2.3.5.3 年のない日付

2.3.5.4 時刻

2.3.5.5 ローカル日付と時刻

2.3.5.6 タイムゾーン

2.3.5.7 グローバル日付と時刻

2.3.5.8 週

2.3.5.9 期間

2.3.5.10 より曖昧な時点

2.3.6 レガシーカラー

2.3.7 空白区切りトークン

2.3.8 コンマ区切りトークン

2.3.9 参照

2.3.10 メディアクエリー

2.3.11 一意な内部値

2.4 URL

2.4.1 用語

2.4.2 URL の構文解析

2.4.3 文書基底 URL

2.5 リソースの取得

2.5.1 用語

2.5.2 リソースの型の決定

2.5.3 meta 要素からの文字エンコーディングの抽出

2.5.4 CORS 設定属性

2.5.5 リファラーポリシー属性

2.5.6 nonce 属性

2.5.7 遅延読み込み属性

1.10.1 HTML を使用した安全なアプリケーションの作成

1.10.2 スクリプト API の使用時に避けるべき一般的な落とし穴

1.11.3 コンテンツモデルおよび属性値に関する制限

2.5.3 `meta` 要素からの文字エンコーディングの抽出

2.6.2 IDL 拡張属性を介した反映の使用

2.6.4.1 `HTMLAllCollection` インターフェイス

2.6.4.1.1 [[Call]] ( `thisArgument`, `argumentsList` )

2.6.4.2 `HTMLFormControlsCollection` インターフェイス

2.6.4.3 `HTMLOptionsCollection` インターフェイス

2.6.5 `DOMStringList` インターフェイス

2.7.3 StructuredSerializeInternal ( `value`, `forStorage` [ , `memory` ] )

2.7.4 StructuredSerialize ( `value` )

2.7.5 StructuredSerializeForStorage ( `value` )

2.7.6 StructuredDeserialize ( `serialized`, `targetRealm` [ , `memory` ] )

2.7.7 StructuredSerializeWithTransfer ( `value`, `transferList` )

2.7.8 StructuredDeserializeWithTransfer ( `serializeWithTransferResult`, `targetRealm` )

2.7.9 他の仕様からのシリアライズおよび転送の実行

3.1.1 `Document` オブジェクト

3.1.2 `DocumentOrShadowRoot` インターフェイス

3.2.6.1 `title`属性

3.2.6.2 `lang`属性および`xml:lang` 属性

3.2.6.3 `translate`属性

3.2.6.4 `dir`属性

3.2.6.5 `style`属性

3.2.6.6 `data-*` 属性によるカスタムの非表示データの埋め込み

3.2.7 `innerText`および`outerText`プロパティ

4.1.1 `html` 要素

4.2.1 `head` 要素