HTML
現行標準 — 最終更新 2025年11月4日
現行標準 — 最終更新 2025年11月4日
a要素
em要素
strong要素
small要素
s要素
cite要素
q要素
dfn要素
abbr要素
ruby要素
rt要素
rp要素
data要素
time要素
code要素
var要素
samp要素
kbd要素
subおよびsup要素
i要素
b要素
u要素
mark要素
bdi要素
bdo要素
span要素
br要素
wbr要素
aおよびarea要素によって作成されるリンク
aおよびarea要素のAPI
alternate"
author"
bookmark"
canonical"
dns-prefetch"
expect"
external"
help"
icon"
license"
manifest"
modulepreload"
nofollow"
noopener"
noreferrer"
opener"
pingback"
preconnect"
prefetch"
preload"
privacy-policy"
search"
stylesheet"
tag"
terms-of-service"
picture要素
source要素
img要素
source、img、link要素に共通の属性
iframe要素
embed要素
object要素
video要素
audio要素
track要素
TrackEventインターフェース
map要素
area要素
form要素
label要素
input要素
type属性の状態
type=hidden)
type=text)状態およびSearch状態
(type=search)
type=tel)
type=url)
type=email)
type=password)
type=date)
type=month)
type=week)
type=time)
type=datetime-local)
type=number)
type=range)
type=color)
type=checkbox)
type=radio)
type=file)
type=submit)
type=image)
type=reset)
type=button)
input要素の属性
input要素API
button要素
select要素
datalist要素
optgroup要素
option要素
textarea要素
output要素
progress要素
meter要素
fieldset要素
legend要素
selectedcontent 要素
script要素
noscript要素
template要素
slot要素
canvas要素
Path2Dオブジェクト
ImageBitmapレンダリングコンテキスト
OffscreenCanvasインターフェイス
canvas要素のセキュリティ
Window,
WindowProxy, および Locationオブジェクト
Window
object
WindowProxyエキゾチックオブジェクト
Locationインターフェース
Historyインターフェース
NotRestoredReasonsインターフェース
X-Frame-Options` ヘッダー
Refresh` ヘッダー
WindowOrWorkerGlobalScope ミキシン
button 要素
details および summary 要素
input 要素をテキスト入力ウィジェットとして使用
input 要素のドメイン固有ウィジェットとしての使用
input 要素のレンジコントロールとしての使用
input 要素のカラーウェルとしての使用
input 要素のチェックボックスおよびラジオボタンウィジェットとしての使用
input 要素のファイルアップロードコントロールとしての使用
input 要素のボタンとしての使用
marquee 要素
meter 要素
progress
要素
select 要素
textarea
要素
この仕様は、ウェブプラットフォームの大部分を非常に詳細に定義しています。他の仕様と比較した場合のこの仕様の位置付けは、以下のようにまとめることができます：
このセクションは規範的ではありません。
簡単に言えば: はい。
もう少し詳しく言うと、「HTML5」という用語は、現代のウェブ技術を指す流行語として広く使われています。その多く（すべてではありませんが）はWHATWGで開発されています。このドキュメントもその一つです。他のドキュメントはWHATWG標準概要から入手できます。
このセクションは規範的ではありません。
HTMLはワールドワイドウェブのコアマークアップ言語です。元々、HTMLは科学文書を意味的に記述するための言語として主に設計されました。しかし、その一般的な設計により、後年には他の種類の文書やアプリケーションを記述するために適応されてきました。
このセクションは規範的ではありません。
この仕様は、この仕様で定義された機能を使用する文書やスクリプトの作成者、ページ上でこの仕様で定義された機能を操作するツールの実装者、およびこの仕様の要件に対して文書や実装の正確性を確認しようとする人々を対象としています。
このドキュメントは、ウェブ技術に対して少なくとも最低限の知識を持っていない読者には、適していない可能性があります。なぜなら、ところどころで正確さのために明確さを犠牲にし、完全さのために簡潔さを犠牲にしているからです。より分かりやすいチュートリアルや作成ガイドが、このトピックへのより優しい導入を提供してくれます。
特に、DOMの基本的な理解が、この仕様の技術的な部分を完全に理解するために必要です。また、Web IDL、HTTP、XML、Unicode、文字エンコーディング、JavaScript、およびCSSの理解も役立ちますが、必須ではありません。
このセクションは規範的ではありません。
この仕様は、静的な文書から動的なアプリケーションまで、ウェブ上でアクセシブルなページを作成するためのセマンティックレベルのマークアップ言語と、それに関連するセマンティックレベルのスクリプトAPIを提供することに限定されています。
この仕様の範囲には、メディア固有のプレゼンテーションのカスタマイズを提供するためのメカニズムは含まれていません（ただし、ウェブブラウザーのデフォルトのレンダリングルールはこの仕様の末尾に含まれており、言語の一部としてCSSにフックするためのいくつかのメカニズムが提供されています）。
この仕様の範囲は、オペレーティングシステム全体を記述することではありません。特に、ハードウェア構成ソフトウェア、画像操作ツール、およびユーザーが高性能ワークステーションで日常的に使用すると予想されるアプリケーションは範囲外です。アプリケーションに関しては、この仕様は特に、ユーザーがたまに使用する、または異なる場所から定期的に使用することが予想される、低いCPU要件のアプリケーションを対象としています。このようなアプリケーションの例としては、オンライン購入システム、検索システム、ゲーム（特にマルチプレイヤーオンラインゲーム）、公共の電話帳や住所録、通信ソフトウェア（メールクライアント、インスタントメッセージクライアント、ディスカッションソフトウェア）、文書編集ソフトウェアなどがあります。
このセクションは規範的ではありません。
HTMLは、最初の5年間（1990-1995年）に数回の改訂を経て、多くの拡張を経験し、主に最初はCERN、次にIETFでホストされました。
W3Cの設立に伴い、HTMLの開発は再び場所を変更しました。1995年にHTML 3.0として知られるHTMLの拡張に関する最初の失敗した試みは、1997年に完成したHTML 3.2として知られるより実用的なアプローチに道を譲りました。その同じ年にHTML4が迅速に続きました。
翌年、W3CのメンバーはHTMLの進化を停止し、代わりにXMLベースの同等物であるXHTMLの開発を開始することを決定しました。この努力は、2000年に完成した、HTML4のXMLでの再定式化であるXHTML 1.0として知られるものから始まりました。新しいシリアル化を追加した以外に新機能はなく、その後、W3Cの焦点はXHTMLを拡張しやすくすることに向けられました。XHTML Modularizationの旗印の下で、この取り組みは行われました。これと並行して、W3Cは以前のHTMLおよびXHTML言語と互換性のない新しい言語にも取り組み、それをXHTML2と呼びました。
1998年にHTMLの進化が停止されたころ、ブラウザーベンダーによって開発された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）を置き換えるのではなく、まったく新しい技術（RSSや後のAtomなど）に限定されているという認識から生まれました。
HTML4のフォームを拡張して、XForms 1.0が導入した多くの機能を、既存のHTMLウェブページと互換性のないレンダリングエンジンをブラウザーが実装する必要なしに提供できることを示す概念実証が、この新たな関心の最初の成果でした。この初期段階では、草案はすでに公開されており、すべてのソースからの意見が求められていましたが、仕様はオペラソフトウェアの著作権の下にのみありました。
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は、仕様をW3Cの著作権の下で公開することを許可し、同時にWHATWGサイトにより制約の少ないライセンスを持つバージョンを保持しました。
数年間、両グループは協力して作業を続けました。しかし、2011年には、両グループは異なる目標を持っているとの結論に達しました。W3Cは「完成」バージョンの「HTML5」を公開したいと考え、WHATWGはプラットフォームの進化に合わせて必要に応じて新機能を追加し、既知の問題を抱えた状態で仕様を固定するのではなく、仕様を継続的に維持するリビングスタンダードとしてHTMLの作業を続けたいと考えました。
2019年、WHATWGとW3Cは、今後HTMLの単一バージョンを共同で開発することに合意しました。これがこの文書です。
このセクションは規範的ではありません。
HTMLの多くの側面は、一見すると無意味で一貫性がないように見えることを認めざるを得ません。
HTML、そのサポートとなるDOM API、およびその多くのサポート技術は、数十年にわたって、異なる優先事項を持つさまざまな人々によって開発されてきましたが、多くの場合、彼らはお互いの存在を知らなかったのです。
そのため、機能は多くのソースから生まれ、一貫して設計されていないことがしばしばあります。さらに、ウェブのユニークな特性により、実装のバグが事実上、そして今では法的に標準となっていることがよくあります。なぜなら、コンテンツが意図せずにそれらに依存して書かれることが多く、修正が行われる前にそうなってしまうからです。
それにもかかわらず、特定の設計目標に従うための努力がなされてきました。これらは次のいくつかのサブセクションで説明されています。
このセクションは規範的ではありません。
ウェブ作成者がマルチスレッドの複雑さにさらされないようにするために、HTMLおよびDOM APIは、スクリプトが他のスクリプトの同時実行を検出できないように設計されています。ワーカーを使用しても、すべてのグローバルでのすべてのスクリプトの実行を完全にシリアライズするかのように実装の動作を考えることが意図されています。
この一般的な設計原則の例外は、JavaScriptのSharedArrayBuffer
クラスです。SharedArrayBuffer
オブジェクトを使用すると、他のエージェントでスクリプトが同時に実行されていることが実際に観察できます。さらに、JavaScriptのメモリモデルのため、シリアライズされたスクリプト実行によってだけでなく、シリアライズされたステートメント実行によっても表現できない状況があります。
このセクションは規範的ではありません。
HTMLには、安全にセマンティクスを追加するために使用できるさまざまな拡張メカニズムがあります：
作成者は、class属性を使用して要素を拡張し、最も適切な既存の「実際の」HTML要素を使用しながら、独自の要素を効果的に作成できます。拡張を知らないブラウザや他のツールでも、ある程度サポートされるようにするためです。例えば、これはマイクロフォーマットで使用されています。
作成者は、data-*=""属性を使用して、インラインのクライアントサイドスクリプトやサーバーサイドのサイト全体のスクリプトが処理するためのデータを含めることができます。これらはブラウザによって変更されることはなく、スクリプトがHTML要素上にデータを含め、その後スクリプトがそれを検索して処理することができます。
作成者は、<meta name="" content="">メカニズムを使用して、ページ全体のメタデータを含めることができます。
作成者は、rel=""メカニズムを使用して、リンクに特定の意味を注釈付けし、リンクタイプの事前定義セットに対する拡張を登録することで拡張することができます。これもマイクロフォーマットで使用されています。
作成者は、カスタムタイプを使用して、<script type="">メカニズムを使用して生データを埋め込み、その後、インラインまたはサーバーサイドのスクリプトで処理します。
作成者は、JavaScriptのプロトタイプ機構を使用してAPIを拡張できます。これは、スクリプトライブラリによって広く使用されています。
作成者は、マイクロデータ機能（itemscope=""およびitemprop=""属性）を使用して、他のアプリケーションやサイトと共有するためのネストされた名前と値のペアのデータを埋め込むことができます。
作成者は、HTMLの語彙を拡張するためにカスタム要素を定義、共有、および使用することができます。有効なカスタム要素名の要件は、将来ハイフンを含むローカル名を持つ要素がHTML、SVG、またはMathMLに追加されないことを保証します。
このセクションは規範的ではありません。
この仕様は、文書やアプリケーションを記述するための抽象言語と、この言語を使用するリソースのメモリ内表現と対話するためのいくつかのAPIを定義しています。
メモリ内表現は「DOM HTML」、または略して「DOM」として知られています。
この抽象言語を使用するリソースを送信するために使用できるさまざまな具体的な構文があり、そのうちの2つはこの仕様で定義されています。
最初の具体的な構文はHTML構文です。これはほとんどの作成者に推奨される形式です。ほとんどのレガシーウェブブラウザと互換性があります。ドキュメントがtext/html MIMEタイプで送信される場合、それはウェブブラウザによってHTMLドキュメントとして処理されます。この仕様は単に「HTML」として知られる最新のHTML構文を定義しています。
2番目の具体的な構文はXMLです。ドキュメントがapplication/xhtml+xmlのようなXML
MIMEタイプで送信される場合、それはウェブブラウザによってXMLドキュメントとして扱われ、XMLプロセッサによって解析されます。作成者は、XMLとHTMLの処理が異なることを念頭に置いてください。特に、些細な構文エラーでも、XMLとしてラベル付けされたドキュメントが完全にレンダリングされるのを防ぐ可能性がありますが、HTML構文では無視されます。
HTMLのXML構文はかつて「XHTML」と呼ばれていましたが、この仕様ではその用語を使用していません（他の理由として、MathMLやSVGのHTML構文にはそのような用語が使用されていないためです）。
DOM、HTML構文、およびXML構文は、すべて同じコンテンツを表現することはできません。例えば、名前空間はHTML構文では表現できませんが、DOMやXML構文ではサポートされています。同様に、noscript機能を使用するドキュメントは、HTML構文で表現できますが、DOMやXML構文では表現できません。文字列「-->」を含むコメントは、HTMLおよびXML構文ではなく、DOMでのみ表現できます。
このセクションは規範的ではありません。
この仕様は以下の主要なセクションに分かれています：
EventSource）や、スクリプト用の双方向フルデュプレックスソケットプロトコルであるWeb
Socketsについても紹介しています。
また、いくつかの付録があり、廃止された機能やIANAの考慮事項をリストアップしており、いくつかの索引も含まれています。
この仕様は他のすべての仕様と同様に読むべきです。まず、最初から最後まで何度も読みます。そして、少なくとも一度は逆順に読みます。次に、内容一覧からランダムにセクションを選び、すべての相互参照をたどりながら読みます。
以下の適合要件セクションに記載されているように、この仕様はさまざまな適合クラスのための適合基準を説明しています。特に、プロデューサー（例：著者や彼らが作成する文書）に適用される適合要件と、コンシューマー（例：ウェブブラウザー）に適用される適合要件があります。これらは、何を要求しているかによって区別できます：プロデューサーに対する要件は許可されるものを述べており、コンシューマーに対する要件はソフトウェアがどのように動作すべきかを述べています。
例えば、「foo属性の値は有効な整数でなければならない」というのはプロデューサーに対する要件です。なぜなら、それが許可される値を規定しているからです。一方で、「foo属性の値は整数を解析するためのルールを使用して解析されなければならない」というのはコンシューマーに対する要件です。なぜなら、それがコンテンツをどのように処理するかを記述しているからです。
プロデューサーに対する要件は、コンシューマーに対してはまったく影響を与えません。
上記の例を続けると、特定の属性の値が有効な整数に制約されるという要件は、コンシューマーに対する要件について何も意味しないことを強調しておきます。実際には、コンシューマーがその属性を不透明な文字列として扱うことが要求されているかもしれません。その場合、値が要件に準拠しているかどうかにはまったく影響されません。あるいは、コンシューマーが無効な（この場合は非数値の）値をどのように処理するかを定義する特定のルールを使用して値を解析することが求められているかもしれません。
これは定義、要件、または説明です。
これは注釈です。
これは例です。
これは未解決の問題です。
これは警告です。
[Exposed =Window ]
interface Example {
// this is an IDL definition
};variable = object.method([optionalArgument])
これはインターフェースの使用法を説明する著者への注釈です。
/* this is a CSS fragment */ 用語の定義インスタンスはこのようにマークアップされます。その用語の使用例はこのようにまたはこのようにマークアップされます。
要素、属性、またはAPIの定義インスタンスはこのようにマークアップされます。それらの要素、属性、またはAPIへの参照はこのようにマークアップされます。
その他のコード片はこのようにマークアップされます。
変数はこのようにマークアップされます。
アルゴリズムでは、同期セクション内のステップは⌛でマークされます。
場合によっては、条件とそれに対応する要件の形式で要件が提示されることがあります。このような場合、条件に適用される要件は、常にその条件に続く最初の要件セットです。これには、これらの要件に対して複数の条件セットがある場合でも該当します。そのようなケースは次のように提示されます：
このセクションは規範的ではありません。
基本的な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ツリーに変換されます：
このツリーのドキュメント要素は、HTMLドキュメントで常にその位置にあるhtml要素です。これには、head要素とbody要素、およびそれらの間にテキストノードが含まれています。
DOMツリーには、予想以上に多くのテキストノードが含まれています。これは、ソースに多数のスペース（ここでは「␣」で表される）と改行（「⏎」）が含まれており、これらがすべてDOMのテキストノードとして表示されるためです。ただし、歴史的な理由から、元のマークアップ内のすべてのスペースと改行がDOMに表示されるわけではありません。特に、head開始タグの前のすべての空白は静かに削除され、body終了タグの後のすべての空白は、bodyの最後に配置されます。
head要素には、title要素が含まれており、これは「Sample
page」というテキストを含むテキストノード自体を含んでいます。同様に、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 ]; // ドキュメント内の最初のリンクを取得
a. href = 'sample.html' ; // リンク先のURLを変更
a. protocol = 'https' ; // URLのスキーム部分だけを変更
a. setAttribute( 'href' , 'https://example.com/' ); // 属性の内容を直接変更 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の使用方法についての詳細は、作成者にチュートリアルやガイドを参照することをお勧めします。この仕様に含まれているいくつかの例も役立つかもしれませんが、初心者の作成者には、この仕様が必要に応じて定義している言語の詳細レベルが最初は理解しにくいかもしれないことを注意しておきます。
このセクションは規範的ではありません。
HTMLを使用してインタラクティブなサイトを作成する場合、攻撃者がサイト自体やサイトのユーザーのセキュリティを侵害する脆弱性を導入しないよう注意が必要です。
この問題に関する包括的な研究はこのドキュメントの範囲外であり、作成者にはこの問題をより詳細に研究することを強くお勧めします。ただし、このセクションでは、HTMLアプリケーション開発における一般的な落とし穴について簡単に紹介します。
ウェブのセキュリティモデルは「オリジン」の概念に基づいており、それに対応してウェブ上の多くの潜在的な攻撃はオリジンをまたがるアクションに関連しています。[ORIGIN]
信頼できない入力、たとえばユーザー生成コンテンツ（テキストコメントなど）、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 > メッセージがエスケープされずにユーザーに表示された場合、悪意のある攻撃者がスクリプト要素を含むURLを作成することができます：
https://example.com/message.cgi?say=%3Cscript%3Ealert%28%27Oh%20no%21%27%29%3C/script%3E
攻撃者がこのページを訪問するよう被害者ユーザーを誘導すると、攻撃者が選んだスクリプトがページ上で実行されます。このようなスクリプトは、そのサイトが提供する機能に応じて、数多くの悪意のある操作を行う可能性があります。たとえば、そのサイトがeコマースショップである場合、そのようなスクリプトはユーザーに気づかれずに不要な購入を任意の回数行わせることができます。
これはクロスサイトスクリプティング攻撃と呼ばれます。
サイトにコードを実行させるためのトリックを試みるために使用できる構文は多数あります。以下に、作成者がホワイトリストフィルタを作成する際に考慮することが推奨されるいくつかの構文を示します：
imgのような無害に見える要素を許可する場合、提供される属性もホワイトリストに登録することが重要です。すべての属性を許可した場合、攻撃者はonload属性を使用して任意のスクリプトを実行することができます。
javascript:」ですが、ユーザーエージェントは他にも（実際に歴史的に）実装することがあります。
base要素の挿入を許可すると、ページ内のscript要素に相対リンクが含まれている場合、それらがハイジャックされる可能性があり、同様にフォーム送信も悪意のあるサイトにリダイレクトされる可能性があります。
サイトがユーザー固有の副作用を伴うフォーム送信を許可する場合（たとえば、ユーザーの名前でフォーラムにメッセージを投稿する、購入を行う、パスポートを申請するなど）、リクエストがユーザーによって意図的に行われたものであり、他のサイトがユーザーをだまして知らないうちにリクエストを行わせたものではないことを確認することが重要です。
この問題は、HTMLフォームが他のオリジンに送信される可能性があるために存在します。
サイトは、フォームにユーザー固有の隠しトークンを挿入するか、すべてのリクエストで`Origin`ヘッダーをチェックすることで、このような攻撃を防ぐことができます。
ユーザーにとって意図しない操作を行わせる可能性のあるインターフェースを提供するページは、ユーザーがインターフェースを誤って有効にしてしまう可能性を回避するように設計する必要があります。
ユーザーがこのようにだまされる方法の一つは、悪意のあるサイトが被害者のサイトを小さなiframeに配置し、ユーザーにリアクションゲームをさせるように説得する場合です。ユーザーがゲームをプレイしている間、悪意のあるサイトはiframeをマウスカーソルの下に素早く配置し、ユーザーがクリックしようとする瞬間に被害者サイトのインターフェースをクリックさせるようにします。
これを回避するために、フレーム内で使用されることを予期していないサイトは、フレーム内にないことを検出した場合にのみインターフェースを有効にすることが推奨されます（たとえば、windowオブジェクトをtop属性の値と比較するなど）。
このセクションは規範的ではありません。
HTMLのスクリプトには「実行完了まで実行する」という意味があります。つまり、ブラウザはスクリプトを中断せずに実行し、その後で他のイベントを発生させたり、ドキュメントの解析を続行したりします。
一方、HTMLファイルの解析はインクリメンタルに行われ、パーサーはスクリプトを実行するためにいつでも停止できます。これは通常、良いことですが、作成者はイベントハンドラーをイベントが発生する可能性がある前にフックしないよう注意する必要があります。
これを確実に行うための2つの技術があります：イベントハンドラーコンテンツ属性を使用するか、要素を作成し、同じスクリプト内でイベントハンドラーを追加する方法です。後者は安全です。前述したように、スクリプトは他のイベントが発生する前に完了するまで実行されるためです。
これが現れる一例は、img要素とloadイベントです。このイベントは、特に画像がすでにキャッシュされている場合（よくあることです）、要素が解析されるとすぐに発生する可能性があります。
ここで、作成者はonloadハンドラーを使用して、img要素に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); // も機能します
</ script > しかし、作成者が最初にimg要素を作成し、その後別のスクリプトでイベントリスナーを追加した場合、loadイベントがその間に発生し、見逃される可能性があります：
<!-- このスタイルは使わないでください、競合状態があります！ -->
< img id = "games" src = "games.png" alt = "Games" >
<!-- パーサーが一時停止している間に'load'イベントが発生する可能性があります。 -->
< script >
var img = document. getElementById( 'games' );
img. onload = gamesLogoHasLoaded; // 発生しないかもしれません！
</ script > このセクションは規範的ではありません。
作成者には、一般的なミスを発見するために適合チェッカー（バリデーターとも呼ばれます）を利用することを推奨します。WHATWGは以下のURLでそのようなツールのリストを提供しています：https://whatwg.org/validator/
このセクションは規範的ではありません。
以前のHTML仕様とは異なり、この仕様では無効なドキュメントと有効なドキュメントの処理がある程度詳しく定義されています。
ただし、無効なコンテンツの処理がほとんどの場合よく定義されているにもかかわらず、ドキュメントの適合要件は依然として重要です。実際には、相互運用性（すべての実装が特定のコンテンツを信頼できる、一貫したまたは同等の方法で処理する状況）がドキュメント適合要件の唯一の目標ではありません。このセクションでは、適合ドキュメントとエラードキュメントを区別する理由のいくつかを詳細に説明します。
このセクションは規範的ではありません。
以前のバージョンの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。
このセクションは規範的ではありません。
HTMLの構文は、さまざまな問題を回避するために制約されています。
特定の無効な構文構造は、解析されると非常に直感に反するDOMツリーを生成することがあります。
ユーザーエージェントが、より奇妙で複雑なエラーハンドリングルールを実装することなく制御された環境で使用できるようにするために、ユーザーエージェントは、解析エラーに遭遇した場合に失敗することが許されています。
特定のエラーハンドリングの挙動（たとえば、前述の<table><hr>...の例の挙動など）は、ストリーミングユーザーエージェント（HTMLファイルを状態を保持せずに一度のパスで処理するユーザーエージェント）と互換性がありません。そのようなユーザーエージェントとの互換性の問題を回避するために、そのような挙動を引き起こす構文は無効と見なされます。
XMLに基づくユーザーエージェントがHTMLパーサーに接続されている場合、HTMLファイルによってXMLが強制する特定の不変条件（たとえば、要素や属性の名前に複数のコロンが含まれることはない）が違反される可能性があります。これに対処するには、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は次のようになります:
歴史的な理由から、比較的脆弱な構文構造があります。このような問題に偶然遭遇するユーザーの数を減らすために、それらは非適合とされています。
たとえば、属性内での特定の名前付き文字参照の解析は、閉じセミコロンが省略されていても行われます。アンパサンドと文字を続けて書くことは安全ですが、その文字が名前付き文字参照を構成する場合、その文字が意図せずにその文字として解釈される可能性があります。
この断片では、属性の値は「?bill&ted」です:
< a href = "?bill&ted" > Bill and Ted</ a >
しかし、次の断片では、属性の値は実際には「?art©」であり、意図していた「?art©」ではありません。これは、閉じセミコロンがなくても「©」が「©」と同じように処理され、「©」と解釈されるためです:
< a href = "?art©" > Art and Copy</ a > この問題を回避するために、すべての名前付き文字参照はセミコロンで終わる必要があり、セミコロンなしで名前付き文字参照を使用することはエラーとしてフラグが立てられます。
したがって、上記のケースを表現する正しい方法は次のとおりです:
< a href = "?bill&ted" > Bill and Ted</ a > <!-- &tedは名前付き文字参照ではないので問題ありません --> < a href = "?art&copy" > Art and Copy</ a > <!-- &がエスケープされている必要があります。なぜなら、©は名前付き文字参照だからです --> 特定の構文構造は、レガシーユーザーエージェントで特に微妙または重大な問題を引き起こすことが知られており、それらは非適合とされ、作成者がそれらを回避できるようにします。
たとえば、U+0060 GRAVE ACCENT文字（`）が引用符なしの属性で許可されていないのは、このためです。特定のレガシーユーザーエージェントでは、それが引用符文字として扱われることがあります。
特定の制約は、既知のセキュリティ問題を回避するためにのみ存在します。
たとえば、UTF-7の使用に関する制約は、UTF-7を使用した既知のクロスサイトスクリプティング攻撃から作成者が被害を受けないようにするためだけに存在します。[UTF7]
作成者の意図が非常に不明確なマークアップは、しばしば非適合とされます。これらのエラーを早期に修正することで、後のメンテナンスが容易になります。
ユーザーが単純な誤植をした場合、そのエラーが早期に検出されると便利です。これは、作成者のデバッグ時間を大幅に節約できます。このため、この仕様では、要素名や属性名などが仕様で定義された名前と一致しない場合、それをエラーと見なすことが多いです。
たとえば、作成者が<capton>と入力してしまった場合、これがエラーとしてフラグが立てられ、作成者はすぐに誤植を修正できます。
言語構文が将来拡張される可能性を考慮して、その他の点では無害な機能が禁止されています。
たとえば、終了タグ内の「属性」は現在無視されていますが、それらは無効です。これは、将来言語がその構文機能を使用する変更を行った場合でも、既に展開されている（かつ有効な！）コンテンツと競合しないようにするためです。
一部の作成者は、すべての属性を常に引用符で囲み、すべてのオプションのタグを常に含める習慣を持っていることが役立つと感じています。そのような作成者を支援するために、適合チェッカーはそのような慣行を強制する操作モードを提供することができます。
このセクションは規範的ではありません。
言語の構文に加えて、この仕様は要素や属性の指定方法に関する制限も課しています。これらの制限は、同様の理由で存在します:
定義された意味を持つ要素の誤用を避けるため、コンテンツモデルが定義されており、そのような入れ子が疑わしい価値を持つ場合には要素の入れ子を制限します。
たとえば、この仕様では、section
要素をkbd
要素内に入れ子にすることを禁止しています。なぜなら、作成者がセクション全体をキー入力することを意図している可能性が非常に低いためです。
同様に、要素の使用において作成者の誤りに注意を促すために、表現されたセマンティクスに明確な矛盾がある場合も適合エラーと見なされます。
たとえば、以下のフラグメントでは、セマンティクスが意味不明です。区切り線がセルであることや、ラジオボタンが進捗バーであることはありえません。
< hr role = "cell" > < input type = radio role = progressbar > もう一つの例として、ul
要素のコンテンツモデルに関する制限があります。これは、li
要素のみを子要素として許可します。リストとは定義上、0個以上のリスト項目から成るものであり、ul
要素がli
要素以外のものを含む場合、それが何を意味しているのかが明確ではありません。
特定の要素には、特定の組み合わせが混乱を招く可能性が高いデフォルトのスタイルや動作があります。これらの問題がない同等の代替手段がある場合、混乱を招く組み合わせは許可されていません。
たとえば、div
要素はブロックボックスとしてレンダリングされ、span
要素はインラインボックスとしてレンダリングされます。ブロックボックスを
インラインボックスに入れ子にするのは不必要に混乱を招きます。div
要素を入れ子にする、またはspan
要素を入れ子にする、あるいはspan
要素をdiv
要素の中に入れ子にすることで同じ目的を達成できますが、後者の方法のみがブロックボックスをインラインボックスに入れることを伴うため、この組み合わせは許可されていません。
別の例としては、インタラクティブコンテンツを入れ子にすることができない方法があります。たとえば、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
要素に実行可能なスクリプトが含まれている場合、それを適合しないとしています。これにより、ドキュメントを検証している作成者がこの種の誤りで時間を浪費する可能性が低くなります。
一部の作成者は、XMLとHTMLの両方として解釈され、同様の結果をもたらすファイルを作成することを好みます。この慣行は、スクリプト、スタイリング、または自動シリアル化のいかなる種類を含む場合、さまざまな微妙な問題が絡み合うため、一般的には推奨されませんが、この仕様には少なくともその困難をある程度緩和するためのいくつかの制限があります。これにより、作成者がHTMLとXMLの構文間を移行する際の一時的なステップとしてこれを使用しやすくなります。
たとえば、lang
属性とxml:lang
属性の値を同期させるための複雑なルールがあります。
もう一つの例として、HTMLシリアライゼーションにおけるxmlns属性の値に対する制限があります。これは、処理がHTMLまたはXMLとして行われた場合でも、適合するドキュメント内の要素が同じ名前空間に収まるようにするためです。
言語構文を将来のリビジョンで拡張できるようにするための制限と同様に、要素のコンテンツモデルや属性の値に対する制限の一部は、HTML語彙の将来の拡張を可能にするためのものです。
たとえば、target
属性の値をU+005F低線（_）文字で始まる特定の事前定義された値のみに制限することで、将来的に事前定義された新しい値を導入しても、作成者が定義した値と競合することがなくなります。
特定の制限は、他の仕様によって課された制限をサポートすることを目的としています。
たとえば、メディアクエリリストを取る属性に対して、有効なメディアクエリリストのみを使用することを要求することで、その仕様の適合ルールに従うことの重要性を強調しています。
このセクションは規範的ではありません。
この仕様書の読者にとって、以下の文書が興味深いかもしれません。
このアーキテクチャ仕様は、仕様書の著者、ソフトウェア開発者、およびコンテンツ開発者に、Unicode標準とISO/IEC 10646によって共同で定義されたユニバーサル文字集合に基づいて、ワールドワイドウェブ上の相互運用可能なテキスト操作のための共通の参照を提供します。取り上げられるトピックには、「文字」「エンコーディング」「文字列」の用語の使用、参照処理モデル、文字エンコーディングの選択と識別、文字エスケープ、および文字列のインデックス作成が含まれます。
Unicodeには非常に多くの文字が含まれており、世界の様々な書記体系を取り入れているため、不適切な使用はプログラムやシステムをセキュリティ攻撃にさらす可能性があります。特に、より多くの製品が国際化されるにつれて、これは重要になっています。この文書では、プログラマー、システムアナリスト、標準開発者、およびユーザーが考慮すべきいくつかのセキュリティ上の考慮事項を説明し、問題のリスクを軽減するための具体的な推奨事項を提供しています。
Web Content Accessibility Guidelines (WCAG)は、ウェブコンテンツをよりアクセスしやすくするための広範な推奨事項を網羅しています。これらのガイドラインに従うことで、視覚障害、聴覚障害、学習障害、認知障害、運動制限、言語障害、光過敏症、およびそれらの組み合わせを含む障害を持つ人々に対して、より多くの人々がコンテンツにアクセスできるようになります。また、これらのガイドラインに従うことで、一般的なユーザーにとってもウェブコンテンツがより使いやすくなることがよくあります。
この仕様書は、障害を持つ人々にとってよりアクセスしやすいウェブコンテンツ作成ツールを設計するためのガイドラインを提供します。これらのガイドラインに準拠した作成ツールは、障害を持つ著者にとってアクセス可能なユーザーインターフェースを提供するだけでなく、すべての著者がアクセス可能なウェブコンテンツを作成、サポート、および促進することを可能にします。
この文書は、障害を持つ人々にとってウェブアクセシビリティの障壁を低くするユーザーエージェントを設計するためのガイドラインを提供します。ユーザーエージェントには、ウェブコンテンツを取得してレンダリングするブラウザやその他の種類のソフトウェアが含まれます。これらのガイドラインに準拠したユーザーエージェントは、自身のユーザーインターフェースと他の技術（特に支援技術）と通信する能力を通じてアクセシビリティを促進します。さらに、障害を持つユーザーだけでなく、すべてのユーザーにとって準拠したユーザーエージェントがより使いやすくなるはずです。
この仕様書はInfraに依存しています。 [INFRA]
この仕様書では、HTMLおよびXML属性とIDL属性の両方を参照し、しばしば同じ文脈でそれらを扱います。どちらが参照されているのかが明確でない場合、それらはHTMLおよびXML属性に対してはコンテンツ属性、IDLインターフェースで定義されているものにはIDL属性と呼ばれます。同様に、"プロパティ"という用語は、JavaScriptオブジェクトのプロパティとCSSプロパティの両方に使用されます。これらが曖昧な場合、それぞれオブジェクトプロパティおよびCSSプロパティとして区別されます。
一般的に、仕様書が機能がHTML構文またはXML構文に適用されると述べる場合、それは他方の言語も含まれます。ある機能が特にどちらか一方にのみ適用される場合は、「HTMLの場合、...（これはXMLには適用されません）」のように明確に述べられます。
この仕様書では、ドキュメントという用語は、短い静的ドキュメントからリッチなマルチメディアを含む長いエッセイやレポート、完全なインタラクティブアプリケーションまで、HTMLのあらゆる使用に言及するために使用されます。この用語は、Documentオブジェクトとその子孫DOMツリー、ならびに文脈に応じてHTML構文またはXML構文を使用するシリアル化されたバイトストリームの両方を指すために使用されます。
DOM構造の文脈では、用語HTMLドキュメントおよびXMLドキュメントは、DOMで定義されているように使用され、Documentオブジェクトが置かれる2つの異なるモードを具体的に指します。[DOM]（そのような使用は常に定義へのリンクが付けられています。）
バイトストリームの文脈では、HTMLドキュメントという用語はtext/htmlとしてラベル付けされたリソースを指し、XMLドキュメントという用語はXML MIMEタイプとしてラベル付けされたリソースを指します。
簡潔さのために、表示、描画、視覚化のような用語が、ドキュメントがユーザーにどのようにレンダリングされるかを指して使用されることがあります。これらの用語は視覚的な媒体を意味するものではなく、他の媒体にも同等の方法で適用されると見なさなければなりません。
ステップを並行して実行するとは、そのステップが他の標準のロジック（例：イベントループなど）と同時に、一つずつ順番に実行されることを意味します。この標準では、この並行処理がどのように実現されるかについて具体的なメカニズムは定義されていません。例えば、タイムシェアリング協調型マルチタスク、ファイバー、スレッド、プロセス、異なるハイパースレッド、コア、CPU、マシンなどが考えられます。それに対して、即時に実行されるべき操作は、現在実行中のタスクを中断し、自分自身を実行し、その後に先に実行されていたタスクを再開しなければなりません。
並行処理を活用した仕様を記述するためのガイダンスについては、他の仕様からイベントループを扱うを参照してください。
同じデータに対して動作する異なる並行処理アルゴリズム間の競合状態を回避するために、並行キューを使用することができます。
並行キューとは、連続して実行されなければならないアルゴリズムステップのキューを表します。
並行キューには、アルゴリズムキュー（キュー）があり、初期状態では空です。
並行して実行されるステップは、さらに他のステップを並行して実行することができます。例：並行キューの中で、一連のステップをキューと並行して実行することが有用です。
標準がnameList（リスト）を定義し、nameListにnameを追加するメソッドが定義されていると仮定します。ただし、nameListが既にnameを含んでいる場合、それは拒否されます。
次の解決策はレースコンディションの問題を抱えています。
global を、これの関連グローバルオブジェクトとします。
以下のステップを並行して実行します：
nameList が name を含む場合、global
で与えられたDOM操作タスクソースで、p を TypeError
で拒否するためのグローバルタスクをキューに入れ、これらのステップを中止します。
潜在的に時間のかかる何らかの作業を行います。
name を nameList に追加します。
global で与えられたDOM操作タスクソースで、p を undefined で解決するためのグローバルタスクをキューに入れます。
p を返します。
上記の2つの呼び出しは同時に実行される可能性があり、ステップ3.1の時点でnameがnameListに存在しないが、ステップ3.3が実行される前にnameが追加される可能性があるため、nameがnameListに2回含まれる結果となります。
並行キューはこの問題を解決します。標準は、nameListQueueを新しい並行キューを開始する結果とし、次のようにします。
global を、これの関連グローバルオブジェクトとします。
nameListQueue に以下のステップをキューに入れます：
nameList が name を含む場合、global
で与えられたDOM操作タスクソースで、p を TypeError
で拒否するためのグローバルタスクをキューに入れ、これらのステップを中止します。
潜在的に時間のかかる何らかの作業を行います。
name を nameList に追加します。
global で与えられたDOM操作タスクソースで、p を undefined で解決するためのグローバルタスクをキューに入れます。
p を返します。
このステップはキューに追加され、レース条件が回避されます。
この仕様書では、外部リソースの意味を解釈できる実装がユーザーエージェントにあるかどうかを指す際に、サポートという用語を使用します。あるフォーマットやタイプがサポートされているとは、そのフォーマットやタイプの外部リソースを、リソースの重要な部分が無視されることなく処理できる実装があることを意味します。特定のリソースがサポートされているかどうかは、リソースのフォーマットで使用されている機能によって異なる場合があります。
例えば、PNG画像がサポートされているフォーマットと見なされるのは、そのピクセルデータがデコードされ、レンダリングできる場合です。たとえその画像にアニメーションデータが含まれていたとしても、実装がそれを知らずに処理できるならば、サポートされていると見なされます。
MPEG-4ビデオファイルがサポートされているフォーマットと見なされないのは、使用されている圧縮フォーマットがサポートされていない場合です。たとえ実装がファイルのメタデータからムービーの寸法を判断できたとしても、サポートされているとは見なされません。
一部の仕様書、特にHTTP仕様書で表現と呼ばれるものは、この仕様書ではリソースと呼ばれます。 [HTTP]
リソースの重要なサブリソースとは、リソースが正しく処理されるために利用可能である必要があるサブリソースを指します。どのリソースが重要と見なされるかは、そのリソースのフォーマットを定義する仕様書によって定義されます。
CSSスタイルシートの場合、ここでは暫定的に、@importルールを介してインポートされた他のスタイルシート、及び他のインポートされたスタイルシートによって間接的にインポートされたスタイルシートが重要なサブリソースであると定義します。
この定義は完全に相互運用可能ではありません。さらに、一部のユーザーエージェントは、背景画像やウェブフォントなどのリソースを重要なサブリソースとして扱っているようです。理想的には、CSS作業部会がこれを定義するべきです。進捗を追跡するために、w3c/csswg-drafts issue #1088を参照してください。
HTMLからXMLへの移行を容易にするために、この仕様に準拠するユーザーエージェントは、HTML内の要素を、少なくともDOMとCSSの目的において、http://www.w3.org/1999/xhtml名前空間に配置します。HTML要素という用語は、XML文書内でも、その名前空間にある任意の要素を指します。
特に明記されていない限り、この仕様で定義または言及されているすべての要素は、HTML名前空間（"http://www.w3.org/1999/xhtml"）にあり、この仕様で定義または言及されているすべての属性には名前空間がありません。
要素型という用語は、特定のローカル名と名前空間を持つ要素の集合を指すために使用されます。例えば、button要素は、button要素型を持つ要素であり、これはそれらが「button」というローカル名と、（上記で定義されたように）HTML名前空間を持つことを意味します。
ある要素や属性が無視される、別の値として扱われる、または何か他のものとして処理されると記載されている場合、これはノードがDOM内に存在する後の処理のみを指します。このような状況でユーザーエージェントがDOMを変更してはなりません。
コンテンツ属性は、その新しい値が以前の値と異なる場合にのみ変更されるとみなされます。すでに持っている値に属性を設定しても、それは変更とはみなされません。
空という用語が属性値、テキストノード、または文字列に対して使用される場合、それはテキストの長さがゼロであることを意味します（すなわち、制御文字やU+0020スペースさえも含まれていない）。
HTML要素は、要素のローカル名に対して定義された、特定のHTML要素挿入手順、HTML要素接続後手順、HTML要素削除手順、およびHTML要素移動手順を持つことができます。
HTML標準のための挿入ステップは、insertedNodeを引数として以下のように定義されます。
もし insertedNode が 名前空間 が HTML 名前空間 である要素であり、この標準が insertedNode の ローカル名 に対するHTML 要素挿入手順を定義している場合、その対応するHTML 要素挿入手順を insertedNode に対して実行します。
insertedNodeがフォーム関連要素であるか、またはフォーム関連要素の祖先である場合、次のステップを実行します。
そのフォーム関連要素のフォームオーナーをリセットします。
もしinsertedNodeがElement
で、開いている要素のスタックに
ない場合、HTMLパーサーの
内部リソースリンクの処理を行います。
insertedNodeのノードドキュメントに基づいています。
HTML標準の接続後ステップは、insertedNode が与えられた場合、次のように定義されます。
もし insertedNode が、その 名前空間 が HTML 名前空間 に属する要素であり、かつこの標準が insertedNode の ローカル名 に対して HTML 要素接続後の手順 を定義している場合、insertedNode に対して対応する HTML 要素接続後の手順 を実行します。
HTML標準のための削除ステップは、removedNodeとoldParentを引数として以下のように定義されます。
documentをremovedNodeのノードドキュメントとして設定します。
もしdocumentのフォーカスされたエリアがremovedNodeである場合、documentのビューポートにdocumentのフォーカスされたエリアを設定し、documentのナビゲーションAPIの進行中のナビゲーション中にフォーカスが変更されたをfalseに設定します。
これによって、フォーカス解除ステップ、フォーカスステップ、またはフォーカス更新ステップは実行されず、そのためblurイベントやchangeイベントは発生しません。
もし removedNode が 名前空間 が HTML 名前空間 である要素であり、この標準が removedNode の ローカル名 に対するHTML 要素削除手順を定義している場合、その対応するHTML 要素削除手順を removedNode および oldParent に対して実行します。
removedNodeが、nullでないフォームオーナーを持つフォーム関連要素であり、removedNodeとそのフォームオーナーがもはや同じツリーにない場合、removedNodeのフォームオーナーをリセットします。
もしremovedNodeのポップオーバー属性がNo Popover
Stateにない場合、removedNodeに対してポップオーバーアルゴリズムを非表示にするを実行し、false、false、false、および null を設定します。
HTML標準の移動ステップは、movedNode が与えられた場合、次のように定義されます。
movedNode が 名前空間として HTML名前空間 を持つ要素であり、かつこの 仕様が movedNode の ローカル名 に対する HTML要素移動手順 を定義している場合、 movedNode を与えて対応する HTML要素移動手順 を実行する。
movedNode が非nullの フォーム所有者を持つ フォーム関連要素であり、かつ movedNode とその フォーム所有者 がもはや同じ ツリー 内に存在しない場合、 movedNode の フォーム所有者をリセットする。
ノードがドキュメントに挿入された場合、それは挿入ステップがそれを引数として実行され、それが今やドキュメントツリー内に存在している場合を指します。同様に、ノードがドキュメントから削除された場合、それは削除ステップがそれを引数として実行され、それが今やドキュメントツリー内にない場合を指します。
ノードが接続されたとき、それは挿入ステップがそれを引数として実行され、それが今や接続された場合を指します。同様に、ノードが接続が解除されたとき、それは削除ステップがそれを引数として実行され、それが今や接続されていない場合を指します。
ノードはブラウジングコンテキストに接続されている場合、それは接続された状態であり、そのシャドウを含むルートのブラウジングコンテキストがnullでない場合を指します。ノードがブラウジングコンテキストに接続されたとき、それは挿入ステップがそれを引数として実行され、それが今やブラウジングコンテキストに接続されている場合を指します。ノードがブラウジングコンテキストから切断された場合、それは削除ステップがそれを引数として実行され、それが今やブラウジングコンテキストに接続されていない場合、またはそのシャドウを含むルートのブラウジングコンテキストがnullになった場合を指します。
Fooという構築は、Fooが実際にはインターフェースである場合、より正確な「インターフェースFooを実装するオブジェクト」という表現の代わりに使われることがあります。
IDL属性は、その値が取得されるとき（例：著者スクリプトによって）に取得中であると言い、新しい値が割り当てられるときに設定中であると言います。
DOMオブジェクトがライブであると言われる場合、そのオブジェクト上の属性やメソッドは、データのスナップショットではなく、実際の基礎データに対して動作しなければなりません。
用語プラグインは、ユーザーエージェントによって使用される
実装依存のコンテンツハンドラーのセットを指し、
Documentオブジェクトのユーザーエージェントのレンダリングに
関与することができますが、子ナビゲーラブルとしては
動作せず、Documentに新しいNodeオブジェクトを
DOMに追加することはありません。
通常、このようなコンテンツハンドラーはサードパーティによって提供されますが、ユーザーエージェントが 組み込みのコンテンツハンドラーをプラグインとして指定することもできます。
ユーザーエージェントは、text/plain
および
application/octet-stream
が登録されたプラグインを持っているとは考えてはなりません。
プラグインの一例としては、ユーザーがPDFファイルに移動するときに、ナビゲーラブルで インスタンス化されるPDFビューアが挙げられます。これは、PDFビューアコンポーネントを実装した 当事者がユーザーエージェント自体を実装した当事者と同じであったかどうかに関係なく、プラグインとして 数えられます。ただし、ユーザーエージェントとは別に起動されるPDFビューアアプリケーション（同じ インターフェースを使用しないもの）は、この定義ではプラグインとは見なされません。
この仕様はプラグインとの相互作用のメカニズムを定義していません。これは、ユーザーエージェントおよびプラットフォーム固有の ものとされているためです。いくつかのユーザーエージェントは、Netscape Plugin APIのようなプラグインメカニズムを サポートすることを選択するかもしれませんし、リモートコンテンツコンバータを使用するか、特定のタイプに対して 組み込みのサポートを持つかもしれません。実際、この仕様はユーザーエージェントにプラグインをサポートするよう 要求していません。[NPAPI]
ブラウザは、プラグイン向けの外部コンテンツと相互作用する際に、 極めて注意するべきです。サードパーティのソフトウェアがユーザーエージェント自体と同じ権限で実行される 場合、そのサードパーティソフトウェアの脆弱性は、ユーザーエージェントの脆弱性と同じくらい危険です。
異なるユーザーが異なるセットのプラグインを持つことは、
ユーザーがユニークに識別される可能性を高めるトラッキングベクターを提供します。そのため、ユーザーエージェントは
各ユーザーに対して正確に同じセットのプラグインをサポートするよう
勧められています。
文字エンコーディング、または それが曖昧でない場合は単にエンコーディングは、バイトストリームとUnicode文字列間の変換方法を定義するものであり、 Encodingで定義されています。エンコーディングにはエンコーディング名と1つ以上のエンコーディングラベルがあり、Encoding標準では エンコーディングの名前とラベルと呼ばれています。[ENCODING]
この仕様書は、ユーザーエージェント（実装者向け）および文書（著者やオーサリングツールの実装者向け）の適合基準について説明しています。
適合文書とは、文書の適合基準をすべて満たす文書のことです。読みやすさのために、これらの適合要件の一部は著者に対する適合要件として表現されていますが、そのような要件は暗黙的に文書に対する要件となります。定義により、すべての文書は著者が存在すると仮定されています（場合によっては、その著者自体がユーザーエージェントであることもあります—その場合、そのユーザーエージェントには追加の規則が適用されます）。
例えば、「著者はfoobar要素を使用してはならない」という要件があれば、それは文書にfoobarという名前の要素を含めてはならないことを意味します。
文書の適合要件と実装の適合要件の間に暗黙の関係はありません。ユーザーエージェントは、非適合文書を自由に扱うことはできません。この仕様書で説明されている処理モデルは、入力文書の適合性に関わらず、実装に適用されます。
ユーザーエージェントは、異なる適合要件を持ついくつかの（重複する）カテゴリに分かれます。
XML構文をサポートするウェブブラウザは、この仕様書で説明されているように、XML文書内にあるHTML名前空間の要素や属性を処理し、ユーザーがそれらと対話できるようにしなければなりません。ただし、他の仕様書によってこれらの要素のセマンティクスが上書きされている場合を除きます。
適合するウェブブラウザは、XML文書内にscript要素を見つけた場合、その要素に含まれるスクリプトを実行します。ただし、その要素がXSLTで表現された変換の中にある場合（ユーザーエージェントがXSLTをサポートしていると仮定して）、プロセッサは代わりにscript要素を変換の一部を構成する不透明な要素として扱います。
HTML構文をサポートするウェブブラウザは、HTML MIMEタイプでラベル付けされた文書を、この仕様書で説明されているように処理し、ユーザーがそれらと対話できるようにしなければなりません。
スクリプトをサポートするユーザーエージェントは、この仕様書に記載されているIDLフラグメントの適合実装でもなければなりません。Web IDL参照。[WEBIDL]
HTML要素のセマンティクスを上書きする仕様書は、通常、その要素を表すDOMオブジェクトに対する要件を上書きしません。例えば、上記の例では、script要素は依然としてHTMLScriptElementインターフェースを実装することになります。
HTMLおよびXML文書を処理して非インタラクティブなバージョンをレンダリングするだけのユーザーエージェントは、ユーザーインタラクションに関する要件を除いて、ウェブブラウザと同じ適合基準を満たさなければなりません。
非インタラクティブなプレゼンテーションユーザーエージェントの典型的な例としては、プリンタ（静的UA）やオーバーヘッドディスプレイ（動的UA）があります。ほとんどの静的非インタラクティブプレゼンテーションユーザーエージェントは、スクリプトのサポートがないことを選択することが期待されます。
非インタラクティブだが動的なプレゼンテーションUAは、スクリプトを実行し、フォームを動的に送信するなどの処理を行います。しかし、ユーザーが文書と対話できない場合、フォーカスの概念は無意味なので、UAはフォーカス関連のDOM APIをサポートする必要はありません。
インタラクティブかどうかにかかわらず、ユーザーエージェントは、この仕様書で定義されている推奨されるデフォルトレンダリングをサポートするものと指定される場合があります（おそらくユーザーオプションとして）。
これは必須ではありません。特に、推奨されるデフォルトレンダリングを実装するユーザーエージェントであっても、ユーザーの体験を向上させるために、このデフォルトをオーバーライドする設定を提供することが推奨されます。例えば、色のコントラストを変更したり、異なるフォーカススタイルを使用したり、ユーザーにとってよりアクセシブルで使いやすい体験を提供するなどです。
推奨されるデフォルトレンダリングをサポートするものとして指定されたユーザーエージェントは、そのように指定されている間、ユーザーエージェントが実装することが期待されると定義されているルールを実装しなければなりません。
スクリプトをサポートしていない、またはスクリプト機能を完全に無効にしている実装は、この仕様書に記載されているイベントおよびDOMインターフェースをサポートする義務はありません。イベントモデルやDOMに基づいて定義されている部分については、そのようなユーザーエージェントは、イベントやDOMがサポートされているかのように動作しなければなりません。
スクリプトはアプリケーションの不可欠な部分を構成することがあります。スクリプトをサポートしていない、またはスクリプトを無効にしているウェブブラウザは、著者の意図を完全に伝えることができないかもしれません。
適合チェッカーは、この仕様書で説明されている適用される適合基準に従って、文書が適合していることを確認しなければなりません。自動適合チェッカーは、著者の意図を解釈する必要があるエラー（例えば、blockquote要素の内容が引用でない場合、文書は適合しないが、人間の判断なしでは適合チェッカーはそれを確認する必要はない）を検出することから免除されます。
適合チェッカーは、ブラウジングコンテキストなしで解析された場合（つまり、スクリプトが実行されず、パーサーのスクリプトフラグが無効になっている）の入力文書が適合していることを確認しなければならず、ブラウジングコンテキストで解析された場合にも文書が適合していることを確認するべきです。そして、スクリプトが一時的にスクリプトの実行中にのみ発生する非適合状態を引き起こさないことを確認するべきです。（これは「SHOULD」であり、「MUST」ではありません。なぜなら、これは不可能であることが証明されているためです。[COMPUTABLE]）
"HTMLバリデーター"という用語は、この仕様書の適用される要件に適合する適合チェッカーを指すために使用することができます。
XML DTDは、この仕様書のすべての適合要件を表現することはできません。したがって、バリデーティングXMLプロセッサーとDTDは適合チェッカーを構成することはできません。また、この仕様書で定義されている2つのオーサリングフォーマットのいずれもSGMLのアプリケーションではないため、バリデーティングSGMLシステムも適合チェッカーを構成することはできません。
言い換えれば、適合基準には3つのタイプがあります：
適合チェッカーは、最初の2つをチェックしなければなりません。単純なDTDベースのバリデーターは、最初のクラスのエラーのみをチェックするため、この仕様書に従った適合チェッカーとは見なされません。
HTMLおよびXML文書をレンダリングや適合チェック以外の目的で処理するアプリケーションやツールは、処理する文書のセマンティクスに従って行動するべきです。
例えば、文書のアウトラインを生成するツールが、各段落のネストレベルを増やし、見出しにはネストレベルを増やさない場合、そのツールは適合していないことになります。
オーサリングツールとマークアップ生成ツールは、適合文書を生成しなければなりません。著者に適用される適合基準は、適切な場合、オーサリングツールにも適用されます。
オーサリングツールは、要素を指定された目的のみに使用するという厳しい要件からは免除されますが、これはあくまでオーサリングツールが著者の意図を判断できない場合に限ります。しかし、オーサリングツールは、要素を自動的に誤用したり、ユーザーに誤用を奨励したりしてはなりません。
例えば、任意の連絡先情報にaddress要素を使用することは適合していません。この要素は、最も近いarticle要素やbody要素の先祖に対する連絡先情報のマークアップにのみ使用できます。しかし、オーサリングツールがこの違いを判断することはおそらくできないため、オーサリングツールはその要件から免除されます。ただし、これは、オーサリングツールが任意のイタリック体のテキストブロックにaddress要素を使用できることを意味するわけではなく、ユーザーが連絡先情報の挿入ツールを使用している場合に、そのユーザーが実際に連絡先情報を挿入しているかどうかを確認する必要がないだけです。
適合チェックに関して言えば、エディターは、適合チェッカーが検証する範囲で文書が適合していることを確認しなければなりません。
オーサリングツールが非適合文書を編集する場合、編集セッション中に編集されなかった文書のセクションにおいては、適合エラーを保持することができます（つまり、編集ツールは誤った内容をラウンドトリップさせることが許可されています）。ただし、エラーが保持された場合、オーサリングツールは出力が適合していると主張してはなりません。
オーサリングツールは、大まかに言って、構造やセマンティックデータから作業するツールと、見たままのメディア固有の編集に基づいて作業するツール（WYSIWYG）の2種類に分かれることが期待されます。
前者は、HTMLをオーサリングするツールにとって好ましいメカニズムです。なぜなら、ソース情報の構造を使用して、どのHTML要素や属性が最も適切であるかを判断できるからです。
ただし、WYSIWYGツールも正当なものです。WYSIWYGツールは、自分が適切であると知っている要素を使用し、適切であると知らない要素を使用してはなりません。これにより、極端な場合には、div、b、i、spanなど、わずかな要素に限り、フローレイアウト要素の使用が制限され、style属性が多用される可能性があります。
すべてのオーサリングツール、WYSIWYGかどうかにかかわらず、ユーザーがよく構造化され、セマンティックに豊かで、メディアに依存しないコンテンツを作成できるように最善を尽くすべきです。
既存のコンテンツや以前の仕様書との互換性のため、この仕様書では2つのオーサリングフォーマットについて説明しています：1つはXMLに基づいており、もう1つはSGMLに触発されたカスタムフォーマット（HTML構文と呼ばれます）です。実装はこれら2つの形式の少なくとも1つをサポートしなければなりませんが、両方をサポートすることが奨励されています。
いくつかの適合要件は、要素、属性、メソッド、またはオブジェクトに対する要件として表現されています。このような要件は、コンテンツモデルの制約を説明するものと、実装の動作を説明するものに分類されます。前者は文書やオーサリングツールに対する要件であり、後者はユーザーエージェントに対する要件です。同様に、いくつかの適合要件は、著者に対する要件として表現されています。そのような要件は、著者が生成する文書に対する適合要件として解釈されるべきです（つまり、この仕様書は、著者に対する適合基準と文書に対する適合基準を区別していません）。
この仕様は、いくつかの他の基本的な仕様に依存しています。
以下の用語はInfraで定義されています： [INFRA]
追跡ベクトル
Unicode文字セットはテキストデータを表すために使用され、エンコーディング は文字エンコーディングに関する要件を定義します。 [UNICODE]
この仕様は用語を導入しています それらの仕様で定義された用語に基づいていますが、前述のように説明されています。
以下の用語はエンコーディングで定義されているように使用されます：[ENCODING]
HTMLのXML構文をサポートする実装は、いくつかのバージョンのXMLとその対応する名前空間仕様をサポートする必要があります。なぜなら、その構文は名前空間を持つXMLシリアル化を使用しているからです。[XML] [XMLNS]
データマイニングツールやスクリプトを実行せずにコンテンツを操作する他のユーザーエージェント、CSSやXPath式を評価する、またはそれ以外の方法で結果のDOMを任意のコンテンツに公開する場合、「名前空間をサポート」するには、単にそのDOMノードアナログが特定の名前空間に属していると主張するだけでよく、実際に名前空間文字列を公開する必要はありません。
HTML構文では、名前空間接頭辞や名前空間宣言はXMLでの同様の効果を持たないことに注意してください。たとえば、HTML要素名ではコロンに特別な意味はありません。
名前spaceを持つ属性は、XML名前空間で定義されています。
拡張可能なマークアップ言語（XML）で定義されています。[XML]
Name
の生成規則はXMLで定義されています。
[XML]
この仕様はまた、<?xml-stylesheet?>
処理命令に言及しています。これはXML文書にスタイルシートを関連付けるで定義されています。
[XMLSSPI]
この仕様では、XSLTProcessor
インターフェースとそのtransformToFragment()およびtransformToDocument()メソッドにも非公式に言及しています。
[XSLTP]
以下の用語はURLで定義されています： [URL]
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]
メディアフラグメント構文はメディアフラグメントURIで定義されています。[MEDIAFRAG]
以下の用語は URL Pattern で定義されています: [URLPATTERN]
以下の用語はHTTP仕様で定義されています： [HTTP]
Accept`
ヘッダー
Accept-Language`
ヘッダー
Cache-Control`
ヘッダー
Content-Disposition`
ヘッダー
Content-Language`
ヘッダー
Content-Range`
ヘッダー
Last-Modified`
ヘッダー
Range`
ヘッダー
Referer`
ヘッダー
次の用語はHTTPステートマネジメントメカニズムで定義されています： [COOKIES]
次の用語はWebリンクで定義されています： [WEBLINK]
Link`ヘッダー
次の用語はHTTPの構造化フィールド値で定義されています： [STRUCTURED-FIELDS]
次の用語はMIMEスニッフィングで定義されています： [MIMESNIFF]
次の用語はFetchで定義されています： [FETCH]
about:blank
Sec-Purpose`
User-Agent` 値
Origin`ヘッダー
Cross-Origin-Resource-Policy`
ヘッダー
RequestCredentials
列挙
RequestDestination
列挙
fetch()
メソッド
次の用語はリファラーポリシーで定義されています： [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レスポンスヘッダーフィールド で定義されています: [NOVARYSEARCH]
以下の用語はペイントタイミングで定義されています：[PAINTTIMING]
以下の用語はナビゲーションタイミングで定義されています：[NAVIGATIONTIMING]
NavigationTimingTypeとその
"navigate",
"reload",
および
"back_forward"
の値。
以下の用語はリソースタイミングで定義されています：[RESOURCETIMING]
以下の用語はパフォーマンスタイムラインで定義されています：[PERFORMANCETIMELINE]
PerformanceEntryとその
name,
entryType,
startTime,
および
duration
属性。
以下の用語はロングアニメーションフレームで定義されています：[LONGANIMATIONFRAMES]
以下の用語はロングタスクで定義されています：[LONGTASKS]
この仕様書に記載されているIDLフラグメントは、Web IDLで記述された準拠IDLフラグメントとして解釈されなければなりません。[WEBIDL]
以下の用語はWeb IDLで定義されています：
[Global]
[LegacyFactoryFunction]
[LegacyLenientThis]
[LegacyNullToEmptyString]
[LegacyOverrideBuiltIns]
LegacyPlatformObjectGetOwnProperty
[LegacyTreatNonObjectAsNull]
[LegacyUnenumerableNamedProperties]
[LegacyUnforgeable]
Web IDLは、また本仕様書で使用される以下の型も定義しています:
ArrayBuffer
ArrayBufferView
boolean
DOMString
double
Float16Array
Function
long
object
Promise
Uint8ClampedArray
unrestricted double
unsigned long
USVString
VoidFunction
QuotaExceededErrorこの仕様書でスローという用語はWeb
IDLで定義されている意味で使用されます。DOMExceptionタイプと、次の例外名はWeb
IDLで定義され、この仕様書で使用されています：
IndexSizeError"
HierarchyRequestError"
InvalidCharacterError"
NoModificationAllowedError"
NotFoundError"
NotSupportedError"
InvalidStateError"
SyntaxError"
InvalidAccessError"
SecurityError"
NetworkError"
AbortError"
DataCloneError"
EncodingError"
NotAllowedError"
この仕様書がユーザーエージェントに、特定の時間を表すDateオブジェクトを作成する（それは特別な値Not-a-Numberである可能性がある）ことを要求する場合、その時間のミリ秒コンポーネントがあれば、それは整数に切り捨てられ、生成された新しいDateオブジェクトの時間値は、切り捨てられた時間を表さなければなりません。
例えば、2000年1月1日00:00:00.023045Zの23045ミリオンズ秒後の時間を考えた場合、作成されたDateオブジェクトは、同じ時間を表すもので、その時間は2000年1月1日00:00:00.023Z、すなわち45ミリオンズ秒前の時間と同じです。指定された時間がNaNである場合、結果は特定の瞬間を表さないDateオブジェクトになります。
この仕様書で記述されている言語の一部は、基盤となるスクリプト言語としてJavaScriptのみをサポートします。[JAVASCRIPT]
「JavaScript」という用語は、ECMA-262ではなく、JavaScriptという用語が広く知られているため、使用されています。
以下の用語はJavaScript仕様書で定義され、この仕様書で使用されています：
Atomicsオブジェクト
Atomics.waitAsyncオブジェクト
Dateクラス
FinalizationRegistryクラス
RegExpクラス
SharedArrayBufferクラス
SyntaxErrorクラス
TypeErrorクラス
RangeErrorクラス
WeakRefクラス
eval()関数
WeakRef.prototype.deref()関数
import()
import.meta
typeof演算子
delete演算子
JavaScript をサポートするユーザーエージェントは、Dynamic Code Brand Checks 提案も実装しなければなりません。以下の用語はこの提案で定義され、本仕様で使用されています： [JSDYNAMICCODEBRANDCHECKS]
JavaScript をサポートするユーザーエージェントは、ECMAScript Internationalization API も実装しなければなりません。[JSINTL]
JavaScript をサポートするユーザーエージェントは、Temporal 提案も実装しなければなりません。以下の用語はこの提案で定義され、本仕様で使用されています： [JSTEMPORAL]
以下の用語は WebAssembly JavaScript Interface で定義されています： [WASMJS]
文書オブジェクトモデル（DOM）は、文書とその内容の表現、つまりモデルです。DOM は API だけではなく、HTML 実装の準拠基準がこの仕様で定義されており、DOM 上の操作に基づいています。[DOM]
実装は DOM と UI Events で定義されたイベントをサポートする必要があります。なぜなら、この仕様は DOM に基づいて定義されており、一部の機能は DOM インターフェースの拡張として定義されているからです。[DOM] [UIEVENTS]
特に、以下の機能が DOM に定義されています：[DOM]
Attr
インターフェース
CharacterData
インターフェース
Comment
インターフェース
DOMImplementation
インターフェース
Document
インターフェースとその
doctype 属性
DocumentOrShadowRoot
インターフェース
DocumentFragment
インターフェース
DocumentType
インターフェース
ChildNode
インターフェース
Element
インターフェース
attachShadow()
メソッド
Node
インターフェース
NodeList
インターフェース
ProcessingInstruction
インターフェース
ShadowRoot
インターフェース
Text
インターフェース
Range
インターフェース
HTMLCollection
インターフェース、およびその
length
属性、およびその
item()
および
namedItem()
メソッド
DOMTokenList
インターフェース、その
value
属性と
supports
操作
createDocument()
メソッド
createHTMLDocument()
メソッド
createElement()
メソッド
createElementNS()
メソッド
getElementById()
メソッド
getElementsByClassName()
メソッド
append() メソッド
appendChild()
メソッド
cloneNode()
メソッド
moveBefore()
メソッド
importNode()
メソッド
preventDefault()
メソッド
id 属性
setAttribute()
メソッド
textContent
属性
slotchange
イベント
CharacterData
node and its
replace
data アルゴリズム
Event
インターフェース
Event
および派生インターフェースのコンストラクターの動作
EventTarget
インターフェース
EventInit
辞書型
type 属性
currentTarget
属性
bubbles 属性
cancelable
属性
composed 属性
isTrusted
属性
initEvent()
メソッド
addEventListener()
メソッド
EventListener
コールバックインターフェース
Document のエンコーディング（ここでは文字エンコーディング）、
モード、
カスタム要素レジストリ、
宣言的シャドウルートの許可、および
コンテンツタイプ
is 値
MutationObserver
インターフェース、および mutation
observers 全般
AbortController
とその
signal
AbortSignal
以下の機能は UI Events で定義されています：[UIEVENTS]
MouseEvent
インターフェース
MouseEvent
インターフェースの relatedTarget
属性
MouseEvent
インターフェースの button
属性
MouseEventInit
辞書型
FocusEvent
インターフェース
FocusEvent
インターフェースの relatedTarget
属性
UIEvent
インターフェース
UIEvent
インターフェースの view 属性
auxclick
イベント
beforeinput
イベント
click
イベント
contextmenu
イベント
dblclick
イベント
input
イベント
mousedown
イベント
mouseenter
イベント
mouseleave
イベント
mousemove
イベント
mouseout
イベント
mouseover
イベント
mouseup
イベント
wheel
イベント
keydown
イベント
keypress
イベント
keyup
イベント
以下の機能は Touch Events で定義されています：[TOUCH]
Touch
インターフェース
touchend
イベント
以下の機能は Pointer Events で定義されています：[POINTEREVENTS]
PointerEvent
インターフェース
PointerEvent
インターフェースの pointerType
属性
pointerdown
イベント
pointerup
イベント
pointercancel
イベント
以下のイベントは Clipboard API and events で定義されています：[CLIPBOARD-APIS]
この仕様では、イベントのtypeを指すために name
という用語を使用することがあります。たとえば、「click という名前のイベント」や「イベント名が keypress
の場合」のように、イベントの「name」と「type」は同義です。
以下の機能は DOM Parsing and Serialization で定義されています：[DOMPARSING]
以下の機能は Selection API で定義されています：[SELECTION]
ユーザーエージェントは、execCommand で説明されている機能を実装することが推奨されます。[EXECCOMMAND]
以下の機能は Fullscreen API で定義されています：[FULLSCREEN]
requestFullscreen()
fullscreenchange
High Resolution Time は、以下の機能を提供します：[HRT]
この仕様は、ファイルAPIで定義されている以下の機能を使用しています： [FILEAPI]
Blob
インターフェースとその
type 属性
File
インターフェースとその
name および
lastModified
属性
FileList
インターフェース
Blob
の
スナップショット状態の概念
以下の用語はIndexed Database APIで定義されています： [INDEXEDDB]
以下の用語はメディアソース拡張で定義されています： [MEDIASOURCE]
MediaSource
インターフェース
以下の用語はメディアキャプチャとストリームで定義されています： [MEDIASTREAM]
MediaStream
インターフェース
MediaStreamTrack
getUserMedia()
以下の用語はレポーティングで定義されています： [REPORTING]
以下の機能と用語はXMLHttpRequestで定義されています： [XHR]
XMLHttpRequest
インターフェースとその
responseXML
属性
ProgressEvent
インターフェースとその
lengthComputable、
loaded、
total
属性
FormData
インターフェースとその関連する
エントリリスト
以下の機能はバッテリーステータスAPIで定義されています： [BATTERY]
getBattery()
メソッド
実装にはメディアクエリをサポートする必要があります。<media-condition> 機能はそこに定義されています。[MQ]
この仕様の実装にはCSS全体のサポートは必要ありません（ただし、特にウェブブラウザ向けには推奨されます）が、一部の機能は特定のCSS要件に基づいて定義されています。
この仕様が何かを特定のCSS文法に従って解析 する必要があると要求する場合、CSS構文の関連アルゴリズムに従う必要があります。 エラーハンドリングルールを含みます。[CSSSYNTAX]
たとえば、スタイルシートの終わりが予期せず見つかった場合、すべての開いた構造体を閉じるように、ユーザーエージェントは要求されます。このため、
色の値として "rgb(0,0,0"（閉じかっこが不足している）の文字列を解析するとき、このエラーハンドリングルールにより閉じかっこが暗黙的に追加され、色 '黒'
が得られます。ただし、類似の構造体 "rgb(0,0,"（閉じかっこと「青」値が不足している）の場合、開いている構造体を閉じても有効な値が得られないため、解析できません。
以下の用語と機能はカスケーディングスタイルシート （CSS）で定義されています：[CSS]
'display'プロパティの基本バージョンはCSSで定義されており、そのプロパティは他のCSSモジュールによって拡張されています。 [CSS] [CSSRUBY] [CSSTABLE]
以下の用語と機能はCSSボックスモデルで定義されています： [CSSBOX]
以下の機能はCSS Logical Propertiesで定義されています： [CSSLOGICAL]
以下の用語と機能はCSS Colorで定義されています： [CSSCOLOR]
以下の用語はCSS Imagesで定義されています： [CSSIMAGES]
ペイントソース という用語はCSS Images Level 4で定義されており、特定のHTML要素とCSSの'element()'関数の 相互作用を定義するために使用されます。 [CSSIMAGES4]
以下の機能はCSS Backgrounds and Bordersで定義されています： [CSSBG]
CSS Backgrounds and Bordersは、次のボーダープロパティも定義しています： [CSSBG]
以下の機能はCSS Box Alignmentで定義されています： [CSSALIGN]
以下の用語と機能はCSS Displayで定義されています： [CSSDISPLAY]
CSS Flexible Box Layoutで次の機能が定義されています： [CSSFLEXBOX]
CSS Fontsで次の用語と機能が定義されています： [CSSFONTS]
以下の機能はCSS Formsで定義されています： [CSSFORMS]
CSS Grid Layoutで次の機能が定義されています： [CSSGRID]
CSS Inline Layoutで次の用語が定義されています： [CSSINLINE]
CSS Box Sizingで次の用語と機能が定義されています： [CSSSIZING]
CSS Lists and Countersで次の機能が定義されています。 [CSSLISTS]
CSS Overflowで次の機能が定義されています。 [CSSOVERFLOW]
CSS Positioned Layoutで次の用語と機能が定義されています： [CSSPOSITION]
CSS Multi-column Layoutで次の機能が定義されています。 [CSSMULTICOL]
'ruby-base' 値はCSS Ruby Layoutで定義されています。 [CSSRUBY]
CSS Tableで次の機能が定義されています： [CSSTABLE]
CSS Textで次の機能が定義されています： [CSSTEXT]
CSS Writing Modesで次の機能が定義されています： [CSSWM]
CSS Basic User Interfaceで次の機能が定義されています： [CSSUI]
アニメーションを更新してイベントを送信するアルゴリズムupdate animations and send eventsはWeb Animationsに定義されています。 [WEBANIMATIONS]
スクリプトをサポートする実装は、CSSオブジェクトモデルをサポートする必要があります。以下の機能と用語はCSSOM仕様で定義されています：[CSSOM] [CSSOMVIEW]
Screen
インターフェース
LinkStyle
インターフェース
CSSStyleDeclaration
インターフェース
style
IDL属性
cssText
属性CSSStyleDeclaration
StyleSheet
インターフェース
CSSStyleSheet
インターフェース
CSSStyleSheetを作成する
CSSStyleSheetのルールを同期的に置き換える
resize
イベント
scroll
イベント
scrollend
イベント
以下の機能と用語はCSS Syntaxで定義されています： [CSSSYNTAX]
以下の用語はSelectorsで定義されています：[SELECTORS]
<selector-list>
:focus-visible
疑似クラス
以下の機能はCSS Values and Unitsで定義されています： [CSSVALUES]
以下の機能はCSS View Transitionsで定義されています： [CSSVIEWTRANSITIONS]
ViewTransition
スタイル属性という用語は、CSS Style Attributesで定義されています。[CSSATTR]
以下の用語はCSS Cascading and Inheritanceで定義されています： [CSSCASCADE]
CanvasRenderingContext2D
オブジェクトのフォント使用は、CSSFontsおよびFont Loading仕様に記載された機能に依存し、特にFontFaceオブジェクトとフォントソースの概念に依存します。
[CSSFONTS] [CSSFONTLOAD]
以下のインターフェースと用語はGeometry Interfacesで定義されています： [GEOMETRY]
DOMMatrix
インターフェース、および関連する
m11
要素,
m12
要素,
m21
要素,
m22
要素,
m41
要素, および
m42
要素
DOMMatrix2DInit
および
DOMMatrixInit
辞書
DOMMatrixを作成する
および2D辞書からDOMMatrixを作成する
アルゴリズムはDOMMatrix2DInit
またはDOMMatrixInitを使用します。
DOMPointInit
辞書、および関連する
x
および
y
メンバー
以下の用語はCSS Scopingで定義されています：[CSSSCOPING]
以下の用語と機能はCSS Color Adjustmentで定義されています： [CSSCOLORADJUST]
以下の用語はCSS Pseudo-Elementsで定義されています：[CSSPSEUDO]
以下の用語はCSS Containmentで定義されています：[CSSCONTAIN]
以下の用語はCSS Anchor Positioningで定義されています： [CSSANCHOR]
以下の用語はIntersection Observerで定義されています： [INTERSECTIONOBSERVER]
以下の用語はResize Observerで定義されています： [RESIZEOBSERVER]
以下のインターフェースはWebGL仕様で定義されています：[WEBGL]
WebGLRenderingContext
インターフェース
WebGL2RenderingContext
インターフェース
WebGLContextAttributes
辞書
以下のインターフェースはWebGPUで定義されています：[WEBGPU]
GPUCanvasContext
インターフェース
実装は、字幕、キャプション、メタデータなどのテキストトラックフォーマットとしてWebVTTをサポートする場合があります。[WEBVTT]
この仕様で使用されている以下の用語はWebVTTで定義されています：
VTTCue
インターフェース
role属性は
Accessible Rich Internet Applications (ARIA)で定義されており、以下のロールも同様です：[ARIA]
さらに、以下のaria-*コンテンツ属性はARIAで定義されています：[ARIA]
最後に、以下の用語はARIAで定義されています： [ARIA]
ARIAMixin
インターフェース、それに関連する
ARIAMixinゲッターステップおよび
ARIAMixinセッターステップフック、およびその
roleおよび
aria*
属性
以下の用語はコンテンツセキュリティポリシーで定義されています: [CSP]
report-uriディレクティブ
frame-ancestorsディレクティブ
sandboxディレクティブ
SecurityPolicyViolationEvent
インターフェイス
securitypolicyviolation
イベント
以下の用語はサービスワーカーで定義されています: [SW]
ServiceWorker
インターフェイス
ServiceWorkerContainer
インターフェイス
ServiceWorkerGlobalScope
インターフェイス
登録解除
以下のアルゴリズムはセキュアコンテキストで定義されています: [SECURE-CONTEXTS]
以下の用語はパーミッションポリシーで定義されています: [PERMISSIONSPOLICY]
以下の機能はペイメントリクエストAPIで定義されています: [PAYMENTREQUEST]
PaymentRequest
インターフェイス
MathML全体のサポートはこの仕様では必須ではありません（ただし、少なくともウェブブラウザには推奨されています）が、特定の機能はMathMLの一部を実装していることに依存しています。 [MATHML]
以下の機能は数式マークアップ言語 (MathML)で定義されています:
SVG全体のサポートはこの仕様では必須ではありません（ただし、少なくともウェブブラウザには推奨されています）が、特定の機能はSVGの一部を実装していることに依存しています。
SVGを実装するユーザーエージェントは、SVG 2仕様を実装し、それ以前のリビジョンを実装してはなりません。
以下の機能はSVG 2仕様で定義されています: [SVG]
SVGElement
インターフェイス
SVGImageElement
インターフェイス
SVGScriptElement
インターフェイス
SVGSVGElement
インターフェイス
a要素
desc要素
foreignObject要素
image要素
script要素
svg要素
title要素
use要素
text-renderingプロパティ
以下の機能はフィルター効果で定義されています: [FILTERS]
以下の機能はコンポジットとブレンディングで定義されています: [COMPOSITE]
以下の機能はバックグラウンドタスクの協調スケジューリングで定義されています: [REQUESTIDLECALLBACK]
以下の用語は画面の向きで定義されています: [SCREENORIENTATION]
以下の用語はストレージで定義されています: [STORAGE]
以下の機能はウェブアプリマニフェストで定義されています: [MANIFEST]
次の用語は WebAssembly JavaScript インターフェイス: ESM 統合 で定義されています: [WASMESM]
以下の機能はWebCodecsで定義されています: [WEBCODECS]
VideoFrame
インターフェイス。
以下の用語はWebDriverで定義されています: [WEBDRIVER]
以下の用語はWebDriver BiDiで定義されています: [WEBDRIVERBIDI]
以下の用語はWeb Cryptography APIで定義されています: [WEBCRYPTO]
以下の用語はWebSocketsで定義されています: [WEBSOCKETS]
以下の用語はWebTransportで定義されています: [WEBTRANSPORT]
以下の用語は公開鍵証明書にアクセスするためのAPIであるウェブ認証で定義されています: [WEBAUTHN]
以下の用語は資格管理で定義されています: [CREDMAN]
以下の用語はコンソールで定義されています: [CONSOLE]
以下の用語はウェブロックAPIで定義されています: [WEBLOCKS]
この仕様では、Trusted Typesで定義された以下の機能を使用します: [TRUSTED-TYPES]
以下の用語はWebRTC APIで定義されています： [WEBRTC]
以下の用語はピクチャーインピクチャー APIで定義されています： [PICTUREINPICTURE]
以下の用語はアイドル検出 APIで定義されています：
以下の用語はWeb Speech APIで定義されています：
以下の用語はWebOTP APIで定義されています：
以下の用語はWeb Share APIで定義されています：
以下の用語はWeb Smart Card APIで定義されています：
以下の用語はWebバックグラウンド同期で定義されています：
以下の用語はWeb定期バックグラウンド同期で定義されています：
以下の用語はバックグラウンドフェッチで定義されています：
以下の用語はキーボードロックで定義されています：
以下の用語はWeb MIDI APIで定義されています：
以下の用語は汎用センサーAPIで定義されています：
以下の用語はWebHID APIで定義されています：
以下の用語はWebXR Device APIで定義されています：
この仕様は、特定のネットワークプロトコル、スタイルシート言語、スクリプト言語、または上記リストで要求されている以外のDOM仕様のサポートを必須とはしません。しかし、この仕様で記述されている言語は、スタイリング言語としてCSS、スクリプト言語としてJavaScript、ネットワークプロトコルとしてHTTPに偏っており、いくつかの機能はこれらの言語やプロトコルが使用されていることを前提としています。
HTTPプロトコルを実装するユーザーエージェントは、HTTPステートマネジメントメカニズム（クッキー）も実装しなければなりません。[HTTP] [COOKIES]
この仕様は、各セクションにおいて文字エンコーディング、画像フォーマット、オーディオフォーマット、およびビデオフォーマットに関する追加の要件を持つ可能性があります。
ベンダー固有のプロプライエタリなユーザーエージェント拡張は、この仕様に対して強く推奨されません。文書はそのような拡張を使用してはならず、そのような行為は相互運用性を低下させ、ユーザーベースを断片化し、特定のユーザーエージェントのユーザーだけが問題のコンテンツにアクセスできるようにしてしまいます。
すべての拡張は、この仕様で定義された機能に矛盾を生じさせたり、不適合を引き起こしたりしないように定義されなければなりません。
例えば、強く推奨されていないものの、実装がコントロールに新しいIDL属性「typeTime」を追加し、ユーザーが現在の値を選択するのにかかった時間を返す（仮に）ことが考えられます。一方で、フォームのelements配列に新しいコントロールを定義することは、上記の要件に違反します。これは、この仕様で定義されたelementsの定義に違反するからです。
この仕様に対してベンダー中立の拡張が必要な場合は、この仕様を適切に更新するか、またはこの仕様の要件を上書きする拡張仕様を作成することができます。この仕様を適用する人が、その拡張仕様の要件を認識することを決定した場合、その拡張仕様は、この仕様における適合要件の目的で適用可能な仕様となります。
誰かが任意のバイトストリームを適合すると定義する仕様を作成し、その無作為なデータが適合していると主張することは可能です。しかし、それは他の人にとってもその無作為なデータが適合していることを意味するわけではありません。もし誰かがその仕様が自分の作業には適用されないと決定した場合、彼らはその無作為なデータが単なるゴミであり、まったく適合していないと正当に言うことができます。適合に関して重要なのは、その特定のコミュニティが同意するものが適用可能であるということです。
ユーザーエージェントは、理解できない要素や属性を意味的に中立として扱わなければなりません。これらをDOMに残し（DOMプロセッサ向け）、CSSに従ってスタイリングし（CSSプロセッサ向け）、そこから何らかの意味を推測してはなりません。
機能のサポートが無効になった場合（例: セキュリティ問題を緩和するための緊急措置、開発を支援するため、またはパフォーマンスの理由で）、ユーザーエージェントは、その機能が全くサポートされていないかのように行動し、この仕様でその機能が言及されていないかのように扱わなければなりません。例えば、特定の機能がWeb IDLインターフェースの属性を介してアクセスされる場合、その属性自体をそのインターフェースを実装するオブジェクトから除外しなければなりません—オブジェクトに属性を残しておきながら、nullを返すか、例外をスローするのでは不十分です。
HTML文書に関するこの仕様で記述されている方法で解析または作成されたXPath
1.0の実装（例えば、document.evaluate() APIの一部として）は、次の編集がXPath 1.0仕様に適用されたかのように動作しなければなりません。
まず、この段落を削除します:
QNameは、ノードテスト内で式コンテキストの名前空間宣言を使用して
展開名に展開されます。これは、開始タグと終了タグでの要素型名の展開と同じ方法ですが、xmlnsで宣言されたデフォルト名前空間は使用されません。QNameにプレフィックスがない場合、名前空間URIはnullになります（これは属性名が展開される方法と同じです）。QNameにプレフィックスがあり、式コンテキストに名前空間宣言がない場合、それはエラーです。
次に、次の内容をその場所に挿入します:
ノードテスト内のQNameは、式コンテキストの名前空間宣言を使用して展開名に展開されます。QNameにプレフィックスがある場合、そのプレフィックスに対応する名前空間URIが式コンテキストに存在しなければなりません。そのプレフィックスに対応する名前空間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要素に使用する名前空間に関して導入する変更をサポートするため、および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、XSLT、XPath、およびHTMLの相互作用に関しては、script要素セクションおよびtemplate要素セクションに非規範的なコメントが追加されています。
Headers/Permissions-Policy/document-domain
1つのエンジンのみでのサポート。
この文書では、以下のポリシーで制御される機能を定義しています:
Headers/Feature-Policy/autoplay
Headers/Permissions-Policy/autoplay
1つのエンジンのみでのサポート。
autoplay"は、デフォルトの許可リストが'self'の機能です。
cross-origin-isolated"は、デフォルトの許可リストが'self'の機能です。
focus-without-user-activation」、これは
'self' のデフォルトの許可リストを持ちます。
HTMLには、日付や数値など、特定のデータ型を受け入れるさまざまな場所があります。このセクションでは、そのようなフォーマットのコンテンツに対する適合基準と、それらを解析する方法について説明します。
実装者は、以下で説明する構文の解析を実装するために使用する可能性のあるサードパーティのライブラリを慎重に検討することを強く推奨します。たとえば、日付ライブラリは、この仕様で要求されるエラーハンドリング動作とは異なる動作を実装する可能性があります。これは、日付構文に関する仕様ではエラーハンドリング動作が定義されていないことが多く、そのため実装によってエラーの処理方法が大きく異なるからです。
以下で説明するいくつかのマイクロパーサーは、解析される文字列を保持するinput変数と、input内で次に解析される文字にポインタを指すposition変数を持つパターンに従います。
多くの属性がブール属性です。要素にブール属性が存在する場合、その値はtrueを表し、属性が存在しない場合はfalseを表します。
属性が存在する場合、その値は空の文字列であるか、属性の正規名に対してASCII大文字小文字を区別しない一致を持つ値でなければなりません。また、その値には前後に空白があってはなりません。
ブール属性には「true」や「false」の値を指定することはできません。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 > いくつかの属性は、列挙属性と呼ばれ、有限の状態セットを取ります。こうした属性の状態は、属性値、キーワード／状態マッピングのセット、および属性の仕様書にも記載できる3つの特別な状態を組み合わせて導出されます。これらの特別な状態は、不正値デフォルト、未指定値デフォルト、空値デフォルトです。
複数のキーワードが同じ状態にマッピングされることがあります。
属性の状態を決定するには、次の手順を使用します：
著作上の適合性目的では、列挙属性が指定されている場合、属性値は次のいずれかでなければなりません：
その属性の適合キーワードのいずれかとASCII大小区別なしで一致し、前後に空白がないもの。
空文字列であり、属性には空値デフォルトが定義されているもの。
反映目的では、いずれかのキーワードがマッピングされる状態には正規キーワードがあるとされます。これは次のように決定されます：
その状態にマッピングされるキーワードが1つだけなら、それがそのキーワードとなる。
その状態にマッピングされる適合キーワードが1つだけなら、それがその適合キーワードとなる。
その状態にマッピングされる適合キーワードが2つあり、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には「正」の値を設定します。
ASCII空白文字をスキップし、positionをinput内の次の位置に進めます。
positionがinputの終端を超えている場合、エラーを返します。
positionが指している文字（最初の文字）がU+002D HYPHEN-MINUS文字（-）の場合:
signを「負」に設定します。
positionを次の文字に進めます。
positionがinputの終端を超えている場合、エラーを返します。
それ以外の場合、positionが指している文字（最初の文字）がU+002B PLUS SIGN文字（+）の場合:
positionを次の文字に進めます。（「+」は無視されますが、適合していません。）
positionがinputの終端を超えている場合、エラーを返します。
positionが指している文字がASCII数字でない場合、エラーを返します。
コードポイントのシーケンスを収集し、positionを基にinputからASCII数字のシーケンスとして解釈します。その結果得られたシーケンスを10進数の整数として解釈し、valueにその整数を設定します。
signが「正」の場合はvalueを返し、それ以外の場合はvalueをゼロから引いた結果を返します。
文字列が1つ以上のASCII数字で構成されている場合、その文字列は有効な非負の整数です。
有効な非負の整数は、その数字列が表す10進数の値を表します。
非負の整数を解析するためのルールは、次のアルゴリズムで示されています。このアルゴリズムが呼び出されたときは、指定された順序でステップを実行し、値を返す最初のステップで中止しなければなりません。このアルゴリズムは、ゼロ、正の整数、またはエラーのいずれかを返します。
inputを解析中の文字列とします。
valueを、整数を解析するためのルールを使用してinputを解析した結果とします。
valueがエラーの場合、エラーを返します。
valueがゼロ未満の場合、エラーを返します。
valueを返します。
文字列が次の条件を満たす場合、それは有効な浮動小数点数です。
オプションとして、U+002D HYPHEN-MINUS文字（-）。
次のうち一つまたは両方が、この順序で含まれていること：
オプションとして：
U+0065 LATIN SMALL LETTER E文字（e）またはU+0045 LATIN CAPITAL LETTER E文字（E）。
オプションとして、U+002D HYPHEN-MINUS文字（-）またはU+002B PLUS SIGN文字（+）。
1つ以上のASCII数字の並び。
有効な浮動小数点数は、シグニフィカンドを10の指数に掛けた数を表します。シグニフィカンドは最初の数であり、それは10進数として解釈され（小数点と小数点後の数字を含む場合があります）、文字列全体がU+002D HYPHEN-MINUS文字（-）で始まり、数値がゼロでない場合はシグニフィカンドを負の数として解釈します。指数はEの後の数であり（Eと数の間にU+002D HYPHEN-MINUS文字（-）があり、数がゼロでない場合は負の数として解釈され、そうでない場合はEと数の間にU+002B PLUS SIGN文字（+）があっても無視されます）。Eがない場合、指数はゼロとして扱われます。
InfinityとNaN（非数）値は、有効な浮動小数点数ではありません。
有効な浮動小数点数の概念は、通常、著者が許可される内容を制限するためにのみ使用され、ユーザーエージェントの要件では浮動小数点数値を解析するためのルールが使用されます（例えば、max属性やprogress要素）。ただし、いくつかのケースでは、ユーザーエージェントの要件には文字列が有効な浮動小数点数であるかどうかのチェックが含まれる場合があります（例えば、値のサニタイズアルゴリズムやsrcset属性を解析するアルゴリズム）。
浮動小数点数としての数nの最良の表現は、ToString(n)を実行して得られる文字列です。抽象操作ToStringは一意に決定されません。特定の値に対して複数の可能な文字列がToStringから得られる場合、ユーザーエージェントは常にその値に対して同じ文字列を返さなければなりません（ただし、他のユーザーエージェントが使用する値と異なる場合があります）。
浮動小数点数値を解析するためのルールは、次のアルゴリズムで示されています。このアルゴリズムは、最初に値を返すステップで中止しなければなりません。このアルゴリズムは、数値またはエラーのいずれかを返します。
inputを解析中の文字列とします。
positionを、inputの開始位置を指すポインタとします。
valueに値1を設定します。
divisorに値1を設定します。
exponentに値1を設定します。
ASCIIの空白をスキップします。
positionがinputの終わりを超えている場合、エラーを返します。
positionが指している文字がU+002D HYPHEN-MINUS文字（-）である場合：
それ以外の場合、positionが指している文字がU+002B PLUS SIGN文字（+）である場合：
+」は無視されますが、準拠していません。）positionが指している文字がU+002E FULL STOP（.）であり、それがinputの最後の文字でなく、その次の文字がASCII数字である場合、valueをゼロに設定し、ステップ「Fraction」に進みます。
positionが指している文字がASCII数字でない場合、エラーを返します。
コードポイントのシーケンスを収集し、それをASCII数字として解釈し、そのシーケンスを10進数として解釈します。valueをその整数で掛けます。
Fraction：positionが指している文字がU+002E FULL STOP（.）である場合、次のサブステップを実行します：
もしpositionがU+0065 (e)またはU+0045 (E)を指している場合、次のようにします:
positionを次の文字に進めます。
もしpositionがinputの末尾を超えている場合は、conversionとラベル付けされたステップにジャンプします。
もしpositionがU+002D HYPHEN-MINUS文字（-）を指している場合:
もしpositionがinputの末尾を超えている場合は、conversionとラベル付けされたステップにジャンプします。
そうでなく、positionがU+002B PLUS SIGN文字（+）を指している場合:
もしpositionがinputの末尾を超えている場合は、conversionとラベル付けされたステップにジャンプします。
もしpositionがASCII digitでない場合は、conversionとラベル付けされたステップにジャンプします。
コードポイントのシーケンスを収集し、それがASCII digitsである場合、inputからpositionを与えて、その結果のシーケンスを10進数の整数として解釈します。exponentにその整数を掛けます。
valueを10のexponent乗で掛けます。
Conversion：Sを、有限のIEEE 754倍精度浮動小数点値（-0を除く）で構成された集合としますが、特別な値21024と-21024が追加されています。
rounded-valueをSの中でvalueに最も近い数とし、同じくらい近い値が2つある場合は、偶数のシグニフィカンドを持つ数を選びます。（この目的のために、特別な値21024と-21024は偶数のシグニフィカンドを持つと見なされます。）
rounded-valueが21024または-21024である場合、エラーを返します。
rounded-valueを返します。
寸法値を解析するためのルールは、次のアルゴリズムで示されています。呼び出されたとき、手順は指定された順序で実行され、値を返す最初のステップで中止しなければなりません。このアルゴリズムは、0.0以上の数値または失敗を返します。数値が返される場合、それはさらにパーセンテージまたは長さとして分類されます。
inputを解析中の文字列とします。
positionをinputの開始位置を指す位置変数とします。
ASCIIの空白をスキップします。
positionがinputの終わりを超えているか、positionが指しているコードポイントがASCII数字でない場合、失敗を返します。
コードポイントのシーケンスを収集し、それをASCII数字として解釈し、そのシーケンスを10進数として解釈します。valueをその数値とします。
positionがinputの終わりを超えている場合、valueを長さとして返します。
positionが指しているコードポイントがU+002E（.）である場合、次を実行します：
positionを1だけ進めます。
もしpositionがinputの末尾を超えているか、またはinput内のpositionにあるコードポイントがASCII digitでない場合は、現在の寸法値をvalue、input、およびpositionとともに返します。
divisorの値を1に設定します。
真の場合:
divisorに10を掛けます。
positionのinput内のコードポイントの値を、10進数の数字（0..9）として解釈し、それをdivisorで割った値をvalueに加えます。
positionを1だけ進めます。
もしpositionがinputの末尾を超えている場合は、valueを長さとして返します。
もしinput内のpositionにあるコードポイントがASCII digitでない場合は、中断します。
現在の寸法値をvalue、input、positionで返します。
現在の寸法値は、value、input、positionを用いて次のように決定されます：
ゼロでない寸法値を解析するためのルールは、次のアルゴリズムで示されています。呼び出されたとき、手順は指定された順序で実行され、値を返す最初のステップで中止しなければなりません。このアルゴリズムは、0.0より大きい数値またはエラーを返します。数値が返される場合、それはさらにパーセンテージまたは長さとして分類されます。
有効な浮動小数点数のリストは、U+002C コンマ文字で区切られた有効な浮動小数点数の集まりであり、それ以外の文字（例えばASCII空白）を含んではいけません。さらに、与えられる浮動小数点数の数や許容される値の範囲に制限があるかもしれません。
浮動小数点数リストを解析するためのルールは次の通りです：
inputを解析している文字列とします。
positionをinput内の文字列の先頭を指すポインタとして設定します。
numbersを空の浮動小数点数のリストとして設定します。このリストがこのアルゴリズムの結果となります。
コードポイントのシーケンスを収集し、それがASCIIホワイトスペース、U+002C コンマ、または U+003B セミコロン文字である場合、inputからpositionを指定して収集します。これにより、先頭の区切り文字をスキップします。
positionがinputの終わりを過ぎていない限り：
コードポイントのシーケンスを収集し、それがASCIIホワイトスペース、U+002C コンマ、U+003B セミコロン、ASCII数字、U+002E ピリオド、または U+002D ハイフンマイナス文字でない場合、inputからpositionを指定して収集します。これにより、先頭のゴミをスキップします。
コードポイントのシーケンスを収集し、それがASCIIホワイトスペース、U+002C コンマ、または U+003B セミコロン文字でない場合、inputからpositionを指定して収集し、unparsed numberに結果を設定します。
numberをunparsed numberを使用して解析した結果とします。解析ルールは浮動小数点数値の解析ルールに従います。
numberがエラーの場合、numberをゼロに設定します。
numberをnumbersに追加します。
コードポイントのシーケンスを収集し、それがASCIIホワイトスペース、U+002C コンマ、または U+003B セミコロン文字である場合、inputからpositionを指定して収集します。これにより、区切り文字をスキップします。
numbersを返します。
次元のリストを解析するためのルールは次の通りです。これらのルールは、パーセンテージ、相対的、絶対的のいずれかの単位を持つ、0個以上の数値と単位のペアのリストを返します。
raw inputを解析する文字列とします。
raw inputの最後の文字がU+002C コンマ文字（,）であれば、その文字をraw inputから削除します。
文字列raw inputをコンマで分割します。結果のトークンのリストをraw tokensとします。
resultを空の数値/単位ペアのリストとします。
各トークンがraw tokensにある間、以下のサブステップを実行します：
inputをトークンとします。
positionをinputへのポインタとし、初期状態では文字列の開始位置を指します。
valueを数値0とします。
unitをabsoluteとします。
positionがinputの終端を超えている場合、unitをrelativeに設定し、最後のサブステップにジャンプします。
positionの文字がASCII数字であれば、コードポイントのシーケンスを収集し、それがASCII数字からinputのpositionを指定して得られた場合、その結果のシーケンスを10進数の整数として解釈し、その整数でvalueを増加させます。
positionの文字がU+002E（.）の場合：
コードポイントのシーケンスを収集し、それがASCIIホワイトスペースとASCII数字である場合、inputのpositionを指定して収集し、sにその結果のシーケンスを設定します。
sからすべてのASCIIホワイトスペースを削除します。
sが空文字列でない場合、次を行います：
sの文字数をlengthとします（スペースが削除された後）。
fractionをsを10進整数として解釈し、その数を10lengthで割った結果とします。
valueをfractionで増加させます。
ASCIIホワイトスペースをスキップします。inputのpositionを指定して行います。
positionの文字がU+0025 パーセント記号（%）の場合、unitをpercentageに設定します。
それ以外の場合、positionの文字がU+002A アスタリスク（*）の場合、unitをrelativeに設定します。
valueによって示される数値とunitによって示される単位のペアをresultに追加します。
リストresultを返します。
以下のアルゴリズムでは、月month、年yearの月の日数は次のようになります：monthが1、3、5、7、8、10、12の場合は31日、monthが4、6、9、11の場合は30日、monthが2でyearが400で割り切れるか、4で割り切れるが100で割り切れない場合は29日、その他の場合は28日です。これはグレゴリオ暦の閏年を考慮しています。[GREGORIAN]
このセクションで定義されている日付と時刻の構文で使用されるASCII数字は、10進数を表します。
ここで説明する形式は対応するISO8601形式のサブセットを意図していますが、この仕様はISO8601よりもはるかに詳細な解析ルールを定義しています。したがって、実装者は以下に記述された解析ルールを実装する際に使用する日付解析ライブラリを慎重に検討することをお勧めします。ISO8601ライブラリは、日付や時刻を完全に同じ方法で解析しない場合があります。[ISO8601]
この仕様がプロレプティックグレゴリオ暦に言及する場合、それは現代のグレゴリオ暦を意味し、年1までさかのぼって外挿されます。プロレプティックグレゴリオ暦の日付、時にはプロレプティックグレゴリオ日付として明示的に言及されることもありますが、それはそのカレンダーが使用されていなかった時点(または場所)でもそのカレンダーを使用して記述されるものです。[GREGORIAN]
この仕様でグレゴリオ暦をワイヤフォーマットとして使用するのは、決定に関与した者の文化的偏見の結果としての任意の選択です。著者向けのセクションで日付、時刻、数字の形式、およびフォームコントロールのローカライズに関する実装ノートも参照してください。また、time要素も参照してください。
月は、年と月以外の日付情報およびタイムゾーン情報を持たない特定のプロレプティックグレゴリオ日付で構成されます。[GREGORIAN]
文字列が、次の順序で構成される場合、その文字列は年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 を返します。
日付は、年、月、日で構成され、タイムゾーン情報を含まない特定のプロレプティックグレゴリオ日付で構成されます。[GREGORIAN]
文字列が、次の順序で構成される場合、その文字列は年year、月month、日dayを表す有効な日付文字列です:
日付文字列を解析するためのルールは次のとおりです。これにより、日付が返されるか、何も返されません。アルゴリズムが「失敗する」と言った場合、それはその時点で中止され、何も返されないことを意味します。
input文字列とpositionを与えられた場合の日付コンポーネントを解析するためのルールは次のとおりです。これにより、年、月、日が返されるか、何も返されません。アルゴリズムが「失敗する」と言った場合、それはその時点で中止され、何も返されないことを意味します。
position を指定して input から ASCII 数字であるコードポイントのシーケンスを収集します。収集されたシーケンスが正確に2文字長でない場合は、失敗します。それ以外の場合は、結果のシーケンスを10進数の整数として解釈します。 day をその数値とします。
年なし日付は、グレゴリオ暦の月とその月内の日で構成されますが、年は関連付けられていません。[GREGORIAN]
文字列が、次の順序で構成される場合、その文字列は月monthと日dayを表す有効な年なし日付文字列です:
言い換えれば、monthが「02」である場合、2月を意味し、その日が29日であっても、閏年であったかのように解釈されます。
年なし日付文字列を解析するためのルールは次のとおりです。これにより、月と日が返されるか、何も返されません。アルゴリズムが「失敗する」と言った場合、それはその時点で中止され、何も返されないことを意味します。
input文字列とpositionを与えられた場合の年なし日付コンポーネントを解析するためのルールは次のとおりです。これにより、月と日が返されるか、何も返されません。アルゴリズムが「失敗する」と言った場合、それはその時点で中止され、何も返されないことを意味します。
position を指定して input から ASCII 数字であるコードポイントのシーケンスを収集します。収集されたシーケンスが正確に2文字長でない場合は、失敗します。それ以外の場合は、結果のシーケンスを10進数の整数として解釈します。 month をその数値とします。
position を指定して input から ASCII 数字であるコードポイントのシーケンスを収集します。収集されたシーケンスが正確に2文字長でない場合は、失敗します。それ以外の場合は、結果のシーケンスを10進数の整数として解釈します。 day をその数値とします。
時間 は、時刻情報がなく、時間、分、秒、および秒の小数部分で構成されます。
文字列が次のコンポーネントを指定された順序で含む場合、それは時hour、分minute、秒secondを表す有効な時間文字列です：
secondコンポーネントは60または61にすることはできません。リープセコンドは表現できません。
時間文字列を解析するためのルールは次のとおりです。これにより、時間が返されるか、何も返されません。アルゴリズムが「失敗する」と言った場合、それはその時点で中止され、何も返されないことを意味します。
時間コンポーネントを解析するためのルールは次のとおりです。input文字列とpositionを与えられた場合、これにより、時間、分、秒が返されるか、何も返されません。アルゴリズムが「失敗する」と言った場合、それはその時点で中止され、何も返されないことを意味します。
position を指定して input から ASCII 数字であるコードポイントのシーケンスを収集します。収集されたシーケンスが正確に2文字長でない場合は、失敗します。それ以外の場合は、結果のシーケンスを10進数の整数として解釈します。 hour をその数値とします。
positionがinputの終わりを超えているか、またはpositionの文字がU+003A コロン文字（:）でない場合は失敗します。それ以外の場合は、positionを1文字進めます。
position を指定して input から ASCII 数字であるコードポイントのシーケンスを収集します。収集されたシーケンスが正確に2文字長でない場合は、失敗します。それ以外の場合は、結果のシーケンスを10進数の整数として解釈します。 minute をその数値とします。
secondを0に設定します。
positionがinputの終わりを超えておらず、かつpositionの文字がU+003A（:）の場合、次のようにします：
positionをinputの次の文字に進めます。
positionがinputの終わりを超えている、またはinputの最後の文字である、またはpositionで始まる次の2文字が両方ともASCII 数字でない場合は失敗します。
コードポイントのシーケンスを収集し、それがASCII 数字またはU+002E ピリオド文字（.）であることを確認します。inputからpositionを基に収集します。収集したシーケンスが3文字である場合、または3文字を超えており3文字目がU+002E ピリオド文字でない場合、またはU+002E ピリオド文字が1つ以上含まれている場合は失敗します。それ以外の場合は、得られたシーケンスを10進数として解釈し（小数部分があるかもしれません）、その数値をsecondに設定します。
secondが範囲0 ≤ second < 60の数値でない場合は失敗します。
hour、minute、およびsecondを返します。
ローカルな日付と時刻は、特定のプロレプティックグレゴリオ暦日付（年、月、および日）と、タイムゾーンを含まない時間（時、分、秒、および秒の小数部）から構成されます。[GREGORIAN]
文字列が以下の順序で構成される場合、その文字列は日付と時刻を表す有効なローカルな日付と時刻の文字列です:
文字列が以下の順序で構成される場合、その文字列は日付と時刻を表す有効な正規化されたローカルな日付と時刻の文字列です:
ローカルな日付と時刻の文字列を解析するためのルールは次のとおりです。これにより、日付と時刻が返されるか、何も返されません。アルゴリズムが「失敗する」と言った場合、それはその時点で中止され、何も返されないことを意味します。
タイムゾーンオフセットは、符号付きの時間と分の数値から成ります。
文字列がタイムゾーンオフセットを表す有効なタイムゾーンオフセット文字列であるためには、次のいずれかでなければなりません：
U+005A ラテン大文字 Z 文字 (Z)、タイムゾーンが UTC の場合にのみ許可されます。
または、以下のコンポーネントを指定された順序で：
この形式では、タイムゾーンオフセットは -23:59 から +23:59 まで対応しています。現在実際に使用されているタイムゾーンのオフセット範囲は -12:00 から +14:00 までであり、実際のタイムゾーンの分コンポーネントは常に 00、30、または 45 です。ただし、タイムゾーンは政治的な問題として扱われるため、将来的に変更される可能性があります。
詳細については、以下のグローバル日付と時刻 セクションの使用ノートと例を参照してください。
タイムゾーンオフセット文字列を解析する ためのルールは次の通りです。これにより、タイムゾーンオフセットが返されるか、何も返されません。アルゴリズムが「失敗」と言った場合は、その時点で中止され、何も返されません。
input を解析中の文字列とします。
position を input へのポインタとして、文字列の先頭を指すようにします。
タイムゾーンオフセットコンポーネントを解析して timezonehours と timezoneminutes を取得します。これが何も返さなかった場合は失敗します。
もし position が input の終わりを越えていない場合、失敗します。
UTC から timezonehours 時間および timezoneminutes 分のタイムゾーンオフセットを返します。
タイムゾーンオフセットコンポーネントを解析する ためのルールは次の通りです。これはタイムゾーンの時間とタイムゾーンの分を返すか、何も返しません。アルゴリズムが「失敗」と言った場合は、その時点で中止され、何も返されません。
もし position にある文字が U+005A ラテン大文字 Z 文字 (Z) の場合：
timezonehours を 0 とします。
timezoneminutes を 0 とします。
position を次の文字に進めます。
そうでない場合、もし position にある文字が U+002B プラス記号 (+) または U+002D ハイフン記号 (-) の場合：
もし position にある文字が U+002B プラス記号 (+) の場合、sign を "positive" とします。そうでなければ、U+002D ハイフン記号 (-) であり、sign を "negative" とします。
position を次の文字に進めます。
コードポイントのシーケンスを収集する ASCII 数字 を収集します。s を収集したシーケンスとします。
s が正確に二文字の場合：
s を10進数の整数として解釈します。timezonehours をその数値とします。
position が input の末尾を超えている場合、または position の文字が U+003A COLON 文字でない場合は、失敗します。 それ以外の場合は、position を1文字進めます。
position を指定して input から ASCII 数字であるコードポイントのシーケンスを収集します。収集されたシーケンスが正確に2文字長でない場合は、失敗します。それ以外の場合は、結果のシーケンスを10進数の整数として解釈します。 timezoneminutes をその数値とします。
s が正確に四文字の場合：
s の最初の2文字を10進数の整数として解釈します。timezonehours をその数値とします。
s の最後の2文字を10進数の整数として解釈します。timezoneminutes をその数値とします。
そうでなければ、失敗します。
timezonehours が範囲 0 ≤ timezonehours ≤ 23 の数値でない場合、失敗します。
sign が "negative" の場合、timezonehours を反転させます。
timezoneminutes が範囲 0 ≤ timezoneminutes ≤ 59 の数値でない場合、失敗します。
sign が "negative" の場合、timezoneminutes を反転させます。
そうでなければ、失敗します。
timezonehours と timezoneminutes を返します。
グローバル日付と時刻 は、特定の先験的グレゴリオ暦の日付（年、月、日を含む）と、時間（時、分、秒、秒の小数部分を含む）、そして時差を表すサイン付きの時間と分からなる。
文字列が次の要素で構成されている場合、それは日付、時刻、および時差を表す有効なグローバル日付と時刻の文字列です：
UTCの形成前の時刻は、UT1（0°経度での地球太陽時間）で表現され解釈されなければならず、UTC（SI秒で刻まれるUT1の近似値）ではありません。タイムゾーンの形成前の時刻は、UT1時刻として明示的なタイムゾーンとともに、グリニッジ、ロンドンで観測された時刻との差を近似した形で表現し解釈されなければなりません。
次は、有効なグローバル日付と時刻の文字列として書かれた日付の例です。
0037-12-13 00:00Z"
1979-10-14T12:00:00.001-04:00"
8592-01-01T02:09+02:09"
これらの日付について注目すべき点は次のとおりです：
T" がスペースに置き換えられる場合、それは単一のスペース文字でなければなりません。"2001-12-21
12:00Z"（コンポーネント間に2つのスペースがある）は正しく解析されません。
グローバル日付と時刻の文字列を解析する ルールは次のとおりです。これにより、UTCの時刻と、ラウンドトリップまたは表示目的のための関連する時差情報が返されるか、何も返されません。アルゴリズムが「失敗した」と言った場合、その時点で中止され、何も返されません。
input を解析する文字列とします。
position を input 内のポインタとし、初期状態で文字列の開始位置を指します。
日付コンポーネントを解析する ことで、year、month、および day を取得します。これが何も返さない場合は、失敗します。
position が input の末尾を超えているか、position の文字が U+0054 ラテン大文字 T 文字 (T) または U+0020 スペース文字でない場合は、失敗します。それ以外の場合、position を1文字進めます。
時刻コンポーネントを解析する ことで、hour、minute、および second を取得します。これが何も返さない場合は、失敗します。
position が input の末尾を超えている場合は、失敗します。
時差コンポーネントを解析する ことで、timezonehours と timezoneminutes を取得します。これが何も返さない場合は、失敗します。
position が input の末尾を超えていない場合は、失敗します。
time を、year 年、month 月、day 日、hour 時、minute 分、second 秒の時刻から、timezonehours 時間と timezoneminutes 分を引いた瞬間とします。その瞬間はUTCタイムゾーンでの瞬間です。
timezone を timezonehours 時間と timezoneminutes 分のUTCからの偏差とします。
time と timezone を返します。
週 とは、週番号と、月曜日から始まる7日間の期間を表す週番号で構成されます。このカレンダーシステムでは、各週年には以下に定義されたように52または53のそのような7日間の期間があります。1969年12月29日（1969-12-29）のグレゴリオ暦の日付で始まる7日間の期間は、1970年の週年で週番号1として定義されます。連続する週は順番に番号付けされます。週年内の番号1の週の前の週は、前の週年の最後の週であり、その逆も同様です。 [GREGORIAN]
週年番号がyearの週年が53週間を持つ場合、それは以下のいずれかに対応します： 先験的グレゴリオ暦のyear年の最初の日（1月1日）が木曜日であるか、またはyear年の先験的グレゴリオ暦の最初の日（1月1日）が水曜日であり、かつyearが400で割り切れるか、または100で割り切れない4で割り切れる数である場合。その他の週年は52週間です。
53週間の週年の最終日の週番号は53であり、52週間の週年の最終日の週番号は52です。
特定の日の週年番号は、その日を含む年の番号と異なる場合があります。このHTMLのバージョンでは、週年yの最初の週は、グレゴリオ暦の年yの最初の木曜日を含む週です。
現代の目的では、ここで定義された週は、ISO 8601で定義されたISO週と同等です。 [ISO8601]
文字列が週年yearと週weekを表す有効な週文字列であるためには、次のコンポーネントで構成されている必要があります：
週文字列を解析するルールは次のとおりです。これにより、週年番号と週番号が返されるか、何も返されません。アルゴリズムが「失敗した」と言った場合、その時点で中止され、何も返されません。
input を解析する文字列とします。
position を input 内のポインタとし、初期状態で文字列の開始位置を指します。
position を指定して input から ASCII 数字であるコードポイントのシーケンスを収集します。収集されたシーケンスが少なくとも4文字長でない場合は、失敗します。それ以外の場合は、結果のシーケンスを10進数の整数として解釈します。 year をその数値とします。
もしyearがゼロより大きい数でない場合、失敗します。
positionがinputの末尾を超えているか、positionの文字がU+002D ハイフン (-) 文字でない場合、失敗します。そうでなければ、positionを1文字進めます。
positionがinputの末尾を超えているか、positionの文字がU+0057 ラテン大文字 W 文字 (W) でない場合、失敗します。そうでなければ、positionを1文字進めます。
position を指定して input から ASCII 数字であるコードポイントのシーケンスを収集します。収集されたシーケンスが正確に2文字長でない場合は、失敗します。それ以外の場合は、結果のシーケンスを10進数の整数として解釈します。 week をその数値とします。
maxweekを年yearの最終日の週番号とします。
もしweekが範囲1 ≤ week ≤ maxweekの数でない場合、失敗します。
positionがnot inputの末尾を超えていない場合、失敗します。
週年番号yearと週番号weekを返します。
デュレーションは、秒数の数で構成されます。
月と秒は比較できません（1か月は正確な秒数ではなく、その長さは起算日によって異なるため）、この仕様で定義されたデュレーションには月（または12か月に相当する年）を含むことはできません。特定の秒数を示すデュレーションのみが説明できます。
文字列がデュレーション tを表す有効なデュレーション文字列である場合、それが以下のいずれかで構成されている必要があります：
U+0050 ラテン大文字 P 文字のリテラルの後に、次のサブコンポーネントが1つ以上、指定された順序で続き、日、時間、分、秒の数がtの秒数と一致する：
1つ以上のASCII数字の後に、U+0044 ラテン大文字 D 文字が続き、日数を表します。
U+0054 ラテン大文字 T 文字の後に、次のサブコンポーネントが1つ以上、指定された順序で続く：
これは、この仕様で定義されたいくつかの他の日付および時間に関連するマイクロシンタックスの1つとして、ISO 8601で定義された形式の1つに基づいています。[ISO8601]
1つ以上の期間時間コンポーネント、それぞれ異なる期間時間コンポーネントスケールを持ち、任意の順序で配置され、表された秒数の合計がtの秒数と等しくなる。
期間時間コンポーネントは、次のコンポーネントで構成される文字列です：
ゼロ個以上のASCII空白文字。
1つ以上のASCII数字、指定された期間時間コンポーネントスケールによって秒数を表す。
指定された期間時間コンポーネントスケールが1（すなわち、単位が秒である）場合、オプションで、U+002E ピリオド文字（.）の後に、1、2、または3つのASCII数字、秒の小数部を表します。
ゼロ個以上のASCII空白文字。
次のいずれかの文字、期間時間コンポーネントの数値部分で使用される時間単位の期間時間コンポーネントスケールを表します：
ゼロ個以上のASCII空白文字。
これは、ISO 8601 の形式のいずれにも基づいていません。ISO 8601 の期間形式に対するより人間にとって読みやすい代替手段として意図されています。
期間文字列を解析するルールは以下の通りです。これにより、期間が返されるか、何も返されません。アルゴリズムが「失敗」と言った場合、その時点で中止され、何も返されないことを意味します。
inputを解析する文字列とします。
positionをinput内のポインタとし、最初は文字列の先頭を指します。
months、seconds、およびcomponent countをすべてゼロに設定します。
M-disambiguatorをminutesに設定します。
このフラグのもう一つの値はmonthsです。これはISO8601の期間において「M」単位を区別するために使用されます。この単位は月と分の両方を表します。月は許可されていませんが、将来的な互換性のため、または他のコンテキストで有効であるISO8601の期間を誤解しないように解析されます。
ASCII空白文字をスキップして、positionが指す位置のinput内を確認します。
positionがinputの終端を過ぎている場合、失敗します。
positionが指すinput内の文字がU+0050 LATIN CAPITAL LETTER Pである場合、positionを次の文字に進め、M-disambiguatorをmonthsに設定し、ASCII空白文字をスキップしてpositionが指す位置のinput内を確認します。
ループ開始:
unitsを未定義にします。これは次のいずれかの値に設定されます: years、months、weeks、days、hours、minutes、およびseconds。
next characterを未定義にします。これはinputから文字を処理するために使用されます。
positionがinputの終端を過ぎている場合、ループを終了します。
positionが指すinput内の文字がU+0054 LATIN CAPITAL LETTER Tである場合、positionを次の文字に進め、M-disambiguatorをminutesに設定し、ASCII空白文字をスキップしてpositionが指す位置のinput内を確認し、処理を続行します。
next characterをpositionが指すinput内の文字に設定します。
next characterがU+002E FULL STOP (.)である場合、Nを 0 に設定します。(positionを進めないでください。それは後で処理されます。)
そうでない場合、next characterがASCII数字である場合、コードポイントのシーケンスを収集し、positionが指す位置のinputからそれらを収集し、その結果のシーケンスを10進数の整数として解釈し、Nにその数値を設定します。
それ以外の場合、next characterが数字の一部ではない場合、失敗します。
positionがinputの終端を過ぎている場合、失敗します。
next characterをpositionが指すinput内の文字に設定し、今回はpositionを次の文字に進めます。(以前next characterがU+002E FULL STOP (.)だった場合、今回もその文字のままです。)
next characterがU+002E (.)である場合、次のようにします:
コードポイントのシーケンスを収集し、positionが指す位置のinputからそれらを収集します。sを結果のシーケンスに設定します。
sが空文字列の場合、失敗します。
lengthをsの文字数に設定します。
fractionをsを10進数の整数として解釈した結果とし、その数値を10lengthで割ります。
Nをfractionで増加させます。
ASCII空白文字をスキップして、positionが指す位置のinput内を確認します。
positionがinputの終端を過ぎている場合、失敗します。
next characterをpositionが指すinput内の文字に設定し、positionを次の文字に進めます。
next characterがU+0053 LATIN CAPITAL LETTER SまたはU+0073 LATIN SMALL LETTER Sのどちらでもない場合、失敗します。
unitsをsecondsに設定します。
それ以外の場合:
next characterがASCII空白文字である場合、ASCII空白文字をスキップしてpositionが指す位置のinput内を確認し、next characterをpositionが指すinput内の文字に設定し、positionを次の文字に進めます。
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が上記のいずれでもない場合、失敗します。
component countをインクリメントします。
multiplierを1に設定します。
unitsがyearsである場合、multiplierに12を掛け、unitsをmonthsに設定します。
unitsがmonthsである場合、Nとmultiplierの積をmonthsに加えます。
それ以外の場合:
unitsがweeksである場合、multiplierに7を掛け、unitsをdaysに設定します。
unitsがdaysである場合、multiplierに24を掛け、unitsをhoursに設定します。
unitsがhoursである場合、multiplierに60を掛け、unitsをminutesに設定します。
unitsがminutesである場合、multiplierに60を掛け、unitsをsecondsに設定します。
強制的に、unitsはsecondsに設定されます。Nとmultiplierの積をsecondsに加えます。
ASCII空白文字をスキップして、positionが指す位置のinput内を確認します。
component countがゼロの場合、失敗します。
monthsがゼロでない場合、失敗します。
seconds秒で構成された期間を返します。
文字列が任意の時間を含む有効な日付文字列であるためには、それが次のいずれかである必要があります。
日付または時間の文字列を解析するためのルールは以下の通りです。アルゴリズムは日付、時間、世界日付および時間、もしくは何も返しません。アルゴリズムが「失敗する」と述べた場合、それはその時点で中止され、何も返されないことを意味します。
input を解析中の文字列とします。
position を input 内のポインタとし、初期状態では文字列の開始位置を指します。
position と同じ位置に start position を設定します。
date present フラグと time present フラグを true に設定します。
日付コンポーネントを解析する ことで year、month、day を取得します。これが失敗した場合、date present フラグを false に設定します。
もし date present が true であり、position が input の終端を超えていない場合、および position の文字が U+0054 ラテン大文字 T 文字（T）または U+0020 スペース文字である場合、position を input 内の次の文字に進めます。
それ以外の場合、もし date present が true であり、かつ position が input の終端を超えているか、または position の文字が U+0054 ラテン大文字 T 文字でも U+0020 スペース文字でもない場合、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 であれば、タイムゾーンオフセットコンポーネントを解析する ことで timezonehours と timezoneminutes を取得します。これが何も返さない場合、失敗します。
もし 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 からなる瞬間とし、これに timezonehours 時間と timezoneminutes 分を引いた、UTC タイムゾーンでの瞬間とし、timezone を UTC から timezonehours 時間および timezoneminutes 分とし、time と timezone を返します。
一部の廃止されたレガシー属性は、文字列 input を指定して、レガシーカラー値を解析するためのルールを使用して色を解析します。これらはCSSカラーまたは失敗を返します。
input が空の文字列の場合、失敗を返します。
input から先頭および末尾のASCII空白を削除します。
input が「transparent」のASCII大文字小文字を区別しない一致である場合、失敗を返します。
input が名前付きカラーのいずれかのASCII大文字小文字を区別しない一致である場合、そのキーワードに対応するCSSカラーを返します。 [CSSCOLOR]
CSS2システムカラーは認識されません。
input のコードポイント長が4で、input の最初の文字がU+0023 (#) であり、input の最後の3文字がすべてASCII16進数である場合：
result をCSSカラーとします。
input の2番目の文字を16進数として解釈します。result の赤成分を、結果の数値に17を掛けたものとします。
input の3番目の文字を16進数として解釈します。result の緑成分を、結果の数値に17を掛けたものとします。
input の4番目の文字を16進数として解釈します。result の青成分を、結果の数値に17を掛けたものとします。
result を返します。
input 内のU+FFFFより大きいコードポイント（つまり、基本多言語面にない文字）を「00」に置き換えます。
input のコードポイント長が128より大きい場合、input を切り捨て、最初の128文字のみを残します。
input の最初の文字がU+0023 (#) の場合、それを取り除きます。
input 内のASCII16進数でない文字をU+0030 (0) に置き換えます。
input のコードポイント長がゼロであるか、3の倍数でない間、U+0030 (0) をinput に追加します。
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 を返します。
スペースで区切られたトークンのセットは、1つ以上のASCII空白文字で区切られたゼロ個以上の単語（トークンと呼ばれる）を含む文字列です。単語は、1つ以上の文字からなる任意の文字列で、ASCII空白文字を含まないものとします。
スペースで区切られたトークンのセットを含む文字列には、先頭または末尾にASCII空白文字が含まれている場合があります。
順序のない一意のスペースで区切られたトークンのセットは、トークンが重複していないスペースで区切られたトークンのセットです。
順序がある一意のスペースで区切られたトークンのセットは、トークンが重複していないが、トークンの順序に意味があるスペースで区切られたトークンのセットです。
スペースで区切られたトークンのセットには、許可された値の定義済みセットがある場合があります。許可された値のセットが定義されている場合、トークンはその許可された値のリストからのものでなければなりません。その他の値は非準拠です。許可された値のセットが提供されていない場合は、すべての値が準拠とされます。
スペースで区切られたトークンのセットにおいてトークンを比較する方法（例: 大文字小文字を区別するかどうか）は、セットごとに定義されます。
コンマ区切りのトークンのセットは、ゼロ個以上のトークンを含む文字列で、各トークンは次のトークンとU+002C COMMA文字（,）で区切られています。トークンはゼロ個以上の文字からなる任意の文字列であり、ASCII空白文字で始まったり終わったりせず、U+002C COMMA文字（,）を含まないものとし、任意でASCII空白文字で囲まれている場合があります。
例えば、文字列「 a ,b,,d d 」は、4つのトークン「a」、「b」、「」（空の文字列）、および「d
d」で構成されます。各トークンの前後の空白はトークンの一部とはみなされず、空の文字列もトークンになり得ます。
コンマ区切りのトークンのセットには、有効なトークンを構成するものに関するさらなる制限が課される場合があります。そのような制限が定義されている場合、トークンはすべてその制限に適合しなければなりません。その他の値は非準拠です。もしそのような制限が指定されていない場合、すべての値が準拠となります。
type型の要素への有効なハッシュ名参照は、U+0023
番号記号文字（#）で始まり、そのtype型の要素のname属性の値と完全に一致する文字列で構成されます。その要素は同じツリー内に存在します。
type型の要素へのハッシュ名参照を解析するためのルールは、コンテキストノードscopeが与えられた場合、以下の通りです。
解析されている文字列にU+0023 番号記号文字が含まれていない場合、または文字列内の最初の番号記号文字が文字列の最後の文字である場合、nullを返します。
sを、解析されている文字列内の最初のU+0023 番号記号文字の直後の文字からその文字列の終わりまでの文字列とします。
scopeのツリー内で、ツリー順にsの値を持つidまたはname属性を持つ最初のtype型の要素を返します。該当する要素がない場合はnullを返します。
id属性は解析時に考慮されますが、値が有効なハッシュ名参照であるかどうかを決定する際には使用されません。つまり、idに基づいて要素を参照するハッシュ名参照は、（その要素に同じ値のname属性がある場合を除いて）準拠エラーです。
文字列が有効なメディアクエリリストであるためには、それがMedia
Queriesの<media-query-list>生成規則に一致する必要があります。[MQ]
文字列がユーザーの環境に一致するためには、それが空の文字列、ASCII空白文字のみで構成された文字列、またはMedia Queriesで定義されたユーザーの環境に一致するメディアクエリリストである必要があります。[MQ]
一意の内部値は、シリアライズ可能で、値で比較可能であり、スクリプトに公開されない値です。
新しい一意の内部値を作成するには、このアルゴリズムで以前に返されたことのない一意の内部値を返します。
文字列が有効な非空のURLであるためには、それが有効なURL文字列であり、かつ空文字列ではない必要があります。
文字列がスペースで囲まれた可能性のある有効なURLであるためには、それから先頭および末尾のASCII空白文字を取り除いた後に、それが有効なURL文字列である必要があります。
文字列がスペースで囲まれた可能性のある有効な非空のURLであるためには、それから先頭および末尾のASCII空白文字を取り除いた後に、それが有効な非空のURLである必要があります。
この仕様では、about:legacy-compatというURLを予約済みで解決不可能なURLとして定義していますが、XMLツールとの互換性を確保するためにDOCTYPEにおいてHTML文書で使用されます。[ABOUT]
この仕様では、about:html-kindというURLを予約済みで解決不可能なURLとして定義していますが、これはメディアトラックの種類を識別するために使用されます。[ABOUT]
この仕様では、about:srcdocというURLを予約済みで解決不可能なURLとして定義していますが、これはURLがiframeのsrcdoc文書として使用されます。[ABOUT]
URLがabout:blankに一致するためには、そのスキームが「about」であり、そのパスが単一の文字列「blank」を含み、そのユーザー名およびパスワードが空文字列であり、そのホストがnullである必要があります。
このようなURLの クエリ および フラグメント は null
でない場合があります。例えば、URL
レコードが パースされた "about:blank?foo#bar" は about:blankと一致します。
URLは、about:srcdocと一致するためには、
スキームが"about"であり、パスが単一の文字列"srcdoc"を含み、
クエリがnullであり、ユーザー名およびパスワードが空文字列であり、ホストがnullである必要があります。
about:srcdocと一致するために
URLのクエリがnullであることが保証されている理由は、
iframe の srcdoc ドキュメントのURLが null でないクエリを持つように作成することができないためです。これは、DocumentのURLがabout:blankと一致する場合とは異なります。
つまり、URLの集合でabout:srcdocと一致するものは、フラグメントのみが異なります。
URLを解析することは、文字列を受け取り、それが表すURLレコードを取得するプロセスです。このプロセスはURLで定義されていますが、HTML標準ではベースURLやエンコーディングを抽象化するためのいくつかのラッパーが定義されています。[URL]
新しいAPIのほとんどはURLを解析するを使用します。古いAPIやHTML要素は、エンコーディングを考慮してURLを解析するを使用する理由があるかもしれません。カスタムベースURLが必要な場合やベースURLが不要な場合は、URLパーサーを直接使用することももちろん可能です。
urlという文字列を、Documentオブジェクトまたは環境設定オブジェクトであるenvironmentに対して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シリアライザーを適用した結果を返します。
document base URLは、Document document の
URL
レコードであり、以下の手順を実行して取得されます。
document に descendant
の base 要素が存在せず、その要素が
href 属性を持たない場合は、
document の
フォールバック基本URLを返します。
それ以外の場合は、document内でhref属性を持つ最初のbase要素の
フローズン基本URLを
ツリー順序で返します。
フォールバック基本URLは、Document オブジェクト document の
URL
レコードであり、以下の手順を実行して取得されます。
documentがiframe
srcdoc ドキュメントである場合：
アサート：document の about base URL が null でないこと。
document の about base URLを返します。
documentのURLがabout:blankと一致し、
documentのabout base URLがnullでない場合は、
documentのabout base
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を表示するUIなどが該当します。
各 descendant を document の シャドウを含む子孫 の中から順に処理する：
もし descendant が、script 要素で、その 結果 が 推測ルール解析結果 である場合、
次を実行する：
oldResult を element の 結果 とする。
newResult を、element の 子テキスト内容 と element の ノードドキュメント を与えて 推測ルール解析結果を作成する処理の結果とする。
推測ルールを更新する処理を、element の 関連グローバルオブジェクト、oldResult、newResult を与えて実行する。
推測的ロードを検討する処理を document を与えて実行する。
これは、基本URLを変更しても、例えばimg要素で表示される画像には影響しないことを意味します。したがって、
スクリプトからsrcIDL属性にアクセスすると、
表示中の画像と一致しない可能性がある新しい絶対URLが返されます。
url、destination、corsAttributeState、およびオプションの同一オリジンフォールバックフラグが与えられた場合に潜在的なCORSリクエストを作成するには、次のステップを実行します:
corsAttributeStateがNo
CORSである場合、modeを"no-cors"とし、それ以外の場合は"cors"とします。
もし同一オリジンフォールバックフラグが設定されていて、modeが"no-cors"である場合、modeを"same-origin"に設定します。
credentialsModeを"include"とします。
corsAttributeStateがAnonymousである場合、credentialsModeを"same-origin"に設定します。
URLがurl、宛先がdestination、モードがmode、認証情報モードが credentialsModeであり、かつuse-URL-credentialsフラグが設定されている、新しいリクエストを返します。
リソースのContent-Typeメタデータは、MIME Sniffingの要件に従って取得および解釈されなければなりません。[MIMESNIFF]
リソースの計算されたMIMEタイプは、MIME Sniffingで示された要件に従って求めなければなりません。[MIMESNIFF]
画像を特定するための規則、リソースがテキストかバイナリかを区別するための規則、および音声および動画を特定するための規則もMIME Sniffingで定義されています。これらの規則は、結果としてMIMEタイプを返します。[MIMESNIFF]
MIME Sniffingの規則は正確に遵守することが重要です。ユーザーエージェントがサーバーの期待とは異なるヒューリスティックでコンテンツタイプを検出する場合、セキュリティ問題が発生する可能性があります。詳細はMIME Sniffingを参照してください。[MIMESNIFF]
meta要素から文字エンコーディングを抽出するmeta
要素から文字エンコーディングを抽出するためのアルゴリズムは、文字列 s が与えられた場合、次のとおりです。これは文字エンコーディングまたは何も返しません。
positionをsのポインタとし、初期位置を文字列の先頭に設定します。
ループ: positionの後にs内で最初に現れる7文字を探し、その文字列が"charset"とASCII大文字小文字を区別しない一致であるか確認します。そのような一致が見つからなかった場合、何も返さず終了します。
"charset"の後に続くASCII空白文字をスキップします（存在しない場合もあります）。
次の文字がU+003D EQUALS SIGN（=）でない場合、positionを次の文字の直前に移動し、ループラベルのステップに戻ります。
等号の後に続くASCII空白文字をスキップします（存在しない場合もあります）。
次の文字を以下のように処理します:
このアルゴリズムはHTTP仕様書内のものとは異なります（例えば、HTTPではシングルクォートの使用が許可されておらず、このアルゴリズムがサポートしていないバックスラッシュエスケープ機構のサポートが必要です）。このアルゴリズムは、歴史的にはHTTPに関連する文脈で使用されていましたが、実装によってサポートされる構文はしばらく前に分岐しました。[HTTP]
CORS設定属性は、次のキーワードと状態を持つ列挙属性です:
| キーワード | 状態 | 簡単な説明 |
|---|---|---|
anonymous
| Anonymous | 要素のリクエストは、そのモードが"cors"に設定され、その認証モードが"same-origin"に設定されます。
|
use-credentials
| Use Credentials | 要素のリクエストは、そのモードが"cors"に設定され、その認証モードが"include"に設定されます。
|
CORS設定属性により管理されるフェッチの大部分は、潜在的なCORSリクエストを作成するアルゴリズムを通じて実行されます。
リクエストのモードが常に"cors"であるよりモダンな機能に対しては、特定のCORS設定属性が再利用され、わずかに異なる意味を持つようになります。これにより、リクエストのリクエストの認証モードのみに影響を与えるようになります。この変換を行うために、特定のCORS設定属性に対してCORS設定属性認証モードを次の状態に応じて定義します:
same-origin"
include"
リファラーポリシー属性は列挙属性です。空の文字列を含む各リファラーポリシーがこの属性のキーワードであり、同名の状態にマッピングされます。
これらの状態がさまざまなフェッチの処理モデルに与える影響については、この仕様全体、Fetch、およびReferrer Policyでより詳細に定義されています。[FETCH] [REFERRERPOLICY]
特定のフェッチに対してどの処理モデルが使用されるかに寄与するシグナルはいくつかありますが、リファラーポリシー属性はその一部に過ぎません。一般的に、これらのシグナルが処理される順序は以下の通りです:
最初に、noreferrerリンクタイプの存在を確認します。
次に、リファラーポリシー属性の値を確認します。
最後に、Referrer-PolicyHTTPヘッダーを確認します。
すべての最新エンジンでサポートされています。
nonce
コンテンツ属性は、暗号化された nonce（「一度だけ使用される番号」）を表し、特定のフェッチが許可されるかどうかを判断するために Content Security Policy
によって使用されます。値はテキストです。[CSP]
nonce コンテンツ属性を持つ要素は、暗号化された nonce
がスクリプトにのみ公開されるようにし（CSS 属性セレクタなどのサイドチャネルには公開されません）、コンテンツ属性から値を取得し、[[CryptographicNonce]] という内部スロットに移動させ、スクリプトに HTMLOrSVGElement
インターフェースミックスインを介して公開し、コンテンツ属性を空文字列に設定します。特に指定がない限り、スロットの値は空文字列です。
element.nonce
element の暗号化された nonce に設定された値を返します。セッターが使用されていない場合、これは元々 nonce コンテンツ属性に見つかった値になります。
element.nonce = value
element の暗号化された nonce の値を更新します。
nonce
IDL 属性は、取得時にこの要素の [[CryptographicNonce]]
の値を返し、設定時にこの要素の [[CryptographicNonce]]
に設定された値を設定します。
nonce IDL
属性のセッターが対応するコンテンツ属性を更新しないことに注目してください。これと、ブラウジングコンテキストに接続されたときに要素の nonce
コンテンツ属性を空文字列に設定する以下の設定は、セレクタなどのコンテンツ属性を簡単に読み取れるメカニズムを介して nonce 値が外部に流出するのを防ぐために設けられています。この動作について詳しくは、issue #2369 で紹介されています。
次の 属性変更手順 は、nonce コンテンツ属性に使用されます：
element が 含む HTMLOrSVGElement
を持たない場合、リターンします。
localName が nonce
ではないか、または namespace が null でない場合、リターンします。
value が null の場合、element の [[CryptographicNonce]] を空文字列に設定します。
それ以外の場合、element の [[CryptographicNonce]] を value に設定します。
要素が 含む
HTMLOrSVGElement を ブラウジングコンテキストに接続されたとき、ユーザーエージェントはelementに対して次の手順を実行する必要があります：
CSP listをelementのシャドウを含むルートのポリシーコンテナのCSP リストにします。
CSP list がヘッダーで配信されたコンテンツセキュリティポリシーを含む場合、かつ
element が、その値が空の文字列ではないnonce
コンテンツ属性を持つ場合：
nonce を element の[[CryptographicNonce]]に設定します。
element の [[CryptographicNonce]] を nonce に設定します。
もしelementの[[CryptographicNonce]] が復元されなければ、この時点で空文字列になります。
node、copy、およびsubtree が与えられた、HTMLOrSVGElement を含む要素のクローニングステップは、copy の [[CryptographicNonce]] を node の [[CryptographicNonce]] に設定することです。
すべての最新エンジンでサポートされています。
レイジーローディング属性は、以下のキーワードと状態を持つ列挙属性です:
| キーワード | 状態 | 簡潔な説明 |
|---|---|---|
lazy
| Lazy | 条件が満たされるまでリソースのフェッチを遅らせるために使用されます。 |
eager
| Eager | リソースを即座にフェッチするために使用されます。デフォルトの状態です。 |
この属性は、ユーザーエージェントに対し、リソースを即座にフェッチするか、要素に関連する条件が満たされるまでフェッチを遅らせるよう指示します。
レイジーロード要素のステップは、element に対して次のように行われます:
スクリプトが無効になっている場合 elementに対し、false を返します。
これは追跡防止策であり、スクリプトが無効になっているときにレイジーローディングがサポートされていると、ページのマークアップに画像を戦略的に配置することで、ユーザーの大まかなスクロール位置を追跡することが可能になってしまうためです。
element の レイジーローディング属性がLazy 状態にある場合、true を返します。
false を返します。
各imgおよびiframe要素には、関連するレイジーロード再開ステップがあり、最初は null に設定されています。
imgおよびiframe要素がレイジーロードを行う場合、これらのステップはレイジーロードインターセクションオブザーバーのコールバックから、またはレイジーローディング属性がEager状態に設定されたときに実行されます。これにより、要素のロードが続行されます。
各Documentには、最初は null に設定されているレイジーロードインターセクションオブザーバーがあり、IntersectionObserverインスタンスに設定できます。
レイジーローディング要素のインターセクション観察を開始するためにelementに対して、次の手順を実行します:
elementのノードドキュメントをdocとします。
もしdocのレイジーロードインターセクションオブザーバーが null
である場合、新しいIntersectionObserverインスタンスに設定します。初期設定は次のとおりです:
元のIntersectionObserverコンストラクタの値を使用することが意図されています。ただし、Intersection
Observerが仕様内での使用に適した低レベルのフックを公開するまでは、JavaScript で公開されたコンストラクタを使用する必要があります。これを追跡しているバグはw3c/IntersectionObserver#464を参照してください。[INTERSECTIONOBSERVER]
callbackはentriesとobserverという引数を使ってこれらのステップを実行します:
entries内の各entryに対して開発者が修正可能な配列アクセサやイテレーションフックをトリガーしない反復メソッドを使用して:
resumptionStepsを null に設定します。
もしentry.isIntersectingが
true の場合、resumptionStepsをentry.targetのレイジーロード再開ステップに設定します。
もしresumptionStepsが null の場合、リターンします。
レイジーローディング要素のインターセクション観察を停止するために、entry.targetに対して実行します。
entry.targetのレイジーロード再開ステップを
null に設定します。
resumptionStepsを呼び出します。
元のisIntersectingおよびtargetゲッターの値を使用することが意図されています。w3c/IntersectionObserver#464を参照してください。[INTERSECTIONOBSERVER]
optionsは、IntersectionObserverInit辞書であり、次の辞書メンバーを持ちます:
«[ "scrollMargin" → レイジーロードスクロールマージン ]»
これは、画像がまだビューポートと交差していないが、交差しそうなときにスクロール中に画像をフェッチすることを可能にします。
レイジーロードスクロールマージンの提案は値の動的な変更を意味していますが、IntersectionObserverAPIはスクロールマージンの変更をサポートしていません。問題についてはw3c/IntersectionObserver#428を参照してください。
docのレイジーロードインターセクションオブザーバーのobserveメソッドを呼び出し、引数にelementを設定します。
元のobserveメソッドの値を使用することが意図されています。w3c/IntersectionObserver#464を参照してください。[INTERSECTIONOBSERVER]
レイジーローディング要素のインターセクション観察を停止するためにelementに対して、次の手順を実行します:
elementのノードドキュメントをdocとします。
断言: docのレイジーロードインターセクションオブザーバーが null でないこと。
docのレイジーロードインターセクションオブザーバーのunobserveメソッドを呼び出し、引数にelementを設定します。
元のunobserveメソッドの値を使用することが意図されています。w3c/IntersectionObserver#464を参照してください。[INTERSECTIONOBSERVER]
レイジーロードスクロールマージンは実装依存の値ですが、以下の提案を考慮する必要があります:
リソースがビューポートに交差する前に、通常の使用パターン下で最も頻繁にリソースが読み込まれる最小値を設定します。
典型的なスクロール速度: スクロール速度が速いデバイスには値を増加させます。
現在のスクロール速度やモメンタム: ユーザーエージェントはスクロールがどこで止まる可能性が高いかを予測し、値を調整できます。
ネットワークの品質: 速度が遅いか、遅延が高い接続では値を増加させます。
ユーザーの好みにより値が影響されることがあります。
プライバシーのために、レイジーロードスクロールマージンが追加情報を漏洩しないことが重要です。例えば、現在のデバイスでの典型的なスクロール速度が不正確であっても、新しいフィンガープリントベクトルが導入されないようにする必要があります。
ブロッキング属性は、特定の操作が外部リソースのフェッチにおいてブロックされるべきであることを明示的に示します。ブロックされる可能性のある操作は、以下の表に示されている文字列であるブロッキングトークン候補によって表されます。
| ブロッキングトークン候補 | 説明 |
|---|---|
"render"
| この要素は潜在的にレンダーブロッキングである可能性があります。 |
将来的には、ブロッキングトークン候補が増える可能性があります。
ブロッキング属性には、スペースで区切られた順不同の一意のトークン集合であり、各トークンがブロッキングトークン候補である値を持たなければなりません。サポートされているトークンは、ブロッキング属性のブロッキングトークン候補です。任意の要素は、ブロッキング属性を最大で1つしか持つことができません。
要素elに対するブロッキングトークンセットは、以下の手順に従った結果です:
elのブロッキング属性の値をvalueとします。この属性が存在しない場合は空文字列とします。
valueをASCII小文字に変換されたvalueに設定します。
ASCII空白文字でvalueを分割した結果をrawTokensとします。
rawTokensの要素で、ブロッキングトークン候補であるものを含むセットを返します。
要素は、ブロッキングトークンセットに"render"が含まれている場合、または個々の要素で定義される暗黙的に潜在的にレンダーブロッキングである場合に、潜在的にレンダーブロッキングとなります。デフォルトでは、要素は暗黙的に潜在的にレンダーブロッキングではありません。
フェッチ優先属性は、次のキーワードと状態を持つ列挙属性です:
| キーワード | 状態 | 簡潔な説明 |
|---|---|---|
high
| High | 同じデスティネーションを持つ他のリソースに対して、フェッチが高優先度であることを示します。 |
low
| Low | 同じデスティネーションを持つ他のリソースに対して、フェッチが低優先度であることを示します。 |
auto
| Auto | 同じデスティネーションを持つ他のリソースに対して、フェッチの優先度を自動的に決定することを示します。 |
反映のための構成要素は次のとおりです:
反映されたターゲットとは、要素またはElementInternals
オブジェクトです。これは通常、コンテキストから明確であり、反映されたIDL属性のインターフェイスと同一です。ElementInternals
オブジェクトの場合、それは常にそのインターフェイスと同一です。
反映されたIDL属性は、属性インターフェイスメンバーです。
反映されたコンテンツ属性名は文字列です。反映されたターゲットが要素である場合、それは名前空間がnullのコンテンツ属性のローカル名を表します。反映されたターゲットがElementInternals
オブジェクトである場合、それは反映されたターゲットのターゲット要素の内部コンテンツ属性マップのキーを表します。
反映されたIDL属性は、反映されるように定義できます。反映されたコンテンツ属性名が反映されたターゲットの。一般的には、IDL属性ゲッターがコンテンツ属性の現在の値を返し、セッターがコンテンツ属性の値を指定された値に変更することを意味します。
反映されたターゲットには、次の関連アルゴリズムがあります:
反映されたターゲットが要素elementである場合、これらは次のように定義されます:
elementを返します。
attributeを、null、反映されたコンテンツ属性名、およびelementを指定して、名前空間とローカル名で属性を取得するの実行結果とします。
attributeがnullの場合、nullを返します。
attributeのvalueを返します。
属性値を設定するをelement、反映されたコンテンツ属性名、 およびvalueを指定して実行します。
名前空間とローカル名で属性を削除するを、null、反映されたコンテンツ属性名、 およびelementを指定して実行します。
反映されたターゲットがElementInternalsオブジェクトelementInternalsである場合、それらは次のように定義されます:
elementInternalsのターゲット要素を返します。
もしelementInternalsのターゲット要素の内部コンテンツ属性マップ[反映されたコンテンツ属性名]が存在しない場合、nullを返します。
elementInternalsのターゲット要素の内部コンテンツ属性マップ[反映されたコンテンツ属性名]を返します。
設定elementInternalsのターゲット要素の内部コンテンツ属性マップ[反映されたコンテンツ属性名]をvalueに。
削除elementInternalsのターゲット要素の内部コンテンツ属性マップ[反映されたコンテンツ属性名]を削除します。
これは、ElementInternalsオブジェクトの冗長なデータ構造につながります。これらのオブジェクトは、ターゲット要素の内部コンテンツ属性マップを直接操作することができず、反映が単方向にしか行われないためです。しかし、このアプローチは、反映されたターゲット間で共有されるIDL属性を定義し、共通のAPIセマンティクスの利点を享受するために、エラーを防ぐために選ばれました。
型がDOMStringまたはDOMString?のIDL属性は、反映されるコンテンツ属性が列挙された場合にのみ、既知の値のみに制限されることがあります。以下の処理モデルによると、そのようなIDL属性のゲッターは、その列挙された属性のキーワード、または空文字列またはnullのみを返します。
反映されたIDL属性が型DOMStringを持つ場合:
ゲッターステップは次のとおりです:
thisのget the elementを実行して、elementを取得します。
thisのget the content attributeを実行して、contentAttributeValueを取得します。
elementのコンテンツ属性定義を取得し、その名前空間がnullでローカル名が反映されたコンテンツ属性名に一致するものをattributeDefinitionとします。
もしattributeDefinitionが列挙された属性であり、反映されたIDL属性が既知の値のみに制限されるように定義されている場合:
contentAttributeValueがnullの場合、空文字列を返します。
contentAttributeValueを返します。
セッターステップは、thisのset the content attributeを指定された値で実行することです。
反映されたIDL属性が型DOMString?を持つ場合:
ゲッターステップは次のとおりです:
thisのget the elementを実行して、elementを取得します。
thisのget the content attributeを実行して、contentAttributeValueを取得します。
elementのコンテンツ属性定義を取得し、その名前空間がnullでローカル名が反映されたコンテンツ属性名に一致するものをattributeDefinitionとします。
attributeDefinition が列挙属性であることを示す場合：
反映されたIDL属性は既知の値のみに限定されることをアサートします。
contentAttributeValue が attributeDefinition の状態に対応することをアサートします。
contentAttributeValue が、関連付けられたキーワード値のない attributeDefinition の状態に対応する場合、null を返します。
contentAttributeValue が対応する attributeDefinition の状態の正規のキーワードを返します。
contentAttributeValue を返します。
セッターステップは次のとおりです:
指定された値がnullの場合、thisのdelete the content attributeを実行します。
それ以外の場合、thisのset the content attributeを指定された値で実行します。
もし反映されたIDL属性の型がUSVStringであり、オプションでURLとして扱われる場合：
getter手順は次の通りです：
contentAttributeValueがnullなら、空文字列を返す。
urlStringを、URLのエンコード・パース・シリアライズをcontentAttributeValueと、elementの ノード文書を基準にして実行した結果とする。
urlStringが失敗でなければurlStringを返す。
contentAttributeValueをスカラ値文字列へ変換したものを返す。
もし反映されたIDL属性の型がbooleanの場合：
これはブール内容属性の規則に対応しています。
もし反映されたIDL属性の型がlongであり、オプションで非負数のみ許可、さらにオプションで既定値defaultValueが指定されている場合：
getter手順は次の通りです：
contentAttributeValueがnullでない場合：
parsedValueを、整数パース規則を、反映されたIDL属性が非負数のみ許可でない場合はcontentAttributeValueに、そうであれば非負整数パース規則でcontentAttributeValueに適用した結果とする。
parsedValueがエラーでなく、longの範囲内なら、parsedValueを返す。
反映されたIDL属性が既定値を持つ場合、defaultValueを返す。
反映されたIDL属性が非負数のみ許可の場合、−1を返す。
0を返す。
setter手順は次の通りです：
反映されたIDL属性が非負数のみ許可であり、与えられた値が負の場合、"IndexSizeError" DOMExceptionを投げる。
もし反映されたIDL属性の型がunsigned longであり、オプションで正数のみ許可、正数のみ許可（フォールバック付き）、または範囲でクランプ[clampedMin, clampedMax]、さらにオプションで既定値defaultValueが指定されている場合：
getter手順は次の通りです：
minimumを0とする。
反映されたIDL属性が正数のみ許可または正数のみ許可（フォールバック付き）の場合、minimumを1にする。
反映されたIDL属性が範囲でクランプの場合、minimumをclampedMinにする。
maximumを、反映されたIDL属性が範囲でクランプでなければ2147483647、そうであればclampedMaxとする。
contentAttributeValueがnullでない場合：
parsedValueを、非負整数パース規則をcontentAttributeValueに適用した結果とする。
parsedValueがエラーでなく、範囲minimum～maximum（含む）ならparsedValueを返す。
parsedValueがエラーでなく、反映されたIDL属性が範囲でクランプの場合：
parsedValueがminimumより小さければminimumを返す。
maximumを返す。
反映されたIDL属性が既定値を持つ場合、defaultValueを返す。
minimumを返す。
setter手順は次の通りです：
反映されたIDL属性が正数のみ許可であり、与えられた値が0の場合、"IndexSizeError" DOMExceptionを投げる。
minimumを0とする。
反映されたIDL属性が正数のみ許可または正数のみ許可（フォールバック付き）の場合、minimumを1にする。
newValueをminimumとする。
反映されたIDL属性が既定値を持つ場合、newValueをdefaultValueにする。
与えられた値が範囲minimum～2147483647（含む）内なら、newValueにその値を設定する。
範囲でクランプはsetter手順には影響しません。
もし反映されたIDL属性の型がdoubleであり、オプションで正数のみ許可、さらにオプションで既定値defaultValueが指定されている場合：
getter手順は次の通りです：
contentAttributeValueがnullでない場合：
parsedValueを、浮動小数点数パース規則をcontentAttributeValueに適用した結果とする。
parsedValueがエラーでなく、0より大きければparsedValueを返す。
parsedValueがエラーでなく、反映されたIDL属性が正数のみ許可でなければparsedValueを返す。
反映されたIDL属性が既定値を持つ場合、defaultValueを返す。
0を返す。
setter手順は次の通りです：
反映されたIDL属性が正数のみ許可であり、与えられた値が0以下なら何もしない（return）。
thisの内容属性を設定するを、与えられた値を最良の浮動小数点数表現に変換して実行する。
Infinity値やNaN値の設定時は、Web IDLで定義されているように例外が投げられます。[WEBIDL]
もし反映されたIDL属性の型が
DOMTokenList
である場合、
ゲッターの手順は、関連付けられた要素が
this であり、関連付けられた属性のローカル名が 反映された内容属性名 である
DOMTokenList
オブジェクトを返すことである。仕様策定者は、この型のIDL属性を
ElementInternals
に反映することはできない。
もし反映されたIDL属性の型が
T?
であり、Tが Element
または
Element
から継承されるインターフェースの場合、attrを 反映された内容属性名 とすると：
その 反映されたターゲット は 明示的に設定された attr-要素 を持ち、これは要素への弱参照または null である。初期値は null である。
その 反映されたターゲット reflectedTarget は attrに関連付けられた要素を取得するアルゴリズムを持ち、以下の手順を実行する：
element を reflectedTarget の 要素を取得する の実行結果とする。
contentAttributeValue を reflectedTarget の 内容属性を取得する の実行結果とする。
もし reflectedTarget の 明示的に設定された attr-要素 が null でない場合：
もし reflectedTarget の 明示的に設定された attr-要素 が descendant（子孫）であり、 element の shadow-including ancestors（シャドウを含む祖先） のいずれかの子孫である場合は、 reflectedTarget の 明示的に設定された attr-要素 を返す。
null を返す。
それ以外の場合、contentAttributeValue が null でなければ、以下の条件を満たす最初の要素 candidate を ツリー順で返す：
candidate の ID が contentAttributeValue であること；および
candidate が implements Tであること。
そのような要素が存在しない場合は、null を返す。
null を返す。
ゲッターの手順は、this の attrに関連付けられた要素を取得する の 実行結果を返すことである。
セッターの手順は以下の通り：
与えられた値が null の場合：
this の 明示的に設定された attr-要素 を null に設定する。
終了する。
this の 明示的に設定された attr-要素 を与えられた値への弱参照に設定する。
要素反映されたターゲットのみ：以下の 属性変更手順は、 element、localName、oldValue、value、および namespace を受け取り、内容属性とIDL属性の同期に使用される：
もし localName が attr でない、または namespace が null でない場合は 終了する。
element の 明示的に設定された attr-要素 を null に設定する。
この型の反映されたIDL属性は、一貫性のために識別子の末尾を
"Element" にすることが強く推奨される。
もし反映されたIDL属性の型が
FrozenArray<T>? であり、T が
Element
または
Element
から継承されるインターフェースの場合、attrを 反映された内容属性名 とすると：
その 反映されたターゲット は 明示的に設定された attr-要素群 を持ち、これは要素への弱参照のリストまたは null である。初期値は null。
その 反映されたターゲット は キャッシュされた attr関連付け要素を持ち、これはリストである。初期値は « »。
その 反映されたターゲット は キャッシュされた attr関連付け要素オブジェクトを持ち、これは
FrozenArray<T>? である。初期値は null。
その 反映されたターゲット reflectedTarget は attr関連付け要素群を取得するアルゴリズムを持ち、次の手順を実行する：
elements を空のリストとする。
element を reflectedTarget の 要素を取得する の結果とする。
もし reflectedTarget の 明示的に設定された attr-要素群 が null でなければ：
各 attrElement について reflectedTarget の 明示的に設定された attr-要素群内で：
もし attrElement が descendant（子孫）でなく、 element の shadow-including ancestors（シャドウを含む祖先） のいずれかの子孫でなければ continue（次へ）。
append（追加） attrElement を elements に追加する。
それ以外の場合：
contentAttributeValue を reflectedTarget の 内容属性を取得する の結果とする。
contentAttributeValue が null なら、null を返す。
tokens を contentAttributeValue を ASCII空白文字で分割したものとする。
各 id について tokens 内で：
以下の条件を満たす最初の要素 candidate を ツリー順で取得する：
candidate の ID が id であること； および
candidate が implements Tであること。
そのような要素が存在しない場合は、continue（次へ）。
append（追加） candidate を elements に追加する。
elements を返す。
ゲッターの手順：
elements を this の attr関連付け要素群を取得する の 実行結果とする。
elements の内容が this の キャッシュされた attr関連付け要素 と等しければ、 this の キャッシュされた attr関連付け要素オブジェクト を返す。
elementsAsFrozenArray を elements を 変換した FrozenArray<T>? とする。
this の キャッシュされた attr関連付け要素 を elements に設定する。
this の キャッシュされた attr関連付け要素オブジェクト を elementsAsFrozenArray に設定する。
elementsAsFrozenArray を返す。
この追加のキャッシュ層は
element.reflectedElements === element.reflectedElements
という不変条件を維持するために必要である。
セッターの手順：
与えられた値が null の場合：
this の 明示的に設定された attr-要素群 を null に設定する。
終了する。
elements を空のリストとする。
各 element について与えられた値内で：
append（追加） element への弱参照を elements に追加する。
this の 明示的に設定された attr-要素群 を elements に設定する。
要素反映されたターゲットのみ：以下の 属性変更手順は、 element、localName、oldValue、value、および namespace を受け取り、内容属性とIDL属性の同期に使用される：
もし localName が attr でない、または namespace が null でない場合は 終了する。
element の 明示的に設定された attr-要素群 を null に設定する。
この型の反映されたIDL属性は、一貫性のために識別子の末尾を
"Elements" にすることが強く推奨される。
反映は、拡張属性を通じてIDLから利用できます。[Reflect]、[ReflectSetter]、[ReflectURL]、
[ReflectNonNegative]、[ReflectPositive]、および
[ReflectPositiveWithFallback]はすべて反映を引き起こします。これらは引数を取らないか、文字列を取る必要があり、インターフェースメンバー属性以外には現れてはならず、同時に使用できるのは1つだけです。
これらの主要な反映用拡張属性のいずれかについては、反映される内容属性名は、引数が指定されていればその文字列値、指定がなければIDL属性名をASCII小文字へ変換したものになります。
[Reflect] 拡張属性を持つIDL属性は、反映し、[Reflect]の
反映される内容属性名を反映する必要があります。
[ReflectSetter]
拡張属性を持つIDL属性は、設定時に反映し、
[ReflectSetter]の
反映される内容属性名を反映する必要があります。
[ReflectURL]
拡張属性は、型がUSVStringである属性にのみ現れる必要があります。
[ReflectURL]
拡張属性を持つIDL属性は、反映し、URLとして扱われるとして、[ReflectURL]の
反映される内容属性名を反映する必要があります。
[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はリストの1つ目、clampedMaxは2つ目の値です。[ReflectRange]に指定された引数によります。
[ReflectDefault]
拡張属性は、型がdouble、
long、
またはunsigned longである属性にのみ使用される必要があります。
double型属性の場合は小数を、その他の場合は整数を取る必要があります。さらに、[Reflect]、[ReflectNonNegative]、
[ReflectPositive]、
または[ReflectPositiveWithFallback]と共に現れる必要があります。
[ReflectDefault]
拡張属性を持つIDL属性は、既定値を[ReflectDefault]に指定された引数で提供します。
リフレクションは主に、反映されたIDL属性を通じてコンテンツ属性への型付きアクセスを提供することで、ウェブ開発者の利便性を向上させることを目的としています。ウェブプラットフォームが基づいている最終的な信頼性の源は、コンテンツ属性そのものです。つまり、仕様の著者は、反映されたIDL属性のゲッターやセッターのステップを使用するのではなく、コンテンツ属性の存在と値を使用しなければなりません。（または、列挙された属性の状態など、上にある抽象化されたものを使用します。）
このルールには、次のような型を持つ反映されたIDL属性に関して重要な例外が2つあります:
これらの場合、仕様の著者は反映ターゲットのattr-関連要素を取得するおよびattr-関連要素を取得するをそれぞれ使用しなければなりません。コンテンツ属性の存在と値は使用してはならず、それらは反映されたIDL属性と完全には同期できません。
反映ターゲットの明示的に設定されたattr-要素、明示的に設定されたattr-要素、キャッシュされたattr-関連要素、およびキャッシュされたattr-関連要素オブジェクトは内部実装の詳細として扱われ、使用されるべきではありません。
HTMLFormControlsCollection
およびHTMLOptionsCollection
インターフェースは、コレクションであり、HTMLCollection
インターフェースから派生しています。HTMLAllCollection
インターフェースはコレクションですが、派生はしていません。
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属性の非空の値、およびすべてのコレクションによって表されるname属性の非空の値が含まれます。これらは"all"-named要素に含まれるものであり、ツリー順に従い、後続の重複を無視し、要素が両方を提供する場合、idがnameよりも優先されます。
lengthゲッターステップは、コレクションによって表されるノードの数を返すことです。
インデックス付きプロパティゲッターは、渡されたインデックスを考慮して、"all"-indexed要素を取得する結果を返す必要があります。
namedItem(name)メソッドステップは、渡されたnameを考慮して、"all"-named要素を取得する結果を返すことです。
item(nameOrIndex)メソッドステップは次のとおりです:
nameOrIndexが提供されていない場合は、nullを返します。
渡されたnameOrIndexを考慮して、"all"-indexedまたはnamed要素を取得する結果を返します。
以下の要素は"all"-named要素です:
a,
button,
embed,
form,
frame,
frameset,
iframe,
img,
input,
map,
meta,
object,
select,
および
textarea
"all"-indexed要素を取得するために、
HTMLAllCollection
collectionからインデックスindexを与えられた場合、collection内のindex番目の要素を返すか、そのようなindex番目の要素が存在しない場合はnullを返します。
"all"-named要素を取得するために、
HTMLAllCollection
collectionからnameを与えられた場合、次の手順を実行します:
nameが空文字列の場合、nullを返します。
subCollectionを、同じDocumentにルートを持つHTMLCollection
オブジェクトとし、そのフィルタが次のいずれかにのみ一致するものとします:
"all"-named要素のname属性がnameと等しいもの、または
ID がnameと等しいもの。
subCollectionに正確に1つの要素が含まれている場合、その要素を返します。
それ以外の場合、subCollectionが空である場合はnullを返します。
それ以外の場合、subCollectionを返します。
"all"-indexedまたはnamed要素を取得するために、
HTMLAllCollection
collectionからnameOrIndexを与えられた場合、次の手順を実行します:
JavaScriptの文字列値に変換されたnameOrIndexが配列インデックスプロパティ名である場合、渡されたnameOrIndexによって表される数値を考慮して、"all"-indexed要素を取得する結果を返します。
渡されたnameOrIndexを考慮して、"all"-named要素を取得する結果を返します。
もしargumentsListのサイズがゼロであるか、argumentsList[0]がundefinedである場合、nullを返します。
resultを、"all"-インデックスまたは名前付き要素を取得する
このHTMLAllCollectionから
nameOrIndexを与えられたものとします。
resultをECMAScript値に変換する結果を返します。
thisArgumentは無視されるため、Function.prototype.call.call(document.all, null, "x")のようなコードでも要素の検索を行います。（document.all.callは存在しません。なぜならdocument.allはFunction.prototypeを継承していないためです。）
HTMLFormControlsCollection
インターフェースHTMLFormControlsCollection
インターフェースは、form要素内のコレクションとして、リストされた要素に使用されます。
現在のすべてのエンジンでサポートされています。
現在のすべてのエンジンでサポートされています。
[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
現在のすべてのエンジンでサポートされています。
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属性の非空の値が含まれます。これらは"all"-named要素に含まれるものであり、ツリー順に従い、後続の重複を無視し、要素が両方を提供する場合、idがnameよりも優先されます。
namedItem(name)メソッドは、次のアルゴリズムに従って動作する必要があります:
id属性またはname属性を持つノードがコレクション内に1つだけある場合、そのノードを返してアルゴリズムを終了します。
id属性またはname属性を持つノードがコレクション内に存在しない場合、nullを返してアルゴリズムを終了します。
RadioNodeListオブジェクトを作成し、それはHTMLFormControlsCollectionオブジェクトのライブビューを表し、さらにフィルタリングしてnameに等しいid属性またはname属性を持つノードのみが含まれるようにします。RadioNodeListオブジェクト内のノードはツリー順に並べ替えられる必要があります。
RadioNodeListオブジェクトを返します。
RadioNodeListインターフェースのメンバーは、NodeListオブジェクトでの動作と同じように振る舞う必要があります。
現在のすべてのエンジンでサポートされています。
value
IDL属性は、RadioNodeListオブジェクト上で、取得時には次の手順を実行した結果の値を返す必要があります。
elementを、ツリー順で最初にRadioNodeListオブジェクトによって表される、input要素で、そのtype属性がRadio
Button状態であり、チェックされているのがtrueであるものとします。そうでない場合はnullとします。
elementがnullである場合、空文字列を返します。
elementがvalue属性を持たない要素である場合、文字列「on」を返します。
それ以外の場合は、elementのvalue属性の値を返します。
設定時には、valueIDL属性は次の手順を実行する必要があります。
新しい値が文字列「on」である場合、elementを、次の手順に従ってRadioNodeListオブジェクトによって表される最初の要素とします。ツリー順で、input要素であり、そのtype属性がRadio
Button状態であり、そのvalueコンテンツ属性が存在しないか、存在し、新しい値と等しい場合とします。そのような要素が存在しない場合は、代わりにelementをnullとします。
それ以外の場合、elementを、ツリー順で最初の要素とします。RadioNodeListオブジェクトによって表される、input要素で、そのtype属性がRadio
Button状態であり、そのvalueコンテンツ属性が存在し、新しい値と等しい場合とします。そのような要素が存在しない場合は、代わりにelementをnullとします。
もしelementがnullでない場合、そのチェックされている状態をtrueに設定します。
HTMLOptionsCollection
インターフェースすべてのエンジンでサポートされています。
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 に設定すると、collection からインデックス index の項目を削除します。
オプション要素が設定されている場合、collection 内のインデックス index にその要素を追加または置き換えます。
element = collection.namedItem(name)
element = collection[name]
collection から、ID または name が
name に一致するアイテムを返します。
複数の一致するアイテムがある場合、最初のものが返されます。
collection.add(element[, before])
element を before で指定されたノードの前に挿入します。
before 引数は数値でもかまいません。その場合、element はその番号のアイテムの前に挿入されます。collection の要素である場合、その要素の前に element を挿入します。
before が省略された場合、null または範囲外の数値の場合、element はリストの最後に追加されます。
element が挿入される要素の祖先である場合、"HierarchyRequestError" DOMException
がスローされます。
collection.remove(index)
collection からインデックス index の項目を削除します。
collection.selectedIndex
最初の選択項目のインデックスを返します。選択項目がない場合は -1 を返します。
collection.selectedIndex = index
collection 内のインデックス index の option
要素に選択を変更します。
対応するプロパティ インデックスは、HTMLCollection
オブジェクトで定義されています。
length のゲッターは、コレクションが表すノードの数を返します。
length
のセッターは次の手順に従います。
現在のノードの数を represented by the collection として取得します。
指定された値が current より大きい場合、次の操作を行います。
指定された値が current より小さい場合、次の操作を行います。
n を current - value として取得します。
コレクションの最後の n ノードをその親ノードから削除します。
length
を設定しても、optgroup
要素が削除または追加されることはなく、既存の optgroup
要素に新しい子が追加されることもありません（ただし、既存の子が削除されることはあります）。
対応するプロパティ名には、コレクションが表すすべての要素の id および name
属性の空でない値が含まれます。これらは ツリー順
で並び替えられ、後の重複を無視します。要素が両方の値を持ち、それらが異なり、どちらも以前のエントリの重複でない場合、要素の id が name
よりも先に来ます。
ユーザー エージェントが 新しいインデックス付きプロパティの値を設定する または 既存のインデックス付きプロパティの値を設定する 際には、次のアルゴリズムを実行する必要があります。
value が null の場合、remove
メソッドの手順を index を引数として呼び出し、終了します。
length を コレクションが表すノード の数として取得します。
n を index - length として取得します。
n がゼロより大きい場合、新しい属性や子ノードのない option
要素が含まれる DocumentFragment
を select
要素に追加します。
n がゼロ以上の場合、value を select
要素に追加します。それ以外の場合、コレクション内の index 番目の要素を value に置き換えます。
add(element, before)
メソッドは、次のアルゴリズムに従って動作する必要があります。
element が select
要素の祖先である場合、HTMLOptionsCollection
にルートされている場合、"HierarchyRequestError" DOMException
をスローします。
before が要素であり、その要素が select
要素の子孫でない場合、HTMLOptionsCollection
にルートされている場合、"NotFoundError" DOMException
をスローします。
element と before が同じ要素である場合、何も返さず終了します。
before がノードである場合、そのノードを reference とします。そうでない場合、before が整数であり、コレクション内に before 番目のノードが存在する場合、そのノードを reference とします。それ以外の場合は、reference を null とします。
reference が null でない場合、reference の親ノードを parent
とします。それ以外の場合、parent を select
要素とします。HTMLOptionsCollection
にルートされている要素を親ノードとします。
Pre-insert element を parent ノードに reference の前に挿入します。
remove(index) メソッドは、次のアルゴリズムに従って動作する必要があります。
コレクションが表すノードの数がゼロの場合、何も返さず終了します。
index が 0 以上の数値でなく、かつコレクションが表すノードの数より小さい場合、何も返さず終了します。
element をコレクション内の index 番目の要素とします。
element をその親ノードから削除します。
selectedIndex IDL 属性は、select
要素の同名の属性と同様に動作する必要があります。HTMLOptionsCollection
にルートされています。
DOMStringList
インターフェースすべての現行エンジンでサポートされています。
DOMStringList
インターフェースは、文字列のリストを表す非モダンなレトロな方法です。
[Exposed =(Window ,Worker )]
interface DOMStringList {
readonly attribute unsigned long length ;
getter DOMString ? item (unsigned long index );
boolean contains (DOMString string );
};新しいAPIはsequence<DOMString>または
これに相当するものを使用し、DOMStringListを使用してはなりません。
strings.length
strings 内の文字列の数を返す。
strings[index]strings.item(index)
strings からインデックス index の文字列を返す。
strings.contains(string)
strings が string を含む場合は true、そうでなければ false を返す。
各 DOMStringList
オブジェクトは、関連付けられた リスト を持つ。
DOMStringList
インターフェイスは インデックス付きプロパティをサポートする。
対応プロパティインデックスは、この関連リストのインデックスである。
すべての現行エンジンでサポートされています。
すべての現行エンジンでサポートされています。
すべての現行エンジンでサポートされています。
contains(string) メソッドの手順は、
この関連リストが string を含む場合は true
を返し、そうでなければ false を返すことである。
JavaScriptオブジェクトを含む、
プラットフォームオブジェクト
を異なるレルム
の間で受け渡すことをサポートするために、この仕様はオブジェクトのシリアル化とデシリアル化のためのインフラストラクチャを定義しています。場合によってはデータのコピーではなく、基になるデータの転送が行われることもあります。このシリアル化/デシリアル化プロセスは「構造化複製」として総称されますが、ほとんどのAPIは別々のシリアル化とデシリアル化のステップを実行します。（例外として、structuredClone()
メソッドがあります。）
このセクションでは、JavaScript仕様の用語とタイポグラフィの慣例を使用します。[JAVASCRIPT]
/developer.mozilla.org/en-US/docs/Glossary/Serializable_object
/developer.mozilla.org/en-US/docs/Glossary/Serializable_object
/developer.mozilla.org/en-US/docs/Glossary/Serializable_object
/developer.mozilla.org/en-US/docs/Glossary/Serializable_object
シリアル化可能なオブジェクト はシリアル化され、後でデシリアル化されることができます。これは、特定の レルムに依存しません。これにより、ディスクに保存され 後で復元されたり、エージェント間や エージェントクラスタ を越えてクローンを作成することができます。
すべてのオブジェクトがシリアル化可能オブジェクト であるわけではなく、すべての シリアル化可能オブジェクト の側面が必ずしもシリアル化されるとは限りません。
プラットフォームオブジェクト
は、その主要インターフェースが
[Serializable]
IDL拡張属性で装飾されている場合、シリアル化可能なオブジェクトとなることができます。このようなインターフェースは、以下のアルゴリズムを定義する必要があります。
valueのデータをserializedのフィールドにシリアル化する手順です。serializedにシリアル化されたデータは、どの レルム にも依存しないものでなければなりません。
シリアル化が不可能な場合、これらの手順は例外をスローすることがあります。
これらの手順は、ネストされたデータ構造をシリアル化するために サブシリアル化 を実行することがあります。StructuredSerialize を直接呼び出すべきではありません。そうすると、重要なmemory引数が省略されるためです。
これらの手順の導入において、アルゴリズムに関連しない場合は forStorage引数に言及することを省略する必要があります。
serializedのデータをデシリアル化し、それを使用して valueを適切に設定する一連の手順です。valueは、内部データが設定されていない新しく作成された プラットフォームオブジェクトのインスタンスになります。 それを設定するのはこれらの手順の役割です。
デシリアル化が不可能な場合、これらの手順は例外をスローすることがあります。
これらの手順は、ネストされたデータ構造をデシリアル化するために サブデシリアル化 を実行することがあります。StructuredDeserialize を直接呼び出すべきではありません。そうすると、重要なtargetRealmおよびmemory引数が省略されるためです。
各プラットフォームオブジェクトの定義により、これらの手順でシリアル化およびデシリアル化されるデータが決定されます。通常、これらの手順は非常に対称的です。
[Serializable]拡張属性は、
引数を取るべきではなく、インターフェースにのみ表示される必要があります。また、インターフェースに複数回表示されるべきではありません。
特定のプラットフォームオブジェクトに対しては、
そのオブジェクトの主要なインターフェースのみが
（デ）シリアル化プロセス中に考慮されます。したがって、インターフェースの定義に継承が含まれる場合、
継承チェーン内の各[Serializable]
で注釈されたインターフェースは、独立したシリアル化手順
およびデシリアル化手順を定義し、
継承されたインターフェースから生じる可能性のある重要なデータを考慮に入れる必要があります。
たとえば、プラットフォームオブジェクトPersonを定義しているとし、
それに関連する2つのデータがあります：
名前の値で、これは文字列です。
親友の値で、これは他のPersonインスタンスかnullです。
その後、Personインスタンスをシリアル化可能オブジェクト
にすることができ、Personインターフェースに[Serializable]
拡張属性で注釈し、次の付随するアルゴリズムを定義することで実現できます：
JavaScript仕様で定義されているオブジェクトは、 StructuredSerialize 抽象操作によって直接処理されます。
元々、この仕様では、あるレルムから別のレルムに複製できる「複製可能オブジェクト」の概念が定義されていました。しかし、より複雑な状況での動作を明確に指定するために、モデルが更新され、シリアル化とデシリアル化が明示的に行われるようになりました。
転送可能なオブジェクト は、エージェント間で転送されることをサポートします。転送は、基になるデータへの参照を共有しながらオブジェクトを再作成し、その後転送されるオブジェクトをデタッチすることを実質的に意味します。これは高価なリソースの所有権を移転するのに役立ちます。すべてのオブジェクトが転送可能なオブジェクトであるわけではなく、転送可能なオブジェクトであっても、そのすべての側面が転送時に必ずしも保存されるわけではありません。
転送は不可逆かつ冪等ではない操作です。いったんオブジェクトが転送されると、それは再び転送されたり、使用されたりすることはできません。
プラットフォームオブジェクトは、転送可能なオブジェクトになることができます。その主要インターフェースが、[Transferable]IDL拡張属性で装飾されている場合、そのようなインターフェースは以下のアルゴリズムも定義する必要があります。
valueのデータをdataHolderのフィールドに転送する一連の手順です。dataHolderに保持される結果のデータは、任意のレルムに依存しないものでなければなりません。
これらの手順は、転送が不可能な場合に例外をスローすることがあります。
dataHolderのデータを受信し、それを使用してvalueを適切に設定する一連の手順です。valueは、質問中のプラットフォームオブジェクト型の新しく作成されたインスタンスであり、内部データは設定されていません。これを設定するのがこれらの手順の役割です。
受信が不可能な場合、これらの手順は例外をスローすることがあります。
各プラットフォームオブジェクトの定義により、これらの手順でどのデータが転送されるかが決定されます。通常、これらの手順は非常に対称的です。
[Transferable]拡張属性は、
引数を取るべきではなく、インターフェースにのみ表示される必要があります。また、インターフェースに複数回表示されるべきではありません。
特定のプラットフォームオブジェクトに対しては、そのオブジェクトの主要インターフェースのみが転送プロセス中に考慮されます。したがって、インターフェースの定義に継承が含まれる場合、継承チェーン内の各[Transferable]で注釈されたインターフェースは、独立した転送手順および転送受信手順
を定義し、継承されたインターフェースから生じる可能性のある重要なデータを考慮に入れる必要があります。
プラットフォームオブジェクトで、転送可能なオブジェクトは、[[Detached]]内部スロットを持ちます。これにより、いったんプラットフォームオブジェクトが転送されると、それを再度転送することはできなくなります。
JavaScript仕様で定義されているオブジェクトは、StructuredSerializeWithTransfer抽象操作によって直接処理されます。
StructuredSerializeInternal抽象操作は、JavaScriptの値valueを入力として受け取り、それをレルムレルムに依存しない形にシリアル化し、ここではレコードとして表現されます。このシリアル化された形式には、後で異なるレルムで新しいJavaScriptの値にデシリアル化するために必要な情報がすべて含まれています。
このプロセスは、たとえばシリアル化できないオブジェクトをシリアル化しようとすると例外をスローすることがあります。
memoryが提供されていない場合、memoryを空のマップとします。
memoryマップの目的は、オブジェクトを2回シリアル化しないようにすることです。これにより、サイクルとグラフ内の重複するオブジェクトの同一性が保持されます。
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]]内部スロットを持っている場合：
もしIsSharedArrayBuffer(value)がtrueである場合：
もし現在の設定オブジェクトのクロスオリジン隔離能力がfalseである場合、"DataCloneError" DOMExceptionをスローします。
このチェックは、SharedArrayBufferがエージェントクラスターagent
clusterを離れることができないため、シリアル化時（デシリアル化時ではない）にのみ必要です。
もしforStorageがtrueである場合、"DataCloneError" DOMExceptionをスローします。
もしvalueが[[ArrayBufferMaxByteLength]]内部スロットを持っている場合、serializedを{ [[Type]]: "GrowableSharedArrayBuffer", [[ArrayBufferData]]: value.[[ArrayBufferData]], [[ArrayBufferByteLengthData]]: value.[[ArrayBufferByteLengthData]], [[ArrayBufferMaxByteLength]]: value.[[ArrayBufferMaxByteLength]], [[AgentCluster]]: 周囲のエージェントのエージェントクラスター }に設定します。
それ以外の場合、serializedを{ [[Type]]: "SharedArrayBuffer", [[ArrayBufferData]]: value.[[ArrayBufferData]], [[ArrayBufferByteLength]]: value.[[ArrayBufferByteLength]], [[AgentCluster]]: 周囲のエージェントのエージェントクラスター }に設定します。
それ以外の場合：
もしIsDetachedBuffer(value)がtrueである場合、"DataCloneError" DOMExceptionをスローします。
sizeをvalue.[[ArrayBufferByteLength]]に設定します。
dataCopyを?CreateByteDataBlock(size)に設定します。
これは、割り当てに失敗した場合にRangeError例外をスローする可能性があります。
実行するCopyDataBlockBytes(dataCopy, 0, value.[[ArrayBufferData]], 0, size)。
もしvalueが[[ArrayBufferMaxByteLength]]内部スロットを持っている場合、serializedを{ [[Type]]: "ResizableArrayBuffer", [[ArrayBufferData]]: dataCopy, [[ArrayBufferByteLength]]: size, [[ArrayBufferMaxByteLength]]: value.[[ArrayBufferMaxByteLength]] }に設定します。
それ以外の場合、serializedを{ [[Type]]: "ArrayBuffer", [[ArrayBufferData]]: dataCopy, [[ArrayBufferByteLength]]: size }に設定します。
それ以外の場合、valueが[[ViewedArrayBuffer]]内部スロットを持っている場合：
もしIsArrayBufferViewOutOfBounds(value)
がtrueである場合、"DataCloneError" DOMExceptionをスローします。
bufferをvalueの[[ViewedArrayBuffer]]内部スロットの値に設定します。
bufferSerializedを？StructuredSerializeInternal(buffer, forStorage, memory)に設定します。
Assert: bufferSerialized.[[Type]]が"ArrayBuffer", "ResizableArrayBuffer", "SharedArrayBuffer", または "GrowableSharedArrayBuffer"であることを確認します。
もしvalueが[[DataView]]内部スロットを持っている場合、serializedを{ [[Type]]: "ArrayBufferView", [[Constructor]]: "DataView", [[ArrayBufferSerialized]]: bufferSerialized, [[ByteLength]]: value.[[ByteLength]], [[ByteOffset]]: value.[[ByteOffset]] }に設定します。
それ以外の場合：
Assert: valueが[[TypedArrayName]] 内部スロットを持っていることを確認します。
serializedを{ [[Type]]: "ArrayBufferView", [[Constructor]]: value.[[TypedArrayName]], [[ArrayBufferSerialized]]: bufferSerialized, [[ByteLength]]: value.[[ByteLength]], [[ByteOffset]]: value.[[ByteOffset]], [[ArrayLength]]: value.[[ArrayLength]] }に設定します。
それ以外の場合、valueが[[MapData]]内部スロットを持っている場合：
serializedを{ [[Type]]: "Map", [[MapData]]: 新しい空のリスト }に設定します。
deepをtrueに設定します。
それ以外の場合、valueが[[SetData]]内部スロットを持っている場合：
serializedを{ [[Type]]: "Set", [[SetData]]: 新しい空のリスト }に設定します。
deepをtrueに設定します。
それ以外の場合、valueが[[ErrorData]]内部スロットを持ち、valueがプラットフォームオブジェクトでない場合：
nameを？Get(value, "name")に設定します。
もしnameが"Error", "EvalError", "RangeError", "ReferenceError", "SyntaxError", "TypeError", または"URIError"のいずれでもない場合、nameを"Error"に設定します。
valueMessageDescを？value.[[GetOwnProperty]]("message")に設定します。
もしIsDataDescriptor(valueMessageDesc) がfalseである場合、messageをundefinedに設定し、そうでない場合は？ToString(valueMessageDesc.[[Value]])に設定します。
serializedを{ [[Type]]: "Error", [[Name]]: name, [[Message]]: message }に設定します。
ユーザーエージェントは、stackプロパティなどのまだ指定されていない興味深い付随データのシリアル化された表現をserializedに添付するべきです。
このデータの指定に関する進行中の作業については、Error Stacks提案を参照してください。[JSERRORSTACKS]
それ以外の場合、valueが配列の異常オブジェクトである場合：
valueLenDescriptorを？OrdinaryGetOwnProperty(value,
"length")に設定します。
valueLenをvalueLenDescriptor.[[Value]]に設定します。
serializedを{ [[Type]]: "Array", [[Length]]: valueLen, [[Properties]]: 新しい空のリスト }に設定します。
deepをtrueに設定します。
それ以外の場合、valueがプラットフォームオブジェクトであり、それがシリアル化可能オブジェクトである場合：
もしvalueが[[Detached]]内部スロットを持ち、その値がtrueである場合、"DataCloneError" DOMExceptionをスローします。
typeStringをvalueの主要なインターフェースの識別子に設定します。
serializedを{ [[Type]]: typeString }に設定します。
deepをtrueに設定します。
それ以外の場合、valueがプラットフォームオブジェクトである場合、"DataCloneError" DOMExceptionをスローします。
それ以外の場合、もしIsCallable(value)がtrueである場合、"DataCloneError" DOMExceptionをスローします。
それ以外の場合、もしvalueが[[Prototype]],
[[Extensible]], または[[PrivateElements]]以外の内部スロットを持っている場合、"DataCloneError"
DOMExceptionをスローします。
たとえば、[[PromiseState]]や[[WeakMapData]]内部スロット。
それ以外の場合、valueが異常なオブジェクトであり、valueが任意の%Object.prototype%に関連付けられた固有のオブジェクトでない場合、
"DataCloneError" DOMExceptionをスローします。
たとえば、プロキシオブジェクト。
それ以外の場合：
serializedを{ [[Type]]: "Object", [[Properties]]: 新しい空のリスト }に設定します。
deepをtrueに設定します。
%Object.prototype%はこのステップとその後のステップによって処理されます。最終的な結果として、その異常性は無視され、デシリアル化後は空のオブジェクト（不変プロトタイプの異常オブジェクトではない）となります。
Set memory[value]を serializedに設定します。
もしdeepがtrueである場合：
もしvalueが[[MapData]]内部スロットを持っている場合：
copiedListを新しい空のリストに設定します。
各 レコード { [[Key]], [[Value]] } entryをvalue.[[MapData]]から実行します：
copiedEntryを新しいレコード { [[Key]]: entry.[[Key]], [[Value]]: entry.[[Value]] }に設定します。
もしcopiedEntry.[[Key]]が特別な値emptyでない場合、copiedEntryをcopiedListに追加します。
各 レコード { [[Key]], [[Value]] } entryをcopiedListから実行します：
serializedKeyを？StructuredSerializeInternal(entry.[[Key]], forStorage, memory)に設定します。
serializedValueを？StructuredSerializeInternal(entry.[[Value]], forStorage, memory)に設定します。
追加します { [[Key]]: serializedKey, [[Value]]: serializedValue }をserialized.[[MapData]]に。
それ以外の場合、valueが[[SetData]]内部スロットを持っている場合：
それ以外の場合、valueがプラットフォームオブジェクトであり、シリアル化可能オブジェクトである場合、valueのシリアル化手順をvalueの主要なインターフェースに基づいて実行し、serializedおよびforStorageを考慮して実行します。
シリアル化手順ではサブシリアル化を行う必要がある場合があります。これは、値subValueを入力として受け取り、StructuredSerializeInternal(subValue, forStorage, memory)を返す操作です。（言い換えれば、サブシリアル化は、この呼び出し内で一貫性を持たせるためにStructuredSerializeInternalを特化したものです。）
それ以外の場合、!EnumerableOwnProperties(value, key)内の各keyについて：
もし!HasOwnProperty(value, key) がtrueである場合：
inputValueを？value.[[Get]](key, value)に設定します。
outputValueを？StructuredSerializeInternal(inputValue, forStorage, memory)に設定します。
追加します { [[Key]]: key, [[Value]]: outputValue }をserialized.[[Properties]]に。
serializedを返します。
RecordはStructuredSerializeInternalによって生成される際に、他のレコードへの「ポインタ」を含み、循環参照を作成する可能性があることを理解することが重要です。例えば、次のJavaScriptオブジェクトをStructuredSerializeInternalに渡すとき:
const o = {};
o. myself = o; 次の結果が生成されます：
{
[[Type]]: "Object",
[[Properties]]: «
{
[[Key]]: "myself",
[[Value]]: <a pointer to this whole structure>
}
»
}
?StructuredSerializeInternal(value, false)を返します。
? StructuredSerializeInternal(value, true)を返します。
構造化デシリアライズ抽象操作は、レコードserializedを入力として受け取り、これが以前にStructuredSerializeまたはStructuredSerializeForStorageによって生成されたものであれば、それをtargetRealmに作成された新しいJavaScript値にデシリアライズします。
このプロセスは、特にArrayBufferオブジェクトのような新しいオブジェクトのメモリを確保しようとしたときに、例外をスローする可能性があります。
もしmemoryが提供されていない場合、memoryを空のマップとします。
このmemoryマップの目的は、オブジェクトを二重にデシリアライズしないようにすることです。これにより、グラフ内の重複オブジェクトの循環とアイデンティティが保持されます。
もしmemory[serialized]が存在する場合、memory[serialized]を返します。
deepをfalseに設定します。
valueを未初期化の値に設定します。
もしserialized.[[Type]]が"primitive"である場合、valueをserialized.[[Value]]に設定します。
それ以外の場合、もしserialized.[[Type]]が"Boolean"である場合、valueをtargetRealmに新たに作成されたBooleanオブジェクトに設定し、その[[BooleanData]]内部スロットの値をserialized.[[BooleanData]]に設定します。
それ以外の場合、もしserialized.[[Type]]が"Number"である場合、valueをtargetRealmに新たに作成されたNumberオブジェクトに設定し、その[[NumberData]]内部スロットの値をserialized.[[NumberData]]に設定します。
それ以外の場合、もしserialized.[[Type]]が"BigInt"である場合、valueをtargetRealmに新たに作成されたBigIntオブジェクトに設定し、その[[BigIntData]]内部スロットの値をserialized.[[BigIntData]]に設定します。
それ以外の場合、もしserialized.[[Type]]が"String"である場合、valueをtargetRealmに新たに作成されたStringオブジェクトに設定し、その[[StringData]]内部スロットの値をserialized.[[StringData]]に設定します。
それ以外の場合、もしserialized.[[Type]]が"Date"である場合、valueをtargetRealmに新たに作成されたDateオブジェクトに設定し、その[[DateValue]]内部スロットの値をserialized.[[DateValue]]に設定します。
それ以外の場合、もしserialized.[[Type]]が"RegExp"である場合、valueをtargetRealmに新たに作成されたRegExpオブジェクトに設定し、その[[RegExpMatcher]]内部スロットの値をserialized.[[RegExpMatcher]]に、[[OriginalSource]]内部スロットの値をserialized.[[OriginalSource]]に、[[OriginalFlags]]内部スロットの値をserialized.[[OriginalFlags]]に設定します。
それ以外の場合、もしserialized.[[Type]]が"SharedArrayBuffer"である場合：
もしtargetRealmの対応するエージェントクラスタがserialized.[[AgentCluster]]と異なる場合、"DataCloneError" DOMExceptionをスローします。
それ以外の場合、valueをtargetRealmに新たに作成されたSharedArrayBufferオブジェクトに設定し、その[[ArrayBufferData]]内部スロットの値をserialized.[[ArrayBufferData]]に、[[ArrayBufferByteLength]]内部スロットの値をserialized.[[ArrayBufferByteLength]]に設定します。
それ以外の場合、もしserialized.[[Type]]が"GrowableSharedArrayBuffer"である場合：
もしtargetRealmの対応するエージェントクラスタがserialized.[[AgentCluster]]と異なる場合、"DataCloneError" DOMExceptionをスローします。
それ以外の場合、valueをtargetRealmに新たに作成されたSharedArrayBufferオブジェクトに設定し、その[[ArrayBufferData]]内部スロットの値をserialized.[[ArrayBufferData]]に、[[ArrayBufferByteLengthData]]内部スロットの値をserialized.[[ArrayBufferByteLengthData]]に、[[ArrayBufferMaxByteLength]]内部スロットの値をserialized.[[ArrayBufferMaxByteLength]]に設定します。
それ以外の場合、もしserialized.[[Type]]が"ArrayBuffer"である場合、valueをtargetRealmに新たに作成されたArrayBufferオブジェクトに設定し、その[[ArrayBufferData]]内部スロットの値をserialized.[[ArrayBufferData]]に、[[ArrayBufferByteLength]]内部スロットの値をserialized.[[ArrayBufferByteLength]]に設定します。
これが例外をスローした場合、それをキャッチし、その後"DataCloneError" DOMExceptionをスローします。
このステップは、ArrayBufferオブジェクトを作成するためのメモリが十分に利用できない場合、例外をスローする可能性があります。
それ以外の場合、もしserialized.[[Type]]が"ResizableArrayBuffer"である場合、valueをtargetRealmに新たに作成されたArrayBufferオブジェクトに設定し、その[[ArrayBufferData]]内部スロットの値をserialized.[[ArrayBufferData]]に、[[ArrayBufferByteLength]]内部スロットの値をserialized.[[ArrayBufferByteLength]]に、[[ArrayBufferMaxByteLength]]内部スロットの値をserialized.[[ArrayBufferMaxByteLength]]に設定します。
これが例外をスローした場合、それをキャッチし、その後"DataCloneError" DOMExceptionをスローします。
このステップは、ArrayBufferオブジェクトを作成するためのメモリが十分に利用できない場合、例外をスローする可能性があります。
それ以外の場合、もしserialized.[[Type]]が"ArrayBufferView"である場合：
deserializedArrayBufferを？StructuredDeserialize(serialized.[[ArrayBufferSerialized]], targetRealm, memory)に設定します。
もしserialized.[[Constructor]]が"DataView"である場合、valueをtargetRealmに新たに作成されたDataViewオブジェクトに設定し、その[[ViewedArrayBuffer]]内部スロットの値をdeserializedArrayBufferに、[[ByteLength]]内部スロットの値をserialized.[[ByteLength]]に、[[ByteOffset]]内部スロットの値をserialized.[[ByteOffset]]に設定します。
それ以外の場合、valueをtargetRealmに新たに作成された型付き配列オブジェクトに設定し、serialized.[[Constructor]]によって指定されたコンストラクタを使用し、その[[ViewedArrayBuffer]]内部スロットの値をdeserializedArrayBufferに、[[TypedArrayName]]内部スロットの値をserialized.[[Constructor]]に、[[ByteLength]]内部スロットの値をserialized.[[ByteLength]]に、[[ByteOffset]]内部スロットの値をserialized.[[ByteOffset]]に、そして[[ArrayLength]]内部スロットの値をserialized.[[ArrayLength]]に設定します。
それ以外の場合、もしserialized.[[Type]]が"Map"である場合：
valueをtargetRealmに新たに作成されたMapオブジェクトに設定し、その[[MapData]]内部スロットの値を新しい空のリストに設定します。
deepをtrueに設定します。
それ以外の場合、もしserialized.[[Type]]が"Set"である場合：
valueをtargetRealmに新たに作成されたSetオブジェクトに設定し、その[[SetData]]内部スロットの値を新しい空のリストに設定します。
deepをtrueに設定します。
それ以外の場合、もしserialized.[[Type]]が"Array"である場合：
outputProtoをtargetRealm.[[Intrinsics]].[[%Array.prototype%]]に設定します。
valueを！ArrayCreate(serialized.[[Length]], outputProto)に設定します。
deepをtrueに設定します。
それ以外の場合、もしserialized.[[Type]]が"Object"である場合：
valueをtargetRealmに新たに作成されたオブジェクトに設定します。
deepをtrueに設定します。
それ以外の場合、もしserialized.[[Type]]が"Error"である場合：
prototypeを%Error.prototype%に設定します。
もしserialized.[[Name]]が"EvalError"である場合、prototypeを%EvalError.prototype%に設定します。
もしserialized.[[Name]]が"RangeError"である場合、prototype を%RangeError.prototype%に設定します。
もしserialized.[[Name]]が"ReferenceError"である場合、prototypeを%ReferenceError.prototype%に設定します。
もしserialized.[[Name]]が"SyntaxError"である場合、prototypeを%SyntaxError.prototype%に設定します。
もしserialized.[[Name]]が"TypeError"である場合、prototypeを%TypeError.prototype%に設定します。
もしserialized.[[Name]]が"URIError"である場合、prototypeを%URIError.prototype%に設定します。
messageをserialized.[[Message]]に設定します。
valueをOrdinaryObjectCreate(prototype, « [[ErrorData]] »)に設定します。
messageDescをPropertyDescriptor { [[Value]]: message, [[Writable]]: true, [[Enumerable]]: false, [[Configurable]]: true }に設定します。
もしmessageが未定義でない場合、！OrdinaryDefineOwnProperty(value,
"message",
messageDesc)を実行します。
serializedに添付されたすべての関連データはデシリアライズされ、valueに添付されるべきです。
それ以外の場合：
interfaceNameをserialized.[[Type]]に設定します。
もしinterfaceNameで識別されたインターフェースがtargetRealmで公開されていない場合、"DataCloneError" DOMExceptionをスローします。
valueをinterfaceNameで識別されたインターフェースの新しいインスタンスに設定し、targetRealmで作成します。
deepをtrueに設定します。
設定 memory[serialized]をvalueにします。
もしdeepがtrueである場合：
もしserialized.[[Type]]が"Map"である場合：
各 レコード { [[Key]], [[Value]] } entryについて、serialized.[[MapData]]:
deserializedKeyを？StructuredDeserialize(entry.[[Key]], targetRealm, memory)に設定します。
deserializedValueを？StructuredDeserialize(entry.[[Value]], targetRealm, memory)に設定します。
追加 { [[Key]]: deserializedKey, [[Value]]: deserializedValue }をvalue.[[MapData]]に。
それ以外の場合、もしserialized.[[Type]]が"Set"である場合：
各 entryについて、 serialized.[[SetData]]:
deserializedEntryを？StructuredDeserialize(entry, targetRealm, memory)に設定します。
追加 deserializedEntry をvalue.[[SetData]]に。
それ以外の場合、もしserialized.[[Type]]が"Array"または"Object"である場合：
各 レコード { [[Key]], [[Value]] } entryについて、serialized.[[Properties]]:
deserializedValueを？StructuredDeserialize(entry.[[Value]], targetRealm, memory)に設定します。
resultを！CreateDataProperty(value, entry.[[Key]], deserializedValue)に設定します。
アサート: resultがtrueであること。
それ以外の場合：
インターフェース識別子serialized.[[Type]]に対応するデシリアライズ手順を実行します。指定された インターフェース、serialized、value、および targetRealmに対して行います。
デシリアライズ手順 は、サブデシリアライズを実行する必要があるかもしれません。これは、入力として以前にシリアライズされたレコードsubSerializedを取り、それをStructuredDeserialize(subSerialized, targetRealm, memory)として返します。 （言い換えれば、サブデシリアライズはStructuredDeserializeの特殊化であり、 この呼び出し内で一貫して行われることを保証します。）
valueを返します。
memoryを空のマップに設定します。
通常のStructuredSerializeInternalの使用法に加えて、 このアルゴリズムでは、memoryはtransferList内のアイテムを無視し、 代わりに独自の処理を行うためにも使用されます。
各transferableに対して、 transferList内の要素について実行します：
もしtransferableが[[ArrayBufferData]]内部スロットを持たず、
[[Detached]]内部スロットも持っていない場合、
"DataCloneError" DOMExceptionをスローします。
もしtransferableが[[ArrayBufferData]]内部スロットを持ち、かつIsSharedArrayBuffer(transferable)がtrueである場合、
"DataCloneError" DOMExceptionをスローします。
もしmemory[transferable]が存在する場合、
"DataCloneError" DOMExceptionをスローします。
設定 memory[transferable]を{ [[Type]]: 未初期化の値 }にします。
transferableはまだ転送されていません。転送には副作用が伴い、StructuredSerializeInternalがまず例外をスローできるようにする必要があります。
serializedを？StructuredSerializeInternal(value, false, memory)に設定します。
transferDataHoldersを新しい空のリストに設定します。
各transferableに対して、 transferList内の要素について実行します：
もしtransferableが[[ArrayBufferData]]内部スロットを持ち、
IsDetachedBuffer(transferable)がtrueである場合、
"DataCloneError" DOMExceptionをスローします。
もしtransferableが[[Detached]]内部スロットを持ち、transferable.[[Detached]]がtrueである場合、
"DataCloneError" DOMExceptionをスローします。
dataHolderをmemory[transferable]に設定します。
もしtransferableが[[ArrayBufferData]]内部スロットを持つ場合：
もしtransferableが[[ArrayBufferMaxByteLength]]内部スロットを持つ場合：
dataHolder.[[Type]]を"ResizableArrayBuffer"に設定します。
dataHolder.[[ArrayBufferData]]をtransferable.[[ArrayBufferData]]に設定します。
dataHolder.[[ArrayBufferByteLength]]をtransferable.[[ArrayBufferByteLength]]に設定します。
dataHolder.[[ArrayBufferMaxByteLength]]をtransferable.[[ArrayBufferMaxByteLength]]に設定します。
それ以外の場合：
dataHolder.[[Type]]を"ArrayBuffer"に設定します。
dataHolder.[[ArrayBufferData]]をtransferable.[[ArrayBufferData]]に設定します。
dataHolder.[[ArrayBufferByteLength]]をtransferable.[[ArrayBufferByteLength]]に設定します。
？DetachArrayBuffer(transferable)を実行します。
仕様は[[ArrayBufferDetachKey]]内部スロットを使用してArrayBufferがデタッチされないようにすることができます。これは、例えば WebAssembly JavaScript Interfaceで使用されます。[WASMJS]
それ以外の場合：
アサート: transferableはプラットフォームオブジェクトであり、 転送可能なオブジェクトです。
interfaceNameをtransferableのプライマリインターフェース の識別子に設定します。
dataHolder.[[Type]]をinterfaceNameに設定します。
指定されたインターフェースinterfaceNameに対応する転送手順をtransferableと dataHolderを使用して実行します。
transferable.[[Detached]]をtrueに設定します。
追加 dataHolderをtransferDataHoldersに。
{ [[Serialized]]: serialized, [[TransferDataHolders]]: transferDataHolders }を返します。
memoryを空のマップに設定します。
StructuredSerializeWithTransfer と同様に、通常のStructuredDeserializeでの使用方法に加えて、 このアルゴリズムでは、memoryが serializeWithTransferResult.[[TransferDataHolders]]内の項目を無視し、 独自の処理を行うためにも使用されます。
transferredValuesを新しい空のリストに設定します。
各 transferDataHolderに対して、 serializeWithTransferResult.[[TransferDataHolders]]内の要素について実行します：
valueを未初期化の値に設定します。
もしtransferDataHolder.[[Type]]が"ArrayBuffer"である場合、 valueをtargetRealm内の新しいArrayBufferオブジェクトに設定し、 その[[ArrayBufferData]]内部スロットの値をtransferDataHolder.[[ArrayBufferData]]に、 その[[ArrayBufferByteLength]]内部スロットの値をtransferDataHolder.[[ArrayBufferByteLength]]に設定します。
[[ArrayBufferData]]がデシリアライズ中にアクセス可能な場合、元のメモリが そのまま新しいArrayBufferに移されるため、新しいメモリの割り当てが必要ないため、 このステップで例外がスローされる可能性は低いです。例えば、ソースおよびターゲットの レルムが同じプロセス内にある場合などです。
それ以外の場合、もしtransferDataHolder.[[Type]]が"ResizableArrayBuffer"である場合、 valueをtargetRealm内の新しいArrayBufferオブジェクトに設定し、 その[[ArrayBufferData]]内部スロットの値を transferDataHolder.[[ArrayBufferData]]に、 その[[ArrayBufferByteLength]]内部スロットの値を transferDataHolder.[[ArrayBufferByteLength]]に、 そして[[ArrayBufferMaxByteLength]]内部スロットの値を transferDataHolder.[[ArrayBufferMaxByteLength]]に設定します。
前述の理由と同様に、このステップでも例外がスローされる可能性は低いです。
それ以外の場合：
interfaceNameをtransferDataHolder.[[Type]]に設定します。
もしinterfaceNameで識別されたインターフェースが
targetRealmに公開されていない場合、
"DataCloneError"
DOMExceptionをスローします。
valueをinterfaceNameで識別されたインターフェースの targetRealm内で作成された新しいインスタンスに設定します。
指定されたインターフェースinterfaceNameに対応する受信転送手順 をtransferDataHolderとvalueを使用して実行します。
設定 memory[transferDataHolder]を valueに。
追加 valueを transferredValuesに。
deserializedを？ StructuredDeserialize(serializeWithTransferResult.[[Serialized]], targetRealm, memory)に設定します。
{ [[Deserialized]]: deserialized, [[TransferredValues]]: transferredValues }を返します。
他の仕様では、ここで定義された抽象操作を使用することができます。以下は、各抽象操作が通常どのような場合に有用であるかについてのガイドラインと例を提供します。
別のrealmに値を転送リストと共にクローンするが、ターゲットrealmが事前に知られていない場合。この場合、シリアライズステップは即座に実行でき、デシリアライズステップはターゲットrealmが判明するまで遅らせることができます。
messagePort.postMessage()はこの一対の抽象操作を使用しますが、MessagePortが出荷されるまで、宛先のrealmは知られません。
特定の値のRealmに依存しないスナップショットを作成し、それを無期限に保存し、後で再度JavaScriptの値として具現化することができ、場合によっては複数回行うことができます。
StructuredSerializeForStorageは、シリアライズされたデータがRealm間で渡されるのではなく、永続的に保存されることが予想される場合に使用できます。共有メモリを保存することには意味がないため、SharedArrayBufferオブジェクトをシリアライズしようとするとエラーが発生します。同様に、forStorage引数がtrueの場合、カスタムシリアライズ手順を持つプラットフォームオブジェクトが渡されたときに、エラーが発生するか、異なる動作をする可能性があります。
history.pushState()やhistory.replaceState()は、提供された状態オブジェクトに対してStructuredSerializeForStorageを使用し、それを適切なセッション履歴エントリにシリアライズされた状態として保存します。そして、StructuredDeserializeが使用され、history.stateプロパティが、最初に提供された状態オブジェクトのクローンを返せるようにします。
broadcastChannel.postMessage()は、入力にStructuredSerializeを使用し、結果に対してStructuredDeserializeを複数回使用し、ブロードキャストされる各宛先に新しいクローンを生成します。複数の宛先がある状況では転送は意味がないことに注意してください。
JavaScriptの値をファイルシステムに永続化するAPIは、入力に対してStructuredSerializeForStorageを使用し、出力に対してStructuredDeserializeを使用します。
一般的に、呼び出し側はJavaScript値の代わりにWeb IDL値を渡すことができ、その際はこれらのアルゴリズムを呼び出す前に暗黙の変換が行われると理解されます。
ユーザーエージェントメソッドに同期的にコールバックされる結果として呼び出されない呼び出しサイトは、StructuredSerialize、StructuredSerializeForStorage、またはStructuredSerializeWithTransfer抽象操作を実行する前に、スクリプトを実行する準備をしっかりと行い、コールバックを実行する準備をしっかりと行う必要があります。これは、シリアライズプロセスが最終的な深いシリアライズステップの一部として作成者定義のアクセサを呼び出す可能性があり、これらのアクセサが、entryとincumbentの概念が適切にセットアップされていることに依存する操作を呼び出す可能性があるためです。
window.postMessage()はその引数に対してStructuredSerializeWithTransferを実行しますが、アルゴリズムの同期部分内で即座にそれを行うため、このアルゴリズムを使用してもスクリプトを実行する準備やコールバックを実行する準備をする必要はありません。
対照的に、ある著者提供オブジェクトを定期的にStructuredSerializeを使ってシリアライズする仮想APIが、タスクをイベントループ上で直接実行する場合、適切な準備を事前に行う必要があります。現在のところ、プラットフォーム上でそのようなAPIは存在しませんが、通常は、著者コードの同期結果として、前もってシリアライズを実行する方が簡単です。
result = self.structuredClone(value[, { transfer }])
入力値を取得し、構造化クローンアルゴリズムを実行することでディープコピーを返します。転送可能オブジェクトがtransfer配列にリストされている場合、それらは単にクローンされるのではなく転送されます。つまり、それらは入力値内で使用できなくなります。
入力値の一部がシリアライズ可能でない場合は、"DataCloneError"DOMExceptionをスローします。
現在のすべてのエンジンでサポートされています。
structuredClone(value, options)
メソッドの手順は次のとおりです：
serializedをStructuredSerializeWithTransfer(value,
options["transfer"])に設定します。
deserializeRecordをStructuredDeserializeWithTransfer(serialized, thisの関連するrealm)に設定します。
deserializeRecord.[[Deserialized]]を返します。
HTML UA内のすべてのXMLおよびHTML文書は、Documentオブジェクトによって表されます。[DOM]
Document オブジェクトのURLは、DOMで定義されています。これはDocument
オブジェクトが作成されるときに最初に設定されますが、Document
オブジェクトの存続期間中に変更される可能性があります。たとえば、ユーザーがページ上のフラグメントにナビゲートしたときや、pushState() メソッドが新しいURLで呼び出されたときに変更されます。[DOM]
インタラクティブなユーザーエージェントは、通常DocumentオブジェクトのURLをユーザーインターフェイスに表示します。これは、サイトが別のサイトになりすましているかどうかをユーザーが確認する主な手段です。
Document オブジェクトのオリジンは、DOMで定義されています。これはDocument
オブジェクトが作成されるときに最初に設定され、Documentの存続期間中にdocument.domainを設定した場合にのみ変更できます。Documentのオリジンは、そのURLのオリジンと異なる場合があります。
たとえば、子ナビゲーション可能オブジェクトが作成されると、そのアクティブドキュメントのオリジンは、そのアクティブドキュメントのURLが
about:blankであっても、その親のアクティブドキュメントのオリジンから継承されます。[DOM]
DocumentがcreateDocument()またはcreateHTMLDocument()メソッドを使用してスクリプトによって作成される場合、Documentはすぐにポストロードタスクの準備が整います。
文書のリファラーは、Documentが作成されるときに設定できる文字列（URLを表す）です。明示的に設定されていない場合、その値は空文字列です。
Documentオブジェクトすべての現在のエンジンでサポートされています。
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 );
// 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を作成したナビゲーションが進行中のナビゲーションであったときに使用された元のナビゲーションIDに結び付けられる方法で、Documentのライフサイクルの初期段階で発生する特定の出来事について通知する必要があります。これは最終的に、WebDriver
BiDiが読み込みプロセスを終了と見なした後にnullに戻されます。[BIDI]
DocumentごとにaboutベースURLがあり、これはURLまたはnullで、最初はnullです。
これは「about:」スキームを持つDocumentにのみ設定されます。
Documentごとにbfcacheブロッキングの詳細があり、これはセットであり、復元されなかった理由の詳細が含まれ、最初は空です。
各Documentは開いているダイアログリストを持ちます。これはdialog要素のリストであり、最初は空です。
DocumentOrShadowRootインターフェイスDOMはDocumentOrShadowRootミックスインを定義しており、この仕様はそれを拡張します。
partial interface mixin DocumentOrShadowRoot {
readonly attribute Element ? activeElement ;
};document.referrer
すべての現在のエンジンでサポートされています。
ユーザーがこのページにナビゲートした元のDocumentのURLを返します。ただし、ブロックされているか、元のドキュメントが存在しない場合は、空の文字列を返します。
noreferrerリンクタイプを使用して、リファラーをブロックすることができます。
referrer属性は文書のリファラーを返さなければなりません。
document.cookie [ = value ]
Documentに適用されるHTTPクッキーを返します。クッキーが存在しない場合や、このリソースに適用できない場合は、空の文字列が返されます。
クッキーを設定することができ、要素のHTTPクッキーセットに新しいクッキーを追加します。
内容がiframeでsandbox属性を持つ場合など、不透明なオリジンにサンドボックス化されている場合、取得および設定時に"SecurityError" DOMExceptionがスローされます。
すべての現在のエンジンでサポートされています。
cookie
属性は、ドキュメントのURLによって識別されるリソースのクッキーを表します。
同期的なdocument.cookie
APIの使用は、パフォーマンスの問題の原因となる可能性があります。Cookie Store APIを代わりに利用することで、パフォーマンス問題を避けるために非同期でクッキーを扱うことができます。詳細はCookie Store APIの紹介をご覧ください。[COOKIESTORE]
以下のいずれかの条件に該当するDocumentオブジェクトは、クッキーに非対応のDocumentオブジェクトです:
DocumentオブジェクトDocumentのURLのスキームがHTTP(S)スキームではない
取得時に、ドキュメントがクッキー回避Documentオブジェクトである場合、ユーザーエージェントは空の文字列を返さなければなりません。そうでない場合、Documentのオリジンが不透明なオリジンである場合、ユーザーエージェントは"SecurityError"DOMExceptionをスローしなければなりません。そうでない場合、ユーザーエージェントはドキュメントのURLに対してクッキー文字列を、"非HTTP"
API用にBOMなしUTF-8デコードを使用して返さなければなりません。[COOKIES]
設定時に、文書がクッキーに非対応のDocumentオブジェクトである場合、ユーザーエージェントは何もしないでください。それ以外の場合、文書のオリジンが不透明なオリジンである場合、ユーザーエージェントは"SecurityError" DOMExceptionをスローしなければなりません。それ以外の場合、ユーザーエージェントは、文書のURLに対して新しい値を含むSet-Cookie文字列を受信したときと同様に、BOMなしでUTF-8エンコードされた値を使用して、非HTTP API経由で操作する必要があります。[COOKIES]
[ENCODING]
cookie属性はフレームを超えてアクセス可能であるため、クッキーのパス制限は、サイトのどの部分にどのクッキーが送信されるかを管理するためのツールであり、セキュリティ機能ではありません。
cookie属性のゲッターとセッターは、共有状態に同期的にアクセスします。ロック機構がないため、マルチプロセスユーザーエージェントの他のブラウジングコンテキストがスクリプト実行中にクッキーを変更する可能性があります。例えば、サイトがクッキーを読み取り、その値を増加させ、次にそれを再設定し、その新しいクッキーの値をセッションの一意識別子として使用しようとした場合、同時に2つの異なるブラウザウィンドウでこれを行うと、両方のセッションに同じ「一意」の識別子を使用してしまう可能性があり、結果的に重大な影響を及ぼす可能性があります。
document.lastModified
すべての現在のエンジンでサポートされています。
ドキュメントの最終変更日をサーバーから報告された形式で、ユーザーのローカルタイムゾーンで"MM/DD/YYYY hh:mm:ss"の形式で返します。
最終変更日が不明な場合、代わりに現在の時刻が返されます。
lastModified属性は、取得時にDocumentのソースファイルの最終変更日時をユーザーのローカルタイムゾーンで次の形式で返さなければなりません。
日付の月の部分。
U+002F SOLIDUS文字（/）。
日付の日の部分。
U+002F SOLIDUS文字（/）。
日付の年の部分。
U+0020 SPACE文字。
時刻の時間の部分。
U+003A COLON文字（:）。
時刻の分の部分。
U+003A COLON文字（:）。
時刻の秒の部分。
上記の数値部分（年を除く）はすべて、必要に応じてゼロパディングされた2桁のASCII数字で10進数を表さなければなりません。年は、必要に応じてゼロパディングされた4桁以上の最短の文字列として、10進数を表すASCII数字として表さなければなりません。
Documentのソースファイルの最終変更日時は、使用されるネットワーキングプロトコルの関連機能、例としてドキュメントのHTTP
`Last-Modified`
ヘッダーの値や、ローカルファイルのファイルシステム内のメタデータから派生させなければなりません。最終変更日時が不明な場合、この属性は上記の形式で現在の日時を返さなければなりません。
document.readyState
Documentが読み込み中の場合は"loading"、パースが完了しサブリソースの読み込みが続いている場合は"interactive"、すべて読み込みが完了した場合は"complete"を返します。
この値が変わると、readystatechangeイベントがDocumentオブジェクトで発生します。
DOMContentLoadedイベントは、"interactive"に遷移した後、"complete"に遷移する前に、async属性を持つscript要素以外のすべてのサブリソースが読み込まれた時点で発生します。
すべての現在のエンジンでサポートされています。
各Documentは、現在のドキュメントの準備状態を持ちます。これは文字列で、初期状態は"complete"です。
「Document」オブジェクトを作成および初期化する
アルゴリズムを介して作成されたDocumentオブジェクトの場合、どのスクリプトもdocument.readyStateの値を確認する前に、この値はすぐに「loading」にリセットされます。
このデフォルトは、初期about:blank Documentオブジェクトや、ブラウジングコンテキストを持たないDocumentオブジェクトにも適用されます。
readyStateのゲッターステップは、thisの現在のドキュメントの準備状態を返すことです。
DocumentdocumentのreadinessValueを現在のドキュメントの準備状態を更新するには：
documentの現在のドキュメントの準備状態がreadinessValueと等しい場合は、リターンします。
documentの現在のドキュメントの準備状態をreadinessValueに設定します。
documentがHTMLパーサーに関連付けられている場合：
nowを、現在の高精度時間をdocumentの関連するグローバルオブジェクトに基づいて取得します。
readinessValueが"complete"であり、documentのロードタイミング情報のDOM完了時間が0である場合、documentのロードタイミング情報のDOM完了時間をnowに設定します。
それ以外の場合で、readinessValueが"interactive"であり、documentのロードタイミング情報のDOMインタラクティブ時間が0である場合、documentのロードタイミング情報のDOMインタラクティブ時間をnowに設定します。
イベントを発火します。名前はreadystatechangeです。documentで発生します。
Documentはドキュメントのロードタイミング情報ロードタイミング情報を持っています。
Documentは、ドキュメントのアンロードタイミング情報前のドキュメントアンロードタイミングを持っています。
Documentは、クロスオリジンリダイレクトによって作成されたというブール値を持ちます。初期状態はfalseです。
ドキュメントのロードタイミング情報構造体には、以下の項目があります。
DOMHighResTimeStamp値
ドキュメントのアンロードタイミング情報構造体には、以下の項目があります。
DOMHighResTimeStamp値
各Documentは、最初は空のセットであるレンダーブロッキング要素セット（セット）を持ちます。
次の条件が成立する場合、Document
documentはレンダーブロッキング要素を追加することができます。
documentのコンテンツタイプが「text/html」であり、documentのボディ要素がnullである場合です。
次の条件が両方とも真である場合、Document
documentはレンダーブロックされます。
documentのレンダーブロッキング要素セットが空でない、またはdocumentがレンダーブロッキング要素を追加することを許可している。
要素elは、elのノードドキュメント documentがレンダーブロックされている場合、かつelがdocumentのレンダーブロッキング要素セットに含まれている場合、レンダーブロッキングと見なされます。
要素elに対してレンダーブロッキングを行うには：
elのノードドキュメントをdocumentとします。
もしdocumentがレンダーブロッキング要素を追加することを許可している場合は、セットに追加します。elをdocumentのレンダーブロッキング要素セットに追加します。
要素elに対してレンダーブロックを解除するには：
elのノードドキュメントをdocumentとします。
削除します。elをdocumentのレンダーブロッキング要素セットから削除します。
あるレンダーブロッキング要素elがブラウジングコンテキストとの接続が切れるか、elのブロッキング属性の値が変更されてelがもはや潜在的にレンダーブロッキングでなくなる場合、レンダーブロックを解除します。
document.head
現在のすべてのエンジンでサポートされています。
head要素を返します。
document.title [ = value ]
文書のタイトルを返します。HTMLではtitle要素によって、SVGではSVGのtitle要素によって定義されます。
設定することもでき、文書のタイトルを更新します。適切な要素が存在しない場合、新しい値は無視されます。
現在のすべてのエンジンでサポートされています。
title属性は、取得時に次のアルゴリズムを実行しなければなりません：
もし文書要素がSVGsvg要素である場合、valueを最初のSVGtitle要素の子テキストコンテンツに設定します。
それ以外の場合、valueを最初のtitle要素の子テキストコンテンツに設定し、title要素がnullの場合は空文字列に設定します。
valueを返します。
設定時に、次のリストで最初に一致する条件に対応するステップを実行する必要があります：
document.body [ = value ]
現在のすべてのエンジンでサポートされています。
body要素を返します。
設定することもでき、body要素を置き換えます。
新しい値がbody要素やframeset要素でない場合は、"HierarchyRequestError" DOMExceptionをスローします。
body属性は、取得時に、文書のbody要素（body要素またはframeset要素、もしくはnull）を返さなければなりません。設定時には、次のアルゴリズムを実行する必要があります：
body要素やframeset要素でない場合、"HierarchyRequestError" DOMExceptionをスローします。
HierarchyRequestError" DOMExceptionをスローします。
getterによって返されるbody属性の値は、必ずしもsetterに渡されたものとは限りません。
この例では、セッターが正常にbody要素を挿入します（ただし、これは非準拠です。SVG
はSVG
svgの子としてbodyを許可していないため）。しかし、ゲッターはドキュメント要素が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
すべての現在のエンジンでサポートされています。
HTML ドキュメント内の img 要素の
HTMLCollection
を返します。
document.embeds
すべての現在のエンジンでサポートされています。
document.plugins
すべての現在のエンジンでサポートされています。
HTML ドキュメント内の embed
要素の HTMLCollection
を返します。
document.links
すべての現在のエンジンでサポートされています。
HTML ドキュメント内の a および area 要素の HTMLCollection
を返します。これらの要素は href 属性を持ちます。
document.forms
すべての現在のエンジンでサポートされています。
HTML ドキュメント内の form 要素の
HTMLCollection
を返します。
document.scripts
すべての現在のエンジンでサポートされています。
HTMLCollection
を、script 要素の
Document 内におけるコレクションとして返す。
images 属性は、Document ノードにルート化された HTMLCollection
を返す必要があります。このフィルタは、img
要素にのみ一致します。
embeds 属性は、Document ノードにルート化された HTMLCollection
を返す必要があります。このフィルタは、embed
要素にのみ一致します。
plugins 属性は、embeds
属性によって返されるものと同じオブジェクトを返す必要があります。
links 属性は、Document ノードにルート化された HTMLCollection
を返す必要があります。このフィルタは、a 要素の href 属性および area 要素の href 属性にのみ一致します。
forms 属性は、Document ノードにルート化された HTMLCollection
を返す必要があります。このフィルタは、form
要素にのみ一致します。
scripts 属性は、Document ノードにルート化された HTMLCollection
を返す必要があります。このフィルタは、script
要素にのみ一致します。
collection = document.getElementsByName(name)
現在のすべてのエンジンでサポートされています。
getElementsByName(elementName) メソッドは、指定された
elementName 値を持つ要素を含む、ライブの NodeList
を返します。この NodeList は、ツリー順に並べられた、name 属性が elementName 引数と同一であるすべての HTML
要素 から構成されます。Document
オブジェクトで同じ引数を指定してメソッドを再度呼び出すと、ユーザーエージェントは以前の呼び出しで返されたオブジェクトと同じものを返すことがあります。それ以外の場合、新しい NodeList
オブジェクトを返す必要があります。
document.currentScript
現在のすべてのエンジンでサポートされています。
クラシックスクリプト を表す限り、現在実行中の 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
に対して決定するために、ユーザーエージェントは次の手順を使用して取得された値を返す必要があります。
elements を、Document を ルート
とするドキュメントツリー内で name という名前を持つ 名前付き要素
のリストとします。
アルゴリズムが Web IDL によって 呼び出されない限り、少なくとも1つの要素が存在します。
elements に要素が1つだけ含まれており、その要素が iframe 要素で、その
iframe 要素の コンテンツナビゲーブル が null でない場合、その要素の
アクティブな WindowProxy を返します。
それ以外の場合、elements に要素が1つだけ含まれている場合、その要素を返します。
それ以外の場合、name という名前を持つ 名前付き要素 のみを一致させるフィルタを持つ HTMLCollection
を Document ノードにルート化されたものとして返します。
名前付き要素は、上記のアルゴリズムの目的において、以下のいずれかに該当する要素です。
embed 要素または object 要素は、公開された 先祖が存在せず、object
要素において、フォールバックコンテンツを表示していないか、object または embed 子孫が存在しない場合に 公開された とみなされます。
dir 属性は、Document インターフェース上で、dir コンテンツ属性とともに定義されています。
HTMLの要素、属性、および属性値は、この仕様によって特定の意味（セマンティクス）を持つように定義されています。例えば、ol要素は順序付きリストを表し、
lang属性はコンテンツの言語を表します。
これらの定義により、Webブラウザや検索エンジンなどのHTMLプロセッサが、作成者が考慮していなかったさまざまな文脈でドキュメントやアプリケーションを表示および利用できるようになります。
単純な例として、デスクトップコンピュータのWebブラウザのみを考慮して作成されたWebページを考えてみましょう:
<!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 > DOMノードのノードドキュメントの閲覧コンテキストがnullである場合、 HTML構文の要件およびXML構文の要件を除き、すべてのドキュメント適合性要件が免除されます。
特に、template要素のtemplateコンテンツのノードドキュメントの閲覧コンテキストは
nullです。例えば、コンテンツモデルの要件や、属性値のマイクロ構文要件はtemplate要素のtemplateコンテンツには適用されません。この例では、img要素が、template要素外では無効となるプレースホルダを持つ属性値を持っています。
< template >
< article >
< img src = "{{src}}" alt = "{{alt}}" >
< h1 ></ h1 >
</ article >
</ template > ただし、上記のマークアップで</h1>終了タグを省略すると、それはHTML構文の違反となり、適合性チェッカーによってエラーとしてフラグが立てられます。
スクリプトやその他のメカニズムを使用することで、ユーザーエージェントが処理中に、属性、テキスト、さらにはドキュメント全体の構造が動的に変化することがあります。ドキュメントの任意の瞬間におけるセマンティクスは、その瞬間のドキュメントの状態によって表され、そのためドキュメントのセマンティクスは時間とともに変化する可能性があります。ユーザーエージェントはこれが発生すると、ドキュメントの表示を更新しなければなりません。
HTMLにはprogress要素があり、プログレスバーを表します。その「value」属性がスクリプトによって動的に更新された場合、ユーザーエージェントは進行状況が変化していることを表示するためにレンダリングを更新します。
DOM内のHTML要素を表すノードは、この仕様の関連セクションにリストされているインターフェースを実装し、スクリプトに公開しなければなりません。これには、HTML要素がXMLドキュメント内にある場合も含まれます。これらのドキュメントが別のコンテキストにある場合（例: XSLT変換内）でも同様です。
DOM内の要素は、物事を表現します。つまり、それらはセマンティクスとして知られる固有の意味を持っています。
例えば、ol要素は順序付きリストを表します。
要素は、明示的または暗黙的に参照（言及）されることがあります。DOM内の要素を明示的に参照する1つの方法は、その要素にid属性を付与し、そのid属性の値をフラグメントとして使用してハイパーリンクを作成することです。ただし、参照にはハイパーリンクは必須ではありません。要素を指す方法であれば何でもかまいません。
次のfigure要素を考えてみましょう。この要素にはid属性が付与されています:
< 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要素を参照する方法は他にも多くあります。例えば次のようなものがあります:
"As depicted in the figure of modules A, B, C, and D..."
"In Figure 27..." (ハイパーリンクなしで)
"From the contents of the 'simple module graph' figure..."
"In the figure below..."（ただしこれは推奨されません）
すべてのHTML要素のインターフェースが継承し、追加の要件がない要素が使用しなければならない基本的なインターフェースは、HTMLElementインターフェースです。
現在のすべてのエンジンでサポートされています。
Support in all current engines.
Support in all current engines.
Support in all current engines.
Support in all current engines.
現在のすべてのエンジンでサポートされています。
[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 HTMLOrSVGElement ;
[Exposed =Window ]
interface HTMLUnknownElement : HTMLElement {
// Note: intentionally no [HTMLConstructor]
};HTMLElementインターフェースには、さまざまな機能に関連するメソッドや属性が含まれており、そのため、このインターフェースのメンバーはこの仕様書のさまざまなセクションで説明されています。
nameという名前を持つ要素の要素インターフェースは、HTML名前空間で次のように決定されます:
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を返します。
有効なカスタム要素名の場合にHTMLElementを使用するのは、将来のアップグレードが、HTMLElementからサブクラスへの線形遷移のみを引き起こし、HTMLUnknownElementから無関係なサブクラスへの横方向の遷移を引き起こさないようにするためです。
HTMLとSVGの要素間で共有される機能には、HTMLOrSVGElementインターフェースミックスインが使用されます:
[SVG]
Support in one engine only.
interface mixin HTMLOrSVGElement {
[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でもない要素の例としては、次のように作成されるものがあります:
const el = document.createElementNS("some namespace", "example");
console.assert(el.constructor === Element);カスタム要素機能をサポートするために、すべての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です。このチェックがなければ、HTMLButtonElementのインスタンスをbad-1というローカル名で作成することが可能になります。
registry を null とします。
周囲のエージェントのアクティブなカスタム要素コンストラクタマップ[NewTarget] が存在する場合：
registry を周囲のエージェントの アクティブなカスタム要素コンストラクタマップ[NewTarget] に設定します。
それ以外の場合、registry を現在のグローバルオブジェクトの関連付けられた
Documentのカスタム要素レジストリに設定します。
definition を、registry のカスタム要素定義セット内の、コンストラクタが
NewTarget と等しいアイテムとします。そのようなアイテムがない場合は、TypeError
をスローします。
registry のカスタム要素定義セットには、undefined のコンストラクタを持つアイテムは存在できないため、このステップはHTML要素コンストラクタが関数として呼び出されることも防ぎます（その場合、NewTarget は undefined になります）。
isValue を null とします。
もしdefinitionのローカル名がdefinitionの名前と等しい場合（すなわち、definitionが自律カスタム要素のためのものである場合）、次のようにします:
アクティブ関数オブジェクトがHTMLElementでない場合、TypeErrorをスローします。
これは、カスタム要素がローカル名を拡張しないように定義されているが、HTMLElementでないクラスから継承している場合に発生します:
customElements. define( "bad-2" , class Bad2 extends HTMLParagraphElement {}); この場合、Bad2のインスタンスを構築する際に発生する（暗黙的な）super()呼び出し中に、アクティブ関数オブジェクトはHTMLParagraphElementであり、HTMLElementではありません。
それ以外の場合（すなわち、definitionがカスタマイズされた組み込み要素のためのものである場合）:
valid local namesを、この仕様または他の適用可能な仕様で定義されたローカル名のリストとし、それがアクティブ関数オブジェクトを要素インターフェースとして使用します。
valid local namesがdefinitionのローカル名を含まない場合、TypeErrorをスローします。
これは、カスタム要素が特定のローカル名を拡張するように定義されているが、間違ったクラスから継承している場合に発生します:
customElements. define( "bad-3" , class Bad3 extends HTMLQuoteElement {}, { extends : "p" }); この場合、Bad3のインスタンスを構築する際に発生する（暗黙的な）super()呼び出し中に、valid local
namesにはqとblockquoteが含まれていますが、definitionのローカル名はpであり、そのリストには含まれていません。
isValueをdefinitionの名前に設定します。
もしdefinitionの構築スタックが空であれば、次のようにします:
elementをインターフェースを実装する新しいオブジェクトを内部的に作成することの結果とし、現在の領域とNewTargetを与えます。
elementのノードドキュメントを現在のグローバルオブジェクトの関連するDocumentに設定します。
elementの名前空間プレフィックスをnullに設定します。
element の カスタム要素レジストリ を registry に設定する。
elementのカスタム要素の状態を"custom"に設定します。
elementのカスタム要素定義をdefinitionに設定します。
elementのis valueをisValueに設定します。
elementを返します。
これは、作成者スクリプトがnew MyCustomElement()のようにして直接新しいカスタム要素を構築する場合に発生します。
prototype がObject ではない場合：
realmを？GetFunctionRealm(NewTarget)に設定します。
prototypeを、インターフェースプロトタイプオブジェクトのrealmに設定し、そのインターフェースがアクティブ関数オブジェクトのインターフェースと同じであるものとします。
アクティブ関数オブジェクトの領域はrealmでない可能性があるため、私たちは領域を超えて「同じインターフェース」という一般的な概念を使用しています。インターフェースオブジェクトの等価性を探しているわけではありません。このフォールバック動作には、NewTargetの領域を使用し、適切なプロトタイプをそこに見つけることが含まれ、これはJavaScriptビルトインおよびWebIDLのインターフェースを実装する新しいオブジェクトを内部的に作成するアルゴリズムに類似した動作に一致するように設計されています。
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 ); この仕様書の各要素には、以下の情報を含む定義があります:
要素が使用される場所についての非規範的な説明です。この情報は、この要素を子として許可する要素のコンテンツモデルと重複しており、あくまで便宜のために提供されています。
簡単にするために、最も具体的な期待のみがリストされています。
例えば、すべてのフレージングコンテンツはフローコンテンツです。したがって、フレージングコンテンツである要素は、"フレージングコンテンツが期待される場所"としてのみリストされます。これは、より具体的な期待事項だからです。フローコンテンツが期待される場所では、フレージングコンテンツも期待され、その期待に応えることができます。
要素の子および子孫として含まれるべきコンテンツの規範的な説明です。
text/html構文で、開始および終了タグが省略できるかどうかについての非規範的な説明です。この情報は、省略可能なタグセクションで示される規範的要件と重複しており、便宜のために要素定義内で提供されています。
要素に指定できる属性の規範的なリスト（禁止されていない限り）、およびそれらの属性に関する非規範的な説明です。（ダッシュの左側の内容が規範的であり、右側の内容は規範的ではありません。）
作成者向け: ARIAのrole属性およびaria-*属性の使用に関する適合要件は、ARIA in HTMLで定義されています。[ARIA] [ARIAHTML]
実装者向け: アクセシビリティAPIのセマンティクスを実装するためのユーザーエージェントの要件は、HTML Accessibility API Mappingsに定義されています。[HTMLAAM]
その要素が実装しなければならないDOMインターフェースの規範的な定義です。
次に、その要素が表現する内容、および作成者や実装に適用される追加の規範的な適合基準の説明が続きます。例が含まれることもあります。
属性値は文字列です。特に指定がない限り、HTML要素の属性値は空の文字列を含む任意の文字列であり、そのような属性値に指定できるテキストに制限はありません。
この仕様で定義された各要素には、要素の期待されるコンテンツの説明であるコンテンツモデルがあります。HTML要素は、その要素のコンテンツモデルに記載された要件に一致するコンテンツを持たなければなりません。要素のコンテンツとは、DOM内のその要素の子要素を指します。
ASCIIホワイトスペースは、要素間では常に許可されています。ユーザーエージェントは、ソースマークアップ内の要素間にあるこれらの文字を、DOM内のテキストノードとして表現します。空のテキストノードや、それらの文字のみで構成されるテキストノードは、要素間ホワイトスペースと見なされます。
要素間ホワイトスペース、コメントノード、および処理命令ノードは、要素のコンテンツがその要素のコンテンツモデルに一致するかどうかを判断する際には無視されなければならず、文書や要素のセマンティクスを定義するアルゴリズムに従う際にも無視されなければなりません。
したがって、要素Aが他の要素Bによって前後に置かれているとされるのは、AとBが同じ親ノードを持ち、他の要素ノードやテキストノード（要素間ホワイトスペース以外）がそれらの間に存在しない場合です。同様に、要素が唯一の子であるとされるのは、その要素が要素間ホワイトスペース、コメントノード、および処理命令ノード以外の他のノードを含まない場合です。
作成者は、HTML要素を、各要素に定義された場所や他の仕様書で明示的に要求される場所以外のどこにも使用してはなりません。XML複合文書の場合、これらのコンテキストは、関連するコンテキストを提供するように定義された他の名前空間の要素内にある場合があります。
The Atom Syndication
Formatはcontent要素を定義しています。そのtype属性がxhtmlの値を持つ場合、The Atom
Syndication Formatはそれに単一のHTMLdiv要素を含むことを要求します。したがって、div要素はそのコンテキストで許可されていますが、これはこの仕様書で明示的に規範的に記述されているわけではありません。[ATOM]
さらに、HTML要素は親ノードを持たない孤立ノードである場合があります。
たとえば、td要素を作成し、スクリプト内のグローバル変数に保存することは、td要素が通常はtr要素内でのみ使用されるべきであるにもかかわらず、適合しています。
var data = {
name: "Banana" ,
cell: document. createElement( 'td' ),
}; 要素のコンテンツモデルが何も含まないの場合、その要素にはテキストノード（要素間ホワイトスペースを除く）や要素ノードを含めてはなりません。
コンテンツモデルが「何も含まない」ほとんどのHTML要素は、便宜上、空要素（終了タグを持たない要素）でもあります。しかし、これらは完全に別の概念です。
HTMLの各要素は、似た特性を持つ要素をまとめる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シリアル化ではこれはできません。
文書やアプリケーションの本文で使用されるほとんどの要素は、フローコンテンツに分類されます。
a
abbr
address
area（それがmap要素の子孫である場合）
article
aside
audio
b
bdi
bdo
blockquote
br
button
canvas
cite
code
data
datalist
del
details
dfn
dialog
div
dl
em
embed
fieldset
figure
footer
form
h1
h2
h3
h4
h5
h6
header
hgroup
hr
i
iframe
img
input
ins
kbd
label
link（本文で許可されている場合）
main（階層的に正しいmain要素である場合）
map
mark
math
menu
meta（itemprop属性が存在する場合）
meter
nav
noscript
object
ol
output
p
picture
pre
progress
q
ruby
s
samp
script
search
section
select
slot
small
span
strong
sub
sup
svg
table
template
textarea
time
u
ul
var
video
wbr
区分化コンテンツは、headerおよびfooter要素の範囲を定義するコンテンツです。
見出しコンテンツは、セクションの見出しを定義します（区分化コンテンツ要素を使用して明示的にマークアップされているか、または見出しコンテンツ自体によって暗黙的に決定されます）。
フレージングコンテンツは、文書のテキストおよび段落内でそのテキストをマークアップする要素です。フレージングコンテンツのまとまりが段落を形成します。
a
abbr
area (if it is a
descendant
of a map element)
audio
b
bdi
bdo
br
button
canvas
cite
code
data
datalist
del
dfn
em
embed
i
iframe
img
input
ins
kbd
label
link (if it is allowed in the body)
map
mark
math
meta (if the itemprop
attribute is present)
meter
noscript
object
output
picture
progress
q
ruby
s
samp
script
select
selectedcontent
（それが button の子孫であり、
select 内にある場合）
slot
small
span
strong
sub
sup
svg
template
textarea
time
u
var
video
wbr
フレージングコンテンツとして分類された要素の多くは、フレージングコンテンツとして分類された要素しか含めることができず、フローコンテンツを含めることはできません。
テキストは、コンテンツモデルの文脈では、何もないか、テキストノードを意味します。テキストは単独でコンテンツモデルとして使用されることもありますが、フレージングコンテンツでもあり、要素間の空白（テキストノードが空であるか、ASCIIスペース文字のみが含まれている場合）にもなります。
テキストノードおよび属性値は、スカラー値でなければならず、非文字や制御文字（ただしASCIIスペース文字を除く）を含んではなりません。
この仕様には、テキストノードおよび属性値の正確な値に対して、文脈に応じた追加の制約が含まれています。
埋め込みコンテンツとは、別のリソースを文書に取り込むコンテンツや、他のボキャブラリーから文書に挿入されたコンテンツのことです。
HTML名前空間以外の名前空間からの要素で、メタデータではなくコンテンツを伝えるものは、この仕様で定義されたコンテンツモデルの目的のために、埋め込みコンテンツと見なされます。（例：MathMLやSVG。）
一部の埋め込みコンテンツ要素は、フォールバックコンテンツを持つことがあります。これは、外部リソースが使用できない場合（例：サポートされていないフォーマットであるため）に使用されるコンテンツです。要素定義には、フォールバックがある場合、その内容が記載されています。
インタラクティブコンテンツとは、ユーザーの操作を目的としたコンテンツです。
a（href属性がある場合）audio（controls属性がある場合）buttondetailsembediframeimg（usemap属性がある場合）
input（type属性が非表示状態ではない場合）
labelselecttextareavideo（controls属性がある場合）
一般的なルールとして、内容モデルがフローコンテンツまたは フレージングコンテンツのいずれかを許可する要素には、 属性が指定されていない、 少なくとも1つの内容が触知可能なコンテンツである必要があります。
触知可能なコンテンツは、要素に 空でない内容を提供することで、要素を非空にします。例えば、空でないテキストや、 ユーザーが聞くことができるaudio要素、または video、img、 またはcanvas要素など、見ることができるもの、あるいは他のインタラクティブなものです（例えば、インタラクティブなフォームコントロール）。
ただし、この要件は厳密な要件ではありません。スクリプトによって後で埋められるプレースホルダーとして要素が使用される場合や、 テンプレートの一部であり、多くのページでは埋められるが、特定のページでは関連性がない場合など、要素が正当な理由で空である場合が多々あります。
適合チェッカーは、著者支援としてこの要件を満たしていない要素を見つけるためのメカニズムを提供することが推奨されます。
次の要素は触知可能なコンテンツです:
aabbraddressarticleasideaudio（controls属性がある場合）bbdibdoblockquotebuttoncanvascitecodedatadeldetailsdfndivdl（要素の子に少なくとも1つの名前と値のグループが含まれている場合）
emembedfieldsetfigurefooterformh1
h2
h3
h4
h5
h6
headerhgroupiiframeimginput（type属性が非表示状態ではない場合）
inskbdlabelmainmapmarkmathmenu（要素の子に少なくとも1つのli要素が含まれている場合）meternavobjectol（要素の子に少なくとも1つのli要素が含まれている場合）outputppicturepreprogressqrubyssampsearchsectionselectsmallspanstrongsubsupsvgtabletextareatimeuul（要素の子に少なくとも1つのli要素が含まれている場合）varvideoスクリプト支援要素は、それ自体では何も表現しない（すなわち、表示されない）要素ですが、スクリプトをサポートするために使用されます。例えば、ユーザーのための機能を提供します。
以下の要素はスクリプト支援要素です:
select
要素内部コンテンツ要素select 要素内部コンテンツ要素は、select
要素の子孫として許可される要素です。
以下はselect
要素内部コンテンツ要素です：
optgroup
要素内部コンテンツ要素optgroup 要素内部コンテンツ要素は、optgroup
要素の子孫として許可される要素です。
以下はoptgroup
要素内部コンテンツ要素です：
option
要素内部コンテンツ要素option 要素内部コンテンツ要素は、option
要素の子孫として許可される要素です。
以下はoption
要素内部コンテンツ要素です：
以下はoption
要素内部コンテンツ要素から除外されます：
datalist
object
tabindex
属性が指定された要素
一部の要素は透明と表現され、そのコンテンツモデルの説明に「透明」という用語が使用されています。透明な要素のコンテンツモデルは、その親要素のコンテンツモデルから派生します。「透明」な部分に必要な要素は、透明な要素が含まれている親要素のコンテンツモデルの該当部分で必要とされる要素と同じです。
例えば、ins要素がruby要素の内部にある場合、その中に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」は許可されます。
透明な要素に親要素がない場合、そのコンテンツモデルの「透明」な部分は、代わりにフローコンテンツを受け入れるものとして扱わなければなりません。
このセクションで定義されている段落という用語は、p要素の定義だけでなく、より広範な文書の解釈方法を説明するために使用されます。ここで定義される段落の概念は、段落をマークアップするためのいくつかの方法の一つに過ぎません。
段落は通常、特定のトピックを扱う1つまたは複数の文を含むブロックのテキストとして構成されるフレージングコンテンツの流れですが、一般的なテーマのグループ化にも使用されます。例えば、住所も段落と見なされるし、フォームの一部、署名、または詩のスタンザも同様です。
次の例では、セクション内に2つの段落があります。また、段落ではないフレージングコンテンツを含む見出しもあります。コメントや要素間の空白が段落を形成しないことに注意してください。
< section >
< h2 > 段落の例</ h2 >
これはこの例の< em > 最初の</ em > 段落です。
< p > これは2番目の段落です。</ p >
<!-- これは段落ではありません。 -->
</ section > フローコンテンツ内の段落は、a、ins、del、およびmap要素が問題を複雑にすることなく、文書がどのように見えるかに基づいて定義されます。これらの要素はハイブリッドコンテンツモデルを持ち、段落の境界をまたぐことができます。以下の最初の2つの例がそのことを示しています。
一般的に、段落の境界をまたぐ要素を持つことは避けた方が良いです。そのようなマークアップを維持することは困難です。
次の例では、前の例のマークアップを取り、insおよびdel要素をいくつかのマークアップの周りに配置して、テキストが変更されたことを示しています（この場合、変更はあまり意味をなさないかもしれません）。この例は、insおよびdel要素が含まれていても、前の例と全く同じ段落を持っていることに注意してください。ins要素は見出しと最初の段落の境界をまたぎ、del要素は2つの段落の間の境界をまたいでいます。
< section >
< ins >< h2 > 段落の例</ h2 >
これはこの</ ins > 例の< em > 最初の</ em > 段落です< del > 。
< p > これは2番目の段落です。</ p ></ del >
<!-- これは段落ではありません。 -->
</ section > viewを、文書内のa、ins、del、およびmap要素をそのコンテンツで置き換えたDOMのビューとします。次に、view内で、他のタイプのコンテンツで中断されないフレージングコンテンツノードの兄弟関係の各流れについて、その流れの最初のノードをfirst、最後のノードをlastとします。そのような流れのうち、少なくとも1つのノードが埋め込みコンテンツでも要素間の空白でもない場合、元のDOMにそのfirstの直前からlastの直後まで段落が存在します（したがって、段落はa、ins、del、およびmap要素をまたぐことができます）。
適合性チェックツールは、段落が互いに重なっているケースについて著者に警告を出すことができます（これは、object、video、audio、およびcanvas要素を使用する場合、また、HTMLをさらに埋め込むことができる他の名前空間の要素、例えばSVG
svgやMathML
mathなどで間接的に発生することがあります）。
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 > 私の猫たち</ h2 >
あなたは私の猫シミュレーターで遊ぶことができます。
< object data = "cats.sim" >
猫シミュレーターを見るには、次のリンクのいずれかを使用してください:
< ul >
< li >< a href = "cats.sim" > シミュレーター ファイルをダウンロード</ a >
< li >< a href = "https://sims.example.com/watch?v=LYds5xY4INU" > オンライン シミュレーターを使用</ a >
</ ul >
または、Mellblom ブラウザーにアップグレードしてください。
</ object >
私はそれをとても誇りに思っています。
</ section > 5つの段落があります:
object要素を含む、「あなたは私の猫シミュレーターで遊ぶことができます。object
私はそれをとても誇りに思っています。」という段落。
最初の段落は他の4つと重なっています。「cats.sim」リソースをサポートするユーザーエージェントは最初の段落のみを表示しますが、フォールバックを表示するユーザーエージェントは、最初の段落の最初の文を2番目の段落と同じ段落内に表示し、最後の段落を最初の段落の2番目の文の先頭に表示するため、混乱を招きます。
この混乱を避けるためには、明示的なp要素を使用することができます。例えば:
< section >
< h2 > 私の猫たち</ h2 >
< p > あなたは私の猫シミュレーターで遊ぶことができます。</ p >
< object data = "cats.sim" >
< p > 猫シミュレーターを見るには、次のリンクのいずれかを使用してください。</ p >
< ul >
< li >< a href = "cats.sim" > シミュレーター ファイルをダウンロード</ a >
< li >< a href = "https://sims.example.com/watch?v=LYds5xY4INU" > オンライン シミュレーターを使用</ a >
</ ul >
< p > または、Mellblom ブラウザーにアップグレードしてください。</ p >
</ object >
< p > 私はそれをとても誇りに思っています。</ p >
</ section > 以下の属性はすべてのHTML要素に共通であり、この仕様で定義されていない要素にも指定できます:
accesskey
autocapitalize
autocorrectautofocuscontenteditable
dirdraggableenterkeyhintheadingoffset
headingreset
inertinputmodeisitemiditemprop
itemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatewritingsuggestions
これらの属性は、この仕様でHTML要素の属性としてのみ定義されています。この仕様がこれらの属性を持つ要素について言及する場合、これらの属性を持つと定義されていない名前空間の要素は、これらの属性を持つ要素とは見なされません。
例えば、次のXMLフラグメントでは、"bogus"要素は、この仕様で定義されたdir属性を持っていませんが、dirという名前の属性を持っています。したがって、最内のspan要素の方向性は、div要素から間接的に継承された'rtl'です。
< 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 > すべての現在のエンジンでサポートされています。
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要素によって作成されたスロットに割り当てられます。その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:space属性を使用することも許可しています。この属性は、HTMLでは効果がなく、HTMLのデフォルトの動作は空白を保持することです。[XML]
HTML要素にtext/html構文でxml:space属性をシリアライズする方法はありません。
title 属性すべての現在のエンジンでサポートされています。
title属性は、要素に対する助言情報を表します。ツールチップに適したものである必要があります。リンクの場合、これがターゲットリソースのタイトルまたは説明である可能性があります。画像の場合、画像のクレジットまたは説明である可能性があります。段落の場合、脚注やテキストに対するコメントである可能性があります。引用の場合、ソースに関する追加情報である可能性があります。インタラクティブコンテンツの場合、それが要素のラベルや使用方法に関する指示である可能性があります。値はテキストです。
title属性に依存することは現在推奨されていません。多くのユーザーエージェントが、この仕様で要求されているように属性をアクセシブルな方法で公開しないためです（例えば、ツールチップを表示するにはマウスなどのポインティングデバイスが必要であり、キーボードのみのユーザーやモダンな電話やタブレットを使用しているタッチのみのユーザーを除外する可能性があります）。
この属性が要素に省略されている場合、それはこの属性が設定された最も近い祖先のHTML要素のtitle属性が、この要素にも関連していることを意味します。この属性を設定すると、祖先の助言情報がこの要素に関連していないことを明示的に示します。この属性を空の文字列に設定することは、この要素には助言情報がないことを示します。
title属性の値にU+000A LINE FEED
(LF)文字が含まれている場合、内容は複数の行に分割されます。各U+000A LINE FEED (LF)文字は改行を表します。
title属性で改行を使用する際には注意が必要です。
例えば、次のスニペットは実際には改行が含まれた省略語の展開を定義しています:
< p > 私のログは、今日HTTPにいくつかの関心があったことを示しています< abbr title = "Hypertext
Transport Protocol" > HTTP</ abbr > です。</ p > いくつかの要素（link、abbr、inputなど）は、上記のセマンティクスを超えてtitle属性の追加のセマンティクスを定義しています。
要素の助言情報は、次のアルゴリズムが返す値です。このアルゴリズムが値を返すと、アルゴリズムは中断されます。アルゴリズムが空の文字列を返した場合、助言情報は存在しません。
ユーザーエージェントは、要素に助言情報がある場合、ユーザーに通知する必要があります。さもなければ、情報は発見できません。
lang と xml:lang
属性すべての現在のエンジンでサポートされています。
lang属性（名前空間なし）は、要素の内容およびテキストを含む要素の属性の主な言語を指定します。その値は、有効な BCP
47 言語タグ、または空の文字列でなければなりません。この属性を空の文字列に設定することは、主な言語が不明であることを示します。[BCP47]
lang属性は、XML名前空間内に定義されています。[XML]
これらの属性が要素に省略された場合、この要素の言語は、親要素の言語と同じになります（もしあれば）（ただし、slot要素はシャドウツリー内の要素を除きます）。
名前空間なしのlang属性は、任意のHTML要素で使用できます。
lang属性は、XML 名前空間で、HTML 要素に使用でき、XML ドキュメントに使用できます。また、関連する仕様が許可する場合には、他の名前空間の要素にも使用できます（特に、MathML や SVG
は、lang 属性を、XML 名前空間で指定することを許可しています）。lang属性が名前空間に属さず、lang 属性が XML 名前空間に指定されている場合、同じ要素上でそれらは、ASCII
大文字小文字を区別しない 形で、完全に同じ値を持たなければなりません。
著者は、名前空間なしのlang属性をXML名前空間のHTML要素に対してHTMLドキュメントで使用してはなりません。XMLへの移行を容易にするために、著者は、名前空間なしの属性をプレフィックスなしで、リテラルのローカル名"xml:lang"でHTMLドキュメントのHTML要素に指定できますが、この属性は、名前空間なしのlang属性も指定されている場合にのみ指定する必要があります。両方の属性は、ASCII大文字と小文字を区別しない方法で比較される際に、同じ値を持っていなければなりません。
名前空間なしでプレフィックスなし、リテラルのローカル名"xml:lang"を持つ属性は、言語処理には何の影響もありません。
ノードの言語を決定するには、ユーザーエージェントは次のリストの最初の適切なステップを使用する必要があります:
lang属性を持つ要素である場合
その属性の値を使用します。
lang属性を持つ場合
その属性の値を使用します。
プラグマ設定のデフォルト言語が設定されている場合、それがノードの言語です。プラグマ設定のデフォルト言語が設定されていない場合、上位レベルのプロトコル（HTTPなど）からの言語情報（存在する場合）が最終的なフォールバック言語として使用されます。そのような言語情報がない場合、および上位レベルのプロトコルが複数の言語を報告する場合、ノードの言語は不明であり、対応する言語タグは空の文字列です。
結果の値が認識されない言語タグである場合、それは与えられた言語タグを持つ未知の言語として扱われ、他のすべての言語と区別されなければなりません。ラウンドトリップや言語タグを期待する他のサービスとの通信の目的で、ユーザーエージェントは未知の言語タグを修正せずに通過させ、BCP 47 言語タグとしてタグ付けする必要があります。そうすれば、後続のサービスがデータを別のタイプの言語記述として解釈することはありません。[BCP47]
例えば、lang="xyzzy"を持つ要素は、セレクタ:lang(xyzzy)（例：CSS）で一致しますが、:lang(abcde)では一致しません。どちらも同様に無効ですが、これも同様です。同様に、連携して動作するウェブブラウザとスクリーンリーダーが、要素の言語について通信する場合、ブラウザはスクリーンリーダーにその言語が
"xyzzy" であることを伝えます。たとえそれが無効であると知っていても、スクリーンリーダーがそのタグをサポートしている可能性があるためです。たとえスクリーンリーダーが BCP 47
と別の言語名エンコーディングの構文の両方をサポートしていて、その別の構文で "xyzzy" がベラルーシ語を表す方法であったとしても、BCP 47 でベラルーシ語が "be"
というコードで記述されているため、スクリーンリーダーがテキストをベラルーシ語として扱い始めるのは誤りです。
結果の値が空の文字列である場合、それはノードの言語が明示的に不明であることを意味すると解釈されなければなりません。
ユーザーエージェントは、適切な処理やレンダリングを決定するために要素の言語を使用することがあります（例えば、適切なフォントや発音の選択、辞書の選択、日付ピッカーなどのフォームコントロールのユーザーインターフェイスのため）。
translate 属性すべての現在のエンジンでサポートされています。
translate属性は、要素の属性値およびそのTextノードの子の値がページのローカライズ時に翻訳されるか、そのままにしておくかを指定するために使用されます。これは列挙属性であり、次のキーワードと状態を持ちます：
| キーワード | 状態 | 簡易説明 |
|---|---|---|
yes
| Yes | 翻訳モードをtranslate-enabledに設定します。 |
no
| No | 翻訳モードをno-translateに設定します。 |
各要素（非HTML要素も含む）には翻訳モードがあり、translate-enabled状態またはno-translate状態のいずれかになります。HTML要素のtranslate属性がYes状態の場合、その要素の翻訳モードはtranslate-enabled状態になります。そうでなく、要素のtranslate属性がNo状態の場合、その要素の翻訳モードはno-translate状態になります。それ以外の場合、要素のtranslate属性がInherit状態であるか、要素がHTML要素でなくtranslate属性を持たない場合、いずれの場合でも、要素の翻訳モードはその親要素（存在する場合）の状態と同じか、親要素がnullの場合はtranslate-enabled状態になります。
要素が 翻訳可能 状態にある場合、その要素の 翻訳可能属性 とその 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 > dir 属性
すべての現在のエンジンでサポートされています。
dir 属性は 列挙属性 であり、次のキーワードと状態を持ちます:
| キーワード | 状態 | 簡潔な説明 |
|---|---|---|
ltr
| LTR | 要素の内容は左から右へのテキストとして明示的に方向が隔離されます。 |
rtl
| RTL | 要素の内容は右から左へのテキストとして明示的に方向が隔離されます。 |
auto
| Auto | 要素の内容は明示的に方向が隔離されますが、その方向は要素の内容を使用してプログラムによって決定されます（以下に説明します）。 |
Auto 状態で使用されるヒューリスティックは非常に粗いです （双方向アルゴリズムの段落レベルの決定に類似した方法で、最初の強い方向性を持つ文字のみを見ます）。著者は、テキストの方向が本当に不明で、サーバーサイドで適用できるより良いヒューリスティックがない場合にのみ、この値を最後の手段として使用するように勧められています。 [BIDI]
要素の 方向性 （HTML
要素に限らず、任意の要素）は、 'ltr' または 'rtl' のいずれかです。要素
element の 方向性 を計算するには、
element の dir 属性状態を基に判断します:
dir 属性は HTML 要素 のみ定義されているため、他の名前空間の要素には存在し得ません。したがって、他の名前空間の要素は常に 親方向性 を使用することになります。
自動方向性を持つフォーム関連要素 は次のとおりです:
自動方向性 を要素 element に対して計算するには:
element が 自動方向性を持つフォーム関連要素 である場合:
element が slot
要素で、その ルート が シャドウルート
であり、element の 割り当てられたノード
が空でない場合:
それぞれのノードchildに対して、elementの割り当てられたノードのうち:
childDirectionをnullに設定します。
childがTextノードである場合、childDirectionをchildのテキストノードの方向性に設定します。
その他の場合:
childDirectionをchildの含まれるテキストの自動方向性に設定します。ルートを除外できるかをtrueに設定して。
childDirectionがnullでない場合、childDirectionを返します。
nullを返します。
次にelementの含まれるテキストの自動方向性を返します。ルートを除外できるかをfalseに設定します。
含まれるテキストの自動方向性を、要素elementに対して計算するには:
それぞれのノードdescendantに対して、elementの子孫のうち、ツリー順に:
以下のいずれかが含まれる場合
以下のいずれかの場合
descendantがTextノードでない場合、続行します。
descendantのテキストノードの方向性をresultに設定します。
resultがnullでない場合、resultを返します。
nullを返します。
テキストノードの方向性を、Textノードtextに対して計算するには:
親方向性を、要素elementに対して計算するには:
この属性は双方向アルゴリズムを含むレンダリング要件があります。
HTML要素の属性の方向性は、その属性のテキストが何らかの形でレンダリングに含まれるときに使用されますが、次のリストの最初の適切なステップに従って決定されます:
以下の属性は方向性対応の属性です:
document.dir [ = value ]
設定可能であり、html要素のdir属性の値を「ltr」、「rtl」、または「auto」のいずれかに置き換えることができます。
html要素が存在しない場合、空の文字列を返し、新しい値は無視されます。
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
dir
著者は、CSSを使用するのではなく、dir属性を使用してテキストの方向性を指定することを強くお勧めします。これにより、CSSがない場合でもドキュメントが正しくレンダリングされ続けるためです（例:
検索エンジンによって解釈される場合など）。
このマークアップフラグメントは、IMチャットの会話を示しています。
< 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要素のデフォルトの配置スタイル（つまり段落の開始端にテキストを整列する）を与えると、レンダリング結果は次のようになる可能性があります。
前述のように、auto値は万能ではありません。この例の最後の段落はアラビア文字で始まるため、右から左のテキストとして誤解され、「right?」がアラビア文字の左に配置される結果になります。
style 属性すべての現在のエンジンでサポートされています。
すべてのHTML 要素には、styleコンテンツ属性が設定できます。これは、CSS Style
Attributesで定義されているスタイル属性です。[CSSATTR]
CSSをサポートするユーザーエージェントでは、属性が追加されるか値が変更された際に、その属性の値がスタイル属性の規則に従って解析される必要があります。[CSSATTR]
しかし、属性の要素のインライン動作がコンテンツセキュリティポリシーによってブロックされるべきかどうかアルゴリズムを属性の要素、「スタイル属性」、および属性の値で実行した際に「ブロック」と判断された場合、属性値で定義されたスタイルルールは要素には適用されません。[CSP]
ドキュメントが任意の要素にstyle属性を使用する場合、それらの属性が削除されても理解可能で使える状態でなければなりません。
特に、style属性を使用してコンテンツを非表示にしたり表示したり、またはドキュメントに他に含まれていない意味を伝えることは非準拠です（コンテンツを非表示にしたり表示したりするには、属性を使用してください）。
element.style
要素のstyle属性に対応するCSSStyleDeclarationオブジェクトを返します。
styleIDL属性は、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 > data-*
属性
すべての現在のエンジンでサポートされています。
カスタムデータ属性とは、名前空間を持たず、名前が
"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」属性は、「claim」をドイツ語に翻訳する際にMyTrans製品が使用する特定のテキストを提供します。ただし、標準のtranslate属性は、「HTML」がすべての言語で変更されないように指示しています。標準の属性が利用できる場合、カスタムデータ属性を使用する必要はありません。
この例では、PaymentRequestの機能検出の結果をカスタムデータ属性に保存し、チェックアウトページを異なるスタイルで表示するためにCSSで使用することができます。
< script >
if ( 'PaymentRequest' in window) {
document. documentElement. dataset. hasPaymentRequest = '' ;
}
</ script > ここで、data-has-payment-request属性は、ブール属性として効果的に使用されています。属性の存在を確認するだけで十分です。しかし、著者が望む場合、後で機能の限定された機能を示す値を格納することもできます。
すべてのHTML要素には、任意の数のカスタムデータ属性を指定し、任意の値を持たせることができます。
著者は、これらの拡張が無視され、関連するCSSが削除されてもページが引き続き使用可能であるように慎重に設計する必要があります。
ユーザーエージェントは、これらの属性や値から実装動作を派生させてはなりません。ユーザーエージェントを対象とした仕様は、これらの属性に意味のある値を定義してはなりません。
JavaScriptライブラリは、カスタムデータ属性を使用することができます。それらは、使用されるページの一部と見なされるからです。多くの著者が再利用するライブラリの著者は、競合のリスクを減らすために、属性名に名前を含めることを推奨します。また、可能であれば、ライブラリ著者は、属性名に使用する正確な名前をカスタマイズできるAPIを提供することをお勧めします。そうすれば、同じ名前を知らずに選んだライブラリを同じページで使用したり、互換性のない複数のバージョンを同じページで使用することができます。
たとえば、「DoQuery」というライブラリは、data-doquery-rangeのような属性名を使用し、「jJo」というライブラリは、data-jjo-rangeのような属性名を使用することができます。また、jJoライブラリは、使用するプレフィックスを設定するAPIを提供することができます（例：J.setDataPrefix('j2')、これにより、属性名がdata-j2-rangeになります）。
element.dataset
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
要素のdata-*属性のためのDOMStringMapオブジェクトを返します。
ハイフンで区切られた名前はキャメルケースに変換されます。例えば、data-foo-bar=""はelement.dataset.fooBarとなります。
datasetIDL属性は、要素上のすべてのdata-*属性への便利なアクセサを提供します。取得時に、datasetIDL属性は、この要素に関連付けられた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ハイフンマイナス文字(-)が含まれており、ASCIIの小文字アルファベットが続いている場合、U+002Dハイフンマイナス文字(-)を削除し、その後に続く文字を同じ文字で置き換え、ASCII大文字に変換します。
listを返します。
DOMStringMapオブジェクトのサポートされているプロパティ名は、その瞬間に名前と値のペアを取得して返される各ペアの名前であり、その瞬間に返される順序で返されます。
名前付きプロパティの値を決定するには、nameと、リストにある名前がDOMStringMapで取得された名前と値のペアのリストの名前要素であり、値要素を返します。
新しい名前付きプロパティの値を設定する、または既存の名前付きプロパティの値を設定するには、プロパティ名nameと新しい値valueを指定して、次の手順を実行します。
nameがU+002Dハイフンマイナス文字(-)を含み、その後にASCIIの小文字アルファベットが続く場合、"SyntaxError"をスローします。DOMException。
name内の各ASCII大文字に対して、文字の前にU+002Dハイフンマイナス文字(-)を挿入し、その文字を同じ文字で置き換え、ASCII小文字に変換します。
nameの先頭にdata-文字列を挿入します。
name が
有効な属性ローカル名
でない場合は、
"InvalidCharacterError"
DOMException
をスローする。
属性値を設定します、DOMStringMapのnameとvalueを使用して、関連付けられた要素を使用します。
既存の名前付きプロパティを削除するnameのために、次の手順を実行します。
name内の各ASCII大文字に対して、文字の前にU+002Dハイフンマイナス文字(-)を挿入し、その文字を同じ文字で置き換え、ASCII小文字に変換します。
nameの先頭にdata-文字列を挿入します。
名前によって属性を削除します、nameとDOMStringMapのnameと関連付けられた要素を使用します。
このアルゴリズムは、[WEBIDL]によって、名前と値のペアを取得するために以前のアルゴリズムによって与えられた名前に対してのみ呼び出されます。
例えば、ウェブページが宇宙船を表す要素を持ちたい場合（例えば、ゲームの一部として）、それはクラス属性と共に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' ) && // 'class' 属性をチェックします
node. dataset. x == x && // 'data-x' 属性を読み取ります
node. dataset. y == y) { // 'data-y' 属性を読み取ります
var hp = parseInt( node. dataset. hp); // 'data-hp' 属性を読み取ります
hp = hp - damage;
if ( hp < 0 ) {
hp = 0 ;
node. dataset. ai = 'dead' ; // 'data-ai' 属性を設定します
delete node. dataset. ability; // 'data-ability' 属性を削除します
}
node. dataset. hp = hp; // 'data-hp' 属性を設定します
}
} innerText および outerText プロパティすべての現行エンジンでサポートされています。
element.innerText [ = value ]
要素の「レンダリングされた」テキストコンテンツを返します。
指定された値で要素の子を置き換えることができますが、改行はbr要素に変換されます。
element.outerText [ = value ]
要素の「レンダリングされた」テキストコンテンツを返します。
指定された値で要素を置き換えることができますが、改行はbr要素に変換されます。
テキスト取得手順は、HTMLElement elementに対して次のように行います:
もしelementがレンダリングされていないか、ユーザーエージェントが非CSSユーザーエージェントの場合、elementの子孫テキストコンテンツを返します。
このステップは驚くべき結果を生むことがあります。たとえば、innerTextゲッターがレンダリングされていない要素で呼び出された場合、そのテキストコンテンツが返されますが、レンダリングされている要素でアクセスされた場合、レンダリングされていないすべての子要素のテキストコンテンツは無視されます。
resultsを新しい空のリストとします。
elementの各子ノードnodeに対して:
currentを、レンダリングされたテキスト収集手順をnodeで実行した結果として得られるリストとします。resultsの各項目は文字列または正の整数（必須の改行数）となります。
直感的には、必須の改行数の項目は、そのポイントに一定数の改行が出現することを意味しますが、これらは隣接する必須の改行数の項目によって誘導される改行とともに折り畳まれることがあります。これはCSSのマージン折り畳みと似ています。
current内の各項目itemについて、itemをresultsに追加します。
削除します。resultsから空の文字列となる項目を削除します。
削除します。resultsの先頭または末尾にある連続した必須の改行数項目のランを削除します。
置換します。残りの連続する必須の改行数項目のランを、それぞれの必須の改行数項目の値の最大値と同じ数のU+000A LFコードポイントを含む文字列に置き換えます。
resultsの文字列項目を連結して返します。
すべての現在のエンジンでサポートされています。
レンダリングされたテキスト収集手順は、ノード nodeに対して次のように行います:
itemsを、nodeの各子ノードに対してレンダリングされたテキスト収集手順を実行し、その結果をリストとして連結したものにします。
もしnodeの計算値が'visibility'が'visible'でない場合、itemsを返します。
もしnodeがレンダリングされていない場合、itemsを返します。このステップの目的のために、次の要素は、計算値が'display'が'none'でない場合に記載されているように動作しなければなりません:
select
要素には関連付けられた非置換インラインCSS
ボックスがあり、その子ボックスにはoptgroupおよび
option
要素の子孫ノードのみが含まれます。
optgroup
要素には関連付けられた非置換ブロックレベルCSS
ボックスがあり、その子ボックスにはoption要素の子孫ノードのみが含まれます。そして
option
要素には関連付けられた非置換ブロックレベルCSS
ボックスがあり、その子ボックスは非置換ブロックレベルCSS ボックスの場合と同様です。
itemsは'display:contents'のために空でない可能性があります。
もしnodeがテキストノードである場合、nodeが生成する各CSSテキストボックスに対して、内容の順番で、そのボックスのテキストをCSSの'white-space'処理ルールと'text-transform'ルールを適用した後のテキストを計算し、itemsを得られた文字列のリストに設定し、itemsを返します。
CSSの'white-space'処理ルールは若干修正されます。行の終わりの折り畳み可能なスペースは常に折り畳まれますが、行がブロックの最後の行であるか、br要素で終了する場合にのみ削除されます。ソフトハイフンは保持されるべきです。
[CSSTEXT]
もしnodeの計算値が'display'が'table-cell'であり、nodeのCSSボックスが、それを囲む'table-row'ボックスの最後の'table-cell'ボックスでない場合、追加します。itemsにU+0009 TABコードポイントを含む文字列を追加します。
もしnodeの計算値が'display'が'table-row'であり、nodeのCSSボックスが最も近い祖先'table'ボックスの最後の'table-row'ボックスでない場合、追加します。itemsにU+000A LFコードポイントを含む文字列を追加します。
もしnodeの使用値が'display'がブロックレベルまたは'テーブルキャプション'である場合、追加します。itemsの先頭と末尾に1（必須の改行数）を追加します。[CSSDISPLAY]
フロートや絶対配置された要素はこのカテゴリに該当します。
itemsを返します。
注意、ほとんどの置換要素の子ノード（例：textarea、
input、
video — ただし
buttonは除く）は、
厳密にはCSSによってレンダリングされず、このアルゴリズムの目的にはCSSボックスを持ちません。
このアルゴリズムはレンジに対して一般化して動作するようにすることができます。これにより、Selectionの文字列化に使用できる基盤となり、おそらくレンジで直接公開することができます。詳細はBugzilla bug 10583をご覧ください。
内部テキスト設定手順は、HTMLElement elementと文字列valueが与えられた場合に以下を実行します:
fragmentを、elementのノードドキュメントが与えられたvalueのためのレンダリングされたテキストフラグメントにします。
すべてを置き換えるでelement内のfragmentを使用します。
innerTextの
セッターステップは、内部テキスト設定手順を実行することです。
outerTextの
セッターステップは以下の通りです:
もしthisの親がnullである場合、"NoModificationAllowedError" DOMExceptionをスローします。
fragmentを、与えられた値のためにレンダリングされたテキストフラグメントにします。
もしfragmentに子ノードがない場合、新しいテキストノードを追加します。データが空の文字列であり、ノードドキュメントがthisのノードドキュメントである新しいノードをfragmentに追加します。
もしnextがnullでなく、nextの前の兄弟ノードがテキストノードである場合、nextの次のテキストノードとマージします。
もしpreviousがテキストノードである場合、previousを用いて次のテキストノードとマージします。
レンダリングされたテキストフラグメントは、documentが与えられたドキュメントに対して、文字列inputのために次の手順を実行します:
fragmentを、新しいドキュメントフラグメントにします。そのノードドキュメントはdocumentです。
positionをinputの位置変数に設定し、初期値はinputの先頭を指します。
textを空の文字列にします。
positionがinputの終わりを過ぎていない間:
コードポイントのシーケンスを収集するを行います。U+000A LFまたはU+000D CRではないコードポイントをinputから収集し、positionに設定します。
もしtextが空の文字列でない場合、新しいテキストノードをfragmentに追加します。そのデータはtextであり、ノードドキュメントはdocumentです。
positionがinputの終わりを過ぎていない間、およびpositionにあるコードポイントがU+000A LFまたはU+000D CRである間:
fragmentを返します。
次のテキストノードとマージは、テキストノードnodeが与えられた場合に以下を実行します:
テキストコンテンツがHTML要素に含まれるテキストノード内や、自由形式のテキストを許可するHTML要素の属性内には、U+202AからU+202EおよびU+2066からU+2069の範囲にある文字（双方向アルゴリズム書式設定文字）が含まれることがあります。[BIDI]
著者は、双方向アルゴリズム書式設定文字を手動で管理するのではなく、dir属性、bdo要素、およびbdi要素を使用することが推奨されます。双方向アルゴリズム書式設定文字はCSSと相性が悪いです。
ユーザーエージェントは、文書や文書の一部をレンダリングする際に文字の適切な順序を決定するために、Unicode双方向アルゴリズムを実装しなければなりません。[BIDI]
HTMLをUnicode双方向アルゴリズムにマッピングする方法は3つのいずれかでなければなりません。ユーザーエージェントはCSSを実装しなければならず、特にCSSの'unicode-bidi'、'direction'、および'content'プロパティを実装しなければならず、そのユーザーエージェントスタイルシートにこの仕様のレンダリングセクションに記載されているこれらのプロパティを使用したルールが含まれている必要があります。あるいは、ユーザーエージェントは、上述のプロパティのみを実装し、文書に指定されたスタイルシートがそれらを上書きしないようにしつつ、ユーザーエージェントスタイルシートがすべての前述のルールを含んでいるかのように振る舞う必要があります。または、ユーザーエージェントは同等のセマンティクスを持つ他のスタイリング言語を実装しなければなりません。[CSSGC]
次の要素と属性には、レンダリングセクションで定義されている要件があり、このセクションの要件により、すべてのユーザーエージェントに対して（推奨されるデフォルトのレンダリングをサポートするものだけでなく）要件が課されます:
ユーザーエージェントがHTML要素HTML要素でアクセシビリティAPIのセマンティクスを実装するための要件は、HTML Accessibility API Mappingsに定義されています。また、カスタム要素elementに対して、デフォルトのARIAロールセマンティクスは次のように決定されます:[HTMLAAM]
mapをelementの内部コンテンツ属性マップに設定します。
もしmap["role"]が存在する場合、それを返します。
ロールを返しません。
同様に、カスタム要素elementに対して、ARIAステートおよびプロパティセマンティクスのデフォルトは、stateOrPropertyという名前のステートまたはプロパティに対して、次のように決定されます:
もしelementのアタッチされた内部がnullでない場合:
もしelementのアタッチされた内部の関連するstateOrProperty要素を取得するが存在する場合、それを実行した結果を返します。
もしelementのアタッチされた内部の関連するstateOrProperty要素を取得するが存在する場合、それを実行した結果を返します。
もしelementの内部コンテンツ属性マップ[stateOrProperty]が存在する場合、それを返します。
stateOrPropertyのデフォルト値を返します。
ここで言及されている「デフォルトのセマンティクス」は、ARIAで「ネイティブ」、「暗黙的」、または「ホスト言語セマンティクス」とも呼ばれることがあります。[ARIA]
これらの定義の1つの含意は、デフォルトのセマンティクスが時間とともに変化する可能性があるということです。これにより、カスタム要素は組み込み要素と同様の表現力を持つことができます。たとえば、a要素のデフォルトのARIAロールセマンティクスが、href属性の追加や削除によってどのように変わるかと比較できます。
この動作の例については、カスタム要素セクションを参照してください。
ARIA roleおよびaria-*属性の使用をチェックするための適合チェッカーの要件は、ARIA in
HTMLに定義されています。[ARIAHTML]
html 要素すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
head 要素の後に
body 要素が続く。
html 要素の開始タグは、html 要素内の最初の要素がコメントでない場合、省略できます。
html 要素の終了タグは、html 要素の直後にコメントがない場合、省略できます。
[Exposed =Window ]
インターフェース HTMLHtmlElement : HTMLElement {
[HTMLConstructor ] コンストラクタ ();
// 非推奨メンバーも含む
};著者は、ルート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 > head
要素すべての現行エンジンでサポートされています。
すべての現行エンジンでサポートされています。
html要素の最初の要素として。
iframe
srcdocドキュメントである場合、または上位プロトコルからタイトル情報が提供されている場合:
メタデータ内容の0個以上の要素。その中にtitle要素は1つのみ、base要素は1つのみ。
title要素は1つのみ、base要素は1つのみ。
head要素の開始タグは、要素が空の場合、またはhead要素内の最初のものが要素の場合、省略可能です。
head要素の終了タグは、head要素が直後にASCII ホワイトスペースまたはコメントがない場合、省略可能です。
[Exposed =Window ]
interface HTMLHeadElement : HTMLElement {
[HTMLConstructor ] constructor ();
};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要素は省略できます。
title
要素すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
title要素を含まないhead要素内で。
[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.titleIDL属性によって与えられます。
ユーザーエージェントは、ユーザーインターフェイスでドキュメントを参照する際に、ドキュメントのタイトルを使用する必要があります。title要素の内容がこのように使用される場合、そのtitle要素の方向性を使用して、ユーザーインターフェイス内でドキュメントのタイトルの方向性を設定する必要があります。
base
要素すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
base要素を含まないhead要素内で。
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属性が指定されている場合、それには有効なナビゲーション可能なターゲット名またはキーワードが含まれている必要があります。これは、ナビゲーション可能な要素がハイパーリンクおよびフォームがナビゲーションを行う際のデフォルトとして使用されることを指定します。
base要素がtarget属性を持つ場合、それはツリー内のハイパーリンクを表す要素の前に配置されなければなりません。
複数のbase要素がtarget属性を持つ場合、最初の要素以外は無視されます。
base要素が最初のbase要素であり、hrefコンテンツ属性を持つ要素である場合、凍結された基本 URLを持ちます。次のいずれかの状況が発生したときに、凍結された基本 URLを即座に設定しなければなりません。
凍結された基本 URL を設定するには、要素elementに対して次の手順を実行します：
elementのノードドキュメントをdocumentとします。
urlRecordを、elementのhrefコンテンツ属性の値をdocumentのフォールバック基本
URLおよびdocumentの文字エンコーディングで解析した結果とします。（したがって、base要素は自身に影響を受けません。）
次のいずれかが真である場合：
urlRecordが失敗である場合；
urlRecordのスキームが「data」または「javascript」である場合；
urlRecordおよびdocumentに対してドキュメントに対して base
が許可されているかを実行し、「Blocked」が返される場合、elementの凍結された基本 URLをdocumentのフォールバック基本 URLに設定し、終了します。
elementの凍結された基本 URLをurlRecordに設定します。
基本URL変更に応答するを document に対して実行します。
hrefIDL属性は、取得時に次のアルゴリズムを実行した結果を返す必要があります：
elementのノードドキュメントをdocumentとします。
urlを、この要素のhref属性の値（存在する場合）とし、存在しない場合は空文字列とします。
urlRecordを、documentのフォールバック基本 URLおよびdocumentの文字エンコーディングでurlを解析した結果とします。（したがって、base要素は他のbase要素や自身の影響を受けません。）
urlRecordが失敗した場合、urlを返します。
urlRecordのシリアル化を返します。
この例では、base要素を使用して、ドキュメントの基本 URLを設定しています：
<!DOCTYPE html>
< html lang = "en" >
< head >
< title > This is an example for the < base> 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" へのリンクになります。
link要素すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
Support in all current engines.
Support in all current engines.
noscript要素の中で、かつhead要素の子として。href — ハイパーリンクのアドレスcrossorigin —
要素がクロスオリジンリクエストをどのように処理するかrel — ハイパーリンクを含む文書とリンク先のリソースとの関係media — 適用可能なメディア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のサポートされるトークンは、HTMLリンクタイプで定義されており、link要素に許可されているもの、処理モデルに影響を与えるもの、そしてユーザーエージェントでサポートされているものです。可能なサポートされるトークンは以下の通りです：alternate、dns-prefetch、expect、icon、manifest、modulepreload、next、pingback、preconnect、prefetch、preload、search、およびstylesheetです。relのサポートされるトークンは、ユーザーエージェントが処理モデルを実装しているこのリストのトークンのみを含める必要があります。
理論的には、canonicalキーワードの処理モデルをサポートするユーザーエージェントが存在する可能性がありますが、それはJavaScriptを実行する検索エンジンである場合に限られます。しかし、実際にはそれは非常にまれです。したがって、ほとんどの場合、canonicalはrelのサポートされるトークンに含めるべきではありません。
link要素は、rel属性またはitemprop属性のいずれか一方、しかし両方ではなく、を持つ必要があります。
link要素がitemprop属性を持っているか、またはrel属性にbody-okとして指定されているキーワードのみが含まれている場合、その要素は本文に許可されるとされます。これは、その要素がフレージングコンテンツが期待される場所で使用できることを意味します。
もしrel属性が使用されている場合、この要素はページのbody内でのみ使用できる場合があります。itemprop属性と一緒に使用される場合、この要素はhead要素内およびページのbody内の両方で使用できますが、これはマイクロデータモデルの制約を受けます。
link要素を使用して、2つのカテゴリのリンクを作成できます:
外部リソースへのリンクとハイパーリンクです。リンクタイプのセクションでは、特定のリンクタイプが外部リソースかハイパーリンクかを定義しています。1つのlink要素は、複数のリンクを作成できます（そのうちのいくつかは外部リソースリンクで、他はいくつかはハイパーリンクであるかもしれません）。どのリンクがどれだけ作成されるかは、rel属性に指定されたキーワードによって決まります。ユーザーエージェントは、リンクを要素単位ではなく、リンク単位で処理する必要があります。
1つのlink要素で作成される各リンクは、個別に処理されます。例えば、link要素が2つあり、どちらもrel="stylesheet"である場合、それぞれが別個の外部リソースと見なされ、各リソースはそれぞれの属性によって独立して影響を受けます。同様に、1つのlink要素がrel属性にnext stylesheetの値を持つ場合、それはnextキーワードによって1つのハイパーリンクとstylesheetキーワードによって1つの外部リソースリンクを作成し、他の属性（例えばmediaやtitle）によって異なる影響を受けます。
例えば、次のlink要素は、同じページへの2つのハイパーリンクを作成します：
< link rel = "author license" href = "/about" > この要素によって作成される2つのリンクは、1つが現在のページの著者に関する情報を持っているという意味を持ち、もう1つが現在のページが提供されているライセンスに関する情報を持っているという意味を持っています。
ハイパーリンクは、link要素とそのrel属性で作成され、ドキュメント全体に適用されます。これは、rel属性を持つaやarea要素とは対照的であり、これらの要素はドキュメント内でリンクが配置された場所によってリンクのコンテキストが決まります。
aおよびarea要素によって作成されたリンクとは異なり、ハイパーリンクは、link要素によって作成されても、デフォルトではドキュメントの一部として表示されません。これらのリンクは主にセマンティック情報を提供し、その情報はページやページのコンテンツを消費する他のソフトウェアによって使用される可能性があります。さらに、ユーザーエージェントは、そのようなハイパーリンクをたどるための独自のUIを提供することができます。
外部リソースへのリンクの正確な動作は、関連するリンクタイプで定義された正確な関係に依存します。
crossorigin属性は、CORS設定属性です。これは、外部リソースリンクでの使用を意図しています。
media属性は、リソースが適用されるメディアを指定します。値は有効なメディアクエリリストでなければなりません。
すべての現在のエンジンでサポートされています。
integrity
属性は、この要素が担当するリクエストの
整合性メタデータ
を表します。値はテキストです。この属性は、link
要素で、rel 属性に
stylesheet、
preload、
または modulepreload
キーワードを含む場合にのみ指定する必要があります。 [SRI]
hreflang 属性は、
link 要素にあり、
hreflang
属性と同じ意味を持ちます。
type 属性は、リンクされたリソースの
MIME
タイプ
を指定します。これは純粋に参考のためのものです。値は 有効な MIME
タイプ文字列
でなければなりません。
外部リソースリンク の場合、
type 属性は、ユーザーエージェントがサポートしていないリソースを
フェッチしないようにするためのヒントとして使用されます。
referrerpolicy属性は、リファラーポリシー属性です。これは外部リソースリンクでの使用を意図しており、リンクされたリソースをフェッチおよび処理する際に使用されるリファラーポリシーを設定するのに役立ちます。[REFERRERPOLICY]
title 属性はリンクのタイトルを指定します。
1つの例外を除いて、これは純粋に参考のためのものです。その例外は、ドキュメントツリー内 にある
スタイルシートリンクの場合で、この場合、title 属性は、
CSS スタイルシートセット を定義します。
title 属性は、
link 要素のグローバル属性である
title 属性とは異なります。
他の多くの要素においては、タイトルのないリンクは親要素のタイトルを継承しません。それは単にタイトルがないだけです。
imagesrcset属性が存在する可能性があり、これはsrcset属性です。
imagesrcset属性とhref属性（幅記述子が使用されていない場合）を一緒に使用すると、画像ソースがソースセットに追加されます。
もしimagesrcset属性が存在し、かつ画像候補文字列が幅記述子を使用している場合、imagesizes属性も存在する必要があり、これはサイズ属性です。imagesizes属性はソースサイズをソースセットに提供します。
imagesrcset属性とimagesizes属性は、link要素にのみ指定する必要があります。この要素には、rel属性にpreloadキーワードが指定されていること、およびas属性が"image"状態にあることが条件となります。
これらの属性を使用すると、後で対応するsrcsetおよびsizes属性を持つimg要素で使用される適切なリソースをプリロードできます。
< link rel = "preload" as = "image" imagesrcset = "wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes = "50vw" > この例では、href属性を省略しています。これは、imagesrcsetをサポートしないブラウザに対してのみ関連性があり、その場合、誤った画像がプリロードされる可能性があるためです。
imagesrcset属性は、media属性と組み合わせて使用することができ、アートディレクション用のリソースを適切にプリロードできます。
< link rel = "preload" as = "image" imagesrcset = "dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x" media = "(max-width: 800px)" > sizes属性は、視覚メディア用のアイコンのサイズを指定します。値が存在する場合、それは単なるアドバイスです。ユーザーエージェントは、複数のアイコンが利用可能な場合にどのアイコンを使用するかを決定するために値を使用する可能性があります。指定されている場合、属性の値は一意のスペースで区切られたトークンの順序のないセットであり、ASCII大文字と小文字を区別しないである必要があります。各値は、文字列"any"とASCII大文字と小文字を区別しない一致を持つか、または有効な非負整数2つで構成され、それらはU+0030DIGIT
ZERO
(0)文字を先頭に持たず、1つのU+0078 LATIN SMALL LETTER XまたはU+0058 LATIN CAPITAL LETTER X文字で区切られます。この属性は、link要素にのみ指定される必要があります。この要素にはrel属性が指定されており、アイコンキーワードまたはapple-touch-iconキーワードを指定している必要があります。
apple-touch-iconキーワードは、リンクタイプの事前定義セットへの拡張として登録されていますが、ユーザーエージェントはこれをサポートする必要はありません。
as属性は、href属性で指定されたリソースのプリロードリクエストの潜在的な宛先を指定します。これは列挙された属性です。各潜在的な宛先は、この属性のキーワードであり、同名の状態にマッピングされます。この属性は、link要素に指定する必要があり、rel属性にpreloadキーワードが含まれている必要があります。link要素には、rel属性にmodulepreloadキーワードが含まれている場合に指定することができます。その場合、スクリプトに類似した宛先の値を持たなければなりません。他のlink要素では、指定する必要はありません。
as属性の使用方法に関する処理モデルは、個々のリンクタイプのリンクされたリソースのフェッチおよび処理アルゴリズムに記載されています。
この属性には、欠落値のデフォルトまたは無効値のデフォルトがありません。したがって、属性の無効な値や欠落した値は、どの状態にもマップされません。これは処理モデルで考慮されています。preloadリンクの場合、どちらの条件もエラーです。modulepreloadリンクの場合、欠落値は"script"として扱われます。
blocking属性は、ブロッキング属性です。この属性は、stylesheetおよびexpectリンクタイプで使用され、これらのキーワードを含むrel属性を持つリンク要素にのみ指定される必要があります。
color属性はmask-iconリンクタイプで使用されます。この属性は、link要素にのみ指定される必要があります。この要素にはrel属性が含まれ、mask-iconキーワードを含んでいる必要があります。値は、CSSの<color>プロダクションと一致する文字列である必要があり、サイトをピン留めした際にユーザーが表示するアイコンの表示をカスタマイズするための推奨される色を定義します。
この仕様には、color属性に関するユーザーエージェントの要件は含まれていません。
mask-iconキーワードは、リンクタイプの事前定義セットへの拡張として登録されていますが、ユーザーエージェントはこれをサポートする必要はありません。
link要素には、明示的に有効化されているかどうかを示すブール値が関連付けられています。これは初期状態ではfalseです。
disabled属性はブール属性であり、stylesheetリンクタイプで使用されます。この属性は、link要素にのみ指定される必要があります。この要素にはrel属性が含まれ、stylesheetキーワードを含んでいる必要があります。
disabled属性を動的に削除すると、例えばdocument.querySelector("link").removeAttribute("disabled")を使用することで、スタイルシートがフェッチされて適用されます。
< link disabled rel = "alternate stylesheet" href = "css/pooh" > fetchpriority属性はフェッチ優先度属性であり、外部リソースリンクで使用することを目的としています。ここでは、リンクされたリソースをフェッチして処理する際に使用される優先順位を設定します。
color属性には反映されるIDL属性がありませんが、これは後で追加される可能性があります。
すべての現在のエンジンでサポートされています。
crossOriginIDL属性は、crossoriginコンテンツ属性を反映し、既知の値のみに限定されます。
HTMLLinkElement/referrerPolicy
すべての現在のエンジンでサポートされています。
referrerPolicyIDL属性は、referrerpolicyコンテンツ属性を反映し、既知の値のみに限定されます。
fetchPriorityIDL属性は、fetchpriorityコンテンツ属性を反映し、既知の値のみに限定されます。
relList属性は、supports()メソッドを呼び出して、どのリンクの種類がサポートされているかを確認することで、機能検出に利用できます。
media 属性の処理リンクが ハイパーリンク である場合、media
属性は純粋に助言的なものであり、当該文書がどのメディア向けに設計されているかを説明します。
しかし、リンクが 外部リソースリンク
である場合、media
属性は強制的です。ユーザーエージェントは、media 属性の値が環境と一致する場合、他の関連する条件が適用されるときに外部リソースを適用し、そうでない場合は適用してはなりません。
media
属性が省略された場合のデフォルトは「all」であり、デフォルトではリンクはすべてのメディアに適用されることを意味します。
外部リソースにはその適用範囲を制限するさらなる制約が定義されている場合があります。たとえば、CSSスタイルシートには@mediaブロックが含まれていることがあります。この仕様は、そのような追加の制約や要件を上書きしません。
type 属性の処理 type
属性が存在する場合、ユーザーエージェントはリソースが指定されたタイプであると仮定しなければなりません（たとえそれが有効なMIMEタイプ文字列ではない場合、例えば空文字列であっても）。属性が省略されているが、外部リソースリンク
タイプにデフォルトのタイプが定義されている場合、ユーザーエージェントはリソースがそのタイプであると仮定しなければなりません。ユーザーエージェントが指定されたリンクの関係に対して指定されたMIMEタイプをサポートしていない場合、ユーザーエージェントはリンクされたリソースを取得および処理してはならず、ユーザーエージェントが指定されたリンク関係に対して指定されたMIMEタイプをサポートしている場合、ユーザーエージェントは外部リソースリンクの特定のタイプに指定された適切なタイミングでリンクされたリソースを取得および処理する必要があります。属性が省略されていて、外部リソースリンクのタイプにデフォルトのタイプが定義されていないが、ユーザーエージェントがタイプが既知でサポートされている場合にリンクされたリソースを取得および処理する場合、ユーザーエージェントはリンクされたリソースがサポートされると仮定して取得および処理するべきです。
ユーザーエージェントは、 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スタイルシートのみをサポートする準拠したユーザーエージェントは、BファイルとCファイルを取得し、Aファイルをスキップします（text/plainがCSSスタイルシートのMIMEタイプではないため）。
BファイルとCファイルについては、次にサーバーによって返された実際のタイプを確認します。それらが text/cssとして送信された場合、スタイルが適用されますが、それが
text/plain、またはその他のタイプとしてラベル付けされている場合は適用されません。
もし2つのファイルのうち1つが Content-Type メタデータ
なしで返されたり、「null」のような構文的に誤ったタイプで返されたりした場合、stylesheetリンクのデフォルトタイプが適用されます。このデフォルトタイプが
text/cssであるため、スタイルシートは適用されます。
link
要素からリソースを取得して処理するすべての外部リソースリンクは、リンクされたリソースの取得と処理
アルゴリズムを持ち、これはlink
要素elを引数とします。また、リンクされたリソースの取得準備ステップがあり、これはlink
要素elとリクエストrequestを引数とします。個別のリンクタイプが独自のリンクされたリソースの取得と処理アルゴリズムを提供することがありますが、特に明記されていない限り、デフォルトの取得と処理アルゴリズムを使用します。
同様に、個別のリンクタイプが独自のリンクされたリソースの取得準備ステップを提供することがありますが、特に明記されていない限り、これらのステップは常にtrueを返します。
デフォルトのリンクされたリソースの取得と処理は、link
要素elを引数として以下の手順で行います：
optionsをリンク要素からオプションを作成する結果として取得します。
requestをリンクリクエストを作成する結果として取得します。
requestがnullである場合、リターンします。
requestの同期フラグを設定します。
リンクされたリソースの取得準備ステップを実行し、elとrequestを渡します。結果がfalseの場合、リターンします。
requestのイニシエータータイプを、elのrel属性にキーワードstylesheetが含まれている場合は「css」、それ以外の場合は「link」に設定します。
リクエストをフェッチし、レスポンス処理ボディを消費するを次の手順で設定し、 レスポンス responseとnull、失敗、またはバイトシーケンス bodyBytesを指定します：
successをtrueに設定します。
次のいずれかがtrueである場合：
その場合、successをfalseに設定します。
CSSのパースエラーやPNGのデコードエラーなど、コンテンツ固有のエラーはsuccessに影響を与えません。
それ以外の場合、リンクリソースのクリティカルサブリソースの読み込みが完了するまで待機します。
リンクタイプのクリティカルサブリソースを定義する仕様（例：CSS）は、これらのサブリソースがどのようにフェッチされ処理されるかを記述することが期待されています。しかし、これは現在明示的ではないため、この仕様ではリンクリソースのクリティカルサブリソースがフェッチされ処理されるのを待つことを記述し、これが正しく行われることを期待しています。
リンクされたリソースを処理するステップを、el、success、response、およびbodyBytesを指定して実行します。
リンクリクエストを作成するためには、リンク処理オプション optionsを使用します：
urlをURLのエンコードとパースの結果として取得し、optionsのhrefを基にoptionsの基本URLに対して相対的に行います。
基本URLをドキュメントや環境の代わりに渡すことはissue #9715によって追跡されています。
urlが失敗した場合、nullを返します。
requestをポテンシャルCORSリクエストを作成する結果として取得し、url、optionsのdestination、およびoptionsのcrossoriginを指定します。
requestのインテグリティメタデータをoptionsのインテグリティに設定します。
requestの暗号学的ナンスメタデータをoptionsの暗号学的ナンスメタデータに設定します。
requestを返します。
ユーザーエージェントは、必要に応じてのみこれらのリソースをフェッチして処理することを選択するかもしれません。すべての外部リソースを事前に積極的にフェッチする代わりに、適用されていないものはフェッチしません。
リンクされたリソースの取得と処理アルゴリズムに類似して、すべての外部リソースリンクは、リンクされたリソースを処理するアルゴリズムを持っており、これにはlink要素el、ブール値success、レスポンスresponse、およびバイトシーケンスbodyBytesを引数とします。個別のリンクタイプが独自のリンクされたリソースを処理するアルゴリズムを提供することがありますが、特に明記されていない限り、そのアルゴリズムは何も行いません。
特定のrelキーワードに対して別段の指定がない限り、要素はその要素のロードイベントを遅延させる必要があります。この遅延は要素のノードドキュメントまで適用され、すべての試みがリンクされたリソースの取得と処理とそのクリティカルサブリソースの完了まで行われます。（ユーザーエージェントがまだフェッチおよび処理を試みていないリソース、例えばリソースが必要になるまで待機しているものはロードイベントを遅延しません。）
Link`
ヘッダーの処理外部リソースリンクとなりうるすべてのリンクタイプは、リンク処理オプションを受け取る、リンクヘッダーを処理するアルゴリズムを定義しています。このアルゴリズムは、HTTPレスポンスヘッダーに`Link`
ヘッダーとして表示された場合に、それらがどのように反応するかを定義します。
ほとんどのリンクタイプでは、このアルゴリズムは何もしません。要約表は、リンクタイプが定義されたリンクヘッダーを処理する手順を持っているかどうかをすばやく確認するのに役立ちます。
link」）DocumentDocumentを受け取るアルゴリズムAuto）
リンク処理オプションにはベースURLとhrefがありますが、これは、URLがオプションのソースセットの結果である可能性があるためです。
リンク要素からリンクオプションを作成するには、link要素elを指定します:
documentをelのノードドキュメントとします。
optionsを次のリンク処理オプションとして新しく作成します。
crossoriginコンテンツ属性の状態
referrerpolicyコンテンツ属性の状態
fetchpriorityコンテンツ属性の状態
もしelがintegrity属性を持っている場合、optionsのintegrityをelのintegrityコンテンツ属性の値に設定します。
アサート: optionsのhrefが空文字列でないか、またはoptionsのソースセットがnullでないか。
link要素がhrefやimagesrcsetを持たない場合、リンクを表しません。
optionsを返します。
ヘッダーからリンクを抽出するには、ヘッダーリスト headersを指定します:
リンクヘッダーを処理するには、Document doc、レスポンス
response、および"pre-media"または"media"phaseを指定します:
各 linkObjectに対して、linksの内容を次のように処理します:
relをlinkObject["relation_type"]として取得します。
attribsをlinkObject["target_attributes"]として取得します。
expectedPhaseを"media"として取得します。もしsrcset、
"imagesrcset",
またはmediaがattribsに存在する場合、それ以外の場合は"pre-media"を取得します。
もしexpectedPhaseがphaseでない場合、処理を続けます。
optionsを次のリンク処理オプションとして新しく作成します。
target_uri"]
パース済みヘッダー属性からリンクオプションを適用をoptions、attribs、relで実行する。それがfalseを返した場合はreturnする。
もしattribs["imagesrcset"]が存在し、attribs["imagesizes"]が存在する場合、optionsのソースセットをlinkObject["target_uri"],
attribs["imagesrcset"],attribs["imagesizes"],およびnullを指定してソースセットを作成します。
リンクヘッダーを処理する手順をrelに対して実行し、optionsを指定します。
パース済みヘッダー属性からリンクオプションを適用するために、リンク処理オプションであるoptions、attribs、文字列relを与えて：
もしrelが"preload"なら：
もしdestinationがnullなら、falseを返す。
optionsのdestinationを destinationに設定する。
もしattribs["crossorigin"]
が存在し、かつASCII大文字小文字を区別せず
CORS設定属性の
キーワードのいずれかに一致する場合は、
optionsのcrossoriginを
そのキーワードに対応するCORS設定属性の状態に設定する。
もしattribs["integrity"]が存在するなら、optionsのintegrityをattribs["integrity"]に設定する。
もしattribs["referrerpolicy"]
が存在し、
ASCII大文字小文字を区別せず
何らかのリファラポリシーに一致する場合は、
optionsのreferrer
policyをそのリファラポリシーに設定する。
もしattribs["nonce"]
が存在するなら、optionsのnonceをattribs["nonce"]に設定する。
もしattribs["fetchpriority"]
が存在しかつASCII大文字小文字を区別せず
フェッチ優先度属性のキーワードに一致する場合は、
optionsのfetch priorityをそのフェッチ優先度属性キーワードに設定する。
trueを返す。
早期ヒントは、ナビゲーションリクエストがサーバーによって完全に処理され、レスポンスコードが提供される前に、ドキュメントによって使用される可能性のあるリソースを推測的にロードするなど、ユーザーエージェントがいくつかの操作を実行できるようにします。サーバーは、最終的なレスポンスを提供する前に、103ステータスコードを使用してレスポンスを提供することで早期ヒントを示すことができます。[RFC8297]
互換性の理由から、早期ヒントは通常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コンテンツが到着する前にロードを開始します。
ナビゲーション中に提供される最初の早期ヒントレスポンスのみが処理され、クロスオリジンリダイレクトが続く場合は破棄されます。
`Link`
ヘッダーに加えて、103レスポンスにコンテンツセキュリティポリシーヘッダーが含まれている可能性があり、早期ヒントを処理する際に適用されます。
たとえば、次のレスポンスシーケンスが与えられた場合:
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 헤더를 처리한다 주어진 response response 및 environment reservedEnvironment에 대해:
Early-hint `Link`
헤더는 항상 최종 response의 `Link`
헤더보다 먼저 처리되고, 다음으로 link 요소가 처리됩니다.
이는 early와 최종 `Link`
헤더의 내용을 각각 Document의 head 요소에 순서대로 앞에 추가하는 것과 동일합니다.
earlyPolicyContainerをresponseとreservedEnvironmentを指定してフェッチレスポンスからポリシーコンテナを作成した結果とします。
これにより、早期ヒントレスポンスにコンテンツセキュリティポリシーを含めることができ、早期ヒントリクエストをフェッチするときに適用されます。
earlyHintsを空のリストとします。
各 linkObjectに対して、linksの内容を次のように処理します:
早期ヒントリンクヘッダーを受信した瞬間に、earlyRequestのフェッチを開始します。Documentが作成される前に戻ってきた場合、そのレスポンスをearlyResponseとして設定し、Documentが作成されると、それをコミットします（link要素であるかのようにプリロードされたリソースのマップで利用可能にします）。Documentが先に作成された場合、レスポンスが利用可能になった時点でそれをコミットします。
relをlinkObject["relation_type"]として取得します。
optionsを次のリンク処理オプションとして新しく作成します。
attribsをlinkObject["target_attributes"]として取得します。
as、
crossorigin、
integrity、
およびtype属性は、早期ヒント処理の一部として処理されます。他の属性、特にblocking、
imagesrcset、
imagesizes、
およびmediaは、Documentが作成された後にのみ適用されます。
パース済みヘッダー属性からリンクオプションを適用をoptions、attribs、relで実行する。それがfalseを返した場合はreturnする。
。optionsを基にrelに対してリンクヘッダーを処理する手順を実行する。
optionsをearlyHintsに追加する。
次のサブステップをDocument docに対して実行します:
各 optionsをearlyHintsに含めます:
もしoptionsのドキュメント準備完了時がnullである場合、optionsのドキュメントをdocに設定します。
そうでない場合、optionsのドキュメント準備完了時を呼び出してdocを渡します。
link要素を使用して作成されたハイパーリンクをユーザーが辿る手段の提供
インタラクティブなユーザーエージェントは、ユーザーにlink要素を使用して作成されたハイパーリンクを辿る手段をユーザーインターフェース内のどこかに提供することができます。このハイパーリンクを辿るアルゴリズムの呼び出しでは、userInvolvement引数を"ブラウザーUI"に設定する必要があります。具体的なインターフェースはこの仕様では定義されていませんが、以下の情報を含むことが考えられます（要素の属性から取得し、以下で定義されているように、いずれかの形式で、可能であれば簡略化された形で）、ドキュメント内の各link要素で作成された各ハイパーリンクについて:
rel属性による）
title属性による）
href属性による）
hreflang属性による）
media属性による）
ユーザーエージェントは、リソースの種類（type属性による）など、他の情報も含めることができます。
meta要素すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
itemprop属性が存在する場合：フローコンテンツ。
itemprop属性が存在する場合：フレージングコンテンツ。
charset属性が存在する場合、または要素のhttp-equiv属性がエンコーディング宣言状態にある場合：head要素内で使用します。
http-equiv属性が存在するが、エンコーディング宣言状態にない場合：head要素内で使用します。
http-equiv属性が存在するが、エンコーディング宣言状態にない場合：noscript要素内で、かつhead要素の子要素として使用します。
name属性が存在する場合：メタデータコンテンツが期待される場所で使用します。
itemprop属性が存在する場合：メタデータコンテンツが期待される場所で使用します。
itemprop属性が存在する場合：フレージングコンテンツが期待される場所で使用します。
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大文字小文字を区別しない一致でなければなりません。
charset属性は、XMLドキュメントでは効果がありませんが、XMLドキュメント間の移行を容易にするために許可されています。
meta要素には、ドキュメントごとにcharset属性を持つ要素が複数存在してはなりません。
content属性は、要素がこれらの目的で使用される場合に、ドキュメントのメタデータまたはプラグマ指示の値を示します。許可される値は、次のセクションで説明されているように、正確なコンテキストに依存します。
meta要素にname属性がある場合、それはドキュメントメタデータを設定します。ドキュメントメタデータは、名前と値のペアの形式で表現され、name属性が名前を示し、同じ要素のcontent属性が値を示します。名前は、設定されているメタデータの側面を指定します。有効な名前とその値の意味は、次のセクションで説明されています。meta要素にcontent属性がない場合、メタデータの名前と値のペアの値の部分は空文字列になります。
media属性は、メタデータが適用されるメディアを示します。その値は有効なメディアクエリリストでなければなりません。nameがtheme-colorでない限り、media属性は処理モデルには影響せず、著者によって使用されるべきではありません。
すべての現在のエンジンでサポートされています。
この仕様では、name
属性を持つ meta
要素のためにいくつかの名前が定義されています。
名前は大文字と小文字を区別せず、ASCII 大文字と小文字を区別しない 方法で比較される必要があります。
application-name
値は、そのページが表す Web アプリケーションの名前を示す、短い自由形式の文字列でなければなりません。ページが Web アプリケーションでない場合、application-name
メタデータ名を使用してはなりません。Web アプリケーションの名前の翻訳は、lang 属性を使用して各言語を指定することができます。
文書内で、同じ 言語 を持ち、name 属性の値が
ASCII
大文字と小文字を区別しない 方式で
application-name
と一致する meta
要素は、文書ごとに 1 つしか存在してはなりません。
ユーザーエージェントは、UI でページの title
よりもアプリケーション名を優先して使用することができます。なぜなら、タイトルには、特定の時点でのページのステータスに関連するステータスメッセージなどが含まれている可能性があるからです。
指定された言語の順序付きリストが与えられた場合（例：イギリス英語、アメリカ英語、英語）、ユーザーエージェントは次の手順を実行する必要があります:
languages を言語のリストとします。
default language を、言語とし、Document の
ドキュメント要素の言語に設定します。
その言語が未知でない場合に限ります。
もし default language があり、languages に含まれている言語とは異なる場合、それを languages に追加します。
winning language を、languages の中で最初に、次の条件を満たす meta
要素が存在する言語とします。その name
属性の値が、application-name
と
ASCII
大文字と小文字を区別しない
方式で一致し、その言語が 言語 と一致するものです。
もしどの言語にもそのような meta
要素が存在しない場合、リターンします。与えられたアプリケーション名は存在しません。
最初の meta
要素の
content
属性の値を返します。
その要素は Document 内で ツリー順 で最初に見つかるもので、
name 属性の値が
ASCII
大文字と小文字を区別しない
方式で一致し、その言語が winning language であるものです。
このアルゴリズムは、例えばブックマークにラベルを付ける際に、ブラウザがページ名を必要とする場合に使用されます。ユーザーがアルゴリズムに提供する言語は、ユーザーの好みの言語となります。
author
値は、ページの著者の名前を示す自由形式の文字列でなければなりません。
description
値はページを説明する自由形式の文字列でなければなりません。この値は、ページのディレクトリ（例：検索エンジン）で使用するのに適している必要があります。
meta
要素が name 属性値と
ASCII
大文字小文字の区別なく
description
と一致する文書ごとに、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 >
...多くの検索エンジンは、この機能が歴史的に信頼性に欠け、ユーザーに役立たない方法で検索エンジンの結果をスパムする手段として誤用されてきたため、このようなキーワードを考慮しないことがあります。
ユーザーエージェントが、ページに適用可能なキーワードのリストを取得するには、次の手順を実行する必要があります:
ユーザーエージェントは、値の信頼性に対する十分な確信がない場合、この情報を使用すべきではありません。
例えば、コンテンツ管理システムが、システム内のページのキーワード情報を使用して、サイト固有の検索エンジンのインデックスを作成するのは合理的ですが、大規模なコンテンツアグリゲーターがこの情報を使用すると、一部のユーザーが不適切なキーワードを使用してランキングメカニズムを操作しようとする可能性が高くなります。
referrer
この値は、文書 のデフォルトの リファラーポリシー を定義する リファラーポリシー でなければなりません。 [REFERRERPOLICY]
任意の meta 要素
element が
文書に 挿入された 場合、
またはその name または
content
属性が変更された場合、ユーザーエージェントは次のアルゴリズムを実行する必要があります:
element が 文書ツリー内 にない場合、戻ります。
element に、値が "referrer" と
ASCII
大文字小文字を区別しない 一致する
name
属性がない場合、戻ります。
element に content
属性がない場合、
またはその属性の値が空の文字列である場合、戻ります。
以下の表の最初の列にある値のいずれかで value がある場合、 value を2列目に示す値に設定します:
| レガシー値 | リファラーポリシー |
|---|---|
never
|
no-referrer
|
default
| デフォルトのリファラーポリシー |
always
|
unsafe-url
|
origin-when-crossorigin
|
origin-when-cross-origin
|
value が リファラーポリシー の1つである場合、 element の ノード文書 の ポリシーコンテナ の リファラーポリシー を policy に設定します。
歴史的な理由から、他の標準メタデータ名とは異なり、referrer
の処理モデルは、要素の削除に応答せず、ツリー順
を使用しません。この状態の中で最も最近挿入された、または最も最近変更された meta
要素のみが影響を与えます。
theme-color
この値は、CSS の <color> プロダクションと一致する文字列でなければならず、 ユーザーエージェントがページまたは周辺のユーザーインターフェイスの表示をカスタマイズするために使用する推奨される色を定義します。たとえば、ブラウザーは、指定された値を使用してページのタイトルバーをカラー表示したり、タブバーやタスクスイッチャーでハイライトとして使用することがあります。
HTML ドキュメント内では、media
属性の値は、meta
要素のすべての中で一意でなければなりません。また、name
属性の値は、theme-color
と
ASCII
大文字小文字を区別しない 一致でなければなりません。
この標準自体は、「WHATWG グリーン」をテーマカラーとして使用しています:
<!DOCTYPE HTML>
< title > HTML Standard</ title >
< meta name = "theme-color" content = "#3c790a" >
...media
属性は、提供された色が使用されるべきコンテキストを説明するために使用される場合があります。
この標準のテーマカラーとして「WHATWG グリーン」をダークモードでのみ使用したい場合は、prefers-color-scheme メディア機能を使用できます:
<!DOCTYPE HTML>
< title > HTML Standard</ title >
< meta name = "theme-color" content = "#3c790a" media = "(prefers-color-scheme: dark)" >
...ページのテーマカラーを取得するには、ユーザーエージェントは次の手順を実行する必要があります:
candidate elements を、以下の基準を満たすすべての meta
要素のリストとします。
順序は ツリー順 です。
その要素が 文書ツリーに含まれている こと。
その要素が name
属性を持ち、その値が theme-color
と
ASCII 大文字小文字を区別しない 一致していること。
その要素が content
属性を持っていること。
candidate elements の各 element について:
何も返しません（ページにテーマカラーがない場合）。
任意の meta
要素が 文書に挿入される
または 文書から削除される 場合、
または既存の meta
要素の name、
content、
または media
属性が変更される、または環境が変化して、いずれかの meta
要素の media
属性の値が環境と一致するか、
一致しなくなる場合は、ユーザーエージェントは上記のアルゴリズムを再実行し、その結果を影響を受ける UI に適用する必要があります。
UI でテーマカラーを使用する際、ユーザーエージェントは、該当する UI に適した形でテーマカラーを調整することがあります。たとえば、ユーザーエージェントがテーマカラーを背景色として使用し、その上に白いテキストを表示することを意図している場合、十分なコントラストを確保するために、その部分の UI でテーマカラーのより暗いバージョンを使用することがあります。
color-scheme
ユーザーエージェントがページの背景をすぐに希望する配色でレンダリングできるようにするため（ページ内のすべての CSS の読み込みを待つのではなく）、meta
要素で 'color-scheme' 値を指定できます。
この値は、CSS の 'color-scheme' プロパティの値の構文に一致する文字列でなければなりません。 これにより、ページがサポートする配色 が決定されます。
ドキュメント内では、meta
要素に
name 属性値が
ASCII
大文字小文字を区別しない 一致で
color-scheme に
設定された要素が 1 つ以上あってはなりません。
次の宣言は、ページが暗い背景色と明るい前景色を含む配色に対応していることを示しています:
< meta name = "color-scheme" content = "dark" > ページがサポートする配色を取得するには、ユーザーエージェントは次の手順を実行する必要があります:
candidate elements を、以下の基準を満たすすべての meta
要素のリストとします。
順序は ツリー順 です。
その要素が 文書ツリーに含まれている こと。
その要素が name
属性を持ち、その値が color-scheme
と
ASCII 大文字小文字を区別しない 一致していること。
その要素が content
属性を持っていること。
candidate elements の各 element について:
content
属性の値を与えて、コンポーネント値のリストを解析する結果を
parsed とします。
null を返します。
任意の meta
要素が 文書に挿入される
または 文書から削除される 場合、
または既存の meta
要素の name または
content
属性が変更された場合、ユーザーエージェントは上記のアルゴリズムを再実行する必要があります。
これらのルールは一致する要素が見つかるまで次々に要素を確認するため、著者はレガシーユーザーエージェントのフォールバックに対応する複数の値を提供できます。 プロパティに対する CSS のフォールバックの仕組みとは逆に、複数の meta 要素は、レガシー値が新しい値の後に配置される必要があります。
誰でも独自のメタデータ名の事前定義セットに対する拡張を作成して使用することができます。このような拡張を登録する必要はありません。
ただし、次のいずれかの場合には、新しいメタデータ名を作成すべきではありません:
その名前がURLである場合、またはその付随するcontent
属性の値がURLである場合。このような場合には、新しいメタデータ名を作成するのではなく、リンクタイプの事前定義セットに対する拡張として登録することが推奨されます。
その名前がユーザーエージェントで処理要件が予想されるものである場合、その場合は標準化されるべきです。
また、新しいメタデータ名を作成して使用する前に、WHATWG Wiki MetaExtensions ページを参照することが推奨されます。 これは、既に使用されているメタデータ名を選択するのを避け、既に使用されているメタデータ名の目的を重複させることを避け、新しい標準化された名前が 選択した名前と衝突するのを避けるためです。[WHATWGWIKI]
誰でもいつでも WHATWG Wiki MetaExtensions ページを編集してメタデータ名を追加することができます。 新しいメタデータ名は、次の情報で指定することができます:
実際に定義される名前です。この名前は、他の定義済みの名前と混同されないようにする必要があります（例: 大文字小文字のみが異なる場合など）。
メタデータ名の意味とその値が要求される形式についての簡潔で非標準的な説明です。
まったく同じ処理要件を持つ他の名前のリストです。著者は、定義された同義語の名前を使用すべきではありません（これはレガシーコンテンツのサポートのためにのみ意図されています）。 誰でも、実際には使用されていない同義語を削除することができます。レガシーコンテンツとの互換性のために同義語として処理する必要がある名前のみがこの方法で登録されます。
次のいずれかです:
メタデータ名が既存の値と重複していると判明した場合、それは削除され、既存の値の同義語としてリストされるべきです。
メタデータ名が「提案」状態で1か月以上使用されずに追加された場合、または仕様されていない場合、それは WHATWG Wiki MetaExtensions ページから削除される可能性があります。
メタデータ名が「提案」状態で追加され、既存の値と重複していると判明した場合、それは削除され、既存の値の同義語としてリストされるべきです。 メタデータ名が「提案」状態で追加され、害があると判明した場合、それは「中止」状態に変更されるべきです。
誰でもいつでもステータスを変更できますが、上記の定義に従ってのみ行うべきです。
http-equiv属性が
meta要素に指定されている場合、
その要素はプラグマ指令となります。
http-equiv属性は、次のキーワードと状態を持つ列挙属性です：
| キーワード | 適合性 | 状態 | 簡潔な説明 |
|---|---|---|---|
content-language
| No | Content language | プラグマセットのデフォルト言語を設定します。 |
content-type
| エンコーディング宣言 | charsetを設定する代替形式です。
| |
default-style
| デフォルトスタイル | デフォルトのCSSスタイルシートセットの 名前を設定します。 | |
refresh
| リフレッシュ | タイマー付きのリダイレクトとして動作します。 | |
set-cookie
| No | Set-Cookie | 効果はありません。 |
x-ua-compatible
| X-UA-Compatible | 実際には、Internet Explorerが仕様により近づくよう促します。 | |
content-security-policy
| コンテンツセキュリティポリシー | コンテンツセキュリティポリシーを
Documentに適用します。
|
meta要素が
ドキュメントに挿入
される際に、そのhttp-equiv属性が
存在し、上記のいずれかの状態を表す場合、ユーザーエージェントは以下のリストに記載されているその状態に適したアルゴリズムを実行する必要があります。
http-equiv="content-language")
この機能は適合していません。著者は代わりにlang属性を使用することが推奨されます。
このプラグマはプラグマセットのデフォルト言語を設定します。 このようなプラグマが正常に処理されるまでは、 プラグマセットのデフォルト言語 は存在しません。
要素のcontent
属性に
U+002C COMMA 文字（,）が含まれている場合、処理を終了します。
inputを、要素のcontent
属性の値に設定します。
positionをinputの最初の文字を指すように設定します。
コードポイントのシーケンスを収集し、
それらがASCIIホワイトスペースでないことを確認します。
candidateを前のステップで得られた文字列に設定します。
candidateが空の文字列の場合、処理を終了します。
プラグマセットのデフォルト言語 をcandidateに設定します。
値が複数のスペース区切りトークンで構成されている場合、最初のトークン以外は無視されます。
このプラグマは、同じ名前を持つHTTP `Content-Language`
ヘッダーとはほとんど似ていません。
[HTTP]
http-equiv="content-type")
エンコーディング宣言の状態
は、charset
属性を設定する代替形式に過ぎません。これは
文字エンコーディング宣言
です。この状態のユーザーエージェント要件はすべて、仕様のパーセクションによって処理されます。
meta要素に
http-equiv
属性があり、その属性がエンコーディング宣言の状態である場合、
content属性の
値は次の文字列とASCII大小区別しない一致を持たなければなりません: "text/html;"。
オプションで、任意の数のASCIIホワイトスペースが続き、その後に
"charset=utf-8"が続きます。
文書には、符号化宣言状態のhttp-equiv属性を持つmeta要素と、charset属性を持つmeta要素の両方を含めてはならない。
符号化宣言状態はHTML文書で使用できますが、その状態のhttp-equiv属性を持つ要素はXML文書では使用してはなりません。
http-equiv="default-style")
Support in one engine only.
このプラグマは、デフォルトのCSSスタイルシートセットの名前を 設定します。
優先CSSスタイルシートセット名を変更し、その名前を
要素のcontent
属性の値に設定します。
[CSSOM]
http-equiv="refresh")
このプラグマはタイマー付きリダイレクトとして機能します。
Documentオブジェクトには、
その関連付けられた宣言的リフレッシュを行う
（ブール値）があり、最初は false です。
inputを要素のcontent
属性の値に設定します。
共通の宣言的リフレッシュ手順
を、meta
要素のノードドキュメント、
input、およびmeta要素を使って実行します。
共通の宣言的リフレッシュ手順は、Documentオブジェクト
document、文字列input、およびオプションでmeta要素
metaを使用して以下のように行われます:
もしdocumentの宣言的リフレッシュを行うが true である場合、処理を終了します。
positionをinputの最初のコードポイントを指すように設定します。
timeを0に設定します。
コードポイントのシーケンスを収集する ASCII数字 であるものを input の position で与えられた位置から取得し、その結果を timeString とする。
もしtimeStringが空の文字列である場合、次のステップを実行します:
もしpositionが指すinputのコードポイントがU+002E (.)でない場合、処理を終了します。
そうでない場合、timeをtimeStringの解析結果に設定します。 非負整数の解析ルール を使用します。
コードポイントのシーケンスを収集し、 それらがASCII数字およびU+002E (.) 文字であることを確認します。 収集された文字は無視します。
urlRecordをdocumentのURLに設定します。
もしpositionがinputの末尾を超えていない場合、次のステップを実行します:
もしpositionが指すinputのコードポイントがU+003B (;)、U+002C (,)、 またはASCIIホワイトスペースでない場合、処理を終了します。
もしpositionが指すinputのコードポイントがU+003B (;)またはU+002C (,)である場合、 positionを次のコードポイントに進めます。
もしpositionがinputの末尾を超えていない場合、次のステップを実行します:
urlStringをinputのpositionから末尾までの部分文字列に設定します。
もしpositionが指すコードポイントがU+0055 (U)またはU+0075 (u)である場合、 positionを次のコードポイントに進めます。そうでない場合は、 skip quotesとラベル付けされたステップに進みます。
もしpositionが指すコードポイントがU+0052 (R)またはU+0072 (r)である場合、 positionを次のコードポイントに進めます。そうでない場合は、 parseとラベル付けされたステップに進みます。
もしpositionが指すコードポイントがU+004C (L)またはU+006C (l)である場合、 positionを次のコードポイントに進めます。そうでない場合は、 parseとラベル付けされたステップに進みます。
もしpositionが指すコードポイントがU+003D (=)である場合、 positionを次のコードポイントに進めます。 そうでない場合は、parseとラベル付けされたステップに進みます。
skip quotes: もしpositionが指すコードポイントがU+0027 (')またはU+0022 (")である場合、 quoteをそのコードポイントに設定し、positionを次の コードポイントに進めます。そうでない場合は、 quoteを空の文字列に設定します。
urlStringをinputのpositionから末尾までの部分文字列に設定します。
もしquoteが空の文字列でなく、urlString内にquoteと等しい コードポイントがある場合、 urlStringをその位置で切り詰めます。
parse: urlRecordをdocumentに相対的な urlStringのURLのエンコーディング解析 の結果に設定します。
もしurlRecordが失敗した場合、処理を終了します。
documentの宣言的リフレッシュを行うを true に設定します。
次のいずれかまたは複数のステップを実行します:
リフレッシュが完了した後（以下に定義）、
ユーザーがリダイレクトをキャンセルしておらず、
metaが指定されていて、documentのアクティブなサンドボックスフラグセット
にサンドボックス化された自動機能ブラウジングコンテキストフラグ
が設定されていない場合、navigate
を実行し、
documentのノードナビゲーブル
をurlRecordに使用して移動します。
documentを使用し、履歴の取り扱いを"置き換え"に設定します。
前の段落の目的のために、リフレッシュが完了したとされるのは、 次の2つの条件のうち後者のいずれかが発生したときです:
ここではmetaのノードドキュメントではなく、
documentを使用することが重要です。なぜなら、最初の手順セットと
リフレッシュが完了する間に変更される可能性があり、
metaが常に指定されるわけではない（HTTPの
`リフレッシュ`ヘッダーの場合など）からです。
ユーザーにインターフェースを提供し、それを選択すると、navigateを実行し、 documentのノードナビゲーブル をurlRecordに使用して移動します。
何もしません。
さらに、ユーザーエージェントは、タイマーの状態、タイマー付きリダイレクトの目的地など、 その操作のすべての側面について、ユーザーに通知することができます。
meta要素に
http-equiv
属性があり、その属性がリフレッシュ状態である場合、content
属性の値は次のいずれかでなければなりません:
URL"という文字列にASCII大小区別しない一致が続き、
U+003D EQUALS SIGN文字（=）が続き、その後に有効なURL文字列が続きます。
ただし、URL文字列は、リテラルのU+0027 APOSTROPHE（'）またはU+0022 QUOTATION MARK（"）文字で始まってはなりません。
前者の場合、整数はページがリロードされるまでの秒数を表し、後者の場合、整数はページが指定されたURLで置き換えられるまでの秒数を表します。
ニュース組織のフロントページは、次のようなマークアップをページのhead要素に含めることで、
ページが5分ごとにサーバーから自動的にリロードされることを保証できます:
< meta http-equiv = "Refresh" content = "300" > ページの連続したスライドショーとして自動化するために、各ページを次のページにリフレッシュするために、 次のようなマークアップを使用することができます:
< meta http-equiv = "Refresh" content = "20; URL=page4.html" > http-equiv="set-cookie")
このプラグマは適合しておらず、効果はありません。
ユーザーエージェントはこのプラグマを無視する必要があります。
http-equiv="x-ua-compatible")
実際には、このプラグマはInternet Explorerが仕様により近づくよう促します。
meta要素に
http-equiv
属性があり、その属性がX-UA-Compatible状態である場合、
content属性の
値は、"IE=edge"という文字列とASCII大小区別しない一致を持たなければなりません。
ユーザーエージェントはこのプラグマを無視する必要があります。
http-equiv="content-security-policy")
このプラグマはポリシーを適用し、
コンテンツセキュリティポリシーを
Documentに適用します。
[CSP]
policyを、コンテンツセキュリティポリシーのシリアライズされたコンテンツセキュリティポリシーの解析アルゴリズムの実行結果に設定します。
解析はmeta
要素の
content属性の値を使用し、
ソースを"meta"、ディスポジションを"enforce"とします。
policyから、report-uri、
frame-ancestors、
およびsandbox
指令をすべて削除します。
ポリシーを適用します。
meta要素に
http-equiv
属性があり、その属性がコンテンツセキュリティポリシー状態である場合、
content属性の
値は、
有効なコンテンツセキュリティポリシーでなければなりませんが、
その中にはreport-uri、
frame-ancestors、
またはsandbox
指令を含めることはできません。
content属性に与えられた
コンテンツセキュリティポリシーは現在のドキュメントに
適用されます。[CSP]
ドキュメントにmeta要素が
挿入される時点で、一部のリソースがすでに取得されている可能性があります。例えば、画像は、
meta要素に
http-equiv
属性があり、その属性がコンテンツセキュリティポリシー状態
である場合に、
利用可能な画像のリスト
に動的に挿入される前に保存されている可能性があります。すでに取得されたリソースが、後から
コンテンツセキュリティポリシーによってブロックされる保証はありません。
後から適用される場合です。
ページがクロスサイトスクリプティング攻撃のリスクを軽減するために、インラインJavaScriptの実行を防止し、 すべてのプラグインコンテンツをブロックするポリシーを選択する場合、次のようなポリシーを使用できます:
< meta http-equiv = "Content-Security-Policy" content = "script-src 'self'; object-src 'none'" > ドキュメントに同じ状態を持つmeta要素が
同時に複数存在してはなりません。
文字エンコーディング宣言は、文書を保存または送信する際に使用される文字エンコーディングを指定するメカニズムです。
Encoding標準では、UTF-8 文字エンコーディングの使用を要求し、これを識別するために"utf-8" エンコーディングラベルを使用することを求めています。これらの要件により、文書の文字エンコーディング宣言が存在する場合、エンコーディングラベルが"utf-8"に対してASCII大文字小文字を区別しない一致で指定されることが必要です。文字エンコーディング宣言が存在するかどうかにかかわらず、文書のエンコードに使用される実際の文字エンコーディングはUTF-8でなければなりません。[ENCODING]
上記の規則を強制するために、オーサリングツールは新しく作成された文書に対してUTF-8をデフォルトとして使用しなければなりません。
次の制限も適用されます：
さらに、meta要素に関するいくつかの制限により、文書ごとにmetaベースの文字エンコーディング宣言は1つしか存在できません。
もしHTML文書がBOMで始まらず、そのエンコーディングがContent-Typeメタデータによって明示的に指定されておらず、文書がiframeのsrcdoc文書でない場合、エンコーディングはmeta要素とcharset属性、またはmeta要素とhttp-equiv属性を使用して指定する必要があります。これらの要素はエンコーディング宣言状態で使用される必要があります。
文字エンコーディング宣言は、すべての文字がASCII範囲内であっても必要です。なぜなら、フォーム内でユーザーによって入力された非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"?> style要素すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
Support in all current engines.
noscript 要素内で head 要素の子要素として使用されます。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要素は、スタイル処理モデルの複数の入力の一つです。この要素は、ユーザーのためのコンテンツを表現するものではありません。
すべての現在のエンジンでサポートされています。
disabledのゲッターステップは次の通りです：
この要素に関連するCSSスタイルシートがない場合、falseを返します。
この要素の関連するCSSスタイルシートのdisabledフラグが設定されている場合、trueを返します。
falseを返します。
disabledのセッターステップは次の通りです：
この要素に関連するCSSスタイルシートがない場合、処理を終了します。
与えられた値がtrueである場合、この要素の関連するCSSスタイルシートのdisabledフラグを設定します。そうでない場合は、この要素の関連するCSSスタイルシートのdisabledフラグを解除します。
重要なのは、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ブロックの使用などで、さらに範囲が制限される場合があります。この仕様は、そうした追加の制限や要件を上書きするものではありません。
属性が省略された場合のデフォルトは「all」、つまりデフォルトでスタイルがすべてのメディアに適用されることを意味します。
blocking属性は、ブロッキング属性です。
1つのエンジンのみでサポートされています。
title属性は、style要素でCSSスタイルシートセットを定義します。style要素にtitle属性がない場合、その要素にはタイトルがありません。祖先のtitle属性は、style要素には適用されません。style要素がドキュメントツリー内にない場合、title属性は無視されます。[CSSOM]
style要素のtitle属性は、link要素のtitle属性と同様に、グローバルなtitle属性とは異なります。つまり、タイトルのないstyleブロックは親要素のタイトルを継承せず、単にタイトルを持たないということです。
style要素の子テキストコンテンツは、準拠したスタイルシートでなければなりません。
もしstyle要素がそのノード文書のパーサーによって作成された場合、その要素は暗黙的にレンダーブロックの可能性があると見なされます。
次のいずれかの条件が発生した場合、ユーザーエージェントはスタイルstyleブロックを更新するアルゴリズムを実行する必要があります:
要素がオープン要素のスタックから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スタイルシートを作成する:
element
elementのmedia属性。
これは、現在存在しないかもしれない属性への参照であり、属性の現在の値のコピーではありません。CSSOMは、属性が動的に設定、変更、または削除されたときに何が起こるかを定義しています。
elementがドキュメントツリー内にある場合はtitle属性、それ以外の場合は空文字列。
これもまた、属性への参照です。
未設定。
設定済み。
null
デフォルト値のまま。
初期化されていないまま。
これは正しくないようです。おそらく要素の子テキストコンテンツを使用する必要があるでしょうか？問題#2997として追跡されています。
もしelementがスクリプトブロックスタイルシートに貢献する場合、elementをそのノードドキュメントのスクリプトブロックスタイルシートセットに追加する。
もしelementのmedia属性の値が環境に一致する場合、そしてelementが潜在的にレンダーブロックする場合、elementでのレンダリングをブロックする。
スタイルシートのクリティカルサブリソースを取得する試みが完了したとき、または、スタイルシートがクリティカルサブリソースを持たない場合、スタイルシートがパースおよび処理された後、ユーザーエージェントは次の手順を実行する必要があります:
クリティカルサブリソースの取得は明確に定義されていません; おそらく問題#968が最良の解決策でしょう。その間、クリティカルサブリソースリクエストは、style要素が現在レンダーブロックしているかどうかに応じてレンダーブロック設定を行うべきです。
elementをスタイルシートに関連付けられたstyle要素とする。
successをtrueとする。
何らかの理由（例：DNSエラー、HTTP 404レスポンス、接続の早期終了、サポートされていないコンテンツタイプ）でスタイルシートのクリティカルサブリソースの取得が失敗した場合、successをfalseに設定する。
コンテンツ固有のエラー、例：CSSパースエラーやPNGデコードエラーはsuccessに影響しません。
elementと次のステップを基に要素タスクをキューに入れる:
もしelementがスクリプトブロックスタイルシートに貢献している場合:
断言: elementのノードドキュメントのスクリプトブロックスタイルシートセットがelementを含んでいること。
elementをノードドキュメントのスクリプトブロックスタイルシートセットから削除する。
elementでレンダリングを解除する。
要素のロードイベントを遅延させる必要があります。要素のノードドキュメントがスタイルシートのクリティカルサブリソースをすべて取得する試みが完了するまで。
この仕様はスタイルシステムを指定していませんが、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 > スタイルシートが他のリソースを参照していない場合（例：style要素で指定された内部スタイルシートで@importルールがない場合）、スタイルルールは即座にスクリプトに対して利用可能にする必要があります。それ以外の場合は、スタイルルールはイベントループがレンダリングを更新する段階に達した時点でのみスクリプトに対して利用可能にする必要があります。
DocumentのコンテキストでHTMLパーサーまたはXMLパーサーにおいて、次のすべての条件が真である場合、要素elはスクリプトをブロックするスタイルシートを提供するとされます:
elがそのDocumentのパーサーによって作成されたこと。
elがstyle要素またはlink要素であり、パーサーによって作成された時点でスタイリング処理モデルに貢献する外部リソースリンクであったこと。
elのmedia属性の値が環境と一致すること。
要素がパーサーによって作成された時点で、elのスタイルシートが有効であったこと。
ユーザーエージェントがその特定のスタイルシートの読み込みをまだ諦めていないこと。ユーザーエージェントはいつでもスタイルシートの読み込みを諦めることができます。
スタイルシートの読み込みが完了する前に諦めると、最終的にスタイルシートが読み込まれた場合でも、スクリプトが誤った情報で動作する可能性があります。例えば、スタイルシートが要素の色を緑に設定するが、スタイルが適用される前にそれを検査するスクリプトが実行された場合、スクリプトは要素が黒（またはデフォルトの色）であることを検出し、それに基づいて誤った判断を下す可能性があります（例：ページの他の部分で黒を色として選択するなど）。実装者は、スクリプトが誤った情報を使用する可能性と、遅いネットワークリクエストが完了するまで何もしないことによるパフォーマンスへの影響をバランスさせる必要があります。
上記の規則の対応部分が<?xml-stylesheet?>PIにも適用されることが期待されています。ただし、これはまだ十分に調査されていません。
Documentには、最初は空の順序付きセットであるスクリプトをブロックするスタイルシートセットが含まれます。
Documentdocumentは、次の手順で真が返される場合、スクリプトをブロックするスタイルシートを持つとされます:
もしdocumentのスクリプトをブロックするスタイルシートセットが空でない場合は、真を返す。
もしdocumentのノードナビゲーブルがnullである場合は、偽を返す。
containerDocumentをdocumentのノードナビゲーブルのコンテナドキュメントとする。
もしcontainerDocumentがnullでなく、かつcontainerDocumentのスクリプトをブロックするスタイルシートセットが空でない場合は、真を返す。
偽を返す。
Documentは、スクリプトをブロックするスタイルシートを持たない場合にスクリプトをブロックするスタイルシートを持たないとされます。
Introduction_to_HTML/Document_and_website_structure#HTML_for_structuring_content
すべての現在のエンジンでサポートされています。
body要素すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
html要素の2番目の要素として。body要素の開始タグは、要素が空であるか、body要素内の最初のものがASCIIホワイトスペースまたはコメントでない場合に省略できます。ただし、body要素内の最初のものがmeta、noscript、link、script、style、またはtemplate要素である場合を除きます。
body要素の終了タグは、body要素の直後にコメントがない場合に省略できます。onafterprint
onbeforeprint
onbeforeunload
onhashchange
onlanguagechange
onmessage
onmessageerror
onoffline
ononlineonpageswap
onpagehide
onpagereveal
onpageshow
onpopstate
onrejectionhandled
onstorage
onunhandledrejection
onunload[Exposed =Window ]
interface HTMLBodyElement : HTMLElement {
[HTMLConstructor ] constructor ();
// 過去のメンバーも含む
};
HTMLBodyElement includes WindowEventHandlers ;適合する文書には、body要素が1つだけ存在します。document.bodyIDL属性は、スクリプトが文書のbody要素に簡単にアクセスできるようにします。
一部のDOM操作（例えば、ドラッグアンドドロップモデルの一部）は、"body要素"の用語で定義されています。これは、DOM内の特定の要素を指しており、任意のbody要素ではありません。
body要素は、イベントハンドラーコンテンツ属性として、イベントハンドラーの一部を公開します。また、それらのイベントハンドラーIDL属性をミラーリングします。
Windowオブジェクトのイベントハンドラーは、Window-reflecting
body要素イベントハンドラーセットによって命名され、body要素上で公開され、通常HTML要素でサポートされる同じ名前の汎用イベントハンドラーを置き換えます。
したがって、例えば、errorイベントがDocumentのbody要素の子で発生し、バブリングされた場合、そのイベントはまずその要素のonerrorのイベントハンドラーコンテンツ属性をトリガーし、その後にルートhtml要素のそれをトリガーし、その後、onerrorのイベントハンドラーコンテンツ属性をトリガーします。これは、イベントがターゲットから、body、html、Document、Windowにバブリングされ、イベントハンドラーがWindowを監視していて、bodyを監視していないためです。しかし、addEventListener()を使用してbodyにアタッチされた通常のイベントリスナーは、イベントがWindowオブジェクトに到達したときではなく、bodyを通過したときに実行されます。
このページでは、ユーザーがオンラインかオフラインかを示すインジケーターを更新します:
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< title > オンラインかオフラインか？</ title >
< script >
function update( online) {
document. getElementById( 'status' ). textContent =
online ? 'オンライン' : 'オフライン' ;
}
</ script >
</ head >
< body ononline = "update(true)"
onoffline = "update(false)"
onload = "update(navigator.onLine)" >
< p > You are: < span id = "status" > (不明)</ span ></ p >
</ body >
</ html > article 要素すべての現在のエンジンでサポートされています。
HTMLElement を使用します。
article
要素は、ドキュメント、ページ、アプリケーション、またはサイト内で独立して配布可能または再利用可能な、完全または自己完結型のコンテンツを表します。これは、たとえばフォーラム投稿、雑誌や新聞の記事、ブログ記事、ユーザーが投稿したコメント、インタラクティブなウィジェットやガジェット、または他の独立したコンテンツ項目である可能性があります。
article
要素が入れ子になっている場合、内側の article 要素は、外側の article
の内容に原則として関連する記事を表します。たとえば、ユーザーが投稿したコメントを受け入れるサイトのブログ記事は、ブログ記事のために article
要素内に入れ子になっている要素として、コメントを article 要素として表すことができます。
article
要素に関連する著者情報（address
要素を参照）は、入れ子になった article
要素には適用されません。
特にシンジケーションで再配布されるコンテンツで使用される場合、article 要素は、Atom の
entry 要素に似た目的を持ちます。[ATOM]
schema.org マイクロデータ語彙は、CreativeWork のサブタイプの1つを使用して、article
要素の発行日を提供するために使用できます。
ページの主な内容（フッター、ヘッダー、ナビゲーションブロック、サイドバーを除く）がすべて1つの自己完結型の構成である場合、その内容は article
でマークされる場合がありますが、その場合は技術的には冗長です（ページが単一の構成であることは自明であり、それは単一のドキュメントであるためです）。
この例では、article
要素を使用してブログ記事を表示し、いくつかの schema.org 注釈を含んでいます:
< article itemscope itemtype = "http://schema.org/BlogPosting" >
< header >
< h2 itemprop = "headline" > 人生で最も重要なルール</ h2 >
< p >< time itemprop = "datePublished" datetime = "2009-10-09" > 3日前</ time ></ p >
< link itemprop = "url" href = "?comments=0" >
</ header >
< p > マイクが近くにある場合、何を言っているかが全世界に送信されていると考えてください。真剣に。</ p >
</ p > ...</ p >
< footer >
< a itemprop = "discussionUrl" href = "?comments=1" > コメントを見る...</ a >
</ footer >
</ article > こちらは同じブログ投稿ですが、いくつかのコメントを表示しています:
< article itemscope itemtype = "http://schema.org/BlogPosting" >
< header >
< h2 itemprop = "headline" > 人生で最も重要なルール</ h2 >
< p >< time itemprop = "datePublished" datetime = "2009-10-09" > 3日前</ time ></ p >
< link itemprop = "url" href = "?comments=0" >
</ header >
< p > マイクが近くにある場合、何を言っているかが全世界に送信されていると考えてください。真剣に。</ p >
</ p > ...</ p >
< section >
< h1 > コメント</ h1 >
< article itemprop = "comment" itemscope itemtype = "http://schema.org/Comment" id = "c1" >
< link itemprop = "url" href = "#c1" >
</ footer >
< p > 投稿者: < span itemprop = "creator" itemscope itemtype = "http://schema.org/Person" >
< span itemprop = "name" > ジョージ・ワシントン</ span >
</ span ></ p >
< p >< time itemprop = "dateCreated" datetime = "2009-10-10" > 15分前</ time ></ p >
</ footer >
</ p > そうですね！特にロビイストの友達の話をしているときに！</ p >
</ article >
</ article itemprop = "comment" itemscope itemtype = "http://schema.org/Comment" id = "c2" >
< link itemprop = "url" href = "#c2" >
</ footer >
< p > 投稿者: < span itemprop = "creator" itemscope itemtype = "http://schema.org/Person" >
< span itemprop = "name" > ジョージ・ハモンド</ span >
</ span ></ p >
< p >< time itemprop = "dateCreated" datetime = "2009-10-10" > 5分前</ time ></ p >
</ footer >
</ p > へえ、君と同じ名前だね。</ p >
</ article >
</ section >
</ article > 各コメントの情報（投稿者や日時など）を提供するために 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 > </ p > </ template > </ ul > </ p > </ article > section 要素すべての現在のエンジンでサポートされています。
HTMLElementを使用します。section要素は、文書またはアプリケーションの一般的なセクションを表します。このコンテキストでのセクションは、通常、見出しを伴うテーマごとのグループ化を指します。
セクションの例としては、章、タブ付きダイアログボックスのさまざまなタブページ、または論文の番号付きセクションがあります。ウェブサイトのホームページは、イントロダクション、ニュース項目、お問い合わせ情報などのセクションに分割することができます。
著者は、article要素の代わりに、section要素を使用することを推奨します。
section要素は、汎用的なコンテナ要素ではありません。要素がスタイリング目的でのみ必要である場合や、スクリプトの便宜上必要な場合、著者は代わりにdiv要素を使用することが推奨されます。一般的なルールとして、section要素は、要素の内容が文書のアウトラインに明示的にリストされる場合にのみ適しています。
以下の例では、リンゴに関する記事（より大きなウェブページの一部）が表示されており、2つの短いセクションが含まれています。
< article >
< hgroup >
< h2 > リンゴ</ h2 >
< p > 美味しくておいしい果物！</ p >
</ hgroup >
< p > リンゴはリンゴの木の果実です。</ p > < section >
< h3 > レッドデリシャス</ h3 >
< p > これらの明るい赤色のリンゴは、多くのスーパーマーケットで最も一般的に見られるものです。</ p >
</ section >
< section >
< h3 > グラニースミス</ h3 >
< p > これらのジューシーで緑色のリンゴは、アップルパイの素晴らしいフィリングになります。</ p >
</ section >
</ article > 以下は、卒業生のリストと式典の説明の2つのセクションを持つ卒業式プログラムです。（この例のマークアップは、要素間の空白を最小限に抑えるために時折使用される珍しいスタイルが特徴です。）
<!DOCTYPE Html>
< Html Lang = En >
< Head >
< Title > Graduation Ceremony Summer 2022</ Title >
</ Head >
< Body >
< H1 > 卒業式</ H1 >
< Section >
< H2 > 式典</ H2 >
< P > 入場行進</ P >
< P > 卒業生代表挨拶</ P >
< P > 生徒会長挨拶</ P >
< P > 卒業証書授与</ P >
< P > 校長の閉会挨拶</ P >
</ Section >
< Section >
< H2 > 卒業生</ H2 >
< Ul >
< Li > モリー・カーペンター</ Li >
< Li > アナスタシア・ルッチオ</ Li >
< Li > エベネザー・マッコイ</ Li >
< Li > カリン・マーフィー</ Li >
< Li > トーマス・レイス</ Li >
< Li > スーザン・ロドリゲス</ Li >
</ Ul >
</ Section >
</ Body >
</ Html > この例では、著者がいくつかのセクションを章として、いくつかを付録としてマークアップし、CSSを使用してこれら2つのクラスのセクションのヘッダーを異なるスタイルにしています。
< style >
section { border : double medium ; margin : 2 em ; }
section . chapter h2 { font : 2 em Roboto , Helvetica Neue , sans-serif ; }
section . appendix h2 { font : small-caps 2 em Roboto , Helvetica Neue , sans-serif ; }
</ style >
< header >
< hgroup >
< h1 > 私の本</ h1 >
< p > あまり内容のないサンプル</ p >
</ hgroup >
< p >< small > Dummy Publicorp Ltd. 発行</ small ></ p >
</ header >
< section class = "chapter" >
< h2 > 私の最初の章</ h2 >
< p > これは私の章の最初のものです。あまり多くは語りません。</ p >
< p > しかし、2つの段落があります！</ p >
</ section >
< section class = "chapter" >
< h2 > 続く：第2章</ h2 >
< p > ブラ・ディ・ブラ、ディ・ブラ・ディ・ブラ。ブーム。</ p >
</ section >
< section class = "chapter" >
< h2 > 第3章：さらなる例</ h2 >
< p > 明るい色とアーストーンの戦いが気付かれないことはありません。</ p >
< p > しかし、それが私の物語を台無しにするかもしれません。</ p >
</ section >
< section class = "appendix" >
< h2 > 付録A：例の概要</ h2 >
< p > これらはデモンストレーションです。</ p >
</ section >
< section class = "appendix" >
< h2 > 付録B：いくつかの結論的な発言</ h2 >
< p > この長い例が、セクションが実際のセクションを示すために使用される限り、スタイル設定が可能であることを示していることを願っています。</ p >
</ section > nav要素
すべての現在のエンジンでサポートされています。
HTMLElementを使用します。
nav要素は、ページの他の部分や他のページへのリンクを含むセクションを表します:
ナビゲーションリンクを持つセクションです。
ページ内のすべてのリンクグループがnav要素に含まれる必要はありません—この要素は主に主要なナビゲーションブロックで構成されるセクションを意図しています。特に、フッターには、利用規約、ホームページ、著作権ページなど、サイトのさまざまなページへの短いリンクリストが含まれることがよくあります。このような場合、footer要素のみで十分です; このような場合にはnav要素を使用することもできますが、通常は不要です。
ナビゲーション情報の初期表示を省略することが役立つユーザー、またはナビゲーション情報を即座に利用可能にすることが役立つユーザーを対象としたユーザーエージェント（スクリーンリーダーなど）は、この要素を使用して、ページのどのコンテンツを最初にスキップするか、またはリクエストに応じて提供するか（またはその両方）を判断することができます。
次の例では、nav要素が2つあり、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 > 上記の例では、microdataの注釈もあり、ブログ記事の日付やその他のメタデータを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 > フォルダー</ h1 >
< ul >
< li > < a href = "/inbox" onclick = "return openFolder(this.href)" > 受信トレイ</ a > < span class = count ></ span >
</ li > < li > < a href = "/sent" onclick = "return openFolder(this.href)" > 送信済み</ a >
</ li > < li > < a href = "/drafts" onclick = "return openFolder(this.href)" > 下書き</ a >
</ li > < li > < a href = "/trash" onclick = "return openFolder(this.href)" > ごみ箱</ a >
</ li > < li > < a href = "/customers" onclick = "return openFolder(this.href)" > 顧客</ a >
</ ul >
</ nav > aside要素すべての現在のエンジンでサポートされています。
HTMLElementを使用します。
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 > h1、h2、h3、h4、h5 および
h6 要素
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
hgroup要素の子要素として。
[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 > 作成者は、簡潔さのために前者のスタイルを好むか、追加のスタイリングフックのために後者のスタイルを好むかもしれません。どちらが最良かは、単に好まれる作成スタイルの問題です。
hgroup 要素すべての現在のエンジンでサポートされています。
p要素が続き、次に 1 つのh1、
h2、
h3、
h4、
h5、
またはh6
要素が続き、その後に 0 個以上の p要素が続き、必要に応じてスクリプトサポート要素と混在します。
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 > header 要素すべての現在のエンジンでサポートされています。
headerまたはfooter要素の子孫を含まないこと。
HTMLElementを使用します。
header要素は、紹介やナビゲーションの補助要素のグループを表します。
header要素は通常、見出し
(h1–h6要素やhgroup要素)を含むことを意図していますが、これは必須ではありません。header要素は、セクションの目次、検索フォーム、または関連するロゴをラップするためにも使用できます。
いくつかのサンプルヘッダーを紹介します。これは、ゲーム用の最初のものです。
< header >
< p > Welcome to...</ p >
< h1 > Voidwars!</ h1 >
</ header > 次のスニペットは、要素が仕様のヘッダーをマークアップするためにどのように使用できるかを示しています。
< header >
< hgroup >
< h1 > Fullscreen API</ h1 >
< p > 現行標準 — 最終更新日 2015年10月19日</ p >
</ hgroup >
< dl >
< dt > 参加:</ dt >
< dd >< a href = "https://github.com/whatwg/fullscreen" > GitHub whatwg/fullscreen</ a ></ dd >
< dt > コミット:</ 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 > <!-- これが2つ目のサブセクションを開始します -->
<!-- これは「Important News」というタイトルのサブセクションの一部です -->
< p > 今日のゲームをプレイするには、クライアントを更新する必要があります。</ p >
< h2 > Games</ h2 > <!-- これが3つ目のサブセクションを開始します -->
</ header >
< p > あなたには 3 つのアクティブなゲームがあります:</ p >
<!-- これはまだ「Games」というタイトルのサブセクションの一部です -->
...footer 要素すべての現在のエンジンでサポートされています。
headerまたはfooter要素の子孫を含まないこと。
HTMLElementを使用します。
footer要素は、最も近い先祖セクショニングコンテンツ要素、またはそのような先祖がない場合は本文要素のフッターを表します。フッターには通常、そのセクションに関する情報（誰が書いたか、関連文書へのリンク、著作権データなど）が含まれます。
footer要素にセクション全体が含まれている場合、それらは付録、索引、長いコロフォン、詳細なライセンス契約、およびその他のそのような内容を表します。
セクションの著者または編集者の連絡先情報は、address要素に含めるべきであり、場合によってはfooter内に配置されることもあります。署名や他の情報はheaderまたはfooterのいずれにも（あるいはどちらにも）配置できます。これらの要素の主な目的は、単に作成者が説明的なマークアップを書きやすく、維持およびスタイル設定しやすくすることです。特定の構造を作成者に強制することを意図しているわけではありません。
フッターは必ずしもセクションの終わりに表示される必要はありませんが、通常は表示されます。
先祖セクショニングコンテンツ要素がない場合、ページ全体に適用されます。
footer要素はそれ自体がセクショニングコンテンツではありません;
新しいセクションを導入しません。
次に、上部と下部に同じコンテンツを持つ 2 つのフッターがあるページの例を示します。
< body >
< footer >< a href = "../" > 目次に戻る...</ 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 = "../" > 目次に戻る...</ 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" > ビデオをダウンロードする</ A > .</ P >
</ VIDEO >
< FOOTER > <!-- 記事のフッター -->
< P > 公開日時 < TIME DATETIME = "2009-10-21T18:26-07:00" > 2009/10/21 午後 6:26</ TIME ></ P >
</ FOOTER >
</ ARTICLE >
< ARTICLE >
< H1 > 私の好きな列車</ H1 >
< P > 私は列車が大好きです。私が一番好きな列車はコーフです。</ P >
< P > 石炭車を引いているのを見るのは楽しいです。それは非常に小さく見えるからです。</ P >
< FOOTER > <!-- 記事のフッター -->
< P > 公開日時 < TIME DATETIME = "2009-09-15T14:54-07:00" > 2009/09/15 午後 2:54</ TIME ></ P >
</ FOOTER >
</ ARTICLE >
< FOOTER > <!-- サイト全体のフッター -->
< NAV >
< P >< A HREF = "/credits.html" > クレジット</ A > —
< A HREF = "/tos.html" > サービス利用規約</ A > —
< A HREF = "/index.html" > ブログインデックス</ A ></ P >
</ NAV >
< P > 著作権 © 2009 ゴードン・フリーマン</ P >
</ FOOTER >
</ BODY >
</ HTML > いくつかのサイトデザインには、「ファットフッター」と呼ばれることがあるものがあります — 多くの素材を含むフッターで、画像、他の記事へのリンク、フィードバックを送信するページへのリンク、特別オファーなどが含まれることがあります。ある意味、フッターに「トップページ全体」があるようなものです。
この断片は、「ファットフッター」を持つサイトのページの底部を示しています。
...
< footer >
< nav >
< section >
< h1 > 記事</ h1 >
< p >< img src = "images/somersaults.jpeg" alt = "" > ジムと一緒に
私たちの宙返りクラス！この二部構成の記事で、ジムがペースを取り戻す方法を教えてくれます。< a href = "articles/somersaults/1" > パート1</ a > · < a href = "articles/somersaults/2" > パート2</ a ></ p >
< p >< img src = "images/kindplus.jpeg" > 崖の端を歩くのに疲れた？私たちのゲストライター、ララがバーを通過する方法を教えてくれます。< a href = "articles/kindplus/1" > 続きを読む...</ a ></ p >
< p >< img src = "images/crisps.jpeg" > チップはもうダメです、残っているのはジャガイモだけです。それをどうしますか？ < a
href = "articles/crisps/1" > 続きを読む...</ a ></ p >
</ section >
< ul >
< li >< a href = "/about" > 私たちについて...</ a >
< li >< a href = "/feedback" > フィードバックを送る！</ a >
< li >< a href = "/sitemap" > サイトマップ</ a >
</ ul >
</ nav >
< p >< small > 著作権 © 2015 The Snacker —
< a href = "/tos" > サービス利用規約</ a ></ small ></ p >
</ footer >
</ body > address 要素すべての現在のエンジンでサポートされています。
header、
footer、または
address
要素の子孫を含めることはできません。
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 要素のコレクションです。
ユーザーエージェントは、ノードの連絡先情報をユーザーに公開したり、セクションを連絡先情報に基づいてインデックスするなど、他の目的で使用することがあります。
この例では、フッターには連絡先情報と著作権表示が含まれています。
< 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 > h1～h6
要素は、見出しレベルを持ちます。これは要素の算出された見出しレベルを取得することによって与えられます。
これらの要素は見出しを表します。見出しの 見出しレベルが低いほど、その見出しの祖先セクションが少なくなります。
アウトラインは、たとえば目次を生成するときに、ドキュメントのアウトラインを生成するために使用されるべきです。インタラクティブな目次を作成するときは、エントリがユーザーを関連する見出しにジャンプさせるべきです。
ドキュメントに1つ以上の見出しがある場合、少なくとも1つの見出しがアウトライン内で 見出しレベル 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 > headingoffset
内容属性は、作者が子孫の見出しレベルをオフセットできるようにします。
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 に設定する。
Assert: level は 0 でないこと。
level を、要素の算出された見出しオフセットを取得するの結果だけ増加させる（elementを与える）。
level が 9 より大きければ、9 を返す。
level を返す。
要素の算出された見出しオフセットを取得するには、要素elementを与えて、以下の手順を実行します。返される値は非負整数です。
offset を 0 にする。
inclusiveAncestor を element にする。
inclusiveAncestor が null でない間、以下を繰り返す：
nextOffset を 0 にする。
inclusiveAncestor が HTML
要素 かつ
headingoffset
属性を持つなら、その値を非負整数の構文解析規則で解析する。
解析結果がエラーでないなら、nextOffset をその値に設定する。
offset を nextOffset だけ増加させる。
inclusiveAncestor が HTML 要素かつ
headingreset
属性を持つなら、offset を返す。
inclusiveAncestor をフラットツリー内での親ノードに設定する。
offset を返す。
この例は、headingoffset、
headingreset、
aria-level
属性の組み合わせを、コメント付きでそれぞれの見出しレベルを示しています。この例は様々な組み合わせを説明するもので、ベストプラクティス例ではありません。
< body >
< main >
< h1 > これは見出しレベル1です</ h1 >
< article headingoffset = "1" >
< h1 > これは見出しレベル2です</ h1 >
< section headingoffset = "1" >
< h1 > これは見出しレベル3です</ h1 >
< dialog headingreset >
< h1 > これは見出しレベル1です</ h1 >
</ dialog >
</ section >
</ article >
< h1 aria-level = "2" > これは見出しレベル2です</ h1 >
</ main >
</ body > 次のマークアップフラグメントは:
< 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>.
アウトラインのレンダリングされたビューは次のように見えるかもしれません:
まず、章やサブセクションが非常に短い本のドキュメントです:
<!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 > このアウトラインは次のように表示されるかもしれません:
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 > このドキュメントのアウトラインは次のように表示されるかもしれません:
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 > このドキュメントのアウトラインは次のように表示されるかもしれません:
次の例は準拠していますが、見出しレベルが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 > このドキュメントのアウトラインは次のように表示されるかもしれません:
次の例は準拠していますが、最初の見出しのレベルが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 > このドキュメントのアウトラインは次のように表示されるかもしれません:
ユーザーエージェントは、ユーザーがナビゲーションを容易に行えるように、ページのアウトラインを表示することを推奨します。これは特に、スクリーンリーダーなどの非視覚メディアにおいて重要です。
例えば、ユーザーエージェントは以下のように矢印キーをマッピングすることができます：
このセクションは規範的ではありません。
| 要素 | 目的 |
|---|---|
| 例 | |
body
| 文書の内容。 |
| |
article
| 文書、ページ、アプリケーション、またはサイト内の完全または独立した構成要素。例えば、フォーラムの投稿、雑誌や新聞の記事、ブログのエントリー、ユーザー投稿のコメント、インタラクティブウィジェットやガジェット、またはその他の独立したコンテンツアイテムが含まれる可能性があります。 |
| |
section
| 文書またはアプリケーションの一般的なセクション。この文脈では、セクションとは、通常、見出しを伴う内容のテーマ別のグループ化を指します。 |
| |
nav
| ページ内の他のページまたはページ内の部分へのリンクを含むセクション: ナビゲーションリンクが含まれるセクション。 |
| |
aside
| aside要素の周囲の内容に関連するが、それとは独立して考えられるコンテンツを含むページのセクション。このようなセクションは、印刷されたタイポグラフィでしばしばサイドバーとして表現されます。
|
| |
h1–h6
| 見出し |
| |
hgroup
| 見出しと関連コンテンツ。この要素は、1つまたは複数の 要素を含む |
| |
header
| 導入的またはナビゲーション的な支援のグループ。 |
| |
footer
| 最も近い祖先セクショニングコンテンツ要素、またはそのような祖先がない場合はbody 要素のフッター。フッターには通常、そのセクションに関する情報、著者に関するデータ、関連文書へのリンク、著作権情報などが含まれます。 |
|
このセクションは非規範的です。
sectionは他の何かの一部を構成します。articleはそれ自体が独立したものです。しかし、どちらがどちらなのかどうやって分かるのでしょうか？本当の答えは「著者の意図次第」というのがほとんどです。
例えば、「グラニースミス」という章がある本を想像してみてください。そこには「これらのジューシーな緑のリンゴはアップルパイのフィリングに最適です。」とだけ書かれているとします。それはsectionです。なぜなら、（おそらく）他の種類のリンゴに関する多くの章があるからです。
一方で、ツイートやredditのコメント、tumblrの投稿、新聞のクラシファイド広告に「グラニースミス。これらのジューシーな緑のリンゴはアップルパイのフィリングに最適です。」とだけ書かれているとしたら、それはarticleです。なぜなら、それが全体だからです。
記事へのコメントは、コメントしているarticleの一部ではないため、それ自体が独立したarticleです。
p 要素すべての現行エンジンでのサポート。
すべての現行エンジンでのサポート。
hgroup 要素の子として。p 要素の 終了タグ は、次の要素が p 要素の後に続く場合に省略できます
address,
article,
aside, blockquote,
details, div,
dl, fieldset, figcaption,
figure,
footer, form, h1,
h2,
h3,
h4,
h5,
h6,
header, hgroup,
hr, main, menu, nav, ol,
p, pre, search, section, table,
または ul 要素、または親要素に他のコンテンツがなく、親要素が HTML 要素 であり、次の要素でない場合
a,
audio, del, ins, map, noscript,
または video 要素、または 自律型カスタム要素。
[Exposed =Window ]
interface HTMLParagraphElement : HTMLElement {
[HTMLConstructor ] constructor ();
// also has obsolete members
};段落は通常、隣接するブロックから空白行やインデントによって物理的に分離されたテキストブロックとして視覚メディアに表されますが、スタイルシートやユーザーエージェントは、段落の区切りを異なる方法で表示することもできます。たとえば、インラインピルクロウ (¶) を使用することもできます。
次の例は、適合する 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 > 最終更新日: 2001-04-23</ p >
< p > 著者: fred@example.com</ p >
</ section > ただし、次のようにマークアップする方が良いです:
< section >
<!-- ... -->
< footer > 最終更新日: 2001-04-23</ footer >
< address > 著者: fred@example.com</ address >
</ section > または:
< section >
<!-- ... -->
< footer >
< p > 最終更新日: 2001-04-23</ p >
< address > 著者: fred@example.com</ address >
</ footer >
</ section > リスト要素（特に ol と ul 要素）は、p
要素の子要素になることはできません。そのため、文に箇条書きリストが含まれている場合、それをどのようにマークアップするかが問題になることがあります。
例えば、この素晴らしい文には次のような箇条書きがあります
さらに以下で説明されます。
解決策は、HTML の段落が論理的な概念ではなく、構造的な概念であることを認識することです。上記の素晴らしい例では、実際にはこの仕様で定義される 5つ の段落があります: リストの前に1つ、各箇条書きに1つ、リストの後に1つ。
上記の例のマークアップは次のようになります:
< p > 例えば、この素晴らしい文には次のような箇条書きがあります</ p >
< ul >
< li > ウィザード、
< li > 光速を超える旅行、そして
< li > テレパシー、
</ ul >
< p > さらに以下で説明されます。</ p > 複数の「構造的」段落で構成される「論理的」段落を便利にスタイルしたい場合、div 要素を p 要素の代わりに使用できます。
例えば、上記の例は次のようにすることができます:
< div > 例えば、この素晴らしい文には次のような箇条書きがあります
< ul >
< li > ウィザード、
< li > 光速を超える旅行、そして
< li > テレパシー、
</ ul >
さらに以下で説明されます。</ div > この例は依然として5つの構造的段落を持っていますが、著者は例の各部分を個別に考慮するのではなく、div 全体をスタイルすることができます。
hr
要素すべての現行エンジンでのサポート。
すべての現行エンジンでのサポート。
select 要素内部コンテンツ要素。
select 要素の子要素として。
[Exposed =Window ]
interface HTMLHRElement : HTMLElement {
[HTMLConstructor ] constructor ();
// also has obsolete members
};hr 要素は 表します 段落レベルの主題の分割を、例えば物語のシーン変更や参考書のセクション内での話題の転換を。または、select 要素のオプションセット間の区切りを表します。
次の架空のプロジェクトマニュアルの抜粋には、セクション内でトピックを区切るために
hr 要素が使用されている2つのセクションが示されています。
< section >
< h1 > 通信</ h1 >
< p > コミュニケーションにはさまざまな方法があります。このセクションでは、プロジェクトで使用されている重要な方法のいくつかを紹介します。</ p >
< hr >
< p > 通信石はペアであるようで、神秘的な特性を持っています：</ p >
< ul >
< li > 単独で使用した場合、起動されると双方向に思考を転送できます。</ li >
< li > 他のデバイスと一緒に使用した場合、自分の意識を別の体に転送できます。</ li >
< li > 両方の石を他のデバイスと一緒に使用した場合、意識が体を交換します。</ li >
</ ul >
< hr >
< p > 無線機はメートル単位の電磁スペクトルを使用します。</ p >
< hr >
< p > 信号弾はナノメートル範囲の電磁スペクトルを使用します。</ p >
</ section >
< section >
< h1 > 食物</ h1 >
< p > プロジェクトのすべての食物は配給されています：</ p >
< dl >
< dt > じゃがいも</ dt >
< dd > 1日2個</ dd >
< dt > スープ</ dt >
< dd > 1日1杯</ dd >
</ dl >
< hr >
< p > 料理はシェフが決められたローテーションで行います。</ 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 > pre
要素すべての現行エンジンでのサポート。
すべての現行エンジンでのサポート。
[Exposed =Window ]
interface HTMLPreElement : HTMLElement {
[HTMLConstructor ] constructor ();
// also has obsolete members
};pre
要素は、整形済みテキストのブロックを表し、構造が要素ではなく印刷上の規則によって表されます。
HTML 構文では、pre 要素の開始タグに続く先頭の改行文字が取り除かれます。
pre 要素が使用されるケースの例:
著者は、フォーマットが失われた場合に整形済みテキストがどのように表示されるかを考慮することをお勧めします。これは、音声合成装置や点字ディスプレイなどのユーザーに当てはまります。ASCII アートのような場合には、テキストの説明など、より普遍的にアクセス可能な代替の表現が読者にとって望ましいでしょう。
コンピュータコードのブロックを表すには、pre 要素を code
要素と共に使用することができます。また、コンピュータ出力のブロックを表すには、pre 要素を samp 要素と共に使用することができます。同様に、kbd 要素を pre
要素内で使用して、ユーザーが入力するテキストを示すことができます。
この要素は双方向アルゴリズムに関するレンダリング要件を持ちます。
次のスニペットでは、コンピュータコードのサンプルが表示されています。
< p > これは < code > Panel</ code > コンストラクタです:</ p >
< pre >< code > function Panel(element, canClose, closeHandler) {
this.element = element;
this.canClose = canClose;
this.closeHandler = function () { if (closeHandler) closeHandler() };
}</ code ></ pre > 次のスニペットでは、samp と kbd 要素が pre 要素内に混在して、Zork I
のセッションが表示されています。
< 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 > blockquote
要素
すべての現行エンジンでのサポート。
すべての現行エンジンでのサポート。
cite —
引用の出典または編集に関する追加情報へのリンク
[Exposed =Window ]
interface HTMLQuoteElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions , ReflectURL ] attribute USVString cite ;
};The HTMLQuoteElement
interface is
also used by the q
element.
blockquote
要素は、他のソースから引用されたセクションを表します。
blockquote
内のコンテンツは、他のソースからの引用である必要があり、そのアドレスがある場合は cite 属性で引用することができます。
cite
属性が存在する場合、それは 有効な URL (スペースで囲まれている可能性あり)
でなければなりません。対応する引用リンクを取得するためには、その属性の値は要素の ノードドキュメント に対して 解析
されなければなりません。ユーザーエージェントは、そのような引用リンクをユーザーがたどることを許可する場合がありますが、これらは主にプライベートな使用（例:
サイトの引用の使用に関する統計を収集するサーバー側のスクリプトなど）を目的としており、読者のためではありません。
blockquote
の内容は、省略されるか、テキストの言語の慣習に従って文脈が追加されることがあります。
例えば、英語では伝統的に角括弧を使用します。次の文章を含むページを考えてみましょう。「Jane はクラッカーを食べた。そして彼女はリンゴと魚が好きだと言った。」これを次のように引用できます:
< 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
を使用した短いスニペットの使用を示しており、p 要素を
blockquote
要素内に使用する必要がないことを示しています:
< 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
要素を使用するのは適切ではありません。
ol 要素
すべての現行エンジンでサポートされています。
すべての現行エンジンでサポートされています。
li要素が含まれている場合: 実質的コンテンツ。
liおよびスクリプトサポート要素。
reversed — リストを逆順に番号付け
start — リストの開始値
type — リストマーカーの種類
[Exposed =Window ]
interface HTMLOListElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions , Reflect ] attribute boolean reversed ;
[CEReactions , Reflect , ReflectDefault=1] attribute long start ;
[CEReactions , Reflect ] attribute DOMString type ;
// 廃止されたメンバーも含まれます
};ol要素は、アイテムが意図的に順序付けされており、その順序を変更するとドキュメントの意味が変わるようなリストを表します。
リストのアイテムは、li要素の子ノードであり、ol要素内でツリー順に配置されます。
すべての最新のエンジンでサポートされています。
reversed属性はブール属性です。存在する場合、リストが降順（...、3、2、1）であることを示します。属性が省略されている場合、リストは昇順（1、2、3、...）になります。
start属性は、存在する場合、有効な整数でなければなりません。この属性はリストの開始値を決定するために使用されます。
ol要素には、次のようにして決定される整数の開始値があります。
parsedを、属性値を整数として解析した結果とする。
parsedがエラーでない場合、parsedを返す。
もしol要素にreversed属性がある場合、所有されているli要素の数を返す。
1を返す。
type属性は、リスト内のマーカーの種類を指定するために使用されます。これは、アイテムがその番号/文字によって参照されるなどの場合に重要です。属性が指定されている場合、その値は同一である必要があり、次の表の最初のセルの1つに与えられた文字のいずれかでなければなりません。type属性は、表の最初のセルに一致する行の2番目の列に与えられた状態を表します。セルが一致しない場合、または属性が省略された場合、属性は10進数状態を表します。
| キーワード | 状態 | 説明 | 値1-3および3999-4001の例 | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
1(U+0031)
| 10進数 | 10進数 | 1. | 2. | 3. | ... | 3999. | 4000. | 4001. | ... |
a
(U+0061)
| 小文字アルファベット | 小文字ラテンアルファベット | a. | b. | c. | ... | ewu. | ewv. | eww. | ... |
A
(U+0041)
| 大文字アルファベット | 大文字ラテンアルファベット | A. | B. | C. | ... | EWU. | EWV. | EWW. | ... |
i
(U+0069)
| 小文字ローマ数字 | 小文字ローマ数字 | i. | ii. | iii. | ... | mmmcmxcix. | i̅v̅. | i̅v̅i. | ... |
I
(U+0049)
| 大文字ローマ数字 | 大文字ローマ数字 | I. | II. | III. | ... | MMMCMXCIX. | I̅V̅. | I̅V̅I. | ... |
ユーザーエージェントは、type属性の状態に一致する形式でリストのアイテムをレンダリングする必要があります。値が0以下の数値の場合、type属性に関係なく、常に10進数システムを使用する必要があります。
CSSユーザーエージェントの場合、この属性の'list-style-type'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 > ul
要素すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
li 要素が含まれている場合：明示的コンテンツ。
li および スクリプトサポート要素。
[Exposed =Window ]
interface HTMLUListElement : HTMLElement {
[HTMLConstructor ] constructor ();
// 廃止されたメンバーもあります
};ul
要素は、アイテムの順序が重要ではないリスト、つまり順序を変更してもドキュメントの意味が大幅に変わらないリストを表します。
リストのアイテムは、li 要素の子ノードであり、ul 要素の子ノードです。
次のマークアップは、順序が重要でなく、ul
要素が適切であるリストを示しています。このリストを、同じアイテムを使用した 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 > menu
要素
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
li
要素が含まれている場合：明示的コンテンツ。
li および スクリプトサポート要素。
[Exposed =Window ]
interface HTMLMenuElement : HTMLElement {
[HTMLConstructor ] constructor ();
// 廃止されたメンバーもあります
};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 > 従来のツールバーメニューのように見せるスタイリングは、アプリケーションの役割です。
li
要素全ての現行エンジンでのサポート。
全ての現行エンジンでのサポート。
ol 要素内。
ul 要素内。
menu 要素内。
li 要素が続くか、親要素にこれ以上コンテンツがない場合、終了タグ を省略できます。
ul または menu 要素の子でない場合: 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 要素である場合。
特定の リストオーナー owner が所有する各要素の 序数 を決定するために、次の手順を実行します:
i を 1 に設定します。
owner が ol
要素である場合、numbering を
owner の 開始値 に設定します。
それ以外の場合、numbering を 1 に設定します。
ループ: i が オーナーが所有するリストアイテム の数を超える場合、終了します。すべての 所有されたリストアイテム に 序数 が割り当てられました。
item が li
要素であり、value
属性を持つ場合、次の手順を実行します。
属性の値を整数として解析する結果を parsed に設定します。
parsed がエラーでない場合、numbering を parsed に設定します。
item の 序数 は numbering です。
owner が ol
要素であり、owner が 逆順
属性を持っている場合、numbering を 1 減らします。
それ以外の場合、numbering を 1 増やします。
i を 1 増やします。
ループ ラベルの付いたステップに戻ります。
この要素のvalueIDL属性は、序数値と直接対応するものではありません。ただ単に内容属性を反映するだけです。例えば、以下のリストの場合：
< ol >
< li > Item 1
< li value = "3" > Item 3
< li > Item 4
</ ol > 次の例では、トップテン映画が（逆順で）リストされています。figure 要素とその figcaption
要素を使用して、リストにタイトルを付ける方法に注目してください。
< figure >
< figcaption > 史上最高の映画トップ 10</ figcaption >
< ol >
< li value = "10" >< cite > ジョシーとプッシーキャッツ</ cite > 、2001</ li >
< li value = "9" >< cite lang = "sh" > Црна мачка, бели мачор</ cite > 、1998</ li >
< li value = "8" >< cite > バグズ・ライフ</ cite > 、1998</ li >
< li value = "7" >< cite > トイ・ストーリー</ cite > 、1995</ li > 、
< li value = "6" >< cite > モンスターズ・インク</ cite > 、2001</ li > 、
< li value = "5" >< cite > カーズ</ cite > 、2006</ li > 、
< li value = "4" >< cite > トイ・ストーリー 2</ cite > 、1999</ li > 、
< li value = "3" >< cite > ファインディング・ニモ</ cite > 、2003</ li > 、
< li value = "2" >< cite > Mr.インクレディブル</ cite > 、2004</ li > 、
< li value = "1" >< cite > レミーのおいしいレストラン</ cite > 、2007</ li > 、
</ ol >
</ figure > また、逆順 属性を ol
要素に使用することで、以下のようにマークアップすることもできます。
< figure >
< figcaption > 史上最高の映画トップ 10</ figcaption >
< ol reversed >
< li >< cite > ジョシーとプッシーキャッツ</ cite > 、2001</ li >
< li >< cite lang = "sh" > Црна мачка, бели мачор</ cite > 、1998</ li >
< li >< cite > バグズ・ライフ</ cite > 、1998</ li >
< li >< cite > トイ・ストーリー</ cite > 、1995</ li >
< li >< cite > モンスターズ・インク</ cite > 、2001</ li >
< li >< cite > カーズ</ cite > 、2006</ li >
< li >< cite > トイ・ストーリー 2</ cite > 、1999</ li >
< li >< cite > ファインディング・ニモ</ cite > 、2003</ li >
< li >< cite > Mr.インクレディブル</ cite > 、2004</ li >
< li >< cite > レミーのおいしいレストラン</ cite > 、2007</ li >
</ ol >
</ figure > h1
要素などの見出し要素を li
要素内に含めることは適合していますが、著者が意図したセマンティクスを伝えていない可能性が高いです。見出しは新しいセクションの始まりを示すため、リスト内の見出しは暗黙的にリストを複数のセクションに分割します。
dl
要素すべての現行エンジンでのサポート。
すべての現行エンジンでのサポート。
dt 要素のグループと、1 つ以上の
dd 要素のグループ。これらは、スクリプトサポート要素
と混在する場合があります。
div 要素と、スクリプトサポート要素
が混在する場合があります。
[Exposed =Window ]
interface HTMLDListElement : HTMLElement {
[HTMLConstructor ] constructor ();
// 廃止されたメンバーも含まれます
};dl 要素は、0 個以上の名前と値のペア（記述リスト）からなる関連リストを表します。名前と値のペアは、1 つ以上の名前（dt 要素、子要素としての div 要素を含む場合があります）と、それに続く 1
つ以上の値（dd 要素、子要素としての div
要素を含む場合があります）で構成されます。他のノードは無視され、dt
要素と dd 要素の子要素、および dt 要素と dd 要素が div 要素の子要素である場合にのみ考慮されます。1 つの dl 要素内には、1 つの名前に対して 1 つ以上の dt 要素が含まれてはなりません。
名前と値のペアは、用語と定義、メタデータのトピックと値、質問と回答、またはその他の名前と値のデータのグループである可能性があります。
グループ内の値は代替案です。同じ値の一部を構成する複数の段落は、すべて同じ dd 要素内に記載する必要があります。
グループのリスト、および各グループ内の名前と値の順序は、重要である場合があります。
グループに マイクロデータ 属性や他の グローバル属性 を適用して注釈を付けたり、単にスタイリングの目的で使用したりするために、dl 要素内の各グループを div 要素でラップすることができます。これにより、dl 要素のセマンティクスは変わりません。
dl 要素 dl
の名前と値のペアは、次のアルゴリズムを使用して決定されます。名前と値のペアには名前（dt 要素のリスト、初期は空）と値（dd 要素のリスト、初期は空）があります。
groups を名前と値のペアの空のリストに設定します。
current を新しい名前と値のペアに設定します。
seenDd を false に設定します。
child を dl の 最初の子要素 に設定します。
grandchild を null に設定します。
child が null でない間:
child が div
要素である場合、次の手順を実行します:
grandchild を child の 最初の子要素 に設定します。
grandchild が null でない間:
プロセス
dt または dd を grandchild に対して実行します。
grandchild を grandchild の 次の兄弟 に設定します。
それ以外の場合、プロセス dt
または dd を child に対して実行します。
child を child の 次の兄弟 に設定します。
current が空でない場合、current を groups に追加します。
groups を返します。
ノード node に対して dt または dd をプロセスする
ための処理を行うことは、次の手順を意味します:
名前と値のペアに空のリストが名前または値として含まれている場合、しばしば dd 要素が dt
要素の代わりに誤って使用されていることが原因です。適合性チェッカーはそのようなミスを検出し、著者に適切なマークアップの使用方法を助言することができるかもしれません。
次の例では、1 つのエントリ（「著者」）が 2 つの値（「ジョン」と「ルーク」）にリンクされています。
< dl >
< dt > 著者
< dd > ジョン
< dd > ルーク
< dt > 編集者
< dd > フランク
</ dl > 次の例では、1 つの定義が 2 つの用語にリンクされています。
< dl >
< dt lang = "en-US" > < dfn > color</ dfn > </ dt >
< dt lang = "en-GB" > < dfn > colour</ dfn > </ dt >
< dd > 人間の場合、視覚の細かな構造が 3 つの異なるフィルター分析を識別する能力に起因する感覚です。</ dd >
</ dl > 次の例は、メタデータの一種をマークアップするために dl
要素を使用する例です。例の最後では、1 つのグループに 2 つのメタデータラベル（「著者」と「編集者」）と 2
つの値（「ロバート・ロスマン」と「ダニエル・ジャクソン」）が含まれています。この例では、スタイリングを補助するために div 要素も使用されています。
< dl >
< div >
< dt > 最終更新日時 </ dt >
< dd > 2004-12-23T23:33Z </ dd >
</ div >
< div >
< dt > 推奨更新間隔 </ dt >
< dd > 60s </ dd >
</ div >
< div >
< dt > 著者 </ dt >
< dt > 編集者 </ dt >
< dd > ロバート・ロスマン </ dd >
< dd > ダニエル・ジャクソン </ dd >
</ div >
</ dl > 次の例では、手順を提示するために dl 要素が使用されています。
ここでは手順の順序が重要です（他の例では、ブロックの順序は重要ではありませんでした）。
< p > 次のようにして勝利ポイントを決定します（最初に一致するケースを使用します）：</ p >
< dl >
< dt > ちょうど5つの金貨がある場合 </ dt >
< dd > 5つの勝利ポイントを獲得します </ dd >
< dt > 1つ以上の金貨があり、1つ以上の銀貨がある場合 </ dt >
< dd > 2つの勝利ポイントを獲得します </ dd >
</ dt > 1つ以上の銀貨がある場合 </ dt >
< dd > 1つの勝利ポイントを獲得します </ dd >
</ dt > その他の場合 </ dt >
< dd > 勝利ポイントは獲得できません </ dd >
</ dl > 次のスニペットでは、dl
要素が用語集として使用されています。定義されている単語を示すための dfn
の使用に注目してください。
< dl >
< dt >< dfn > アパートメント</ dfn > 、n.</ dt >
< dd > 1つ以上のスレッドと1つ以上のCOMオブジェクトをグループ化する実行コンテキスト。</ dd >
< dt >< dfn > フラット</ dfn > 、n.</ dt >
< dd > 空気の抜けたタイヤ。</ dd >
< dt >< dfn > ホーム</ dfn > 、n.</ dt >
< dd > ユーザーのログインディレクトリ。</ dd >
</ dl > この例では、マイクロデータ 属性を使用して、dl 要素と div
要素を使用してフランスのレストランのアイスクリームデザートに注釈を付けています。
< dl >
< div itemscope itemtype = "http://schema.org/Product" >
< dt itemprop = "name" > カフェまたはチョコレート・リエジョワ
< 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つのカフェまたはチョコレートボール、1つのバニラボール、カフェまたはチョコレートソース、ホイップクリーム
</ div >
< div itemscope itemtype = "http://schema.org/Product" >
< dt itemprop = "name" > アメリカン
< 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つのクレームブリュレボール、1つのバニラボール、1つのキャラメルボール、ホイップクリーム
</ div >
</ dl > div 要素がない場合、次のように itemref 属性を使用して、dd 要素のデータをアイテムとリンクする必要があります。
< dl >
< dt itemscope itemtype = "http://schema.org/Product" itemref = "1-offer 1-description" >
< span itemprop = "name" > カフェまたはチョコレート・リエジョワ</ 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つのカフェまたはチョコレートボール、1つのバニラボール、カフェまたはチョコレートソース、ホイップクリーム
</ dt itemscope itemtype = "http://schema.org/Product" itemref = "2-offer 2-description" >
< span itemprop = "name" > アメリカン</ 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つのクレームブリュレボール、1つのバニラボール、1つのキャラメルボール、ホイップクリーム
</ dl > dl
要素は、対話をマークアップするためには適していません。対話のマークアップ方法の例をご覧ください。
dt要素すべての現在のエンジンでサポートされています。
dl要素内のddまたはdt要素の前。
dl要素の子であるdiv要素内のddまたはdt要素の前。
header、footer、セクショニングコンテンツまたは見出しコンテンツの子孫を持たないこと。
dt要素の終了タグは、次に別のdt要素またはdd要素が続く場合に省略可能です。
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 > dd要素すべての現在のエンジンでサポートされています。
dl要素内のdtまたはdd要素の後。
dl要素の子であるdiv要素内のdtまたはdd要素の後。
dd要素の終了タグは、次に別のdd要素またはdt要素が続く場合、または親要素にこれ以上コンテンツがない場合に省略可能です。
HTMLElementを使用。
dd要素は、説明リスト（dl要素）の用語説明グループの説明、定義、または値の部分を表します。
dlは、辞書のように語彙リストを定義するために使用できます。次の例では、dtとdfnで与えられた各エントリに、さまざまな定義の部分を示すいくつかの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 > figure要素すべての現在のエンジンでサポートされています。
figcaption要素の後にフローコンテンツ。
figcaption要素。
HTMLElementを使用。
figure要素は、オプションでキャプションを付けたフローコンテンツを表します。これは独立した内容で（完全な文のように）、通常はドキュメントの主要な流れから単一の単位として参照されます。
この文脈で「独立した」とは、必ずしも独立した存在を意味するわけではありません。たとえば、段落内の各文は独立していますが、文の一部である画像はfigureに適していませんが、画像で構成された完全な文は適しているといえます。
この要素は、イラスト、図、写真、コードリストなどを注釈するために使用できます。
figureがキャプション（たとえば図の番号）によって識別され、ドキュメントの主要なコンテンツから参照されている場合、こうしたコンテンツをページの横、専用ページ、または付録に移動させても、ドキュメントの流れに影響を与えずに済むようになります。
figure要素が相対的な位置（たとえば「上の写真」や「次の図が示すように」など）で参照されている場合、そのfigureを移動させるとページの意味が乱れてしまいます。著者は、ページが簡単に再スタイル化されてもページの意味が影響を受けないように、相対参照の代わりにラベルを使用してfigureを参照することを検討することをお勧めします。
最初のfigcaption要素の子要素がある場合は、そのfigure要素の内容のキャプションを表します。子figcaption要素がない場合、キャプションは存在しません。
figure要素の内容は、周囲の流れの一部です。たとえば、画像共有サイトで写真を表示することがページの目的である場合、figureとfigcaption要素を使用して、そのfigureにキャプションを明示的に提供できます。周囲の流れにわずかに関連するコンテンツや別の目的を果たすコンテンツの場合は、aside要素を使用するべきです（figureを包むこともできます）。たとえば、記事からのコンテンツを繰り返す引用が、読者を引き付けるためや重要なトピックを強調するために、figureよりもasideに適しているでしょう。
この例では、コードリストをマークアップするためにfigure要素を使用しています。
< p > < a href = "#l4" > リスト4</ a > で、主なコアインターフェースAPI宣言を確認できます。</ p >
< figure id = "l4" >
< figcaption > リスト4. 主なコアインターフェースAPI宣言。</ figcaption >
< pre >< code > interface PrimaryCore {
boolean verifyDataLine();
undefined sendData(sequence< byte> data);
undefined initSelfDestruct();
}</ code ></ pre >
</ figure >
< p > APIは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" > 前</ a > — < a href = "19416.html" > 次</ a ></ nav > この例では、figureではない画像と、figureである画像とビデオを示しています。最初の画像は、この例の2番目の文の一部であり、独立したユニットではないため、figureには不適切です。
< h2 > Malinko's comics</ h2 >
< p > この事件は、ある種の「知的財産」侵害に関するもので、漫画に関連しています（エキシビットAを参照）。訴訟は次の言葉で終わるトレーラーが公開された後に始まりました：
< blockquote >
< img src = "promblem-packed-action.png" alt = "ROUGH COPY! Promblem-Packed Action!" >
</ blockquote >
< p > ...が放送されました。弁護士が大きなノートを持って先制攻撃を開始しました。このトレーラーの完全なコピーはエキシビットBに含まれています。
< figure >
< img src = "ex-a.png" alt = "汚れた紙に描かれた2つの落書きのようなもの。" >
< figcaption > エキシビットA. 主張された< cite > 粗いコピー</ cite > の漫画。</ figcaption >
</ figure >
< figure >
< video src = "ex-b.mov" ></ video >
< figcaption > エキシビットB. < cite > 粗いコピー</ cite > のトレーラー。</ figcaption >
</ figure >
< p > 訴訟は法廷外で解決されました。この例では、詩の一部を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 > ジャバウォックィ</ cite > （第1詩）。ルイス・キャロル、1832-98</ figcaption >
</ figure > この例では、城に関するはるかに大きな作品の一部である可能性がある部分において、ネストされたfigure要素を使用して、グループキャプションと、グループ内の各figureに対する個別のキャプションの両方を提供しています:
< figure >
< figcaption > 時代を超えての城: 1423年、1858年、そして1999年の順に。</ figcaption >
< figure >
< figcaption > エッチング。匿名、約1423年。</ figcaption >
< img src = "castle1423.jpeg" alt = "城には1つの塔があり、高い壁に囲まれています。" >
</ figure >
< figure >
< figcaption > 油絵。マリア・トウル、1858年。</ figcaption >
< img src = "castle1858.jpeg" alt = "城には現在2つの塔と2つの壁があります。" >
</ figure >
< figure >
< figcaption > フィルム写真。ピーター・ジャンクル、1999年。</ figcaption >
< img src = "castle1999.jpeg" alt = "城は廃墟となり、元の塔だけが一体化しています。" >
</ figure >
</ figure > 前の例は、ネストされたfigure/figcaptionペアの代わりにtitle属性を使用して、より簡潔に書くことができます:
< figure >
< img src = "castle1423.jpeg" title = "エッチング。匿名、約1423年。" alt = "城には1つの塔があり、高い壁に囲まれています。" >
< img src = "castle1858.jpeg" title = "油絵。マリア・トウル、1858年。" alt = "城には現在2つの塔と2つの壁があります。" >
< img src = "castle1999.jpeg" title = "フィルム写真。ピーター・ジャンクル、1999年。" alt = "城は廃墟となり、元の塔だけが一体化しています。" >
< figcaption > 時代を超えての城: 1423年、1858年、そして1999年の順に。</ figcaption >
</ figure > figureは、コンテンツから暗黙的に参照される場合もあります:
< article >
< h1 > 議会での財政交渉が行き詰まり、締め切りが迫る</ h1 >
< figure >
< img src = "obama-reid.jpeg" alt = "オバマとリードがオーバルオフィスで笑顔で座っています。" >
< figcaption > バラク・オバマとハリー・リード。ホワイトハウスの報道写真。</ figcaption >
</ figure >
< p > 火曜日、議会での財政行き詰まりを終わらせるための交渉が失速し、両院は政府を再開し、国の借入権限を引き上げる方法を模索していましたが、木曜日の締め切りが迫っていました。</ p >
...
</ article > figcaption
要素
全ての現行エンジンでサポートされています。
figure要素の最初または最後の子要素として。
HTMLElementを使用します。
figcaption要素は、親figure要素の残りの内容を説明するキャプションまたは凡例を表します。
この要素には、ソースに関する追加情報を含めることができます:
< figcaption >
< p > アヒル。</ p >
< p >< small > 写真提供: 🌟 ニュース</ small ></ p >
</ figcaption > < figcaption >
< p > 3部屋のアパートの平均家賃（非営利アパートを除く）</ p >
< p > チューリッヒ統計局 — < time datetime = 2017-11-14 > 2017年11月14日</ time ></ p >
</ figcaption > main要素すべての現在のエンジンでサポートされています。
main要素である場合に限ります。
HTMLElementを使用します。
main 要素は、文書の主要な内容を表します。
文書には、main
要素が1つ以上あってはなりません。ただし、属性が指定されていない場合に限ります。
階層的に正しい 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.5 em ; border : thin solid ; padding : 0.5 em ;
background : #EFF ; color : black ; box-shadow : 0 0 0.25 em #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要素が使用され、スクリプトが使用されてナビゲーションがサーバーラウンドトリップなしで機能し、現在のもの以外には属性が設定されます：
<!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 > search要素現在のエンジンではサポートされていません。
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つの検索機能があります。最初の機能はウェブページの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 > div要素
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
select 要素内部コンテンツ要素。
optgroup 要素内部コンテンツ要素。
option 要素内部コンテンツ要素。
dl 要素の子として。
dl 要素の子である場合：1つ以上のdt 要素の後に1つ以上のdd要素、必要に応じてスクリプト支援要素との混在も可能。
option
要素の子孫の場合：0個以上のoption 要素内部コンテンツ要素。
optgroup
要素の子孫の場合：0個以上のoptgroup 要素内部コンテンツ要素。
select
要素の子孫の場合：0個以上のselect 要素内部コンテンツ要素。
[Exposed =Window ]
interface HTMLDivElement : HTMLElement {
[HTMLConstructor ] constructor ();
// 廃止されたメンバーも含みます
};div要素には特別な意味はありません。要素は子要素を表現します。連続した要素のグループに共通のセマンティクスをマークアップするために、class、lang、およびtitle属性と一緒に使用できます。また、dl要素内で使用し、dtおよびdd要素のグループをラップするために使用できます。
著者には、div要素を最後の手段として使用することを強くお勧めします。div要素の代わりにより適切な要素を使用すると、読者にとってのアクセシビリティが向上し、著者にとってのメンテナンスが容易になります。
たとえば、ブログ記事はarticleでマークアップし、章はsectionでマークアップし、ページのナビゲーション補助はnavでマークアップし、フォームコントロールのグループはfieldsetでマークアップします。
一方、div要素は、スタイル目的で、または同じ方法で注釈を付ける複数の段落をセクション内でラップするために便利です。以下の例では、2つの段落の言語を一度に設定する方法としてdiv要素を使用しており、2つの段落要素に個別に言語を設定する代わりに、div要素内でまとめています:
< 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 > a要素すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
Support in all current engines.
Support in all current engines.
Support in all current engines.
href属性を持つ場合: インタラクティブコンテンツ.
a要素の子孫、またはtabindex属性を指定された子孫が含まれていてはいけません。
href — ハイパーリンクのアドレス
target — ナビゲーブルによるハイパーリンク ナビゲーション
download
—
リソースをナビゲートする代わりにダウンロードするかどうか、およびその場合のファイル名
ping — pingするURL
rel — ハイパーリンクを含む場所とリソースの間の関係
hreflang
—
リンク先リソースの言語
type — リンク先リソースの種類を示すヒント
referrerpolicy
— 要素によって開始されるフェッチの参照ポリシー
href属性を持つ場合:
著者向け; 実装者向け.
[Exposed =Window ]
interface HTMLAnchorElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions , Reflect ] attribute DOMString target ;
[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 , Reflect ] attribute DOMString hreflang ;
[CEReactions , Reflect ] attribute DOMString type ;
[CEReactions ] attribute DOMString text ;
[CEReactions ] attribute DOMString referrerPolicy ;
// also has obsolete members
};
HTMLAnchorElement includes HTMLHyperlinkElementUtils ;要素がa要素であり、href属性を持つ場合、
その要素はハイパーリンク（ハイパーテキストアンカー）をその内容でラベル付けします。
要素がa要素であり、href属性を持たない場合、
その要素はプレースホルダーとして機能し、関連性がある場合にリンクが置かれる可能性がある場所を表します。これは、要素の内容のみで構成されます。
target、
download、
ping、
rel、hreflang、
type、
およびreferrerpolicy
属性は、href属性が存在しない場合、省略する必要があります。
要素にitemprop属性が指定されている場合、そのa要素にはhref属性も指定されている必要があります。
サイトが全ページで一貫したナビゲーションツールバーを使用している場合、そのページ自体にリンクする通常のリンクはa要素でマークアップできます:
< nav >
< ul >
< li > < a href = "/" > ホーム</ a > </ li >
< li > < a href = "/news" > ニュース</ a > </ li >
< li > < a > 例</ a > </ li >
< li > < a href = "/legal" > 法的情報</ a > </ li >
</ ul >
</ nav > href、target、download、
ping、
およびreferrerpolicy
属性は、ユーザーがハイパーリンクを辿るまたはハイパーリンクをダウンロードする際の動作に影響します。rel、
hreflang、
およびtype
属性は、ユーザーがリンクを辿る前にリンク先リソースの性質を示すために使用できます。
a.text
textContentと同じです。
HTMLAnchorElement/referrerPolicy
すべての現在のエンジンでサポートされています。
IDL属性referrerPolicyは、referrerpolicyコンテンツ属性を反映する必要があり、既知の値のみが許可されます。
属性のゲッターtext
は、この要素の子孫テキストコンテンツを返す必要があります。
a要素は、段落全体、リスト、テーブル、さらにはセクション全体を囲むことができます。ただし、内部にインタラクティブコンテンツ（例：ボタンや他のリンク）がない場合に限ります。この例は、全広告ブロックをリンクにする方法を示しています:
< aside class = "advertising" >
< h1 > 広告</ h1 >
< a href = "https://ad.example.com/?adid=1929&pubid=1422" >
< section >
< h1 > Mellblomatic 9000!</ h1 >
< p > すべてのウィジェットをメルブロムに変えましょう!</ p >
< p > 9.99ドル、送料と手数料別</ p >
</ section >
</ a >
< a href = "https://ad.example.com/?adid=375&pubid=1422" >
< section >
< h1 > メルブロムブラウザー</ h1 >
< p > 光の速さでウェブ閲覧が可能。</ p >
</ p > 他のブラウザはこれほど速くありません！</ p >
</ section >
</ a >
</ aside > 次の例は、スクリプトを使用してジョブリストのテーブル内の行全体を効果的にリンクにする方法を示しています:
< table >
< tr >
< th > 職位
< th > チーム
< th > 場所
</ tr >
< tr >
< td >< a href = "/jobs/manager" > マネージャー</ a >
< td > Remotees
< td > リモート
</ tr >
< td >< a href = "/jobs/director" > ディレクター</ a >
< td > Remotees
< td > リモート
</ tr >
< td >< a href = "/jobs/astronaut" > 宇宙飛行士</ a >
< td > 建築
< td > リモート
</ table >
< script >
document. querySelector( "table" ). onclick = ({ target }) => {
if ( target. parentElement. localName === "tr" ) {
const link = target. parentElement. querySelector( "a" );
if ( link) {
link. click();
}
}
}
</ script > em要素すべての現在のエンジンでサポートされています。
HTMLElementを使用します。
特定のコンテンツのストレスレベルは、その祖先em要素の数によって決まります。
ストレス強調の位置によって文の意味が変わります。この要素はコンテンツの不可欠な部分を形成します。このようにストレスが使用される正確な方法は言語によって異なります。
これらの例は、ストレス強調の変更が意味をどのように変えるかを示しています。まず、ストレスのない一般的な事実の表明:
< p > 猫はかわいい動物です。</ p > 最初の単語を強調することで、議論されている動物の種類が問題になっていることを示唆しています（おそらく誰かが犬がかわいいと主張しているかもしれません）:
< p >< em > 猫</ em > はかわいい動物です。</ p > 動詞にストレスを移すことで、文全体の真実が問題になっていることを強調します（おそらく誰かが猫はかわいくないと言っているかもしれません）:
< p > 猫は< em > かわいいです</ em > 動物です。</ p > 形容詞にストレスを移すことで、猫の正確な性質が再確認されます（おそらく誰かが猫は意地悪な動物だと提案したかもしれません）:
< p > 猫は< em > かわいい</ em > 動物です。</ p > 同様に、誰かが猫が野菜だと主張した場合、これを訂正するために最後の単語を強調するかもしれません:
< p > 猫はかわいい< em > 動物</ em > です。</ p > 文全体を強調することで、話者がこのポイントを強く伝えようとしていることが明らかになります。この種のストレス強調は通常、句読点にも影響を与えるため、ここでは感嘆符が使用されています。
< p >< em > 猫はかわいい動物です！</ em ></ p > 怒りとかわいさの強調を混ぜると、次のようなマークアップが使用されることがあります:
< p >< em > 猫は</ em > かわいい</ em > 動物です！</ p > strong
要素すべての現在のエンジンでサポートされています。
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 > small
要素すべての現在のエンジンでサポートされています。
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 > s
要素すべての現在のエンジンでサポートされています。
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 > cite要素すべての現在のエンジンでサポートされています。
HTMLElementを使用します。
cite要素は、作品のタイトル (例:
書籍、論文、エッセイ、詩、スコア、曲、脚本、映画、テレビ番組、ゲーム、彫刻、絵画、劇場公演、演劇、オペラ、ミュージカル、展覧会、法律事件報告、コンピュータプログラムなど)
を表します。これは引用されている作品または詳細に参照されている作品 (つまり、引用) である可能性があり、またはただ言及されているだけの作品である場合もあります。
人名は作品のタイトルではありません—たとえ人々がその人を作品と呼んだとしても—したがって、この要素を使用して人名をマークアップしてはなりません。(場合によっては、b要素が名前に適しているかもしれません。例えば、有名人の名前が強調されるゴシップ記事などでは、名前がキーワードとして異なるスタイルで表示されます。その他の場合、要素が本当に必要である場合は、span要素を使用できます。)
次の例は、cite要素の典型的な使用例を示しています:
<p>私のお気に入りの本は<cite>The Reality Dysfunction</cite>です。著者はPeter F. Hamiltonです。私のお気に入りの漫画は<cite>Pearls Before Swine</cite>です。作者はStephan Pastisです。私のお気に入りの曲は<cite>Jive Samba</cite>です。演奏者はCannonball Adderley Sextetです。</p>これは正しい使用例です:
<p>Wikipediaの記事<cite>HTML</cite>によると、2008年2月中旬の時点で、属性値を引用符なしで残すことは危険です。これは明らかに過度に簡略化されています。</p>しかし、次の例は正しくありません。cite要素には、作品のタイトル以上のものが含まれています:
<!-- この例をコピーしないでください、これは悪い使用例です！ -->
<p>WikipediaのHTMLに関する記事<cite>によると、2008年2月中旬の時点で、属性値を引用符なしで残すことは危険です。これは明らかに過度に簡略化されています。</p>cite要素は、参考文献の書誌において重要な役割を果たしますが、これはタイトルのみをマークするために使用されます:
<p><cite>世界人権宣言</cite>、国連、1948年12月。総会決議217 A (III) によって採択されました。</p>引用は引用文ではありません (これはq要素に適しています)。
これは誤った使用例です。citeは引用文には適していません:
<p><cite>これは間違いです！</cite>とイアンは言いました。</p>これは誤った使用例でもあります。なぜなら、人間は作品ではないからです:
<p><q>これはまだ間違いです！</q>と<cite>イアン</cite>が言いました。</p>正しい使用例では、cite要素を使用しません:
<p><q>これは正しいです</q>とイアンは言いました。</p>前述のように、b要素は、特定の種類のドキュメントで名前をキーワードとしてマークするために使用することができます:
<p>そして<b>イアン</b>は言いました<q>ゴシップ記事では、これは正しいかもしれません！</q>。</p>q要素すべての現在のエンジンでサポートされています。
cite — 引用の元や編集に関する詳細へのリンク
HTMLQuoteElementを使用します。
q要素は、他のソースから引用されたフレージングコンテンツを表します。
要素の内容を引用する引用符などの句読点は、q要素の直前、直後、または内部に表示されてはなりません。それらはユーザーエージェントによってレンダリングに挿入されます。
q要素内のコンテンツは、別のソースから引用されたものでなければなりません。そのアドレスがある場合は、cite属性に引用することができます。ソースは、例えば小説や脚本の登場人物を引用する場合のように、架空のものであっても構いません。
cite属性が存在する場合、それはスペースに囲まれた有効なURLでなければなりません。対応する引用リンクを取得するためには、属性の値を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>dfn
要素すべての現在のエンジンでサポートされています。
dfn 要素の
子孫があってはなりません。
title 属性はこの
要素に特別な意味があります: 完全な用語または略語の展開
HTMLElementを使用します。
この dfn 要素 は用語の定義的なインスタンスを表します。段落、説明リストグループ、または セクション が、その dfn 要素の最も近い先祖である場合、同要素が示す 用語 の定義（複数ある場合はそれらも）を dfn 要素によって与えられるものとして含まなければなりません。
定義用語: dfn 要素がtitle 属性を持っている場合、
その属性の正確な値が定義されている用語です。そうでない場合、もし正確に1つの要素子ノードと
Text
ノードを含み、その子要素がabbr 要素で
title 属性を持っている場合、
その属性の正確な値が定義されている用語です。それ以外の場合は、子孫テキストコンテンツが
dfn 要素の
定義されている用語を示します。
title 属性が
dfn 要素に存在する場合、
それは定義されている用語のみを含まなければなりません。
title 属性は
祖先要素には影響しません。
a 要素がdfn 要素にリンクしている場合、
それは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 > abbr
要素すべての現在のエンジンでサポートされています。
title属性がこの要素に特別な意味を持ちます:
省略形の完全な用語または展開形
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つの略語があります。1つだけが定義されていることに注目してください。展開が関連付けられていないもう1つの略語には、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要素は独立しています。
ruby
要素すべての現在のエンジンでサポートされています。
HTMLElementを使用します。
ruby要素は、フレージングコンテンツの1つ以上のスパンにルビ注釈を付けることができます。ルビ注釈は、主に東アジアのタイポグラフィで発音のガイドとして使用されるベーステキストに沿って表示される短いテキストです。日本語では、この形式のタイポグラフィは「ふりがな」とも呼ばれます。
ruby要素のコンテンツモデルは、次の1つ以上のシーケンスで構成されます。
次のいずれか1つ：
フレージングコンテンツ、ただし、ruby要素およびその子孫要素は含まれません。
次のいずれか1つ：
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つのベーステキストと2つの注釈（それぞれに1つ）を持つ1つのruby要素を使用して、次のように書くこともできます。これは、2つのベーステキストと1つの注釈（上記のマークアップのように）を持つruby要素2つと同じです。
< ruby > 君< rt > くん</ rt > 子< rt > し</ ruby > は< ruby > 和< rt > わ</ ruby > して< ruby > 同< rt > どう</ ruby > ぜず。これは前のケースと似ていますが、複合語（ベーステキスト）にある各表意文字に、その読みがひらがなまたはカタカナ文字（ルビ注釈）で提供されます。違いは、ベーステキストのセグメントが互いに独立しているのではなく、複合語を形成していることです。
< ruby > B< rt > annotation</ rt > B</ 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 > する注釈は、発音ではなくベーステキストの意味を説明します。そのため、ベーステキストと注釈の両方が複数の文字にまたがることがあります。
< ruby > BASE< rt > annotation</ ruby > ここでは、複合語に対して対応するカタカナが注釈として与えられています。
< ruby > 境界面< rt > インターフェース</ ruby > 境界面
ここでは、複合語に対して英語の翻訳が注釈として提供されています。
< ruby lang = "ja" > 編集者< rt lang = "en" > editor</ ruby > 編集者
発音が複数のベース文字に対応する場合、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要素の注釈は、各ベース文字に対して単一ルビの発音注釈を提供し、外側のrt要素の子であるruby要素の注釈は、ひらがなを使用して意味を提供します。
< ruby >< ruby > 東< rt > とう</ rt > 南</ rt > なん</ rt ></ ruby >< rt > たつみ</ rt ></ ruby > の方角東南 の方角
これは同じ例ですが、意味が日本語ではなく英語で与えられています。
< ruby >< ruby > 東< rt > とう</ rt > 南< rt > なん</ rt ></ ruby >< rt lang = en > Southeast</ rt ></ ruby > の方角東南 の方角
ルビ 要素内で、
ルビ 要素の
祖先を持たない場合、コンテンツはセグメント化され、セグメントは3つのカテゴリに分類されます: 基本文セグメント、注釈
セグメント、無視セグメント。無視セグメントはドキュメントのセマンティクスの一部ではありません（これらは一部の
要素間の空白やrp 要素で構成されており、
後者はルビを全くサポートしないレガシーユーザーエージェントのために使用されます）。基本文セグメントは重複することが
あり（DOMの任意の位置で2つのセグメントが重複する制限があり、重複するセグメントの開始点が重複するセグメント
より早い場合、同じかそれ以降の終了点を持つ必要があり、終了点が重複するセグメントより遅い場合、同じかそれ以前の開始点
を持つ必要があります）。注釈セグメントはrt 要素に対応しています。各注釈セグメントはbase text segmentと関連付けることができ、
各base text segmentには注釈セグメントが関連付けられることがあります。（準拠したドキュメントでは、各base text segmentには少なくとも
1つの注釈セグメントが関連付けられ、各注釈セグメントは1つのbase text segmentと関連付けられます）。ルビ 要素は、それに含まれる
base text segmentの集合と、それらのbase text segmentと注釈セグメントのマッピングの
結果を表します。セグメントはDOMレンジの観点で説明され、注釈セグメントの範囲は常に
正確に1つの要素で構成されます。[DOM]
特定の時点で、ルビ
要素の内容のセグメンテーションとカテゴリ化は、次のアルゴリズムを実行することで得られる結果です:
base text segments を、各セグメントに潜在的にbase text subsegmentsのリストを含む空のリストとして定義します。
annotation segments を、各セグメントに潜在的にbase text segmentまたはsubsegmentが関連付けられる空のリストとして定義します。
root を、そのアルゴリズムが実行されるruby 要素として定義します。
もしrootにルビ
要素の祖先がある場合、
endとラベル付けされたステップに進みます。
current parent をrootと定義します。
index を0と定義します。
start index をnullと定義します。
saved start index をnullと定義します。
current base text をnullと定義します。
Start mode: もしindexがcurrent parentの子ノードの数以上である場合、end modeとラベル付けされたステップに進みます。
もしindex番目のcurrent parentのノードがrt 要素またはrp 要素である場合、annotation
modeとラベル付けされたステップに進みます。
start index にindexの値を設定します。
Base mode: もしindex番目のcurrent parentのノードがruby 要素であり、
かつcurrent parentがrootと同じ要素である場合、ルビレベルをプッシュする としてstart modeとラベル付けされたステップに進みます。
もしindex番目のcurrent parentのノードがrt 要素またはrp 要素である場合、現在の基本文を設定する
としてannotation modeとラベル付けされたステップに進みます。
index を1増やします。
Base mode post-increment: もしindexがcurrent parentの子ノードの数以上である場合、end modeとラベル付けされたステップに進みます。
base modeとラベル付けされたステップに戻ります。
Annotation mode: もしindex番目のcurrent parentのノードがrt 要素である場合、ルビ注釈をプッシュする
としてannotation mode incrementとラベル付けされたステップに進みます。
もしindex番目のcurrent parentのノードがrp 要素である場合、annotation
mode incrementとラベル付けされたステップに進みます。
もしindex番目のcurrent parentのノードがText
ノードでないか、もしくはText
ノードであっても要素間の空白でない場合、base
modeとラベル付けされたステップに進みます。
Annotation mode increment: lookahead index をindexプラス1と定義します。
Annotation mode white-space skipper: もしlookahead indexがcurrent parentの子ノードの数と等しい場合、end modeとラベル付けされたステップに進みます。
もしlookahead index番目のcurrent parentのノードがrt 要素またはrp 要素である場合、
indexをlookahead indexに設定し、annotation modeとラベル付けされたステップに進みます。
もしlookahead index番目のcurrent parentのノードがText
ノードでないか、もしくはText
ノードであっても要素間の空白でない場合、indexを増やさずにbase
modeとラベル付けされたステップに進み、これまでに見た要素間の空白が次のbase text segmentの一部になります。
lookahead indexを1増やします。
Annotation mode white-space skipperとラベル付けされたステップに進みます。
End mode: もしcurrent parentがrootと同じ要素でない場合、ルビレベルをポップする としてbase mode post-incrementとラベル付けされたステップに進みます。
End: base text segmentsとannotation segmentsを返します。ルビ
要素のコンテンツのうち、それらのリストに記述されていない部分は、暗黙的にignored segmentとなります。
上記のステップで現在の基本文を設定すると記載されている場合、アルゴリズムのその時点で次のステップを実行します:
上記のステップでルビレベルをプッシュすると記載されている場合、アルゴリズムのその時点で次のステップを実行します:
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 >
...これがレンダリングされると次のようになります:
この例では、繁体字中国語のテキスト漢字の各表意文字に、その注音符号が注釈されています。
< ruby > 漢< rt > ㄏㄢˋ</ rt > 字< rt > ㄗˋ</ rt ></ ruby > これがレンダリングされると次のようになります:
この例では、簡体字中国語のテキスト汉字の各表意文字に、その拼音が注釈されています。
...< ruby > 汉< rt > hàn</ rt > 字< rt > zì</ rt ></ ruby > ...これがレンダリングされると次のようになります:
このより複雑な例では、「HTML」という頭字語には4つの注釈があります: 頭字語全体に対するもの、HTの文字を「Hypertext」として展開するもの、Mの文字を「Markup」として展開するもの、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 > rt 要素すべての現在のエンジンでサポートされています。
ruby 要素の子要素として。
rt 要素の 終了タグ は、
rt 要素が直後にrt 要素または
rp
要素が続く場合や、親要素内に他のコンテンツがない場合には省略できます。
HTMLElement を使用します。
rt 要素は、ルビ注釈のルビテキストコンポーネントを示します。ruby 要素の子要素として存在する場合、
何も表しませんが、ruby 要素がそのそれが
表すものを決定する一部として使用します。
rt 要素がruby 要素の子要素でない場合、
その子要素と同じものを表します。
rp 要素すべての現在のエンジンでサポートされています。
ruby 要素の子要素として、rt 要素の直前または直後に使用できます。
rp 要素の 終了タグ は、rp 要素が直後にrt 要素または
rp
要素が続く場合や、親要素内に他のコンテンツがない場合には省略できます。
HTMLElement を使用します。
rp
要素は、ルビ注釈のルビテキストコンポーネントの周りに括弧やその他のコンテンツを提供するために使用され、ルビ注釈をサポートしないユーザーエージェントで表示されます。
rp 要素がruby 要素の子要素である場合、
何も表しません。rp 要素がruby 要素の子要素でない場合は、その子要素を表します。
上記の例では、テキスト 漢字 の各表意文字にその発音が注釈されていますが、rp
を使用してレガシーユーザーエージェントで注釈が括弧で表示されるように拡張することができます:
...
< ruby > 漢< rp > （</ rp >< rt > かん</ rt >< rp > ）</ rp > 字< rp > （</ rp >< rt > じ</ rt >< rp > ）</ rp ></ ruby >
...準拠するユーザーエージェントではレンダリングは上記のようになりますが、ルビをサポートしないユーザーエージェントでは次のようにレンダリングされます:
... 漢（かん）字（じ）...
セグメントに複数の注釈がある場合、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.
data 要素すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
Support in all current engines.
value — 機械可読の値
[Exposed =Window ]
interface HTMLDataElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions , Reflect ] attribute DOMString value ;
};data 要素は、その内容と、その内容の機械可読形式をvalue属性に関連付けて表します。
value属性は必須です。その値は、要素の内容を機械可読形式で表現したものでなければなりません。
値が日付や時間に関連している場合は、より具体的なtime要素を使用することができます。
この要素はいくつかの目的に使用できます。
この仕様で定義されているマイクロフォーマットやマイクロデータ属性と組み合わせると、この要素はデータ処理者のための機械可読値と、ウェブブラウザでのレンダリングのための人間可読値を提供します。この場合、value属性で使用されるフォーマットは、使用しているマイクロフォーマットやマイクロデータの語彙によって決まります。
しかし、この要素はページ内のスクリプトと組み合わせて使用することもできます。スクリプトが人間可読値とともにリテラル値を格納する場合です。このような場合、使用されるフォーマットはスクリプトのニーズにのみ依存します（data-*属性もこのような状況で役立つ場合があります）。
ここでは、テーブルのソート JavaScript ライブラリが、テキスト形式の列と分解形式の列の両方に表示された数字に対して、列ごとのソート機能を提供できるように、data
要素を使用して数値がエンコードされた短いテーブルを示します。
< 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 > time 要素すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
Support in all current engines.
datetime — 機械が読み取れる値
[Exposed =Window ]
interface HTMLTimeElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions , Reflect ] attribute DOMString dateTime ;
};time 要素は、その内容と datetime
属性で機械可読な形式として提供される内容を表します。内容の種類は、以下に説明するような日付、時刻、タイムゾーンオフセット、期間などに限られます。
datetime
属性は指定可能です。指定されている場合、その値は要素の内容を機械可読な形式で表現したものでなければなりません。
time 要素が datetime
内容属性を持たない場合、子要素を持ってはなりません。
time 要素の datetime 値 は、次のいずれかの構文に一致しなければなりません。
< 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 > 日付のある時刻ですが、タイムゾーンオフセットがないものは、各タイムゾーンで一日を通して同じ特定の時刻に観察されるイベントを指定するのに役立ちます。たとえば、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 > 日付とタイムゾーンオフセットを含む時刻は、特定のイベント、または特定の地理的位置に固定されていない仮想イベントの繰り返しを指定するのに役立ちます。たとえば、隕石の衝突の正確な時刻や、毎日 1400 UTC に開催される一連の会議などです。地理的な場所のタイムゾーンオフセットによって正確な時刻が異なるイベントの場合、有効なローカルの日付と時刻の文字列 とその地理的位置を組み合わせた方が役立つ可能性があります。
< time > 2011-W47</ time > < time > 2011</ time > < time > 0001</ time > < time > PT4H18M3S</ time > < time > 4h 18m 3s</ time > 要素の内容の機械可読の同等物は、要素のdatetime 値から次のアルゴリズムを使用して取得しなければなりません。
要素のdatetime 値から月文字列を解析して月が返された場合、それが機械可読の同等物です；終了。
要素のdatetime 値から日付文字列を解析して日付が返された場合、それが機械可読の同等物です；終了。
要素のdatetime 値から年なし日付文字列を解析して年なし日付が返された場合、それが機械可読の同等物です；終了。
要素のdatetime 値から時間文字列を解析して時間が返された場合、それが機械可読の同等物です；終了。
要素のdatetime 値からローカル日時文字列を解析してローカル日時が返された場合、それが機械可読の同等物です；終了。
要素のdatetime 値からタイムゾーンオフセット文字列を解析してタイムゾーンオフセットが返された場合、それが機械可読の同等物です；終了。
要素のdatetime 値からグローバル日時文字列を解析してグローバル日時が返された場合、それが機械可読の同等物です；終了。
要素のdatetime 値から週文字列を解析して週が返された場合、それが機械可読の同等物です；終了。
要素のdatetime 値が、少なくとも一つのU+0030 DIGIT ZERO（0）以外のASCII数字のみで構成されている場合、機械可読の同等物はその数字の十進数解釈であり、年を表します；終了。
要素のdatetime 値から期間文字列を解析して期間が返された場合、それが機械可読の同等物です；終了。
機械可読の同等物はありません。
上記のアルゴリズムは、任意の文字列sに対して、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 > この例では、別の記事の発行日が schema.org マイクロデータ語彙を使用して time 要素でマークアップされています。
< 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日」が対応することを伝えます:
Today is < time datetime = "2011-11-18" > Friday</ time > .この例では、太平洋標準時 (PST) の特定の時間が指定されています:
Your next meeting is at < time datetime = "2011-11-18T15:00-08:00" > 3pm</ time > .code
要素すべての最新エンジンでサポートされています。
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
要素を参照してください。
var
要素すべての最新エンジンでサポートされています。
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 >
ピタゴラスの定理を使用して、三角形の斜辺 < var > a</ var > を解きます。
三角形の他の辺は < var > b</ var > および < 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 > samp
要素すべての最新エンジンでサポートされています。
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
要素を使用することで、スタイルシートを使用してサンプル出力の特定の要素をスタイリングできます。
さらに詳細なマークアップで注釈が付けられている部分もあり、非常に精密なスタイリングが可能です。この目的を達成するために、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 > kbd
要素すべての最新エンジンでサポートされています。
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 > sub および sup 要素
すべての最新エンジンでサポートされています。
すべての最新エンジンでサポートされています。
sub
要素: 著者向け; 実装者向け。
sup
要素: 著者向け; 実装者向け。
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 > i
要素すべての最新エンジンでサポートされています。
HTMLElement を使用します。
i
要素は、異なる声や雰囲気、あるいは通常の文章とは異なる品質を示す方法で、本文から区別されたテキストの範囲を表します。例えば、分類学的指定、技術用語、他の言語の慣用句、翻字、考え、西洋のテキストでの船名などです。
メインテキストとは異なる言語の用語には、lang 属性（または、XML では lang 属性を XML 名前空間で使用）を注釈する必要があります。
以下の例は、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 > 著者は、class 属性を i
要素に使用して、この要素が使用される理由を特定することができます。たとえば、特定の使用スタイル（夢のシーケンスや分類学的用語など）が後日変更される場合に、著者がドキュメント全体（または関連する一連のドキュメント）を調べて各使用を注釈する必要がなくなります。
著者は、i
要素よりも適用できる他の要素を検討することをお勧めします。たとえば、ストレスの強調をマークアップするための em 要素や、用語の定義インスタンスをマークアップするための dfn 要素などです。
スタイルシートを使用して、他の要素と同様に i
要素を再スタイル化できます。したがって、i
要素内のコンテンツが必ずしもイタリック体で表示されるわけではありません。
b
要素すべての最新エンジンでサポートされています。
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 要素と同様に、著者は class 属性を b
要素に使用して、後日スタイルが変更される場合に備えて、なぜこの要素が使用されているのかを特定することができます。これにより、ドキュメント全体を手動で注釈する必要がなくなります。
b
要素は、他のより適切な要素がない場合の最後の手段として使用するべきです。特に、見出しには h1
から h6
の要素を使用し、強調する場合には em 要素を使用し、重要性を示す場合には
strong
要素を使用し、テキストをマークまたはハイライトする場合には mark
要素を使用すべきです。
次の使用例は不正確な使用です:
< p >< b > WARNING!</ b > Do not frob the barbinator!</ p > スタイルシートを使用して、b
要素を他の要素と同様に再スタイル化することができます。したがって、b
要素内のコンテンツが必ずしも太字で表示されるわけではありません。
u
要素すべての最新エンジンでサポートされています。
HTMLElement を使用します。
u 要素は、明示的にレンダリングされるが、非テキストの注釈を持つテキスト範囲を表します。例えば、中国語の名前を表すための文字 (中国の固有名詞マーク)
や、綴り間違いを示すためのラベル付けなどがあります。
ほとんどの場合、他の要素を使用する方が適切です。例えば、強調を示す場合には em
要素を使用すべきです。キーワードやフレーズをマークする場合には、状況に応じて b
要素や mark
要素を使用すべきです。書籍のタイトルをマークする場合には cite
要素を使用すべきです。明示的なテキスト注釈をラベル付けする場合には ruby
要素を使用すべきです。技術用語、分類学的指定、翻字、考え、または西洋のテキストにおける船名をラベル付けする場合には i 要素を使用すべきです。
u
要素の視覚的なデフォルトのレンダリングは、ハイパーリンクの従来のレンダリング (下線) と競合します。著者は、u
要素がハイパーリンクと混同される可能性がある場合には、使用を避けることが推奨されます。
この例では、u 要素を使用して単語を誤字としてマークしています:
< p > The < u > see</ u > is full of fish.</ p > mark
要素すべての最新エンジンでサポートされています。
HTMLElement を使用します。
mark 要素は、1
つのドキュメント内で他の文脈において関連性のあるために参照または注釈目的でマークまたはハイライトされたテキスト範囲を表します。引用やその他の文章ブロックで使用される場合、それは最初に存在しなかったハイライトを示しており、元の著者が元々書いたときには重要とは考えられなかったテキスト部分に読者の注意を引くために追加されたことを意味します。ドキュメントの主要な文章で使用される場合、それはユーザーの現在の活動に関連する可能性が高い部分をハイライトすることを意味します。
次の例では、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」という単語を検索していることを知っている場合、サーバーは次のように段落を変更して文書を返すかもしれません:
< 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 > bdi要素すべての現行エンジンでサポートされています。
dir グローバル属性は、この要素に特有の意味を持ちます。
HTMLElement を使用します。
bdi要素は、双方向テキストの書式設定のために、その周囲から分離されるテキストの範囲を表します。[BIDI]
dir グローバル属性は、この要素においては auto
がデフォルトであり、他の要素のように親要素から継承されることはありません。
この要素は双方向アルゴリズムに関するレンダリング要件を持っています。
この要素は、方向性が不明なユーザー生成コンテンツを埋め込む際に特に役立ちます。
この例では、ユーザー名とそのユーザーが投稿した件数が表示されます。もしbdi要素が使用されていなければ、アラビア語のユーザー名がテキストを混乱させてしまいます（双方向アルゴリズムにより、コロンと数字の「3」が「User」の隣に配置され、「posts」の隣に配置されるべきではありません）。
< ul >
< li > User < bdi > jcranmer</ bdi > : 12 posts.
< li > User < bdi > hober</ bdi > : 5 posts.
< li > User < bdi > إيان</ bdi > : 3 posts.
</ ul > 
bdi
要素を使用すると、ユーザー名は期待通りに動作します。
bdi要素がb要素に置き換えられると、ユーザー名が双方向アルゴリズムを混乱させ、3番目の箇条書きは「User
3 :」と表示され、その後にアラビア語の名前（右から左）が続き、「posts」とピリオドが続きます。bdo要素
すべての最新エンジンでサポートされています。
dir グローバル属性は、この要素に特有の意味を持ちます。
HTMLElement を使用します。
bdo要素は、子要素に対する明示的なテキストの方向性フォーマット制御を表します。これにより、著者はUnicode双方向アルゴリズムをオーバーライドし、明示的に方向性のオーバーライドを指定できます。[BIDI]
著者は、この要素にdir属性を指定し、左から右へのオーバーライドを指定するためにltr値を指定し、右から左へのオーバーライドを指定するためにrtl値を指定する必要があります。auto値は指定してはなりません。
この要素は双方向アルゴリズムに関するレンダリング要件を持っています。
span要素すべての最新エンジンでサポートされています。
すべての最新エンジンでサポートされています。
option
要素の子孫の場合：0個以上の
option 要素内部コンテンツ要素（ただし
div 要素は除く）。
[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 > < 256; < span class = "ident" > j</ span > ++) {
< span class = "ident" > i_t3</ span > = (< span class = "ident" > i_t3</ span > & 0x1ffff) | (< span class = "ident" > j</ span > << 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 > br要素
すべての最新エンジンでサポートされています。
すべての最新エンジンでサポートされています。
[Exposed =Window ]
interface HTMLBRElement : HTMLElement {
[HTMLConstructor ] constructor ();
// 旧メンバーも含む
};改行は通常、視覚メディアでは次のテキストを新しい行に物理的に移動させることで表されますが、スタイルシートやユーザーエージェントは、たとえば緑色の点として、または追加のスペースとして改行をレンダリングすることも同様に正当です。
br要素は、詩や住所のように、実際にコンテンツの一部としての改行にのみ使用されるべきです。
次の例は、br要素の正しい使用法です:
< p > P. Sherman< br >
42 Wallaby Way< br >
Sydney</ p > br要素は、段落内で主題別グループを分離するために使用されるべきではありません。
次の例は、br要素を誤用した非準拠の例です:
< p >< a ...> 34件のコメント.</ a >< br >
< a ...> コメントを追加.</ a ></ p > < p >< label > 名前: < input name = "name" ></ label >< br >
< label > 住所: < input name = "address" ></ label ></ p > 次の正しい例は、上記の代替として使用できます:
< p >< a ...> 34件のコメント.</ a ></ p >
< p >< a ...> コメントを追加.</ a ></ p > < p >< label > 名前: < input name = "name" ></ label ></ p >
< p >< label > 住所: < input name = "address" ></ label ></ p > 段落がbr要素だけで構成されている場合、それはプレースホルダーとしての空白行を表します（例:
テンプレートでの使用）。このような空白行は、プレゼンテーション目的で使用してはなりません。
br要素内のコンテンツは、周囲のテキストの一部と見なされるべきではありません。
この要素は双方向アルゴリズムに関連するレンダリング要件を持ちます。
wbr要素
すべての最新エンジンでサポートされています。
HTMLElementを使用します。
次の例では、誰かが効果を狙って、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); この要素は双方向アルゴリズムに関連するレンダリング要件を持ちます。
このセクションは規範的ではありません。
| 要素 | 目的 | 例 |
|---|---|---|
a
| ハイパーリンク |
|
em
| 強調 |
|
strong
| 重要性 |
|
small
| サイドコメント |
|
s
| 不正確なテキスト |
|
cite
| 作品のタイトル |
|
q
| 引用 |
|
dfn
| 定義 |
|
abbr
| 略語 |
|
ruby, rt, rp
| ルビ注釈 |
|
data
| 機械可読の値 |
|
time
| 日付や時間の機械可読の値 |
|
code
| コンピュータコード |
|
var
| 変数 |
|
samp
| コンピュータの出力 |
|
kbd
| ユーザー入力 |
|
sub
| 下付き文字 |
|
sup
| 上付き文字 |
|
i
| 別の声 |
|
b
| キーワード |
|
u
| 注釈 |
|
mark
| ハイライト |
|
bdi
| テキストの方向性の分離 |
|
bdo
| テキストの方向性の書式設定 |
|
span
| その他 |
|
br
| 改行 |
|
wbr
| 改行可能な位置 |
|
リンクは、a、area、form、およびlink要素によって作成される概念的な構成です。これらは、現在のドキュメントと他のリソースとの間に接続を表します。HTMLには3種類のリンクがあります:
これらは現在のドキュメントを補完するために使用されるリソースへのリンクであり、一般的にユーザーエージェントによって自動的に処理されます。すべての外部リソースへのリンクは、リソースの取得と処理を説明するリソースを取得して処理するアルゴリズムを持っています。
これらは他のリソースへのリンクであり、ユーザーエージェントによって一般的にユーザーに公開され、ユーザーがこれらのリソースにナビゲートできるようにします。例えば、ブラウザでそれらを訪問したり、ダウンロードしたりすることができます。
これらは現在のドキュメント内のリソースへのリンクであり、これらのリソースに特別な意味や動作を与えるために使用されます。
link要素にhref属性およびrel属性がある場合、rel属性のキーワードに対してリンクが作成されなければなりません。
同様に、aおよびarea要素にhref属性およびrel属性がある場合、リンクはリンクタイプセクションで定義されたキーワードに対しても作成されなければなりません。
同様に、form要素にrel属性がある場合、rel属性のキーワードに対してリンクが作成されなければなりません。
ハイパーリンクには、そのハイパーリンクの処理セマンティクスを変更する1つまたは複数のハイパーリンク注釈を持つことができます。
a および area
要素によって作成されるリンクa および area 要素の
href 属性は、有効なURL（スペースで囲まれている場合もあり）でなければなりません。
href
属性は必須ではありません。a
および area
要素が
href
属性を持たない場合、それらはハイパーリンクを作成しません。
target
属性が存在する場合、その値は 有効なナビゲーブルターゲット名またはキーワード
でなければなりません。これは使用されるナビゲーブル
の名前を指定します。ユーザーエージェントは、ハイパーリンクをたどる際にこの名前を使用します。
download
属性が存在する場合、著者がそのハイパーリンクを リソースのダウンロード
に使用する意図があることを示します。この属性には値を持たせることができます。値が指定されている場合、その値はローカルファイルシステムでリソースをラベル付けするために推奨されるデフォルトのファイル名を指定します。許可される値に制限はありませんが、ほとんどのファイルシステムにはファイル名でサポートされる句読点に制限があるため、ユーザーエージェントはファイル名を適宜調整する可能性があることに注意が必要です。
Support in all current engines.
ping
属性が存在する場合、ユーザーがハイパーリンクをたどる際に通知を受け取りたいリソースのURLを指定します。値は 空白で区切られたトークンのセット でなければならず、それぞれが 有効な非空のURL
でなければならず、その スキーム は HTTP(S) スキーム でなければなりません。この値はユーザーエージェントが ハイパーリンク監査 に使用します。
rel 属性は、a 要素と area
要素に対して、どの種類のリンクを作成するかを制御します。この属性の値は 一意の空白で区切られたトークンの非順序セット
でなければなりません。許可されるキーワードとその意味 は以下に定義されています。
rel の サポートされているトークン は、HTML リンクタイプ
に定義されたキーワードであり、a
要素と area
要素で許可されているもので、処理モデルに影響を与え、ユーザーエージェントによってサポートされています。可能な サポートされているトークン は noreferrer、noopener、および
opener
です。rel
の サポートされているトークン
には、ユーザーエージェントが処理モデルを実装しているこのリストのトークンのみが含まれている必要があります。
rel
属性にはデフォルト値がありません。属性が省略されているか、属性内のいずれの値もユーザーエージェントによって認識されない場合、文書はリンク先リソースとの特定の関係を持たず、2つの間にハイパーリンクが存在するだけです。
hreflang
属性は、a 要素が ハイパーリンク
を作成する場合、リンク先リソースの言語を指定します。これは純粋に助言的なものです。値は有効な BCP 47 言語タグでなければなりません。[BCP47]
ユーザーエージェントは、この属性を権威あるものと見なしてはなりません。リソースを取得すると、ユーザーエージェントは、リソースに関連付けられた言語情報のみを使用して、その言語を判断し、リンクに含まれるメタデータを使用してはなりません。
type
属性が存在する場合、リンクされたリソースの MIME タイプ
を指定します。これは純粋に助言的なものです。値は 有効な MIME
タイプ文字列 でなければなりません。ユーザーエージェントは、リソースにリンクされたメタデータを使用してリソースのタイプを判断してはなりません。
referrerpolicy 属性は 参照ポリシー属性 です。その目的は、参照ポリシー
を設定することです。[REFERRERPOLICY]
に従って、ハイパーリンクをたどる 際に使用されます。
a または area 要素の
アクティベーション動作 が呼び出されると、ユーザーエージェントはユーザーに対し、ハイパーリンクがナビゲーションに使用されるか、指定されたリソースがダウンロードされるかの選択肢を与えることがあります。
ユーザーの選好がない場合、要素に download
属性がない場合はデフォルトでナビゲーションが選択され、属性がある場合は指定されたリソースのダウンロードが選択されます。
a または area 要素の
アクティベーション動作 は次の通りです：
要素に href
属性がない場合、何も行いません。
hyperlinkSuffix を null に設定します。
要素が a
要素であり、イベントの target が img
で、ismap
属性が指定されている場合:
x および y を 0 に設定します。
イベントの isTrusted
属性が true に初期化されている場合、クリック位置から画像の左端までの距離を x に設定し、クリック位置から画像の上端までの距離を y
に設定します。
x が負の場合、x を 0 に設定します。
y が負の場合、y を 0 に設定します。
hyperlinkSuffix を U+003F (?), x の値を基数 10 の整数として ASCII 数字で表現したもの、U+002C (,) 、および y の値を基数 10 の整数として ASCII 数字で表現したものの連結として設定します。
ユーザーの関与をイベントの user navigation involvement として設定します。
ユーザーがハイパーリンクをダウンロードすることを希望している場合、userInvolvement を "browser UI"
に設定します。
つまり、ユーザーがダウンロードを特に希望している場合、これは単に "activation"
としてはカウントされません。
element に download
属性がある場合、またはユーザーがハイパーリンクをダウンロードすることを希望している場合、element
によって作成されたハイパーリンクを、hyperlinkSuffix に hyperlinkSuffix を設定し、userInvolvement に userInvolvement を設定して ダウンロード します。
それ以外の場合、ハイパーリンクをフォローします。この際、hyperlinkSuffix を hyperlinkSuffix として、userInvolvement を userInvolvement として設定します。
aおよびarea要素のAPIinterface mixin HTMLHyperlinkElementUtils {
[CEReactions , ReflectSetter ] stringifier attribute USVString href ;
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 ;
};hyperlink.toString()
hyperlink.href
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
ハイパーリンクの URL を返します。
URL を変更するために設定できます。
hyperlink.origin
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
ハイパーリンクの URL の起源を返します。
hyperlink.protocol
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
ハイパーリンクの URL のスキームを返します。
URL のスキームを変更するために設定できます。
hyperlink.username
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
ハイパーリンクのURLのユーザー名を返します。
設定することで、URLのユーザー名を変更できます。
hyperlink.password
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
ハイパーリンクのURLのパスワードを返します。
設定することで、URLのパスワードを変更できます。
hyperlink.host
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
ハイパーリンクのURLのホストとポート（スキームのデフォルトポートと異なる場合）を返します。
設定することで、URLのホストとポートを変更できます。
hyperlink.hostname
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
ハイパーリンクのURLのドメインを返します。
設定することで、URLのドメインを変更できます。
hyperlink.port
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
ハイパーリンクの URL のポートを返します。
URL のポートを変更するために設定できます。
hyperlink.pathname
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
ハイパーリンクの URL のパスを返します。
URL のパスを変更するために設定できます。
hyperlink.search
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
ハイパーリンクの URL のクエリを返します（非空の場合、先頭の "?" を含む）。
URL のクエリを変更するために設定できます（先頭の "?" は無視されます）。
hyperlink.hash
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
ハイパーリンクの URL のフラグメントを返します（非空の場合、先頭の "#" を含む）。
URL のフラグメントを変更するために設定できます（先頭の "#" は無視されます）。
HTMLHyperlinkElementUtilsミックスインを実装する要素には、関連付けられたURL（null またはURL）があり、初期状態ではnullです。
HTMLHyperlinkElementUtilsミックスインを実装する要素には、関連付けられたURLを設定するアルゴリズムがあり、次の手順を実行します:
HTMLHyperlinkElementUtils
ミックスインを実装する要素が作成される際、ユーザーエージェントはURLを設定しなければならない。
a
および area 要素に対する
HTML要素挿入手順は、insertedNodeを与えて次の通り：
insertedNode が 接続済みでない場合、何もせず返す。
推測ロードを検討する処理を insertedNode の ノードドキュメント に対して実行する。
a
および area 要素に対する
HTML要素除去手順は、
removedNode および oldParent を与えて次の通り：
oldParent が 接続済みでない場合、何もせず返す。
推測ロードを検討する処理を oldParent の ノードドキュメント に対して実行する。
a
および area 要素に対する
HTML要素移動手順は、movedNodeを与えて次の通り：
推測ロードを検討する処理を movedNode の ノードドキュメント に対して実行する。
すべての a および area 要素に対し、
element, localName, oldValue, value, namespace を与える
属性変更手順は次の通り：
namespace が null でない場合、何もせず返す。
oldValue が value と等しい場合、何もせず返す。
localName が href の場合、
element を与えてURLを設定する。
これは blob: URL に対してのみ観測可能であり、 それらのパースには Blob URL ストアの参照が必要となる。
localName が href、
referrerpolicy、
または rel の場合、
element の ノードドキュメント を与えて
推測ロードを検討する処理を実行する。
HTMLHyperlinkElementUtils
ミックスインを実装する要素には、
URL再初期化アルゴリズムが関連付けられており、次の手順を実行する：
href
の getter 手順は次の通りです:
origin の getter 手順は次の通りです:
protocol の getter 手順は次の通りです:
protocol
の setter 手順は次の通りです:
username の getter 手順は次の通りです:
username
の setter 手順は次の通りです:
password の getter 手順は次の通りです:
password
の setter 手順は次の通りです:
host
の getter 手順は次の通りです:
host の setter
手順は次の通りです:
hostname の getter 手順は次の通りです:
hostname
の setter 手順は次の通りです:
port
の getter 手順は次の通りです:
port の setter
手順は次の通りです:
pathname の getter 手順は次の通りです:
URL を再初期化します。
もし url が null であれば、空文字列を返します。
url の URL パスをシリアライズ して返します。
pathname
の setter 手順は次の通りです:
search の getter 手順は次の通りです:
search の
setter 手順は次の通りです:
hash
の getter 手順は次の通りです:
hash の setter
手順は次の通りです:
以下のいずれかが該当する場合、要素 element はナビゲートできません:
これは、フォームの送信 にも使用されます。
a、area、または
form 要素
element、URLレコード url、および
文字列 target を指定して、要素のnoopenerを取得するには、次の手順を実行します。これらはブール値を返します。
element のリンクタイプにnoopenerまたはnoreferrer
キーワードが含まれている場合は、trueを返します。
element のリンクタイプにopener
キーワードが含まれておらず、target が「_blank」のASCII大文字小文字を区別しない一致である場合は、trueを返します。
url のBLOB URLエントリがnullでない場合：
blobOrigin をurl のBLOB URLエントリの環境のオリジンとします。
topLevelOrigin をelement の関連する設定オブジェクトのトップレベルオリジンとします。
blobOrigin がtopLevelOrigin と同一サイトでない場合は、trueを返します。
falseを返します。
要素 subject によって作成されたハイパーリンクをたどるには、オプションの hyperlinkSuffix (デフォルトは null) およびオプションの userInvolvement (デフォルトは「none」) を指定します：
もし subject が ナビゲートできない場合、処理を終了します。
targetAttributeValue を空文字列に設定します。
もし subject が a
または area
要素である場合、targetAttributeValue を 要素のターゲットを取得した結果に設定します。
urlRecord を、subject の href
属性値を、subject の ノードドキュメントを基準としてURLのエンコーディング解析した結果とします。
urlRecord が失敗の場合、戻ります。
noopener を、subject、urlRecord、および targetAttributeValue を用いて要素の noopener を取得した結果とします。
targetNavigable を ナビゲート可能な要素を選ぶルールを適用して得られる最初の値に設定します。
もし targetNavigable が null である場合、処理を終了します。
urlString を、urlRecord にURLシリアライザを適用した結果とします。
もし hyperlinkSuffix が null でない場合、urlString に付加します。
ナビゲート targetNavigable を urlString に、subject の ノードドキュメント を用いてナビゲートする。 referrerPolicy には subject の ハイパーリンクリファラーポリシー を設定し、 userInvolvement には userInvolvement を設定し、 sourceElement には subject を設定する。
ハイパーリンクのフォローには、完全にロードされていないドキュメントに対して特別な「置換」動作はありません。
要素 subject の ハイパーリンクリファラーポリシー は、次の手順で返される値である：
もし subject の リンク型 に noreferrer
キーワードが含まれていれば、
"no-referrer" を返す。
subject の referrerpolicy
内容属性の現在の状態を返す。
すべての現在のエンジンでサポートされています。
場合によっては、リソースはすぐに表示されるのではなく、後で使用されることを意図しています。リソースがすぐに使用されるのではなく、後でダウンロードされることを示すには、download属性をそのリソースへのハイパーリンクを作成するaまたはarea要素に指定できます。
さらに、この属性には値を指定して、ユーザーエージェントがリソースをファイルシステムに保存する際に使用するファイル名を指定することもできます。この値は、`Content-Disposition`
HTTPヘッダーのファイル名パラメータによって上書きされることがあります。[RFC6266]
クロスオリジンの状況では、download属性を`Content-Disposition`
HTTPヘッダー、特にattachmentディスポジションタイプと組み合わせて使用する必要があります。これは、ユーザーが悪意のある活動の可能性を警告されるのを防ぐためです。
(これは、ユーザーが意識せずに個人情報や機密情報をダウンロードさせられるのを防ぐためです。)
ダウンロードするために、要素subjectが作成したハイパーリンクを、オプションのhyperlinkSuffix（デフォルトはnull）およびオプションのuserInvolvement（デフォルトは"none"）とともにフォローします。
もしsubjectがナビゲートできない場合、処理を終了します。
もしsubjectのノードドキュメントのアクティブサンドボックスフラグセットがサンドボックス化されたダウンロード閲覧コンテキストフラグを持っている場合、処理を終了します。
urlStringを、subjectのhref属性値を基にURLのエンコード、パース、およびシリアライズした結果に設定します。
もしurlStringが失敗した場合、処理を終了します。
もしhyperlinkSuffixがnullでない場合、urlStringに追加します。
もしuserInvolvementが"ブラウザUI"でない場合:
navigationをsubjectの関連するグローバルオブジェクトのナビゲーションAPIに設定します。
filenameをsubjectのdownload属性の値に設定します。
continue を、navigation でdestinationURL を
urlString に設定し、userInvolvement を
userInvolvement に設定し、sourceElement を subject
に設定し、そしてfilename を filename に設定してダウンロードリクエストのnavigateイベントを発火させた結果とします。
もしcontinueがfalseの場合、処理を終了します。
並行して次の手順を実行します:
必要に応じて、ユーザーエージェントはこれらの手順を中止することができます。もしそうすることがユーザーを潜在的な悪意のあるダウンロードから保護すると考えられる場合。
requestをリクエストに新たに設定します。そのURLをurlStringに設定し、クライアントをエントリ設定オブジェクトに設定し、イニシエータを"download"に設定し、宛先を空の文字列に設定し、同期フラグおよびURL認証情報フラグを設定します。
response を fetch して request の結果を取得する。
ダウンロードとして処理 response を subject の node navigable と null で処理する。
ダウンロードとして処理するには、response response、navigable navigable、navigation ID または null navigationId を使う：
suggestedFilename を 推奨ファイル名を取得 して response に対して取得する。
download behavior を WebDriver BiDi ダウンロード開始 を navigable と新しい
WebDriver BiDi ナビゲーション状態で呼び出す。
その id は
navigationId、
status は
"pending"、
url は
response の
URL、
suggestedFilename は suggestedFilename
である。
download behavior が null でなく、かつ download behavior の allowed が false の場合：
WebDriver BiDi ダウンロード終了 を navigable と新しい
WebDriver BiDi ナビゲーション状態で呼び出す。
その id は
navigationId、
status は "canceled"、
url は
response の
URL である。
Return。
download behavior が null でない場合、destinationFolder を download behavior の destinationFolder とする。
これらの手順を 並行して実行する：
実装定義の手順で response を後で使用できるよう保存する。 destinationFolder が null でない場合、ユーザーエージェントはそのパスにファイルを保存するべきである。 ユーザーエージェントがファイル名を必要とする場合、suggestedFilename を使うべきである。
次のいずれかが真の場合：
ユーザーによってダウンロードがキャンセルされた場合；
ユーザーエージェントによってダウンロードがキャンセルされた場合；
エラーが発生した場合（例えば、ネットワークエラー、ストレージ不足、保存先フォルダーが利用できないなど）；
その場合：
WebDriver BiDi ダウンロード終了 を navigable
と新しい
WebDriver BiDi ナビゲーション状態で呼び出す。
その id は
navigationId、
status は "canceled"、
url は
response の
URL
である。
Return。
ダウンロードが正常に完了した場合、WebDriver BiDi ダウンロード終了 を navigable と新しい
WebDriver BiDi ナビゲーション状態で呼び出す。
その id は
navigationId、
status は "complete"、
downloadedFilepath
はダウンロードされたファイルの絶対パス（利用可能な場合）、そうでなければ null、
url は
response の
URL である。
レスポンス response の推奨ファイル名を取得するには：
このアルゴリズムは、信頼できないサイトからのファイルのダウンロードに関わるセキュリティリスクを軽減することを目的としており、ユーザーエージェントはこれに従うことが強く推奨されます。
filename を未定義値とします。
response が `Content-Disposition`
ヘッダーを持ち、そのヘッダーがattachment dispositionタイプを指定し、かつヘッダーにファイル名情報が含まれている場合、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 dispositionタイプを指定する場合、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属性によって提供されるディレクトリまたはパス情報を無視して、結果のファイルをユーザーのファイルシステムのどこに保存するかを決定する必要があります。
もし、ハイパーリンクが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をエンコード、パース、シリアライズする結果とし、次に:
リクエストをフェッチします。
これは、主なフェッチと並行して行われることがあり、そのフェッチの結果とは無関係です。
ユーザーエージェントは、例えばHTTP `Referer`（参照）ヘッダーの送信を無効にする設定と組み合わせて、この動作を調整できるようにすべきです。ユーザーの好みに基づき、UAsは無視するか、リスト内の特定のURLを無視することができます（例:
サードパーティURLを無視するなど）。これは、上記の手順で明示的に考慮されています。
ユーザーエージェントは、レスポンスに含まれるエンティティボディを無視しなければなりません。ユーザーエージェントは、レスポンスボディの受信を開始した後、接続を早期に閉じることができます。
a 要素または area 要素で ハイパーリンク を作成し、ping
属性を持つものが存在する場合、ユーザーエージェントはハイパーリンクをたどるとバックグラウンドで二次的なリクエストが送信され、実際のターゲット URL の一覧を表示することをユーザーに示す場合があります。
例えば、視覚的なユーザーエージェントはステータスバーやツールチップにハイパーリンクの実際の URL とともに、ターゲット ping URL のホスト名を表示することがあります。
ping 属性は、HTTP リダイレクトや JavaScript
のような既存の技術と重複しており、ウェブページがどの外部リンクが最も人気があるかを追跡したり、広告主がクリック率を追跡したりすることを可能にします。
しかし、ping 属性は、これらの代替手段に対してユーザーに以下の利点を提供します:
Ping-From`ヘッダーと`Ping-To`ヘッダー
`Ping-From`ヘッダーと`Ping-To`HTTPリクエストヘッダーは、ハイパーリンク監査リクエストに含まれます。これらの値は、URLであり、シリアライズされたものです。
すべての最新エンジンでサポートされています。
以下の表は、この仕様で定義されたリンクタイプを、それぞれのキーワードに基づいてまとめたものです。この表は規範的ではなく、リンクタイプの実際の定義は次のいくつかのセクションで示されています。
このセクションでは、参照された文書という用語は、リンクを表す要素によって識別されるリソースを指し、現在の文書という用語は、そのリンクを表す要素が見つかるリソースを指します。
link、a、area、またはform要素に適用されるリンクタイプを判断するには、その要素のrel属性をASCII空白で分割する必要があります。結果として得られるトークンは、その要素に適用されるリンクタイプのキーワードです。
特に指定がない限り、キーワードは各rel属性につき一度だけ指定する必要があります。
以下の表の後のいくつかのセクションでは、特定のキーワードの同義語が記載されています。指定された同義語は、ユーザーエージェントによって指定されたとおりに処理される必要がありますが、文書内で使用してはなりません（例えば、キーワード"copyright"）。
キーワードは常にASCII大文字小文字を区別しません。比較もそのように行わなければなりません。
したがって、rel="next"はrel="NEXT"と同じです。
body-okなキーワードは、link要素がボディに許可されているかどうかに影響します。body-okなキーワードは、dns-prefetch、modulepreload、pingback、preconnect、prefetch、preload、およびstylesheetです。
ウェブブラウザによって実装される新しいリンクタイプは、この標準に追加されるべきです。残りの部分は拡張として登録できます。
| リンクタイプ | 影響... | body-ok | `Link`処理
| 簡単な説明 | ||
|---|---|---|---|---|---|---|
link
| aおよびarea
| form
| ||||
alternate
| ハイパーリンク | 許可されていません | · | · | 現在の文書の代替表現を提供します。 | |
canonical
| ハイパーリンク | 許可されていません | · | · | 現在の文書の推奨URLを提供します。 | |
author
| ハイパーリンク | 許可されていません | · | · | 現在の文書または記事の著者へのリンクを提供します。 | |
bookmark
| 許可されていません | ハイパーリンク | 許可されていません | · | · | 最も近い先祖セクションのパーマリンクを提供します。 |
dns-prefetch
| 外部リソース | 許可されていません | Yes | · | ユーザーエージェントがターゲットリソースのオリジンのDNS解決を事前に実行することを指定します。 | |
expect
| 内部リソース | 許可されていません | · | · | ターゲットIDを持つ要素が現在の文書内に表示されることを期待します。 | |
external
| 許可されていません | 注釈 | · | · | 参照された文書が現在の文書と同じサイトの一部ではないことを示します。 | |
help
| ハイパーリンク | · | · | コンテキストに基づいたヘルプへのリンクを提供します。 | ||
icon
| 外部リソース | 許可されていません | · | · | 現在の文書を表すアイコンをインポートします。 | |
manifest
| 外部リソース | 許可されていません | · | · | アプリケーションマニフェストをインポートまたはリンクします。アプリケーションマニフェストを参照[MANIFEST] | |
modulepreload
| 外部リソース | 許可されていません | Yes | · | ユーザーエージェントが事前にモジュールスクリプトをフェッチし、文書のモジュールマップに保存して後で評価することを指定します。オプションで、モジュールの依存関係もフェッチできます。 | |
license
| ハイパーリンク | · | · | 現在の文書の主要な内容が、参照された文書によって説明されている著作権ライセンスの対象であることを示します。 | ||
next
| ハイパーリンク | · | · | 現在の文書がシリーズの一部であり、次の文書が参照された文書であることを示します。 | ||
nofollow
| 許可されていません | 注釈 | · | · | 現在の文書の元の著者または発行者が、参照された文書を支持していないことを示します。 | |
noopener
| 許可されていません | 注釈 | · | · | ハイパーリンクが補助的（つまり、適切なtarget属性値を持つ）である場合、それ以外の場合に非補助的ブラウジングコンテキストを持つトップレベルトラバーサブルを作成します。
| |
noreferrer
| 許可されていません | 注釈 | · | · | `Referer`ヘッダーが含まれません。さらに、noopenerと同じ効果があります。
| |
opener
| 許可されていません | 注釈 | · | · | ハイパーリンクがそれ以外の場合に非補助的ブラウジングコンテキストを持つトップレベルトラバーサブルを作成します（つまり、"_blank"としてtarget属性値を持つ）。
| |
pingback
| 外部リソース | 許可されていません | Yes | · | 現在の文書へのピンバックを処理するピンバックサーバーのアドレスを提供します。 | |
preconnect
| 外部リソース | 許可されていません | Yes | Yes | ユーザーエージェントがターゲットリソースのオリジンに事前に接続することを指定します。 | |
prefetch
| 外部リソース | 許可されていません | Yes | · | ユーザーエージェントがターゲットリソースを事前にフェッチし、フォローアップナビゲーションで必要になる可能性が高い場合にキャッシュすることを指定します。 | |
preload
| 外部リソース | 許可されていません | Yes | Yes | ユーザーエージェントがターゲットリソースを事前にフェッチし、現在のナビゲーションのためにキャッシュすることを指定します。この処理は、潜在的な宛先と、優先順位に基づいて行われます。 | |
prev
| ハイパーリンク | · | · | 現在の文書がシリーズの一部であり、前の文書が参照された文書であることを示します。 | ||
privacy-policy
| ハイパーリンク | 許可されていません | · | · | 現在の文書に適用されるデータ収集および使用慣行に関する情報へのリンクを提供します。 | |
search
| ハイパーリンク | · | · | 現在の文書および関連ページを検索するために使用できるリソースへのリンクを提供します。 | ||
stylesheet
| 外部リソース | 許可されていません | Yes | · | スタイルシートをインポートします。 | |
tag
| 許可されていません | ハイパーリンク | 許可されていません | · | · | 現在の文書に適用されるタグ（指定されたアドレスによって識別される）を提供します。 |
terms-of-service
| ハイパーリンク | 許可されていません | · | · | 現在の文書の提供者と、現在の文書を使用したいユーザーとの間の契約に関する情報へのリンクを提供します。 | |
alternate"1つのエンジンでのみサポートされています。
alternateキーワードは、link、a、およびarea要素で使用できます。
このキーワードの意味は、他の属性の値によって異なります。
link要素であり、rel属性にstylesheetキーワードも含まれている場合
alternateキーワードは、stylesheetキーワードの意味をそのキーワードに記載されている方法で修正します。alternateキーワード自体はリンクを作成しません。
ここでは、いくつかのスタイルシートを提供するlink要素のセットを示します:
<!-- 永続的なスタイルシート -->
< link rel = "stylesheet" href = "default.css" >
<!-- 推奨される代替スタイルシート -->
< link rel = "stylesheet" href = "green.css" title = "Green styles" >
<!-- いくつかの代替スタイルシート -->
< 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キーワードがtype属性にapplication/rss+xmlまたはapplication/atom+xmlの値が設定されている場合
このキーワードは、シンジケーションフィード（必ずしも現在のページと同じコンテンツをシンジケートするわけではない）を参照するハイパーリンクを作成します。
フィードの自動検出の目的で、ユーザーエージェントは、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" > この関係は推移的です。つまり、1つの文書がリンクタイプ"alternate"で他の2つの文書にリンクしている場合、それはその2つの文書が最初の文書の代替表現であることを意味するだけでなく、それらの2つの文書が互いに代替表現であることも意味します。
author"authorキーワードは、link、a、およびarea要素で使用できます。このキーワードはハイパーリンクを作成します。
aおよびarea要素の場合、authorキーワードは、参照された文書がハイパーリンクを定義している要素の最も近い先祖であるarticle要素の著者についての追加情報を提供することを示します。もしそのような要素が存在しない場合は、ページ全体の著者についての追加情報を提供します。
link要素の場合、authorキーワードは、参照された文書がページ全体の著者についての追加情報を提供することを示します。
"参照された文書"は、mailto:URLであり、著者のメールアドレスを示すことができますし、実際にそうであることが多いです。[MAILTO]
同義語: 歴史的な理由から、ユーザーエージェントはlink、a、およびarea要素にrev属性の値が"made"であるものを、リンク関係としてauthorキーワードが指定されているものとして扱わなければなりません。
bookmark"bookmarkキーワードは、aおよびarea要素で使用できます。このキーワードはハイパーリンクを作成します。
bookmark
キーワードは、問題のリンク要素の最も近い祖先article要素、または祖先article要素がない場合は、リンク要素が最も密接に関連付けられているセクションのパーマリンクを提供します。
次のスニペットには、3つのパーマリンクがあります。ユーザーエージェントは、パーマリンクが与えられている場所を見て、どのパーマリンクが仕様のどの部分に適用されるかを判断できます。
...
< body >
< h1 > パーマリンクの例</ h1 >
< div id = "a" >
< h2 > 最初の例</ h2 >
< p >< a href = "a.html" rel = "bookmark" > このパーマリンクは、最初のH2から2番目のH2までのコンテンツにのみ適用されます</ a > 。DIVは正確にはそのセクションではありませんが、それに大まかに対応しています。</ p >
</ div >
< h2 > 2番目の例</ h2 >
< article id = "b" >
< p >< a href = "b.html" rel = "bookmark" > このパーマリンクは、外側のARTICLE要素に適用されます</ a > （例えば、ブログ記事のように）。</ p >
< article id = "c" >
< p >< a href = "c.html" rel = "bookmark" > このパーマリンクは、内側のARTICLE要素に適用されます</ a > （例えば、ブログのコメントのように）。</ p >
</ article >
</ article >
</ body >
...canonical"canonical キーワードは link 要素と共に使用できます。このキーワードは ハイパーリンク を作成します。
canonical キーワードは、href
属性で指定されたURLが現在のドキュメントにとって推奨されるURLであることを示します。これにより、検索エンジンが重複コンテンツを減らすのに役立ちます。詳細はThe Canonical Link
Relation に記載されています。[RFC6596]
dns-prefetch"dns-prefetch
キーワードは link
要素と共に使用できます。このキーワードは 外部リソースリンク
を作成します。このキーワードは body-ok です。
dns-prefetch
キーワードは、指定されたリソースの オリジン
のDNS解決を事前に行うことが有益である可能性が高いことを示します。これは、ユーザーがそのオリジンにあるリソースを必要とする可能性が非常に高いためであり、DNS解決に関連する遅延コストを事前に解決することでユーザーエクスペリエンスが向上します。
dns-prefetch
キーワードによって指定されたリソースのデフォルトタイプはありません。
この種類のリンクをフェッチして処理する 適切なタイミングは次のとおりです:
外部リソースリンク が、すでに ブラウジングコンテキストに接続されている
link 要素に作成されたとき。
外部リソースリンク の link 要素が ブラウジングコンテキストに接続されたとき。
すでに ブラウジングコンテキストに接続されている 外部リソースリンクの link 要素の href 属性が変更されたとき。
この種類のリンクリソースをフェッチして処理する 手順は、次のとおりです:
el の href
属性の値を el の ノードドキュメント
に対して相対的に指定して、URLのエンコードと解析
を行った結果として url を取得します。
url が失敗した場合、返します。
partitionKey を、ネットワークパーティションキーを決定する 結果として取得します。
ユーザーエージェントは、partitionKey と url の オリジン を指定して オリジンを解決 する必要があります。
このアルゴリズムの結果はキャッシュできるため、将来のフェッチが高速化される可能性があります。
expect"
expect キーワードは link 要素と共に使用できます。このキーワードは 内部リソースリンク を作成します。
内部リソースリンク は、expect
キーワードによって作成され、リンクされている要素がドキュメントに接続され、完全に解析されるまでレンダリングを ブロック するために使用されます。
expect
キーワードによって指定されたリソースのデフォルトタイプはありません。
次のいずれかの条件が link 要素
el に対して発生する場合:
expect 内部リソースリンク が、すでに ブラウジングコンテキストに接続されている
el に作成された場合。
expect 内部リソースリンク が
el に作成され、el が ブラウジングコンテキストに接続された 場合。
expect 内部リソースリンク が
el に作成され、el がすでに ブラウジングコンテキストに接続されている 場合、および el の
href 属性が設定、変更、または削除された場合。
expect 内部リソースリンク が
el に作成され、el がすでに ブラウジングコンテキストに接続されている 場合、および el の
media 属性が設定、変更、または削除された場合、
そのときは、処理 el を実行します。
リンク 要素 el に対して、内部リソースリンクを処理するには、次の手順を実行します:
el の ノードドキュメント を doc とします。
el の href
属性の値を指定して URLのエンコードと解析
を行った結果として url を取得します。
doc および url に対して 示された部分を選択する 結果として indicatedElement を取得します。
次のすべてが真である場合:
doc の 現在のドキュメントの準備状態 が "loading"
である。
el が 内部リソースリンク を作成している。
el が ブラウジングコンテキストに接続されている。
el が 潜在的にレンダリングをブロックする可能性がある。
indicatedElement が要素ではないか、または 開いている要素のスタック 上にあり、その関連する HTML パーサー が doc に関連付けられている。
その場合、レンダリングをブロック します el で。
それ以外の場合、レンダリングを解除 します el で。
以下の属性変更手順は、
element、localName、oldValue、
value、およびnamespaceを与えられた場合に、
expect、
link要素が
動的なidおよび
nameの変更に
応答することを保証するために使用されます：
namespace が null でない場合、終了します。
element が 開いている要素のスタック 上にある場合、終了します。
次のいずれかが真である場合:
その場合、内部リソースリンクを処理する を element の ノードドキュメント に対して実行します。
external"external キーワードは、a、area、および form 要素と共に使用できます。このキーワードは ハイパーリンク
を作成しませんが、要素によって作成された他のハイパーリンク（他のキーワードが作成しない場合は暗示されたハイパーリンク）に 注釈 を付けます。
external
キーワードは、リンクが現在のドキュメントが構成するサイトの一部ではないドキュメントに導いていることを示します。
help"help キーワードは、link、a、area、および form 要素と共に使用できます。このキーワードは ハイパーリンク を作成します。
a、area、および form 要素に対して、help
キーワードは、ハイパーリンクを定義する要素の親要素とその子要素のために、参照されるドキュメントがさらに支援情報を提供することを示します。
次の例では、フォームコントロールに関連するコンテキストに応じたヘルプが関連付けられています。ユーザーエージェントは、この情報を使用して、たとえば、ユーザーが「ヘルプ」または「F1」キーを押した場合に参照されたドキュメントを表示することができます。
< p >< label > Topic: < input name = topic > < a href = "help/topic.html" rel = "help" > (Help)</ a ></ label ></ p > link 要素に対して、help
キーワードは、参照されるドキュメントがページ全体のヘルプを提供することを示します。
a および area 要素に対して、一部のブラウザでは、help キーワードがリンクに異なるカーソルを使用させることがあります。
icon"現在のすべてのエンジンでサポートされています。
icon キーワードは link 要素と共に使用できます。このキーワードは 外部リソースリンク を作成します。
指定されたリソースはページまたはサイトを表すアイコンであり、ユーザーエージェントがユーザーインターフェイスでページを表す際に使用する必要があります。
アイコンは、聴覚アイコン、視覚アイコン、またはその他の種類のアイコンである可能性があります。複数のアイコンが提供されている場合、ユーザーエージェントは type、media、および sizes
属性に基づいて最も適切なアイコンを選択する必要があります。複数の等しく適切なアイコンがある場合、ユーザーエージェントはアイコンのリストを収集した時点で ツリー順
で最後に宣言されたアイコンを使用しなければなりません。ユーザーエージェントがアイコンを使用しようとしたが、そのアイコンが実際には不適切であると判断された場合（たとえば、サポートされていない形式を使用しているため）、ユーザーエージェントは属性によって判断された次に適切なアイコンを試す必要があります。
ユーザーエージェントはアイコンのリストが変更されたときにアイコンを更新する必要はありませんが、更新することが推奨されます。
icon キーワードによって指定されるリソースにはデフォルトのタイプがありません。ただし、リソースのタイプを判別する ために、ユーザーエージェントはリソースが画像であると想定する必要があります。
sizes キーワードは、ピクセル単位のアイコンサイズを表します（CSSピクセル
ではなく、元のピクセルで表されます）。
2x（192dpi）表示用に意図された幅50 CSSピクセル のアイコンは、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 が存在しない場合、スキーム が HTTP(S)スキーム である Document オブジェクトに対して、ユーザーエージェントはこれらのステップを並行して実行できます。
request を新しい リクエスト として、URL を URLレコード
であり、/favicon.ico を Document
オブジェクトの 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 属性の全体の値は、文字間に U+0020
スペース文字が1つだけ含まれており、他の ASCII空白文字 が含まれていない "shortcut icon" 文字列と ASCII大文字小文字の区別なく一致している必要があります。
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 キーワードと同様に扱う必要があります。
manifest"サポートは1つのエンジンのみ。
manifest
キーワードは、link要素で使用できます。
このキーワードは外部リソースリンクを作成します。
manifest
キーワードは、現在のドキュメントに関連するメタデータを提供するマニフェストファイルを示します。
manifestキーワードで指定されたリソースには、デフォルトのタイプはありません。
ウェブアプリケーションがインストールされていない場合、このリンクタイプのリンクされたリソースをフェッチおよび処理する適切なタイミングは、ユーザーエージェントが必要と判断したときです。例えば、ユーザーがウェブアプリケーションをインストールすることを選択したときです。
インストールされたウェブアプリケーションの場合、このリンクタイプのリンクされたリソースをフェッチおよび処理する適切なタイミングは次の通りです。
外部リソースリンクが、すでにブラウジングコンテキストに接続されている
link要素に作成されたとき。
すでにブラウジングコンテキストに接続されている link要素の href 属性が変更されたとき。
いずれの場合でも、ツリー順序で link 属性が最初に rel 属性に含まれる manifest
トークンを使用できる要素のみが使用されます。
ユーザーエージェントは、このリンクタイプに対してロードイベントを遅延させてはなりません。
このリンクタイプのリンクされたリソースに対するリンクされたリソースのフェッチ設定手順は、 link要素 elとリクエスト request に与えられたときの手順です。
navigable がnullの場合、falseを返します。
navigable が トップレベルのトラバーサブル でない場合、falseを返します。
request のイニシエーター を
"manifest" に設定します。
request の宛先
を "manifest" に設定します。
request のモード を
"cors" に設定します。
request の資格情報モード を el の crossorigin
コンテンツ属性のCORS設定属性資格情報モードに設定します。
trueを返します。
リンクされたリソースを処理するには、link 要素 el、ブール値
success、レスポンス response、およびバイトシーケンス bodyBytes を与えます。
response の コンテンツタイプメタデータ がJSON MIMEタイプでない場合、success をfalseに設定します。
success がtrueの場合:
manifest URL を response の URL に設定します。
マニフェストを処理し、 document URL、 manifest URL および bodyBytes を指定します。[MANIFEST]
リンクヘッダーを処理する手順は、何もしないようにします。
modulepreload"
modulepreload
キーワードは、link
要素で使用できます。このキーワードは、外部リソースリンク
を作成します。このキーワードはbody-okです。
modulepreload
キーワードは、preload
キーワードの特化した代替手段であり、モジュールスクリプト
を事前にロードするための処理モデルに焦点を当てています。特に、モジュールスクリプトの特定のフェッチ動作（例：crossorigin
属性の異なる解釈を含む）を使用し、結果を後で評価するための適切な
モジュールマップ
に配置します。対照的に、preload
キーワードを使用した同様の外部リソースリンク
は、ドキュメントのモジュールマップに影響を与えずに、結果をプリロードキャッシュに配置します。
さらに、実装はモジュールスクリプト
が依存関係を宣言することを利用して、指定されたモジュールの依存関係もフェッチすることができます。これは最適化の機会として意図されており、ユーザーエージェントはその依存関係が後で必要になる可能性が高いことを知っているためです。技術的な手段がない限り、一般的には観測されません。特に、適切な
load または
error
イベントは、指定されたモジュールがフェッチされた後に発生し、依存関係を待つことはありません。
ユーザーエージェントは、このリンクタイプのためにロードイベントを遅延させてはなりません。
リンクされたリソースをフェッチして処理する適切なタイミングは、次の通りです:
外部リソースリンクが既にブラウジングコンテキストに接続されているリンク要素上に作成されたとき。
他のリンク関係とは異なり、as、crossorigin、referrerpolicyなどの関連属性を変更しても、新しいフェッチはトリガーされません。これは、ドキュメントのモジュールマップが既存のフェッチで既にポピュレートされているためであり、再フェッチは無意味だからです。
リンクされたリソースをフェッチして処理するためのアルゴリズムは、modulepreloadリンクがリンク要素elである場合に適用され、次の手順で実行されます:
もしelのhref属性の値が空文字列である場合は、終了します。
elのas属性（destination）の現在の状態をdestinationとし、状態がない場合は「script」とします。
もしdestinationがscript-likeでない場合、要素タスクをキューに追加し、ネットワーキングタスクソースにelを渡して、イベントを発火させます。このイベントはerrorという名前で、elに対して発火されます。その後、処理を終了します。
elのhref属性の値をもとにurlをエンコーディングパースして決定し、elのノードドキュメントに相対するURLを取得します。
もしurlがエラーとなった場合は、終了します。
elのノードドキュメントの関連設定オブジェクトをsettings objectとします。
elのcrossorigin属性に対応するCORS設定属性のクレデンシャルモードをcredentials
modeとします。
elの[[CryptographicNonce]]をcryptographic nonceとします。
もしelがintegrity属性を持たない場合は、integrity
metadataを、urlとsettings objectを使ってモジュールインテグリティメタデータを解決する結果に設定します。
elのreferrerpolicy属性の現在の状態をreferrer
policyとします。
elのfetchpriority属性の現在の状態をfetch
priorityとします。
モジュールプリロードモジュールスクリプトグラフをフェッチするために、url、destination、settings object、optionsを使用して、次のステップを実行します:
リンクヘッダーを処理するこのタイプのリンクリソースのステップは、何も行いません。
次のスニペットは、複数のモジュールをプリロードしたアプリケーションの上部を示しています:
<!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" >
... このアプリケーションのモジュールグラフは次のように仮定します:
ここで、アプリケーション開発者は、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())" >
素晴らしいものを見る
</ button > nofollow」nofollowキーワードは、
a、
area、
およびform要素で使用できます。この
キーワードはハイパーリンクを作成しませんが、要素によって
作成された他のハイパーリンク（他のキーワードが作成しない場合は暗黙のハイパーリンク）を注釈します。
nofollow
キーワードは、リンクがページの元の著者または発行者によって承認されていないこと、またはリンク先の文書へのリンクが、
主に二つのページに関係する人物間の商業関係のために含まれていることを示します。
noopener」現在のすべてのエンジンでサポートされています。
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 > noreferrer」
すべての現在のエンジンでサポートされています。
noreferrer
キーワードは、a、
area、
およびform要素で使用できます。この
キーワードはハイパーリンクを作成しませんが、要素によって
作成された他のハイパーリンク（他のキーワードが作成しない場合は暗黙のハイパーリンク）を注釈します。
これは、リンクを辿る際にリファラー情報が漏れないことを示し、同じ条件下でnoopenerキーワードの動作をも暗示します。
リファラーが直接操作される処理モデルも参照してください。
<a href="..." rel="noreferrer" target="_blank">は<a href="..." rel="noreferrer noopener" target="_blank">と同じ動作をします。
opener」openerキーワードは、a、
area、
およびform要素で使用できます。このキーワードはハイパーリンクを作成しませんが、要素によって作成された他のハイパーリンク（他のキーワードが作成しない場合は暗黙のハイパーリンク）を注釈します。
このキーワードは、ハイパーリンクに従った結果、新たに作成されたトップレベルのトラバーサブルに補助的なブラウジングコンテキストが含まれることを示します。
また、処理モデルも参照してください。
次の例では、openerを使用して、ヘルプページのポップアップがオープナーをナビゲートできるようにしています。例えば、ユーザーが探している情報が別の場所にある場合などです。代替案としては、_blankの代わりに名前付きターゲットを使用することも考えられますが、既存の名前と競合する可能性があります。
< a href = "..." rel = opener target = _blank > Help!</ a > pingback」pingbackキーワードは、link要素で使用できます。このキーワードは外部リソースリンクを作成します。このキーワードはbody-okです。
pingbackキーワードの意味については、Pingback
1.0を参照してください。[PINGBACK]
preconnect」
すべての現行エンジンでサポートされています。
preconnectキーワードは、link要素で使用できます。このキーワードは外部リソースリンクを作成します。このキーワードはbody-okです。
preconnectキーワードは、指定されたリソースのオリジンへの接続を予め開始することが有益である可能性が高いことを示します。つまり、そのオリジンに存在するリソースをユーザーが必要とする可能性が高く、接続確立に伴う遅延コストを事前に処理することでユーザーエクスペリエンスが向上します。
preconnectキーワードによって指定されたリソースにはデフォルトのタイプはありません。
このリンクタイプでは、ロードイベントを遅延させてはいけません。
このタイプのリンクをフェッチして処理する適切なタイミングは以下の通りです。
外部リソースリンクが、既にブラウジングコンテキストに接続されている
link要素で作成された場合。
既にブラウジングコンテキストに接続されている link要素のcrossorigin属性が設定、変更、または削除された場合。
リンクリソースのフェッチと処理手順は、link要素elが与えられた場合に、リンクオプションを作成し、その結果に基づいて事前接続を実行します。
このタイプのリンクリソースに対してリンクヘッダを処理する手順は、リンク処理オプション optionsが与えられた場合に、事前接続を実行することです。
事前接続をリンク処理オプション optionsに対して実行する方法：
optionsのhrefが空文字列である場合、処理を終了します。
optionsのhrefをURLのエンコード解析を行い、optionsのベースURLに相対的に解釈されたurlを取得します。
ベースURLを文書や環境の代わりに渡すことについては、issue #9715で追跡されています。
urlが失敗した場合、処理を終了します。
urlのスキームがHTTP(S)スキームでない場合、処理を終了します。
partitionKeyをネットワークパーティションキーの決定の結果として取得します。
useCredentialsをtrueに設定します。
もしoptionsのcrossoriginがAnonymousであり、optionsのoriginがurlのオリジンと同一オリジンでない場合、useCredentialsをfalseに設定します。
ユーザーエージェントは、partitionKey、urlのオリジン、およびuseCredentialsを指定して接続を取得する必要があります。
この接続は取得されますが、直接使用されることはありません。それは後続の使用のために接続プールに残ります。
ユーザーエージェントは可能な限り事前接続を開始し、完全な接続ハンドシェイク（HTTPの場合はDNS+TCP、HTTPSのオリジンの場合はDNS+TCP+TLS）を実行するべきですが、リソースの制約や他の理由で部分的なハンドシェイク（HTTPの場合はDNSのみ、HTTPSの場合はDNSまたはDNS+TCP）を実行するか、完全にスキップすることを選択することが許されています。
オリジンごとの最適な接続数は、交渉されたプロトコル、ユーザーの現在の接続プロファイル、利用可能なデバイスリソース、グローバル接続制限、および他のコンテキスト固有の変数に依存します。その結果、開かれる接続数の決定はユーザーエージェントに委ねられています。
prefetch」prefetchキーワードは、link要素で使用できます。このキーワードは外部リソースリンクを作成します。このキーワードはbody-okです。
prefetchキーワードは、指定されたリソースまたは同一サイトのドキュメントを事前にフェッチしてキャッシュすることが有益である可能性が高いことを示します。これは、ユーザーが将来のナビゲーションでこのリソースを必要とする可能性が高いためです。
prefetchキーワードによって指定されたリソースにはデフォルトのタイプはありません。
このタイプのリンクをフェッチして処理する適切なタイミングは以下の通りです。
外部リソースリンクが、既にブラウジングコンテキストに接続されている
link要素で作成された場合。
既にブラウジングコンテキストに接続されている link要素のcrossorigin属性が設定、変更、または削除された場合。
リンクリソースのフェッチと処理アルゴリズムは、prefetchリンクが与えられた場合に、link要素elに対して次のように行われます。
elのhref属性の値が空文字列の場合、処理を終了します。
optionsをelからリンクオプションを作成する結果として取得します。
requestをoptionsからリンクリクエストを作成する結果として取得します。
requestがnullである場合、処理を終了します。
requestのイニシエーターを「prefetch」に設定します。
processPrefetchResponseを、レスポンス responseとnull、失敗、またはバイトシーケンス bytesOrNullに対して次の手順を行うものとして設定します。
ユーザーエージェントは、requestをフェッチし、processResponseConsumeBodyをprocessPrefetchResponseに設定します。ユーザーエージェントは、現在のドキュメントに必要な他のリクエストを優先するために、requestのフェッチを遅延させることができます。
リンクヘッダを処理する手順は、何もしないことです。
preload"1つのエンジンのみ対応しています。
preloadキーワードは、link要素で使用できます。このキーワードは、外部リソースリンクを作成します。このキーワードはbody-okです。
preloadキーワードは、ユーザーエージェントが指定されたリソースをあらかじめフェッチしてキャッシュすることを示します。これは、as属性によって指定された潜在的な宛先と、fetchpriority属性によって指定された優先度に従って行われます。このリソースが現在のナビゲーションに必要である可能性が高いためです。
ユーザーエージェントは、リソースが読み込まれた際に、画像をデコードしたり、スタイルシートを作成したりといった追加の操作を行う場合があります。しかし、これらの追加操作は観測可能な効果を持つことはできません。
preloadキーワードに指定されるリソースのデフォルトタイプはありません。
ユーザーエージェントは、このリンクタイプに対してロードイベントを遅延させることはできません。
このリンクに対してリンクされたリソースをフェッチして処理する適切なタイミングは次のとおりです:
外部リソースリンクが、すでにブラウジングコンテキストに接続されている要素上に作成されたとき。
すでにブラウジングコンテキストに接続されている外部リソースリンクのlink要素のhref属性が変更されたとき。
すでにブラウジングコンテキストに接続されている外部リソースリンクのlink要素のas属性が変更されたとき。
すでにブラウジングコンテキストに接続されている外部リソースリンクのlink要素のtype属性が、リクエストの宛先に対してサポートされていないタイプを指定していたために以前は取得されなかったが、それが設定、削除、または変更されたとき。
すでにブラウジングコンテキストに接続されている外部リソースリンクのlink要素のmedia属性が、以前は環境と一致しなかったために取得されなかったが、それが変更または削除されたとき。
ドキュメントにはプリロードされたリソースのマップがあります。これは順序付けられたマップで、初期状態では空です。
プリロードされたリソースを消費するために、ウィンドウ windowが、URL
url、文字列 destination、文字列 mode、文字列 credentialsMode、文字列
integrityMetadata、およびレスポンスを受け入れるアルゴリズム
onResponseAvailableを指定した場合:
key を url が プリロードキー、destination が 送信先、mode が モード、credentialsMode が 認証モード のプリロードキーとします。
preloadsをwindowの関連ドキュメントのプリロードされたリソースのマップとします。
もしkeyがpreloads内に存在しない場合は、falseを返します。
entryをpreloads[key]とします。
consumerIntegrityMetadataを、integrityMetadataの解析結果とします。
次の条件のいずれにも当てはまらない場合:
consumerIntegrityMetadataがメタデータなしである場合;
consumerIntegrityMetadataがpreloadIntegrityMetadataと等しい場合;
この比較では未知の整合性オプションを無視します。issue #116を参照してください。
その場合はfalseを返します。
プリロードとコンシューマーの間で整合性メタデータが一致しない場合、両方がデータと一致していても、ネットワークからの追加のフェッチが発生します。
ネットワークエラーがプリロードキャッシュに追加されることが重要です。これにより、プリロード要求がエラーになった場合、誤った応答が後でネットワークから再要求されることはありません。これにはセキュリティ上の影響もあります。開発者がプリロード要求にサブリソース整合性メタデータを指定したが、その後のリソース要求には指定しなかった場合を考えてみましょう。プリロード要求がサブリソース整合性検証に失敗して破棄された場合、リソース要求は整合性を検証せずにネットワークから潜在的に悪意のある応答をフェッチして消費します。 [SRI]
削除する preloads[key]
もしentryのレスポンスがNullである場合、entryのレスポンスが利用可能なときをonResponseAvailableに設定します。
それ以外の場合は、entryのレスポンスを使用してonResponseAvailableを呼び出します。
trueを返します。
このセクションの目的のために、文字列typeが文字列destinationと一致するのは、次のアルゴリズムがtrueを返す場合です:
もしtypeが空文字列である場合はtrueを返します。
もしdestinationが"fetch"である場合はtrueを返します。
mimeTypeRecordをパースした結果とします。
もしmimeTypeRecordが失敗した場合はfalseを返します。
もしmimeTypeRecordがユーザーエージェントによってサポートされていない場合は、falseを返します。
次のいずれかがtrueである場合:
destinationが"audio"または"video"であり、mimeTypeRecordがオーディオまたはビデオMIMEタイプである場合;
destinationがスクリプトに似た宛先であり、mimeTypeRecordがJavaScript MIMEタイプである場合;
destinationが"image"であり、mimeTypeRecordがイメージMIMEタイプである場合;
destinationが"font"であり、mimeTypeRecordがフォントMIMEタイプである場合;
destinationが"json"であり、mimeTypeRecordがJSON MIMEタイプである場合;
その場合はtrueを返します。
falseを返します。
プリロードキーを作成するために、リクエスト requestを指定し、新しいプリロードキーを返します。このキーのURLはrequestのURL、宛先はrequestの宛先、モードはrequestのモード、そして資格情報モードはrequestの資格情報モードになります。
文字列destinationを指定してプリロード宛先を変換するために:
もしdestinationが"fetch"、"font"、"image"、"script"、"style"、または"track"でない場合は、nullを返します。
変換結果を返します。
リンク処理オプション optionsと、レスポンスを受け入れるアルゴリズムprocessResponseをオプションとして指定してプリロードするために:
もしoptionsの宛先が"image"であり、optionsのソースセットがnullでない場合、optionsのhrefをソースセットから画像ソースを選択する結果に設定します。
requestをリンクリクエストを作成する結果とします。
もしrequestがnullの場合、returnします。
unsafeEndTimeを0に設定します。
keyをプリロードキーを作成する結果とします。
もし options の document
が null であれば、request の initiator
type を "early hint" に設定する。
controllerをnullに設定します。
reportTimingを、ドキュメント
documentに対して、controllerにタイミングを報告するためのものとします。
controllerを、requestをフェッチする結果とし、以下のステップに従ってprocessResponseConsumeBodyを設定します。responseを、null、失敗、またはバイトシーケンス bodyBytesとします:
もしbodyBytesがバイトシーケンスである場合、responseのボディをbodyBytesのボディとして設定します。
processResponseConsumeBodyを使用することにより、ボディ全体をネットワークからロードするようにしています。これは、プリロードが消費されるかどうか（現時点では不確定です）にかかわらず、プリローダがネットワークからボディ全体をロードすることを保証するために必要です。このステップでは、リクエストのボディを新しいボディにリセットし、同じバイトを含むようにします。これにより、他の仕様が実際に消費されるときにボディを読み取ることができます。
それ以外の場合は、responseをネットワークエラーに設定します。
unsafeEndTimeを安全でない共有現在時刻に設定します。
もしoptionsのドキュメントがnullでない場合、reportTimingをoptionsのドキュメントに対して呼び出します。
もしentryのレスポンスが利用可能なときがnullである場合、entryのレスポンスをresponseに設定します。そうでなければ、entryのレスポンスが利用可能なときを使用してresponseを呼び出します。
もしprocessResponseが指定されている場合、responseを使用してprocessResponseを呼び出します。
commitを、ドキュメント
documentに対して以下のステップを行うものとします:
もしentryのレスポンスがnullでない場合、documentに対してreportTimingを呼び出します。
documentのプリロードされたリソースのマップ[key]をentryに設定します。
もしoptionsのドキュメントがnullである場合、optionsのドキュメント準備完了時をcommitに設定します。それ以外の場合は、optionsのドキュメントを使用してcommitを呼び出します。
この種類のリンクリソースに対するリンクリソースをフェッチして処理する手順は、リンク要素elを与えられたときに行います:
elのためにソースセットを更新する。
optionsを要素からリンクオプションを作成する結果とします。
もしdestinationがnullなら、returnする。
optionsのdestinationをdestinationに設定する。
リンクヘッダーを処理する手順は、この種類のリンクリソースに対して、リンク処理オプション optionsを指定して、プリロード optionsします。
privacy-policy"
privacy-policy
キーワードは、link、a、および area
要素と共に使用できます。このキーワードは、ハイパーリンクを作成します。
privacy-policy
キーワードは、参照される文書が、現在の文書に適用されるデータ収集および使用の実践に関する情報を含むことを示します。詳細は Additional Link Relation Types
に記載されています。参照される文書は、スタンドアロンのプライバシーポリシーまたは、より一般的な文書の特定のセクションである可能性があります。[RFC6903]
search"search キーワードは、link、a、area、および form 要素と共に使用できます。このキーワードは、ハイパーリンクを作成します。
search
キーワードは、参照される文書が、文書および関連リソースを検索するためのインターフェースを提供することを示します。
OpenSearch記述文書は、link
要素およびsearchリンクタイプと共に使用して、ユーザーエージェントが検索インターフェースを自動的に発見できるようにすることができます。[OPENSEARCH]
stylesheet"
stylesheet
キーワードは、link
要素と共に使用されます。このキーワードは、スタイリング処理モデルに貢献する外部リソースリンクを作成します。このキーワードは
body-ok です。
指定されたリソースは、ドキュメントの表示方法を記述するCSSスタイルシート です。
サポートは1つのエンジンのみ。
もしalternate キーワードが
link
要素にも指定されている場合、そのリンクは代替スタイルシートとなります。この場合、title 属性が
link
要素に指定されていなければならず、値は空であってはいけません。
stylesheet
キーワードで指定されたリソースのデフォルトタイプは、text/css です。
このタイプのlink要素は、その要素が暗黙的に潜在的なレンダーブロックであり、要素がそのノードドキュメントのパーサーによって作成された場合に適用されます。
disabled 属性がlink 要素にセットされ、stylesheet
キーワードが設定されている場合、関連するCSSスタイルシートを無効にします。
このタイプのリンクを取得して処理するのに適切なタイミングは以下の通りです：
外部リソースリンクが、既にブラウジングコンテキストに接続されているlink要素に作成されたとき。
既にブラウジングコンテキストに接続されているlink要素のhref属性が変更されたとき。
link要素の外部リソースリンクが既にブラウジングコンテキストに接続されている場合に、そのdisabled属性が設定、変更、または削除されます。
既にブラウジングコンテキストに接続されているlink要素のcrossorigin属性が設定、変更、または削除されたとき。
既にブラウジングコンテキストに接続されているlink要素のtype属性が、以前に取得された外部リソースのContent-Typeメタデータと一致しない、または一致しなくなった値に設定または変更されたとき。
以前はサポートされていないタイプを指定したために取得されなかったが、既にブラウジングコンテキストに接続されているlink要素のtype属性が削除または変更されたとき。
既にブラウジングコンテキストに接続されている外部リソースリンクが、代替スタイルシートからそうでないものに、またはその逆に変更されたとき。
注意: ドキュメントがクイークモードに設定され、外部リソースの同一オリジンと一致し、外部リソースのContent-Typeメタデータがサポートされていないスタイルシートタイプである場合、ユーザーエージェントは代わりにそれをtext/cssと見なさなければなりません。
リンクされたリソースのフェッチ設定ステップは、リンク要素elおよびリクエストrequestが与えられた場合に適用されます:
もしelのdisabled属性が設定されている場合、falseを返します。
もしelがスクリプトブロックスタイルシートに貢献している場合、elをそのノードドキュメントのスクリプトブロックスタイルシートセットに追加します。
もしelのmedia属性の値が環境に一致し、elが潜在的にレンダーブロックされる場合、elでレンダリングをブロックします。
trueを返します。
CSSOMのCSSスタイルシートを取得するアルゴリズムをissue #968に示された計画に基づき、デフォルトのリソース取得と処理アルゴリズムの代わりに使用する予定です。それまでの間、すべての重要なサブリソースに対するリクエストは、link要素が現在レンダーブロックしているかどうかに基づいて、そのレンダーブロックが設定されるべきです。
このタイプのリンクされたリソースを処理するには、リンク要素el、ブール値success、レスポンスresponse、およびバイトシーケンスbodyBytesが与えられます:
リソースのContent-Typeメタデータがtext/cssでない場合、successをfalseに設定します。
もしelがもはやスタイリング処理モデルに貢献する外部リソースリンクを作成しない場合、または、当該リソースが取得されてから再度取得する必要が生じた場合は:
リストからelを削除し、elのノードドキュメントのスクリプトブロックスタイルシートセットから削除します。
戻ります。
もしelが関連するCSSスタイルシートを持っている場合、そのCSSスタイルシートを削除します。
もしsuccessがtrueであれば:
responseのURLリスト[0]
ここでURLを提供するのは、w3c/csswg-drafts issue #9316が修正されることを前提としています。
el
elのmedia属性。
これは、現在は存在しない可能性のある属性への参照であり、現在の属性値のコピーではありません。CSSOMでは、属性が動的に設定、変更、または削除された場合の動作が定義されています。
もしelがドキュメントツリー内にある場合はelのtitle属性、そうでない場合は空文字列。
これも同様に、属性の現在の値のコピーではなく、属性への参照です。
リンクが代替スタイルシートであり、elの明示的に有効がfalseである場合は設定され、それ以外の場合は解除されます。
リソースがCORS-同一オリジンである場合に設定され、それ以外の場合は解除されます。
null
デフォルト値のままにします。
未初期化のままにします。
これは正しくないように思えます。おそらくbodyBytesを使用すべきですか？issue #2997で追跡しています。
CSS 環境エンコーディングは、次の手順を実行した結果です: [CSSSYNTAX]
もしelがcharset属性を持っている場合、その属性の値からエンコーディングを取得します。成功した場合は、結果のエンコーディングを返します。[ENCODING]
そうでない場合は、ドキュメントの文字エンコーディングを返します。[DOM]
もしelがスクリプトブロックスタイルシートに貢献している場合は:
確認: elのノードドキュメントのスクリプトブロックスタイルシートセットがelを含んでいることを確認します。
リストからelを削除します。それをノードドキュメントのスクリプトブロックスタイルシートセットから削除します。
リンクヘッダーを処理するためのステップは、このタイプのリンクされたリソースには何も行わないことです。
tag"tag キーワードは、a および area 要素と共に使用されます。このキーワードはハイパーリンクを作成します。
tag
キーワードは、参照されたドキュメントが表す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 >
タグ: < a rel = tag href = "https://en.wikipedia.org/wiki/Gemstone" > Gemstone</ a >
</ footer >
</ body >
</ html > このドキュメントでは、2つの記事があります。しかし、「tag」リンクはページ全体に適用されます（このリンクがどこに配置されても、記事要素内に配置されていても適用されます）。
<!DOCTYPE HTML>
< html lang = "en" >
< head >
< title > Gem 4/4</ title >
</ head >
< body >
< article >
< h1 > 801: シュタインボック</ h1 >
< p > 801号Gem 4/4電気ディーゼルはアイベックスがあり、2002年に再建されました。</ p >
</ article >
< article >
< h1 > 802: マーモット</ h1 >
< figure >
< img src = "https://upload.wikimedia.org/wikipedia/commons/b/b0/Trains_de_la_Bernina_en_hiver_2.jpg" alt = "802号はパンタグラフと側面に高い換気口があり、赤かった。" >
< figcaption > 1980年代、ラーゴ・ビアンコ上の802号。</ figcaption >
</ figure >
< p > 802号Gem 4/4電気ディーゼルはマーモットがあり、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 > terms-of-service"terms-of-service
キーワードは、link、a、およびarea要素と共に使用できます。このキーワードはハイパーリンクを作成します。
terms-of-service
キーワードは、参照されたドキュメントが、現在のドキュメントの提供者と、現在のドキュメントを使用しようとするユーザーとの間の契約に関する情報を含んでいることを示します。詳細については、Additional Link
Relation Typesを参照してください。[RFC6903]
いくつかのドキュメントは、ドキュメントのシーケンスの一部を形成します。
ドキュメントのシーケンスとは、各ドキュメントが前の兄弟と次の兄弟を持つことができるものです。前の兄弟がないドキュメントはそのシーケンスの開始であり、次の兄弟がないドキュメントはそのシーケンスの終了です。
ドキュメントは複数のシーケンスの一部である場合があります。
next"next キーワードは、link、a、area、およびform要素と共に使用できます。このキーワードはハイパーリンクを作成します。
next
キーワードは、ドキュメントがシーケンスの一部であり、リンクがシーケンス内の次の論理ドキュメントに導くことを示します。
next キーワードがlink要素で使用される場合、ユーザーエージェントは、そのようなリンクをdns-prefetch、preconnect、またはprefetchキーワードの1つを使用しているかのように処理する必要があります。ユーザーエージェントが使用するキーワードは実装に依存します。たとえば、ユーザーエージェントがデータ、バッテリー電力、または処理能力を節約しようとしている場合は、コストの低いpreconnect処理モデルを使用したいかもしれませんし、同様のシナリオにおける過去のユーザー行動のヒューリスティック分析に基づいてキーワードを選択したいかもしれません。
prev"prev キーワードは、link、a、area、およびform要素と共に使用できます。このキーワードはハイパーリンクを作成します。
prev
キーワードは、ドキュメントがシーケンスの一部であり、リンクがシーケンス内の前の論理ドキュメントに導くことを示します。
同義語: 歴史的な理由から、ユーザーエージェントは"previous"というキーワードもprevキーワードと同様に扱う必要があります。
定義済みのリンクタイプセットへの拡張は、既存のrel値のためのマイクロフォーマットページで登録できます。[MFREL]
誰でもいつでも既存のrel値のためのマイクロフォーマットページを編集して、タイプを追加することができます。拡張タイプには、次の情報を指定する必要があります。
定義される実際の値。値は他の定義された値と紛らわしくないものでなければなりません（例: 大文字小文字の違いだけで異なる値）。
値にU+003Aコロン文字（:）が含まれている場合、それは絶対URLでなければなりません。
linkに対して
次のうちの1つ:
link要素に指定してはなりません。
link要素に指定できます。それはハイパーリンクを作成します。
link要素に指定できます。それは外部リソースリンクを作成します。
aおよびareaに対して
次のうちの1つ:
aおよびarea要素に指定してはなりません。
aおよびarea要素に指定できます。それはハイパーリンクを作成します。
aおよびarea要素に指定できます。それは外部リソースリンクを作成します。
aおよびarea要素に指定できます。それは、要素によって作成された他のハイパーリンクに注釈を付けます。
formに対して
次のうちの1つ:
form要素に指定してはなりません。
form要素に指定できます。それはハイパーリンクを作成します。
form要素に指定できます。それは外部リソースリンクを作成します。
form要素に指定できます。それは、要素によって作成された他のハイパーリンクに注釈を付けます。
キーワードの意味に関する非規範的な短い説明。
キーワードの意味と要件の詳細な説明へのリンク。それは、wikiの他のページへのリンク、または外部ページへのリンクである可能性があります。
処理要件が完全に同じである他のキーワード値のリスト。作成者は同義語として定義された値を使用すべきではありません。これらはあくまでレガシーコンテンツのサポートのためにユーザーエージェントがサポートすることを意図しています。誰でも実際に使用されていない同義語を削除することができます。このようにして、レガシーコンテンツとの互換性のために処理される必要がある名前だけが登録されるべきです。
次のうちの1つ:
キーワードが既存の値と重複していることが判明した場合、それは削除され、既存の値の同義語としてリストされるべきです。
提案中の状態で1か月以上使用されておらず、または指定されていない場合、そのキーワードはレジストリから削除される可能性があります。
提案中の状態で追加されたキーワードが既存の値と重複していることが判明した場合、それは削除され、既存の値の同義語としてリストされるべきです。提案中の状態で追加されたキーワードが有害であると判明した場合、それは「中止」ステータスに変更されるべきです。
誰でもいつでもステータスを変更できますが、上記の定義に従ってのみ行うべきです。
準拠チェッカーは、既存のrel値のためのマイクロフォーマットページで提供されている情報を使用して、値が許可されているかどうかを確認する必要があります。この仕様で定義された値、または「提案中」または「承認済み」とマークされた値は、「効果...」フィールドに記載されている要素で使用された場合、受け入れられる必要がありますが、この仕様で定義されていない値や、前述のページにリストされていない値は無効として拒否されなければなりません。準拠チェッカーは、この情報をキャッシュすることができます（例: パフォーマンス上の理由や信頼性の低いネットワーク接続の使用を避けるため）。
著者がこの仕様やwikiページで定義されていない新しいタイプを使用する場合、準拠チェッカーは上記の詳細を使用して、その値を「提案中」ステータスでwikiに追加することを提案するべきです。
既存のrel値のためのマイクロフォーマットページで「提案中」または「承認済み」のステータスを持つ拡張として定義されたタイプは、rel属性をlink、a、およびarea要素で「効果...」フィールドに従って使用することができます。[MFREL]
ins 要素すべての現在のエンジンでサポートされています。
cite — 引用元や編集に関する詳細情報へのリンク
datetime — 変更の日時（オプション）
HTMLModElement を使用します。
ins 要素は文書への追加を表します。
次の例は、1 つの段落の追加を表します:
< aside >
< ins >
< p > 私は果物が好きです。 </ p >
</ ins >
</ aside > 次の例も同様です。ここでは、aside
要素内のすべての内容が
フレージングコンテンツと見なされるため、段落は 1 つだけです:
< aside >
< ins >
りんごは < em > おいしい</ em > 。
</ ins >
< ins >
梨もそうです。
</ ins >
</ aside > 次の例では、2 つの段落が追加され、そのうち 2 番目の段落は 2 部に分けて挿入されています。この例の最初の ins 要素は
段落の境界を超えており、これは望ましくない形式と見なされます。
< aside >
<!-- これは避けるべきです -->
< ins datetime = "2005-03-16 00:00Z" >
< p > 私は果物が好きです。 </ p >
りんごは < em > おいしい</ em > 。
</ ins >
< ins datetime = "2007-12-19 00:00Z" >
梨もそうです。
</ ins >
</ aside > これをより適切にマークアップする方法を示します。要素は増えますが、どの要素も暗黙的な段落の境界を超えていません。
< aside >
< ins datetime = "2005-03-16 00:00Z" >
< p > 私は果物が好きです。 </ p >
</ ins >
< ins datetime = "2005-03-16 00:00Z" >
りんごは < em > おいしい</ em > 。
</ ins >
< ins datetime = "2007-12-19 00:00Z" >
梨もそうです。
</ ins >
</ aside > del
要素すべての現在のエンジンでサポートされています。
cite — 引用元や編集に関する詳細情報へのリンク
datetime — 変更の日時（オプション）
HTMLModElement を使用します。
del 要素は文書からの削除を表します。
次の例は、「やること」リストを示しており、完了した項目が完了日時と共に取り消し線で表示されています。
< h1 > やること</ h1 >
< ul >
< li > 食器洗い機を空にする</ li >
< li >< del datetime = "2009-10-11T01:25-07:00" > ウォルター・ルウィンの講義を見る</ del ></ li >
< li >< del datetime = "2009-10-10T23:38-07:00" > さらにトラックをダウンロードする</ del ></ li >
< li > プリンターを買う</ li >
</ ul > ins
要素と
del
要素に共通する属性
cite 属性は、変更を説明する文書の
URL を指定するために使用できます。その文書が長い場合、たとえば会議の議事録の場合、
著者は変更について説明している特定の部分を指すフラグメントを含めることが推奨されます。
もし cite
属性が存在する場合、それは変更を説明する
有効な URL であり、
かつスペースで囲まれている可能性があります。対応する引用リンクを取得するには、属性の値を要素の
ノード文書に対して
解析する必要があります。
ユーザーエージェントは、そのような引用リンクをユーザーがたどることを許可するかもしれませんが、それらは主にプライベート用途（例：サイトの編集についての統計を収集するサーバーサイドスクリプトによって）を目的としています。
datetime
属性は、変更の日時を指定するために使用できます。
もし存在する場合、datetime
属性の値は
有効な日時文字列でなければなりません。
ユーザーエージェントは datetime
属性を
日付または時間の文字列を解析するアルゴリズムに従って解析しなければなりません。
もしそれが日付またはグローバル日時を返さない場合、
その変更には関連するタイムスタンプがありません（値は非準拠です。有効な日時文字列ではありません）。
それ以外の場合、変更は指定された日付またはグローバル日時に行われたものと見なされます。もし指定された値がグローバル日時である場合、ユーザーエージェントは関連するタイムゾーンオフセット情報を使用して指定された日時を表示するタイムゾーンを決定するべきです。
この値はユーザーに表示される場合がありますが、主にプライベート用途を目的としています。
ins
要素と del
要素は、HTMLModElement
インターフェイスを実装しなければなりません:
すべての現在のエンジンでサポートされています。
[Exposed =Window ]
interface HTMLModElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions , ReflectURL ] attribute USVString cite ;
[CEReactions , Reflect ] attribute DOMString dateTime ;
};このセクションは規範的ではありません。
ins 要素と del 要素は段落構造に影響を与えないため、明示的な
p 要素がなく
段落が暗黙的に解釈される場合、一つの ins または del 要素が、全体の段落やその他の
非フレージングコンテンツ要素、および別の段落の一部をまたがることがあります。例えば以下のように:
< section >
< ins >
< p >
これは挿入された段落です。
</ p >
これは、上記の段落と同時に挿入された別の段落の最初の文です。
</ ins >
これは、もともとあった2番目の文です。
</ section > 一部の段落を p 要素で包むことで、同じ ins または del
要素で、1つの段落の終わり、2つ目の段落全体、および3つ目の段落の始まりをカバーすることさえ可能です（ただし、これは非常に紛らわしく、良い実践とは見なされません）:
< section >
これは最初の段落です。 < ins > この文が挿入されました。
< p > この2番目の段落が挿入されました。</ p >
この文も挿入されました。</ ins > これは、この例の3つ目の段落です。
<!-- （これはしないでください） -->
</ section > しかし、暗黙的な段落が定義されている方法により、1つの段落の終わりと次の段落の始まりを同じ ins または del
要素でマークアップすることはできません。その代わりに、1つ（または2つ）の p 要素と2つの ins または
del 要素を使用する必要があります。例えば次のように:
< section >
< p > これは最初の段落です。 < del > この文が削除されました。</ del ></ p >
< p >< del > この文も削除されました。</ del > この文には別の < del> 要素が必要でした。</ p >
</ section > 上記の混乱も一因であるため、著者は常にすべての段落を p
要素でマークアップし、ins や del 要素が
暗黙的な段落の境界を越えないようにすることが強く推奨されます。
このセクションは規範的ではありません。
ol 要素と ul 要素のコンテンツモデルは、ins および del
要素を子要素として許可していません。リストは、削除としてマークされた項目も含めて、常にすべての項目を表します。
項目が挿入または削除されたことを示すために、ins または
del 要素を li
要素の内容の周りに包むことができます。項目が別の項目に置き換えられたことを示すために、単一の li 要素に1つ以上の del 要素を配置し、その後に1つ以上の ins 要素を続けることができます。
次の例では、空の状態で始まったリストに項目が追加され、時間とともに削除されました。強調表示された部分は、リストの「現在」の状態を示しています。ただし、リスト項目の番号は編集を考慮していません。
< h1 > ストップシップバグ</ h1 >
< ol >
< li >< ins datetime = "2008-02-12T15:20Z" > バグ 225: 雪で雨センサーが作動しない</ ins ></ li >
< li >< del datetime = "2008-03-01T20:22Z" >< ins datetime = "2008-02-14T12:02Z" > バグ 228: 4月にウォーターバッファがオーバーフローする</ ins ></ del ></ li >
< li >< ins datetime = "2008-02-16T13:50Z" > バグ 230: 給湯器が再生可能燃料を使用しない</ ins ></ li >
< li >< del datetime = "2008-02-20T21:15Z" >< ins datetime = "2008-02-16T14:25Z" > バグ 232: 起動後に二酸化炭素排出が検出される</ ins ></ del ></ li >
</ ol > 次の例では、果物だけが含まれていたリストが、色だけのリストに置き換えられました。
< h1 > </ del > 果物リスト</ del >< ins > 色リスト</ ins ></ h1 >
< ul >
< li >< del > ライム</ del >< ins > グリーン</ ins ></ li >
< li >< del > リンゴ</ del ></ li >
< li > オレンジ</ li >
< li >< del > ナシ</ del ></ li >
< li >< ins > ティール</ ins ></ li >
< li >< del > レモン</ del ></ ins > イエロー</ ins ></ li >
< li > オリーブ</ li >
< li >< ins > パープル</ ins ></ li >
</ ul > このセクションは規範的ではありません。
テーブルモデルの一部を構成する要素には、ins および del
要素を許可しない複雑なコンテンツモデル要件があるため、テーブルへの編集を示すことは難しい場合があります。
行全体または列全体が追加または削除されたことを示すために、その行または列内の各セルの内容全体を ins または del 要素で包むことができます。
ここでは、テーブルの行が追加されています:
< table >
< thead >
< tr > < th > ゲーム名 < th > ゲームパブリッシャー < th > 評価
< 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 > ゲーム名 < th > ゲームパブリッシャー < th > < del cite = "/edits/r192" datetime = "2011-05-02 14:23Z" > 評価</ 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 >
</ table > 一般的に言って、より複雑な編集（例: セルが削除され、その後すべてのセルが上または左に移動されたことを示すなど）を示す良い方法はありません。
picture
要素すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
source
要素に続いて、1つの img 要素が続く。スクリプトサポート要素と混在することもある。
[Exposed =Window ]
interface HTMLPictureElement : HTMLElement {
[HTMLConstructor ] constructor ();
};picture 要素は、含まれている img
要素に対して複数のソースを提供するコンテナです。これにより、著者はスクリーンピクセル密度、ビューポートサイズ、画像形式、その他の要因に基づいて、使用する画像リソースについてユーザーエージェントに宣言的に制御やヒントを与えることができます。要素はその子要素を表します。
picture
要素は、似たような外見を持つ video 要素や
audio 要素とは少し異なります。これらすべてには
source
要素が含まれていますが、source 要素の
src 属性は、picture
要素内にネストされている場合は意味を持ちません。また、リソース選択アルゴリズムも異なります。さらに、picture
要素自体は何も表示しません。単に、その中に含まれている img
要素に対して、複数の URL
から選択できるコンテキストを提供するだけです。
source 要素すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
picture
要素の子要素として、img 要素の前に。
track 要素の前に。
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 要素は、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 要素の
src または type 属性を、要素がすでに video または audio
要素に挿入されているときに動的に変更しても効果はありません。再生内容を変更するには、単に メディア要素 に直接 src
属性を使用し、利用可能なリソースから選択するために canPlayType()
メソッドを使用することが考えられます。一般的に、ドキュメントが解析された後で source
要素を手動で操作するのは不必要に複雑なアプローチです。
以下のリストには、codecs= MIME パラメータを type
属性で使用するいくつかの例が示されています。
< source src = 'video.mp4' type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' > < source src = 'video.mp4' type = 'video/mp4; codecs="avc1.58A01E, mp4a.40.2"' > < source src = 'video.mp4' type = 'video/mp4; codecs="avc1.4D401E, mp4a.40.2"' > < source src = 'video.mp4' type = 'video/mp4; codecs="avc1.64001E, mp4a.40.2"' > < source src = 'video.mp4' type = 'video/mp4; codecs="mp4v.20.8, mp4a.40.2"' > < source src = 'video.mp4' type = 'video/mp4; codecs="mp4v.20.240, mp4a.40.2"' > < source src = 'video.3gp' type = 'video/3gpp; codecs="mp4v.20.8, samr"' > < source src = 'video.ogv' type = 'video/ogg; codecs="theora, vorbis"' > < source src = 'video.ogv' type = 'video/ogg; codecs="theora, speex"' > < source src = 'audio.ogg' type = 'audio/ogg; codecs=vorbis' > < source src = 'audio.spx' type = 'audio/ogg; codecs=speex' > < source src = 'audio.oga' type = 'audio/ogg; codecs=flac' > < source src = 'video.ogv' type = 'video/ogg; codecs="dirac, vorbis"' > insertedNode を指定したsource HTML要素挿入手順は次のとおりです。
parent を insertedNode の親とします。
parent がsrc属性を持たず、そのnetworkStateがNETWORK_EMPTYの値を持つメディア要素である場合、そのメディア要素のリソース選択アルゴリズムを呼び出します。
parent がpicture要素である場合、parentの子の各childについて反復処理を行い、childがimg要素である場合、これをchildの関連する変更としてカウントします。
movedNode とoldParent を指定したsource HTML要素移動手順は次のとおりです。
removedNode とoldParent を指定したsource HTML要素削除手順は次のとおりです。
提供されたメディアリソースがすべてのユーザーエージェントでレンダリングできるかどうかを著者が確信していない場合、著者は最後のエラーイベントをsource要素でリッスンし、フォールバック動作をトリガーすることができます。
< script >
function fallback( video) {
// <video> の内容で置き換える
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 > img 要素すべての現行エンジンでサポート。
すべての現行エンジンでサポート。
Support in all current engines.
Support in all current engines.
Support in all current engines.
Support in all current engines.
Support in all current engines.
usemap 属性がある場合:
インタラクティブコンテンツ。
source 要素の後で、 picture 要素の子として。
alt — 画像が利用できない場合に使用する代替テキスト
src — リソースのアドレス
srcset —
高解像度ディスプレイ、小型モニターなど、さまざまな状況で使用する画像
sizes — 異なるページレイアウトの画像サイズ
crossorigin —
この要素がクロスオリジンリクエストを処理する方法
usemap — 使用するイメージマップの名前
ismap — 画像がサーバーサイドイメージマップであるかどうか
width — 水平次元
height — 垂直次元
referrerpolicy
— この要素によって開始されたフェッチのリファラーポリシー
decoding —
プレゼンテーション用にこの画像を処理するときに使用するデコードのヒント
loading — ローディングの延期を決定するときに使用
fetchpriority —
この要素によって開始されたフェッチの優先度を設定します
alt 属性がある場合: 著者向け; 実装者向け。
[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 , 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 要素には、最初に要素自体に設定される寸法属性ソースがあります。
すべての現行エンジンでサポート。
すべての現行エンジンでサポート。
src属性およびsrcset属性、そして親がpicture要素である場合に、前の兄弟要素であるsource要素のsrcset属性に指定された画像が埋め込みコンテンツです。alt属性の値は、画像を処理できない人や画像の読み込みを無効にしている人のために同等のコンテンツを提供します（つまり、これはimg要素のフォールバックコンテンツです）。
alt属性の値に関する要件は、別のセクションで説明されています。
src 属性と srcset 属性の少なくとも1つが存在しなければなりません。
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 属性と src 属性（幅記述子が使用されていない場合）は、ソースセットに画像ソースを提供します（source 要素が選択されなかった場合）。
srcset 属性が存在し、幅記述子を使用する画像候補文字列がある場合、sizes 属性も存在しなければなりません。
srcset 属性が指定されておらず、loading 属性が遅延状態の場合、sizes 属性は値 "auto"（ASCII 大文字小文字を区別しない）で指定できます。sizes 属性は sizes 属性であり、ソースセットにソースサイズを提供します（source 要素が選択されなかった場合）。
img要素は、以下の条件を満たす場合に自動サイズを許可します:
loading 属性が遅延状態にある場合sizes 属性の値が "auto"
(ASCII 大文字小文字を区別しない) または "auto," (ASCII 大文字小文字を区別しない) で始まる場合すべての現行エンジンでサポート。
crossorigin 属性はCORS
設定属性です。その目的は、クロスオリジンアクセスを許可するサードパーティサイトの画像を canvas で使用できるようにすることです。
referrerpolicy
属性はリファラーポリシー属性です。その目的は、画像をフェッチする際に使用される リファラーポリシーを設定することです。[REFERRERPOLICY]
decoding 属性は、この画像をデコードするための優先方法を示します。この属性が存在する場合、画像デコードヒントでなければなりません。この属性の 欠落値のデフォルト および 無効値のデフォルト はどちらも Auto状態です。
HTMLImageElement/fetchPriority
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 > <!-- この div の後のすべての要素はビューポートの下にあります -->
< 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 イベントを遅延させません。
開発者は、width および height
属性を使用して遅延読み込みされた画像の好ましいアスペクト比を指定することを推奨します。これは、CSS が画像の width および height
プロパティを設定していても、画像の読み込み後にページレイアウトが移動するのを防ぐためです。
insertedNode を指定したimg
HTML要素挿入手順は次のとおりです。
movedNode とoldParent を指定したimg HTML要素移動手順は次のとおりです。
removedNode とoldParent を指定したimg HTML要素削除手順は次のとおりです。
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 属性の内容を title 属性の内容と同じように表示してはなりません。
ユーザーエージェントは、常にユーザーに画像を表示するオプションや、画像の表示を防ぐオプションを提供することができます。ユーザーが画像を見ることができない場合（視覚障害がある場合やグラフィック機能のないテキスト端末を使用している場合など）、ユーザーエージェントはユーザーが画像を活用できるように支援するためのヒューリスティックを適用することもできます。たとえば、画像内のテキストを光学文字認識 (OCR) することなどが考えられます。
ユーザーエージェントは alt
属性が欠落している場合の修復を推奨しますが、著者はそのような動作に依存してはなりません。画像の代替として機能するテキストを提供するための要件については、以下で詳しく説明します。
img
要素の内容は、レンダリングの目的では無視されます。
usemap
属性が存在する場合、画像に関連するイメージマップがあることを示すことができます。
ismap 属性は、a 要素の子孫であり、href
属性を持つ要素に使用された場合、その要素がサーバーサイドイメージマップへのアクセスを提供することを示します。これにより、対応する a 要素でのイベントの処理方法に影響を与えます。
ismap 属性はブール属性です。この属性は、祖先に a 要素があり、href
属性を持っていない要素には指定してはなりません。
usemap および
ismap 属性は、source 要素と、media 属性を指定した picture
要素と一緒に使用されると、混乱を招く動作を引き起こす可能性があります。
すべての現行エンジンでサポートされています。
crossOrigin
IDL属性は、crossoriginコンテンツ属性を反映し、既知の値にのみ限定されます。
HTMLImageElement/referrerPolicy
すべての現行エンジンでサポートされています。
referrerPolicy IDL属性は、referrerpolicyコンテンツ属性を反映しなければなりません。また、既知の値に限定されます。
すべての現行エンジンでサポートされています。
decoding
IDL属性は、decodingコンテンツ属性を反映し、既知の値に限定されます。
すべての現行エンジンでサポートされています。
loading
IDL属性は、loadingコンテンツ属性を反映し、既知の値に限定されます。
fetchPriority IDL属性は、fetchpriorityコンテンツ属性を反映し、既知の値に限定されます。
image.width [ = value ]
すべての現行エンジンでサポートされています。
image.height [ = value ]
すべての現行エンジンでサポートされています。
これらの属性は、画像の実際のレンダリング寸法を返すか、寸法が不明な場合は0を返します。
それらを設定することにより、対応するコンテンツ属性を変更することができます。
image.naturalWidth
すべての現行エンジンでサポートされています。
image.naturalHeight
HTMLImageElement/naturalHeight
すべての現行エンジンでサポートされています。
これらの属性は、画像の自然な寸法を返すか、寸法が不明な場合は0を返します。
image.complete
すべての現行エンジンでサポートされています。
画像が完全にダウンロードされた場合、または画像が指定されていない場合はtrueを返し、それ以外の場合はfalseを返します。
image.currentSrc
すべての現行エンジンでサポートされています。
画像の絶対URLを返します。
image.decode()
すべての現行エンジンでサポートされています。
このメソッドは、ユーザーエージェントに画像を並行してデコードさせ、デコードが完了すると解決されるpromiseを返します。
画像をデコードできない場合、promiseは"EncodingError" DOMExceptionで拒否されます。
image = new Image([ width [, height ] ])
すべての現行エンジンでサポートされています。
IDL属性widthおよびheightは、画像がレンダリングされている場合は、その画像のレンダリングされた幅と高さをCSSピクセル単位で返さなければなりません。また、画像が密度補正された自然な幅と高さを持ち、利用可能であるが、レンダリングされていない場合は、その幅と高さをCSSピクセル単位で返さなければなりません。そうでない場合、画像が利用可能でないか、密度補正された自然な幅と高さを持っていない場合は、0を返します。[CSS]
IDL属性naturalWidthおよびnaturalHeightは、画像が密度補正された自然な幅と高さを持ち、利用可能である場合、その幅と高さをCSSピクセル単位で返さなければなりません。そうでない場合は、0を返します。[CSS]
画像の密度補正された自然な幅と高さは、そのメタデータに指定された向きを考慮しているため、naturalWidthおよびnaturalHeightは、'image-orientation'プロパティの値に関係なく、画像を正しく向けるために必要な回転を適用した後の寸法を反映します。
IDL属性completeのゲッターステップは以下の通りです：
IDLメソッドdecode()は、呼び出されたとき、次のステップを実行しなければなりません：
新しいpromiseを作成します。
マイクロタスクをキューに入れ、次のステップを実行します：
これは、画像データの更新が同じくマイクロタスク内で行われるためです。したがって、次のようなコードを適切に処理するには、
img. src = "stars.jpg" ;
img. decode(); stars.jpgを正しくデコードするには、処理を1つのマイクロタスクだけ遅らせる必要があります。
global を、これの関連するグローバルオブジェクトとします。
次のいずれかが真である場合：
その場合、promise を「EncodingError」
DOMExceptionで拒否します。
それ以外の場合、並行して、次のいずれかのケースが発生するのを待ち、対応するアクションを実行します：
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オブジェクトを作成するために提供されています（createElement()のようなDOMのファクトリメソッドに加えて）：Image(width, height)。このレガシーファクトリ関数が呼び出されたとき、次の手順を実行しなければなりません:
documentを、現在のグローバルオブジェクトの関連するDocumentとします。
もしwidthが指定されている場合、"width"を使用してimgに対して属性値を設定します。
もしheightが指定されている場合、"height"を使用してimgに対して属性値を設定します。
imgを返します。
単一の画像には、文脈に応じて適切な代替テキストが異なる場合があります。
以下の各ケースでは、同じ画像が使用されていますが、毎回 alt
テキストが異なります。
この画像はスイスのジュネーブ州にあるカロージュ市の紋章です。
ここでは補足的なアイコンとして使用されています：
< p > 私はカロージュに住んでいました< img src = "carouge.svg" alt = "" > 。</ p > ここでは町を表すアイコンとして使用されています：
< p > 故郷: < img src = "carouge.svg" alt = "カロージュ" ></ p > ここでは町に関する文章の一部として使用されています：
< p > カロージュには紋章があります</ p >
< p >< img src = "carouge.svg" alt = "紋章には木の前に座っているライオンが描かれています。" ></ p >
< p > この紋章は町中の装飾として使われています。</ p > ここでは、画像の代わりに説明文が提供される場合、または画像の代わりに使用される場合に使用されています：
< p > カロージュには紋章があります</ p >
< p >< img src = "carouge.svg" alt = "" ></ p >
< p > 紋章には木の前に座っているライオンが描かれています。 この紋章は町中の装飾として使われています。</ p > ここではストーリーの一部として使用されています：
< p > 彼女はフォルダを手に取り、一枚の紙が落ちました。</ p >
< p >< img src = "carouge.svg" alt = "盾の形をした紙には、赤い背景、緑の木、舌を出した黄色いライオンが描かれており、その尾はS字型になっています。" ></ p >
< p > 彼女はフォルダを見つめました。S！ 彼女がずっと探していた答えは、単にSの文字でした！ それをどうして今まで見逃していたのだろう？ 全てが繋がりました。ヘクターがライオンの尾について言及した電話、マリアが舌を出したときのこと…</ p > ここでは、画像が何であるかは発表時には不明であり、代替テキストを提供できず、画像の簡単なキャプションのみが title 属性に提供されています：
< p > 最後に紋章をアップロードしたユーザーがこの画像をアップロードしました：</ p >
< p >< img src = "last-uploaded-coat-of-arms.cgi" title = "ユーザーがアップロードした紋章。" ></ p > 理想的には、このケースでも実際の代替テキストを提供する方法を見つけることが望ましいです。例えば、前のユーザーに問い合わせるなどして。代替テキストを提供しないことは、画像を表示できない人々（例：視覚障害者、非常に低帯域幅の接続を使用しているユーザー、バイト単位で課金されるユーザー、またはテキストのみのWebブラウザーを使用することを余儀なくされているユーザー）にとって、文書の使用をより困難にします。
同じ画像が異なる文脈で使用され、それぞれに適した異なる代替テキストを持つさらに多くの例を以下に示します。
< article >
< h1 > 私の猫たち</ h1 >
< h2 > フラッフィー</ h2 >
< p > フラッフィーは私のお気に入りです</ p >
< img src = "fluffy.jpg" alt = "彼女は毛糸の玉で遊ぶのが好きです。" >
</ p > 彼女は本当にかわいいです。</ p >
< h2 > マイルズ</ h2 >
< p > 私のもう一匹の猫、マイルズはただ食べて寝るだけです</ p >
</ article > < article >
< h1 > 写真撮影</ h1 >
< h2 > 室内で動く被写体を撮影する</ h2 >
< p > ここでのコツは、予測することです。被写体がどの速度で、どの距離で通過するかを知ることです</ p >
< img src = "fluffy.jpg" alt = "毛糸の玉を追いかける猫を、この技術でうまく撮影できます。" >
</ h2 > 夜の自然</ h2 >
</ p > これを実現するには、非常に感度の高いフィルム、または強力なフラッシュライトが必要です</ p >
</ article > < article >
< h1 > 私について</ h1 >
< h2 > 私のペットたち</ h2 >
< p > 私はフラッフィーという名の猫と、マイルズという名の犬を飼っています</ p >
< img src = "fluffy.jpg" alt = "私の猫フラッフィーは、よく一人で遊んでいます。" >
</ p > 私の犬マイルズとは一緒に長い散歩に行くのが好きです</ p >
< h2 > 音楽</ h2 >
</ p > 散歩の後、頭を空っぽにしてバッハを聴くのが好きです</ p >
</ article > < article >
< h1 > フラッフィーと毛糸</ h1 >
</ p > フラッフィーは毛糸で遊ぶのが好きな猫でした。ジャンプも好きでした</ p >
< aside >< img src = "fluffy.jpg" alt = "" title = "フラッフィー" ></ aside >
</ p > 彼女は朝に遊び、夜に遊びました</ p >
</ article > このセクションは非規範的です。
HTMLに画像を埋め込むには、画像リソースが1つしかない場合、img要素とそのsrc属性を使用します。
< h2 > 今日の注目記事</ 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) はイギリスの< a href = "/wiki/Music_hall" > ミュージックホール</ a > 歌手で、...ただし、ユーザーエージェントが選択できる複数の画像リソースを使用したい場合もあります。
異なるユーザーが異なる環境特性を持っているかもしれません：
ユーザーの物理的な画面サイズが異なる場合があります。
携帯電話の画面は対角線で4インチであるのに対し、ノートパソコンの画面は対角線で14インチかもしれません。
これは、画像のレンダリングサイズがビューポートサイズに依存する場合にのみ関連します。
ユーザーの画面のピクセル密度が異なる場合があります。
ある携帯電話の画面は、別の携帯電話の画面と比べて、物理的な画面サイズに関係なく1インチあたりのピクセル数が3倍かもしれません。
ユーザーのズームレベルが異なる場合があり、1人のユーザーが時間と共にズームレベルを変えるかもしれません。
ユーザーは、より詳細に確認するために特定の画像をズームインするかもしれません。
ズームレベルと画面のピクセル密度（前のポイント）は、1つのCSSピクセルあたりの物理的な画面ピクセル数に影響を与えることがあります。この比率は通常、デバイスピクセル比と呼ばれます。
ユーザーの画面の向きが異なるか、1人のユーザーが時間と共に向きを変えるかもしれません。
タブレットは直立して持ったり、90度回転させて画面を「縦向き」または「横向き」にすることができます。
ユーザーのネットワーク速度、ネットワーク遅延および帯域幅コストが異なるか、1人のユーザーが時間と共に変化するかもしれません。
ユーザーは、職場では高速で低遅延、定額制の接続を使用し、自宅では低速で低遅延、定額制の接続を使用し、他の場所では変動速度で高遅延、従量制の接続を使用するかもしれません。
著者は、通常、ビューポートの幅に応じて異なるレンダリングサイズで同じ画像コンテンツを表示したい場合があります。これは通常、ビューポートベースの選択と呼ばれます。
ウェブページは、常にビューポート幅全体にわたるバナーを上部に持つかもしれません。この場合、画像のレンダリングサイズは画面の物理的なサイズに依存します（ブラウザウィンドウが最大化されていると仮定）。
別のウェブページでは、物理的なサイズが小さい画面では1つのカラム、中程度のサイズの画面では2つのカラム、大きな画面では3つのカラムで画像を表示し、各場合に画像のレンダリングサイズを調整してビューポート全体を埋めるようにすることがあります。この場合、1カラムのレイアウトでは、画面が小さいにもかかわらず、画像のレンダリングサイズが2カラムレイアウトよりも大きくなる可能性があります。
著者は、画像のレンダリングサイズに応じて異なる画像コンテンツを表示したい場合があります。これは通常、アートディレクションと呼ばれます。
大きな物理的サイズの画面でウェブページを表示する場合（ブラウザウィンドウが最大化されていると仮定）、著者は画像の重要部分の周囲に関連性の低い部分を含めたいかもしれません。同じウェブページが小さな物理的サイズの画面で表示される場合、著者は画像の重要部分のみを表示したいかもしれません。
著者は、ユーザーエージェントがサポートする画像フォーマットに応じて異なる画像フォーマットを使用して同じ画像コンテンツを表示したい場合があります。これは通常、画像フォーマットベースの選択と呼ばれます。
ウェブページにはJPEG、WebP、JPEG XRの画像フォーマットが含まれており、後者2つはJPEGに比べてより優れた圧縮能力を持っています。異なるユーザーエージェントは異なる画像フォーマットをサポートするため、著者はそれらをサポートするユーザーエージェントに対してより優れたフォーマットを提供し、それをサポートしないユーザーエージェントにはJPEGフォールバックを提供したいと考えています。
上記の状況は相互に排他的ではありません。たとえば、デバイスピクセル比が異なる場合に異なるリソースを組み合わせることと、アートディレクションを組み合わせることは合理的です。
これらの問題をスクリプトを使用して解決することは可能ですが、それにより別の問題が発生します：
一部のユーザーエージェントは、スクリプトが実行される前に、HTMLマークアップで指定された画像を積極的にダウンロードし、ウェブページの読み込みが早く完了するようにします。スクリプトがどの画像をダウンロードするかを変更すると、ユーザーエージェントは2つの別々のダウンロードを開始し、ページの読み込みパフォーマンスが悪化する可能性があります。
著者がHTMLマークアップで画像を指定せず、スクリプトから単一のダウンロードを開始する場合、上記の二重ダウンロードの問題を回避できますが、スクリプトが無効になっているユーザーに対しては画像がまったくダウンロードされず、積極的な画像ダウンロードの最適化も無効になります。
これを踏まえ、この仕様では上記の問題に対処するためにいくつかの機能を宣言的に導入しています。
srcおよびsrcset属性は、img要素に使用され、x記述子を使用して、サイズだけが異なる複数の画像（小さい画像は大きい画像の縮小版です）を提供することができます。
x記述子は、画像のレンダリングサイズがビューポート幅に依存する場合（ビューポートベースの選択）には適していませんが、アートディレクションと一緒に使用することができます。
< h2 > 今日の注目記事</ 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) はイギリスの< a href = "/wiki/Music_hall" > ミュージックホール</ a > 歌手で、...ユーザーエージェントは、ユーザーの画面のピクセル密度、ズームレベル、およびネットワーク状況などの他の要因に応じて、指定されたリソースのいずれかを選択できます。
古いユーザーエージェントとの互換性を確保するために、srcset属性をまだ理解していない場合、URLの1つがimg要素のsrc属性に指定されます。これにより、古いユーザーエージェントでも何かしらの（おそらく低解像度の）画像が表示されます。新しいユーザーエージェントでは、src属性はsrcsetに1x記述子が指定されたかのように、リソース選択に参加します。
画像のレンダリングサイズは幅および高さ属性で指定されており、ユーザーエージェントは画像がダウンロードされる前にそのスペースを確保できます。
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属性に指定されています。新しいユーザーエージェントでは、src属性は、srcset属性がw記述子を使用している場合に無視されます。
この例では、ビューポート幅に応じて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で指定された実際の画像幅と必ずしも一致する必要はありません。
ユーザーエージェントは、sizes属性から幅を選択し、最初に一致する<media-condition>（括弧内の部分）がtrueで評価されるもの、またはすべてがfalseで評価される場合は最後のアイテムcalc(33vw - 100px)を使用します。
たとえば、ビューポート幅が29emの場合、(max-width: 30em)がtrueで評価され100vwが使用されるため、リソース選択の目的で画像サイズは29emです。一方、ビューポート幅が32emの場合、(max-width: 30em)はfalseで評価されますが、(max-width: 50em)はtrueで評価され50vwが使用されるため、リソース選択の目的で画像サイズはビューポート幅の半分である16emになります。わずかに広いビューポートが異なるレイアウトのため、画像が小さくなることに注意してください。
その後、ユーザーエージェントは有効なピクセル密度を計算し、前の例と同様に適切なリソースを選択できます。
この例は前の例と同じですが、画像は遅延ロードされます。この場合、sizes属性はautoキーワードを使用でき、ユーザーエージェントはソースサイズのために幅属性（または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 > ユーザーエージェントは、source要素のmedia属性のメディアクエリが一致する最初の要素を選択し、その後、そのsrcset属性から適切なURLを選択します。
選択されたリソースに応じて、画像のレンダリングサイズが変化します。CSSを使用して、ユーザーエージェントが画像をダウンロードする前に使用できる寸法を指定できます。
img { width : 300 px ; height : 300 px }
@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 = "朝食コンボ" >
</ picture >
</ h1 > type属性はsource要素に使用され、異なるフォーマットの複数の画像を提供するために使用できます。
< h2 > 今日の注目記事</ 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) はイギリスの< a href = "/wiki/Music_hall" > ミュージックホール</ a > 歌手で、...この例では、ユーザーエージェントは、サポートされているMIMEタイプを持つtype属性を持つ最初のソースを選択します。ユーザーエージェントがWebP画像をサポートしている場合、最初のsource要素が選択されます。そうでなくても、ユーザーエージェントがJPEG
XR画像をサポートしている場合、2番目のsource要素が選択されます。それらのフォーマットのいずれもサポートされていない場合は、img要素が選択されます。
このセクションは規範的ではありません。
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 = "バーニー・フランクがスーツと眼鏡を着用しています。" >
</ picture >
< figcaption > バーニー・フランク、2011年</ figcaption >
</ figure > alt属性に何を入れるべきかについては、画像の代替として機能するテキストを提供するための要件のセクションを参照してください。
この問題は、画像の読み込み時にユーザーエージェントが画像の寸法を必ずしも知っているわけではないことです。ページの読み込み中にレイアウトが何度も再フローされるのを防ぐために、CSSとCSSメディアクエリを使用して寸法を提供できます：
< style >
# a { width : 300 px ; height : 150 px ; }
@ media ( max-width : 600px ) { # a { width : 100 px ; height : 100 px ; } }
</ style >
< figure >
< picture >
< source srcset = "a-square.png" media = "(max-width: 600px)" >
< img src = "a-rectangle.png" alt = "バーニー・フランクがスーツと眼鏡を着用しています。" id = "a" >
</ picture >
< figcaption > バーニー・フランク、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 = "梨はジューシーです。" >
</ picture > しかし、レガシーのモバイルユーザーエージェントがより重要な場合は、すべての画像を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 = "梨はジューシーです。" >
</ 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 = "梨はジューシーです。" >
</ 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 = "梨はジューシーです。" >
</ picture > source、
img、
link
要素に共通の属性
srcset 属性とは、このセクションで定義されている要件を持つ属性のことです。
存在する場合、その値は1つ以上の 画像候補文字列で構成され、 それぞれはU+002Cコンマ文字(,)で次のものと区切られていなければなりません。 画像候補文字列に記述子がなく、URLの後に ASCII空白文字がない場合、 次の 画像候補文字列は 1つ以上の ASCII空白文字で始まらなければなりません。
画像候補文字列は、以下のコンポーネントで構成され、リストの下に説明されている追加の制限があります。
同じ要素に対して、別の画像候補文字列の幅の記述子の値と同じ幅の記述子の値を持つ画像候補文字列が存在してはなりません。
同じ要素に対して、別の画像候補文字列のピクセル密度記述子の値と同じピクセル密度記述子の値を持つ画像候補文字列が存在してはなりません。この要件の目的では、記述子を持たない画像候補文字列は、1xの記述子を持つ画像候補文字列と同等と見なされます。
要素に対して、幅の記述子が指定されている場合、その要素の他のすべての画像候補文字列も幅の記述子を指定していなければなりません。
画像候補文字列の幅の記述子に指定された幅は、その画像候補文字列のURLによって提供されるリソースの自然な幅と一致していなければなりません（自然な幅が存在する場合）。
要素に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>が<長さ>の場合、その値は負であってはならず、数学関数以外のCSS関数を使用してはなりません。
キーワードautoは、サイズ属性を解析で計算された幅を示します。存在する場合、それは最初のエントリでなければならず、<source-size-list>全体の値が"auto"(ASCII大文字小文字を区別しない)であるか、"auto,"(ASCII大文字小文字を区別しない)で始まらなければなりません。
もし、img要素が画像のロードを開始し、画像データを更新または環境の変化に対応アルゴリズムによってロードが開始されている場合は、自動サイズを許可し、レンダリングされている場合、autoが具体的なオブジェクトサイズの幅となります。そうでない場合、autoの値は無視され、代わりに次のソースサイズが使用されます。
autoキーワードは、次の条件が満たされている場合、サイズ属性のソース要素およびサイズ属性のimg要素で指定することができます。そうでない場合、autoを指定してはなりません。
さらに、幅および高さ属性やCSSを使用して寸法を指定することが強く推奨されます。寸法が指定されていない場合、sizes="auto"はレンダリングセクションでcontain-intrinsic-size: 300px 150pxを意味するため、画像はおそらく300x150の寸法でレンダリングされることになります。
<source-size-value>は画像の意図したレイアウト幅を示します。著者は、<メディア条件>を使用して、異なる環境に対して異なる幅を指定できます。
パーセンテージは<source-size-value>では許可されていません。これは、それが何に対して相対的であるかについての混乱を避けるためです。'vw'ユニットは、ビューポート幅に対して相対的なサイズに使用できます。
img要素には、現在のリクエストと保留中のリクエストがあります。現在のリクエストは最初、新しい画像リクエストに設定されます。保留中のリクエストは最初、nullに設定されます。
画像リクエストには、状態、現在のURL、および画像データがあります。
画像リクエストの画像データは、デコードされた画像データです。
img要素の現在のリクエストが利用可能である場合、img要素は、画像の密度補正済み自然幅（あれば）を持つ描画ソースを提供し、高さは画像の密度補正済み自然高さ（あれば）となり、外観は画像の自然な外観となります。
すべてのimg要素には、最後に選択されたソースがあり、最初はnullに設定されている必要があります。
すべての画像リクエストには、現在のピクセル密度があり、最初は1に設定されている必要があります。
すべての画像リクエストには、優先される密度補正済み寸法があり、それは幅と高さを含む構造体かnullである必要があります。最初はnullに設定されている必要があります。
img要素imgの密度補正済み自然幅と高さを決定するために:
dimをimgの現在のリクエストの優先される密度補正済み寸法に設定します。
優先される密度補正済み寸法は、画像内のメタ情報に基づいて画像をプレゼンテーションに準備するアルゴリズムで設定されます。
dimがnullの場合、dimをimgの自然な寸法に設定します。
dimを返します。
例えば、現在のピクセル密度が3.125の場合、それは1インチあたり300デバイスピクセルがあることを意味し、画像データが300x600の場合、密度補正済み自然幅と高さは96 CSSピクセル x 192 CSSピクセルとなります。
すべてのimgおよびlink要素は、ソースセットと関連付けられています。
ソースセットは、0個以上の画像ソースとソースサイズからなる順序付けられたセットです。
画像ソースは、URLであり、オプションでピクセル密度記述子または幅記述子を持ちます。
ソースサイズは、<source-size-value>です。ソースサイズがビューポートに対して相対的な単位を持つ場合、それはimg要素のノードドキュメントのビューポートに対して解釈されなければなりません。他の単位はメディアクエリでの解釈と同じでなければなりません。[MQ]
構文解析エラーは、このセクションのアルゴリズムにおける入力と要件の非致命的な不一致を示します。ユーザーエージェントは、構文解析エラーを何らかの形で公開することが推奨されます。
画像が正常にフェッチされたかどうか（例: レスポンスステータスがOKステータスであったかどうか）は、画像のタイプやそれが有効な画像であるかどうかを判断する際には無視されなければなりません。
これにより、サーバーがエラー応答を返した画像でも、それが表示されることが可能になります。
ユーザーエージェントは、画像のタイプを判断するために、画像の関連するコンテンツタイプヘッダーがofficial typeを示すように、画像のスニッフィングルールを適用する必要があります。これらのルールが適用されない場合は、画像のタイプは画像の関連するコンテンツタイプヘッダーで示されるタイプでなければなりません。
ユーザーエージェントは、img要素で非画像リソース（例: ドキュメント要素がHTML要素であるXMLファイル）をサポートしてはなりません。ユーザーエージェントは、画像リソースに埋め込まれた実行可能コード（例:
スクリプト）を実行してはなりません。ユーザーエージェントは、マルチページリソース（例:
PDFファイル）の最初のページのみを表示しなければなりません。ユーザーエージェントは、リソースがインタラクティブに動作することを許可してはなりませんが、リソース内のアニメーションは尊重する必要があります。
この仕様は、どの画像タイプがサポートされるべきかを規定していません。
デフォルトでは、画像はすぐに取得されます。ユーザーエージェントは、代わりにオンデマンドで取得するオプションをユーザーに提供することができます。（たとえば、帯域幅が制限されているユーザーがオンデマンドオプションを使用することがあります。）
画像をすぐに取得する場合、ユーザーエージェントは、img要素が作成されたとき、または関連する変更が発生したときに、必要に応じてアニメーションを再起動するフラグを設定し、その要素の画像データを同期的に更新しなければなりません。
オンデマンドで画像を取得する場合、ユーザーエージェントは、img要素の画像データが必要なときに（つまり、オンデマンドで）画像データを更新しなければなりませんが、img要素の現在のリクエストの状態が利用不可の場合に限ります。img要素が関連する変更を受けた場合、ユーザーエージェントが画像をオンデマンドでのみ取得する場合、img要素の現在のリクエストの状態は利用不可に戻る必要があります。
img要素に対する関連する変異は以下の通りです。
要素のsrc属性が前回と同じ値に設定された場合。この場合、画像データの更新アルゴリズムのためにアニメーションを再起動するフラグを設定しなければなりません。
要素のcrossorigin属性の状態が変更された場合。
要素のreferrerpolicy属性の状態が変更された場合。
imgまたはsourceのHTML要素挿入手順、
HTML要素削除手順、およびHTML要素移動手順は、変更を関連する変更としてカウントします。
要素の親がpicture要素であり、前の兄弟要素であるsource要素のsrcset、sizes、media、type、widthまたはheight属性が設定、変更、または削除された場合。
要素の採用手順が実行された場合。
要素が自動サイズを許可する場合：要素がレンダリングされているか、またはその具体的なオブジェクトサイズの幅が変わる場合。これは画像データを更新するアルゴリズムのためにイベントを省略するかもしれないフラグを設定しなければなりません。
各Documentオブジェクトには、利用可能な画像のリストが必要です。このリスト内の各画像は、絶対URL、CORS設定属性モード、およびモードがNo CORSでない場合はオリジンを含むタプルで識別されます。また、各画像には上位レイヤーキャッシュを無視するフラグが付いています。ユーザーエージェントは、いつでも1つのDocumentオブジェクトの利用可能な画像のリストのエントリを別のオブジェクトにコピーできます（例: Documentが作成されたときに、他のDocument内で読み込まれたすべての画像を追加できます）。ただし、この方法でコピーされたエントリのキーを変更してはならず、コピーされたエントリの上位レイヤーキャッシュを無視フラグは解除される必要があります。ユーザーエージェントは、メモリを節約するためなどに、これらのリストから画像をいつでも削除できます。ユーザーエージェントは、リソースの上位レイヤーキャッシュのセマンティクスに応じて、利用可能な画像のリストのエントリを適切に削除する必要があります（例: HTTP
`Cache-Control`レスポンスヘッダー）。上位レイヤーキャッシュを無視フラグが解除された場合に限ります。
利用可能な画像のリストは、src属性を以前にロードされたURLに変更する際に同期的な切り替えを可能にし、同じドキュメント内でキャッシュを許可しない場合でも画像の再ダウンロードを避けるために意図されています。これは、前の画像がまだロード中である間に同じ画像を再ダウンロードすることを避けるためには使用されません。
ユーザーエージェントは、利用可能な画像のリストとは別に画像データを保存することもできます。
例えば、リソースがHTTPレスポンスヘッダー`Cache-Control: must-revalidate`を持ち、その上位レイヤーキャッシュを無視するフラグが解除されている場合、ユーザーエージェントはそれを利用可能な画像のリストから削除しますが、画像データを別途保存し、サーバーが`304 Not Modified`ステータスで応答した場合にそれを使用することができます。
画像データは通常、ファイルサイズを削減するためにエンコードされています。そのため、ユーザーエージェントが画像を画面に表示するためには、そのデータをデコードする必要があります。デコードとは、画像のメディアデータをビットマップ形式に変換し、画面に表示できるようにするプロセスです。このプロセスは、コンテンツの表示に関わる他のプロセスに比べて遅いことがあります。そのため、ユーザーエージェントは最適なユーザーエクスペリエンスを提供するために、デコードを実行するタイミングを選択できます。
画像のデコードは、それが完了するまで他のコンテンツの表示を妨げる場合、同期的であると言われます。通常、これにより、画像と他のコンテンツが同時に原子的に表示される効果があります。ただし、この表示は、デコードにかかる時間の分だけ遅れます。
画像のデコードが他のコンテンツの表示を妨げない場合、それは非同期的であると言われます。これにより、非画像コンテンツがより早く表示される効果があります。ただし、デコードが完了するまで画像コンテンツは画面に表示されません。デコードが完了すると、画面は画像で更新されます。
同期モードと非同期モードのどちらでも、最終的なコンテンツは同じ時間が経過した後に画面に表示されます。主な違いは、ユーザーエージェントが最終的なコンテンツを表示する前に非画像コンテンツを先行して表示するかどうかです。
ユーザーエージェントが同期デコードを行うか非同期デコードを行うかを決定する際の補助として、decoding属性をimg要素に設定することができます。decoding属性の可能な値は、以下の画像デコードのヒントキーワードです。
| キーワード | 状態 | 説明 |
|---|---|---|
sync
| 同期 | この画像を他のコンテンツと原子的に表示するために、同期的にデコードすることを示します。 |
async
| 非同期 | 他のコンテンツの表示を遅らせないために、この画像を非同期的にデコードすることを示します。 |
auto
| 自動 | デコードモードに関する特別な指定がないことを示します（デフォルト）。 |
画像をデコードする際、ユーザーエージェントはdecoding属性の状態で示された優先度を尊重するべきです。状態がAutoの場合、ユーザーエージェントは任意のデコード動作を選択できます。
decode()メソッドを使用して、デコード動作を制御することも可能です。decode()メソッドは、コンテンツを画面に表示するプロセスとは独立してデコードを実行するため、decoding属性の影響を受けません。
このアルゴリズムは並行して実行されているステップからは呼び出せません。ユーザーエージェントが並行して実行されているステップからこのアルゴリズムを呼び出す必要がある場合、タスクをキューに入れる必要があります。
ユーザーエージェントがimg要素の画像データを更新する場合、オプションでアニメーションの再起動フラグが設定されている場合や、オプションでイベントの省略フラグが設定されている場合は、以下のステップを実行する必要があります。
要素のノードドキュメントが完全にアクティブでない場合、次のようにします：
このアルゴリズムを並行して実行し続けます。
このインスタンスの後にこのimg要素に対するこのアルゴリズムの別のインスタンスが開始された場合（たとえそれが中止され、もはや実行されていなくても）、戻ります。
このアルゴリズムを続行するためにマイクロタスクをキューに入れます。
ユーザーエージェントが画像をサポートできない場合、または画像のサポートが無効になっている場合は、現在のリクエストと保留中のリクエストの画像リクエストを中止し、現在のリクエストの状態を利用不可に設定し、保留中のリクエストをnullに設定して、戻ります。
selected sourceをnullに、selected pixel densityを未定義に設定します。
要素がsrcsetまたはpictureを使用しておらず、src属性が指定されていて、その値が空文字列でない場合、selected
sourceを要素のsrc属性の値に設定し、selected
pixel densityを1.0に設定します。
要素の最後に選択されたソースをselected sourceに設定します。
selected sourceがnullでない場合、次のステップを実行します：
urlStringを、要素のノードドキュメントに相対的にselected sourceをURLのエンコーディング、パース、およびシリアライズした結果として設定します。
urlStringが失敗した場合、この内側のステップセットを中止します。
keyを、urlString、要素のimg要素のcrossorigin属性のモード、およびそのモードがNo
CORSでない場合、要素のノードドキュメントのオリジンからなるタプルに設定します。
利用可能な画像のリストにkeyのエントリが含まれている場合、次のようにします：
そのエントリの上位レイヤーキャッシュを無視するフラグを設定します。
保留中のリクエストをnullに設定します。
現在のリクエストを、新しい画像リクエストに設定し、その画像データをエントリのデータにし、その状態を完全に利用可能に設定します。
img要素を指定して、現在のリクエストをプレゼンテーション用に準備します。
DOM操作タスクソースでimg要素に対して以下のステップを実行するタスクをキューに入れます：
アニメーションの再起動が設定されている場合、アニメーションを再起動します。
イベントを省略が設定されていない場合、またはpreviousURLがurlStringと等しくない場合、loadイベントをimg要素に発火します。
画像データの更新アルゴリズムを中止します。
マイクロタスクをキューに入れます、このアルゴリズムの残りの部分を実行し、アルゴリズムを呼び出したタスクを続行できるようにします。
このimg要素に対するこのアルゴリズムの別のインスタンスが、このインスタンスの後に開始された場合（たとえそれが中止され、もはや実行されていなくても）、戻ります。
例えば、src、srcset、crossorigin属性が連続して設定される場合などに、複数のリクエストを回避するために、最後のインスタンスのみが効果を持ちます。
selected sourceとselected pixel densityを、それぞれ画像ソースを選択する結果のURLとピクセル密度に設定します。
selected sourceがnullである場合、次のようにします：
現在のリクエストの状態を壊れたに設定し、画像リクエストを中止し、保留中のリクエストをnullに設定します。
DOM操作タスクソースでimg要素に対して以下のステップを実行するタスクをキューに入れます：
戻ります。
urlStringを、要素のノードドキュメントに相対的にselected sourceをURLのエンコーディング、パース、およびシリアライズした結果として設定します。
urlStringが失敗した場合、次のようにします：
保留中のリクエストがnullでなく、urlStringがpending requestの現在のURLと同じ場合、戻ります。
urlStringがcurrent requestの現在のURLと同じであり、current requestの状態が部分的に利用可能である場合、pending requestの画像リクエストを中止し、DOM操作タスクソースでimg要素に対して以下のステップを実行するタスクをキューに入れ、アニメーションの再起動が設定されている場合は、アニメーションを再起動します。
保留中のリクエストの画像リクエストを中止します。
current requestの状態が利用不可または壊れたである場合、current requestをimage requestに設定します。それ以外の場合は、pending requestをimage requestに設定します。
requestを、urlString、"image"、および要素のcrossoriginコンテンツ属性の現在の状態を与えて潜在的なCORSリクエストを作成した結果に設定します。
requestのクライアントを、要素のノードドキュメントの関連設定オブジェクトに設定します。
要素がsrcsetまたはpictureを使用している場合、requestのイニシエータを"imageset"に設定します。
requestのリファラーポリシーを、要素のreferrerpolicy属性の現在の状態に設定します。
requestの優先度を、要素のfetchpriority属性の現在の状態に設定します。
delay load eventを、imgの遅延ロード属性がEager状態にある場合、またはimgのためにスクリプトが無効化されている場合はtrueに設定し、それ以外の場合はfalseに設定します。
imgに対して遅延ロード要素ステップを実行するがtrueを返す場合、次のようにします：
imgの遅延ロード再開ステップを、このアルゴリズムの残り部分に設定し、画像を取得ステップから始めます。
img要素に対して遅延ロード要素のインターセクション監視を開始します。
戻ります。
画像を取得: フェッチ requestを行います。このアルゴリズムから戻り、フェッチのプロセス応答の一部として残りのステップを実行します。
この方法で取得されたリソースは、image requestの画像データです。それはCORS-同一オリジンまたはCORS-クロスオリジンのいずれかであり、これは画像が他のAPIとどのように相互作用するか（例:
canvasに使用された場合）に影響します。
delay load eventがtrueの場合、画像のフェッチは、リソースがフェッチされた後にネットワーキングタスクソースによってキューに入れられたタスクが実行されるまで、その要素のノードドキュメントのロードイベントを遅延させなければなりません。
これにより、ユーザーのローカルネットワークの簡単なポートスキャンを実行することが可能になります（特にスクリプティングと組み合わせた場合、ただしスクリプティングは実際にはそのような攻撃を実行するために必要ではありません）。ユーザーエージェントは、この攻撃を緩和するために、上記で説明されているものより厳格なクロスオリジンアクセス制御ポリシーを実装することができますが、残念ながらそのようなポリシーは通常、既存のウェブコンテンツとの互換性がありません。
できるだけ早く、次のリストから適用可能な最初のエントリにジャンプします：
multipart/x-mixed-replaceである場合
画像がフェッチされている間に、ネットワーキングタスクソースによってキューに入れられた次のタスクは、次のステップを実行する必要があります：
image requestが保留中のリクエストであり、少なくとも1つのボディパートが完全にデコードされている場合、現在のリクエストを中止し、保留中のリクエストを現在のリクエストにアップグレードします。
それ以外の場合、image requestが保留中のリクエストであり、ユーザーエージェントがimage requestの画像が致命的に破損していて、画像の寸法を取得できないことを確認できる場合、現在のリクエストを中止し、保留中のリクエストを現在のリクエストにアップグレードし、image requestの状態を壊れたに設定します。
それ以外の場合、image requestが現在のリクエストであり、その状態が利用不可であり、ユーザーエージェントがimage requestの画像の幅と高さを確認できる場合、current requestの状態を部分的に利用可能に設定します。
それ以外の場合、image requestが現在のリクエストであり、その状態が利用不可であり、ユーザーエージェントがimage requestの画像が致命的に破損していて、画像の寸法を取得できないことを確認できる場合、current requestの状態を壊れたに設定します。
画像のフェッチ中にネットワークタスクソースによってキューに入れられた各タスクは、画像のプレゼンテーションを更新する必要がありますが、新しいボディパーツが到着するたびに、ユーザーエージェントが画像の幅と高さを決定できる場合は、img要素を指定してimg要素の現在のリクエストをプレゼンテーション用に準備し、前の画像を置き換える必要があります。
1つのボディパーツが完全にデコードされたら、次の手順を実行します：
maybe omit events が設定されていないか、previousURL が urlString
と等しくない場合、img要素を指定してDOM操作タスクソースで要素タスクをキューに入れ、img要素でloadという名前のイベントを発火させます。
画像がフェッチされている間に、ネットワーキングタスクソースによってキューに入れられた次のタスクは、次のステップを実行する必要があります：
ユーザーエージェントがimage requestの画像の幅と高さを確認でき、image requestが保留中のリクエストである場合、image requestの状態を部分的に利用可能に設定します。
それ以外の場合、ユーザーエージェントがimage requestの画像の幅と高さを特定でき、かつimage requestが現在のリクエストである場合、img要素を指定してimage
requestをプレゼンテーション用に準備し、image
requestの
状態を部分的に利用可能に設定します。
それ以外の場合、ユーザーエージェントがimage requestの画像が致命的に破損していて、画像の寸法を取得できないことを確認でき、image requestが保留中のリクエストである場合、次のようにします：
それ以外の場合、ユーザーエージェントがimage requestの画像が致命的に破損していて、画像の寸法を取得できないことを確認でき、image requestが現在のリクエストである場合、次のようにします：
画像リクエストを中止します。
イベントを省略が設定されていない場合、またはpreviousURLがurlStringと等しくない場合、errorイベントをimg要素に発火します。
そのタスクと、それに続く各タスク（画像がフェッチされている間にimage requestが現在のリクエストである場合）、および各タスクがネットワーキングタスクソースによってキューに入れられるキューされる場合、適切に画像のプレゼンテーションを更新する必要があります（例: 画像がプログレッシブJPEGである場合、各パケットが画像の解像度を改善できます）。
さらに、リソースがフェッチされた後にネットワーキングタスクソースによってキューに入れられた最後のタスクは、追加で以下のステップを実行する必要があります：
image requestが保留中のリクエストである場合、画像リクエストを中止し、現在のリクエストに対して、保留中のリクエストを現在のリクエストにアップグレードし、プレゼンテーションのためにimage
requestを準備します。img要素に基づいて行います。
image requestを完全に利用可能な状態に設定します。
keyを使用して、利用可能な画像のリストに画像を追加し、上位レイヤーのキャッシングを無視するフラグを設定します。
maybe omit
eventsが設定されていない、またはpreviousURLがurlStringと等しくない場合、イベントを発火します。このイベントはloadという名前で、img要素で発生します。
画像データがサポートされているファイル形式ではない場合、ユーザーエージェントはimage
requestの状態を破損に設定し、現在のリクエストと保留中のリクエストの画像リクエストを中止し、image
requestが保留中のリクエストである場合は保留中のリクエストを現在のリクエストにアップグレードし、
そして、maybe omit
eventsが設定されていないか、previousURLがurlStringと等しくない場合は、img要素を指定してDOM操作タスクソースで要素タスクをキューに入れ、img要素でerrorという名前のイベントを発火させます。
画像リクエストを中止するとは、画像リクエストまたはnullのimage requestに対して、以下の手順を実行することを意味します:
image requestがnullの場合、終了します。
存在する場合は、image requestの画像データを忘れます。
image requestに対するフェッチアルゴリズムの実行を中止し、そのアルゴリズムによって生成された保留中のタスクを破棄します。
保留中のリクエストを現在のリクエストにアップグレードするとは、img要素に対して、以下の手順を実行することを意味します:
To prepare an image for presentation for an 画像リクエスト req given image element img:
Let exifTagMap be the EXIF tags obtained from req's 画像データ, as defined by the relevant codec. [EXIF]
Let physicalWidth and physicalHeight be the width and height obtained from req's 画像データ, as defined by the relevant codec.
Let dimX be the value of exifTagMap's tag 0xA002
(PixelXDimension).
Let dimY be the value of exifTagMap's tag 0xA003
(PixelYDimension).
Let resX be the value of exifTagMap's tag 0x011A
(XResolution).
Let resY be the value of exifTagMap's tag 0x011B
(YResolution).
Let resUnit be the value of exifTagMap's tag 0x0128
(ResolutionUnit).
If all the following are true:
dimX is a positive integer;
dimY is a positive integer;
resX is a positive floating-point number;
resY is a positive floating-point number;
physicalWidth × 72 / resX is dimX;
physicalHeight × 72 / resY is dimY;
resUnit is 2 (Inch),
then:
If req's 画像 データ is CORSクロスオリジン, then set img's 自然寸法 to dimX and dimY, and scale img's pixel data accordingly.
Otherwise, set req's 推奨密度補正寸法 to a struct with its width set to dimX and its height set to dimY.
Update req's img element's
presentation appropriately.
EXIFの解像度はCSSポイント/インチに相当するため、解像度からサイズを計算するための基準は72です。
画像がすでに表示された後にEXIFが到着した場合の扱いはまだ規定されていません。詳細はissue #4929を参照してください。
画像要素elに対してimgを指定して画像ソースを選択するには、以下の手順を実行します:
ソースセットsourceSetに対して画像ソースを選択するには、以下の手順を実行します:
文字列default source、文字列srcset、文字列sizes、および要素またはnullimgを指定してソースセットを作成するには、以下の手順を実行します:
特定のimgまたはlink要素elのソースセットを更新するよう求められた場合、ユーザーエージェントは以下の処理を行わなければなりません:
elementsを「el」に設定します。
elが親ノードがpicture要素であるimg要素の場合、elementsの内容をelの親ノードの子要素に置き換え、相対順序を保持します。
imgをelがimg要素である場合はelに、それ以外の場合はnullに設定します。
各childをelements内で次のように処理します:
childがelである場合:
default sourceを空文字列に設定します。
srcsetを空文字列に設定します。
sizesを空文字列に設定します。
それ以外の場合、elがlink要素であり、imagesrcset属性を持っている場合、その属性の値をsrcsetに設定します。
それ以外の場合、elがlink要素であり、imagesizes属性を持っている場合、その属性の値をsizesに設定します。
それ以外の場合、elがlink要素であり、href属性を持っている場合、その属性の値をdefault
sourceに設定します。
elのソースセットを、default source、srcset、sizes、およびimgを与えてソースセットを作成する結果に設定します。
終了します。
elがlink要素である場合、elementsにはelのみが含まれているため、このステップはすぐに実行され、アルゴリズムの残りの部分は実行されません。
child の srcset 属性を解析する と、返された source set を source set とします。
childのsizes属性を解析するをimgに対して実行し、source setのソースサイズを返された値に設定します。
childがwidthまたはheight属性を持っている場合、elの寸法属性ソースをchildに設定します。それ以外の場合は、elの寸法属性ソースをelに設定します。
elのソースセットをsource setに設定します。
終了します。
各img要素は、直前の兄弟source要素およびimg要素自体を考慮し、画像ソースを選択します。他の（無効な）要素、同じpicture要素内の他のimg要素、または該当するimg要素の後続の兄弟source要素は無視されます。
要素からsrcset属性を解析するように要求された場合、要素のsrcset属性の値を次のように解析します:
inputをこのアルゴリズムに渡された値とします。
positionをinput内のポインタとし、初期位置を文字列の先頭に設定します。
candidatesを最初は空のソースセットとします。
分割ループ: コードポイントのシーケンスを収集し、positionを指定してinputからspace-charactersまたはU+002C COMMA文字を収集します。U+002C COMMA文字が収集された場合、それは解析エラーです。
positionがinputの終わりを越えている場合、candidatesを返します。
コードポイントのシーケンスを収集するうち、ASCII 空白文字でないものをinputのpositionで与えられた位置から取得し、その結果をurlとする。
descriptorsを新しい空のリストとします。
urlがU+002C (,)で終わる場合:
urlからすべての末尾のU+002C COMMA文字を削除します。これで複数の文字が削除された場合、それは解析エラーです。
それ以外の場合:
ディスクリプタトークナイザ: ASCII空白文字をスキップし、inputとpositionを指定します。
current descriptorを空の文字列とします。
stateをin descriptorに設定します。
cをpositionでの文字とします。このステップでは、"EOF"はinputの終わりを超えた位置を表す特別な文字です。
cの値に応じて次の処理を行います:
current descriptorが空でない場合、それをdescriptorsに追加し、current descriptorを空の文字列に設定します。stateをafter descriptorに設定します。
positionをinput内の次の文字に進めます。current descriptorが空でない場合、それをdescriptorsに追加します。ディスクリプタパーサーのステップにジャンプします。
cをcurrent descriptorに追加します。stateをin parensに設定します。
current descriptorが空でない場合、それをdescriptorsに追加します。ディスクリプタパーサーのステップにジャンプします。
cをcurrent descriptorに追加します。
cの値に応じて次の処理を行います:
cをcurrent descriptorに追加します。stateをin descriptorに設定します。
current descriptorをdescriptorsに追加します。ディスクリプタパーサーのステップにジャンプします。
cをcurrent descriptorに追加します。
cの値に応じて次の処理を行います:
この状態のままにします。
ディスクリプタパーサーのステップにジャンプします。
stateをin descriptorに設定し、positionをinput内の前の文字に戻します。
positionをinput内の次の文字に進めます。このステップを繰り返します。
将来の追加に互換性を持たせるため、このアルゴリズムは複数のディスクリプタや括弧付きのディスクリプタをサポートします。
ディスクリプタパーサー: errorをnoとします。
widthをabsentとします。
densityをabsentとします。
future-compat-hをabsentとします。
descriptors内の各ディスクリプタについて、次のリストから適切なステップを実行します:
ユーザーエージェントがsizes属性をサポートしていない場合、errorをyesとします。
準拠するユーザーエージェントはsizes属性をサポートします。ただし、ユーザーエージェントは通常、機能を段階的に実装して出荷します。
widthとdensityの両方がabsentでない場合、errorをyesとします。
非負整数を解析するためのルールをディスクリプタに適用します。結果が0の場合、errorをyesとします。それ以外の場合、widthをその結果とします。
width、density、future-compat-hのすべてがabsentでない場合、errorをyesとします。
浮動小数点数値を解析するためのルールをディスクリプタに適用します。結果が0未満の場合、errorをyesとします。それ以外の場合、densityをその結果とします。
densityが0の場合、自然な寸法が無限大になります。ユーザーエージェントは、画像がどれだけ大きく表示されるかに制限があると予想されます。
これは解析エラーです。
future-compat-hとdensityの両方がabsentでない場合、errorをyesとします。
非負整数を解析するためのルールをディスクリプタに適用します。結果が0の場合、errorをyesとします。それ以外の場合、future-compat-hをその結果とします。
errorをyesとします。
future-compat-hがabsentでなく、widthがabsentの場合、errorをyesとします。
errorがnoのままであれば、新しい画像ソースをcandidatesに追加します。そのURLがurlであり、幅がabsentでない場合はwidth、ピクセル密度がabsentでない場合はdensityに関連付けられています。それ以外の場合、解析エラーが発生します。
分割ループのステップに戻ります。
要素elementから、img要素またはnullimgを指定してsizes属性を解析するように要求された場合:
unparsed sizes listを、elementのsizes属性の値からコンマ区切りのコンポーネント値リストを解析した結果とします（属性が存在しない場合は空の文字列）。[CSSSYNTAX]
sizeをnullとします。
unparsed sizes list内の各unparsed sizeについて:
unparsed sizeの末尾からすべての連続する<whitespace-token>を削除します。unparsed sizeが空になった場合、それは解析エラーです。続行します。
もしunparsed sizeの最後のコンポーネント値が有効な非負の<source-size-value>である場合、その値をsizeに設定し、unparsed sizeからコンポーネント値を削除します。数学関数以外のCSS関数は無効です。それ以外の場合は解析エラーが発生し、続行します。
もしsizeがautoであり、imgがnullでなく、imgがレンダリングされている場合、そしてimgが自動サイズを許可する場合、sizeをimgの具体的なオブジェクトサイズの幅（CSSピクセル）に設定します。
もしsizeがまだautoである場合、それは無視されます。
unparsed sizeの末尾からすべての連続する<whitespace-token>を削除します。unparsed sizeが空になった場合:
残りのコンポーネント値をunparsed sizeで<メディア条件>として解析します。正しく解析されなかった場合、または正しく解析されたが<メディア条件>がfalseに評価された場合、続行します。[MQ]
もしsizeがautoでない場合、そのsizeを返します。それ以外の場合は続行します。
100vwを返します。
裸の<source-size-value>（<長さ>）を（<メディア条件>を伴わずに）<source-size-list>のエントリとして使用することは無効ですが、解析アルゴリズムは、リストの任意の時点でそれを受け入れ、リストの先行するエントリが使用されていなかった場合に、すぐにそのサイズを受け入れます。これは将来の拡張を可能にし、単純な著者エラー（最後のコンマのようなもの）から保護するためです。裸のautoキーワードは、レガシーユーザーエージェントへのフォールバックを提供するために、他のエントリを後に続けることが許可されています。
画像ソースには、ピクセル密度記述子、幅記述子、またはURLに付随する記述子がない場合があります。ソースセットを正規化すると、すべての画像ソースにピクセル密度記述子が与えられます。
あるソースセットの密度を正規化するように要求された場合、ユーザーエージェントは次の操作を行う必要があります:
ユーザーエージェントは、環境の変化に反応するために、img要素の画像を更新するための以下のアルゴリズムをいつでも実行できます。（ユーザーエージェントは、このアルゴリズムを実行することを義務付けられているわけではありません。たとえば、ユーザーがページを見ていない場合、環境が再び変化する可能性があるため、どの画像を使用するかを判断する前に、ユーザーがページに戻るまで待つかもしれません。）
ユーザーがビューポートのサイズを変更したとき（例：ウィンドウのサイズ変更やページのズーム変更）、およびimg要素がドキュメントに挿入されたときに、このアルゴリズムを実行することが推奨されます。これにより、新しいビューポートに一致するように、密度補正された自然な幅と高さが一致し、アートディレクションが関係する場合に適切な画像が選択されます。
安定状態を待つ。同期セクションは、このアルゴリズムの残りのステップ全体で構成されます。このアルゴリズムが同期セクションが終了したと指示するまでです。（同期セクションのステップは、⌛でマークされています。）
⌛ もし img
要素が
srcset
または picture を使用せず、その ノードドキュメント が 完全にアクティブ でなく、リソースタイプが multipart/x-mixed-replace
の画像データを持つ、またはその 保留中のリクエスト
が
null でない場合、終了する。
⌛ 画像ソースを選択することにより、結果として得られるURLとピクセル密度をそれぞれselected sourceおよびselected pixel densityとします。
⌛ selected sourceがnullの場合は終了します。
⌛ selected sourceとselected pixel densityが要素の最後に選択されたソースおよび現在のピクセル密度と同じ場合は、終了します。
⌛ selected sourceを、要素のノードドキュメントに対してURLのエンコード、パース、およびシリアライズを行う結果として得られるurlStringとします。
⌛ urlStringが失敗した場合、終了します。
⌛ corsAttributeStateを要素のcrossoriginコンテンツ属性の状態とします。
⌛ clientをimg要素のノードドキュメントの関連設定オブジェクトとします。
⌛ keyをurlString、corsAttributeState、およびcorsAttributeStateがNo CORSでない場合のoriginからなるタプルとします。
⌛ 要素の 保留中のリクエスト を image request に設定する。
もし利用可能な画像のリストにkeyのエントリが含まれている場合、image requestの画像データをそのエントリのデータに設定します。次のステップに進みます。
それ以外の場合:
requestを潜在的CORSリクエストを作成する結果として得られるものとし、urlString、「image」、およびcorsAttributeStateを設定します。
request の client を client
に設定し、request の initiator を "imageset"
に設定し、request の synchronous
flag を設定する。
requestのリファラーポリシーを要素のreferrerpolicy属性の現在の状態に設定します。
requestの優先度を要素のfetchpriority属性の現在の状態に設定します。
requestの結果をフェッチの結果とします。
もし response の unsafe response が ネットワークエラー
であるか、または 画像スニッフィング規則
によって画像フォーマットがサポートされていないと判断される場合、あるいはユーザーエージェントが image request
の画像が致命的に破損していて画像の寸法を取得できないと判断した場合、またはリソースタイプが multipart/x-mixed-replace
である場合には、pending
request を null
に設定し、これらの手順を中止する。
それ以外の場合、responseの不安全な応答がimage requestの画像データとなります。それはCORS同一オリジンまたはCORSクロスオリジンのいずれかであり、これは他のAPIとの画像の相互作用に影響します（例：canvasで使用される場合）。
次のステップを使用して、img要素に対して要素タスクをキューに入れます:
もし img
要素がこのアルゴリズム開始以降に 関連する変異 を経験している場合、pending
request を null に設定し、これらの手順を中止する。
img
要素の last
selected source を
selected source に、img
要素の current
pixel density を
selected pixel density に設定する。
image request の state を completely available に設定する。
キー key を使って画像を list of available images に追加し、ignore higher-layer caching フラグを設定する。
Prepare image
request for presentation を img
要素を考慮して実行する。
Fire an
event 名前を load
として
img
要素に対して発火する。
特に指定がない限り、alt属性は指定されなければならず、その値は空であってはなりません。値は画像の適切な代替となるものでなければなりません。alt属性の具体的な要件は、以下のセクションで説明するように、画像が何を表現することを意図しているかに依存します。
代替テキストを書く際に考慮すべき最も一般的なルールは次のとおりです: すべての画像をそのalt属性のテキストに置き換えても、ページの意味が変わらないようにすることです。
したがって、一般的には、画像を含めることができなかった場合にどのように記述したかを考えることで、代替テキストを書くことができます。
このことから派生するのは、alt属性の値には、画像のキャプション、タイトル、または凡例と見なされる可能性のあるテキストを含めるべきではないということです。それは、画像の代わりにユーザーが使用できる代替テキストを含むべきであり、画像を補完するためのものではありません。補足情報にはtitle属性を使用できます。
もう一つの派生事項として、alt属性の値は、画像の横にある文章ですでに提供されている情報を繰り返してはなりません。
代替テキストを考える一つの方法は、画像が存在することに言及せずに、電話で誰かにページを読み上げる方法を考えることです。画像の代わりに言うことは、代替テキストを書く際の良い出発点となります。
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 > 時には、フローチャート、図、グラフ、または道順を示す簡単な地図のように、グラフィカルな形式で表現した方がより明確になることがあります。このような場合、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 > "Photo of white house with boarded door"のようなテキストも同様に悪い代替テキストとなります（ただし、これはtitle属性や、figcaption要素を持つfigureに適している場合があります）。
ドキュメントには、アイコン形式で情報を含めることができます。アイコンは、ビジュアルブラウザのユーザーが一目で機能を認識できるようにすることを意図しています。
場合によっては、アイコンが同じ意味を伝えるテキストラベルを補完するものとなっています。その場合、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 >< 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 > この例は、画像が表示されていない場合に、代替テキストが使用され、最初から画像がなかったかのように、テキストが周囲のテキストにシームレスに流れるように代替テキストが書かれるべきであることを示しています。
時には、画像がテキストだけで構成されており、その画像の目的は実際の書体効果を強調することではなく、単にテキストそのものを伝えることです。
そのような場合、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!同じ目的を果たすことができる場合には、文字が使用されるべきです。例えば、装飾があるためにテキストで直接表現できない場合や、適切な文字が存在しない場合（外字の場合のように）、画像を使用することが適切です。
作成者がシステムのデフォルトフォントが特定の文字をサポートしていないために画像を使用したくなる場合、ウェブフォントは画像よりも優れた解決策です。
多くの場合、画像は実際には補足的なものであり、その存在は単に周囲のテキストを強調するためのものです。このような場合、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 > 時には、画像がコンテンツにとって重要ではないものの、純粋に装飾的でもなく、テキストと完全に重複しているわけでもない場合があります。このような場合、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 > 画像が装飾的であるが、特にページ固有のものでない場合（例えば、サイト全体のデザインスキームの一部を構成する画像など）、その画像はドキュメントのマークアップではなく、サイトのCSSで指定されるべきです。
しかし、周囲のテキストで言及されていないが、それでもある程度の関連性がある装飾的な画像は、img要素を使用してページに含めることができます。このような画像は装飾的ですが、それでもコンテンツの一部を形成しています。このような場合、alt属性は存在しなければならず、その値は空の文字列でなければなりません。
画像が関連性があるにもかかわらず純粋に装飾的である例としては、バーニングマンのイベントについてのブログ記事に掲載されたブラックロックシティの風景写真や、詩を朗読するページに掲載されたその詩に触発された絵画の画像などが挙げられます。以下のスニペットは、後者のケースの例を示しています（このスニペットには最初の詩節のみが含まれています）：
< 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 > 画像が小さな画像ファイルに分割され、それらが再び組み合わさって完全な画像を形成する場合、その画像の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 > 一般的には、リンク用に画像をスライスする代わりに、イメージマップを使用するべきです。
しかし、画像が実際にスライスされ、スライスされた画像のいずれかがリンクの唯一の内容となっている場合、リンクごとに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 > 場合によっては、画像がコンテンツの重要な部分を占めることがあります。例えば、フォトギャラリーの一部であるページの場合、その画像がページ全体の要点であることがあります。
コンテンツの重要な部分である画像に対して代替テキストを提供する方法は、画像の出自に依存します。
詳細な代替テキストを提供できる場合、例えば、雑誌のレビューにおけるスクリーンショットの一部、漫画の一部、またはその写真に関するブログエントリの写真などの場合、その画像の代わりとなるテキストをalt属性の内容として提供する必要があります。
新しいOSのスクリーンショットギャラリーで、代替テキストが付いたスクリーンショット:
< figure >
< img src = "KDE%20Light%20desktop.png"
alt = "デスクトップは青で、左側にシステム、ホーム、K-Mailなどと
いったアイコンが2列に並んでいます。ウィンドウが開かれており、メニューが
ウィンドウに収まりきらない場合、次の行に折り返されることが示されています。
ウィンドウには上部にアイコンのリストがあり、その下にアドレスバーがあり、
左側にはタブ用のアイコンのリスト、下部にはステータスバーがあり、中央には
2つのペインがあります。デスクトップには画面下部にいくつかのボタン、ペイジャー、
開いているアプリケーションのリスト、および時計が配置されています。" >
< figcaption > KDEデスクトップのスクリーンショット。</ figcaption > 財務報告書のグラフ:
< img src = "sales.gif"
title = "売上グラフ"
alt = "1998年から2005年にかけて、各年の売上増加率は次の通りです: 624%、75%、138%、40%、35%、9%、21%" > 「売上グラフ」は、売上グラフにとって不十分な代替テキストであることに注意してください。キャプションとして適したテキストは、一般的に代替テキストとして適していません。
場合によっては、画像の性質上、詳細な代替テキストを提供することが実際には難しいことがあります。例えば、画像が不明瞭であったり、複雑なフラクタルであったり、詳細な地形図である場合です。
このような場合でも、alt属性には適切な代替テキストが含まれている必要がありますが、多少簡潔なものでも構いません。
場合によっては、画像を適切に説明できるテキストが存在しないことがあります。例えば、ロールシャッハのインクブロットテストを有効に説明できるテキストはほとんどありません。しかし、簡潔であっても、何もないよりは良いです:
< figure >
< img src = "/commons/a/a7/Rorschach1.jpg" alt = "左右対称で縁が不明瞭な形状、中央に小さな隙間、中央から少しずれたところに2つの大きな隙間、その下に似た隙間が2つあります。輪郭は上半分が下半分よりも広く、側面は中央よりも上に伸び、中央は側面よりも下に伸びています。" >
< figcaption > ロールシャッハ・インクブロットテストの最初の10枚のカードのうちの1枚の黒い輪郭。</ figcaption > 以下のような代替テキストの使用は非常に悪い例です:
<!-- この例は間違っています。コピーしないでください。 -->
< figure >
< img src = "/commons/a/a7/Rorschach1.jpg" alt = "ロールシャッハ・インクブロットテストの最初の10枚のカードのうちの1枚の黒い輪郭。" >
< figcaption > ロールシャッハ・インクブロットテストの最初の10枚のカードのうちの1枚の黒い輪郭。</ figcaption >
</ figure > このようにキャプションを代替テキストに含めることは有用ではありません。画像を表示できないユーザーに対してキャプションを二重に提供することになり、1回だけキャプションを読んだり聞いたりするよりも助けになりません。
フラクタルなど、定義上無限の詳細を持つ画像も、完全な説明が難しい例です。
以下の例は、マンデルブロ集合の画像全体に対して代替テキストを提供する方法の一例です。
< img src = "ms1.jpeg" alt = "マンデルブロ集合は、正の方向にある実軸上の尖点を持つ心臓型で、負の方向に接触する小さな球体が同じ中心線に沿って配置されており、これら2つの形状がさまざまなサイズの小さな球体に囲まれています。" > 同様に、例えば伝記に掲載されている人物の顔写真なども、コンテンツにとって非常に重要であると考えられることがありますが、完全に代替できるテキストを提供するのは難しいことがあります:
< section class = "bio" >
< h1 > アイザック・アシモフの伝記</ h1 >
< p > アイザックは1920年にアイザック・ユードヴィッチ・オズィモフとして生まれ、非常に多作な作家でした。</ p >
< p >< img src = "headpics/asimov.jpeg" alt = "アイザック・アシモフは黒髪で、高い額とメガネをかけていました。後年には、長い白いもみあげをしていました。" ></ p >
< p > アシモフはロシアで生まれ、3歳のときに米国に移住しました。</ p >
</ p > ...</ p >
</ section > このような場合、代替テキストに画像自体の存在に言及する必要はなく（むしろ避けるべきです）、そのようなテキストはブラウザ自体が画像の存在を報告することと重複するためです。例えば、「アイザック・アシモフの写真」という代替テキストを使用した場合、準拠したユーザーエージェントは「（画像）アイザック・アシモフの写真」と読み上げるかもしれず、「（画像）アイザック・アシモフは黒髪で、高い額とメガネをかけていました…」のほうが有用です。
残念ながら、代替テキストがまったく提供されない場合もあります。例えば、画像が自動的に取得され、関連する代替テキストが提供されていない場合（例：ウェブカメラ）や、ユーザーが提供した画像を使用してページがスクリプトで生成されるが、ユーザーが適切な代替テキストを提供しなかった場合（例：写真共有サイト）や、著者自体が画像の内容を知らない場合（例：盲目の写真家がブログに画像を共有する場合）などです。
このような場合、alt属性は省略しても構いませんが、次の条件のいずれかを満たす必要があります。
img要素がfigure要素内にあり、figcaption要素がfigure要素の中で唯一のコンテンツであり、その中にimg要素が存在していること。
title属性が存在し、その値が空でないこと。
title属性に依存することは現在は推奨されていません。多くのユーザーエージェントは、マウスなどのポインティングデバイスが必要であるため、この属性を仕様で求められるようにアクセシブルに公開していない場合があります。これは、キーボードのみのユーザーや、現代の電話やタブレットを使用しているタッチユーザーなど、特定のユーザーにとっては困難です。
このようなケースは可能な限り最小限に抑える必要があります。著者が実際に代替テキストを提供できる可能性がわずかでもある場合には、alt属性を省略することは許されません。
写真共有サイトで、サイトがキャプション以外のメタデータを持たずに画像を受け取った場合、そのようにマークアップできます:
< figure >
< img src = "1100670787_6a7c664aef.jpg" >
< figcaption > 私たちと一緒にどこへでも旅したバブルス。</ figcaption >
</ figure > ただし、画像の重要な部分について詳細な説明をユーザーから取得し、ページに含めるのが望ましいです。
盲目のユーザーのブログに、ユーザーが撮影した写真が表示されている場合です。最初は、ユーザーが撮影した写真が何を示しているかがわからないかもしれません:
< article >
< h1 > 私は写真を撮りました</ h1 >
< p > 今日は外出して写真を撮りました！</ p >
< figure >
< img src = "photo2.jpeg" >
< figcaption > 私のポーチから盲目的に撮影された写真。</ figcaption >
</ figure >
</ article > その後、ユーザーが友人から画像の説明を得て、代替テキストを含めることができるようになります:
< article >
< h1 > 私は写真を撮りました</ h1 >
< p > 今日は外出して写真を撮りました！</ p >
< figure >
< img src = "photo2.jpeg" alt = "写真には、私の屋根の縁から吊り下げられているリスの餌箱が写っています。餌箱は半分しか満たされておらず、リスは見当たりません。背景には、ぼやけた木々が写っています。餌箱は木製で、金属製の格子があり、中にはピーナッツが入っています。屋根の縁も木製で、白く塗られ、青い縞模様が入っています。" >
< figcaption > 私のポーチから盲目的に撮影された写真。</ figcaption >
</ article >
場合によっては、画像の要点がテキスト説明が利用できないことであり、ユーザーが説明を提供する必要がある場合もあります。例えば、CAPTCHA画像の要点は、ユーザーがグラフィックを実際に読むことができるかどうかを確認することです。以下はCAPTCHAをマークアップする方法の一例です（title属性に注意してください）:
< p >< label > この画像には何が書かれていますか？
< img src = "captcha.cgi?id=8934" title = "CAPTCHA" >
< input type = text name = captcha ></ label >
(画像が表示できない場合は、< a href = "?audio" > 音声テスト</ a > を使用できます。)</ p > 別の例として、画像を表示して代替テキストを求めるソフトウェアがあり、その目的は正しい代替テキストを提供するページを作成することです。このようなページには、次のように画像の表が含まれることがあります:
< table >
< thead >
< tr > < th > 画像 < th > 説明
</ tbody >
< tr >
< td > < img src = "2421.png" title = "画像640x100、ファイル名 'banner.gif'" >
< td > < input name = "alt2421" >
</ tr >
< td > < img src = "2422.png" title = "画像200x480、ファイル名 'ad3.gif'" >
< td > < input name = "alt2422" >
</ table > この例でも、可能な限り有用な情報がtitle属性に含まれていることに注意してください。
一部のユーザーは、画像をまったく使用できない場合があります（例：非常に遅い接続のため、テキストのみのブラウザを使用しているため、ハンズフリーの自動車音声ウェブブラウザでページが読み上げられているため、単に視覚障害があるためなど）。したがって、上記の例のように代替テキストが利用できず、提供できない場合にのみ、alt属性を省略することが許可されます。著者の努力不足は、alt属性を省略する正当な理由ではありません。
一般的に、著者はimg要素を画像表示以外の目的で使用することを避けるべきです。
もしimg要素が、例えばページビューをカウントするサービスの一部として画像表示以外の目的で使用される場合、alt属性は空の文字列にする必要があります。
そのような場合、width属性とheight属性は両方ともゼロに設定すべきです。
このセクションは、公開アクセス可能なドキュメントや、著者が個人的に知らない可能性のあるターゲットオーディエンスを持つドキュメント（例えばウェブサイト上のドキュメント、公開メールリストに送信されたメール、ソフトウェアドキュメントなど）には適用されません。
特定の人物に向けたプライベートなコミュニケーション（HTMLメールなど）で、その人物が画像を表示できることがわかっている場合には、alt属性を省略することができます。ただし、そのような場合でも、ユーザーが画像をサポートしないメールクライアントを使用した場合や、ドキュメントが他のユーザーに転送された場合に備えて、適切な代替テキストを含めることが強く推奨されます。
マークアップジェネレーター（WYSIWYGオーサリングツールなど）は、可能な限りユーザーから代替テキストを取得する必要があります。しかし、多くの場合、これが不可能であることも認識されています。
リンクの唯一の内容である画像の場合、マークアップジェネレーターはリンク先のタイトルやURLを調べ、得られた情報を代替テキストとして使用する必要があります。
キャプションがある画像については、マークアップジェネレーターはfigureおよびfigcaption要素、またはtitle属性を使用して画像のキャプションを提供する必要があります。
最終手段として、実装者は、画像が周囲のコンテンツに特有であるが情報を追加しない純粋に装飾的な画像であると想定してalt属性を空の文字列に設定するか、画像がコンテンツの重要な部分であると想定してalt属性をまったく省略する必要があります。
マークアップジェネレーターは、代替テキストを取得できなかったimg要素に対してgenerator-unable-to-provide-required-alt
これは、最先端の自動適合チェッカーが偽の代替テキストと正しい代替テキストを区別できないために、マークアップジェネレーターが適合チェッカーを黙らせるためだけに偽の代替テキストを提供するという更に悪質なエラーに置き換える圧力を避けることを目的としています。
マークアップジェネレーターは、一般に画像自体のファイル名を代替テキストとして使用することを避けるべきです。同様に、マークアップジェネレーターはプレゼンテーションユーザーエージェント（例：ウェブブラウザ）にも同様に利用可能なコンテンツから代替テキストを生成することを避けるべきです。
これは、ページが生成されると通常は更新されませんが、その後にページを読み取るブラウザはユーザーによって更新される可能性があるため、ブラウザはページを生成したときのマークアップジェネレーターよりも、より最新で精緻化されたヒューリスティックを持っている可能性が高いためです。
適合チェッカーは、次の条件のいずれかが該当しない限り、alt属性の欠如をエラーとして報告しなければなりません:
適合チェッカーが、ドキュメントが画像を表示できることがわかっている特定の人物に向けたメールまたはドキュメントであると仮定するように設定されている場合。
img要素が、値が空の文字列であるgenerator-unable-to-provide-required-alt属性（適合していない属性）を持つ場合。alt属性が欠如していることをエラーとして報告しない適合チェッカーは、空のgenerator-unable-to-provide-required-alt属性の存在もエラーとして報告してはなりません（この場合、ドキュメントが適合しているわけではなく、ジェネレーターが適切な代替テキストを決定できなかったことを示しています。検証者はこの場合エラーを示す必要はありませんが、そのようなエラーは、マークアップジェネレーターが検証者を黙らせるためだけに偽の代替テキストを含めることを促す可能性があるためです。自然に、適合チェッカーはalt属性が欠如していることをエラーとして報告する場合もあります。例えば、マークアップジェネレーターの使用の結果としてほぼ必然的に発生するエラーであっても、すべての適合エラーを報告するオプションをユーザーに提供することができます。）
iframe要素
すべての現行エンジンでサポートされています。
すべての現行エンジンでサポートされています。
Support in all current engines.
Support in all current engines.
Support in all current engines.
src — リソースのアドレス
srcdoc — iframe内に表示するドキュメント
name — ナビゲーション可能なコンテンツの名前
sandbox —
ネストされたコンテンツのセキュリティルール
allow — Permissions
policyを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属性も指定する必要があります。
すべての現行エンジンでサポートされています。
srcdoc
属性は、その要素のナビゲーション可能なコンテンツを含むべきページの内容を指定します。この属性の値は、構築に使用されます。iframe srcdocドキュメントを構成するDocumentのURLは、about:srcdocと一致します。
srcdoc
属性が存在する場合、その値はHTML構文を使用し、以下の構文要素を順番に含む必要があります:
html形式の要素。
上記の要件はXMLドキュメントにも適用されます。
ここでは、ブログがsrcdoc
属性をsandbox属性と組み合わせて使用し、この機能をサポートするユーザーエージェントのユーザーに、ブログ投稿コメントにおけるスクリプトインジェクションからの保護のための追加の保護層を提供しています:
< article >
< h1 > 私は自分の雑誌を手に入れました！</ h1 >
< p > 多くの努力の末、ついに出版社を見つけ、今や自分の雑誌を持っています！素晴らしいでしょ？！9月に最初の号が発行され、食べ物を手に入れる方法や、箱に入る方法に関する記事があります。とても素晴らしいです！</ p >
< footer >
< p > 執筆者 < a href = "/users/cap" > cap</ a > , 1時間前。
</ footer >
</ article >
< footer > 13分前、< a href = "/users/ch" > ch</ a > は書いた: </ footer >
< iframe sandbox srcdoc = "<p>カバー写真はもう撮れましたか？" ></ iframe >
</ article >
< article >
< footer > 9分前、< a href = "/users/ch" > ch</ a > は書いた: </ footer >
< iframe sandbox srcdoc = "<p>ええ、私のギャラリーで見られます <a href="/gallery?mode=cover&amp;page=1">ここ</a>で。" ></ iframe >
</ article >
< article >
< footer > 5分前、< a href = "/users/ch" > ch</ a > は書いた: </ footer >
< iframe sandbox srcdoc = "<p>それはアールのテーブルです。<p>次号の表紙にはアール&amp;私を載せるべきです。" ></ iframe >
</ article > 引用符がどのようにエスケープされなければならないか（さもなければsrcdoc属性が早期に終了してしまう）、およびサンドボックス化されたコンテンツで言及される生のアンパサンド（例えばURLやプローズ内で）がどのように二重にエスケープされる必要があるかに注意してください—一度目は元の解析時にアンパサンドが保持されるため、二度目はサンドボックス化されたコンテンツを解析する際にアンパサンドが誤解釈されないようにするためです。
さらに、DOCTYPEがiframe
srcdocドキュメントではオプションであり、html、head、およびbody要素には開始タグと終了タグが省略可能であり、title要素もiframe
srcdocドキュメントではオプションであることに注意してください。そのため、srcdoc属性内のマークアップは、ドキュメント全体を表現しているにもかかわらず、比較的簡潔にすることができます。これは、body要素の内容のみが文法に直接記述される必要があり、他の要素は暗黙的に存在しているからです。
HTML構文では、著者はU+0022引用符文字（"）を使用して属性の内容を囲み、その後にすべてのU+0026アンパサンド（&）およびU+0022引用符（"）文字をエスケープし、さらに安全なコンテンツ埋め込みを保証するためにsandbox属性を指定することを覚えておくだけで済みます。（引用符の前にアンパサンドをエスケープし、引用符が"となり、&quot;にならないようにすることを忘れないでください。）
XMLでは、U+003C小なり記号（<）もエスケープする必要があります。属性値の正規化を防ぐために、XMLのいくつかの空白文字、特にU+0009タブ（tab）、U+000Aラインフィード（LF）、およびU+000Dキャリッジリターン（CR）もエスケープする必要があります。[XML]
src属性とsrcdoc属性が両方指定されている場合、srcdoc属性が優先されます。これにより、srcdoc属性をサポートしないレガシーユーザーエージェントのために、フォールバックURLを提供できます。
insertedNode を指定したiframe HTML要素接続後ステップは次のとおりです。
insertedNode のために新しい子ナビゲーション可能オブジェクトを作成します。
insertedNode がsandbox属性を持つ場合、属性の値とinsertedNodeのiframeサンドボックスフラグセットを指定して、サンドボックスディレクティブを解析します。
initialInsertion
をtrueに設定して、insertedNode のiframe属性を処理します。
iframeのHTML要素削除ステップは、removedNodeを指定して子ナビゲーブルを破壊することです。
これは、unloadイベントが発生せずに行われます
（要素のコンテンツドキュメントは破壊されますが、unloadされるわけではありません）。
iframeはシャドウツリー内で処理されますが、
上記に従い、その動作のいくつかの側面はシャドウツリーに関して明確に定義されていません。詳細はissue
#763を参照してください。
iframe
要素に非nullのナビゲーション可能なコンテンツがあり、
srcdoc属性が設定、変更、または削除された場合、
ユーザーエージェントはiframe属性を処理しなければなりません。
同様に、非nullのナビゲーション可能なコンテンツを持ち、srcdoc属性が指定されていないiframe要素において、
src属性が設定、変更、または削除された場合、
ユーザーエージェントはiframe属性を処理しなければなりません。
elementに対してiframe属性を処理するには、
任意のブール値initialInsertion
（デフォルトはfalse）を指定します:
もしelementのsrcdoc
属性が
指定されている場合:
elementの現在のナビゲーションは遅延ロードされていたブール値をfalseに設定します。
要素を遅延ロードするかどうかのステップをelementに対して実行し、trueを返す場合は:
elementの遅延ロード再開ステップを、このアルゴリズムのsrcdocリソースへナビゲートというラベルのステップから始めるように設定します。
elementの現在のナビゲーションは遅延ロードされていたブール値をtrueに設定します。
elementのために遅延ロード要素のインターセクション監視を開始します。
終了します。
srcdocリソースへナビゲート: element、about:srcdoc、空文字列、およびelementのsrcdoc属性の値を指定してiframeまたはframeをナビゲートします。
生成されたDocumentはiframe
srcdocドキュメントと見なさなければなりません。
それ以外の場合:
elementとinitialInsertionを指定してiframeおよびframe要素の共有属性処理ステップを実行し、その結果をurlに設定します。
もしurlがnullであれば、終了します。
urlがabout:blankと一致し、initialInsertionがtrueである場合:
elementを指定してiframeロードイベントステップを実行します。
終了します。
elementのreferrerpolicy
コンテンツ属性の現在の状態をreferrerPolicyに設定します。
elementの現在のナビゲーションは遅延ロードされていたブール値をfalseに設定します。
要素を遅延ロードするかどうかのステップをelementに対して実行し、trueを返す場合:
elementの遅延ロード再開ステップを、このアルゴリズムのnavigateというラベルのステップから始めるように設定します。
elementの現在のナビゲーションは遅延ロードされていたブール値をtrueに設定します。
elementのために遅延ロード要素のインターセクション監視を開始します。
終了します。
ナビゲート: element、url、およびreferrerPolicyを指定してiframeまたはframeをナビゲートします。
elementおよびブール値initialInsertionを指定してiframeおよびframe要素の共有属性処理ステップを実行するには:
urlをURLレコードのabout:blankに設定します。
elementにsrc属性が指定されており、その値が空文字列でない場合:
その属性の値をelementのノードドキュメントに対して相対的にURLをエンコーディングして解析します結果をmaybeURLに設定します。
もしmaybeURLが失敗でない場合、urlをmaybeURLに設定します。
elementのノードナビゲーブルの包括的先祖ナビゲーブルに、urlを等しいと見なせるアクティブドキュメントを持つナビゲーブルが含まれている場合、nullを返します。
urlがabout:blankと一致し、 initialInsertionがtrueである場合、elementのナビゲーション可能なコンテンツのアクティブドキュメントとurlを指定してURLおよび履歴更新ステップを実行します。
これは、urlがabout:blank?fooのようなものである場合に必要です。もしurlが単なるabout:blankである場合、これは何もしません。
urlを返します。
要素 element、URL url、リファラーポリシー referrerPolicy、オプションの文字列または null の
srcdocString（デフォルトは null）、およびオプションのブール値 initialInsertion（デフォルトは false）を指定して iframe または frame をナビゲートする には：
historyHandlingを"auto"に設定します。
elementのナビゲーション可能なコンテンツのアクティブドキュメントが完全にロードされていない場合、
historyHandlingを"replace"に設定します。
もしelementがiframeである場合、
elementの保留中のリソースタイミング開始時間を
elementのノードドキュメントの関連するグローバルオブジェクトを指定して現在の高解像度時間に設定します。
element のコンテンツナビゲーション可能を url へ、element のノードドキュメントを使用してナビゲートします。historyHandling は historyHandling に、referrerPolicy は referrerPolicy に、documentResource は srcdocString に、そして initialInsertion は initialInsertion に設定します。
各Documentにはiframeロード進行中フラグとiframeロードミュートフラグがあります。Documentが作成されたとき、これらのフラグはそのDocumentに対して未設定でなければなりません。
elementを指定してiframeロードイベントステップを実行するには:
アサート: elementのナビゲーション可能なコンテンツがnullでないこと。
childDocumentをelementのナビゲーション可能なコンテンツのアクティブドキュメントに設定します。
もしchildDocumentがそのiframeロードミュートフラグを設定している場合、終了します。
elementの保留中のリソースタイミング開始時間が nullでない場合:
elementのノードドキュメントの 関連するグローバルオブジェクトをglobalに設定します。
globalを指定してフェッチタイミング情報を新たに作成し、 開始時間をelementの 保留中のリソースタイミング開始時間 に設定し、応答終了時間を globalを指定して現在の高解像度時間に設定します。
fallbackTimingInfo、url、
"iframe"、
global、空文字列、新しい
応答本文情報、および0を指定してリソースタイミングをマークします。
elementの保留中のリソースタイミング開始時間 をnullに設定します。
childDocumentのiframeロード進行中フラグを設定します。
childDocumentのiframeロード進行中フラグを解除します。
これは、スクリプティングと組み合わせることで、ローカルネットワークのHTTPサーバーのURLスペースを探索するために使用できます。ユーザーエージェントは、この攻撃を軽減するために、上記よりも厳しいクロスオリジンアクセス制御ポリシーを実装することがありますが、残念ながらそのようなポリシーは通常、既存のウェブコンテンツとの互換性がありません。
要素タイプがロードイベントを遅延させる可能性がある場合、そのタイプの各要素elementについて、ユーザーエージェントは、elementのナビゲーション可能なコンテンツが非nullであり、次のいずれかが当てはまる場合、そのelementのノードドキュメントのロードイベントを遅延させます:
elementのナビゲーション可能なコンテンツのアクティブドキュメントがロード後のタスクの準備ができていない;
elementのナビゲーション可能なコンテンツのloadイベントを遅延させるモードが
trueである;または
何かがelementのナビゲーション可能なコンテンツのアクティブドキュメントのロードイベントを遅延させています。
elementのナビゲーション可能なコンテンツが再びナビゲートされると、loadイベントの処理中にそのロードイベントがさらに遅延します。
iframe
要素には、
現在のナビゲーションが遅延ロードされたブール値が関連付けられており、初期状態ではfalseです。これは、iframe属性を処理するアルゴリズムで設定および解除されます。
iframe
要素の
現在のナビゲーションが遅延ロードされたブール値がfalseの場合、その要素はロードイベントを遅延させる可能性があります。
iframe
要素には、
nullまたはDOMHighResTimeStamp保留中のリソースタイミング開始時間が関連付けられており、初期状態ではnullに設定されています。
要素が作成されたとき、srcdoc属性が設定されておらず、
src属性が
設定されていないか、設定されていてもその値が解析できない場合、
要素のナビゲーション可能なコンテンツは、初期のabout:blankのDocumentに留まります。
ユーザーがこのページからナビゲートした場合、
iframeのナビゲーション可能なコンテンツのアクティブWindowProxyオブジェクトは新しいWindowオブジェクトを新しいDocumentオブジェクトにプロキシしますが、src属性は変更されません。
name属性が存在する場合、その値は有効なナビゲーションターゲット名でなければなりません。指定された値は、コンテンツナビゲーションが存在する場合に、その要素の名前として使用されます。
すべての現行エンジンでサポートされています。
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キーワードがないと、コンテンツは常にクロスオリジンとして扱われ、クロスオリジンコンテンツはシンプルダイアログを表示できません。
allow-scriptsとallow-same-originキーワードを、埋め込まれたページがページコンテンツと同一オリジンである場合に一緒に設定すると、埋め込まれたページは単にsandbox属性を削除して自分自身をリロードするだけで、事実上サンドボックスを完全に回避することができます。
これらのフラグは、iframe要素のコンテンツナビゲーブルがナビゲートされるときにのみ効果を発揮します。これらを削除したり、sandbox属性全体を削除しても、すでにロードされているページには影響を与えません。
潜在的に危険なファイルは、iframe要素を含むファイルと同じサーバーから提供されるべきではありません。攻撃者がユーザーを直接その悪意のあるコンテンツに誘導することができる場合、サンドボックス化はほとんど役に立ちません。悪意のあるHTMLコンテンツによって引き起こされる可能性のある被害を制限するために、それは専用の別のドメインから提供されるべきです。異なるドメインを使用することで、ユーザーがそのページに直接アクセスするようにだまされた場合でも、ファイル内のスクリプトがサイトを攻撃できなくなります。これは、sandbox属性の保護なしで実行される可能性があるからです。
iframe 要素の sandbox 属性が設定または変更され、それが
null でない コンテンツナビゲーブル
を持っている場合、ユーザーエージェントは サンドボックスディレクティブを解析 し、その属性の値とその iframe 要素の iframe
サンドボックスフラグセット を基に処理を行います。
iframe 要素の sandbox 属性が削除され、それが null
でない コンテンツナビゲーブル を持っている場合、ユーザーエージェントはその
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 の allow-scripts
キーワードが上書きされます。フォームも無効になっています。これは、B の内部の iframe が allow-forms
キーワードを持っていないためです。
今、A のスクリプトが A と B のすべての sandbox
属性を削除したと仮定します。これにより、すぐには何も変わりません。ユーザーが C のリンクをクリックし、ページ D を B の iframe にロードすると、ページ D
は B の iframe に
allow-same-origin
および allow-forms
キーワードが設定されていたかのように動作します。なぜなら、それはページ B が読み込まれたときの A の コンテンツナビゲーブル の状態だったからです。
一般的に言って、動的に sandbox
属性を削除または変更することはお勧めできません。なぜなら、何が許可され、何が許可されないかを論理的に判断することが非常に難しくなる可能性があるからです。
allow 属性が指定された場合、コンテナポリシー
が決定され、それが 権限ポリシー として使用されます。これは、Document が iframe の コンテンツナビゲーブル 内で初期化されるときに適用されます。その値は、シリアライズされた権限ポリシーである必要があります。[PERMISSIONSPOLICY]
この例では、iframe
を使用して、オンラインナビゲーションサービスから地図を埋め込んでいます。allow 属性は、ネストされたコンテキスト内で
Geolocation API を有効にするために使用されています。
< iframe src = "https://maps.example.com/" allow = "geolocation" ></ iframe > allowfullscreen 属性は、ブール属性です。指定されている場合、Document オブジェクトが iframe 要素の コンテンツナビゲーブル
内で初期化されるときに、「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 の オリジン
で確認し、その結果が "有効" であれば、true を返します。
false を返します。
これらの属性は、コンテンツナビゲーブルのアクティブドキュメントにおける権限ポリシーにのみ影響を与えるため、allowおよびallowfullscreen属性は、iframeのコンテンツナビゲーブルがナビゲートされたときにのみ効果を発揮します。これらの属性を追加または削除しても、既に読み込まれたドキュメントには影響を与えません。
iframe要素は、埋め込みコンテンツが特定の寸法を持つ場合（例：広告ユニットが明確に定義された寸法を持つ場合）に、寸法属性をサポートしています。
iframe要素には、フォールバックコンテンツが含まれることはなく、指定された初期コンテンツが正常に使用されるかどうかにかかわらず、常に新しい子ナビゲーブルを作成します。
referrerpolicy属性は、リファラーポリシー属性です。その目的は、リファラーポリシーを設定することで、iframe属性の処理時に使用されます。[REFERRERPOLICY]
loading属性は、遅延読み込み属性です。その目的は、ビューポート外にあるiframe要素の読み込みポリシーを示すことです。
loading属性の状態がEager状態に変更されたとき、ユーザーエージェントは次のステップを実行する必要があります：
resumptionStepsを、iframe要素の遅延読み込み再開ステップとします。
もしresumptionStepsがnullである場合は、何も返しません。
iframeの遅延読み込み再開ステップをnullに設定します。
resumptionStepsを実行します。
iframe要素の子孫は何も表しません。（iframe要素をサポートしていないレガシーユーザーエージェントでは、コンテンツがマークアップとして解析され、フォールバックコンテンツとして機能する可能性があります。）
HTMLパーサーは、iframe要素内のマークアップをテキストとして扱います。
すべての現在のエンジンでサポートされています。
srcdocのゲッターステップは次のとおりです：
attributeを、名前空間およびローカル名で属性を取得する結果とします。null、srcdocのローカル名、およびthisを指定します。
もしattributeがnullであれば、空の文字列を返します。
attributeの値を返します。
srcdocのセッターステップは次のとおりです：
compliantStringを、TrustedHTML、thisの関連するグローバルオブジェクト、与えられた値、"HTMLIFrameElement srcdoc"、および"script"を指定して、信頼されたタイプの準拠文字列を取得するアルゴリズムを呼び出す結果とします。
サポートされているトークンは、sandboxのDOMTokenListに対して定義された許可された値と、ユーザーエージェントがサポートしている値です。
HTMLIFrameElement/referrerPolicy
すべての現在のエンジンでサポートされています。
referrerPolicyIDL属性は、同名のコンテンツ属性を反映しなければならず、既知の値のみに制限されます。
loadingIDL属性は、同名のコンテンツ属性を反映しなければならず、既知の値のみに制限されます。
HTMLIFrameElement/contentDocument
すべての現在のエンジンでサポートされています。
contentDocumentゲッターステップは、thisのコンテンツドキュメントを返すことです。
HTMLIFrameElement/contentWindow
すべての現在のエンジンでサポートされています。
contentWindowゲッターステップは、thisのコンテンツウィンドウを返すことです。
ここでは、iframeを使用して広告仲介業者から広告を表示するページの例を示します：
< iframe src = "https://ads.example.com/?customerid=923513721&format=banner"
width = "468" height = "60" ></ iframe > embed要素すべての最新エンジンでサポートされています。
すべての最新エンジンでサポートされています。
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属性によって指定されたリソースの明示的なコンテンツタイプメタデータと同じタイプを指定しなければなりません。
以下のいずれかの条件が発生している間は、その要素に対してインスタンス化された プラグイン をすべて削除し、embed 要素は 何も表さない ものとします：
要素にメディア要素の先祖がある。
要素に、表示されていないフォールバックコンテンツを持つobject要素の先祖がある。
潜在的にアクティブではなかった embed
要素が潜在的にアクティブになるたび、また潜在的にアクティブなままの embed 要素で src 属性または type
属性が設定、変更、または削除されるたび、ユーザーエージェントは当該要素を指定して embed task source
上に要素タスクをキューし、その要素に対して embed 要素のセットアップ手順 を実行しなければならない。
embed要素のセットアップ手順は、指定されたembed要素elementに対して以下のように行われます:
他のタスクがその後、elementのためにembed要素のセットアップ手順を実行するためにキューに追加された場合は、終了します。
elementにsrc属性が設定されている場合、次の手順を実行します：
urlを、elementのsrc属性の値をelementのノードドキュメントに対して相対的にURLのエンコード解析を行うことによって得られる結果にします。
urlが失敗であれば、終了します。
requestを新しいリクエストとし、そのURLをurl、クライアントをelementのノードドキュメントの関連設定オブジェクト、宛先を「embed」、資格情報モードを「include」、モードを「navigate」、発起人タイプを「embed」、URL資格情報フラグを設定したものにします。
requestをフェッチし、レスポンスの処理を、レスポンス responseに対して以下の手順を設定して実行します：
他のタスクがその後、elementのためにembed要素のセットアップ手順を実行するためにキューに追加された場合は、終了します。
typeをelementとresponseに基づいてコンテンツのタイプを決定する結果にします。
typeに応じてスイッチします：
elementに対してプラグインを表示しないことを行います。
elementのコンテンツナビゲーブルがnullであれば、elementのために新しい子ナビゲーブルを作成します。
elementのコンテンツナビゲーブルを、responseのURLに、elementのノードドキュメントを使用して、レスポンスをresponseに設定し、履歴処理を「replace」に設定してナビゲートします。
elementのsrc属性は、コンテンツナビゲーブルが他の場所にさらにナビゲートされた場合には更新されません。
elementは今やそのコンテンツナビゲーブルを表しています。
リソースのフェッチは、elementのノードドキュメントのロードイベントを遅らせる必要があります。
それ以外の場合、elementに対してプラグインを表示しないことを行います。
コンテンツのタイプを、指定されたembed要素elementとレスポンスresponseに基づいて決定するには、次の手順を実行します:
responseのパスコンポーネントがURLに含まれており、それがプラグインがサポートするパターンと一致する場合、そのプラグインが処理できるタイプを返します。
例えば、あるプラグインは、パスコンポーネントが「.swf」で終わるURLを処理できると主張するかもしれません。
responseに明示的なコンテンツタイプメタデータがあり、その値がプラグインがサポートするタイプである場合、その値を返します。
nullを返します。
上記のアルゴリズムが、responseにokステータスがない場合でも、responseを許可するのは意図的です。これにより、サーバーはエラーレスポンス（例：HTTP 500内部サーバーエラーコード）を持っていても、プラグインデータを返すことができます。
embed要素に対してプラグインを表示しない方法は以下の通りです:
elementに対して子ナビゲーブルを破壊します。
elementに対してプラグインが見つからなかったことを示すインジケータを表示し、その内容をelementとして表示します。
elementは何も表さなくなります。
embed要素にはフォールバックコンテンツがなく、その子孫は無視されます。
embed要素はロードイベントを遅らせる可能性があります。
object 要素すべての最新エンジンでサポートされています。
すべての最新エンジンでサポートされています。
Support in all current engines.
Support in all current engines.
Support in all current engines.
data — リソースのアドレス
type — 埋め込まれたリソースのタイプ
name — コンテンツナビゲーブルの名前
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属性が存在する場合、有効なナビゲーブルターゲット名でなければなりません。指定された値は、要素のコンテンツナビゲーブルの名前に使用され、適用可能であれば、要素のコンテンツナビゲーブルが作成されるときに存在します。
次のいずれかの条件が発生するとき:
object要素のいずれかが、そのフォールバックコンテンツを表示するかどうか変わるとき、
classid属性が設定、変更、または削除されるとき、
classid属性が存在しない場合、およびそのdata属性が設定、変更、または削除されるとき、
classid属性もdata属性も存在せず、type属性が設定、変更、または削除されるとき、
...ユーザーエージェントは、object要素に対して、次の手順を実行してその要素が何を表すかを（再）決定するために要素タスクをキューに追加する必要があります。このタスクがキューに追加されるか、または実行中である場合は、要素のノードドキュメントのロードイベントを遅らせる必要があります。
ユーザーがこのobject要素の通常の動作の代わりにフォールバックコンテンツを表示するように指定した場合、以下のフォールバックとラベル付けされたステップにジャンプします。
例えば、ユーザーがそのコンテンツがよりアクセスしやすい形式を使用しているために、要素のフォールバックコンテンツの表示を要求することがあります。
要素に先祖となるメディア要素がある場合、または先祖となるobject要素があり、それがフォールバックコンテンツを表示していない場合、または要素が文書内にあり、そのブラウジングコンテキストがnullでない場合、あるいは要素のノード文書が完全にアクティブでない場合、または要素がオープン要素のスタックの中にまだある場合、または要素がレンダリングされていない場合は、以下のフォールバックとラベル付けされたステップにジャンプします。
もしdata属性が存在し、その値が空でない場合：
もしtype属性が存在し、その値がユーザーエージェントがサポートしていないタイプである場合、ユーザーエージェントは実際のタイプを調べるためにコンテンツを取得することなく、以下のフォールバックとラベル付けされたステップにジャンプできます。
urlを、data属性の値と要素のノード文書に基づいて、URLをエンコーディング解析することで得られた結果とします。
もしurlが失敗した場合、イベントをerrorという名前で要素に対して発生させ、以下のフォールバックとラベル付けされたステップにジャンプします。
requestを新しいリクエストとし、そのurlをURLとし、クライアントは要素のノード文書の関連設定オブジェクトとし、デスティネーションは"object"とし、認証モードは"include"とし、モードは"navigate"とし、イニシエータータイプは"object"とし、URLクレデンシャルを使用するフラグが設定されているとします。
リクエストをフェッチします。
リソースの取得は、リソースが取得された後にネットワーキングタスクソースによってキューに入れられたタスクが実行されるまで、要素のノードドキュメントのロードイベントを遅延させる必要があります。
リソースがまだ利用できない場合（例：リソースがキャッシュにないため、リソースのロードにネットワーク上でリクエストが必要である場合）、以下のフォールバックとラベル付けされたステップにジャンプします。リソースが利用可能になるとネットワーキングタスクソースによってキューに入れられるタスクは、このステップからアルゴリズムを再開する必要があります。リソースは断続的にロードでき、ユーザーエージェントは十分なデータが取得されたときにリソースを「利用可能」と見なすオプションがあります。
ロードが失敗した場合（例：HTTP 404エラー、DNSエラーがあった場合）、イベントをerrorという名前で要素に対して発生させ、その後、以下のフォールバックとラベル付けされたステップにジャンプします。
次の手順でresource typeを決定します：
resource typeを不明にします。
ユーザーエージェントがこのリソースのContent-Typeヘッダーを厳密に遵守するように設定されている場合、およびリソースに関連するContent-Typeメタデータがある場合、resource typeをリソースの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メタデータに指定されているタイプにし、以下のハンドラーとラベル付けされたステップにジャンプします。
もしtype属性が存在し、かつその値がapplication/octet-streamでない場合、以下の手順を実行します：
もしその属性の値が、"image/"で始まり、かつresource
typeが不明の場合、resource typeをtype属性に指定されているタイプとします。
以下のハンドラーとラベル付けされたステップにジャンプします。
もしtype属性が存在する場合、tentative
typeをtype属性に指定されているタイプとします。
そうでない場合、tentative typeをリソースの計算されたタイプとします。
もしtentative typeがapplication/octet-streamでない場合、resource
typeをtentative
typeとし、以下のハンドラーとラベル付けされたステップにジャンプします。
指定されたリソースのURLパーサーアルゴリズムを適用した結果（リダイレクト後）として、URLレコードが、パスコンポーネントと一致するパターンを持つ場合、resource
typeをそのプラグインが処理できるタイプとします。
例えば、プラグインが".swf"で終わるパスコンポーネントを持つリソースを処理できると指定する場合があります。
このステップが完了するか、上記のサブステップのいずれかが次のステップに直接ジャンプすることで、resource typeが依然として不明である可能性があります。いずれの場合でも、次のステップでフォールバックがトリガーされます。
ハンドラー: 次のケースのうち最初に一致するものとしてコンテンツを処理します：
XML MIMEタイプである場合、またはリソースタイプが"image/"で始まらない場合
もしobject要素のコンテンツナビゲーブルがnullである場合、その要素のために新しい子ナビゲーブルを作成します。
responseのURLがabout:blankと一致しない場合、要素のノードドキュメントを使用して、historyHandlingを「replace」に設定して、要素のコンテンツナビゲーション可能オブジェクトをresponseのURLにナビゲートします。
要素のコンテンツナビゲーブルが他の場所にさらにナビゲートされた場合でも、要素のdata属性は更新されません。
object要素はそのコンテンツナビゲーブルを表します。
image/"で始まり、画像サポートが無効化されていない場合object要素に対して子ナビゲーブルを破壊します。
画像のスニッフィングルールを適用して画像のタイプを決定します。
object要素は指定された画像を表します。
もし画像が不正であるか、またはサポートされていないフォーマットであるためにレンダリングできない場合は、以下のフォールバックとラベル付けされたステップにジャンプします。
指定されたresource typeはサポートされていません。以下のフォールバックとラベル付けされたステップにジャンプします。
前のステップがresource type不明のまま終了した場合、これはトリガーされるケースです。
要素の内容はobject要素が表すものの一部ではありません。
もしobject要素がそのコンテンツナビゲーブルを表していない場合、リソースが完全にロードされた後で、DOM操作タスクソースに要素タスクをキューし、要素に対してloadという名前のイベントを発生させます。
もし要素がそのコンテンツナビゲーブルを表している場合、作成されたDocumentが完全にロードが完了したときに同様のタスクがキューに入れられます。
戻ります。
フォールバック: object要素はその子要素を表します。これは要素のフォールバックコンテンツです。要素に対して子ナビゲーブルを破壊します。
上述のアルゴリズムにより、object要素の内容は、参照されたリソースが表示できない場合（例：404エラーが発生した場合）にのみ使用されるフォールバックコンテンツとして機能します。これにより、複数のobject要素を入れ子にして、それぞれ異なる能力を持つユーザーエージェントをターゲットにすることができ、ユーザーエージェントはサポートする最初のものを選択します。
object要素はロードイベントを遅延させる可能性があります。
form属性は、object要素をフォームの所有者と明示的に関連付けるために使用されます。
HTMLObjectElement/contentDocument
すべての現在のエンジンでサポートされています。
contentDocumentゲッターステップは、thisのコンテンツドキュメントを返すことです。
HTMLObjectElement/contentWindow
すべての現在のエンジンでサポートされています。
contentWindowゲッターステップは、thisのコンテンツウィンドウを返すことです。
willValidate、validity、validationMessage属性、およびcheckValidity()、reportValidity()、setCustomValidity()メソッドは、制約検証APIの一部です。formIDL属性は、要素のフォームAPIの一部です。
この例では、object要素を使用してHTMLページが別のページに埋め込まれています。
< figure >
< object data = "clock.html" ></ object >
< figcaption > My HTML Clock</ figcaption >
</ figure > video要素すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
controls属性を持つ場合:
インタラクティブコンテンツ
src属性を持つ場合:track要素、その後透明、ただし、メディア要素の子孫は含まれない。src属性を持たない場合:
ゼロまたはそれ以上のsource要素、その後ゼロまたはそれ以上のtrack要素、その後透明、ただし、メディア要素の子孫は含まれない。src — リソースのアドレスcrossorigin —
クロスオリジンリクエストの処理方法poster —
ビデオ再生前に表示するポスターフレームpreload — メディアリソースが必要とするバッファリングのヒントautoplay —
ページが読み込まれたときに自動的にメディアリソースを開始できることを示唆するplaysinline —
ユーザーエージェントに、ビデオコンテンツを要素の再生エリア内に表示することを促すloop — メディアリソースをループ再生するかどうかmuted — メディアリソースをデフォルトでミュートするかどうかcontrols —
ユーザーエージェントコントロールを表示するかどうか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要素を使用して外部ファイルとして提供できます。手話トラックはビデオストリームに埋め込むことができます。音声説明はビデオストリームに埋め込むか、WebVTTファイルを使用してテキスト形式で提供し、ユーザーエージェントによって音声合成されることもあります。WebVTTは、チャプタータイトルの提供にも使用できます。メディア要素をまったく使用したくないユーザー向けに、video要素の近くの文中でリンクを使用して、トランスクリプトやその他のテキスト代替を提供することもできます。[WEBVTT]
video要素は、メディア要素であり、そのメディアデータは表面的にはビデオデータであり、関連するオーディオデータが含まれる可能性があります。
src、crossorigin、preload、autoplay、loop、muted、controls属性は、すべてのメディア要素に共通の属性です。
poster属性は、ユーザーエージェントがビデオデータが利用できない間に表示できる画像ファイルのURLを指定します。この属性が存在する場合、その内容は有効な非空のURLで、スペースで囲まれている可能性があります。
指定されたリソースが使用される場合、要素が作成されるとき、またはposter属性が設定、変更、または削除されたときに、ユーザーエージェントは次の手順を実行して、要素のポスターフレームを決定しなければなりません（要素のポスターフラグの値に関係なく）。
このvideo要素に対して実行中のインスタンスが存在する場合、そのインスタンスを中断し、ポスターフレームを変更せずに終了します。
属性の値を相対して、URLのエンコーディングと解析の結果をurlとします。要素のノード文書に相対して。
もしurlが失敗した場合、終了します。ポスターフレームはありません。
requestを新しいリクエストとし、URLをurl、クライアントを要素のノード文書の関連する設定オブジェクト、宛先をimage、発信元タイプをvideo、資格情報モードをinclude、URL資格情報フラグを設定します。
リクエストをフェッチします。これにより、要素のロードイベントを遅延させる必要があります。要素のノード文書の。
poster属性で指定された画像、つまりポスターフレームは、ビデオの代表的なフレーム（通常は最初の非空白のフレーム）であり、ビデオの概要をユーザーに伝えることを目的としています。
playsinline属性はブール属性です。この属性が存在する場合、それはユーザーエージェントに対するヒントとして機能し、ビデオをデフォルトでドキュメント内で「インライン」で表示し、要素の再生エリアに制約され、フルスクリーンや独立したリサイズ可能なウィンドウで表示されることはありません。
playsinline属性が存在しないからといって、ビデオがデフォルトでフルスクリーンで表示されることを意味するわけではありません。実際、ほとんどのユーザーエージェントはデフォルトでビデオをすべてインラインで再生することを選択しており、そのようなユーザーエージェントではplaysinline属性には何の効果もありません。
video
要素は、以下のリストで最初に一致する条件に対して、指定された内容を表します。
readyState 属性が HAVE_NOTHING または
HAVE_METADATA
であり、ビデオデータがまだ全く取得されていない場合、または要素の readyState
属性が以降のいずれかの値であるが、メディアリソース にビデオチャンネルがない場合）
video 要素は、存在する場合は ポスターフレーム を表し、それ以外の場合は 透明な黒 を表し、自然な寸法
はありません。
video 要素が 一時停止中 で、現在の再生位置
がビデオの最初のフレームであり、要素の ポスターフラグを表示
が設定されている場合
video 要素は、存在する場合は ポスターフレーム を表し、それ以外の場合はビデオの最初のフレームを表します。
video 要素が 一時停止中 で、現在の再生位置
に対応するビデオのフレームが利用できない場合（例えば、ビデオがシーク中またはバッファリング中である場合）
video 要素が 再生中である可能性 も 一時停止中 でもない場合（例えば、シーク中または停止中の場合）
video
要素は、最後にレンダリングされたビデオのフレームを表します。
video 要素が 一時停止中 の場合
video 要素は、現在の再生位置
に対応するビデオのフレームを表します。
video
要素にビデオチャンネルがあり、再生中である可能性がある場合）
video 要素は、連続的に増加する 現在の位置 のフレームを表します。現在の再生位置
が変わり、最後にレンダリングされたフレームがビデオの 現在の再生位置 に対応しなくなった場合、新しいフレームがレンダリングされなければなりません。
ビデオのフレームは、選択されたビデオトラック から取得される必要があります。イベントループ が最後に ステップ1 に到達したときに選択されたトラックです。
ビデオストリーム内の特定の再生位置に対応するフレームは、ビデオストリームの形式によって定義されます。
video 要素は、テキストトラックのキュー をも 表します。テキストトラックキューアクティブフラグ が設定され、テキストトラック が 表示モード になっている場合、そして メディアリソース のオーディオも現在の再生位置において表します。
メディアリソース に関連付けられたオーディオは、再生される場合、現在の再生位置 に同期して再生される必要があります。ユーザーエージェントは、イベントループ が最後にステップ1に到達したときに有効化されたオーディオトラックからオーディオを再生しなければなりません。
さらに、ユーザーエージェントは、ビデオ上または要素の再生エリアの他の領域にテキストやアイコンを重ねたり、その他の適切な方法で、"バッファリング中"、"ビデオがロードされていません"、"エラー"、またはより詳細な情報などのメッセージをユーザーに提供することができます。
ビデオをレンダリングできないユーザーエージェントは、代わりに要素を外部のビデオ再生ユーティリティへのリンクやビデオデータ自体 を表すようにすることができます。
video 要素の メディアリソース にビデオチャンネルがある場合、要素は、ペイントソース を提供します。このソースの幅は メディアリソース の自然幅、高さは メディアリソース の 自然高さ であり、その見た目は、利用可能な場合は 現在の再生位置
に対応するビデオのフレームの外観であり、そうでない場合（例えば、ビデオがシーク中またはバッファリング中である場合）、以前の外観であり、それも利用できない場合（例えば、ビデオが最初のフレームをロード中であるため）には、黒である場合があります。
video.videoWidth
すべての現在のエンジンでサポートされています。
video.videoHeight
すべての現在のエンジンでサポートされています。
これらの属性は、ビデオの自然な寸法を返すか、寸法が不明な場合は0を返します。
自然な幅と自然な高さは、メディアリソースの寸法を、リソースの寸法、アスペクト比、クリンアパーチャ、解像度などを考慮した後のCSS ピクセルでの寸法として定義されます。アナモルフィックフォーマットがビデオデータの寸法にアスペクト比をどのように適用するかを定義していない場合、ユーザーエージェントは、1つの寸法を増加させ、もう1つの寸法を変更せずに比率を適用する必要があります。
videoWidth
IDL属性は、ビデオの自然な幅をCSS
ピクセルで返す必要があります。videoHeight IDL属性は、ビデオの自然な高さをCSS
ピクセルで返す必要があります。要素のreadyState属性がHAVE_NOTHINGの場合、属性は0を返す必要があります。
ビデオの自然な幅または自然な高さが変更された場合（たとえば、選択されたビデオトラックが変更されたため）、要素のreadyState属性がHAVE_NOTHINGでない場合、ユーザーエージェントはメディア要素タスクをキューに入れる必要があり、イベントを発火し、resizeという名前のイベントをメディア要素で発生させる必要があります。
特定のスタイルルールがない場合、ビデオコンテンツは要素の再生エリア内で最大サイズで中央に表示され、ビデオコンテンツのアスペクト比が維持されるようにレンダリングされるべきです。したがって、再生エリアのアスペクト比がビデオのアスペクト比と一致しない場合、ビデオはレターボックスまたはピラーボックス形式で表示されます。要素の再生エリアのビデオを含まない部分は、何も表さないことを意味します。
CSSを実装しているユーザーエージェントでは、上記の要件は、レンダリングセクションで提案されているスタイルルールを使用することで実装できます。
自然な幅は、video要素の再生エリアのポスターフレームが利用可能であり、要素が現在そのポスターフレームを表している場合、そのポスターフレームの自然な幅です。そうでない場合は、ビデオリソースの自然な幅です。ビデオリソースが利用可能でない場合、自然な幅は失われます。
自然な高さは、video要素の再生エリアのポスターフレームが利用可能であり、要素が現在そのポスターフレームを表している場合、そのポスターフレームの自然な高さです。そうでない場合は、ビデオリソースの自然な高さです。ビデオリソースが利用可能でない場合、自然な高さは失われます。
デフォルトのオブジェクトサイズは、幅300 CSSピクセル、高さ150 CSSピクセルです。[CSSIMAGES]
ユーザーエージェントは、クローズドキャプション、音声説明トラック、およびビデオストリームに関連するその他の追加データの表示を有効または無効にするコントロールを提供すべきですが、これらの機能はページの通常のレンダリングを妨げないようにすべきです。
ユーザーエージェントは、ユーザーにより適した方法でビデオコンテンツを表示できるようにするかもしれません。たとえば、フルスクリーンや独立したサイズ変更可能なウィンドウで表示することができます。ユーザーエージェントは、ビデオの再生時にデフォルトでこのような表示モードをトリガーすることもできますが、playsinline属性が指定されている場合はそうすべきではありません。他のユーザーインターフェイス機能と同様に、これを有効にするコントロールは、ユーザーエージェントがユーザーインターフェイスをユーザーに公開している場合を除き、ページの通常のレンダリングを妨げるべきではありません。ただし、このような独立した表示モードでは、controls属性がない場合でも、ユーザーエージェントは完全なユーザーインターフェイスを表示することができます。
ユーザーエージェントは、ビデオ再生中にスクリーンセーバーを無効にするなど、ユーザーの体験を妨げる可能性のあるシステム機能にビデオ再生が影響を与えることを許可する場合があります。
次の例は、ビデオが正しく再生されなかった場合を検出する方法を示しています。
< script >
function failed( e) {
// ビデオの再生が失敗した場合 - なぜかを示すメッセージを表示する
switch ( e. target. error. code) {
case e. target. error. MEDIA_ERR_ABORTED:
alert( 'ビデオの再生が中止されました。' );
break ;
case e. target. error. MEDIA_ERR_NETWORK:
alert( 'ネットワークエラーにより、ビデオのダウンロードが途中で失敗しました。' );
break ;
case e. target. error. MEDIA_ERR_DECODE:
alert( 'ビデオの再生が、破損問題やブラウザがサポートしていない機能を使用したため中止されました。' );
break ;
case e. target. error. MEDIA_ERR_SRC_NOT_SUPPORTED:
alert( 'サーバーまたはネットワークが失敗したか、形式がサポートされていないため、ビデオをロードできませんでした。' );
break ;
default :
alert( '不明なエラーが発生しました。' );
break ;
}
}
</ script >
< p >< video src = "tgif.vid" autoplay controls onerror = "failed(event)" ></ video ></ p >
< p >< a href = "tgif.vid" > ビデオファイルをダウンロード</ a > .</ p > audio
要素すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
controls属性がある場合:
インタラクティブコンテンツ.
controls属性がある場合:
パルパブルコンテンツ.
src属性がある場合:
0個以上のtrack要素、その後
透過的だが、メディア要素の子孫は含まない。
src属性がない場合: 0個以上の
source要素、その後
0個以上のtrack要素、その後
透過的だが、メディア要素の子孫は含まない。
src — リソースのアドレス
crossorigin —
クロスオリジンリクエストの処理方法
preload — メディアリソースが必要とするバッファリングの量を示唆します
autoplay —
ページが読み込まれたときにメディアリソースを自動的に再生できることを示唆します
loop — メディアリソースをループ再生するかどうか
muted — デフォルトでメディアリソースをミュートするかどうか
controls —
ユーザーエージェントのコントロールを表示する
[Exposed =Window ,
LegacyFactoryFunction =Audio (optional DOMString src )]
interface HTMLAudioElement : HTMLMediaElement {
[HTMLConstructor ] constructor ();
};audio要素は、音声またはオーディオストリームを表します。
audio要素の中にコンテンツを提供することができます。ユーザーエージェントはこのコンテンツをユーザーに表示すべきではありません。これは、audioをサポートしない古いウェブブラウザ向けであり、これらの古いブラウザのユーザーに音声コンテンツにアクセスする方法を知らせるためのテキストを表示することを目的としています。
特に、このコンテンツはアクセシビリティの問題に対処するためのものではありません。聴覚障害者やその他の身体的・認知的障害を持つ人々のために、音声コンテンツをアクセシブルにするためのさまざまな機能が利用可能です。キャプションや手話ビデオが利用可能な場合、video要素を使用して音声を再生し、ユーザーが視覚的な代替手段を有効にできるようにすることができます。章のタイトルをtrack要素とWebVTTファイルを使用して提供し、ナビゲーションを支援することができます。また、もちろん、トランスクリプトやその他のテキストによる代替手段をaudio要素の近くの文章で単にリンクすることで提供することができます。[WEBVTT]
audio要素は、メディア要素であり、そのメディアデータは表向きにはオーディオデータです。
src、crossorigin、preload、autoplay、loop、muted、およびcontrols属性は、すべてのメディア要素に共通する属性です。
audio = new Audio([ url ])
すべての現在のエンジンでサポートされています。
HTMLAudioElementオブジェクトを作成するためのレガシーファクトリ関数が提供されています（DOMからのファクトリメソッドに加えて、例えばcreateElement()などです）。Audio(src)。レガシーファクトリ関数が呼び出された場合、次の手順を実行する必要があります:
documentを現在のグローバルオブジェクトの関連するDocumentとする。
もしsrcが与えられた場合、属性値を設定するaudioのために"src"とsrcを用いる。（これにより、オブジェクトのリソース選択アルゴリズムを返す前にユーザーエージェントが呼び出すことを引き起こす）
audioを返す。
track要素すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
Support in all current engines.
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のエンコード、パース、およびシリアライズの結果に設定します。
要素のトラックURLをtrackURLに設定します。失敗でない場合はそれに設定し、それ以外の場合は空の文字列に設定します。
要素のトラックURLがWebVTTリソースを識別し、要素のkind属性がチャプターメタデータまたはメタデータ状態にない場合、WebVTTファイルはキューテキストを使用するWebVTTファイルである必要があります。[WEBVTT]
srclang属性は、テキストトラックデータの言語を指定します。値は有効なBCP
47言語タグである必要があります。この属性は、要素のkind属性が字幕状態にある場合は必須です。[BCP47]
label属性は、ユーザーが読みやすいトラックのタイトルを指定します。このタイトルは、ユーザーエージェントがそのユーザーインターフェイスで字幕、キャプション、および音声説明トラックを一覧表示する際に使用されます。
label属性の値は、属性が存在する場合、空の文字列であってはなりません。また、同じメディア要素の子であり、kind属性が同じ状態にある、track要素が2つあってはなりません。また、それらのsrclang属性が欠落しているか、同じ言語を表す値を持ち、それらのlabel属性が再び両方とも欠落しているか、同じ値を持っている場合も同様です。
default属性はブール属性であり、指定されている場合、ユーザーの設定が他のトラックをより適切であると示さない限り、トラックが有効になることを示します。
メディア要素には、字幕状態またはキャプション状態にあるtrack要素の子が1つだけ存在し、そのdefault属性が指定されている必要があります。
メディア要素には、説明状態にあるtrack要素の子が1つだけ存在し、そのdefault属性が指定されている必要があります。
メディア要素には、チャプターメタデータ状態にあるtrack要素の子が1つだけ存在し、そのdefault属性が指定されている必要があります。
track要素のうち、kind属性がメタデータ状態にあり、default属性が指定されているものの数には制限がありません。
track.readyState
テキストトラックの準備状態を返します。これは、次のリストの数値で表されます:
track.NONE (0)
track.LOADING (1)
track.LOADED (2)
track.ERROR (3)
track.track
TextTrackオブジェクトを返します。これは、track要素のテキストトラックに対応します。
readyState属性は、track要素のテキストトラックのテキストトラックの準備状態に対応する数値値を返さなければなりません。
NONE（数値値0）
LOADING（数値値1）
LOADED（数値値2）
ERROR（数値値3）
このビデオには、いくつかの言語の字幕があります:
< 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属性によって指定されます。）
HTMLMediaElementオブジェクト（この仕様ではaudioおよびvideo）は、単にメディア要素として知られています。
すべての現在のエンジンでサポートされています。
Support in all current engines.
Support in all current engines.
Support in all current engines.
Support in all current engines.
Support in all current engines.
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 ;
// 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は、すべてのメディア要素に適用されます。それらはこのセクションで定義されています。
メディア要素は、音声データや、映像および音声データをユーザーに提示するために使用されます。これは、このセクションでメディアデータと呼ばれています。このセクションは、音声または映像のためのメディア要素に等しく適用されるためです。 メディアリソースという用語は、完全な映像ファイルや音声ファイルなど、メディアデータ全体を指すために使用されます。
メディアリソースには、"none"、"multiple"、"rewritten"、またはオリジン"のいずれかのオリジンが関連付けられています。それは初期状態では"none"に設定されています。
メディアリソースには、複数の音声および映像トラックが含まれることがあります。メディア要素の目的のために、メディアリソースの映像データは、要素のvideoTracks属性によって現在選択されているトラック（もしあれば）のみであり、イベントループが最後にステップ1に到達したときに適用されます。また、メディアリソースの音声データは、要素のaudioTracks属性によって現在有効になっているすべてのトラック（もしあれば）をミキシングした結果です。
audio要素とvideo要素の両方が、音声および映像のために使用されることがあります。主な違いは、audio要素には視覚コンテンツ（映像やキャプションなど）の再生エリアがないのに対し、video要素にはそれがあるという点です。
各メディア要素には、一意のメディア要素イベントタスクソースがあります。
あるメディア要素elementと一連のステップstepsに対してメディア要素タスクをキューに入れるには、要素タスクをキューに入れ、elementとstepsを指定して、メディア要素イベントタスクソースにタスクをキューに入れます。
現在のすべてのエンジンでサポートされています。
media.error
現在のすべてのエンジンでサポートされています。
現在のエラー状態を表す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
現在のすべてのエンジンでサポートされています。
現在のエラーのエラーコードを以下のリストから返します。
media.error.message
現在のすべてのエンジンでサポートされています。
発生したエラー条件に関する特定の診断メッセージを返します。メッセージとメッセージ形式は、異なるユーザーエージェント間で一般的に一様ではありません。このようなメッセージが利用できない場合は、空の文字列が返されます。
すべてのMediaErrorオブジェクトには、文字列であるメッセージと、次のいずれかのコードがあります。
MEDIA_ERR_ABORTED（数値値 1）
MEDIA_ERR_NETWORK（数値値 2）
MEDIA_ERR_DECODE（数値値 3）
MEDIA_ERR_SRC_NOT_SUPPORTED（数値値 4）
src属性または割り当てられたメディアプロバイダーオブジェクトによって示されたメディアリソースが適切でありませんでした。
エラーコードが上記の値のいずれかであるMediaErrorを作成するには、指定されたエラーコードを持つ新しいMediaErrorオブジェクトを返します。このオブジェクトのコードは指定されたエラーコードであり、メッセージは、エラー条件の原因についてユーザーエージェントが提供できる詳細を含む文字列であるか、ユーザーエージェントがそのような詳細を提供できない場合は空の文字列です。このメッセージ文字列には、提供されたエラーコードを通じて既に利用可能な情報のみを含めるべきではありません。たとえば、コードを文字列形式に変換するだけではいけません。エラーコードで提供された情報以上の追加情報がない場合、メッセージは空の文字列に設定されなければなりません。
src コンテンツ属性は、メディア要素の表示するURLを指定します。この属性が存在する場合、有効な非空のURLが含まれている必要があります。
itemprop
属性がメディア要素に指定されている場合、src属性も指定されている必要があります。
crossorigin
コンテンツ属性は、メディア要素のCORS設定属性です。
メディア要素がsrc属性を持って作成された場合、ユーザーエージェントは直ちにそのメディア要素のリソース選択アルゴリズムを呼び出す必要があります。
メディア要素のsrc属性が設定または変更された場合、ユーザーエージェントはそのメディア要素のメディア要素の読み込みアルゴリズムを呼び出す必要があります。
(src 属性を削除しても、source
要素が存在していても、これを実行することはできません。)
すべての現在のエンジンでサポートされています。
crossOriginIDL属性は、crossorigin内容属性を反映し、既知の値のみ許可でなければなりません。
メディアプロバイダーオブジェクトは、メディアリソースを表現できるオブジェクトで、URLとは別です。MediaStreamオブジェクト、
MediaSourceオブジェクト、およびBlobオブジェクトはすべてメディアプロバイダーオブジェクトです。
各メディア要素は割り当てられたメディアプロバイダーオブジェクトを持つ場合があり、それはメディアプロバイダーオブジェクトです。メディア要素が作成された時点では、割り当てられたメディアプロバイダーオブジェクトは存在しません。
media.srcObject [ = source ]
1つのエンジンのみでサポートされています。
このプロパティを使用すると、メディア要素にメディアプロバイダーオブジェクトを割り当てることができます。
media.currentSrc
すべての現在のエンジンでサポートされています。
currentSrc
IDL属性は、最初に空の文字列に設定される必要があります。その値は、以下で定義されているリソース選択アルゴリズムによって変更されます。
srcObject
IDL属性は、取得時に要素の割り当てられたメディアプロバイダーオブジェクトを返す必要があり、存在しない場合はnullを返します。設定時には、要素の割り当てられたメディアプロバイダーオブジェクトを新しい値に設定し、その後、要素のメディア要素の読み込みアルゴリズムを呼び出す必要があります。
メディアリソースを指定する方法は3つあります:
srcObject
IDL属性、src
コンテンツ属性、およびsource要素です。IDL属性が優先され、次にコンテンツ属性、最後に要素が優先されます。
メディアリソースは、そのタイプ、具体的には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)
すべての現在のエンジンでサポートされています。
ユーザーエージェントが与えられたタイプのメディアリソースを再生できるかどうかに対する信頼度に基づいて、空の文字列（否定的な応答）、"maybe"、または"probably"を返します。
canPlayType(type) メソッドは、type がユーザーエージェントが再生できないことを知っているタイプである場合、または
"application/octet-stream"
タイプである場合、空の文字列を返さなければなりません。ユーザーエージェントがそのタイプがレンダリング可能であると自信を持っている場合には、"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 > type属性は、source要素で、ユーザーエージェントがレンダリングできないフォーマットを使用するリソースのダウンロードを回避することができます。
media.networkState
すべての現在のエンジンでサポートされています。
要素の現在のネットワーク活動状態を、以下のリストに示すコードの中から返します。
メディア要素がネットワークとやり取りする際に、その現在のネットワーク活動は、networkState属性によって表されます。取得時に、次の値のいずれかを返さなければなりません:
NETWORK_EMPTY（数値 0）
NETWORK_IDLE（数値 1）
NETWORK_LOADING（数値 2）
NETWORK_NO_SOURCE（数値 3）
リソース選択アルゴリズムは、networkState属性の値が変わる正確なタイミングと、この状態の変化を示すイベントがいつ発生するかを記述しています。
media.load()
すべての現在のエンジンでサポートされています。
要素をリセットし、新しいメディアリソースの選択と読み込みを最初から開始させます。
すべてのメディア要素には、自動再生可能フラグがあり、これは最初に true の状態で開始し、ロードイベントを遅延させるフラグがあり、これは最初に false の状態で開始する必要があります。ロードイベントを遅延させるフラグが true の場合、要素はそのドキュメントのロードイベントを遅延させる必要があります。
load()メソッドがメディア要素で呼び出されたとき、ユーザーエージェントはメディア要素の読み込みアルゴリズムを実行する必要があります。
メディア要素には、最初は false に設定されている関連するブール値の現在停止しているかどうかが存在します。
メディア要素の読み込みアルゴリズムは、次のステップで構成されています。
この要素の現在停止しているかどうかを false に設定します。
この要素に対して既に実行中のリソース選択アルゴリズムのインスタンスを中止します。
pending tasksを、メディア要素のメディア要素イベントタスクソースからのすべてのタスクのリストにします。
pending tasks内の、保留中の再生プロミスを解決するまたは保留中の再生プロミスを拒否するタスクに対しては、それらのプロミスをキューに入れられた順番に従って即座に解決または拒否します。
pending tasks内の各タスクをそのタスクキューから削除します。
基本的に、メディア要素が新しいリソースの読み込みを開始すると、保留中のイベントやコールバックが破棄され、解決/拒否が保留中のプロミスが即座に解決/拒否されます。
メディア要素のnetworkStateがNETWORK_LOADINGまたはNETWORK_IDLEに設定されている場合、メディア要素タスクをキューに入れる必要があります。
イベントを発生させるという指定されたメディア要素に基づいて、abortという名前のイベントをメディア要素に発生させます。
メディア要素のnetworkStateがNETWORK_EMPTYに設定されていない場合は、以下を実行します。
メディア要素タスクをキューに入れるという指定されたメディア要素に基づいて、イベントを発生させるという作業を続けます。イベント名は、emptiedであり、対象のメディア要素です。
もしメディア要素のフェッチプロセスが進行中であれば、ユーザーエージェントはそれを停止する必要があります。
メディアプロバイダーオブジェクトがMediaSourceオブジェクトである場合、それをデタッチします。
readyStateがHAVE_NOTHINGに設定されていない場合、それをその状態に設定します。
もしpaused属性が
false の場合、以下を実行します。
paused属性を
true に設定します。
保留中の再生プロミスを取得すると保留中の再生プロミスを拒否する、その結果と"AbortError"を持つDOMExceptionと共に拒否します。
seekingが
true の場合、それを false に設定します。
現在の再生位置を 0 に設定します。
公式の再生位置を 0 に設定します。
これにより公式の再生位置が変更された場合、メディア要素タスクをキューに入れるという指定されたメディア要素に基づいて、イベントを発生させるという作業を続けます。イベント名は、timeupdateです。
タイムラインオフセットを NaN（Not-a-Number）に設定します。
duration属性を
NaN（Not-a-Number）に更新します。
ユーザーエージェントは、この特定の期間の変更に対してdurationchangeイベントを発生させません。
playbackRate属性をdefaultPlaybackRate属性の値に設定します。
メディア要素のリソース選択アルゴリズムを呼び出します。
この要素の以前の再生中のメディアリソースの再生は停止します。
メディア要素のリソース選択アルゴリズムは次のようになります。このアルゴリズムは常にタスクの一部として呼び出されますが、このアルゴリズムの最初のステップの一つは戻り、残りのステップを並行して実行し続けます。さらに、このアルゴリズムはイベントループのメカニズムと密接に連携しています。特に、同期セクションを持っており（これらはイベントループアルゴリズムの一部としてトリガーされます）。このようなセクション内のステップは⌛でマークされています。
要素のnetworkState属性をNETWORK_NO_SOURCEに設定します。
要素のポスター表示フラグを true に設定します。
メディア要素のロードイベントを遅延させるフラグを true に設定します（これによりロードイベントが遅延します）。
安定した状態を待つことを行い、このアルゴリズムを呼び出したタスクが続行できるようにします。同期セクションは、このアルゴリズムの残りのすべてのステップで構成されており、アルゴリズムが同期セクションが終了したと通知するまで続きます。（同期セクション内のステップは⌛でマークされています。）
⌛ もしメディア要素のパーサーによってブロックされているフラグが false の場合、保留中のテキストトラックのリストを作成します。
⌛ もしメディア要素にメディアプロバイダーオブジェクトが割り当てられている場合、modeをobjectに設定します。
⌛ それ以外の場合、もしメディア要素にメディアプロバイダーオブジェクトが割り当てられていないが、src属性がある場合、modeをattributeに設定します。
⌛ それ以外の場合、もしメディア要素にメディアプロバイダーオブジェクトが割り当てられておらず、src属性もなく、source要素の子がある場合、modeをchildrenに設定し、candidateを最初のそのようなsource要素の子として木構造順で設定します。
⌛ それ以外の場合、メディア要素にはメディアプロバイダーオブジェクトが割り当てられておらず、src属性もなく、source要素の子もありません：
⌛networkStateをNETWORK_EMPTYに設定します。
⌛ 要素のロードイベントを遅延させるフラグを false に設定します。これにより、ロードイベントを遅延させることが停止します。
同期セクションを終了し、戻ります。
⌛メディア要素のnetworkState属性をNETWORK_LOADINGに設定します。
⌛メディア要素タスクをキューに入れるという指定されたメディア要素に基づいて、イベントを発生させるという作業を続けます。イベント名は、loadstartです。
以下のリストから適切なステップを実行します。
⌛currentSrc属性を空の文字列に設定します。
リソースフェッチアルゴリズムを割り当てられたメディアプロバイダーオブジェクトと共に実行します。このアルゴリズムがこのアルゴリズムを中止せずに終了した場合、ロードは失敗します。
メディアプロバイダーで失敗: このステップに到達したことは、メディアリソースの読み込みが失敗したことを示します。保留中の再生プロミスを取得するとメディア要素タスクをキューに入れるという指定されたメディア要素に基づいて、専用のメディアソース失敗ステップを実行します。
前のステップでキューに入れられたタスクが実行されるまで待ちます。
戻ります。このアルゴリズムが再度トリガーされるまで、要素は別のリソースの読み込みを試みません。
⌛urlRecordをURL
のエンコーディングと解析の結果に設定します。これは、最後に変更された際のsrc属性の値に基づいて、メディア要素のノードドキュメントに対して相対的に行われます。
⌛urlRecordが失敗でない場合、currentSrc属性をurlRecordにURL
シリアライザを適用した結果に設定します。
urlRecordが失敗でない場合、urlRecordを使用してリソースフェッチアルゴリズムを実行します。このアルゴリズムがこのアルゴリズムを中止せずに終了した場合、ロードは失敗します。
attribute で失敗: このステップに到達したことは、メディアリソースの読み込みが失敗したか、urlRecordが失敗であることを示します。保留中の再生プロミスを取得するとメディア要素タスクをキューに入れるという指定されたメディア要素に基づいて、専用のメディアソース失敗ステップを実行します。
前のステップでキューに入れられたタスクが実行されるまで待ちます。
戻ります。このアルゴリズムが再度トリガーされるまで、要素は別のリソースの読み込みを試みません。
⌛ pointer を、メディア要素の子リスト内の2つの隣接するノードによって定義される位置とします。リストの開始（リスト内の最初のノードの前、もしあれば）とリストの終了（リスト内の最後のノードの後、もしあれば）をそれ自体がノードであるとして扱います。一方のノードはpointerの前のノードであり、もう一方のノードはpointerの後のノードです。最初に、pointerをcandidateノードと次のノード（もしあれば）の間の位置、またはそれが最後のノードである場合はリストの終了とします。
ノードがメディア要素に挿入、削除、および移動されると、pointerは次のように更新されなければなりません：
その他の変更はpointerに影響しません。
⌛ 候補を処理：candidateがsrc属性を持たない場合、またはそのsrc属性の値が空の文字列である場合、同期セクションを終了し、以下の要素で失敗ステップにジャンプします。
⌛ candidateが、その値が環境に一致しないmedia属性を持つ場合、同期セクションを終了し、以下の要素で失敗ステップにジャンプします。
⌛ urlRecordを、src属性が最後に変更されたときのcandidateのノードドキュメントを基準として、candidateのsrc属性の値を指定してURLをエンコード解析した結果とします。
⌛ urlRecordが失敗の場合、同期セクションを終了し、以下の要素で失敗ステップにジャンプします。
⌛ candidateが、その値がMIMEタイプとして解析されたとき（そのパラメータを定義するタイプについては、codecsパラメータによって記述されるコーデックを含む）、ユーザーエージェントがレンダリングできないとわかっているタイプを表すtype属性を持つ場合、同期セクションを終了し、以下の要素で失敗ステップにジャンプします。
⌛ currentSrc属性を、urlRecordにURLシリアライザを適用した結果に設定します。
urlRecordを使用してリソースフェッチアルゴリズムを実行します。そのアルゴリズムがこれを中止せずに戻った場合、ロードは失敗しました。
要素で失敗：メディア要素を指定してメディア要素タスクをキューに入れ、candidateでerrorという名前のイベントを発火させます。
安定状態を待機します。同期セクションは、アルゴリズムが同期セクションが終了したと言うまで、このアルゴリズムの残りのすべてのステップで構成されます。（同期セクションのステップには⌛マークが付いています。）
⌛ 次の候補を見つける：candidateをnullとします。
⌛ 検索ループ：pointerの後のノードがリストの終了である場合、以下の待機中ステップにジャンプします。
⌛ pointerの後のノードがsource要素である場合、candidateをその要素とします。
⌛ pointerを、pointerの前のノードが以前pointerの後ろにあったノードになり、pointerの後ろのノードが、もしあれば、以前pointerの後ろにあったノードの後ろのノードになるように進めます。
⌛ candidateがnullの場合、検索ループステップに戻ります。それ以外の場合は、候補を処理ステップに戻ります。
⌛ 待機中：要素のnetworkState属性をNETWORK_NO_SOURCE値に設定します。
⌛ 要素のポスター表示フラグをtrueに設定します。
⌛ メディア要素を指定してメディア要素タスクをキューに入れ、要素のロードイベント遅延フラグをfalseに設定します。これにより、ロードイベントの遅延が停止します。
pointerの後のノードがリストの終了以外のノードになるまで待機します。（このステップは永遠に待機する可能性があります。）
安定状態を待機します。同期セクションは、アルゴリズムが同期セクションが終了したと言うまで、このアルゴリズムの残りのすべてのステップで構成されます。（同期セクションのステップには⌛マークが付いています。）
⌛ 要素のロードイベント遅延フラグをtrueに戻します（これにより、まだ発火されていない場合に備えて、ロードイベントが再び遅延されます）。
⌛ networkStateをNETWORK_LOADINGに戻します。
⌛ 上記の次の候補を見つけるステップに戻ります。
プロミスのリストpromises を伴う専用メディアソース失敗ステップは、次のステップです。
error属性をMediaErrorを作成する結果に設定し、MEDIA_ERR_SRC_NOT_SUPPORTEDを返します。
要素のnetworkState属性をNETWORK_NO_SOURCEに設定します。
要素のポスター表示フラグを true に設定します。
イベントを発生させるという作業を続けます。イベント名は、errorであり、対象はメディア要素です。
保留中の再生プロミスを拒否するをpromisesと共に、"NotSupportedError"のDOMExceptionを使用して実行します。
要素のロードイベントを遅延させるフラグを false に設定します。これにより、ロードイベントを遅延させることが停止します。
与えられたメディア応答を検証するためには、応答 response、メディアリソース resource、および
"entire resource" または (number, number or "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`値と一致しない場合、それは失敗と見なされません。
internalResponse のURLが
null の場合、origin を "rewritten" に設定します。それ以外の場合は、internalResponse のURLのオリジンに設定します。
previousOrigin をresourceのオリジンとして設定します。
以下のいずれかが真である場合：
previousOrigin が "none" である。
origin とpreviousOriginが "rewritten" である。
origin とpreviousOriginがオリジンであり、originがpreviousOriginと同じオリジンである。
この場合、resource のオリジンをoriginに設定します。
それ以外の場合、responseがCORS-クロスオリジンである場合は、falseを返します。
それ以外の場合、resource のオリジンを"multiple"に設定します。
これは、範囲ヘッダーを持つ不透明な応答が、異なるオリジンからの他の応答と一緒にパッチされることで情報が漏洩しないようにします。
true を返します。
メディア要素 および指定された URL レコード または メディアプロバイダオブジェクト のための リソースフェッチアルゴリズム は次の通りです:
mode をリモートとします。
アルゴリズムがメディアプロバイダーオブジェクトで呼び出された場合、mode をローカルに設定します。
それ以外の場合：
object を、URLレコードのBLOB URLエントリとメディア要素のノードドキュメントの関連する設定オブジェクトを使用してBLOBオブジェクトを取得した結果とします。
object がメディアプロバイダーオブジェクトである場合、mode をローカルに設定します。
mode がリモートである場合、current media resource をこのアルゴリズムに渡されたURLレコードによって与えられるリソースとします。それ以外の場合、current media resource をメディアプロバイダーオブジェクトによって与えられるリソースとします。いずれにしても、current media resource は要素のメディアリソースになります。
メディア要素の保留中のテキストトラックのリストから、すべてのメディアリソース固有のテキストトラックを削除します（もしあれば）。
次のリストから適切な手順を実行します：
オプションで、次のサブステップを実行します。これは、ユーザーエージェントがユーザーが明示的に要求するまでリソースのフェッチを試みないようにする場合（たとえば、preload属性のnoneキーワードを実装する方法として）の期待される動作です。
networkStateをNETWORK_IDLEに設定します。
メディア要素を指定してメディア要素タスクをキューに入れ、要素でsuspendという名前のイベントを発火させます。
メディア要素を指定してメディア要素タスクをキューに入れ、要素のロードイベント遅延フラグをfalseに設定します。これにより、ロードイベントの遅延が停止します。
タスクが実行されるのを待ちます。
実装定義のイベント（たとえば、ユーザーがメディア要素の再生開始を要求する）を待ちます。
要素のロードイベント遅延フラグをtrueに戻します（これにより、まだ発火されていない場合に備えて、ロードイベントが再び遅延されます）。
networkStateをNETWORK_LOADINGに設定します。
destination を、メディア要素がaudio要素である場合は「audio」、それ以外の場合は「video」とします。
request を、current media resourceのURLレコード、destination、およびメディア要素のcrossoriginコンテンツ属性の現在の状態を指定して潜在的なCORSリクエストを作成した結果とします。
requestのクライアントを、メディア要素のノードドキュメントの関連する設定オブジェクトに設定します。
requestのイニシエータータイプをdestinationに設定します。
byteRange（「entire resource」または（数値、数値または「until end」）タプル）を、メディアデータの欠落データを満たすために必要なバイト範囲とします。この値は実装定義であり、コーデック、ネットワーク条件、またはその他のヒューリスティックに依存する場合があります。ユーザーエージェントはリソースを完全にフェッチすることを決定する場合があり、その場合byteRangeは「entire resource」になります。バイトオフセットから最後までフェッチする場合、byteRangeは（数値、「until end」）になります。または、2つのバイトオフセット間の範囲をフェッチする場合、byteRangeは2つのオフセットを表す（数値、数値）タプルになります。
byteRangeが「entire resource」でない場合：
byteRange[1]が「until end」である場合、byteRange[0]を指定してrequestに範囲ヘッダーを追加します。
それ以外の場合、byteRange[0]とbyteRange[1]を指定してrequestに範囲ヘッダーを追加します。
レスポンスresponseを指定して、processResponseを次のステップに設定して、requestをフェッチします：
globalをメディア要素のノードドキュメントの関連するグローバルオブジェクトとします。
updateMediaを、メディア要素を指定してメディア要素タスクをキューに入れ、以下のメディアデータ処理ステップリストから最初の適切なステップを実行することとします。（この作業がネットワークタスクソースを使用するのではなく、適切なメディア要素イベントタスクソースに対して行われるように、このために新しいタスクが使用されます。）
processEndOfMediaを次のステップとします：フェッチプロセスがメディアデータのデコードを含め、エラーなしで完了し、すべてのデータがネットワークアクセスなしでユーザーエージェントに利用可能である場合、ユーザーエージェントは以下の最終ステップに進まなければなりません。これは、ウェブラジオなどの無限のリソースをストリーミングする場合や、リソースがユーザーエージェントのデータキャッシュ能力よりも長い場合など、決して起こらない可能性があります。
current media resourceとbyteRangeを指定してresponseを検証した結果がfalseである場合、これらのステップを中止します。
それ以外の場合、updateMedia、processEndOfMedia、空のアルゴリズム、およびglobalを指定して、responseのボディを段階的に読み取ります。
この方法で取得されたresponseの安全でないレスポンスの内容でメディアデータを更新します。responseはCORS同一オリジンまたはCORSクロスオリジンである可能性があります。これは、メディアデータで参照される字幕がAPIで公開されるかどうか、およびvideo要素の場合、ビデオが描画されるときにcanvasが汚染されるかどうかに影響します。
メディア要素ストールタイムアウトは、実装定義の長さの時間であり、約3秒である必要があります。 メディアデータを積極的に取得しようとしているメディア要素が、メディア要素ストールタイムアウトに等しい期間データを受信できなかった場合、ユーザーエージェントはメディア要素を指定してメディア要素タスクをキューに入れ、次の処理を実行する必要があります：
要素でstalledという名前のイベントを発火させます。
要素の現在ストールしているをtrueに設定します。
ユーザーエージェントは、ユーザーがメディアデータのダウンロードを選択的にブロックまたは遅くすることを許可する場合があります。 メディア要素のダウンロードが完全にブロックされた場合、ユーザーエージェントは（接続が閉じられたかのように動作するのではなく）ストールしたかのように動作する必要があります。ダウンロードの速度は、たとえば、同じ帯域幅を共有する他の接続とのバランスを取るために、ユーザーエージェントによって自動的に調整される場合もあります。
ユーザーエージェントは、たとえば、1時間のメディアリソースの5分をバッファリングした後、ユーザーがリソースを再生するかどうかを決定するのを待っている間、インタラクティブリソースでユーザー入力を待っている間、またはユーザーがページから移動したときに、いつでもコンテンツをこれ以上ダウンロードしないことを決定する場合があります。メディア要素のダウンロードが中断された場合、ユーザーエージェントはメディア要素を指定してメディア要素タスクをキューに入れ、networkStateをNETWORK_IDLEに設定し、要素でsuspendという名前のイベントを発火させます。リソースのダウンロードが再開された場合、ユーザーエージェントはメディア要素を指定してメディア要素タスクをキューに入れ、networkStateをNETWORK_LOADINGに設定します。
これらのタスクのキューイングの間、ロードは中断されます（したがって、上記で説明したようにprogressイベントは発火しません）。
preload属性は、autoplay属性がない場合でも、作成者が推奨すると考えるバッファリングの量に関するヒントを提供します。
ユーザーエージェントがダウンロードを完全に中断することを決定した場合、たとえば、ユーザーが再生を開始するまでこれ以上コンテンツをダウンロードせずに待機している場合、ユーザーエージェントはメディア要素を指定してメディア要素タスクをキューに入れ、要素のロードイベント遅延フラグをfalseに設定します。これにより、ロードイベントの遅延が停止します。
上記の手順はリクエストを発行するためのアルゴリズムを示していますが、ユーザーエージェントは、特にエラー状態の場合、これらの正確な手段以外の手段を使用する場合があります。たとえば、ユーザーエージェントはサーバーに再接続したり、ストリーミングプロトコルに切り替えたりする場合があります。ユーザーエージェントは、リソースのフェッチを試みるのをあきらめた場合にのみ、リソースがエラーであると見なし、上記の手順のエラー分岐に進む必要があります。
メディアリソースの形式を決定するために、ユーザーエージェントはオーディオとビデオを具体的にスニッフィングするためのルールを使用する必要があります。
ロードが中断されていない間（下記参照）、350ms（±200ms）ごと、または受信したバイトごと、いずれか頻度が低い方で、メディア要素を指定してメディア要素タスクをキューに入れます：
要素でprogressという名前のイベントを発火させます。
要素の現在ストールしているをfalseに設定します。
ユーザーエージェントがメディアリソースの一部を取得するためにまだネットワークアクセスが必要な場合でも、ユーザーエージェントはこのステップにとどまる必要があります。
たとえば、ユーザーエージェントがビデオの前半を破棄した場合、再生が終了した後でも、ユーザーエージェントはこのステップにとどまります。なぜなら、ユーザーが最初に戻る可能性があるからです。実際、この状況では、再生が終了すると、ユーザーエージェントは、前述のようにsuspendイベントを発火させることになります。
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が使用可能かどうかを確立する前に発生するその他の致命的なネットワークエラー、ならびにサポートされていないコンテナ形式を使用しているファイル、またはすべてのデータに対してサポートされていないコーデックを使用しているファイルは、ユーザーエージェントに次のステップを実行させる必要があります：
ユーザーエージェントはフェッチプロセスをキャンセルする必要があります。
このサブアルゴリズムを中止し、リソース選択アルゴリズムに戻ります。
オーディオトラックを表すAudioTrackオブジェクトを作成します。
メディア要素のaudioTracks属性のAudioTrackListオブジェクトを新しいAudioTrackオブジェクトで更新します。
enableを不明とします。
メディアリソースまたはcurrent media resourceのURLが有効にする特定のオーディオトラックセットを示している場合、またはユーザーエージェントがユーザーエクスペリエンスを向上させるために特定のオーディオトラックの選択を容易にする情報を持っている場合：このオーディオトラックが有効にするものの1つである場合、enableをtrueに設定し、それ以外の場合はenableをfalseに設定します。
これはメディアフラグメント構文によってトリガーされる可能性がありますが、たとえばユーザーエージェントがステレオオーディオトラックよりも5.1サラウンドサウンドオーディオトラックを選択することによってもトリガーされる可能性があります。
enableがまだ不明である場合、メディア要素にまだ有効なオーディオトラックがない場合、enableをtrueに設定し、それ以外の場合はenableをfalseに設定します。
enableがtrueである場合、このオーディオトラックを有効にし、それ以外の場合はこのオーディオトラックを有効にしません。
このAudioTrackListオブジェクトで、track属性を新しいAudioTrackオブジェクトに初期化して、TrackEventを使用してaddtrackという名前のイベントを発火させます。
ビデオトラックを表すVideoTrackオブジェクトを作成します。
メディア要素のvideoTracks属性のVideoTrackListオブジェクトを新しいVideoTrackオブジェクトで更新します。
enableを不明とします。
メディアリソースまたはcurrent media resourceのURLが有効にする特定のビデオトラックセットを示している場合、またはユーザーエージェントがユーザーエクスペリエンスを向上させるために特定のビデオトラックの選択を容易にする情報を持っている場合：このビデオトラックがそのような最初のビデオトラックである場合、enableをtrueに設定し、それ以外の場合はenableをfalseに設定します。
これもメディアフラグメント構文によってトリガーされる可能性があります。
enableがまだ不明である場合、メディア要素にまだ選択されたビデオトラックがない場合、enableをtrueに設定し、それ以外の場合はenableをfalseに設定します。
enableがtrueである場合、このトラックを選択し、以前に選択されたビデオトラックの選択を解除します。それ以外の場合は、このビデオトラックを選択しません。他のトラックの選択が解除された場合、changeイベントが発火します。
このVideoTrackListオブジェクトで、track属性を新しいVideoTrackオブジェクトに初期化して、TrackEventを使用してaddtrackという名前のイベントを発火させます。
これは、リソースが使用可能であることを示します。ユーザーエージェントは次のサブステップに従う必要があります：
メディアデータに基づいて、現在の再生位置と最も早い可能な位置の目的のためにメディアタイムラインを確立します。
前のステップで確立されたメディアタイムラインのゼロ時間に対応する日時（もしあれば）にタイムラインオフセットを更新します。メディアリソースによって明示的な日時が与えられていない場合、タイムラインオフセットはNot-a-Number（NaN）に設定されなければなりません。
上記で確立されたメディアタイムライン上のリソースの最後のフレームの時間（既知の場合）でduration属性を更新します。不明な場合（たとえば、原則として無限のストリーム）、duration属性を正の無限大の値に更新します。
ユーザーエージェントは、この時点で要素でdurationchangeという名前のイベントを発火させるために、メディア要素を指定してメディア要素タスクをキューに入れます。
video要素の場合、videoWidth属性とvideoHeight属性を設定し、メディア要素でresizeという名前のイベントを発火させるために、メディア要素を指定してメディア要素タスクをキューに入れます。
寸法がその後変更された場合、さらにresizeイベントが発火します。
readyState属性をHAVE_METADATAに設定します。
readyState属性を新しい値に設定する一部として、loadedmetadataDOMイベントが発火します。
jumpedをfalseとします。
メディア要素のデフォルトの再生開始位置がゼロより大きい場合、その時間にシークし、jumpedをtrueとします。
メディア要素のデフォルトの再生開始位置をゼロとします。
initial playback positionを 0 とします。
メディアリソースまたはcurrent media resourceのURLが特定の開始時間を示している場合、initial playback positionをその時間に設定し、jumpedがまだfalseである場合は、その時間にシークします。
たとえば、メディアフラグメント構文をサポートするメディア形式では、フラグメントを使用して開始位置を示すことができます。
有効なオーディオトラックがない場合、オーディオトラックを有効にします。これにより、changeイベントが発火します。
選択されたビデオトラックがない場合、ビデオトラックを選択します。これにより、changeイベントが発火します。
readyState属性がHAVE_CURRENT_DATAに達したら、loadeddataイベントが発火した後、要素のロードイベント遅延フラグをfalseに設定します。これにより、ロードイベントの遅延が停止します。
各メディアリソースのメタデータをまだフェッチしている間にネットワーク使用量を削減しようとしているユーザーエージェントは、この時点でバッファリングも停止し、以前に説明したルールに従います。これには、networkState属性がNETWORK_IDLE値に切り替わり、suspendイベントが発火することが含まれます。
ユーザーエージェントは、メディアリソースの期間を決定し、再生前にこのステップを実行することが要求されます。
メディア要素でprogressという名前のイベントを発火させます。
networkStateをNETWORK_IDLEに設定し、メディア要素でsuspendという名前のイベントを発火させます。
ユーザーエージェントがメディアデータを破棄し、それを再度取得するためにネットワークアクティビティを再開する必要がある場合、メディア要素を指定してメディア要素タスクをキューに入れ、networkStateをNETWORK_LOADINGに設定します。
ユーザーエージェントがメディアリソースをロードしたままにできる場合、アルゴリズムは以下の最終ステップに進み、アルゴリズムを中止します。
ユーザーエージェントがcurrent media
resourceが使用可能かどうかを確立した後（つまり、メディア要素のreadyState属性がもはやHAVE_NOTHINGでなくなった後）に発生する致命的なネットワークエラーは、ユーザーエージェントに次のステップを実行させる必要があります：
ユーザーエージェントはフェッチプロセスをキャンセルする必要があります。
MEDIA_ERR_NETWORKでMediaErrorを作成した結果にerror属性を設定します。
要素のnetworkState属性をNETWORK_IDLE値に設定します。
要素のロードイベント遅延フラグをfalseに設定します。これにより、ロードイベントの遅延が停止します。
メディア要素でerrorという名前のイベントを発火させます。
全体のリソース選択アルゴリズムを中止します。
メディアデータのデコードにおける致命的なエラーで、ユーザーエージェントがcurrent
media resourceが使用可能かどうかを確立した後（つまり、メディア要素のreadyState属性がもはやHAVE_NOTHINGでなくなった後）に発生するものは、ユーザーエージェントに次のステップを実行させる必要があります：
ユーザーエージェントはフェッチプロセスをキャンセルする必要があります。
MEDIA_ERR_DECODEでMediaErrorを作成した結果にerror属性を設定します。
要素のnetworkState属性をNETWORK_IDLE値に設定します。
要素のロードイベント遅延フラグをfalseに設定します。これにより、ロードイベントの遅延が停止します。
メディア要素でerrorという名前のイベントを発火させます。
全体のリソース選択アルゴリズムを中止します。
フェッチプロセスがユーザーによって中止された場合、たとえばユーザーが「停止」ボタンを押した場合、ユーザーエージェントは次のステップを実行する必要があります。これらのステップは、これらのステップの実行中にload()メソッド自体が呼び出された場合には従いません。上記の手順がその特定の種類の中止を処理するためです。
ユーザーエージェントはフェッチプロセスをキャンセルする必要があります。
MEDIA_ERR_ABORTEDでMediaErrorを作成した結果にerror属性を設定します。
メディア要素でabortという名前のイベントを発火させます。
メディア要素のreadyState属性の値がHAVE_NOTHINGと等しい場合、要素のnetworkState属性をNETWORK_EMPTY値に設定し、要素のポスター表示フラグをtrueに設定し、要素でemptiedという名前のイベントを発火させます。
それ以外の場合、要素のnetworkState属性をNETWORK_IDLE値に設定します。
要素のロードイベント遅延フラグをfalseに設定します。これにより、ロードイベントの遅延が停止します。
全体のリソース選択アルゴリズムを中止します。
部分的に使用可能であるが最適にレンダリングできないデータをサーバーが返した場合、ユーザーエージェントは処理できるビットのみをレンダリングし、残りは無視する必要があります。
メディアデータがCORS同一オリジンである場合、関連するデータでメディアリソース固有のテキストトラックを公開する手順を実行します。
クロスオリジンビデオは字幕を公開しません。これは、悪意のあるサイトがユーザーのイントラネット上の機密ビデオから字幕を読み取るなどの攻撃を可能にするためです。
最終ステップ：ユーザーエージェントがこのステップに到達した場合（リソース全体がロードされ、利用可能な状態に保たれた場合にのみ発生する可能性があります）：全体のリソース選択アルゴリズムを中止します。
メディア要素がメディア要素のメディアリソース固有トラックを忘れる際に、ユーザーエージェントは、メディア要素のテキストトラックのリストからすべてのメディアリソース固有のテキストトラックを削除し、次にメディア要素のaudioTracks属性のAudioTrackListオブジェクトを空にし、次にメディア要素のvideoTracks属性のVideoTrackListオブジェクトを空にします。これに関連して、イベント(特にremovetrackイベント)は発生しません。代わりに、このアルゴリズムを呼び出すアルゴリズムによって発生するerrorおよびemptiedイベントを使用できます。
preload属性は、以下のキーワードと状態を持つ列挙型属性です。
| キーワード | 状態 | 簡易説明 |
|---|---|---|
auto
| 自動 | ユーザーエージェントに対して、サーバーにリスクを与えることなくユーザーのニーズを最優先できる（楽観的にリソース全体をダウンロードしてもよい）ことを示唆します。 |
none
| なし | ユーザーエージェントに対して、作者がユーザーにメディアリソースが不要だと考えているか、またはサーバーが不要なトラフィックを最小限にしたいと考えていることを示唆します。 この状態は、バッファリングが開始された場合（例: ユーザーが「再生」を押した場合）に、メディアリソースをどれほど積極的にダウンロードするべきかについての示唆は提供しません。 |
metadata
| メタデータ |
ユーザーエージェントに対して、作者がユーザーにメディアリソース自体は不要だが、リソースのメタデータ（寸法、トラックリスト、再生時間など）、場合によっては最初の数フレーム程度の取得は妥当だと考えていることを示唆します。ユーザーエージェントが正確にメタデータのみを取得した場合、メディア要素のreadyState属性はHAVE_METADATAに設定されますが、通常はいくつかのフレームも取得され、HAVE_CURRENT_DATAやHAVE_FUTURE_DATAとなる場合が多いです。メディアリソースが再生中の場合、ユーザーエージェントに帯域幅が乏しいと考慮するよう示唆し、メディアデータを一貫した再生を維持できる最も遅い速度でダウンロードするよう制限を提案します。
|
属性は、メディアリソースがバッファリングまたは再生されている間であっても変更可能です。上記の表の説明は、そのことを念頭に置いて解釈する必要があります。
著者は属性を「none」または「metadata」から「auto」にユーザーが再生を開始した後に動的に切り替えることがあります。例えば、多くのビデオがあるページでは、リクエストされるまでこれらのビデオがダウンロードされないように指定するが、一度リクエストされた場合は積極的にダウンロードすることを示すために使用されるかもしれません。
preload属性は、著者が最良のユーザー体験をもたらすと考えるものについて、ユーザーエージェントにヒントを提供することを目的としています。この属性は、例えば明示的なユーザー設定や利用可能な接続性に基づいて、完全に無視されることもあります。
autoplay属性は、preload属性をオーバーライドすることができます（メディアが再生される場合、それがpreload属性によって示唆されるヒントに関係なく、自然にバッファリングが必要であるため）。ただし、両方を含めることはエラーではありません。
media.buffered
現在のすべてのエンジンでサポートされています。
TimeRangesオブジェクトを返します。このオブジェクトは、ユーザーエージェントがバッファリングしたメディアリソースの範囲を表します。
buffered属性は、新しい静的な正規化されたTimeRangesオブジェクトを返しなければなりません。このオブジェクトは、ユーザーエージェントがバッファリングしたメディアリソースの範囲を表します。この属性が評価される時点で、ユーザーエージェントは、たとえそれが煩雑な検査によってしか判断できないものであっても、利用可能な範囲を正確に決定しなければなりません。
通常、これはゼロ点を基準とした単一の範囲になりますが、例えば、ユーザーエージェントがシークに応じてHTTPレンジリクエストを使用する場合、複数の範囲が存在する可能性があります。
ユーザーエージェントは、以前にバッファリングされたデータを破棄することがあります。
したがって、ある時点でbuffered属性によって返されるオブジェクトの範囲に含まれていた時間位置が、後の時点で同じ属性によって返されるオブジェクトの範囲に含まれなくなることがあります。
新しいオブジェクトを毎回返すことは、属性ゲッターにとって悪いパターンであり、変更にコストがかかるためここでのみ定められています。新しいAPIにはコピーされるべきではありません。
media.duration
現在のすべてのエンジンでサポートされています。
メディアリソースの長さを秒単位で返します。このとき、メディアリソースの開始が時間ゼロに設定されていると仮定します。
期間が利用できない場合はNaNを返します。
無限ストリームの場合はInfinityを返します。
media.currentTime [ = value ]
現在のすべてのエンジンでサポートされています。
公式再生位置を秒単位で返します。
指定した時間にシークするように設定できます。
メディアリソースには、メディアタイムラインがあり、時間（秒単位）をメディアリソース内の位置にマッピングします。タイムラインの起点は、その最も早く定義された位置です。タイムラインの期間は、その最後に定義された位置です。
メディアタイムラインの確立: もしメディアリソースが、起点が負でない明示的なタイムライン（すなわち、各フレームに特定の時間オフセットを与え、最初のフレームにゼロまたは正のオフセットを与える）を何らかの形で指定する場合、メディアタイムラインはそのタイムラインであるべきです。（メディアリソースがタイムラインを指定できるかどうかは、メディアリソースの形式によります。）メディアリソースが明示的な開始時刻と日付を指定する場合、その時刻と日付はメディアタイムラインのゼロポイントと見なされるべきです。タイムラインオフセットは、時間と日付であり、getStartDate()メソッドを使用して公開されます。
もしメディアリソースが不連続のタイムラインを持っている場合、ユーザーエージェントは、リソースの開始時に使用されたタイムラインをリソース全体にわたって延長し、メディアタイムラインが最も早い可能な位置（以下に定義）の時点から直線的に増加するようにしなければなりません。これにより、基になるメディアデータに順序が狂ったタイムコードや重複するタイムコードが含まれていても、メディアリソースのタイムラインが一貫して線形に進むことが保証されます。
たとえば、2つのクリップを1つのビデオファイルに連結した場合、ビデオ形式は元のクリップの時間を公開しますが、ビデオデータは、たとえば、00:15..00:29、その後に00:05..00:38というタイムラインを公開するかもしれません。しかし、ユーザーエージェントはこれらの時間を公開せず、代わりに00:15..00:29、その後に00:29..01:02というタイムラインを単一のビデオとして公開します。
明示的なタイムラインを持たないメディアリソースの稀なケースでは、メディアタイムライン上のゼロ時間は、メディアリソースの最初のフレームに対応する必要があります。さらに稀なケースとして、フレームの期間も含めた明示的なタイミング情報が一切ないメディアリソースの場合、ユーザーエージェントは各フレームの時間を実装定義の方法で決定しなければなりません。
明示的なタイムラインを持たないが、フレーム期間が明示されているファイル形式の例としては、アニメーションGIF形式があります。タイミングが一切明示されていないファイル形式の例としては、MJPEGストリームの形式としてよく使用されるJPEGプッシュ形式（multipart/x-mixed-replaceでJPEGフレームを含むもの）があります。
タイミング情報のないリソースの場合でも、ユーザーエージェントがサーバーから最初に提供されたフレームよりも早い時点にシークできる場合は、ゼロ時間はメディアリソースの最も早いシーク可能な時点に対応する必要があります。そうでない場合は、ユーザーエージェントがストリームを受信し始めたメディアリソースの最初のフレームに対応する必要があります。
執筆時点では、明示的なフレーム時間オフセットを持たないが、サーバーから送信された最初のフレームの前にシークできる形式は知られていません。
TV放送局からのストリームを考えてみましょう。これは10月の晴れた金曜日の午後にストリーミングを開始し、常に接続してくるユーザーエージェントに対して同じメディアタイムラインでメディアデータを送信し、そのゼロ時間をこのストリームの開始時に設定します。数ヶ月後、このストリームに接続するユーザーエージェントは、受信する最初のフレームの時間が何百万秒もあることに気づくでしょう。getStartDate()メソッドは、常に放送開始日を返し、これにより、コントローラーはスクラバーに相対時間（「8ヶ月4時間12分23秒」）ではなく実際の時間（例：「午後2時30分」）を表示できるようになります。
いくつかの連結されたフラグメントを含むビデオを配信するストリームを考えてみましょう。これは、ユーザーエージェントが特定の時間を要求できないサーバーによって配信され、代わりにビデオデータを決められた順序でストリーミングし、配信される最初のフレームが常にゼロ時間として識別されます。ユーザーエージェントがこのストリームに接続し、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秒から3600秒（一時間）に延びるメディアタイムラインとして公開されます。ストリーミングサーバーが2番目のクリップの終わりで切断されたと仮定すると、duration属性は3600を返すことになります。この場合、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秒から3300秒（55分）に延びるメディアタイムラインとしてこれを公開することになります。この場合、getStartDate()メソッドは、2010-03-20
23:20:00 UTCに対応するDateオブジェクトを返します。
これらの両方の例において、seekable属性は、コントローラーが実際にUIで表示したい範囲を示します。通常、サーバーが任意の時間へのシークをサポートしていない場合、これはユーザーエージェントがストリームに接続した時点から最新のフレームまでの時間範囲を意味します。ただし、ユーザーエージェントが以前の情報を破棄し始めた場合、実際の範囲は短くなるかもしれません。
いずれの場合でも、ユーザーエージェントは、確立されたメディアタイムラインを使用して最も早い可能な位置（以下に定義）がゼロ以上であることを確認しなければなりません。
メディアタイムラインには、関連する時計もあります。どの時計が使用されるかはユーザーエージェントによって定義され、メディアリソースに依存することがありますが、ユーザーの壁時計に近いものにする必要があります。
メディア要素には現在の再生位置があり、これは最初（すなわちメディアデータがない場合）にはゼロ秒でなければなりません。現在の再生位置はメディアタイムライン上の時間です。
メディア要素には、正式な再生位置もあり、これも最初はゼロ秒に設定されていなければなりません。正式な再生位置は、スクリプトが実行されている間、安定して保たれる現在の再生位置の概算です。
メディア要素には、デフォルトの再生開始位置もあり、これも最初はゼロ秒に設定されていなければなりません。この時間は、メディアが読み込まれる前でも要素をシークできるようにするために使用されます。
各メディア要素にはポスターフラグを表示があり、メディア要素が作成されるとき、このフラグはtrueに設定されていなければなりません。このフラグは、ビデオ要素に対して、ビデオコンテンツの代わりにポスターフレームを表示するタイミングを制御するために使用されます。
currentTime属性は、取得時に、メディア要素のデフォルトの再生開始位置を返さなければなりません。ただし、それがゼロである場合は、要素の正式な再生位置を返さなければなりません。返される値は秒単位で表現されなければなりません。設定時には、メディア要素のreadyStateがHAVE_NOTHINGである場合、新しい値をメディア要素のデフォルトの再生開始位置に設定しなければなりません。それ以外の場合、新しい値を正式な再生位置に設定し、その後新しい値にシークしなければなりません。この新しい値は秒単位で解釈されなければなりません。
リソースがメディアリソースのストリーミングリソースである場合、ユーザーエージェントはそのリソースの特定の部分をバッファから消去された後に取得できなくなるかもしれません。同様に、いくつかのメディアリソースにはゼロから始まらないメディアタイムラインが存在するかもしれません。最も早い可能な位置は、ユーザーエージェントが再び取得できるストリームまたはリソース内の最も早い位置です。これはまた、メディアタイムライン上の時間でもあります。
最も早い可能な位置はAPIに明示的に公開されていません。それは、属性のseekableで返されるオブジェクトの最初の範囲の開始時点、またはそれがない場合は現在の再生位置に対応します。
最も早い可能な位置が変わると、次のようにします。現在の再生位置が最も早い可能な位置よりも前にある場合、ユーザーエージェントはシークしなければなりません。それ以外の場合、過去15～250ミリ秒の間に要素でtimeupdateイベントを発火していない場合、またそのようなイベントのイベントハンドラーがまだ実行中でない場合、ユーザーエージェントはメディア要素タスクをキューに追加し、そのメディア要素でtimeupdateイベントを発火しなければなりません。
上記の要件およびクリップのメタデータが判明したときに発生するリソースフェッチアルゴリズムの要件のために、現在の再生位置は最も早い可能な位置よりも小さくなることはありません。
任意の時点で、ユーザーエージェントがオーディオまたはビデオトラックが終了し、そのトラックに関連するすべてのメディアデータがメディアタイムラインの最も早い可能な位置よりも前に対応していると判断した場合、 ユーザーエージェントはメディア要素タスクをキューに追加することができます。 このメディア要素に対して以下の手順を実行します。
トラックをaudioTracks属性のAudioTrackListオブジェクトから、またはvideoTracks属性のVideoTrackListオブジェクトから削除します。
イベントを発火し、トラックを表すAudioTrackまたはVideoTrackオブジェクトを使用して、removetrackという名前のイベントをメディア要素のAudioTrackListまたはVideoTrackListオブジェクトで発火します。
duration属性は、メディアリソースの終了時点の時間を秒単位で返さなければなりません。もしメディアデータが利用できない場合、この属性はNot-a-Number
(NaN) 値を返さなければなりません。メディアリソースが境界のないもの（例: ストリーミングラジオや終了時刻が発表されていないライブイベントなど）であると知られている場合、この属性は正の無限大 (Infinity)
値を返さなければなりません。
ユーザーエージェントは、メディアリソースの時間を、メディアデータのいずれかを再生する前に、また、readyStateをHAVE_METADATA以上の値に設定する前に、複数のリソースの部分を取得する必要がある場合でも、決定しなければなりません。
メディアリソースの長さが既知の値に変化した場合（例えば未知から既知に、または以前の既知の長さから新しい長さに変更された場合など）、ユーザーエージェントは メディア要素タスクをキュー し、メディア要素 に対して durationchange イベントを発火 しなければなりません。（新しいメディアリソースの読み込みの一環として duration がリセットされた場合は、このイベントは発火しません。）もし duration の変更により 現在の再生位置 がメディアリソースの終了時刻を超える場合には、ユーザーエージェントは 終了時刻までシーク しなければなりません。
何らかの理由で「無限」のストリームが終了した場合、持続時間は正の無限大からストリーム内の最後のフレームまたはサンプルの時間に変わり、durationchangeイベントが発火します。同様に、ユーザーエージェントが最初にメディアリソースの持続時間を正確に決定せずに推定し、その後、新しい情報に基づいて推定を修正した場合、持続時間は変更され、durationchangeイベントが発火します。
いくつかのビデオファイルには、メディアタイムラインのゼロ時間に対応する明示的な日付と時刻があり、タイムラインオフセットとして知られています。初期状態では、タイムラインオフセットはNot-a-Number (NaN)に設定される必要があります。
getStartDate()メソッドは、現在のタイムラインオフセットを表す新しいDateオブジェクトを返さなければなりません。
loop属性は、指定されている場合、メディア要素がメディアリソースの終了時点に到達した際にリソースの開始位置に戻って再生を続けるようにするブール属性です。
media.readyState
すべての現行エンジンでサポートされています。
下記のリストにあるコードから、現在の再生位置に関して、要素の現在の状態を示す値を返します。
メディア要素には、レディ状態があり、これは現在の再生位置でレンダリングする準備がどの程度整っているかを示します。可能な値は次の通りです。特定の時点でのメディア要素のレディ状態は、要素の状態を表す最大の値です。
HAVE_NOTHING（数値値 0）
メディアリソースに関する情報は何も利用できません。現在の再生位置に関するデータはありません。メディア要素のnetworkState属性がNETWORK_EMPTYに設定されている場合、常にHAVE_NOTHING状態になります。
HAVE_METADATA（数値値 1）
リソースの持続時間が利用可能であることを示すのに十分なリソースが取得されました。ビデオ要素の場合、ビデオの寸法も利用可能です。メディアデータは現在の再生位置に関しては利用できません。
HAVE_CURRENT_DATA（数値値 2）
現在の再生位置に関するデータは利用可能ですが、ユーザーエージェントが再生方向にHAVE_METADATA状態に戻らずに現在の再生位置を進められるほどのデータが不足しているか、再生方向にさらに取得できるデータがないかのいずれかです。例えば、ビデオの場合、現在のフレームのデータはあるが、次のフレームのデータがない場合や、再生が終了した場合がこれに該当します。
HAVE_FUTURE_DATA（数値値 3）
現在の再生位置に関するデータが利用可能であり、HAVE_METADATA状態に戻らずに、再生方向に現在の再生位置を少し進めるのに十分なデータも利用可能です。また、テキストトラックが準備完了していることも条件に含まれます。
HAVE_ENOUGH_DATA（数値値 4）
状態HAVE_FUTURE_DATAに記載されたすべての条件が満たされており、さらに次のいずれかの条件が当てはまります：
playbackRateで現在の再生位置が進行しても、再生が終了するまでに利用可能なデータを超えないと推定する場合。
実際には、HAVE_METADATAとHAVE_CURRENT_DATAの違いはほとんどありません。主に、ビデオ要素をキャンバスに描画する場合に、何かが描かれる状態（HAVE_CURRENT_DATA以上）と、何も描かれない状態（HAVE_METADATA以下）を区別する場合に意味があります。
メディア要素のnetworkStateがNETWORK_EMPTYでない場合に、そのレディ状態が変わると、ユーザーエージェントは次のステップに従う必要があります。
次のリストから最初に該当するサブステップのセットを適用します：
HAVE_NOTHINGであり、新しいレディ状態がHAVE_METADATAの場合
メディア要素タスクをキューに追加するを実行し、メディア要素に対して、要素にloadedmetadataという名前のイベントを発火します。
このタスクが実行される前に、イベントループのメカニズムの一環として、適切であればビデオ要素のリサイズがレンダリングに反映されます。
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という名前のイベントを発火します。
要素が自動再生の対象でない場合、ユーザーエージェントはこれらのサブステップを中止する必要があります。
ユーザーエージェントは以下のサブステップを実行できます：
paused属性をfalseに設定します。
playという名前のイベントを発火します。
または、要素がビデオ要素である場合、ユーザーエージェントは、要素がビューポートと交差するかどうかを監視し始めることができます。要素がビューポートと交差し始めたとき、要素がまだ自動再生の対象である場合、上記のサブステップを実行します。オプションとして、要素がビューポートと交差しなくなったとき、自動再生可能フラグがまだtrueであり、自動再生属性がまだ指定されている場合、次のサブステップを実行します：
pauseという名前のイベントを発火します。
再生と一時停止のサブステップは、自動再生可能フラグがtrueである限り、要素がビューポートと交差し始めたりやめたりするたびに、何度でも実行される可能性があります。
ユーザーエージェントは自動再生をサポートする必要はなく、ユーザーの好みを尊重することが推奨されています。作成者はスクリプトを使用してビデオの再生を強制するのではなく、自動再生属性を使用することを推奨されており、ユーザーが望まない場合に動作を上書きできるようにすることが推奨されています。
メディア要素のレディ状態がこれらの状態の間で不連続に移動する可能性があります。たとえば、メディア要素の状態が、HAVE_METADATAからHAVE_ENOUGH_DATAへと一気にジャンプし、HAVE_CURRENT_DATAおよびHAVE_FUTURE_DATAの状態を通過しない場合があります。
readyStateIDL属性は、取得時に、メディア要素の現在のレディ状態を表す上記の値を返す必要があります。
autoplay属性は、ブール属性です。存在する場合、ユーザーエージェントは（ここで説明するアルゴリズムに従って）、中断することなくできるだけ早くメディアリソースの再生を自動的に開始します。
作成者はスクリプトを使用して自動再生をトリガーするのではなく、自動再生属性を使用することが推奨されます。これにより、ユーザーが自動再生を望まない場合、たとえばスクリーンリーダーを使用しているときに、動作を上書きすることができます。また、作成者は自動再生の動作をまったく使用せず、ユーザーエージェントがユーザーに再生を明示的に開始させるのを待つことを検討することも推奨されます。
media.paused
すべての現行エンジンでサポートされています。
再生が一時停止されている場合はtrueを返し、そうでない場合はfalseを返します。
media.ended
すべての現行エンジンでサポートされています。
メディアリソースの再生が終了した場合はtrueを返します。
media.defaultPlaybackRate [ = value ]
HTMLMediaElement/defaultPlaybackRate
すべての現行エンジンでサポートされています。
ユーザーがメディアリソースを早送りや逆再生していないときのデフォルトの再生速度を返します。
デフォルトの再生速度を変更するために設定することができます。
デフォルトの速度は再生には直接影響しませんが、ユーザーが早送りモードに切り替えた場合、通常の再生モードに戻るときには再生速度がデフォルトの再生速度に戻ることが期待されます。
media.playbackRate [ = value ]
すべての現行エンジンでサポートされています。
現在の再生速度を返し、1.0は通常の速度を示します。
再生速度を変更するために設定することができます。
media.preservesPitch
HTMLMediaElement/preservesPitch
playbackRateが1.0でない場合にピッチ補正アルゴリズムが使用されている場合はtrueを返します。デフォルト値はtrueです。
音声のピッチを変更するためにfalseに設定することができます。これにより、メディアリソースの音声のピッチが、playbackRateに応じて上下に変化します。これは、美的およびパフォーマンス上の理由で有用です。
media.played
TimeRangesオブジェクトを返し、ユーザーエージェントが再生したメディアリソースの範囲を表します。
media.play()
すべての現行エンジンでサポートされています。
paused属性をfalseに設定し、メディアリソースを読み込み、必要に応じて再生を開始します。再生が終了していた場合、最初から再開します。
media.pause()
すべての現行エンジンでサポートされています。
paused 属性は、メディア要素 が一時停止しているかどうかを表します。この属性は、初期状態でtrueでなければなりません。
メディア要素 は、readyState 属性が
HAVE_NOTHING
状態、HAVE_METADATA
状態、または HAVE_CURRENT_DATA
状態にある場合、または要素が ユーザー操作のために一時停止 している場合、ブロックされたメディア要素 です。
メディア要素 が 潜在的に再生中 であると言われるのは、その paused 属性がfalseであり、要素が
再生を終了していない、再生が エラーで停止していない など、ブロックされたメディア要素 ではない場合です。
waiting
DOMイベントが、潜在的に再生中の要素が readyState 属性が
HAVE_FUTURE_DATA
より低い値に変更されるために再生を停止する結果として発生する可能性があります。
メディア要素 が 自動再生が可能 であると言われるのは、次のすべてが真である場合です。
paused
属性がtrueであること。autoplay
属性が指定されていること。autoplay"
機能を持っていること。メディア要素は、ユーザーエージェントとシステムが現在のコンテキストでメディア再生を許可している場合、再生が許可されているとされます。
例えば、ユーザーエージェントは、メディア要素のWindowオブジェクトが一時的なアクティベーションを持つ場合にのみ再生を許可することがありますが、ミュートされている間に再生を許可する例外を設けることもあります。
メディア要素は、次の条件を満たしたときに再生が終了したとされます:
要素のreadyState属性がHAVE_METADATA以上であり、
次のいずれかの場合:
または:
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
のどちらかであり、
ユーザーエージェントが
メディアリソースの再生を一時停止し、
メディアリソースに時間的にアンカーされた非ゼロ長のコンテンツ、
または メディアリソースの区間に時間的にアンカーされ、その区間よりも長い長さのコンテンツを再生するための場合である。
メディア要素がインバンドコンテンツのために一時停止される例の一つは、ユーザーエージェントが外部のWebVTTファイルから音声説明を再生しているときで、キューのために生成された合成音声がテキストトラックキューの開始時間とテキストトラックキューの終了時間の間の時間よりも長い場合です。
現在の再生位置がメディアリソースの終端に達し、再生の方向が前方の場合、ユーザーエージェントは次の手順に従う必要があります:
メディア要素タスクをキューに入れる際に、メディア要素に対して次の手順を行います:
イベントを発火し、timeupdateという名前のイベントをメディア要素に発生させます。
メディア要素が再生を終了し、再生の方向が前方であり、pausedがfalseである場合、次の手順を実行します:
paused属性をtrueに設定します。
保留中の再生プロミスを取得し、保留中の再生プロミスを拒否し、結果と"AbortError"DOMExceptionを返します。
現在の再生位置が最も早い位置に達し、メディアリソースの再生の方向が後方の場合、ユーザーエージェントはメディア要素タスクをキューに入れ、次にイベントを発火し、timeupdateという名前のイベントを要素に発生させる必要があります。
ここでの「到達」という言葉は、現在の再生位置が通常の再生中に変化する必要があることを意味するものではありません。例えばシークによって到達することもあります。
defaultPlaybackRate属性は、メディアリソースが再生される望ましい速度を、その固有の速度の倍数として示します。この属性は変更可能で、取得時には最後に設定された値を返すか、まだ設定されていない場合は1.0を返す必要があります。設定時には、新しい値に設定されなければなりません。
defaultPlaybackRateは、ユーザーエージェントがユーザーインターフェースをユーザーに公開する際に使用されます。
playbackRate属性は、実際の再生速度を、その固有の速度の倍数として示します。これがdefaultPlaybackRateと等しくない場合、ユーザーが早送りやスローモーション再生などの機能を使用していることを意味します。この属性は変更可能で、取得時には最後に設定された値を返すか、まだ設定されていない場合は1.0を返す必要があります。設定時には、ユーザーエージェントは次の手順に従う必要があります:
指定された値がユーザーエージェントでサポートされていない場合、"NotSupportedError" DOMExceptionをスローします。
playbackRateを新しい値に設定し、要素が潜在的に再生中であれば、再生速度を変更します。
defaultPlaybackRateまたはplaybackRateの属性値が変更されたとき（スクリプトによって設定された場合や、ユーザー操作に応じてユーザーエージェントが直接変更した場合など）、ユーザーエージェントはメディア要素タスクをキューに入れ、メディア要素に対してイベントを発火させ、ratechangeという名前のイベントを発生させる必要があります。ユーザーエージェントは属性の変更をスムーズに処理し、再生において知覚可能なギャップやミュートを発生させてはなりません。
preservesPitchのgetterステップは、再生中にピッチを維持するアルゴリズムが有効である場合にtrueを返すことです。setterステップは、再生に知覚可能なギャップやミュートを発生させることなく、ピッチを維持するアルゴリズムをオンまたはオフに切り替えることです。デフォルトでは、そのようなピッチ維持アルゴリズムは有効でなければなりません（つまり、getterは初期状態でtrueを返します）。
played属性は、属性が評価される時点で、通常の再生中に現在の再生位置の単調な増加によって到達したメディアリソースのメディアタイムライン上の範囲を表す新しい静的な正規化されたTimeRangesオブジェクトを返さなければなりません。
毎回新しいオブジェクトを返すことは、属性ゲッターにとって悪いパターンであり、変更するにはコストがかかるため、ここに保存されています。新しいAPIにコピーしてはいけません。
各メディア要素には、保留中の再生プロミスのリストがあり、初期状態では空でなければなりません。
メディア要素の保留中の再生プロミスを取得するために、ユーザーエージェントは次の手順を実行する必要があります:
promisesを空のプロミスリストとします。
メディア要素の保留中の再生プロミスのリストをpromisesにコピーします。
メディア要素の保留中の再生プロミスのリストをクリアします。
promisesを返します。
メディア要素に対してプロミスのリストpromisesを持つ保留中の再生プロミスを解決するために、ユーザーエージェントはpromises内の各プロミスを未定義で解決する必要があります。
メディア要素に対してプロミスのリストpromisesと例外名errorを持つ保留中の再生プロミスを拒否するために、ユーザーエージェントはpromises内の各プロミスをerrorで拒否する必要があります。
メディア要素の再生について通知するために、ユーザーエージェントは次の手順を実行する必要があります:
保留中の再生プロミスを取得し、その結果をpromisesとします。
次の手順で要素に対してメディア要素タスクをキューに入れる:
保留中の再生プロミスを解決し、promisesを結果として返します。
メディア要素のplay()メソッドが呼び出されたとき、ユーザーエージェントは次の手順を実行する必要があります。
メディア要素が再生が許可されていない場合、プロミスをNotAllowedErrorの"NotAllowedError"のDOMExceptionで拒否された状態で返します。
メディア要素のerror属性がnullでなく、そのコードがMEDIA_ERR_SRC_NOT_SUPPORTEDである場合、プロミスをNotSupportedErrorの"NotSupportedError"のDOMExceptionで拒否された状態で返します。
これは、専用のメディアソースエラー処理手順が実行されたことを意味します。メディア要素ロードアルゴリズムがerror属性をクリアするまで、再生はできません。
promiseを新しいプロミスとし、保留中の再生プロミスのリストにpromiseを追加します。
promiseを返します。
メディア要素に対する内部再生手順は次のとおりです:
メディア要素のnetworkState属性の値がNETWORK_EMPTYの場合、メディア要素のリソース選択アルゴリズムを呼び出します。
再生が終了し、再生の方向が前方の場合、最も早い位置にメディアリソースをシークします。
これは、ユーザーエージェントがメディア要素タスクをキューに入れ、メディア要素でtimeupdateという名前のイベントを発火する原因となります。
pausedの値をfalseに変更します。
メディア要素タスクをキューに入れ、メディア要素でplayという名前のイベントを発火させます。
メディア要素のreadyState属性の値がHAVE_NOTHING、HAVE_METADATA、またはHAVE_CURRENT_DATAの場合、メディア要素タスクをキューに入れ、waitingという名前のイベントを要素に発生させます。
それ以外の場合、メディア要素のreadyState属性の値がHAVE_FUTURE_DATAまたはHAVE_ENOUGH_DATAである場合、要素に対して再生について通知を行います。
それ以外の場合、メディア要素のreadyState属性の値がHAVE_FUTURE_DATAまたはHAVE_ENOUGH_DATAの場合、保留中の再生プロミスを取得し、メディア要素タスクをキューに入れ、保留中の再生プロミスを解決します。
メディア要素は既に再生中です。ただし、プロミスはキューに入れられたタスクが実行される前に拒否される可能性があります。
pause()メソッドが呼び出されたとき、およびユーザーエージェントがメディア要素を一時停止する必要があるとき、ユーザーエージェントは次の手順を実行する必要があります:
メディア要素のnetworkState属性の値がNETWORK_EMPTYの場合、メディア要素のリソース選択アルゴリズムを呼び出します。
メディア要素に対する内部一時停止手順は次のとおりです:
メディア要素のpaused属性がfalseである場合、次の手順を実行します:
pausedの値をtrueに変更します。
保留中の再生の約束を取得し、promisesをその結果として設定します。
メディア要素タスクをキューに入れ、メディア要素に対して次の手順を実行します:
イベントを発火し、要素に対してtimeupdateという名前のイベントを発生させます。
保留中の再生プロミスをpromisesとerrorで拒否し、"AbortError" DOMExceptionを返します。
要素のplaybackRateが正またはゼロの場合、再生の方向は前方です。それ以外の場合、後方になります。
メディア要素が潜在的に再生中であり、そのドキュメントが完全にアクティブなドキュメントである場合、要素のplaybackRate単位のメディア時間でメディアタイムラインのクロックの1単位時間ごとに、現在の再生位置が単調に増加しなければなりません。（この仕様ではこれを常に「増加」と呼びますが、実際には要素のplaybackRateが負である場合、その増加は減少となることがあります。）
要素のplaybackRateは0.0である可能性があり、その場合現在の再生位置は動かず、再生が一時停止されていないにもかかわらず（pausedがtrueにならず、pauseイベントが発生しません）。
この仕様では、ユーザーエージェントが適切な再生速度をどのように達成するかを定義していません。プロトコルやメディアの状況に応じて、ユーザーエージェントがサーバーと交渉して、サーバーが適切な速度でメディアデータを提供するようにすることが考えられます。したがって、（速度が変更されてからサーバーがストリームの再生速度を更新するまでの期間を除いて）クライアントが実際にフレームを落としたり補間したりする必要はありません。
再生の方向が後方である間、対応するオーディオはミュートされなければなりません。要素のplaybackRateが非常に低いか高すぎて、ユーザーエージェントがオーディオを有効に再生できない場合も、対応するオーディオはミュートされなければなりません。要素のplaybackRateが1.0でなく、preservesPitchがtrueである場合、ユーザーエージェントは元の音声のピッチを維持するためにピッチ調整を適用する必要があります。それ以外の場合、ユーザーエージェントはピッチ調整なしで音声を速くまたは遅く再生する必要があります。
メディア要素が潜在的に再生中であるとき、その音声データは要素の実効メディア音量で現在の再生位置と同期して再生されなければなりません。ユーザーエージェントは、イベントループが最後にステップ1に到達したときに有効になっていたオーディオトラックから音声を再生しなければなりません。
メディア要素が潜在的に再生中であり、ドキュメントに存在しない場合、ビデオは再生してはなりませんが、オーディオコンポーネントは再生する必要があります。すべての参照が削除されたためにメディア要素が再生を停止してはならず、そのメディア要素が今後音声を再生できなくなる状態になった場合にのみ、その要素はガベージコレクションされる可能性があります。
明示的な参照が存在しない要素が音声を再生することは可能です。そのような要素がまだ積極的に再生されていない場合でも、たとえば、一時停止解除されているがコンテンツのバッファリングを待っているか、まだバッファリング中であるが、suspendイベントリスナーが再生を開始する可能性があります。たとえメディアリソースに音声トラックが存在しないメディア要素でも、イベントリスナーがメディアリソースを変更する場合は、再び音声を再生する可能性があります。
各メディア要素には、最初は空である必要がある新しく導入されたキューのリストがあります。テキストトラックキューがキューのリストに追加されるたびに、テキストトラックがメディア要素のテキストトラックのリストに含まれている場合、そのキューはメディア要素の新しく導入されたキューのリストに追加される必要があります。テキストトラックがメディア要素のテキストトラックのリストに追加されるたびに、そのテキストトラックのキューのリストにあるすべてのキューがメディア要素の新しく導入されたキューのリストに追加される必要があります。メディア要素の新しく導入されたキューのリストに新しいキューが追加されたときに、メディア要素のポスター表示フラグが設定されていない場合、ユーザーエージェントは時は進む手順を実行する必要があります。
テキストトラックキューがメディア要素のキューのリストから削除されるとき、またはテキストトラックがメディア要素のテキストトラックのリストから削除されるたびに、メディア要素のポスター表示フラグが設定されていない場合、ユーザーエージェントは時は進む手順を実行する必要があります。
メディア要素の現在の再生位置が変更されるとき（例: 再生やシークによって）、ユーザーエージェントは時は進む手順を実行する必要があります。キューイベントの発火タイミングの精度に依存するユースケース（例: 字幕をビデオのシーン変更と同期させるなど）をサポートするために、ユーザーエージェントはキューイベントをメディアタイムライン上の位置にできるだけ近づけて発火する必要があり、理想的には20ミリ秒以内に発火する必要があります。手順の実行中に現在の再生位置が変更された場合、ユーザーエージェントは手順の完了を待ち、直ちに手順を再実行する必要があります。これらの手順は可能な限り頻繁に、または必要に応じて実行されます。
1回のイテレーションに長い時間がかかると、ユーザーエージェントが「追いつく」ために急いで短時間のキューをスキップすることがあり、そのキューはactiveCuesリストに表示されません。
時は進む手順は次のとおりです:
current cuesをまたはshowing状態のすべてのテキストトラックのすべてのキューを含むように初期化されたリストとし、これには無効なものは含まれません。これらのキューの開始時刻が現在の再生位置以下であり、終了時刻が現在の再生位置よりも大きい場合に限ります。
other cuesをおよびshowing状態のすべてのテキストトラックのすべてのキューを含むように初期化されたリストとし、これにはcurrent cuesには存在しないものを含みます。
last timeを、このアルゴリズムが最後にこのメディア要素のために実行されたときの現在の再生位置とし、これが初めて実行される場合は何も行いません。
通常の再生中に現在の再生位置が通常の単調な増加によってのみ変更された場合、missed cuesを、other cuesに含まれ、開始時刻がlast time以上であり、終了時刻が現在の再生位置以下であるキューのリストとします。それ以外の場合、missed cuesを空のリストとします。
missed cuesに含まれるすべてのキューを削除し、それらがメディア要素の新しく導入されたキューのリストに含まれている場合、そのリストを空にします。
通常の再生中に通常の単調な増加によって時間が達した場合、過去15〜250ミリ秒以内に要素に対してtimeupdateイベントが発生しておらず、そのようなイベントのイベントハンドラがまだ実行中でない場合、ユーザーエージェントはメディア要素タスクをキューに追加し、要素でイベントを発生させ、名前をtimeupdateとします。（他のケース、例えば明示的なシークでは、関連するイベントが現在の再生位置の変更の全体的なプロセスの一部として発生します。）
イベントはこのようにして約66Hz以上または4Hz以下で発生させないようにします（イベントハンドラが250ミリ秒以上かからないことを前提とします）。ユーザーエージェントは、システム負荷や各イベント処理の平均コストに基づいてイベントの発生頻度を調整し、ビデオのデコード中にユーザーエージェントが快適に処理できる頻度を超えないようにすることを推奨します。
current cuesのすべてのキューがテキストトラックキューアクティブフラグを設定されており、other cuesのいずれのキューもテキストトラックキューアクティブフラグを設定されておらず、missed cuesが空である場合、手順を終了します。
通常の再生中に通常の単調な増加によって時間が達し、other cuesにキューが含まれており、それらがテキストトラックキュー一時停止フラグを設定されており、またはそのキューがテキストトラックキューアクティブフラグを設定されている場合、またはmissed cuesに含まれている場合は、即座にメディア要素を一時停止します。
他のケース、例えば明示的なシークでは、キューの終了時刻を超えるときに再生が一時停止されることはありませんが、そのキューがテキストトラックキュー一時停止フラグを設定されている場合でも同様です。
eventsをタスクのリストとして初期化し、最初は空にします。このリスト内の各タスクは、テキストトラック、テキストトラックキュー、および時間に関連付けられ、タスクがキューに追加される前にリストを並べ替えるために使用されます。
affected tracksをテキストトラックのリストとして初期化し、最初は空にします。
以下の手順で、イベントを準備するように指定されたときは、テキストトラックキューのtargetと時間timeに基づいて、ユーザーエージェントは以下の手順を実行する必要があります。
enterとし、TextTrackCueオブジェクトの開始時刻とします。
exitとし、TextTrackCueオブジェクトの終了時刻および開始時刻の遅い方とします。
enterとし、TextTrackCueオブジェクトの開始時刻とします。
eventsのタスクを、時間順に昇順で並べ替えます（タスクのうち、時間が早いものを先にします）。
さらに、同じ時間を持つタスクを、そのテキストトラックキューの順序に従って並べ替えます。
最後に、同じ時間と同じテキストトラックキューの順序を持つタスクを、enterイベントを発生させるものを、exitイベントを発生させるものの前に配置します。
affected tracksを、テキストトラックのリスト内でメディア要素が現れる順序で並べ替え、重複を削除します。
affected tracks内の各テキストトラックに対して、リストの順番に、メディア要素タスクをキューに追加し、メディア要素に対して、イベントを発生させ、cuechangeという名前でTextTrackオブジェクトに対して実行します。また、テキストトラックに対応するtrack要素がある場合は、イベントを発生させ、cuechangeという名前でそのtrack要素にも実行します。
affected tracks内でshowing状態にある各テキストトラックのテキストトラックレンダリングを更新するためのルールを実行し、テキストトラックのテキストトラック言語が空でない限り、フォールバック言語として提供します。たとえば、WebVTTに基づくテキストトラックの場合、WebVTTテキストトラックの表示を更新するためのルールを使用します。[WEBVTT]
上記のアルゴリズムにおいて、テキストトラックキューは、単にテキストトラックに関連付けられているだけでなく、テキストトラックのキューリストにリストされている場合にのみ、そのテキストトラックの一部と見なされます。
もしメディア要素のノードドキュメントが完全にアクティブなドキュメントでなくなった場合、ドキュメントが再びアクティブになるまで、再生が停止します。
メディア要素がドキュメントから削除された場合、ユーザーエージェントは次のステップを実行する必要があります:
media.seeking
ユーザーエージェントが現在シーク中の場合、trueを返します。
media.seekable
すべての現行エンジンでサポートされています。
ユーザーエージェントがシーク可能なメディアリソースの範囲を表すTimeRangesオブジェクトを返します。
media.fastSeek(time)
できるだけ早く、新しいtimeにシークし、精度をスピードに交換します。（正確な時間にシークするには、currentTime属性を使用してください。）
メディアリソースが読み込まれていない場合は、何も行いません。
seeking属性の初期値はfalseでなければなりません。
fastSeek(time)メソッドは、timeで与えられた時間にシークし、
approximate-for-speedフラグが設定されます。
ユーザーエージェントが特定のnew playback positionにシークする必要がある場合、 任意でapproximate-for-speedフラグが設定されている場合、ユーザーエージェントは次の手順を実行しなければなりません。 このアルゴリズムは、イベントループメカニズムと密接に関係しています。特に、同期セクション（イベントループ アルゴリズムの一部としてトリガーされる）を含んでいます。このセクションのステップは、⌛でマークされています。
要素のreadyStateがHAVE_NOTHINGである場合、戻ります。
要素のseekingIDL属性がtrueである場合、
このアルゴリズムの他のインスタンスがすでに実行されています。そのインスタンスを、実行中のステップを完了するのを待たずに中止します。
seekingIDL属性をtrueに設定します。
シークがDOMメソッド呼び出しまたはIDL属性の設定に応じて行われた場合、スクリプトの実行を続行します。これらのステップの残りは並行して実行されなければなりません。⌛でマークされたステップを除いて、このアルゴリズムの別のインスタンスが呼び出された場合、いつでも中止される可能性があります。
new playback positionがメディアリソースの終わりより後である場合、 それをメディアリソースの終わりにします。
new playback positionが最も早い位置より前である場合、 それをその位置に設定します。
（おそらく変更された）new playback positionがseekable属性で示される範囲内にない場合、
それをseekable属性で示される範囲内の
new playback positionに最も近い位置にします。この条件を満たす2つの位置がある場合（つまり、new playback
positionがseekable属性の2つの範囲のちょうど中間にある場合）、
現在の再生位置に最も近い位置を使用します。seekable属性に範囲がない場合、seekingIDL属性をfalseに設定し、戻ります。
approximate-for-speedフラグが設定されている場合、new playback positionを再生がすぐに再開できるような値に調整します。new playback positionがこのステップの前に現在の再生位置より前である場合、調整されたnew playback positionも現在の再生位置より前でなければなりません。同様に、new playback positionがこのステップの前に現在の再生位置より後である場合、調整されたnew playback positionも現在の再生位置より後でなければなりません。
例えば、ユーザーエージェントは、再生を再開する前に中間フレームをデコードして破棄する時間を省くために、近くのキーフレームにスナップすることができます。
メディア要素タスクをキューに追加する
メディア要素に対して、イベントを発生させる名seekingを発火させます。
現在の再生位置をnew playback positionに設定します。
メディア要素が潜在的に再生中だったが、シークによってそのreadyState属性がHAVE_FUTURE_DATAより低い値に変更された場合、waitingイベントが要素に対して発火されます。
このステップは現在の再生位置を設定します。したがって、ユーザーエージェントが実際にその位置のメディアデータをレンダリングできるかどうかにかかわらず、（次のステップで決定されるように）他の条件、たとえば再生が「メディアリソースの終わりに達する」に関するルールなどが直ちにトリガーされる可能性があります（ループ処理のロジックの一部として）。
currentTime属性は公式の再生位置を返し、現在の再生位置を返すわけではありません。そのため、このアルゴリズムとは別に、スクリプトの実行前に更新されます。
ユーザーエージェントがnew playback positionのメディアデータが利用可能かどうかを確認し、利用可能であれば、その位置を再生するのに十分なデータがデコードされるまで待機します。
安定した状態を待機します。同期セクションはこのアルゴリズムの残りのすべてのステップで構成されます。（同期セクションのステップは⌛でマークされています。）
⌛seekingIDL属性をfalseに設定します。
⌛時間は進み続けるステップを実行します。
⌛メディア要素タスクをキューに追加する
メディア要素に対して、イベントを発生させる名timeupdateを発火させます。
⌛メディア要素タスクをキューに追加する
メディア要素に対して、イベントを発生させる名seekedを発火させます。
seekable属性は、新しい静的な正規化TimeRangesオブジェクトを返さなければなりません。これは、ユーザーエージェントがシークできるメディアリソースの範囲を表します。この属性が評価される時点で存在する場合に限ります。
ユーザーエージェントがメディアリソースのどこにでもシークできる場合、例えば、単純な映画ファイルであり、ユーザーエージェントとサーバーがHTTP
Rangeリクエストをサポートしている場合、この属性は1つの範囲を持つオブジェクトを返します。その開始は最初のフレームの時間（通常はゼロである最も早い位置）であり、その終了は最初のフレームの時間にduration属性の値を加えたものと等しく（最終フレームの時間に等しく、正の無限大である可能性もあります）。
範囲は連続して変化することがあります。例えば、ユーザーエージェントが無限ストリームでスライディングウィンドウをバッファリングしている場合です。これは、DVRがライブTVを視聴する際に見られる動作です。
毎回新しいオブジェクトを返すことは、属性ゲッターにとって悪いパターンであり、ここでのみ、それを変更するのにコストがかかるために記載されています。新しいAPIにコピーするべきではありません。
ユーザーエージェントは、シーク可能な範囲に対して非常に寛容で楽観的な見方を採用するべきです。ユーザーエージェントは、可能な限りシークを迅速に行うために、最近のコンテンツをバッファリングするべきです。
例えば、HTTP RangeリクエストをサポートしないHTTPサーバーで提供される大きなビデオファイルを考えてみてください。ブラウザは、現在のフレームとその後のフレームのデータだけをバッファリングし、シークを許可しない（再生の最初に戻るシークを除く）ことによってこれを実装できます。しかし、これは質の低い実装です。質の高い実装では、ユーザーが何か驚くべきことを再視聴するために即座に戻ることができるように、（または十分なストレージがあればもっと長く）コンテンツの最後の数分をバッファリングし、必要に応じてファイルを再読み込みすることで任意の場所にシークすることを可能にするべきです。これにより速度が遅くなる可能性がありますが、ビデオを最初から再開し、再生されていない部分に到達するためだけに全体を視聴し直すよりも、はるかに便利です。
メディアリソースは内部でスクリプト化されているか、インタラクティブな場合があります。このため、メディア要素は非線形的に再生される可能性があります。この場合、ユーザーエージェントは、シークアルゴリズムが使用されたかのように動作しなければならず、現在の再生位置が不連続に変更されるたびに関連するイベントが発火します。
メディアリソースには、複数の埋め込みオーディオおよびビデオトラックが含まれる場合があります。たとえば、主要なビデオおよびオーディオトラックに加えて、メディアリソースには、外国語の吹き替え、監督のコメント、音声説明、別のアングル、または手話のオーバーレイが含まれる場合があります。
media.audioTracks
すべての現行エンジンでサポートされています。
AudioTrackListオブジェクトを返します。このオブジェクトは、メディアリソースで利用可能なオーディオトラックを表します。
media.videoTracks
すべての現行エンジンでサポートされています。
VideoTrackListオブジェクトを返します。このオブジェクトは、メディアリソースで利用可能なビデオトラックを表します。
メディア要素のaudioTracks属性は、ライブのAudioTrackListオブジェクトを返さなければなりません。このオブジェクトは、メディア要素のメディアリソースで利用可能なオーディオトラックを表します。
メディア要素のvideoTracks属性は、ライブのVideoTrackListオブジェクトを返さなければなりません。このオブジェクトは、メディア要素のメディアリソースで利用可能なビデオトラックを表します。
1つのメディア要素につき、1つのAudioTrackListオブジェクトと1つのVideoTrackListオブジェクトのみが存在します。別のメディアリソースが要素にロードされた場合でも、オブジェクトは再利用されます。（ただし、AudioTrackオブジェクトやVideoTrackオブジェクトは再利用されません。）
AudioTrackList
および VideoTrackList
オブジェクトすべての現行エンジンでサポートされています。
すべての現行エンジンでサポートされています。
AudioTrackList
およびVideoTrackList
インターフェースは、前のセクションで定義された属性によって使用されます。
すべての現行エンジンでサポートされています。
すべての現行エンジンでサポートされています。
[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
すべての現行エンジンでサポートされています。
media.videoTracks.length
すべての現行エンジンでサポートされています。
リスト内のトラックの数を返します。
audioTrack = media.audioTracks[index]
videoTrack = media.videoTracks[index]
指定されたAudioTrack
またはVideoTrackオブジェクトを返します。
audioTrack = media.audioTracks.getTrackById(id)
すべての現行エンジンでサポートされています。
videoTrack = media.videoTracks.getTrackById(id)
すべての現行エンジンでサポートされています。
指定されたIDを持つAudioTrack
またはVideoTrackオブジェクトを返します。トラックにそのIDがない場合はnullを返します。
audioTrack.id
すべての現行エンジンでサポートされています。
videoTrack.id
すべての現行エンジンでサポートされています。
指定されたトラックのIDを返します。これは、フォーマットがメディアフラグメント構文をサポートしている場合にフラグメントに使用でき、getTrackById()メソッドで使用できます。
audioTrack.kind
すべての現行エンジンでサポートされています。
videoTrack.kind
すべての現行エンジンでサポートされています。
指定されたトラックのカテゴリを返します。考えられるトラックカテゴリは下記に示されています。
audioTrack.label
すべての現行エンジンでサポートされています。
videoTrack.label
すべての現行エンジンでサポートされています。
指定されたトラックのラベルが既知の場合はラベルを、そうでない場合は空文字列を返します。
audioTrack.language
すべての現行エンジンでサポートされています。
videoTrack.language
すべての現行エンジンでサポートされています。
指定されたトラックの言語を返します。既知の場合は言語を、そうでない場合は空文字列を返します。
audioTrack.enabled [ = value ]
すべての現行エンジンでサポートされています。
指定されたトラックがアクティブであればtrueを返し、そうでなければfalseを返します。
設定することにより、トラックが有効かどうかを変更できます。複数のオーディオトラックが同時に有効になっている場合、それらはミックスされます。
media.videoTracks.selectedIndex
すべての現行エンジンでサポートされています。
現在選択されているトラックのインデックスを返し、そうでなければ−1を返します。
videoTrack.selected [ = value ]
すべての現行エンジンでサポートされています。
指定されたトラックがアクティブであればtrueを返し、そうでなければfalseを返します。
設定することにより、トラックが選択されているかどうかを変更できます。選択されたトラックが1つだけであり、前のトラックが選択されている場合、新しいトラックを選択すると前のトラックが選択解除されます。
AudioTrackList
オブジェクトは、ゼロまたはそれ以上のオーディオトラックの動的リストを表し、そのうちゼロまたは複数が同時に有効にできます。各オーディオトラックは、AudioTrackオブジェクトで表されます。
VideoTrackList
オブジェクトは、ゼロまたはそれ以上のビデオトラックの動的リストを表し、そのうちゼロまたは1つが同時に選択できます。各ビデオトラックは、VideoTrackオブジェクトで表されます。
AudioTrackListとVideoTrackListオブジェクト内のトラックは、一貫して順序付けられている必要があります。メディアリソースが順序を定義する形式である場合は、その順序を使用しなければなりません。そうでない場合は、トラックがメディアリソース内で宣言された相対的な順序が使用されなければなりません。使用される順序は、リストの自然順序と呼ばれます。
これらのオブジェクト内の各トラックにはインデックスが付与され、最初のトラックはインデックス0を持ち、次の各トラックは前のものよりも1つ高い番号が付けられます。メディアリソースが動的にオーディオまたはビデオトラックを追加または削除すると、トラックのインデックスは動的に変更されます。メディアリソースが完全に変更される場合、以前のすべてのトラックが削除され、新しいトラックに置き換えられます。
AudioTrackListとVideoTrackListのlength属性ゲッターは、取得時にそのオブジェクトが表すトラックの数を返す必要があります。
サポートされているプロパティインデックスは、その瞬間にAudioTrackListとVideoTrackListオブジェクトが表すトラックの数から1を引いた数までの数字です。もしAudioTrackListまたはVideoTrackListオブジェクトがトラックを表していない場合、それはサポートされているプロパティインデックスを持っていません。
インデックスプロパティの値を決定するには、指定されたindexに対してAudioTrackListまたはVideoTrackListオブジェクト内のトラックをlistから取得する必要があります。ユーザーエージェントは、そのindexに対応するAudioTrackまたはVideoTrackオブジェクトを返す必要があります。
AudioTrackListとVideoTrackListのgetTrackById(id)メソッドは、id引数の値と一致する最初のAudioTrackまたはVideoTrackオブジェクト（それぞれ）を返す必要があります。引数に一致するトラックがない場合、メソッドはnullを返す必要があります。
AudioTrackおよびVideoTrackオブジェクトは、メディアリソースの特定のトラックを表します。各トラックには、識別子、カテゴリ、ラベル、言語が付与されることがあります。これらのトラックの特性は、トラックの存続期間中は変わりません。たとえトラックがAudioTrackListまたはVideoTrackListオブジェクトから削除されても、これらの特性は変更されません。
また、AudioTrackオブジェクトは、それぞれ有効または無効にできます。これはオーディオトラックの有効状態です。AudioTrackが作成されると、その有効状態はfalse（無効）に設定される必要があります。リソースフェッチアルゴリズムがこれを上書きすることができます。
同様に、VideoTrackオブジェクトはVideoTrackListオブジェクト内で一つだけ選択されることができます。これはビデオトラックの選択状態です。VideoTrackが作成されると、その選択状態はfalse（未選択）に設定される必要があります。リソースフェッチアルゴリズムがこれを上書きすることができます。
AudioTrackのid属性およびVideoTrackのid属性は、トラックに識別子がある場合はその識別子を、ない場合は空の文字列を返さなければなりません。メディアリソースがメディアフラグメント構文をサポートしている形式の場合、特定のトラックに対して返される識別子は、そのようなフラグメントのトラック次元におけるトラック名として使用された場合に、そのトラックを有効にするのと同じ識別子でなければなりません。[INBAND]
例えば、Oggファイルでは、これはトラックのNameヘッダーフィールドになります。[OGGSKELETONHEADERS]
AudioTrackとVideoTrackのkind属性は、そのトラックのカテゴリを返す必要があり、そうでない場合は空の文字列を返す必要があります。
トラックのカテゴリは、以下の表の最初の列にある文字列で、そのトラックに最も適しているものです。表の第2および第3列の定義に基づいて判断され、メディアリソースに含まれるメタデータによって決定されます。表の第3列にあるセルは、その列の最初の列にあるカテゴリがどのトラックに適用されるかを示します。カテゴリは、オーディオトラックに適用される場合にのみオーディオトラックに適しており、ビデオトラックに適用される場合にのみビデオトラックに適しています。カテゴリは、AudioTrackオブジェクトに適している場合にのみ返されるべきであり、VideoTrackオブジェクトに適している場合にのみ返されるべきです。
Oggファイルの場合、トラックのRoleヘッダーフィールドが関連するメタデータを提供します。DASHメディアリソースの場合、Role要素が情報を伝えます。WebMの場合、現在はFlagDefault要素のみが値にマッピングされます。HTMLへのメディアコンテナからのインバンドメディアリソーストラックのソーシングには詳細が記載されています。[OGGSKELETONHEADERS] [DASH] [WEBMCG] [INBAND]
| カテゴリ | 定義 | 適用範囲 | 例 |
|---|---|---|---|
"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とVideoTrackのlabelおよびlabel属性は、トラックにラベルがある場合はそのラベルを返し、そうでない場合は空の文字列を返す必要があります。[INBAND]
AudioTrackとVideoTrackのlanguageおよび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時間経過するまで単に透明であったかのように扱います。
次に示すのは、イベントハンドラー（およびそれに対応するイベントハンドラーイベントタイプ）であり、イベントハンドラーIDL属性として、AudioTrackListおよびVideoTrackListインターフェースを実装するすべてのオブジェクトによってサポートされなければなりません：
| イベントハンドラー | イベントハンドラーイベントタイプ |
|---|---|
onchange
すべての現在のエンジンでサポートされています。
Firefox🔰
33+
Safari7+
Chrome🔰
37+
Opera? Edge🔰 79+ Edge (Legacy)No Internet Explorer10+ Firefox Android? Safari iOS? Chrome Android? WebView Android? Samsung Internet? Opera Android? すべての現在のエンジンでサポートされています。
Firefox31+
Safari7+
Chrome33+
Opera? Edge79+ Edge (Legacy)18 Internet ExplorerNo Firefox Android? Safari iOS? Chrome Android? WebView Android4.4+ Samsung Internet? Opera Android? すべての現在のエンジンでサポートされています。
Firefox🔰
33+
Safari7+
Chrome🔰
37+
Opera? Edge🔰 79+ Edge (Legacy)No Internet Explorer10+ Firefox Android? Safari iOS? Chrome Android? WebView Android? Samsung Internet? Opera Android? |
change
|
onaddtrack
すべての現在のエンジンでサポートされています。
Firefox🔰
33+
Safari7+
Chrome🔰
37+
Opera? Edge🔰 79+ Edge (Legacy)No Internet Explorer10+ Firefox Android? Safari iOS? Chrome Android? WebView Android? Samsung Internet? Opera Android? すべての現在のエンジンでサポートされています。
Firefox31+
Safari6+
Chrome23+
Opera12.1+ Edge79+ Edge (Legacy)12+ Internet Explorer11 Firefox Android? Safari iOS7+ Chrome Android? WebView Android? Samsung Internet? Opera Android12.1+ すべての現在のエンジンでサポートされています。
Firefox🔰
33+
Safari7+
Chrome🔰
37+
Opera? Edge🔰 79+ Edge (Legacy)No 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 (Legacy)No Internet Explorer10+ Firefox Android? Safari iOS? Chrome Android? WebView Android? Samsung Internet? Opera Android? TextTrackList/removetrack_event すべての現在のエンジンでサポートされています。
Firefox31+
Safari7+
Chrome33+
Opera20+ Edge79+ Edge (Legacy)18 Internet ExplorerNo 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 (Legacy)No Internet Explorer10+ Firefox Android? Safari iOS? Chrome Android? WebView Android? Samsung Internet? Opera Android? |
removetrack
|
audioTracksおよびvideoTracks属性を使用して、スクリプトで再生するトラックを選択できますが、フラグメントを指定することで、URLのメディアリソースの特定のトラックを宣言的に選択することも可能です。フラグメントの形式は、MIMEタイプによって異なります。メディアリソース。[RFC2046] [URL]
この例では、メディアフラグメント構文をサポートする形式を使用するビデオが埋め込まれており、デフォルトのビデオトラックの代わりに「Alternative」とラベル付けされた別のアングルが有効になっています。
< video src = "myvideo#track=Alternative" ></ video > メディア要素には、テキストトラックと呼ばれる関連するテキストトラックのグループが含まれることがあります。これらはメディア要素のテキストトラックのリストとして知られています。テキストトラックは次のように並べ替えられます:
テキストトラックは、addTextTrack()メソッドを使用して追加され、追加された順に古いものから新しいものへと並べ替えられます。
メディアリソース固有のテキストトラック（テキストトラックはメディアリソース内のデータに対応するもの）で、メディアリソースのフォーマット仕様によって定義された順序で並べ替えられます。
テキストトラックは以下の要素で構成されます:
この要素はユーザーエージェントがトラックをどのように処理するかを決定します。種類は文字列で表され、可能な文字列は次のとおりです:
subtitlescaptionsdescriptionschaptersmetadataこれは、ユーザーがトラックを識別するための人間が読みやすい文字列です。
トラックのラベルは、テキストトラックがtrack要素に対応する場合、動的に変更されることがあります。
テキストトラックのラベルが空文字列である場合、ユーザーエージェントは、テキストトラックの他のプロパティ（例: テキストトラックの種類や言語）から自動的に適切なラベルを生成して、ユーザーインターフェースで使用する必要があります。この自動生成されたラベルはAPIに公開されません。
これは、インバンドメタデータトラック用にメディアリソースから抽出された文字列で、これにより、これらのトラックがドキュメント内の異なるスクリプトにディスパッチされるようになります。
例えば、ウェブでストリーミングされる従来のテレビ局の放送に、ウェブ固有のインタラクティブな機能が追加されている場合、メタデータを含むテキストトラックには、広告ターゲティング、ゲームショー中のトリビアゲームデータ、スポーツゲーム中のプレイヤーの状態、料理番組中のレシピ情報などが含まれることがあります。各プログラムが開始および終了すると、新しいトラックがストリームに追加されたり削除されたりする可能性があり、それらが追加されると、ユーザーエージェントはこの属性の値を使用して、専用のスクリプトモジュールにバインドすることができます。
インバンドメタデータテキストトラック以外の場合、インバンドメタデータトラックディスパッチタイプは空文字列です。さまざまなメディア形式に対してこの値がどのように設定されるかについては、メディアリソース固有のテキストトラックを公開する手順で説明されています。
これは、テキストトラックのキューの言語を表す文字列（BCP 47言語タグ）です。[BCP47]
テキストトラックの言語は、テキストトラックがtrack要素に対応する場合、動的に変更されることがあります。
次のいずれかです:
テキストトラックのキューが取得されていないことを示します。
テキストトラックがロード中であり、これまでに致命的なエラーは発生していないことを示します。トラックには、パーサーによってさらにキューが追加される可能性があります。
テキストトラックが致命的なエラーなしでロードされたことを示します。
テキストトラックが有効化されたが、ユーザーエージェントがこれを取得しようとした際に何らかの方法で失敗したことを示します（例：URLが解析できなかった、ネットワークエラー、不明なテキストトラック形式など）。キューの一部または全体が欠落しており、取得されることはありません。
テキストトラックの準備状態は、トラックの取得に伴い動的に変化します。
次のいずれかです:
テキストトラックがアクティブでないことを示します。トラックをDOMに公開する目的以外では、ユーザーエージェントはテキストトラックを無視します。キューはアクティブにならず、イベントも発生せず、ユーザーエージェントはトラックのキューを取得しようとしません。
テキストトラックがアクティブであるが、ユーザーエージェントがキューを積極的に表示していないことを示します。トラックのキューを取得しようとしたことがない場合、ユーザーエージェントは間もなくその試みを行います。ユーザーエージェントはアクティブなキューのリストを維持しており、イベントが適切に発生します。
テキストトラックがアクティブであることを示します。トラックのキューを取得しようとしたことがない場合、ユーザーエージェントは間もなくその試みを行います。ユーザーエージェントはアクティブなキューのリストを維持しており、イベントが適切に発生します。さらに、トラックの種類がsubtitlesまたはcaptionsであるテキストトラックの場合、キューは適切にビデオにオーバーレイされます。トラックの種類がdescriptionsであるテキストトラックの場合、ユーザーエージェントはキューを視覚的でない方法でユーザーに提供します。トラックの種類がchaptersであるテキストトラックの場合、ユーザーエージェントはユーザーがキューを選択してメディアリソース内の任意のポイントに移動できるメカニズムを提供します。
これは、テキストトラックキューのリストであり、テキストトラックレンダリングの更新ルールも含まれます。例えば、WebVTTでは、WebVTTテキストトラックの表示を更新するためのルールなどです。[WEBVTT]
テキストトラックのキューのリストは動的に変化することがあります。例えば、テキストトラックがまだロードされていない場合や、ロード中である場合、またはDOM操作による場合です。
各テキストトラックには、対応するTextTrackオブジェクトがあります。
各メディア要素には、保留中のテキストトラックのリストが含まれており、最初は空である必要があります。また、パーサーによってブロックされたフラグも含まれており、最初はfalseに設定されている必要があります。さらに、自動トラック選択を実行したかどうかのフラグも含まれており、これも最初はfalseに設定されている必要があります。
ユーザーエージェントが保留中のテキストトラックのリストを設定する必要があるとき、ユーザーエージェントは、メディア要素の保留中のテキストトラックのリストに、その要素のテキストトラックのリストに含まれる各テキストトラックを追加しなければなりません。その際、テキストトラックモードが無効でなく、テキストトラックの準備状態が読み込み中である必要があります。
要素の親ノードが変更されるたびに、ユーザーエージェントは、対応するテキストトラックを、含まれている保留中のテキストトラックのリストから削除する必要があります。
テキストトラックのテキストトラックの準備状態がロード済みまたはロードに失敗のいずれかに変更されるたびに、ユーザーエージェントはそのトラックを含まれている保留中のテキストトラックのリストから削除する必要があります。
メディア要素がHTMLパーサーまたはXMLパーサーによって作成されると、ユーザーエージェントはその要素のパーサーによってブロックされたフラグをtrueに設定する必要があります。メディア要素がHTMLパーサーまたはXMLパーサーのスタックからポップオフされると、ユーザーエージェントはユーザーの自動テキストトラック選択に関する設定を尊重し、保留中のテキストトラックのリストを埋める必要があり、要素のパーサーによってブロックされたフラグをfalseに設定する必要があります。
テキストトラックがメディア要素の準備が整っている状態になるのは、要素の保留中のテキストトラックのリストが空であり、要素のパーサーによってブロックされたフラグがfalseである場合です。
各メディア要素には、保留中のテキストトラック変更通知フラグが含まれており、最初はリセットされている必要があります。
テキストトラックがメディア要素のテキストトラックのリストに含まれている場合、そのテキストトラックモードが変更された場合、ユーザーエージェントは次の手順を実行する必要があります:
メディア要素の保留中のテキストトラック変更通知フラグが設定されている場合、リターンします。
メディア要素の保留中のテキストトラック変更通知フラグを設定します。
メディア要素タスクをキューに追加し、次の手順を実行します:
メディア要素の保留中のテキストトラック変更通知フラグをリセットします。
イベントを発生させる、イベント名はchangeで、メディア要素のtextTracks属性のTextTrackListオブジェクトで発生します。
メディア要素のポスターフラグを表示するが設定されていない場合、時間が進行する手順を実行します。
このセクションに記載されているタスクのタスクソースは、DOM操作タスクソースです。
テキストトラックキューは、テキストトラック内の時間に敏感なデータの単位であり、たとえば、字幕やキャプションにおいて、特定の時間に表示され、別の時間に消えるテキストに対応します。
各テキストトラックキューは以下で構成されます:
任意の文字列です。
メディアデータのどの範囲にキューが適用されるかを示す時間（秒および秒の小数部）です。
メディアデータのどの範囲にキューが適用されるかを示す時間（秒および秒の小数部）です。ただし、無制限のテキストトラックキューの場合は正の無限大になります。
キューが適用される範囲の終了時にメディアリソースの再生を一時停止するかどうかを示すブール値です。
フォーマットに必要な追加フィールド、およびキューの実際のデータが含まれます。たとえば、WebVTTにはテキストトラックキューの書字方向などがあります。[WEBVTT]
無制限のテキストトラックキューは、終了時間が正の無限大に設定されたテキストトラックキューです。アクティブな無制限のテキストトラックキューは、通常の再生中に現在の再生位置の単調な増加によって非アクティブになることはありません（例: 終了時間が発表されていないライブイベントのチャプター用のメタデータキュー）。
テキストトラックキューの開始時間およびテキストトラックキューの終了時間は負の値である場合があります。（ただし、現在の再生位置は負の値になることはないため、ゼロ時点前のキューはアクティブにはなりません。）
各テキストトラックキューには、対応するTextTrackCueオブジェクト（または、TextTrackCueから継承されたオブジェクト、例えばWebVTTキューはVTTCueインターフェースを使用）があります。テキストトラックキューのメモリ内表現は、このTextTrackCueAPIを介して動的に変更することができます。[WEBVTT]
テキストトラックキューは、特定の種類のテキストトラックキューに対して仕様で定義されたテキストトラックレンダリングを更新するためのルールに関連付けられています。これらのルールは、キューを表すオブジェクトがTextTrackオブジェクトにaddCue()メソッドを使用して追加されたときに特に使用されます。
さらに、各テキストトラックキューには、2つの動的な情報があります:
このフラグは最初はリセットされています。フラグは、キューがアクティブまたは非アクティブになったときに適切にイベントが発生するようにし、適切なキューがレンダリングされるようにするために使用されます。
ユーザーエージェントは、このフラグを次のタイミングで同期的にリセットする必要があります: テキストトラックキューがそのテキストトラックのテキストトラックのキューリストから削除された場合、テキストトラック自体がそのメディア要素のテキストトラックリストから削除された場合、またはテキストトラックモードが無効に変更された場合、さらに、メディア要素のreadyStateが再度HAVE_NOTHINGに変更された場合です。この方法でフラグが1つ以上のテキストトラックのキューに対してリセットされた場合、ユーザーエージェントは、影響を受けたすべてのキューのフラグをリセットした後、それらのテキストトラックのテキストトラックレンダリングを更新するためのルールを適用する必要があります。たとえば、WebVTTベースのテキストトラックの場合、WebVTTテキストトラックの表示を更新するためのルールなどです。[WEBVTT]
これはレンダリングモデルの一部として使用され、キューを一貫した位置に保ちます。最初は空です。テキストトラックキューアクティブフラグがリセットされるたびに、ユーザーエージェントはテキストトラックキュー表示状態を空にする必要があります。
テキストトラックキューは、メディア要素のテキストトラックに属しており、これらのキューはテキストトラックキューの順序で相互に並べ替えられます。この順序は次のように決定されます: 最初にキューをテキストトラックごとにグループ化し、グループはそのテキストトラックがメディア要素のテキストトラックのリストに現れる順序で並べ替えられます。その後、各グループ内でキューは、その開始時間に従って並べ替えられ、最も早いものが最初に並べ替えられます。その後、同じ開始時間を持つキューは、その終了時間に従って並べ替えられ、最も遅いものが最初に並べ替えられます。最後に、同じ終了時間を持つキューは、それぞれが最後にテキストトラックのキューリストに追加された順序で並べ替えられ、最も古いものが最初になります（たとえば、WebVTTファイルからのキューの場合、最初はファイルに記載された順序になります）。[WEBVTT]
メディアリソース固有のテキストトラックは、テキストトラックであり、 メディアリソースに含まれるデータに対応します。
そのようなデータの処理とレンダリングのルールは、関連する仕様、例えばメディアリソースがビデオである場合にはビデオフォーマットの仕様によって定義されます。 いくつかのレガシーフォーマットの詳細は、HTMLへのメディアコンテナからのインバンドメディアリソーストラックの取得で確認できます。[INBAND]
メディアリソースが ユーザーエージェントが認識し、テキストトラック として同等とみなされるデータを含む場合、ユーザーエージェントはその関連データでメディアリソース固有のテキストトラックを公開する手順を実行します。
関連するデータを新しいテキストトラックおよび対応する新しい
TextTrackオブジェクトに関連付けます。
テキストトラックは、メディアリソース固有のテキストトラックです。
新しいテキストトラックの種別、ラベル、および言語を、関連データの意味に基づいて設定します。 そのデータにラベルがない場合は、ラベルを空文字列に設定しなければなりません。
テキストトラックのキューリストを そのフォーマットに適したテキストトラックレンダリングの更新ルールと関連付けます。
新しいテキストトラックの種別がchapters
またはmetadataである場合は、インバンドメタデータトラックのディスパッチタイプ
を次のように設定します。
CodecID要素の値に設定されなければなりません。[WEBMCG]
moovボックス内のテキストトラックのtrakボックスの最初のmdiaボックスの最初のminfボックスの最初のstblボックスの最初のstsdボックスとする。ただし、そのようなstsdボックスが存在しない場合はnullとする。
stsd boxがnullである場合、またはstsd
boxにmettボックスもmetxボックスも存在しない場合、テキストトラックのin-bandメタデータトラックディスパッチタイプは空文字列に設定しなければならない。
それ以外の場合でstsd boxにmettボックスが存在する場合、テキストトラックのin-bandメタデータトラックディスパッチタイプは、文字列"mett"、U+0020
SPACE文字、stsd
box内の最初のmettボックスの最初のmime_formatフィールドの値を連結したもの、またはそのフィールドがそのボックス内に存在しない場合は空文字列のいずれかに設定しなければならない。
それ以外の場合でstsd boxにmettボックスがなく、metxボックスが存在する場合、テキストトラックのin-bandメタデータトラックディスパッチタイプは、文字列"metx"、U+0020
SPACE文字、stsd
box内の最初のmetxボックスの最初のnamespaceフィールドの値を連結したもの、またはそのフィールドがそのボックス内に存在しない場合は空文字列のいずれかに設定しなければならない。
[MPEG4]
新しいテキストトラックのキューリストをこれまでに解析されたキューで埋め、キューの公開に関するガイドラインに従い、それを動的に更新し始めます。
新しいテキストトラックのモードを、ユーザーの好みや関連する仕様の要求に一致するモードに設定します。
例えば、他にアクティブな字幕がなく、これが強制字幕トラック（音声トラックの主要な言語で字幕を提供するが、実際に他の言語での音声にのみ字幕を提供する）である場合、ここでその字幕がアクティブになるかもしれません。
新しいテキストトラックをメディア要素のテキストトラックのリストに追加します。
イベントをaddtrack
という名前でメディア要素のtextTracks
属性のTextTrackList
オブジェクトに対して発生させ、TrackEventを使用して、
track属性をテキストトラックのTextTrackオブジェクトに初期化します。
テキストトラックの種別は、要素のkind属性の状態に基づき、次の表に従って決定されます。
最初の列に記載されている状態に対して、種別は2列目に示される文字列です。
| 状態 | 文字列 |
|---|---|
| 字幕 | subtitles
|
| キャプション | captions
|
| 説明 | descriptions
|
| チャプターメタデータ | chapters
|
| メタデータ | metadata
|
テキストトラックのラベルは、この要素のトラックラベルです。
テキストトラックの言語は、要素のトラックの言語（存在する場合）であり、存在しない場合は空文字列です。
kind、label、およびsrclang属性が設定、変更、または削除されると、テキストトラックは、上記の定義に従って更新されなければなりません。
トラックURLの変更は、以下のアルゴリズムで処理されます。
テキストトラックの準備状態は初期状態では未ロードであり、テキストトラックのモードは初期状態では無効です。
テキストトラックのキューリストは初期状態では空です。参照されたファイルが解析されると動的に変更されます。このリストに関連するのは、該当するフォーマットに適したテキストトラックのレンダリングを更新するためのルールであり、WebVTTの場合、これはWebVTTテキストトラックの表示を更新するためのルールです。[WEBVTT]
track要素の親要素が変更され、新しい親がメディア要素の場合、ユーザーエージェントはそのtrack要素に対応するテキストトラックをメディア要素のテキストトラックのリストに追加し、メディア要素タスクをキューに入れ、そのメディア要素に対してイベントをaddtrackという名前で発生させなければなりません。
これは、メディア要素のtextTracks属性のTextTrackListオブジェクトを使用して行われ、TrackEventを使用して、track属性がテキストトラックのTextTrackオブジェクトに初期化されます。
track要素の親要素が変更され、古い親がメディア要素であった場合、ユーザーエージェントはそのtrack要素に対応するテキストトラックをメディア要素のテキストトラックのリストから削除し、メディア要素タスクをキューに入れ、そのメディア要素に対してイベントをremovetrackという名前で発生させなければなりません。
これは、メディア要素のtextTracks属性のTextTrackListオブジェクトを使用して行われ、TrackEventを使用して、track属性がテキストトラックのTextTrackオブジェクトに初期化されます。
テキストトラックが、track要素に対応してメディア要素のテキストトラックのリストに追加されると、ユーザーエージェントは、そのメディア要素に対して次の手順を実行するためにメディア要素タスクをキューに入れなければなりません。
要素のparserによるブロックフラグがtrueの場合、戻ります。
要素の自動トラック選択を実行したフラグがtrueの場合、戻ります。
この要素に対して自動テキストトラック選択のユーザープリファレンスを尊重します。
ユーザーエージェントがメディア要素に対して自動テキストトラック選択のユーザープリファレンスを尊重する必要がある場合、次の手順を実行します。
自動テキストトラック選択を実行し、subtitlesおよびcaptionsを選択します。
自動テキストトラック選択を実行し、descriptionsを選択します。
メディア要素のテキストトラックのリストに、テキストトラックが含まれており、そのテキストトラックの種別がchaptersまたはmetadataに対応するtrack要素があり、そのdefault属性が設定され、テキストトラックのモードが無効に設定されている場合、これらすべてのトラックのテキストトラックのモードをに設定します。
要素の自動トラック選択を実行したフラグをtrueに設定します。
上記の手順でテキストトラックの種別に対して自動テキストトラック選択を実行すると言われた場合、それは次の手順を実行することを意味します。
アルゴリズムに渡された種別のいずれかに対応するテキストトラックで構成されたリストを、メディア要素のテキストトラックのリストから取得し、そのリストを候補とします。
候補が空の場合、戻ります。
候補の中に、テキストトラックのテキストトラックのモードが表示中に設定されているものがある場合、戻ります。
ユーザーが候補のトラックの中から、そのテキストトラックの種別、テキストトラックの言語、およびテキストトラックのラベルに基づいてトラックを有効にしたいという意向を示している場合、そのトラックのテキストトラックのモードを表示中に設定します。
例えば、ユーザーが「可能であればフランス語のキャプションを表示したい」、「タイトルに『コメント』が含まれている字幕トラックがあれば、それを有効にしたい」、「オーディオディスクリプショントラックが利用可能であれば、有効にする。できればスイスドイツ語で、無理なら標準スイスドイツ語か標準ドイツ語でもよい」というブラウザの設定を行っている可能性があります。
それ以外の場合、候補の中にテキストトラックがあり、それがtrack要素に対応し、default属性が設定され、テキストトラックのモードが無効に設定されている場合、その最初のトラックのテキストトラックのモードを表示中に設定します。
テキストトラックがtrack要素に対応しており、次のいずれかの状況に遭遇した場合、ユーザーエージェントはそのテキストトラックおよびtrack要素に対してtrack処理モデルを開始しなければなりません。
track要素が作成される。
track要素の親要素が変更され、新しい親がメディア要素である。
ユーザーエージェントがテキストトラックおよびtrack要素に対してtrack処理モデルを開始する場合、次のアルゴリズムを実行しなければなりません。このアルゴリズムは、イベントループメカニズムと密接に連携しており、特に同期セクションを持っています（これはイベントループアルゴリズムの一部としてトリガーされます）。そのセクション内の手順は⌛でマークされています。
このアルゴリズムの別の実行が、このテキストトラックおよびtrack要素に対してすでに進行中である場合、戻り、その他のアルゴリズムにこの要素の処理を任せます。
テキストトラックのテキストトラックのモードがまたは表示中のいずれかに設定されていない場合、戻ります。
これらの手順の残りの部分を並列で実行し、これらの手順を実行させた原因が引き続き進行できるようにします。
トップ: 安定状態を待ちます。同期セクションは以下の手順で構成されています。（同期セクションの手順は⌛でマークされています。）
⌛ テキストトラックの準備状態を読み込み中に設定します。
⌛ track要素の親がメディア要素である場合、corsAttributeStateをその親であるメディア要素のcrossoriginコンテンツ属性の状態とします。それ以外の場合は、corsAttributeStateをNo
CORSとします。
URLが空文字列でない場合、次の手順を実行します。
requestを、URL、"track"、およびcorsAttributeStateを用いて潜在的なCORSリクエストの作成の結果とし、同一オリジンのフォールバックフラグを設定します。
requestのクライアントを、track要素のノードドキュメントの関連する設定オブジェクトに設定します。
requestのイニシエータータイプを"track"に設定します。
requestをフェッチします。
フェッチングアルゴリズムによってネットワーキングタスクソースでキューに入れられたタスクは、データがフェッチされている間にリソースのタイプを判定する必要があります。リソースのタイプがサポートされているテキストトラック形式でない場合、ロードは失敗し、以下で説明されるように失敗します。そうでなければ、リソースのデータは、適切なパーサー（例：WebVTTパーサー）に受信時に渡され、その出力にテキストトラックのキューリストが使用されます。[WEBVTT]
適切なパーサーは、これらのネットワーキングタスクソースのタスクの実行中に、受信したデータを用いてテキストトラックのキューリストを段階的に更新します。
この仕様では、テキストトラックのMIMEタイプをチェックする方法や、それを行うかどうか、または実際のファイルデータを使用してファイルタイプのスニッフィングを行う方法やそれを行うかどうかについて、現在は記載されていません。この問題に関して実装者の意図が異なるため、適切な解決策が不明確です。この点に関する要件がない場合、HTTP仕様の厳格な要件であるContent-Typeヘッダーに従う必要があります（"Content-Typeは基礎となるデータのメディアタイプを指定します。" ... "メディアタイプがContent-Typeフィールドによって与えられていない場合に限り、受信者はそのコンテンツおよび/またはリソースを識別するために使用されるURIの名前拡張子を検査してメディアタイプを推測することができます。"）。
フェッチが何らかの理由で失敗した場合（ネットワークエラー、サーバーがエラーコードを返す、CORSが失敗するなど）、またはURLが空文字列である場合は、要素タスクをキューに入れ、DOM操作タスクソースを使用してメディア要素に対して最初にテキストトラックの準備状態をロードに失敗に変更し、次にエラーという名前のイベントを発生させます。
フェッチが失敗せず、リソースのタイプがサポートされているテキストトラック形式でないか、ファイルが正常に処理されなかった場合（例えば、その形式がXML形式であり、ファイルにXMLが要求する整形式エラーが含まれていて、アプリケーションに報告される必要がある場合）、上記の問題が見つかった場合にネットワーキングタスクソースでキューに入れられたタスクは、テキストトラックの準備状態をロードに失敗に変更し、エラーという名前のイベントを発生させます。
フェッチが失敗せず、ファイルが正常に処理された場合、データの解析が終了した後に、ネットワーキングタスクソースでキューに入れられた最終的なタスクは、テキストトラックの準備状態を読み込み済みに変更し、ロードという名前のイベントを発生させます。
フェッチが進行中に、次のいずれかの事象が発生した場合:
...その場合、ユーザーエージェントはフェッチを中止し、そのアルゴリズムによって生成された保留中のタスクを破棄しなければなりません（特に、URLが変更された後にキューを追加しないようにします）。その後、track要素に対してDOM操作タスクソースで要素タスクをキューに入れ、テキストトラックの準備状態をロードに失敗に変更し、エラーという名前のイベントを発生させます。
テキストトラックの準備状態が読み込み中でなくなるまで待ちます。
トラックURLがURLと一致しなくなるまで待ちます。その際にテキストトラックのモードがまたは表示中に設定されています。
トップに戻ります。
track要素のsrc属性が設定、変更、または削除されると、ユーザーエージェントはその要素のテキストトラックのテキストトラックのキューリストを直ちに空にしなければなりません。（これにより、以前に指定されたURLを使用して取得されたリソースからのキューの追加が停止されます。）
特定の形式のテキストトラックキューがHTMLユーザーエージェントによる処理のためにどのように解釈されるかは、その形式によって定義されます。そのような仕様がない場合、このセクションは、実装が一貫してそのような形式を公開しようとする際のいくつかの制約を提供します。
HTMLのテキストトラックモデルをサポートするために、タイムデータの各単位はテキストトラックキューに変換されます。この仕様で定義されているように、形式の機能をテキストトラックキューの側面にマッピングする方法が定義されていない場合、実装は、上記のテキストトラックキューの側面の定義に一致するマッピングであること、および以下の制約に一致することを確保しなければなりません：
形式に対する明確なアナログがない場合は、空の文字列に設定する必要があります。
偽に設定する必要があります。
すべての現行エンジンでサポートされています。
[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
すべての現行エンジンでサポートされています。
メディア要素（例：track要素）に関連付けられているテキストトラックの数を返します。
これは、メディア要素内のテキストトラックのリスト内のテキストトラックの数です。
media.textTracks[ n ]
textTrack = media.textTracks.getTrackById(id)
すべての現行エンジンでサポートされています。
指定された識別子を持つTextTrackオブジェクトを返しますが、その識別子を持つトラックがない場合は null を返します。
TextTrackListオブジェクトは、指定された順序でテキストトラックの動的に更新されるリストを表します。
メディア要素のtextTracks属性は、テキストトラックのリスト内のTextTrackオブジェクトを表すTextTrackListオブジェクトを返さなければなりません。同じ順序でなければなりません。
すべての現行エンジンでサポートされています。
TextTrackListオブジェクトのlength属性は、そのリスト内のテキストトラックの数を返さなければなりません。
サポートされているプロパティインデックスは、TextTrackListオブジェクト内のテキストトラックの数から1を引いた数です。リストにテキストトラックがない場合、サポートされているプロパティインデックスは存在しません。
インデックスプロパティの値を決定するには、TextTrackListオブジェクトで与えられたインデックスindexの値を決定し、TextTrackListオブジェクトで表されるリスト内のindex番目のテキストトラックを返さなければなりません。
TextTrackListオブジェクト内のTextTrackオブジェクトを最初にid属性の値と一致するトラックを見つけ、引数idに指定された値と一致する値を持つ最初のトラックを返さなければなりません。指定された引数に一致するトラックがない場合は、null
を返さなければなりません。
すべての現行エンジンでサポートされています。
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.label
すべての現行エンジンでサポートされています。
テキストトラックのラベルが存在する場合はそのラベルを返し、そうでない場合は空の文字列を返します（オブジェクトがユーザーに公開される場合、他の属性からカスタムラベルを生成する必要があることを示します）。
textTrack.language
すべての現行エンジンでサポートされています。
テキストトラックの言語文字列を返します。
textTrack.id
すべての現行エンジンでサポートされています。
指定されたトラックのIDを返します。
インバンドトラックの場合、これはフォーマットがメディアフラグメント構文をサポートしている場合に、フラグメントで使用できるIDであり、getTrackById()メソッドでも使用できます。
textTrack.inBandMetadataTrackDispatchType
TextTrack/inBandMetadataTrackDispatchType
テキストトラックインバンドメタデータトラックディスパッチタイプ文字列を返します。
textTrack.mode [ = value ]
すべての現行エンジンでサポートされています。
次のリストから、文字列としてテキストトラックモードを返します。
disabled"
テキストトラック無効モード。
モード。
showing"
テキストトラック表示モード。
設定可能で、モードを変更するために使用されます。
textTrack.cues
すべての現行エンジンでサポートされています。
テキストトラックのすべてのキューのリストを、TextTrackCueListオブジェクトとして返します。
textTrack.activeCues
すべての現行エンジンでサポートされています。
現在アクティブなテキストトラックのキューを、TextTrackCueListオブジェクトとして返します。このキューは、現在の再生位置の前に開始し、その後に終了するものです。
textTrack.addCue(cue)
すべての現行エンジンでサポートされています。
指定されたキューをtextTrackのテキストトラックのキューのリストに追加します。
textTrack.removeCue(cue)
すべての現行エンジンでサポートされています。
指定されたキューをtextTrackのテキストトラックのキューのリストから削除します。
メディア要素のaddTextTrack(kind, label,
language)メソッドが呼び出されたとき、次の手順を実行する必要があります:
新しいTextTrackオブジェクトを作成します。
新しいオブジェクトに対応するテキストトラックを作成し、そのテキストトラックの種類をkindに、テキストトラックのラベルをlabelに、テキストトラックの言語をlanguageに設定し、テキストトラックの準備状態をテキストトラックの読み込み状態に、テキストトラックのモードをモードに設定し、テキストトラックのキューのリストを空のリストに設定します。
初めは、テキストトラックのキューのリストは、テキストトラックのレンダリングを更新するルールには関連付けられていません。テキストトラックのキューが追加されると、そのテキストトラックのキューのリストは、それに応じてルールが恒久的に設定されます。
新しいテキストトラックをメディア要素のテキストトラックのリストに追加します。
メディア要素タスクをキューに入れ、メディア要素でイベントを発火させ、メディア要素のtextTracks属性のTextTrackListオブジェクトに、新しいテキストトラックのTextTrackオブジェクトで初期化されたTrackEventを使用して、addtrackという名前のイベントを発生させます。
新しいTextTrackオブジェクトを返します。
kind
属性は、TextTrackオブジェクトが表すテキストトラックのテキストトラックの種類を返さなければなりません。
label
属性は、TextTrackオブジェクトが表すテキストトラックのテキストトラックのラベルを返さなければなりません。
language
属性は、TextTrackオブジェクトが表すテキストトラックのテキストトラックの言語を返さなければなりません。
id
属性は、トラックの識別子を返します。識別子がない場合は空の文字列を返します。track要素に対応するトラックの場合、トラックの識別子はその要素のid属性の値です。インバンドトラックの場合、トラックの識別子はメディアリソースによって指定されます。メディアリソースがメディアフラグメント構文をサポートしている形式である場合、特定のトラックに対して返される識別子は、そのフラグメントのトラック次元の名前として使用された場合にトラックを有効にするのと同じ識別子でなければなりません。
inBandMetadataTrackDispatchType
属性は、TextTrackオブジェクトが表すテキストトラックのテキストトラックのインバンドメタデータトラックディスパッチタイプを返さなければなりません。
mode
属性の取得時には、TextTrackオブジェクトが表すテキストトラックのテキストトラックモードに対応する文字列を、以下のリストで定義されているように返さなければなりません:
disabled"
hidden"
showing"
設定時、新しい値が現在の属性の返り値と等しくない場合、新しい値は次のように処理されなければなりません:
disabled"の場合
TextTrackオブジェクトが表すテキストトラックのテキストトラックモードをテキストトラック無効モードに設定します。
TextTrackオブジェクトが表すテキストトラックのテキストトラックモードをモードに設定します。
showing"の場合
TextTrackオブジェクトが表すテキストトラックのテキストトラックモードをテキストトラック表示モードに設定します。
TextTrackオブジェクトが表すテキストトラックのテキストトラックモードがテキストトラック無効モードでない場合、cues属性は、TextTrackCueListオブジェクトのライブであり、TextTrackオブジェクトが表すテキストトラックのテキストトラックのキューのリストのうち、終了時間がスクリプトが開始したときの最も早い可能な位置に発生するか、それ以降に発生する部分をテキストトラックのキュー順序に従って表すものでなければなりません。それ以外の場合はnullを返さなければなりません。各TextTrackオブジェクトに対して、オブジェクトが返される場合は、毎回同じTextTrackCueListオブジェクトを返さなければなりません。
TextTrackオブジェクトが表すテキストトラックのテキストトラックモードがテキストトラック無効モードでない場合、activeCues属性は、TextTrackCueListオブジェクトのライブであり、TextTrackオブジェクトが表すテキストトラックのテキストトラックのキューのリストのうち、スクリプトが開始したときにアクティブフラグが設定されていた部分をテキストトラックのキュー順序に従って表すものでなければなりません。それ以外の場合はnullを返さなければなりません。各TextTrackオブジェクトに対して、オブジェクトが返される場合は、毎回同じTextTrackCueListオブジェクトを返さなければなりません。
テキストトラックのキューのスクリプトが開始したときにアクティブフラグが設定されていた場合、そのテキストトラックキューアクティブフラグは、前回イベントループがステップ1に到達したときに設定されていました。
addCue(cue) メソッドは、 TextTrack
オブジェクトに対して呼び出されたとき、次の手順を実行する必要があります:
テキストトラックのキューのリスト がまだ関連する テキストトラックレンダリングの更新ルール を持っていない場合は、 テキストトラックのキューのリスト を cue に適したテキストトラックレンダリングの更新ルール に関連付けます。
テキストトラックのキューのリスト
に関連付けられた テキストトラックレンダリングの更新ルール が、
cue に適した テキストトラックレンダリングの更新ルール
と同じでない場合は、 "InvalidStateError" を投げます。
指定された cue が テキストトラックのキューのリスト に含まれている場合、その テキストトラックのキューのリスト から cue を削除します。
cue を TextTrack オブジェクトの
テキストトラック の テキストトラックのキューのリスト
に追加します。
removeCue(cue) メソッドは、 TextTrack
オブジェクトに対して呼び出されたとき、次の手順を実行する必要があります:
指定された cue が TextTrack
オブジェクトの テキストトラック の テキストトラックのキューのリスト
に含まれていない場合、 "NotFoundError" を投げます。
cue を TextTrack オブジェクトの
テキストトラック の テキストトラックのキューのリスト
から削除します。
この例では、 audio
要素を使用して、複数のサウンドエフェクトを含む音声ファイルから特定のサウンドエフェクトを再生します。ブラウザがスクリプトを実行中でも、オーディオがクリップの終わりで正確に停止するように、キューを使用してオーディオを一時停止します。スクリプトに頼ってオーディオを一時停止していた場合、ブラウザが指定された時間にスクリプトを実行できなかった場合、次のクリップの開始が聞こえる可能性があります。
var sfx = new Audio( 'sfx.wav' );
var sounds = sfx. addTextTrack( 'metadata' ); >
// 追加するサウンドエフェクト
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(); >
} >
// 準備が整ったらすぐに鳴らす
sfx. oncanplaythrough = function () { >
playSound( 'dog bark' ); >
} >
// ユーザーがページを離れようとしたときにニャーと鳴き、ブラウザに確認を求める
window. onbeforeunload = function ( e) {
playSound( 'kitten mew' ); >
e. preventDefault(); >
} すべての現在のエンジンでサポートされています。
[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
オブジェクトは、指定された順序で動的に更新される テキストトラックキュー のリストを表します。
すべての現行エンジンでサポートされています。
length 属性は、TextTrackCueList オブジェクトが表すリスト内の
キュー の数を返さなければなりません。
TextTrackCueList オブジェクトの
サポートされるプロパティインデックスは、任意の時点で、そのオブジェクトが表すリスト内の キュー の数から 1 を引いた値までの 0 からの番号です（キューが存在する場合）。リスト内に
キュー が存在しない場合、サポートされるプロパティインデックスは存在しません。
指定されたインデックス index の
インデックス付きプロパティの値を決定するには、ユーザーエージェントは TextTrackCueList オブジェクトが表すリスト内の
index 番目の テキストトラックキュー を返さなければなりません。
すべての現行エンジンでサポートされています。
getCueById(id) メソッドは、空文字列以外の引数で呼び出された場合、TextTrackCueList オブジェクトが表すリスト内で
テキストトラックキュー の テキストトラックキュー識別子 が
id と一致する最初のキューを返し（存在する場合）、それ以外の場合は null を返さなければなりません。引数が空文字列の場合、このメソッドは null を返さなければなりません。
すべての現在のエンジンでサポートされています。
[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.trackTextTrack オブジェクトにこの テキストトラックキュー が属している場合はそのオブジェクトを返し、それ以外の場合は null を返します。
cue.id [ = value ]
テキストトラックキュー識別子を返します。
設定することもできます。
cue.startTime [ = value ]
テキストトラックキューの開始時間を秒単位で返します。
設定することもできます。
cue.endTime [ = value ]
テキストトラックキューの終了時間を秒単位で返します。
無制限のテキストトラックキューの場合は、正の無限大を返します。
設定することもできます。
cue.pauseOnExit [ = value ]
テキストトラックキューの終了時に一時停止フラグが設定されている場合は true を返し、そうでない場合は false を返します。
設定することもできます。
すべての現在のエンジンでサポートされています。
track
属性は、取得時に、TextTrack オブジェクトが属する テキストトラック の キューのリスト に、テキストトラックキュー が含まれている場合、そのオブジェクトを返します。そうでない場合は null を返します。
すべての現在のエンジンでサポートされています。
id
属性は、取得時に、テキストトラックキュー識別子を返します。設定時には、新しい値に設定されます。
すべての現在のエンジンでサポートされています。
startTime 属性は、取得時に、テキストトラックキューの開始時間を秒単位で返します。設定時には、新しい値に設定され、秒単位で解釈されます。その後、TextTrackCue オブジェクトが テキストトラック の キューのリスト に含まれ、その テキストトラック が メディア要素 の テキストトラックのリスト に含まれ、かつその メディア要素 の ポスターフラグ が設定されていない場合は、その メディア要素 に対して 時間進行 ステップを実行します。
すべての現在のエンジンでサポートされています。
endTime
属性は、取得時に、テキストトラックキューの終了時間を秒単位で返します。設定時には、もし新しい値が負の無限大または
NaN（非数）であれば、TypeError
例外をスローします。それ以外の場合、新しい値に設定されます。その後、TextTrackCue オブジェクトが テキストトラック の キューのリスト に含まれ、その テキストトラック が メディア要素 の テキストトラックのリスト に含まれ、かつその メディア要素 の ポスターフラグ が設定されていない場合は、その メディア要素 に対して 時間進行 ステップを実行します。
すべての現在のエンジンでサポートされています。
pauseOnExit 属性は、取得時に、テキストトラックキューの終了時に一時停止フラグが設定されている場合は true
を返し、そうでない場合は false を返します。設定時には、新しい値が true の場合はフラグを設定し、それ以外の場合はフラグを解除します。
以下は、イベントハンドラーと、その対応するイベントハンドラーイベントタイプであり、すべてのTextTrackListインターフェイスを実装するオブジェクトが、イベントハンドラーIDL属性としてサポートしなければならないものです。
| イベントハンドラー | イベントハンドラーイベントタイプ |
|---|---|
onchange
| change
|
onaddtrack
| addtrack
|
onremovetrack
| removetrack
|
以下は、イベントハンドラーと、その対応するイベントハンドラーイベントタイプであり、すべてのTextTrackインターフェイスを実装するオブジェクトが、イベントハンドラーIDL属性としてサポートしなければならないものです。
| イベントハンドラー | イベントハンドラーイベントタイプ |
|---|---|
oncuechange
すべての現在のエンジンでサポートされています。 Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | cuechange
|
以下は、イベントハンドラーと、その対応するイベントハンドラーイベントタイプであり、すべてのTextTrackCueインターフェイスを実装するオブジェクトが、イベントハンドラーIDL属性としてサポートしなければならないものです。
| イベントハンドラー | イベントハンドラーイベントタイプ |
|---|---|
onenter
すべての現在のエンジンでサポートされています。 Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | enter
|
onexit
すべての現在のエンジンでサポートされています。 Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | exit
|
このセクションは規範的ではありません。
テキストトラックは、インタラクティブまたは拡張されたビューのために、メディアデータに関連するデータを保存するために使用できます。
例えば、スポーツ放送を表示するページには、現在のスコアに関する情報が含まれる可能性があります。たとえば、ロボットコンペティションがライブ配信されているとします。画像にスコアをオーバーレイすることができます。以下のように表示されます。
ユーザーがビデオの任意のポイントにシークする際に、スコア表示を正しくレンダリングするためには、メタデータテキストトラックのキューはスコアに適した長さである必要があります。例えば、上記のフレームでは、試合番号を示すキューが試合の長さに対応して存在し、青チームのスコアが変わるまで続くキューが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」など、問題が発生します。主に、シークの実装が非常に難しくなり、スクリプトはすべてのキューのリストを調べて、通知が見逃されていないか確認する必要があります。また、キューが短い場合、スクリプトがそれらがアクティブであることを認識できない可能性があり、それを特別に監視しない限り、見逃す可能性があります。
このような方法でキューを使用する場合、著者は現在の注釈を更新するために、cuechangeイベントを使用することを推奨します。（特に、timeupdateイベントを使用するのはあまり適切ではありません。なぜなら、キューが変更されていない場合でも作業を行う必要があり、さらに重要なことに、メタデータキューがアクティブになる時点と表示が更新される時点の間に、高い遅延が発生するためです。timeupdateイベントはレート制限されています。）
URLを使用して、AudioTrackのkind
IDL属性や、VideoTrackのkind
IDL属性の戻り値、またはテキストトラックの種類を識別する必要がある他の仕様や形式は、about:html-kind
URLを使用しなければなりません。
controls属性は、ブール属性です。指定されている場合、作成者がスクリプト化されたコントローラーを提供しておらず、ユーザーエージェントに独自のコントロールセットを提供してほしいことを示します。
この属性が指定されている場合、またはスクリプトが無効化されている場合、メディア要素に対して、ユーザーエージェントはユーザーにユーザーインターフェースを提供する必要があります。このユーザーインターフェースには、再生の開始、再生の一時停止、コンテンツの任意の位置へのシーク（コンテンツが任意のシークをサポートしている場合）、音量の変更、クローズドキャプションや埋め込まれた手話トラックの表示の変更、異なるオーディオトラックの選択または音声説明のオンにすること、ユーザーに適した方法でのメディアコンテンツの表示（例：全画面ビデオや独立したリサイズ可能なウィンドウ）などの機能が含まれているべきです。他のコントロールも提供される場合があります。
ただし、この属性が指定されていない場合でも、ユーザーエージェントはメディアリソースの再生に影響を与えるコントロール（例：再生、一時停止、シーク、トラック選択、音量コントロール）を提供することができますが、そのような機能はページの通常のレンダリングを妨げるべきではありません。たとえば、そのような機能は、メディア要素のコンテキストメニュー、プラットフォームメディアキー、またはリモートコントロールで公開される可能性があります。ユーザーエージェントは、上記で説明したように、ユーザーにユーザーインターフェースを提供することによってこれを単純に実装することができます（まるでcontrols属性が指定されているかのように）。
ユーザーエージェントがユーザーにユーザーインターフェースを提供することにより、メディア要素上にコントロールを表示する場合、ユーザーエージェントがこのインターフェースと対話している間は、ユーザー操作イベントを抑制するべきです。（たとえば、ユーザーがビデオの再生コントロールをクリックした場合、mousedownイベントなどがページ上の要素に同時に発火されることはありません。）
可能であれば（具体的には、再生の開始、停止、一時停止、および再開、シーク、再生速度の変更、早送りまたは巻き戻し、テキストトラックのリスト化、有効化、無効化、およびオーディオのミュートや音量変更のために）、ユーザーエージェントによって公開されるユーザーインターフェース機能は、上記で説明したDOM APIの観点で実装されなければならないため、同じイベントがすべて発火します。
早送りや巻き戻しなどの機能は、playbackRate属性のみを変更することによって実装されなければなりません（defaultPlaybackRate属性は変更されません）。
シークは、シークして、メディア要素のメディアタイムラインの要求された位置に到達する観点で実装されなければなりません。任意の位置へのシークが遅くなるメディアリソースの場合、ユーザーがシークバーなどの近似位置インターフェースを操作したときに、ユーザーエージェントが速度優先の近似フラグを使用することが推奨されます。
media.volume [ = value ]
すべての現在のエンジンでサポートされています。
現在の再生音量を、0.0から1.0の範囲の数値として返します。0.0が最も静かで、1.0が最も大きい音量です。
音量を変更するために設定することができます。
新しい値が0.0から1.0の範囲にない場合、"IndexSizeError" DOMExceptionがスローされます。
media.muted [ = value ]
すべての現在のエンジンでサポートされています。
オーディオがミュートされている場合はtrueを返し、volume属性を無効にし、ミュートされていない場合はvolume属性が有効であることを示します。
オーディオがミュートされているかどうかを変更するために設定できます。
メディア要素には、0.0（無音）から1.0（最大音量）の範囲の分数である再生音量があります。初期状態では、音量は1.0であるべきですが、ユーザーエージェントはセッション間やサイトごとに、またはその他の方法で最後に設定された値を記憶している場合があるため、音量は他の値から開始する場合があります。
volume
IDL属性は、再生音量をメディア要素のオーディオ部分に返さなければなりません。設定時に、新しい値が0.0から1.0の範囲内にある場合、メディア要素の再生音量は新しい値に設定されなければなりません。新しい値が0.0から1.0の範囲外にある場合、設定時に"IndexSizeError" DOMExceptionがスローされなければなりません。
メディア要素は、ミュートにすることもできます。何かが要素をミュートしている場合、その要素はミュートされています。（たとえば、再生方向が逆の場合、その要素はミュートされています。）
muted
IDL属性は、最後に設定された値を返さなければなりません。メディア要素が作成されたとき、要素にmutedコンテンツ属性が指定されている場合は、muted
IDL属性はtrueに設定されるべきです。そうでない場合、ユーザーエージェントはユーザーの好みの値に設定することがあります（例：セッション間やサイトごとに、またはその他の方法で最後に設定された値を記憶している場合など）。muted IDL属性がtrueに設定されている間、メディア要素はミュートされなければなりません。
volumeおよびmutedIDL属性によって返される値が変更された場合、ユーザーエージェントはメディア要素タスクをキューに追加し、メディア要素でvolumechangeという名前のイベントを発火しなければなりません。その後、メディア要素が再生を許可されていない場合、ユーザーエージェントは内部一時停止手順を実行しなければなりません。
ユーザーエージェントには、音量ロック（ブール値）があります。その値は実装依存であり、再生音量が反映されるかどうかを決定します。
要素の効果的なメディア音量は、次のように決定されます。
メディア要素上のmutedコンテンツ属性は、ブール属性であり、ユーザーの好みを無視して、メディアリソースのオーディオ出力のデフォルト状態を制御します。
この属性には動的な効果はありません（要素のデフォルト状態を制御するだけです）。
このビデオ（広告）は自動再生されますが、ユーザーを煩わせないために、音声なしで再生され、ユーザーが音声をオンにすることができます。ユーザーエージェントは、ユーザー操作なしにビデオがミュート解除されると、一時停止することができます。
< video src = "adverts.cgi?kind=video" controls autoplay loop muted ></ video > すべての現在のエンジンでサポートされています。
TimeRangesインターフェースを実装するオブジェクトは、時間の範囲（期間）のリストを表します。
[Exposed =Window ]
interface TimeRanges {
readonly attribute unsigned long length ;
double start (unsigned long index );
double end (unsigned long index );
};media.length
すべての現在のエンジンでサポートされています。
オブジェクト内の範囲の数を返します。
time = media.start(index)
すべての現在のエンジンでサポートされています。
指定されたインデックスを持つ範囲の開始時刻を返します。
インデックスが範囲外の場合、"IndexSizeError" DOMExceptionをスローします。
time = media.end(index)
すべての現在のエンジンでサポートされています。
指定されたインデックスを持つ範囲の終了時刻を返します。
インデックスが範囲外の場合、"IndexSizeError" DOMExceptionをスローします。
length
IDL属性は、オブジェクトが表す範囲の数を返さなければなりません。
start(index)メソッドは、オブジェクトが表すindex番目の範囲の開始位置を、オブジェクトがカバーするタイムラインの開始から測定した秒数で返さなければなりません。
end(index)メソッドは、オブジェクトが表すindex番目の範囲の終了位置を、オブジェクトがカバーするタイムラインの開始から測定した秒数で返さなければなりません。
これらのメソッドは、オブジェクトが表す範囲の数以上のindex引数を指定して呼び出された場合、"IndexSizeError" DOMExceptionをスローしなければなりません。
TimeRangesオブジェクトが正規化されたTimeRangesオブジェクトとされる場合、それが表す範囲は次の基準を満たしていなければなりません。
言い換えれば、そのようなオブジェクトの範囲は順序付けられており、重複せず、接触していません（隣接する範囲は1つの大きな範囲に統合されます）。範囲は空であってもよい（時間の単一の瞬間を参照している）、たとえば、メディア要素が一時停止しているときに、ユーザーエージェントが現在のフレームを除くすべてのメディアリソースを破棄した場合などです。
TimeRangesオブジェクト内の範囲は、包含的でなければなりません。
したがって、範囲の終了は、次の隣接する（接触しているが重なっていない）範囲の開始と等しくなります。同様に、ゼロを基準にアンカーされたタイムライン全体をカバーする範囲は、開始がゼロで、終了がタイムラインの長さと等しくなります。
メディア要素のbuffered、seekable、およびplayedIDL属性によって返されるオブジェクトによって使用されるタイムラインは、その要素のメディアタイムラインでなければなりません。
TrackEventインターフェースすべての現在のエンジンでサポートされています。
[Exposed =Window ]
interface TrackEvent : Event {
constructor (DOMString type , optional TrackEventInit eventInitDict = {});
readonly attribute (VideoTrack or AudioTrack or TextTrack )? track ;
};
dictionary TrackEventInit : EventInit {
(VideoTrack or AudioTrack or TextTrack )? track = null ;
};event.track
すべての現在のエンジンでサポートされています。
イベントが関連するトラックオブジェクト（TextTrack、AudioTrack、またはVideoTrack）を返します。
track属性は、初期化された値を返さなければなりません。これは、イベントのコンテキスト情報を表します。
このセクションは規範的ではありません。
以下のイベントは、上記の処理モデルの一部としてメディア要素で発生します。
| イベント名 | インターフェース | 発生条件 | 前提条件 |
|---|---|---|---|
loadstart
HTMLMediaElement/loadstart_event すべての現在のエンジンでサポートされています。 Firefox6+Safari4+Chrome3+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | Event
| ユーザーエージェントがメディアデータを探し始めたとき、リソース選択アルゴリズムの一部として発生します。 | networkStateがNETWORK_LOADINGと等しいとき。
|
progress
HTMLMediaElement/progress_event すべての現在のエンジンでサポートされています。 Firefox6+Safari3.1+Chrome3+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | Event
| ユーザーエージェントがメディアデータを取得しているとき。 | networkStateがNETWORK_LOADINGと等しいとき。
|
suspend
HTMLMediaElement/suspend_event すべての現在のエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | Event
| ユーザーエージェントが意図的に現在メディアデータを取得していないとき。 | networkStateがNETWORK_IDLEと等しいとき。
|
abort
すべての現在のエンジンでサポートされています。 Firefox9+Safari3.1+Chrome3+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | Event
| ユーザーエージェントがメディアデータを完全にダウンロードする前に取得を停止したが、それがエラーによるものではないとき。 | errorがMEDIA_ERR_ABORTEDコードを持つオブジェクトであるとき。networkStateがNETWORK_EMPTYまたはNETWORK_IDLEと等しい。
|
error
すべての現在のエンジンでサポートされています。 Firefox6+Safari3.1+Chrome3+
Opera11.6+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12+ | Event
| エラーが発生し、メディアデータが取得できなかったか、リソースのタイプがサポートされていないメディア形式であるとき。 | errorがMEDIA_ERR_NETWORKまたはそれ以上のコードを持つオブジェクトであるとき。networkStateがNETWORK_EMPTYまたはNETWORK_IDLEと等しい。
|
emptied
HTMLMediaElement/emptied_event すべての現在のエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | Event
| 以前のnetworkStateがNETWORK_EMPTY状態ではなかったメディア要素が、その状態に切り替わったとき（致命的なエラーが発生し、報告される直前や、リソース選択アルゴリズムがすでに実行中のときにload()メソッドが呼び出された場合など）。
| networkStateがNETWORK_EMPTYであり、すべてのIDL属性が初期状態にある。
|
stalled
HTMLMediaElement/stalled_event すべての現在のエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | Event
| ユーザーエージェントがメディアデータを取得しようとしているが、データが予期せず届かない場合に発生します。 | networkStateがNETWORK_LOADINGと等しい。
|
loadedmetadata
HTMLMediaElement/loadedmetadata_event すべての現在のエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | Event
| ユーザーエージェントがメディアリソースの期間と寸法を判定し、テキストトラックが準備完了になったときに発生します。 | readyStateが初めてHAVE_METADATA以上になったとき。
|
loadeddata
HTMLMediaElement/loadeddata_event すべての現在のエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | Event
| ユーザーエージェントがメディアデータを現在の再生位置で初めてレンダリングできるようになったときに発生します。 | readyStateが初めてHAVE_CURRENT_DATA以上に増加したとき。
|
canplay
HTMLMediaElement/canplay_event すべての現在のエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | Event
| ユーザーエージェントがメディアデータを再生できるが、現在の再生レートでメディアリソースを終了まで再生するには、さらにバッファリングが必要だと推定されるときに発生します。 | readyStateが初めてHAVE_FUTURE_DATA以上に増加したとき。
|
canplaythrough
HTMLMediaElement/canplaythrough_event すべての現在のエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | Event
| ユーザーエージェントが、現在の再生レートでメディアリソースを終了までバッファリングせずに再生できると推定されたときに発生します。 | readyStateがHAVE_ENOUGH_DATAと等しい。
|
playing
HTMLMediaElement/playing_event すべての現在のエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | Event
| メディアデータの不足により一時停止または遅延した後に再生が準備できたときに発生します。 | readyStateがHAVE_FUTURE_DATA以上になったとき、pausedがfalseであるか、pausedがfalseに変更され、readyStateがHAVE_FUTURE_DATA以上に増加したとき。たとえこのイベントが発生しても、潜在的な再生が開始されない可能性があります。例えば、ユーザー操作のために一時停止されている場合や、インバンドコンテンツのために一時停止されている場合です。
|
waiting
HTMLMediaElement/waiting_event すべての現在のエンジンでサポートされています。 Firefox6+Safari3.1+Chrome3+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | Event
| 次のフレームが利用できないために再生が停止したが、ユーザーエージェントはそのフレームがすぐに利用可能になると予測しているとき。 | readyStateがHAVE_CURRENT_DATA以下であり、pausedがfalseである。seekingがtrueであるか、現在の再生位置がbufferedのいずれの範囲にも含まれていない。その他の理由で再生が停止することがあるが、pausedがfalseであってもこのイベントは発生しません（これらの状況が解決しても、別のplayingイベントが発生することはありません）。例えば、再生が終了した場合や、エラーのために再生が停止した場合、ユーザー操作のために一時停止された場合やインバンドコンテンツのために一時停止された場合です。
|
seeking
HTMLMediaElement/seeking_event すべての現在のエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | Event
| seeking IDL 属性が true
に変更され、ユーザーエージェントが新しい位置のシークを開始したときに発生します。
| |
seeked
すべての現在のエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | Event
| seeking IDL 属性が false
に変更され、現在の再生位置
が変更された後に発生します。
| |
ended
すべての現在のエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | Event
| メディアリソースの終わりに到達したために再生が停止した場合に発生します。 | currentTime が
メディアリソース の終わりと等しくなり、ended が true になります。
|
durationchange
HTMLMediaElement/durationchange_event すべての現在のエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | Event
| duration
属性が更新されたときに発生します。
| |
timeupdate
HTMLMediaElement/timeupdate_event すべての現在のエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | Event
| 現在の再生位置が、通常の再生の一環として、または特に興味深い方法で変更されたときに発生します。たとえば、不連続に変更された場合などです。 | |
play
すべての現在のエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | Event
| 要素が一時停止されなくなったときに発生します。 play()
メソッドが戻った後、または autoplay
属性が再生を開始したときに発生します。
| paused が新たに false
になりました。
|
pause
すべての現在のエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | Event
| 要素が一時停止されたときに発生します。 pause()
メソッドが戻った後に発生します。
| paused が新たに true
になりました。
|
ratechange
HTMLMediaElement/ratechange_event すべての現在のエンジンでサポートされています。 Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | Event
| defaultPlaybackRate
または playbackRate
属性が更新されたときに発生します。
| |
resize
| Event
| いずれか、または両方の videoWidth
および
videoHeight
属性が更新されたときに発生します。
| メディア要素 が ビデオ 要素であり、readyState が
HAVE_NOTHING
でない場合。
|
volumechange
HTMLMediaElement/volumechange_event すべての現在のエンジンでサポートされています。 Firefox6+Safari3.1+Chrome3+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | Event
| volume 属性または muted
属性が変更されたときに発生します。該当する属性のセッターが戻った後に発生します。
|
次のイベントは、source要素に対して発生します：
| イベント名 | インターフェース | 発生条件 |
|---|---|---|
error |
Event
|
メディアデータの取得中にエラーが発生するか、リソースのタイプがサポートされていないメディアフォーマットである場合。 |
以下のイベントは、AudioTrackList、VideoTrackList、およびTextTrackListオブジェクトで発生します：
| イベント名 | インターフェース | 発生するタイミング... |
|---|---|---|
change
すべての現行エンジンでサポートされています。 Firefox🔰
33+Safari7+Chrome🔰
37+
Opera?Edge🔰 79+ Edge (Legacy)いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? すべての現行エンジンでサポートされています。 Firefox31+Safari7+Chrome33+
Opera?Edge79+ Edge (Legacy)18Internet Explorerいいえ Firefox Android?Safari iOS?Chrome Android?WebView Android4.4+Samsung Internet?Opera Android? すべての現行エンジンでサポートされています。 Firefox🔰
33+Safari7+Chrome🔰
37+
Opera?Edge🔰 79+ Edge (Legacy)いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? |
Event
|
トラックリスト内の 1 つ以上のトラックが有効または無効になったとき。 |
addtrack
すべての現行エンジンでサポートされています。 Firefox🔰
33+Safari7+Chrome🔰
37+
Opera?Edge🔰 79+ Edge (Legacy)いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? すべての現行エンジンでサポートされています。 Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer11 Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ すべての現行エンジンでサポートされています。 Firefox🔰
33+Safari7+Chrome🔰
37+
Opera?Edge🔰 79+ Edge (Legacy)いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? |
TrackEvent |
トラックリストにトラックが追加されたとき。 |
removetrack
AudioTrackList/removetrack_event すべての現行エンジンでサポートされています。 Firefox🔰
33+Safari7+Chrome🔰
37+
Opera?Edge🔰 79+ Edge (Legacy)いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? TextTrackList/removetrack_event すべての現行エンジンでサポートされています。 Firefox31+Safari7+Chrome33+
Opera20+Edge79+ Edge (Legacy)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 (Legacy)いいえInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? |
TrackEvent |
トラックリストからトラックが削除されたとき。 |
以下のイベントは、TextTrackオブジェクトおよびtrack要素で発生します：
| イベント名 | インターフェース | 発生するタイミング... |
|---|---|---|
cuechange
HTMLTrackElement/cuechange_event すべての現行エンジンでサポートされています。 Firefox68+Safari10+Chrome32+
Opera19+Edge79+ Edge (Legacy)14+Internet Explorerいいえ Firefox Android?Safari iOS?Chrome Android?WebView Android4.4.3+Samsung Internet?Opera Android19+ すべての現行エンジンでサポートされています。 Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ |
Event
|
トラック内の 1 つ以上のキューがアクティブになったか、アクティブでなくなったとき。 |
以下のイベントは、track要素で発生します：
| イベント名 | インターフェース | 発生するタイミング... |
|---|---|---|
error
|
Event
|
トラックデータの取得中にエラーが発生した場合、またはリソースのタイプがサポートされていないテキストトラック形式である場合。 |
load
|
Event
|
トラックデータが取得され、正常に処理された場合。 |
以下のイベントは、TextTrackCueオブジェクトで発生します：
| イベント名 | インターフェース | 発生するタイミング... |
|---|---|---|
enter
すべての現行エンジンでサポートされています。 Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ |
Event
|
キューがアクティブになったとき。 |
exit
すべての現行エンジンでサポートされています。 Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ |
Event
|
キューがアクティブでなくなったとき。 |
videoおよびaudio要素の主なセキュリティとプライバシーへの影響は、クロスオリジンでメディアを埋め込む機能に由来します。脅威が流れる方向は、悪意のあるコンテンツから被害者のページへのものと、悪意のあるページから被害者のコンテンツへのものの二方向です。
被害者のページが悪意のあるコンテンツを埋め込む場合、脅威はそのコンテンツに埋め込まれたスクリプトがDocumentに対して何らかの操作を試みる可能性があるということです。これを回避するために、ユーザーエージェントはコンテンツから埋め込んだページへのアクセスがないことを保証しなければなりません。DOMの概念を使用するメディアコンテンツの場合、埋め込まれたコンテンツは、独自の無関係なトップレベルのトラバース可能として扱わなければなりません。
例えば、SVGアニメーションがvideo要素に埋め込まれた場合、ユーザーエージェントは外側のページのDOMにアクセスさせません。SVGリソース内のスクリプトの視点から見ると、SVGファイルは親を持たない単独のトップレベルトラバース可能として表示されます。
悪意のあるページが被害者のコンテンツを埋め込む場合、脅威は埋め込みページがそれ以外ではアクセスできない情報をコンテンツから取得できることです。APIは、メディアの存在、その種類、継続時間、サイズ、およびホストのパフォーマンス特性などの情報を公開します。このような情報はすでに問題を引き起こす可能性がありますが、実際には同様の情報はimg要素を使用してもほぼ同様に取得できるため、許容されると考えられています。
しかし、ユーザーエージェントがコンテンツ内のメタデータ（字幕など）をさらに公開すると、はるかに機密性の高い情報が取得される可能性があります。そのため、この情報はビデオリソースがCORSを使用している場合にのみ公開されます。crossorigin属性は、CORSを有効にするために著者が使用できます。[FETCH]
この制限がなければ、攻撃者は企業ネットワーク内で実行中のユーザーをだまして、企業のイントラネット上の以前に漏洩した場所からビデオを読み込もうとするサイトにアクセスさせる可能性があります。そのようなビデオに新製品の機密計画が含まれていた場合、字幕を読むことができると深刻な機密情報の漏洩につながります。
このセクションは規範的ではありません。
セットトップボックスや携帯電話などの小型デバイスでオーディオおよびビデオリソースを再生する場合、デバイスのハードウェアリソースが限られていることが多いです。例えば、デバイスが同時にサポートできるビデオは3つだけかもしれません。このため、メディア要素が再生を終えたら、そのリソースを解放することが良いプラクティスです。これには、要素へのすべての参照を非常に慎重に削除し、ガベージコレクションが行われるようにするか、さらに良い方法として、要素のsrc属性を空の文字列に設定することが含まれます。srcObjectが設定されていた場合は、代わりにsrcObjectをnullに設定します。
同様に、再生速度が正確に1.0でない場合、ハードウェア、ソフトウェア、またはフォーマットの制限により、ビデオフレームがドロップしたり、音声が途切れたりミュートされたりする可能性があります。
このセクションは規範的ではありません。
さまざまな側面でメディア要素APIがどれだけ正確に実装されているかは、実装の品質に関する問題と見なされます。
例えば、buffered属性を実装する際、バッファされた範囲をどれだけ正確に報告するかは、ユーザーエージェントがデータをどれだけ慎重に検査するかに依存します。APIは範囲を時間として報告しますが、データはバイトストリームで取得されるため、可変ビットレートストリームを受信するユーザーエージェントは、すべてのデータを実際にデコードすることでのみ正確な時間を決定できるかもしれません。ただし、ユーザーエージェントがこれを行う必要はなく、代わりに推定値を返すことができます（たとえば、これまでに見られた平均ビットレートに基づいて）、その後の情報が利用可能になると修正されます。
一般的なルールとして、ユーザーエージェントは楽観的ではなく慎重であることが推奨されます。例えば、すべてがバッファされたと報告したが実際にはそうでなかった場合、それは問題です。
もう一つの実装の品質に関する問題は、コーデックが前方向の再生専用に設計されている場合にビデオを逆方向に再生することです（たとえば、キーフレームが少なく、それらが離れており、間のフレームは前のフレームからのデルタしか持たない場合）。ユーザーエージェントは、キーフレームのみを表示するなど、低品質な処理を行うかもしれません。しかし、より良い実装では、前方にビデオの部分を実際にデコードし、完全なフレームを保存し、それを逆方向に再生するなど、より多くの作業を行い、結果としてより良い処理を行います。
同様に、実装はいつでもバッファされたデータを破棄することが許可されていますが（メディア要素のライフタイム中に取得されたすべてのメディアデータをユーザーエージェントが保持する必要はありません）、これも実装の品質に関する問題です。十分なリソースを持つユーザーエージェントは、すべてのデータを保持することが推奨されます。これにより、より良いユーザー体験が可能になります。例えば、ユーザーがライブストリームを視聴している場合、ユーザーエージェントはユーザーにライブビデオのみを表示させることができますが、より優れたユーザーエージェントはすべてをバッファし、ユーザーが以前の素材をシークしたり、一時停止したり、前後に再生したりできるようにします。
メディア要素が一時停止中にドキュメントから削除され、イベントループがステップ1に到達する前に再挿入されない場合、リソースに制約のある実装は、その機会を利用して、メディア要素が使用するすべてのハードウェアリソース（ビデオプレーン、ネットワークリソース、データバッファなど）を解放することが推奨されます。（ただし、後で再生が再開された場合に備えて、ユーザーエージェントは再生位置などを追跡し続ける必要があります。）
map 要素全てのエンジンでサポートされています。
全てのエンジンでサポートされています。
name — イメージマップの名前を指定し、usemap属性から参照されるようにする
[Exposed =Window ]
interface HTMLMapElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions , Reflect ] attribute DOMString name ;
[SameObject ] readonly attribute HTMLCollection areas ;
};map要素は、img要素および任意のarea要素の子孫と組み合わせて、イメージマップを定義します。この要素はその子孫を表現します。
name属性は、マップに名前を与えて、参照できるようにします。この属性は必須であり、非空の値を持ち、ASCII空白文字を含まない必要があります。name属性の値は、同じツリー内の別のmap要素のname属性の値と一致してはなりません。id属性も指定されている場合、両方の属性は同じ値を持つ必要があります。
map.areasmap 内の area 要素の HTMLCollection
を返します。
areas
属性は、map 要素をルートとし、フィルターが area 要素のみ一致する HTMLCollection
を返さなければなりません。
イメージマップは、ページ上の他のコンテンツと組み合わせて定義することができ、保守が容易です。この例は、ページの上部にイメージマップがあり、対応するテキストリンクがページの下部にあるページの例です。
<!DOCTYPE HTML>
< HTML LANG = "EN" >
< TITLE > Babies™: Toys</ TITLE >
< HEADER >
< H1 > Toys</ H1 >
< IMG SRC = "/images/menu.gif"
ALT = "Babies™ navigation menu. Select a department to go to its page."
USEMAP = "#NAV" >
</ HEADER >
...
< FOOTER >
< MAP NAME = "NAV" >
< P >
< A HREF = "/clothes/" > Clothes</ A >
< AREA ALT = "Clothes" COORDS = "0,0,100,50" HREF = "/clothes/" > |
< A HREF = "/toys/" > Toys</ A >
< AREA ALT = "Toys" COORDS = "100,0,200,50" HREF = "/toys/" > |
< A HREF = "/food/" > Food</ A >
< AREA ALT = "Food" COORDS = "200,0,300,50" HREF = "/food/" > |
< A HREF = "/books/" > Books</ A >
< AREA ALT = "Books" COORDS = "300,0,400,50" HREF = "/books/" >
</ P >
</ MAP >
</ FOOTER > area要素すべての現行エンジンでサポートされています。
すべての現行エンジンでサポートされています。
Support in all current engines.
Support in all current engines.
map要素の祖先が存在する場合のみ。
alt — 画像が利用できない場合の代替テキスト
coords — イメージマップに作成される形状の座標
shape — イメージマップに作成される形状の種類
href — ハイパーリンクのアドレス
target — ナビゲーブルのハイパーリンク ナビゲーション
download —
リソースをナビゲートする代わりにダウンロードするかどうか、およびその場合のファイル名
ping — URLにpingを送信
rel — ハイパーリンクを含む文書の位置と宛先リソースの間の関係
referrerpolicy
— 要素によって開始された参照ポリシー。
href属性がある場合: 著者向け; 実装者向け。
[Exposed =Window ]
interface HTMLAreaElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions , Reflect ] attribute DOMString alt ;
[CEReactions , Reflect ] attribute DOMString coords ;
[CEReactions , Reflect ] attribute DOMString shape ;
[CEReactions , Reflect ] attribute DOMString target ;
[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 referrerPolicy ;
// also has obsolete members
};
HTMLAreaElement includes HTMLHyperlinkElementUtils ;area要素は、テキストを伴ったハイパーリンクと画像マップ上の対応する領域、または画像マップ上の無効な領域のいずれかを表します。
親ノードを持つarea要素には、map要素の祖先が必要です。
もしarea要素にhref属性がある場合、そのarea要素はハイパーリンクを表します。この場合、alt属性が必要です。これはハイパーリンクのテキストを指定します。この値は、他のハイパーリンクのために指定されたテキストや、画像の代替テキストと共に提示されたときに、画像自体なしでハイパーリンクが提供するのと同じ種類の選択肢をユーザーに提供するテキストでなければなりません。もし同じ画像マップ内に同じリソースを指す別のarea要素があり、そのalt属性が空でない場合、alt属性は空白のままにすることができます。
もしarea要素にhref属性がない場合、その要素が表す領域は選択できず、alt属性は省略されなければなりません。
いずれの場合も、shapeおよびcoords属性はその領域を指定します。
shape属性は列挙属性であり、次のキーワードと状態を持ちます。
| キーワード | 準拠 | 状態 | 簡単な説明 |
|---|---|---|---|
circle
| 円状態 | coords属性にちょうど3つの整数を使用して円を指定します。
| |
circ
| いいえ | ||
default
| デフォルト状態 | このエリアは画像全体です。(coords属性は使用されません。)
| |
poly
| 多角形状態 | coords属性に少なくとも6つの整数を使用して多角形を指定します。
| |
polygon
| いいえ | ||
rect
| 矩形状態 | coords属性にちょうど4つの整数を使用して矩形を指定します。
| |
rectangle
| いいえ |
coords属性は、指定されている場合、有効な浮動小数点数のリストを含んでいる必要があります。この属性は、shape属性で記述された形状の座標を指定します。この属性の処理は画像マップの処理モデルの一部として説明されています。
円状態では、area要素はcoords属性を持つ必要があり、3つの整数が含まれている必要があります。最後の整数は非負でなければなりません。最初の整数は画像の左端から円の中心までの距離を表し、2番目の整数は画像の上端から円の中心までの距離を表し、3番目の整数は円の半径を表します。
デフォルト状態では、area要素はcoords属性を持つことができません。（エリアは画像全体です。）
多角形状態では、area要素はcoords属性を持ち、少なくとも6つの整数が含まれている必要があります。整数の数は偶数でなければなりません。各整数のペアは、画像の左端および上端からの距離を表し、すべての座標はポリゴンの頂点を順に表します。
矩形状態では、area要素はcoords属性を持ち、ちょうど4つの整数が含まれている必要があります。最初の整数は3番目の整数より小さく、2番目の整数は4番目の整数より小さくなければなりません。この4つの整数はそれぞれ、画像の左端から矩形の左側までの距離、上端から矩形の上端までの距離、左端から矩形の右側までの距離、および上端から矩形の下端までの距離を表します。
ユーザーエージェントがハイパーリンクのフォローやハイパーリンクのダウンロードを許可する場合、area要素を使用して作成されたリンクは、href、target、download、およびping属性によってリンクのフォロー方法が決定されます。rel属性は、リンクをフォローする前にターゲットリソースの性質をユーザーに示すために使用できます。
target、download、ping、rel、およびreferrerpolicy属性は、href属性が存在しない場合、省略しなければなりません。
itemprop属性がarea要素に指定されている場合、href属性も指定されなければなりません。
HTMLAreaElement/referrerPolicy
すべての現行エンジンでサポートされています。
IDL属性referrerPolicyは、referrerpolicyコンテンツ属性を反映し、既知の値のみに制限されなければなりません。
イメージマップは、画像上の幾何学的な領域をハイパーリンクに関連付けることができます。
img要素の形式で画像が表示されている場合、map要素の形式でイメージマップに関連付けることができます。usemap属性が指定されている場合、img要素にusemap属性を指定することで、イメージマップに関連付けることができます。
次のような画像を考えてみてください：
クリック可能な領域を色付きの部分に限定したい場合、次のように行うことができます：
< p >
図形を選んでください：
< img src = "shapes.png" usemap = "#shapes"
alt = "四つの図形が利用可能です：赤い空の四角形、緑の円、青い三角形、黄色の四方星形。" >
< map name = "shapes" >
< area shape = rect coords = "50,50,100,100" > <!-- 赤い箱の穴 -->
< area shape = rect coords = "25,25,125,125" href = "red.html" alt = "赤い箱。" >
< area shape = circle coords = "200,75,50" href = "green.html" alt = "緑の円。" >
< area shape = poly coords = "325,25,262,125,388,125" href = "blue.html" alt = "青い三角形。" >
< area shape = poly coords = "450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
href = "yellow.html" alt = "黄色の星形。" >
</ map >
</ p > もし、img要素に
usemap属性が指定されている場合、ユーザーエージェントは以下のように処理する必要があります:
属性の値をハッシュ名参照の解析ルールを使用して、
map要素に解析し、
その要素をコンテキストノードとして使用します。これにより、要素（map）またはnullが返されます。
nullが返された場合は、終了します。画像はイメージマップと関連付けられていません。
それ以外の場合、ユーザーエージェントはarea要素をmapの子孫要素の中からすべて収集し、そのリストをareasとします。
イメージマップを構成するarea要素のリストを取得した後、
インタラクティブなユーザーエージェントはそのリストを2つの方法のいずれかで処理する必要があります。
ユーザーエージェントがimg要素が表すテキストを表示するつもりである場合、
次の手順を使用する必要があります：
areas内のarea要素で
alt属性がないもの、または
alt属性の値が空文字列であるものを、
同じ値を持つ別のarea要素が
href属性にあり、
非空のalt属性を持っている場合に削除します。
残りのarea要素は
ハイパーリンクを表します。これらのハイパーリンクはすべて、
imgのテキストに関連する形で
ユーザーに提供されるべきです。
この文脈では、ユーザーエージェントはareaおよび
img要素に指定されていない
alt属性や、alt属性が空文字列やその他の非表示テキストである場合に、
著者提供のテキストが不足していることを示すための
実装定義の方法でそれらを表現することができます。
ユーザーエージェントが画像を表示し、画像とのインタラクションを通じてハイパーリンクを選択できるようにするつもりである場合、
画像はareas内のarea要素から取得した
レイヤー化された形状のセットと関連付けられる必要があります。これらの形状はツリー順序の逆順に
処理されます（つまり、map内で最後に指定されたarea要素が
最下層の形状となり、map内で最初に指定された要素が最上層の形状となります）。
areas内の各area要素は、
画像にレイヤーを追加するために以下のように処理される必要があります:
要素のshape属性が
表す状態を確認します。
浮動小数点数のリストを解析するためのルール
を使用して、要素の
coords
属性を解析し、その結果を coords リストとします。属性が存在しない場合は、coords リストを空のリストとします。
coordsリストの項目数が、area要素の現在の状態に対応する以下の表で示されている最小数に満たない場合、
形状は空であり、終了します。
| 状態 | 最小項目数 |
|---|---|
| 円形状態 | 3 |
| デフォルト状態 | 0 |
| 多角形状態 | 6 |
| 矩形状態 | 4 |
次のリストのエントリに従って、shape属性の状態に対応する
coordsリスト内の過剰項目をチェックします：
shape属性が
矩形状態を表し、
リストの最初の数字がリストの3番目の数字よりも大きい場合は、その2つの数字を入れ替えます。
shape属性が
矩形状態を表し、
リストの2番目の数字がリストの4番目の数字よりも大きい場合は、その2つの数字を入れ替えます。
今、要素が表す形状は、以下のリストでshape属性の状態に対応する
エントリに記述されたものです：
xをcoordsの最初の数字とし、yを2番目の数字とし、 rを3番目の数字とします。
形状は、xが左端からyが上端からそれぞれr離れた位置に中心を持ち、 rが半径の円です。
形状は、画像全体を覆う矩形です。
xiをcoordsの(2i)番目のエントリとし、 yiをcoordsの(2i+1)番目のエントリとします （coordsの最初のエントリがインデックス0のものとします）。
the coordinatesを（xi, yi）とし、 これを画像の左上から測定した CSSピクセル で解釈します。 iの値は0から(N/2)-1までの整数値で、 Nはcoords内の項目数です。
形状は頂点がthe coordinatesで与えられた多角形で、その内部は偶奇規則を使用して確立されます。 [GRAPHICS]
x1をcoordsの最初の数字とし、 y1を2番目の数字とし、 x2を3番目の数字とし、 y2を4番目の数字とします。
形状は、左上隅の座標が（x1, y1）で、 右下隅の座標が（x2, y2）である矩形です。 これらの座標は画像の左上から測定した CSSピクセル で解釈されます。
歴史的な理由から、座標はCSSの幅および
高さプロパティ（または、非CSSブラウザの場合はimg要素のwidthおよびheight属性）によって引き伸ばされた後の表示された画像に対して相対的に解釈される必要があります。
ブラウザのズーム機能やCSSやSVGを使用して適用される変形は、座標には影響しません。
上記のアルゴリズムに従って一連のレイヤー化された形状に関連付けられた画像とのポインティングデバイスによるインタラクションは、ポインティングデバイスが指示したポイントを覆う最上位の形状があれば、まずその形状に対して、なければ画像要素自体に対して、関連するユーザーインタラクションイベントが最初に発火する必要があります。ユーザーエージェントはまた、area要素で表される
ハイパーリンクを個別に選択およびアクティベートできるようにすることもできます（例：キーボードを使用して）。
map要素（およびその
area要素）は、複数のimg要素に関連付けることができるため、area要素がドキュメント内の複数のフォーカス可能な領域に対応することが可能です。
イメージマップはライブであり、DOMが変更された場合、ユーザーエージェントはイメージマップのアルゴリズムを再実行したかのように動作する必要があります。
HTML/HTML5/HTML5_Parser#Inline_SVG_and_MathML_support
すべての現行エンジンでサポートされています。
MathML math 要素は、この仕様書のコンテンツモデルにおいて 埋め込みコンテンツ、フレージングコンテンツ、フローコンテンツ、および 明示的コンテンツ カテゴリーに分類されます。
MathML annotation-xml 要素が HTML 名前空間
の要素を含む場合、これらの要素はすべて フローコンテンツ でなければなりません。
MathML トークン要素 (mi、mo、mn、ms、および mtext) が HTML 要素の子孫である場合、それらは フレージングコンテンツ の要素を HTML 名前空間
から含むことができます。
ユーザーエージェントは、MathML 要素のコンテンツモデルがストレートテキストを許可しない場合、その要素内の他のテキストを、MathML コンテンツモデル、レイアウト、およびレンダリングの目的で実際には MathML
mtext
要素で囲まれているかのように扱わなければなりません。(ただし、そのようなテキストは準拠していません。)
ユーザーエージェントは、コンテンツがその要素のコンテンツモデルと一致しない MathML 要素があった場合、MathML レイアウトとレンダリングの目的で、それが適切なエラーメッセージを含む MathML merror 要素に置き換えられたかのように振る舞わなければなりません。
MathML 要素の意味論は MathML および その他の適用可能な仕様書 によって定義されています。[MATHML]
以下は、HTML ドキュメントで MathML を使用する例です。
<!DOCTYPE html>
< html lang = "en" >
< head >
< title > The quadratic formula</ title >
</ head >
< body >
< h1 > The quadratic formula</ h1 >
< p >
< math >
< mi > x</ mi >
< mo > =</ mo >
< mfrac >
< mrow >
< mo form = "prefix" > −</ mo > < mi > b</ mi >
< mo > ±</ mo >
< msqrt >
< msup > </ mi > b</ mi > </ mn > 2</ mn > </ msup >
</ mo > −</ mo >
</ mn > 4</ mn > </ mo > </ mo > </ mi > a</ mi > </ mo > </ mo > </ mi > c</ mi >
</ msqrt >
</ mrow >
</ mrow >
</ mn > 2</ mn > </ mo > </ mo > </ mi > a</ mi >
</ mrow >
</ mfrac >
</ math >
</ p >
</ body >
</ html > HTML/HTML5/HTML5_Parser#Inline_SVG_and_MathML_support
すべての現行エンジンでサポートされています。
SVG
svg 要素は、この仕様書のコンテンツモデルにおいて 埋め込みコンテンツ、フレージングコンテンツ、フローコンテンツ、および
明示的コンテンツ カテゴリーに分類されます。
SVG foreignObject 要素が HTML 名前空間
の要素を含む場合、これらの要素はすべて フローコンテンツ でなければなりません。
SVG
title 要素の HTML ドキュメント 内のコンテンツモデルは フレージングコンテンツ です。
(これは SVG 2 による要件をさらに制約します。)
SVG 要素の意味論は SVG 2 および その他の適用可能な 仕様書 によって定義されています。[SVG]
doc = iframe.getSVGDocument()
doc = embed.getSVGDocument()
doc = object.getSVGDocument()
Document オブジェクトを返します。対象となる要素が
iframe、
embed、または object であり、これらが
SVG を埋め込むために使用されている場合です。
getSVGDocument() メソッドの手順は次のとおりです。
document を this の コンテンツドキュメント とします。
もし document が null でなく、かつ XML ファイルのページ読み込み処理モデル
によって作成されたものであり、かつ リソースの推定タイプ が image/svg+xml であった場合には、document
を返します。
null を返します。
著者要件: img、iframe、
embed、object、
video、source要素に対して、
width属性と
height属性が指定される場合、その親が
picture要素であり、
type属性が
画像ボタン状態にある場合、
input要素に対して、視覚的なコンテンツの次元
（それぞれの幅と高さ）を、出力媒体の標準方向に対してCSSピクセルで指定することができます。これらの属性が指定される場合、その値は
有効な非負整数でなければなりません。
指定された次元は、リソース自体で指定された次元と異なる場合があります。これは、リソースがCSSピクセルの解像度と異なる解像度を持っている可能性があるためです。 （画面では、CSSピクセルは96ppiの解像度を持ちますが、一般的にCSSピクセルの解像度は閲覧距離に依存します。） 両方の属性が指定される場合、次のいずれかの条件が真でなければなりません：
target ratioとは、リソース内の
自然幅と自然高さ
の比率です。specified widthとspecified heightは、それぞれ
widthと
height属性の値です。
対象リソースに自然幅と自然高さ が両方存在しない場合、これらの2つの属性は省略しなければなりません。
両方の属性が0である場合、それは要素がユーザー向けでないことを示しています（例：ページビューをカウントするサービスの一部かもしれません）。
次元属性は画像を引き伸ばすために使用されることを意図していません。
ユーザーエージェント要件: ユーザーエージェントは、これらの属性をレンダリングのためのヒントとして利用することが期待されています。
iframe、
embed、
object のIDL属性は DOMString
です。
video および
source のIDL属性は unsigned long
です。
img および
input
要素に対応するIDL属性は、それぞれの要素のセクションで定義されています。これらは、それぞれの要素の他の挙動にもう少し特化しているためです。
table要素全ての現行エンジンでサポートされています。
全ての現行エンジンでサポートされています。
caption要素が続き、ゼロまたは複数のcolgroup要素が続き、オプションでthead要素が続き、ゼロまたは複数のtbody要素または1つ以上のtr要素が続き、オプションでtfoot要素が続き、オプションで1つまたは複数のスクリプトサポート要素が混在します。
[Exposed =Window ]
interface HTMLTableElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute HTMLTableCaptionElement ? caption ;
HTMLTableCaptionElement createCaption ();
[CEReactions ] undefined deleteCaption ();
[CEReactions ] attribute HTMLTableSectionElement ? tHead ;
HTMLTableSectionElement createTHead ();
[CEReactions ] undefined deleteTHead ();
[CEReactions ] attribute HTMLTableSectionElement ? tFoot ;
HTMLTableSectionElement createTFoot ();
[CEReactions ] undefined deleteTFoot ();
[SameObject ] readonly attribute HTMLCollection tBodies ;
HTMLTableSectionElement createTBody ();
[SameObject ] readonly attribute HTMLCollection rows ;
HTMLTableRowElement insertRow (optional long index = -1);
[CEReactions ] undefined deleteRow (long index );
// also has obsolete members
};table要素は、表モデルに参加します。表にはその子孫によって与えられる行、列、セルがあります。行と列はグリッドを形成し、表のセルはそのグリッドを完全にカバーし、重複は許されません。
この適合要件が満たされているかどうかを判断するための正確な規則は、表モデルの説明で説明されています。
著者は、複雑な表の解釈方法を説明する情報を提供することが推奨されます。そのような情報を提供する方法に関するガイダンスは以下に記載されています。
表はレイアウト補助として使用してはなりません。歴史的に、いくつかのウェブ著者はHTMLの表をページレイアウトを制御する手段として誤用してきました。この使用法は適合しません。なぜなら、そのようなドキュメントから表データを抽出しようとするツールは非常に混乱する結果を得るからです。特に、スクリーンリーダーなどのアクセシビリティツールのユーザーは、レイアウトに使用された表のページをナビゲートするのが非常に難しいと感じる可能性があります。
HTML表をレイアウトに使用する代替手段として、CSSグリッドレイアウト、CSSフレックスボックスレイアウト（"flexbox"）、CSSマルチカラムレイアウト、CSSポジショニング、CSSテーブルモデルなどがあります。[CSS]
表は理解しやすくナビゲートしやすくするために、セルを明確に区別するべきです。ユーザーエージェントが表を（非適合の）レイアウト表として分類していない限り、セルを明確に区別するべきです。
著者および実装者は、表をユーザーにとってナビゲートしやすくするために、表デザインの手法のいくつかを使用することを検討することが推奨されます。
特に任意のコンテンツで表分析を行うユーザーエージェントは、どの表が実際にデータを含み、どの表が単にレイアウトに使用されているかを判断するためのヒューリスティックを見つけることが推奨されます。この仕様は正確なヒューリスティックを定義していませんが、以下は可能な指標として提案されています。
| 特徴 | 示唆 |
|---|---|
role属性にpresentationの値が使用されている
| おそらくレイアウト表 |
border属性に0の非適合値が使用されている
| おそらくレイアウト表 |
cellspacingとcellpadding属性に0の非適合値が使用されている
| おそらくレイアウト表 |
caption、thead、またはth要素が使用されている
| おそらく非レイアウト表 |
headersおよびscope属性が使用されている
| おそらく非レイアウト表 |
border属性に0以外の値が使用されている
| おそらく非レイアウト表 |
| CSSで設定された明示的な目に見えるボーダー | おそらく非レイアウト表 |
summary属性が使用されている
| 良い指標ではありません（歴史的にレイアウト表と非レイアウト表の両方にこの属性が付与されています） |
上記の提案が間違っている可能性は十分にあります。実装者は、レイアウト表の検出ヒューリスティックを作成しようとした際の経験に基づいてフィードバックを提供することが推奨されます。
table要素に（非適合の）summary属性があり、ユーザーエージェントが表をレイアウト表として分類していない場合、ユーザーエージェントはその属性の内容をユーザーに報告してもかまいません。
table.caption [ = value ]
すべての現在のエンジンでサポートされています。
テーブルのcaption要素を返します。
設定可能で、caption要素を置き換えます。
caption = table.createCaption()
HTMLTableElement/createCaption
すべての現在のエンジンでサポートされています。
テーブルにcaption要素があることを保証し、返します。
table.deleteCaption()
HTMLTableElement/deleteCaption
すべての現在のエンジンでサポートされています。
テーブルにcaption要素がないことを保証します。
table.tHead [ = value ]
すべての現在のエンジンでサポートされています。
テーブルのthead要素を返します。
設定可能で、thead要素を置き換えます。新しい値がthead要素でない場合、"HierarchyRequestError"
DOMExceptionをスローします。
thead = table.createTHead()
すべての現在のエンジンでサポートされています。
テーブルにthead要素があることを保証し、返します。
table.deleteTHead()
すべての現在のエンジンでサポートされています。
テーブルにthead要素がないことを保証します。
table.tFoot [ = value ]
すべての現在のエンジンでサポートされています。
テーブルのtfoot要素を返します。
設定可能で、tfoot要素を置き換えます。新しい値がtfoot要素でない場合、"HierarchyRequestError"
DOMExceptionをスローします。
tfoot = table.createTFoot()
すべての現在のエンジンでサポートされています。
テーブルにtfoot要素があることを保証し、返します。
table.deleteTFoot()
すべての現在のエンジンでサポートされています。
テーブルにtfoot要素がないことを保証します。
table.tBodies
すべての現在のエンジンでサポートされています。
テーブルのHTMLCollectionを返します。
tbody要素の
tbody = table.createTBody()
すべての現在のエンジンでサポートされています。
テーブルにtbody要素を作成し、挿入して返します。
table.rows
すべての現在のエンジンでサポートされています。
テーブルのHTMLCollectionのtr要素を返します。
tr = table.insertRow([ index ])
すべての現在のエンジンでサポートされています。
必要に応じてtbodyとともにtr要素を作成し、それらをテーブルの引数で指定された位置に挿入し、trを返します。
位置はテーブル内の行に対して相対的です。引数が省略された場合のデフォルトであるインデックス−1は、テーブルの最後に挿入することと同等です。
指定された位置が−1より小さいか、行の数より大きい場合、"IndexSizeError" DOMExceptionをスローします。
table.deleteRow(index)
すべての現在のエンジンでサポートされています。
テーブル内の指定された位置にあるtr要素を削除します。
位置はテーブル内の行に対して相対的です。インデックス−1はテーブルの最後の行を削除することに相当します。
指定された位置が−1より小さいか、最後の行のインデックスより大きい場合、または行がない場合、"IndexSizeError" DOMExceptionをスローします。
次のすべての属性およびメソッドの定義において、要素がテーブル作成される場合、それは要素を作成することを意味します。指定されたローカル名とノードドキュメント、およびHTML名前空間を使用して、table要素のノードを指定します。
captionIDL属性は、取得時にcaption要素を返さなければなりません。table要素の最初の子要素が存在する場合、それを返し、存在しない場合はnullを返します。設定時には、最初のcaption要素が削除され、新しい値がnullでない場合は、それをtable要素の最初のノードとして挿入しなければなりません。
createCaption()メソッドは、caption要素を返さなければなりません。table要素の最初の子要素が存在する場合、それを返し、存在しない場合は新しいcaption要素をテーブル作成し、table要素の最初のノードとして挿入し、それを返さなければなりません。
tHeadIDL属性は、取得時にthead要素を返さなければなりません。table要素の最初の子要素が存在する場合、それを返し、存在しない場合はnullを返します。設定時に新しい値がnullまたはthead要素の場合、最初のthead要素を削除し、新しい値がnullでない場合はtable要素の最初の要素の直前に挿入しなければなりません。それがcaption要素でもcolgroup要素でもない場合、もしくは該当する要素がない場合はテーブルの最後に挿入します。新しい値がnullでもthead要素でもない場合、"HierarchyRequestError" DOMExceptionがスローされなければなりません。
createTHead()メソッドは、table要素の最初のthead要素の子要素を返さなければなりません。もし存在しない場合は、新しいthead要素をtable-createdし、table要素内でcaption要素でもcolgroup要素でもない最初の要素の直前、またはそのような要素がない場合はテーブルの最後に挿入し、その新しい要素を返さなければなりません。
tFootIDL属性は、取得時にtfoot要素を返さなければなりません。table要素の最初の子要素が存在する場合、それを返し、存在しない場合はnullを返します。設定時に新しい値がnullまたはtfoot要素の場合、最初のtfoot要素を削除し、新しい値がnullでない場合はテーブルの最後に挿入しなければなりません。新しい値がnullでもtfoot要素でもない場合、"HierarchyRequestError" DOMExceptionがスローされなければなりません。
createTFoot()メソッドは、table要素の最初のtfoot要素の子要素を返さなければなりません。もし存在しない場合は、新しいtfoot要素をtable-createdし、テーブルの最後に挿入し、その新しい要素を返さなければなりません。
tBodies属性は、HTMLCollectionを返さなければなりません。それは、tableノードにルートを持ち、フィルターはtbody要素のみを一致させ、それらはtable要素の子要素です。
createTBody()メソッドは、新しいtbody要素をテーブル作成し、それをtable要素内の最後のtbody要素の後に挿入するか、table要素がtbody要素を持たない場合はテーブルの最後に挿入し、新しいtbody要素を返さなければなりません。
rows属性は、HTMLCollectionを返さなければなりません。それは、tableノードにルートを持ち、フィルターはtr要素のみを一致させ、それらはtable要素の子要素、またはthead、tbody、またはtfoot要素の子要素です。コレクション内の要素は、theadの親が最初に含まれ、それがtbodyまたはtable要素の親が含まれ、最後にtfootの親が含まれ、それがツリー順に配置されます。
insertRow(index)メソッドの動作は、テーブルの状態によって異なります。呼び出されたとき、このメソッドは、以下の条件リストに記載されたテーブルの状態とindex引数を説明する最初の項目に従って動作しなければなりません。
rowsコレクション内の要素数を超えている場合:
IndexSizeError"DOMExceptionをスローしなければなりません。
rowsコレクションに要素が一つもなく、かつtableにtbody要素が含まれていない場合:
tbody要素をテーブル作成し、次にtr要素をテーブル作成し、その後tr要素をtbody要素に追加し、次にtbody要素をtable要素に追加し、最終的にtr要素を返さなければなりません。
rowsコレクションに要素が一つもない場合:
tr要素をテーブル作成し、それをテーブル内の最後のtbody要素に追加し、そのtr要素を返さなければなりません。
rowsコレクション内の項目数に等しい場合:
tr要素をテーブル作成し、次にrowsコレクション内の最後のtr要素の親に追加し、そして新たに作成されたtr要素を返さなければなりません。
tr要素をテーブル作成し、それを同じ親内のrowsコレクション内のindex番目のtr要素の直前に挿入し、最終的に新たに作成されたtr要素を返さなければなりません。
deleteRow(index)メソッドが呼び出された場合、ユーザーエージェントは次の手順を実行しなければなりません。
rowsコレクション内の要素数以上の場合、"IndexSizeError"DOMExceptionをスローしなければなりません。
rowsコレクション内の最後の要素をその親から削除するか、rowsコレクションが空の場合は何もしません。
rowsコレクション内のindex番目の要素をその親から削除しなければなりません。
以下は、数独パズルをマークアップするためにテーブルを使用した例です。このようなテーブルには見出しが必要ないことに注意してください。
< style >
# sudoku { border-collapse : collapse ; border : solid thick ; }
# sudoku colgroup , table # sudoku tbody { border : solid medium ; }
# sudoku td { border : solid thin ; height : 1.4 em ; width : 1.4 em ; text-align : center ; padding : 0 ; }
</ style >
< h1 > Today's Sudoku</ h1 >
< table id = "sudoku" >
< colgroup >< col >< col >< col >
< colgroup >< col >< col >< col >
< colgroup >< col >< col >< col >
< tbody >
< tr > < td > 1 < td > < td > 3 < td > 6 < td > < td > 4 < td > 7 < td > < td > 9
< tr > < td > < td > 2 < td > < td > < td > 9 < td > < td > < td > 1 < td >
< tr > < td > 7 < td > < td > < td > < td > < td > < td > < td > < td > 6
< tbody >
< tr > < td > 2 < td > < td > 4 < td > < td > 3 < td > < td > 9 < td > < td > 8
< tr > < td > < td > < td > < td > < td > < td > < td > < td > < td >
< tr > < td > 5 < td > < td > < td > 9 < td > < td > 7 < td > < td > < td > 1
< tbody >
< tr > < td > 6 < td > < td > < td > < td > 5 < td > < td > < td > < td > 2
< tr > < td > < td > < td > < td > < td > 7 < td > < td > < td > < td >
< tr > < td > 9 < td > < td > < td > 8 < td > < td > 2 < td > < td > < td > 5
</ table > 最初の行にヘッダーがあり、最初の列にヘッダーがあるセルのグリッドだけで構成されているテーブルだけでなく、読者が内容を理解するのに苦労する可能性のある一般的なテーブルについても、著者はテーブルを紹介する説明情報を含めるべきです。この情報はすべてのユーザーにとって有用ですが、特にテーブルを見ることができないユーザー、たとえばスクリーンリーダーのユーザーにとって有用です。
このような説明情報は、テーブルの目的を紹介し、基本的なセル構造の概要を示し、傾向やパターンを強調し、一般的にユーザーがテーブルをどのように使用するかを教えるべきです。
例えば、次のテーブル:
| 否定的 | 特徴 | 肯定的 |
|---|---|---|
| 悲しい | 気分 | 幸せ |
| 不合格 | 成績 | 合格 |
...は、テーブルの配置方法を説明するような説明があると役立つかもしれません。「特徴は第2列に示されており、左列に否定的な側面があり、右列に肯定的な側面があります。」のような説明です。
この情報を含める方法はいろいろあります。例えば:
< p > 以下のテーブルでは、特徴は第2列に示されており、左列に否定的な側面があり、右列に肯定的な側面があります。</ p >
< table >
< caption > 肯定的および否定的な側面を持つ特徴</ caption >
< thead >
< tr >
< th id = "n" > 否定的
< th > 特徴
< th > 肯定的
</ thead >
< tr >
< td headers = "n r1" > 悲しい
< th id = "r1" > 気分
< td > 幸せ
</ tr >
< td headers = "n r2" > 不合格
< th id = "r2" > 成績
</ td > 合格
</ table > caption内
< table >
< caption >
< strong > 肯定的および否定的な側面を持つ特徴。</ strong >
< p > 特徴は第2列に示されており、左列に否定的な側面があり、右列に肯定的な側面があります。</ p >
</ caption >
</ thead >
< tr >
< th id = "n" > 否定的
< th > 特徴
< th > 肯定的
</ tbody >
</ tr >
< td headers = "n r1" > 悲しい
< th id = "r1" > 気分
< td > 幸せ
</ tr >
< td headers = "n r2" > 不合格
< th id = "r2" > 成績
</ td > 合格
</ table > caption内の
details要素で
< table >
< caption >
< strong > 肯定的および否定的な側面を持つ特徴。</ strong >
< details >
< summary > ヘルプ</ summary >
< p > 特徴は第2列に示されており、左列に否定的な側面があり、右列に肯定的な側面があります。</ p >
</ details >
</ caption >
</ thead >
</ tr >
< th id = "n" > 否定的
< th > 特徴
< th > 肯定的
</ tbody >
</ tr >
< td headers = "n r1" > 悲しい
< th id = "r1" > 気分
< td > 幸せ
</ tr >
< td headers = "n r2" > 不合格
< th id = "r2" > 成績
</ td > 合格
</ table > figure内に
< figure >
< figcaption > 肯定的および否定的な側面を持つ特徴</ figcaption >
< p > 特徴は第2列に示されており、左列に否定的な側面があり、右列に肯定的な側面があります。</ p >
</ table >
</ thead >
< tr >
< th id = "n" > 否定的
< th > 特徴
< th > 肯定的
</ tbody >
</ tr >
</ td headers = "n r1" > 悲しい
< th id = "r1" > 気分
< td > 幸せ
</ tr >
< td headers = "n r2" > 不合格
< th id = "r2" > 成績
</ td > 合格
</ table >
</ figure > figureの
figcaption内に
< figure >
< figcaption >
< strong > 肯定的および否定的な側面を持つ特徴</ strong >
< p > 特徴は第2列に示されており、左列に否定的な側面があり、右列に肯定的な側面があります。</ p >
</ figcaption >
</ table >
</ thead >
< tr >
< th id = "n" > 否定的
< th > 特徴
< th > 肯定的
</ tbody >
</ tr >
</ td headers = "n r1" > 悲しい
< th id = "r1" > 気分
< td > 幸せ
</ tr >
< td headers = "n r2" > 不合格
< th id = "r2" > 成績
</ td > 合格
</ table >
</ figure > 著者は、これらの技術の他にも、またはそれらの組み合わせを適切に使用することができます。
もちろん、テーブルのレイアウトを説明する記述を書くよりも、説明が不要になるようにテーブルを調整するのが最良の選択です。
上記の例で使用されているテーブルの場合、テーブルを簡単に再配置するだけで、説明が不要になると同時に、headers
属性を使用する必要もなくなります。
< table >
< caption > 肯定的および否定的な側面を持つ特徴</ caption >
< thead >
< tr >
< th > 特徴
< th > 否定的
< th > 肯定的
</ tbody >
</ tr >
< th > 気分
< td > 悲しい
< td > 幸せ
</ tr >
< th > 成績
< td > 不合格
< td > 合格
</ table > 優れたテーブルデザインは、テーブルをより読みやすく、使いやすくするための重要な要素です。
視覚メディアでは、列と行の境界線を提供し、交互に行の背景色を変えることで、複雑なテーブルをより読みやすくすることが非常に効果的です。
数値の多いテーブルでは、等幅フォントを使用することで、特にユーザーエージェントが境界線をレンダリングしない状況で、ユーザーがパターンを見やすくすることができます。（残念ながら、歴史的な理由から、テーブルの境界線をレンダリングしないことが一般的なデフォルトとなっています。）
音声メディアでは、テーブルのセルを読み上げる前に対応するヘッダーを報告し、テーブルの内容をソース順に直列化するのではなく、グリッド形式でテーブルをナビゲートできるようにすることで、セルを区別することができます。
著者はこれらの効果を実現するためにCSSを使用することが推奨されます。
ユーザーエージェントは、ページがCSSを使用しておらず、テーブルがレイアウトテーブルとして分類されていない場合、これらの技術を使用してテーブルをレンダリングすることが推奨されます。
caption
要素現在のすべてのエンジンでサポートされています。
現在のすべてのエンジンでサポートされています。
table 要素の最初の子要素として。
table
要素を含まない。
caption
要素の
終了タグは、
caption
要素が直後に ASCII
ホワイトスペースや
コメントが続かない場合、省略できます。
[Exposed =Window ]
interface HTMLTableCaptionElement : HTMLElement {
[HTMLConstructor ] constructor ();
// 廃止されたメンバーも含まれています
};caption
要素は、親が table 要素である場合、その
タイトルを表します。
table
要素が figure
要素の唯一のコンテンツであり、
それ以外に figcaption
がある場合は、caption
要素は省略すべきです。
キャプションは、テーブルにコンテキストを提供し、理解を大幅に容易にすることができます。
例えば、次のテーブルを考えてみましょう:
| 1 | 2 | 3 | 4 | 5 | 6 | |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
抽象的には、このテーブルは明確ではありません。しかし、キャプションでテーブルの番号（メインの文章で参照するため）を示し、その使用方法を説明すると、より理解しやすくなります。
< caption >
< p > Table 1.
< p > このテーブルは、2つの6面ダイスを振ったときの合計点を示しています。最初の行は最初のダイスの値を表し、最初の列は2番目のダイスの値を表します。合計は、2つのダイスの値に対応するセルに表示されます。
</ caption > これにより、ユーザーにより多くのコンテキストが提供されます:
| 1 | 2 | 3 | 4 | 5 | 6 | |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
colgroup
要素
現在のすべてのエンジンでサポートされています。
現在のすべてのエンジンでサポートされています。
table
要素の子要素として、caption
要素の後、thead、
tbody、tfoot、tr
要素の前に配置されます。
span
属性が存在する場合: なし。
span
属性が存在しない場合: 0個以上のcolおよびtemplate
要素を含みます。
colgroup
要素の開始タグは、colgroup
要素内の最初の要素がcol
要素である場合、かつその要素が別のcolgroup
要素の直後にない場合は省略できます。（要素が空の場合、省略できません。）
colgroup
要素の終了タグは、colgroup
要素が直後にASCII
ホワイトスペース
やコメントが続かない場合、省略できます。
span —
要素がまたがる列の数
[Exposed =Window ]
interface HTMLTableColElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions , Reflect , ReflectDefault=1, ReflectRange=(1, 1000)] attribute unsigned long span ;
// also has obsolete members
};colgroup要素は、親要素が存在し、かつそれがtable要素である場合、そのtable内の1つ以上の列のグループを表します。
colgroup
要素にcol
要素が含まれていない場合、この要素にはspan
内容属性が指定される場合があり、その値は0より大きく1000以下の有効な非負整数でなければなりません。
colgroup
要素とそのspan
属性はテーブルモデルに参加します。
col
要素現在のすべてのエンジンでサポートされています。
colgroup
要素の子要素であり、span属性がない場合。
span — 要素がまたがる列の数
HTMLTableColElement
を使用します。これはcolgroup
要素に対して定義されています。
col要素が親を持ち、
その親がcolgroup
要素で、その親がtable
要素である場合、col
要素は、colgroup
が表す列グループ内の
1つ以上の列を表します。
この要素にはspan内容属性が指定される場合があり、その値は
0より大きく1000以下の有効な非負整数でなければなりません。
col 要素とその
span 属性はテーブルモデルに参加します。
tbody
要素現在のすべてのエンジンでサポートされています。
現在のすべてのエンジンでサポートされています。
table要素の子要素として、caption、
colgroup、
およびthead要素の後に配置されますが、tr要素がその
table要素の子でない場合に限ります。
trおよび
スクリプトサポート要素を含みます。
tbody要素の
開始タグは、tr要素が最初に含まれている場合、および
tbody、thead、
またはtfoot要素が省略された終了タグで直前に続いていない場合、省略できます。（要素が空の場合、省略できません。）
tbody要素の
終了タグは、tbodyまたはtfoot要素が直後に続いている場合、
または親要素にそれ以上コンテンツがない場合、省略できます。
[Exposed =Window ]
interface HTMLTableSectionElement : HTMLElement {
[HTMLConstructor ] constructor ();
[SameObject ] readonly attribute HTMLCollection rows ;
HTMLTableRowElement insertRow (optional long index = -1);
[CEReactions ] undefined deleteRow (long index );
// 廃止されたメンバーも含まれています
};HTMLTableSectionElementインターフェースは、
theadおよびtfoot要素にも使用されます。
tbody要素は、親がtable要素である場合、そのテーブルのデータ本体を構成する
行のブロックを表します。
tbody.rows
このテーブルセクションのtr要素の
HTMLCollectionを返します。
tr = tbody.insertRow([ index ])
tr要素を作成し、
引数で指定された位置にこのテーブルセクションに挿入し、trを返します。
位置はテーブルセクション内の行に対して相対的です。引数が省略された場合のデフォルトであるインデックス−1は、テーブルセクションの最後に挿入することと同等です。
指定された位置が−1より小さいか、行数を超えている場合、"IndexSizeError"
DOMExceptionをスローします。
tbody.deleteRow(index)
このテーブルセクション内の指定された位置にあるtr要素を削除します。
位置はテーブルセクション内の行に対して相対的です。インデックス−1はテーブルセクションの最後の行を削除することと同等です。
指定された位置が−1より小さいか、最後の行のインデックスを超えている場合、または行が存在しない場合、"IndexSizeError"
DOMExceptionをスローします。
rows属性は、この要素でルート化された
HTMLCollectionを返さなければなりません。このフィルタは、この要素の子であるtr要素のみを一致させます。
insertRow(index)メソッドは以下のように動作しなければなりません:
deleteRow(index)メソッドは、呼び出されたとき、次のように動作しなければなりません:
indexが−1より小さいか、rowsコレクション内の最後の行のインデックス以上である場合、
"IndexSizeError"
DOMExceptionをスローします。
indexが−1の場合、この要素からrowsコレクション内の最後の要素を削除するか、rowsコレクションが空である場合は何もしません。
thead
要素現在のすべてのエンジンでサポートされています。
table要素の子要素として、
caption要素および
colgroup要素の後に、
そしてtbody、
tfoot、
およびtr要素の前に配置されますが、
そのtable要素の子である
他のthead要素がない場合に限ります。
trおよび
スクリプトサポート要素を含みます。
thead要素の
終了タグは、tbodyまたは
tfoot要素が直後に続いている場合、省略できます。
HTMLTableSectionElement
を使用します。これはtbody要素に対して定義されています。
thead要素は、親がtable要素である場合、
そのテーブル要素の列ラベル（ヘッダ）と補助的な非ヘッダセルで構成される
行のブロックを表します。
この例は、thead要素の使用例を示しています。
th要素とtd要素の両方が
thead要素内で使用されていることに注目してください。
最初の行はヘッダで、2番目の行はテーブルの記入方法を説明しています。
< table >
< caption > School auction sign-up sheet </ caption >
< thead >
< tr >
< th >< label for = e1 > Name</ label >
< th >< label for = e2 > Product</ label >
< th >< label for = e3 > Picture</ label >
< th >< label for = e4 > Price</ label >
</ tr >
< td > Your name here
</ td >
< td > What are you selling?
</ td >
< td > Link to a picture
</ td >
< td > Your reserve price
</ tbody >
< tr >
</ td >
</ td >
</ td >
</ td >
</ tr >
</ table >
</ form id = f action = "/auction.cgi" >
</ input type = button name = add value = "Submit" >
</ form > tfoot
要素現在のすべてのエンジンでサポートされています。
table要素の子要素として、
caption、
colgroup、
thead、
tbody、
およびtr要素の後に配置されますが、
そのtable要素の子である
他のtfoot要素がない場合に限ります。
trおよび
スクリプトサポート要素を含みます。
tfoot要素の
終了タグを省略できます。
HTMLTableSectionElement
を使用します。これはtbody要素に対して定義されています。
tfoot要素は、
親がtable要素である場合、
そのテーブル要素の列の要約（フッタ）で構成される
行のブロックを表します。
tr 要素
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
thead 要素の子要素として。
tbody 要素の子要素として。
tfoot 要素の子要素として。
table 要素の子要素として、
caption、colgroup、および
thead 要素の後に置きますが、
tbody 要素が table 要素の子要素でない場合に限ります。
td、th、およびスクリプトサポート要素を含みます。
tr 要素の終了タグは、tr
要素がすぐ後に続く場合、または親要素内にそれ以上のコンテンツがない場合に省略できます。
[Exposed =Window ]
interface HTMLTableRowElement : HTMLElement {
[HTMLConstructor ] constructor ();
readonly attribute long rowIndex ;
readonly attribute long sectionRowIndex ;
[SameObject ] readonly attribute HTMLCollection cells ;
HTMLTableCellElement insertCell (optional long index = -1);
[CEReactions ] undefined deleteCell (long index );
// also has obsolete members
};tr 要素は 表します。 行 の
セルを テーブル内に配置します。
tr.rowIndex
現在のすべてのエンジンでサポートされています。
行の位置を返します。この位置はテーブルの 行
リスト内の位置です。
要素がテーブル内にない場合、−1 を返します。
tr.sectionRowIndex
テーブルセクションの 行 リスト内の行の位置を返します。
要素がテーブルセクション内にない場合、−1 を返します。
tr.cells
HTMLCollection
を返します。このコレクションは、行内の td および
th 要素の集まりです。
cell = tr.insertCell([ index ])
HTMLTableRowElement/insertCell
現在のすべてのエンジンでサポートされています。
td 要素を作成し、
テーブル行の指定された位置に挿入し、その td
を返します。
位置は行内のセルに対して相対的です。引数が省略された場合、デフォルトであるインデックス−1は、行の最後に挿入することと同等です。
指定された位置が−1より小さいか、セルの数より大きい場合、"IndexSizeError" DOMExceptionをスローします。
tr.deleteCell(index)
行内の指定された位置にある td または
th 要素を削除します。
位置は行内のセルに対して相対的です。インデックス−1は、行の最後のセルを削除することと同等です。
指定された位置が−1より小さいか、最後のセルのインデックスより大きい場合、またはセルがない場合、"IndexSizeError" DOMExceptionをスローします。
rowIndex
属性は、この要素が親 table 要素を持っている場合、
または親 tbody、thead、または
tfoot 要素と、その祖父母要素としての
table 要素を持っている場合、
この tr 要素がその
table 要素の 行 コレクション内でのインデックスを返す必要があります。
そのような table
要素がない場合、この属性は−1を返す必要があります。
sectionRowIndex 属性は、この要素が
親 table、tbody、thead、または tfoot 要素を持っている場合、
親要素の 行 コレクション内での tr
要素のインデックスを返す必要があります。
（テーブルの場合、それは HTMLTableElement の
行 コレクションです。テーブルセクションの場合、それは
HTMLTableSectionElement
の
行
コレクションです。）親要素が存在しない場合、この属性は−1を返す必要があります。
cells 属性は、この
HTMLCollection
を返す必要があります。
この tr 要素をルートとし、そのフィルターはこの tr 要素の子要素である td および
th 要素に一致します。
insertCell(index) メソッドは、以下のように動作する必要があります。
deleteCell(index) メソッドは、呼び出されたときに以下のように動作する必要があります。
index が −1 より小さいか、cells
コレクション内の最後のセルのインデックスより大きい場合、または
セルがない場合、"IndexSizeError" DOMException
をスローする必要があります。
index が −1 の場合、この cells コレクション内の最後の要素を
親要素から削除するか、cells
コレクションが空の場合は何も行いません。
td 要素
すべての現在のエンジンでサポートされています。
すべての現在のエンジンでサポートされています。
tr要素の子要素として。
td要素の終了タグは、
td要素が直後に別のtdまたは
th要素に続く場合、または親要素にこれ以上コンテンツがない場合、省略することができます。
colspan — セルがまたがる列数
rowspan — セルがまたがる行数
headers — このセルのヘッダーセル
[Exposed =Window ]
interface HTMLTableCellElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions , Reflect , ReflectDefault=1, ReflectRange=(1, 1000)] attribute unsigned long colSpan ;
[CEReactions , Reflect , ReflectDefault=1, ReflectRange=(0, 65534)] attribute unsigned long rowSpan ;
[CEReactions , Reflect ] attribute DOMString headers ;
readonly attribute long cellIndex ;
[CEReactions ] attribute DOMString scope ; // only conforming for th elements
[CEReactions , Reflect ] attribute DOMString abbr ; // only conforming for th elements
// also has obsolete members
};このHTMLTableCellElementインターフェースは、
th要素にも使用されます。
td要素およびその
colspan、
rowspan、
およびheaders属性は
テーブルモデルに参加します。
ユーザーエージェントは、特に非視覚的な環境や、テーブルを2次元グリッドとして表示することが実際的でない環境において、セルの内容をレンダリングする際にセルのコンテキストをユーザーに提供する場合があります。
例えば、テーブルモデルにおけるセルの位置や、セルのヘッダーセルをリストアップするなどです（
ヘッダーセルの割り当てアルゴリズムによって決定されます）。
ヘッダーセルがリストアップされている場合、ユーザーエージェントは、ヘッダーセルそのものの内容の代わりに、それらのヘッダーセルに設定されている
abbr属性の値を使用する場合があります。
この例では、編集可能なセルのグリッド（基本的にはシンプルなスプレッドシート）から成るウェブアプリケーションのスニペットを示しています。
セルの1つは、上記のセルの合計を表示するように構成されています。3つのセルはヘッダーとしてマークされており、
それらはth要素の代わりにtd要素を使用しています。
スクリプトがこれらの要素にイベントハンドラーをアタッチして、合計を維持します。
< table >
< tr >
< th >< input value = "Name" >
< th >< input value = "Paid ($)" >
< tr >
< td >< input value = "Jeff" >
< td >< input value = "14" >
< tr >
< td >< input value = "Britta" >
< td >< input value = "9" >
< tr >
< td >< input value = "Abed" >
< td >< input value = "25" >
< tr >
< td >< input value = "Shirley" >
< td >< input value = "2" >
< tr >
< td >< input value = "Annie" >
< td >< input value = "5" >
< tr >
< td >< input value = "Troy" >
< td >< input value = "5" >
< tr >
< td >< input value = "Pierce" >
< td >< input value = "1000" >
< tr >
< th >< input value = "Total" >
< td >< output value = "1060" >
</ table > th要素
すべての現行エンジンでサポートされています。
tr要素の子要素として。
header、
footer、
セクショニングコンテンツ、
または見出しコンテンツの子孫を含まない。
th要素の終了タグは、
th要素が直後に別のtdまたはth要素に続く場合、
または親要素にこれ以上コンテンツがない場合、省略することができます。
colspan — セルがまたがる列数
rowspan — セルがまたがる行数
headers — このセルのヘッダーセル
scope — このヘッダーセルが適用されるセルの範囲を指定
abbr — 別の文脈でセルを参照する際に使用する代替ラベル
HTMLTableCellElement
を使用し、
td要素に対して定義された通りです。
th要素には、scopeコンテンツ属性が指定されることがあります。
scope属性は、次のキーワードと状態を持つ列挙型属性です。
| キーワード | 状態 | 簡単な説明 |
|---|---|---|
row
| Row | ヘッダーセルは、同じ行内のいくつかの後続のセルに適用されます。 |
col
| Column | ヘッダーセルは、同じ列内のいくつかの後続のセルに適用されます。 |
rowgroup
| Row Group | ヘッダーセルは、行グループ内の残りのすべてのセルに適用されます。 |
colgroup
| Column Group | ヘッダーセルは、列グループ内の残りのすべてのセルに適用されます。 |
th要素のscope属性は、
要素が行グループに固定されていない場合、
Row Group状態にすることはできません。
また、要素が列グループに固定されていない場合、
Column
Group状態にすることはできません。
th要素には、
abbrコンテンツ属性が指定されることがあります。
その値は、別の文脈でヘッダーセルを参照する際に使用される代替ラベルでなければなりません
（例：データセルに適用されるヘッダーセルを記述する場合）。通常は、フルヘッダーセルの省略形ですが、
拡張形や、単に異なる表現の場合もあります。
th要素とそのcolspan、rowspan、
headers、
およびscope属性は、
テーブルモデルに参加します。
次の例は、scope属性のrowgroup値が、ヘッダセルがどのデータセルに適用されるかにどのように影響するかを示しています。
以下は、テーブルを示すマークアップの断片です:
< table >
< thead >
< tr > < th > ID < th > Measurement < th > Average < th > Maximum
< tbody >
< tr > < td > < th scope = rowgroup > Cats < td > < td >
< tr > < td > 93 < th > Legs < td > 3.5 < td > 4
< tr > < td > 10 < th > Tails < td > 1 < td > 1
< tbody >
< tr > < td > < th scope = rowgroup > English speakers < td > < td >
< tr > < td > 32 < th > Legs < td > 2.67 < td > 4
< tr > < td > 35 < th > Tails < td > 0.33 < td > 1
</ table > これにより、次のようなテーブルが作成されます:
| ID | Measurement | Average | Maximum |
|---|---|---|---|
| Cats | |||
| 93 | Legs | 3.5 | 4 |
| 10 | Tails | 1 | 1 |
| English speakers | |||
| 32 | Legs | 2.67 | 4 |
| 35 | Tails | 0.33 | 1 |
最初の行のヘッダはすべて、それぞれの列の行に直接適用されます。
scope属性がRow
Group状態にあるヘッダは、最初の列以外のその行グループのすべてのセルに適用されます。
残りのヘッダは、それぞれの右側のセルにのみ適用されます。
tdおよび
th
要素に共通する属性
td
および
th
要素には、colspan
コンテンツ属性を指定でき、その値は0より大きく、1000以下の
有効な非負整数
でなければなりません。
td
および
th
要素には、rowspan
コンテンツ属性も指定でき、その値は
有効な非負整数
で65534以下でなければなりません。この属性の値が0の場合、そのセルは行グループ内の残りのすべての行にまたがります。
これらの属性は、それぞれセルがまたがる列と行の数を指定します。これらの属性は、 表モデル の記述にあるように、セルを重ねるために使用してはなりません。
td
および
th
要素には、headers
コンテンツ属性を指定できます。指定されている場合、
headers
属性には、空白で区切られた一意のトークンの順序なしセット
からなる文字列を含めなければなりません。このトークンのどれも他のトークンと
同一であってはなりません。
また、各トークンの値は、
ID
の値でなければならず、そのIDは、th
要素が、td
要素または
th
要素とともに同じ
表
に属することを意味します（表モデル
に定義されている通り）。
th 要素が
ID id を持つ場合、同じ table 内で headers
属性の値に、そのトークンの一つとして ID id
を含む全ての td
および th
要素によって直接ターゲットされていると言う。th 要素
A が、th または td 要素
B にターゲットされていると言うのは、A が B に直接ターゲットされている場合、または C
という要素が存在し、その C が B にターゲットされていて、A が C
に直接ターゲットされている場合である。
th
要素は、それ自身を「ターゲット」としてはなりません。
colspan、
rowspan、
および
headers
属性は、表モデル
に参加します。
cell.cellIndex
セルの位置を、行のcells
リスト内で返します。これは、必ずしも表内のセルのx位置に対応しているわけではありません。前のセルが複数の行または列にまたがっている可能性があるからです。
要素が行内にない場合は、−1を返します。
scope
IDL属性は、同じ名前のコンテンツ属性を反映する必要があります。既知の値のみに制限されます。
さまざまなテーブル要素とそのコンテンツ属性は、テーブルモデルを定義します。
テーブルは、(x, y)
の座標を持つスロットの2次元グリッド上に配置されたセルで構成されます。グリッドは有限であり、空であるか、1つ以上のスロットを持っています。グリッドに1つ以上のスロットがある場合、x座標は常に0
≤ x < xwidthの範囲内にあり、y座標は常に0 ≤ y <
yheightの範囲内にあります。xwidthとyheightのいずれかまたは両方がゼロの場合、テーブルは空であり（スロットがありません）、テーブルはtable要素に対応します。
セルは、特定のwidthとheightを持ち、セルがx,
y座標のすべてのスロットをカバーするように、スロット(cellx,
celly)にアンカーされたスロットのセットです。cellx ≤ x <
cellx+widthおよびcelly ≤ y <
celly+heightの範囲で、セルはデータセルまたはヘッダーセルになることができます。データセルはtd要素に対応し、ヘッダーセルはth要素に対応します。両方のタイプのセルには、ゼロまたはそれ以上の関連ヘッダーセルがある場合があります。
エラーが発生する場合、2つのセルが同じスロットを占有することがあります。
行は、特定のy値に対してx=0からx=xwidth-1までのスロットの完全なセットです。行は通常、tr要素に対応しますが、行グループは、複数行にまたがるセルを含む場合に、一部の暗黙の行を末尾に持つことがあります。
列は、特定のx値に対してy=0からy=yheight-1までのスロットの完全なセットです。列はcol要素に対応することがありますが、col要素がない場合、列は暗黙的に存在します。
行グループは、スロット(0,
groupy)にアンカーされた行のセットであり、特定のheightを持ち、x, y座標が0 ≤
x < xwidthおよびgroupy ≤ y <
groupy+heightの範囲でカバーされる行グループです。行グループはtbody、thead、およびtfoot要素に対応します。すべての行が行グループに含まれているわけではありません。
列グループは、スロット(groupx,
0)にアンカーされた列のセットであり、特定のwidthを持ち、x, y座標がgroupx ≤
x < groupx+widthおよび0 ≤ y <
yheightの範囲でカバーされる列グループです。列グループはcolgroup要素に対応します。すべての列が列グループに含まれているわけではありません。
行グループは互いに重ならないようにします。同様に、列グループも互いに重ならないようにします。
セルは、2つ以上の行グループにまたがるスロットをカバーすることはできません。ただし、セルが複数の列グループに含まれることは可能です。1つのセルを構成するすべてのスロットは、ゼロまたは1つの行グループおよびゼロまたは複数の列グループに属しています。
テーブルには、セル、列、行、行グループ、および列グループに加えて、見出しや説明を与えるcaption要素を持つことができます。
テーブルモデルエラーとは、table要素とその子孫によって表されるデータにエラーがあることを指します。文書にはテーブルモデルエラーがあってはなりません。
table要素に関連付けられたテーブルのスロットに対応する要素を決定し、テーブルの寸法
(xwidthおよびyheight) を決定し、テーブルモデルエラーが存在するかどうかを確認するために、ユーザーエージェントは次のアルゴリズムを使用する必要があります。
xwidthを 0 に設定します。
yheightを 0 に設定します。
pending tfoot
elements を、最初は空のリストとして設定します。
the tableを、table要素によって表されるテーブルとします。xwidthとyheightの変数はthe
tableの寸法を示します。the tableは最初は空です。
もしtable要素に子要素がない場合、そのthe
tableを返します
(空のままです)。
table要素の最初のcaption子要素をthe
tableに関連付けます。該当する子要素がない場合、関連するcaption要素はありません。
current elementをtable要素の最初の子要素に設定します。
このアルゴリズムのステップでcurrent
elementをtableの次の子要素に進めることが必要であり、そのような次の子要素が存在しない場合、ユーザーエージェントはこのアルゴリズムの終わり近くにある終了ラベルが付いたステップにジャンプしなければなりません。
current elementが次の要素のいずれかでない限り、次の要素に進め、current elementをtableの次の子要素に進めます。
もしcurrent elementがcolgroupの場合、以下のサブステップに従います。
コラムグループ: current elementを以下の適切なケースに従って処理します。
col子要素を持っている場合
以下のステップに従います。
xstartにxwidthの値を設定します。
コラム: もしcurrent columnがcol要素であり、span属性を持っている場合、その値を負でない整数の解析ルールを使用して解析します。
もし値の解析結果がエラーやゼロでない場合、その値をspanに設定します。
それ以外の場合、col要素がspan属性を持っていない場合、または属性の値の解析がエラーやゼロになった場合は、spanを1に設定します。
もしspanが1000を超える場合、それを1000に設定します。
xwidthをspan分増加させます。
もしcurrent columnがcol要素の最後の子要素でない場合、current
columnをcolgroup要素の次のcol子要素に設定し、コラムラベルが付いたステップに戻ります。
xstartからxwidth-1までのthe
table内のすべての最後のコラムが、新しいコラムグループを形成し、スロット(xstart,
0)にアンカーされ、幅xwidth-xstartでcolgroup要素に対応します。
col要素を持っていない場合
もしcolgroup要素がspan属性を持っている場合、その値を負でない整数の解析ルールを使用して解析します。
もし値の解析結果がエラーやゼロでない場合、その値をspanに設定します。
それ以外の場合、colgroup要素がspan属性を持っていない場合、または属性の値の解析がエラーやゼロになった場合は、spanを1に設定します。
もしspanが1000を超える場合、それを1000に設定します。
xwidthをspan分増加させます。
the table内の最後のspan個のコラムが、新しいコラムグループを形成し、スロット(xwidth-span,
0)にアンカーされ、幅spanでcolgroup要素に対応します。
current elementが次の要素のいずれかでない限り、次の要素に進め、current elementをtableの次の子要素に進めます。
もしcurrent elementがcolgroup要素である場合、上記のコラムグループラベルが付いたステップにジャンプします。
ycurrentを 0 に設定します。
list of downward-growing cellsを空のリストに設定します。
行: current elementが次の要素のいずれかでない限り、次の要素に進め、current elementをtableの次の子要素に進めます。
もしcurrent elementがtrである場合、行を処理するアルゴリズムを実行し、current
elementをtableの次の子要素に進め、行ラベルが付いたステップに戻ります。
行グループを終了するアルゴリズムを実行します。
もしcurrent elementがtfootである場合、その要素をpending
tfoot
elementsのリストに追加し、current elementをtableの次の子要素に進め、行ラベルが付いたステップに戻ります。
current elementはtheadまたはtbodyのいずれかです。
行グループを処理するアルゴリズムを実行します。
行ラベルが付いたステップに戻ります。
終了: tfoot 要素のリスト内の各
pending tfoot
elements について、ツリー順で、行グループを処理するアルゴリズムを実行します。
もしthe table内に、スロットのみを含む行または列が存在し、それにアンカーされたセルがない場合、これはテーブルモデルエラーです。
the tableを返します。
行グループを処理するアルゴリズムは、thead、tbody、およびtfoot要素を処理するために上記の手順セットによって呼び出されるものです:
ystartにyheightの値を設定する。
処理されている要素の子である各tr要素について、ツリー順で行を処理するためのアルゴリズムを実行する。
もしyheightがystartより大きい場合、y=ystartからy=yheight-1までのthe table内の最後の行は、新しい行グループを形成し、(0, ystart)の座標でアンカーされ、高さはyheight-ystartで、処理されている要素に対応する。
行グループを終了するためのアルゴリズムを実行する。
行グループを終了するアルゴリズムは、上記の手順セットによって行ブロックの開始時および終了時に呼び出されます:
ycurrentがyheightより小さい間、次のステップを実行します:
下方向に成長するセルを成長させるアルゴリズムを実行します。
ycurrentを1増やします。
list of downward-growing cellsを空にします。
行を処理するアルゴリズムは、tr要素を処理するために上記の手順セットによって呼び出されます:
yheightがycurrentと等しい場合、yheightを1増やします。（ycurrentがyheightより大きくなることはありません。）
xcurrentを0に設定します。
下方向に成長するセルを成長させるアルゴリズムを実行します。
処理対象のtr要素にtdまたはth要素の子がない場合、ycurrentを1増やし、この手順セットを中止して、上記のアルゴリズムに戻ります。
Cells: xcurrentがxwidth未満であり、xcurrent、ycurrentの座標を持つスロットに既にセルが割り当てられている場合、xcurrentを1増やします。
xcurrentがxwidthと等しい場合、xwidthを1増やします。（xcurrentがxwidthより大きくなることはありません。）
もしcurrent cellがcolspan属性を持っている場合、その属性の値を解析し、その結果をcolspanとします。
その値の解析が失敗した場合、またはゼロを返した場合、あるいは属性がない場合、代わりにcolspanを1に設定します。
もしcolspanが1000を超える場合、それを1000に設定します。
もしcurrent cellがrowspan属性を持っている場合、その属性の値を解析し、その結果をrowspanとします。
その値の解析が失敗した場合、あるいは属性がない場合、代わりにrowspanを1に設定します。
もしrowspanが65534を超える場合、それを65534に設定します。
cell grows downward を false にする。
rowspan が 0 の場合、cell grows downward を true にし、rowspan を 1 に設定する。
もしxwidthがxcurrent+colspanより小さい場合、xwidthをxcurrent+colspanに設定します。
もしyheightがycurrent+rowspanより小さい場合、yheightをycurrent+rowspanに設定します。
座標(x, y)を持つスロットに、xcurrent ≤ x < xcurrent+colspanかつycurrent ≤ y < ycurrent+rowspanである場合、新しいセル cにカバーされるものとし、(xcurrent, ycurrent)に固定され、幅がcolspan、高さがrowspanであり、処理中のcurrent cell要素に対応します。
もしcurrent cell要素がth要素である場合、この新しいセルcをヘッダセルとし、それ以外の場合はデータセルとします。
現在のセル要素にどのヘッダセルが適用されるかを確立するには、次のセクションで説明されているヘッダセルを割り当てるアルゴリズムを使用します。
もし関連するスロットのいずれかに既にセルがカバーされている場合、これはテーブルモデルエラーです。これらのスロットには現在、2つのセルが重なっています。
もしcell grows downwardがtrueの場合、タプル{c, xcurrent, colspan}をlist of downward-growing cellsに追加します。
xcurrentをcolspanだけ増やします。
もしcurrent cellがtdまたはth要素の子であり、処理中のtr要素の最後のものである場合、ycurrentを1増やし、この手順セットを中止して、上記のアルゴリズムに戻ります。
current cellを次の