1. 3 セマンティックス、構造、HTML文書のAPI群
    1. 3.1 文書
      1. 3.1.1 Documentオブジェクト
      2. 3.1.2 DocumentOrShadowRootインターフェイス
      3. 3.1.3 リソースメタデータの取り扱い
      4. 3.1.4 DOMツリーアクセス機構
    2. 3.2 要素
      1. 3.2.1 セマンティックス
      2. 3.2.2 DOMにおける要素
      3. 3.2.3 HTML element constructors
      4. 3.2.4 要素定義
        1. 属性
      5. 3.2.5 コンテンツモデル
        1. "nothing" コンテンツモデル
        2. コンテンツの種類
          1. メタデータコンテンツ
          2. フローコンテンツ
          3. セクショニングコンテンツ
          4. ヘディングコンテンツ
          5. フレージングコンテンツ
          6. エンベディッドコンテンツ
          7. インタラクティブコンテンツ
          8. パルパブルコンテンツ
          9. スクリプトサポート要素
        3. 透過的なコンテンツモデル
        4. 段落
      6. 3.2.6 グローバル属性
        1. title属性
        2. langおよびxml:lang属性
        3. translate属性
        4. dir属性
        5. style属性
        6. data-*属性をもつカスタム非視覚データの埋め込み
      7. 3.2.7 innerText IDL属性
      8. 3.2.8 双方向アルゴリズムに関連する要求
        1. 双方向アルゴリズムの書式設定文字に対するオーサリング適合性要求
        2. User agent conformance criteria
      9. 3.2.9 Requirements related to ARIA and to platform accessibility APIs

3 セマンティックス、構造、HTML文書のAPI群

3.1 文書



対話的なユーザーエージェントは一般にユーザーインターフェイスでDocumentオブジェクトの URL を公開する。これは、サイトが別のものを偽装しようとしているかどうかをユーザーが見分けるための基本メカニズムである。

DocumentcreateDocument()またはcreateHTMLDocument()APIを用いたスクリプトで作成される場合、Documentは即座にready for post-load taskscompletely loadedの両方となる。


3.1.1 Documentオブジェクト


enum DocumentReadyState { "loading", "interactive", "complete" };
typedef (HTMLScriptElement or SVGScriptElement) HTMLOrSVGScriptElement;

partial interface Document {
  // resource metadata management
  [PutForwards=href, Unforgeable] 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] void close();
  [CEReactions] void write(DOMString... text);
  [CEReactions] void writeln(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);

  // special event handler IDL attributes that only apply to Document objects
  [LenientThis] attribute EventHandler onreadystatechange;

  // also has obsolete members
Document includes GlobalEventHandlers;
Document includes DocumentAndElementEventHandlers;

Documentは、Documentのデータとして届けるために使用されるネットワークチャンネルのセキュリティープロパティを表す、初期に"none"の、HTTPS状態HTTPS ステータス値)を持つ。

Documentは、Documentによって起動されるフェッチで使用されるデフォルトのリファラーポリシーを表す、初期に空文字列の、リファラーポリシーreferrer policy)を持つ。

Documentは、CSPリストを持つ。このリストは、文書に対してアクティブなすべてのContent Security Policyオブジェクトを含むCSPリストである。このリストは、他に指定されない限り空である。

Documentは、最初は空であるfeature policyである、feature policyを持つ。


3.1.2 DocumentOrShadowRootインターフェイス


partial interface mixin DocumentOrShadowRoot {
  readonly attribute Element? activeElement;

3.1.3 リソースメタデータの取り扱い

document . referrer




document . cookie [ = value ]



コンテンツがサンドボックス化された固有生成元(たとえば、sandbox属性を持つiframeの中)である場合、 "SecurityError" DOMException例外は取得および設定時に投げられる。

The cookie attribute represents the cookies of the resource identified by the document's URL.

A Document object that falls into one of the following conditions is a cookie-averse Document object:

On getting, if the document is a cookie-averse Document object, then the user agent must return the empty string. Otherwise, if the Document's origin is an opaque origin, the user agent must throw a "SecurityError" DOMException. Otherwise, the user agent must return the cookie-string for the document's URL for a "non-HTTP" API, decoded using UTF-8 decode without BOM. [COOKIES](This is a fingerprinting vector.)

On setting, if the document is a cookie-averse Document object, then the user agent must do nothing. Otherwise, if the Document's origin is an opaque origin, the user agent must throw a "SecurityError" DOMException. Otherwise, the user agent must act as it would when receiving a set-cookie-string for the document's URL via a "non-HTTP" API, consisting of the new value encoded as UTF-8. [COOKIES] [ENCODING]

Since the cookie attribute is accessible across frames, the path restrictions on cookies are only a tool to help manage which cookies are sent to which parts of the site, and are not in any way a security feature.

The cookie attribute's getter and setter synchronously access shared state. Since there is no locking mechanism, other browsing contexts in a multiprocess user agent can modify cookies while scripts are running. A site could, for instance, try to read a cookie, increment its value, then write it back out, using the new value of the cookie as a unique identifier for the session; if the site does this twice in two different browser windows at the same time, it might end up using the same "unique" identifier for both sessions, with potentially disastrous effects.

document . lastModified

ユーザーのローカルタイムゾーンで"MM/DD/YYYY hh:mm:ss"由来のサーバーによって報告されるような、文書の最終更新日時を返す。


The lastModified attribute, on getting, must return the date and time of the Document's source file's last modification, in the user's local time zone, in the following format:

  1. The month component of the date.
  2. A U+002F SOLIDUS character (/).
  3. The day component of the date.
  4. A U+002F SOLIDUS character (/).
  5. The year component of the date.
  6. A U+0020 SPACE character.
  7. The hours component of the time.
  8. U+003A COLON文字(:)。
  9. The minutes component of the time.
  10. U+003A COLON文字(:)。
  11. The seconds component of the time.

All the numeric components above, other than the year, must be given as two ASCII digits representing the number in base ten, zero-padded if necessary. The year must be given as the shortest possible string of four or more ASCII digits representing the number in base ten, zero-padded if necessary.

The Document's source file's last modification date and time must be derived from relevant features of the networking protocols used, e.g. from the value of the HTTP `Last-Modified` header of the document, or from metadata in the file system for local files. If the last modification date and time are not known, the attribute must return the current date and time in the above format.

document . readyState



DOMContentLoadedベントは、async script要素以外のすべてのサブリソースが読み込まれた時点で、"interactive"に遷移した後で発火するが、"complete"に遷移する前に発火する。

Each document has a current document readiness. When a Document object is created, it must have its current document readiness set to the string "loading" if the document is associated with an HTML parser, an XML parser, or an XSLT processor, and to the string "complete" otherwise. Various algorithms during page loading affect this value. When the value is set, the user agent must fire an event named readystatechange at the Document object.

A Document is said to have an active parser if it is associated with an HTML parser or an XML parser that has not yet been stopped or aborted.

The readyState IDL attribute must, on getting, return the current document readiness.

3.1.4 DOMツリーアクセス機構


document . head




Support: documentheadChrome for Android 78+Chrome 4+iOS Safari 4.0+Firefox 4+Safari 5.1+Samsung Internet 4+UC Browser for Android 12.12+Edge 12+IE 9+Opera Mini all+Opera 11+KaiOS Browser 2.5+

Source: caniuse.com

document . title [ = value ]

HTMLに対してtitle要素に与えられるおよびSVGに対してSVG title要素に与えられるものとして、文書のタイトルを返す。




  1. If the document element is an SVG svg element, then let value be the child text content of the first SVG title element that is a child of the document element.

  2. Otherwise, let value be the child text content of the title element, or the empty string if the title element is null.

  3. Strip and collapse ASCII whitespace in value.

  4. Return value.

On setting, the steps corresponding to the first matching condition in the following list must be run:

If the document element is an SVG svg element
  1. If there is an SVG title element that is a child of the document element, let element be the first such element.

  2. Otherwise:

    1. Let element be the result of creating an element given the document element's node document, title, and the SVG namespace.

    2. Insert element as the first child of the document element.

  3. String replace all with the given value within element.

If the document element is in the HTML namespace
  1. If the title element is null and the head element is null, then return.

  2. If the title element is non-null, let element be the title element.

  3. Otherwise:

    1. Let element be the result of creating an element given the document element's node document, title, and the HTML namespace.

    2. Append element to the head element.

  4. String replace all with the given value within element.


Do nothing.

document . body [ = value ]



新しい値がbodyまたはframeset要素でない場合、これは"HierarchyRequestError" DOMException例外を投げる。

The body element of a document is the first of the html element's children that is either a body element or a frameset element, or null if there is no such element.

The body attribute, on getting, must return the body element of the document (either a body element, a frameset element, or null). 設定時に、次のアルゴリズムは実行されなければならない:

  1. If the new value is not a body or frameset element, then throw a "HierarchyRequestError" DOMException.
  2. Otherwise, if the new value is the same as the body element, return.
  3. Otherwise, if the body element is not null, then replace the body element with the new value within the body element's parent and return.
  4. Otherwise, if there is no document element, throw a "HierarchyRequestError" DOMException.
  5. Otherwise, the body element is null, but there's a document element. Append the new value to the document element.

The value returned by the body getter is not always the one passed to the setter.

In this example, the setter successfully inserts a body element (though this is non-conforming since SVG does not allow a body as child of SVG svg). However the getter will return null because the document element is not html.

<svg xmlns="http://www.w3.org/2000/svg">
  document.body = document.createElementNS("http://www.w3.org/1999/xhtml", "body");
  console.assert(document.body === null);

document . images


document . embeds
document . plugins


document . links


document . forms


document . scripts


The images attribute must return an HTMLCollection rooted at the Document node, whose filter matches only img elements.

The embeds attribute must return an HTMLCollection rooted at the Document node, whose filter matches only embed elements.

The plugins attribute must return the same object as that returned by the embeds attribute.

The links attribute must return an HTMLCollection rooted at the Document node, whose filter matches only a elements with href attributes and area elements with href attributes.

The forms attribute must return an HTMLCollection rooted at the Document node, whose filter matches only form elements.

The scripts attribute must return an HTMLCollection rooted at the Document node, whose filter matches only script elements.

collection = document . getElementsByName(name)


The getElementsByName(name) method takes a string name, and must return a live NodeList containing all the HTML elements in that document that have a name attribute whose value is equal to the name argument (in a case-sensitive manner), in tree order. When the method is invoked on a Document object again with the same argument, the user agent may return the same as the object returned by the earlier call. In other cases, a new NodeList object must be returned.

document . currentScript

要素がクラシックスクリプトを表す限り、現在実行している、script要素またはSVG script要素を返す。再入可能なスクリプト実行の場合には、直近でまだ実行を完了していないものの中で実行を開始しそれを返す。

(たとえば、実行中のスクリプトは、イベントハンドラー、またはタイムアウトであるため)Documentが現在scriptまたはSVG script要素を現在実行していない場合、または現在実行しているscriptまたはSVG scriptモジュールスクリプトである場合はnullを返す。

The currentScript attribute, on getting, must return the value to which it was most recently set. When the Document is created, the currentScript must be initialized to null.

Support: document-currentscriptChrome for Android 78+Chrome 29+iOS Safari 8+Firefox 4+Safari 8+Samsung Internet 4+UC Browser for Android 12.12+Edge 12+IE NoneOpera Mini NoneOpera 16+KaiOS Browser 2.5+

Source: caniuse.com

このAPIは、APIがグローバルにscriptまたはSVG script要素を公開するので、実装者および標準コミュニティーの支持から離れている。それ自身は、モジュールスクリプトを実行する場合またはシャドウツリーにおけるスクリプトを実行する場合など、新しいコンテキストで利用可能ではない。我々はそのようなコンテキストで実行するスクリプトを識別するための新しい解決法を検討している。これはグローバルに利用可能にさせるものではない。issue #1013を参照。

The Document interface supports named properties. The supported property names of a Document object document at any moment consist of the following, in tree order according to the element that contributed them, ignoring later duplicates, and with values from id attributes coming before values from name attributes when the same element contributes both:

To determine the value of a named property name for a Document, the user agent must return the value obtained using the following steps:

  1. Let elements be the list of named elements with the name name that are in a document tree with the Document as their root.

    There will be at least one such element, by definition.

  2. If elements has only one element, and that element is an iframe element, and that iframe element's nested browsing context is not null, then return the WindowProxy object of the element's nested browsing context.

  3. Otherwise, if elements has only one element, return that element.

  4. Otherwise return an HTMLCollection rooted at the Document node, whose filter matches only named elements with the name name.

Named elements with the name name, for the purposes of the above algorithm, are those that are either:

An embed or object element is said to be exposed if it has no exposed object ancestor, and, for object elements, is additionally either not showing its fallback content or has no object or embed descendants.


3.2 要素

3.2.1 セマンティックス




<html lang="en">
  <title>My Page</title>
  <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>








 <h1>ACME Corporation</h1>
 <h2>The leaders in arbitrary fast delivery since 1920</h2>


  <h1>ACME Corporation</h1>
  <h2>The leaders in arbitrary fast delivery since 1920</h2>


<html lang="en-GB">
 <head> <title> Demonstration </title> </head>
   <tr> <td> My favourite animal is the cat. </td> </tr>
    <td><a href="https://example.org/~ernest/"><cite>Ernest</cite></a>,
     in an essay from 1992



<html lang="en-GB">
 <head> <title> Demonstration </title> </head>
   <p> My favourite animal is the cat. </p>
  <p><a href="https://example.org/~ernest/">Ernest</a>,
   in an essay from 1992



<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>



  <img src="{{src}}" alt="{{alt}}">




3.2.2 DOMにおける要素






<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>


As we can see in <a href="#module-script-graph">figure 27</a>, ...



interface HTMLElement : Element {
  [HTMLConstructor] constructor();

  // metadata attributes
  [CEReactions] attribute DOMString title;
  [CEReactions] attribute DOMString lang;
  [CEReactions] attribute boolean translate;
  [CEReactions] attribute DOMString dir;

  // user interaction
  [CEReactions] attribute boolean hidden;
  void click();
  [CEReactions] attribute DOMString accessKey;
  readonly attribute DOMString accessKeyLabel;
  [CEReactions] attribute boolean draggable;
  [CEReactions] attribute boolean spellcheck;
  [CEReactions] attribute DOMString autocapitalize;

  [CEReactions] attribute [TreatNullAs=EmptyString] DOMString innerText;

  ElementInternals attachInternals();

HTMLElement includes GlobalEventHandlers;
HTMLElement includes DocumentAndElementEventHandlers;
HTMLElement includes ElementContentEditable;
HTMLElement includes HTMLOrSVGElement;

interface HTMLUnknownElement : HTMLElement {
  // Note: intentionally no [HTMLConstructor]


The element interface for an element with name name in the HTML namespace is determined as follows:

  1. If name is applet, bgsound, blink, isindex, keygen, multicol, nextid, or spacer, then return HTMLUnknownElement.

  2. If name is acronym, basefont, big, center, nobr, noembed, noframes, plaintext, rb, rtc, strike, or tt, then return HTMLElement.

  3. If name is listing or xmp, then return HTMLPreElement.

  4. Otherwise, if this specification defines an interface appropriate for the element type corresponding to the local name name, then return that interface.

  5. If other applicable specifications define an appropriate interface for name, then return the interface they define.

  6. If name is a valid custom element name, then return HTMLElement.

  7. Return HTMLUnknownElement.

The use of HTMLElement instead of HTMLUnknownElement in the case of valid custom element names is done to ensure that any potential future upgrades only cause a linear transition of the element's prototype chain, from HTMLElement to a subclass, instead of a lateral one, from HTMLUnknownElement to an unrelated subclass.


interface mixin HTMLOrSVGElement {
  [SameObject] readonly attribute DOMStringMap dataset;
  attribute DOMString nonce; // intentionally no [CEReactions]

  [CEReactions] attribute boolean autofocus;
  [CEReactions] attribute long tabIndex;
  void focus(optional FocusOptions options = {});
  void blur();

3.2.3 HTML element constructors

To support the custom elements feature, all HTML elements have special constructor behavior. This is indicated via the [HTMLConstructor] IDL extended attribute. It indicates that the interface object for the given interface will have a specific behavior when called, as defined in detail below.

The [HTMLConstructor] extended attribute must take no arguments, and must only appear on constructor operations. It must appear only once on a constructor operation, and the interface must contain only the single, annotated constructor operation, and no others. The annotated constructor operation must be declared to take no arguments.

Interfaces declared with constructor operations that are annotated with the [HTMLConstructor] extended attribute have the following overridden constructor steps:

  1. Let registry be the current global object's CustomElementRegistry object.

  2. If NewTarget is equal to the active function object, then throw a TypeError.

    This can occur when a custom element is defined using an element interface as its constructor:

    customElements.define("bad-1", HTMLButtonElement);
    new HTMLButtonElement();          // (1)
    document.createElement("bad-1");  // (2)

    In this case, during the execution of HTMLButtonElement (either explicitly, as in (1), or implicitly, as in (2)), both the active function object and NewTarget are HTMLButtonElement. If this check was not present, it would be possible to create an instance of HTMLButtonElement whose local name was bad-1.

  3. Let definition be the entry in registry with constructor equal to NewTarget. If there is no such definition, then throw a TypeError.

    Since there can be no entry in registry with a constructor of undefined, this step also prevents HTML element constructors from being called as functions (since in that case NewTarget will be undefined).

  4. Let is value be null.

  5. If definition's local name is equal to definition's name (i.e., definition is for an autonomous custom element), then:

    1. If the active function object is not HTMLElement, then throw a TypeError.

      This can occur when a custom element is defined to not extend any local names, but inherits from a non-HTMLElement class:

      customElements.define("bad-2", class Bad2 extends HTMLParagraphElement {});

      In this case, during the (implicit) super() call that occurs when constructing an instance of Bad2, the active function object is HTMLParagraphElement, not HTMLElement.

  6. Otherwise (i.e., if definition is for a customized built-in element):

    1. Let valid local names be the list of local names for elements defined in this specification or in other applicable specifications that use the active function object as their element interface.

    2. If valid local names does not contain definition's local name, then throw a TypeError.

      This can occur when a custom element is defined to extend a given local name but inherits from the wrong class:

      customElements.define("bad-3", class Bad3 extends HTMLQuoteElement {}, { extends: "p" });

      In this case, during the (implicit) super() call that occurs when constructing an instance of Bad3, valid local names is the list containing q and blockquote, but definition's local name is p, which is not in that list.

    3. Set is value to definition's name.

  7. If definition's construction stack is empty, then:

    1. Let element be the result of internally creating a new object implementing the interface to which the active function object corresponds, given the current Realm Record and NewTarget.

    2. Set element's node document to the current global object's associated Document.

    3. Set element's namespace to the HTML namespace.

    4. Set element's namespace prefix to null.

    5. Set element's local name to definition's local name.

    6. Set element's custom element state to "custom".

    7. Set element's custom element definition to definition.

    8. Set element's is value to is value.

    9. Return element.

    This occurs when author script constructs a new custom element directly, e.g. via new MyCustomElement().

  8. Let prototype be Get(NewTarget, "prototype"). 例外を再度投げる。

  9. If Type(prototype) is not Object, then:

    1. Let realm be GetFunctionRealm(NewTarget).

    2. Set prototype to the interface prototype object of realm whose interface is the same as the interface of the active function object.

    The realm of the active function object might not be realm, so we are using the more general concept of "the same interface" across realms; we are not looking for equality of interface objects. This fallback behavior, including using the realm of NewTarget and looking up the appropriate prototype there, is designed to match analogous behavior for the JavaScript built-ins and Web IDL's internally create a new object implementing the interface algorithm.

  10. Let element be the last entry in definition's construction stack.

  11. If element is an already constructed marker, then throw an "InvalidStateError" DOMException.

    This can occur when the author code inside the custom element constructor non-conformantly creates another instance of the class being constructed, before calling super():

    let doSillyThing = false;
    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 an "InvalidStateError" DOMException:

    This can also occur when author code inside the custom element constructor non-conformantly calls super() twice, since per the JavaScript specification, this actually executes the superclass constructor (i.e. this algorithm) twice, before throwing an error:

    class DontDoThisEither extends HTMLElement {
      constructor() {
        // This will throw, but not until it has already called into the HTMLElement constructor
  12. Perform element.[[SetPrototypeOf]](prototype). 例外を再度投げる。

  13. Replace the last entry in definition's construction stack with an already constructed marker.

  14. Return element.

    This step is normally reached when upgrading a custom element; the existing element is returned, so that the super() call inside the custom element constructor assigns that existing element to this.

In addition to the constructor behavior implied by [HTMLConstructor], some elements also have named constructors (which are really factory functions with a modified prototype property).

Named constructors for HTML elements can also be used in an extends clause when defining a custom element constructor:

class AutoEmbiggenedImage extends Image {
  constructor(width, height) {
    super(width * 10, height * 10);

customElements.define("auto-embiggened", AutoEmbiggenedImage, { extends: "img" });

const image = new AutoEmbiggenedImage(15, 20);
console.assert(image.width === 150);
console.assert(image.height === 200);

3.2.4 要素定義















その後、著者および実装に適用されてもよい追加の規範適合基準とともに、要素が何を表すのかの説明が続く。時に例も含まれる。 属性


3.2.5 コンテンツモデル






The Atom Syndication Formatcontent要素を定義する。type属性の値がxhtmlの場合、Atom Syndication Formatでは、単一のHTML div要素を含む必要がある。したがって、これがこの仕様によって明白に規範的な規定でないにもかかわらず、div要素はそのコンテキストで許可される。[ATOM]



var data = {
  name: "Banana",
  cell: document.createElement('td'),
}; "nothing" コンテンツモデル


便宜上、ほとんどのHTML要素のコンテンツモデルはまた"nothing"であり、ボイドの要素HTML構文には終了タグがない要素)。しかし、これらは全く別の概念である。 コンテンツの種類





その他のカテゴリーはまた、特定の目的のために使用される。たとえばフォームコントロールは、一般的な要件を定義するために多数のカテゴリーを用いて指定される。一部の要素は固有の要件があり、特定のカテゴリーに属さない。 メタデータコンテンツ




<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:r="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xml:lang="en">
  <title>Hedral's Home Page</title>
   <Person xmlns="http://www.w3.org/2000/10/swap/pim/contact#"
    <fullName>Cat Hedral</fullName>
    <mailbox r:resource="mailto:hedral@damowmow.com"/>
  <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>

しかし、これはHTMLシリアライゼーションでは不可能である。 フローコンテンツ

文書およびアプリケーションのbodyで使用される多くの要素は、フローコンテンツとして分類される。 セクショニングコンテンツ



ある要素はまたセクショニングルートである。セクショニングコンテンツとは異なる存在だが、アウトラインを持つ。 ヘディングコンテンツ

ヘディングコンテンツはセクションのヘッダーを定義する(明示的にセクショニングコンテンツ要素を用いてマークアップされようとなかろうと、またはヘディングコンテンツ自体によって暗黙であろうとなかろうと)。 フレージングコンテンツ




Textノードおよび属性値は、noncharactersおよびASCII空白文字以外の制御文字を除いて、スカラー値から構成されなければならない。この仕様は、明確なコンテキストに応じたTextノードおよび属性値の正確な値に追加の制限を含む。 エンベディッドコンテンツ



一部のエンベディッドコンテンツ要素は、フォールバックコンテンツを持つこともできる。これは外部リソースが使用できない場合(たとえば、サポートされていないフォーマットであるため)に使用されるコンテンツである。もしあれば、要素の定義はどのようなフォールバックであるかを記載する。 インタラクティブコンテンツ


tabindex属性はまた、任意の要素をインタラクティブコンテンツにすることができる。 パルパブルコンテンツ





次の要素はパルパブルコンテンツである: スクリプトサポート要素


次の要素は、スクリプトサポート要素である: 透過的なコンテンツモデル





<p><object><param><ins><map><a href="/">Apples</a></map></ins></object></p>


透過的なコンテンツが親を持たない場合、"透過的"であるそのコンテンツモデルの役割は、代わりに任意のフローコンテンツを受け入れるものとして扱われなければならない。 段落




  <h1>Example of paragraphs</h1>
  This is the <em>first</em> paragraph in this example.
  <p>This is the second.</p>
  <!-- This is not a paragraph. -->




  <ins><h1>Example of paragraphs</h1>
  This is the <em>first</em> paragraph in</ins> this example<del>.
  <p>This is the second.</p></del>
  <!-- This is not a paragraph. -->


Conformance checkers may warn authors of cases where they have paragraphs that overlap each other (this can happen with object, video, audio, and canvas elements, and indirectly through elements in other namespaces that allow HTML to be further embedded therein, like SVG svg or MathML math).




 <a href="about.html">
  This is home of...
  <h1>The Falcons!</h1>
  The Lockheed Martin multirole jet fighter aircraft!
 This page discusses the F-16 Fighting Falcon's innermost secrets.


 <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>


 <h1>My Cats</h1>
 You can play with my cat simulator.
 <object data="cats.sim">
  To see the cat simulator, use one of the following links:
   <li><a href="cats.sim">Download simulator file</a>
   <li><a href="https://sims.example.com/watch?v=LYds5xY4INU">Use online simulator</a>
  Alternatively, upgrade to the Mellblom Browser.
 I'm quite proud of it.


  1. "You can play with my cat simulator. object I'm quite proud of it."とある段落。ここでobjectobject要素である。
  2. "To see the cat simulator, use one of the following links:"とある段落。
  3. "Download simulator file"とある段落。
  4. "Use online simulator"とある段落。
  5. "Alternatively, upgrade to the Mellblom Browser."とある段落。



 <h1>My Cats</h1>
 <p>You can play with my cat simulator.</p>
 <object data="cats.sim">
  <p>To see the cat simulator, use one of the following links:</p>
   <li><a href="cats.sim">Download simulator file</a>
   <li><a href="https://sims.example.com/watch?v=LYds5xY4INU">Use online simulator</a>
  <p>Alternatively, upgrade to the Mellblom Browser.</p>
 <p>I'm quite proud of it.</p>

3.2.6 グローバル属性




<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">













よりきめ細かいインターフェイスを公開できるよう支援技術製品が別の方法でHTML要素と属性で可能にするために、支援技術製品への注釈の組が指定できる(ARIA roleおよびaria-*属性)。[ARIA]









text/html構文でHTML要素上のxml:space属性をシリアル化する方法は存在しない。 title属性




title属性値がU+000A LINE FEED(LF)文字を含む場合、コンテンツは複数行に分割される。各U+000A LINE FEED(LF)文字は改行を表す。



<p>My logs show that there was some interest in <abbr title="Hypertext
Transport Protocol">HTTP</abbr> today.</p>



  1. 要素がtitle属性を持つ場合、その値を返す。

  2. 要素が親要素を持つ場合、親要素の助言情報を返す。

  3. 空文字列を返す。


title IDL属性は、titleコンテンツ属性を反映しなければならない。 langおよびxml:lang属性

lang属性(名前空間なし)は、要素のコンテンツに対する基本言語およびテキストを含むあらゆる要素の属性に対して指定する。その値は妥当なBCP 47言語タグまたは空文字列でなければならない。属性に空文字列を設定することは第一言語が不明であることを指す。[BCP47]










結果の値が認識される言語タグでない場合、その他の言語とは異なる、特定の言語タグを持つ未知の言語として扱われなければならない。データを解釈しないようにラウンドトリップや言語タグを期待する他のサービスとの通信に対して、後続のサービスが言語説明の別のタイプとしてデータを解釈しないように、ユーザーエージェントは、変更されていない間に言語タグを渡すべきであり、かつBCP 47言語タグであるとしてタグ付けされるべきである。[BCP47]

従って、たとえば、lang="xyzzy"をもつ要素は、(たとえばCSSで)セレクター:lang(xyzzy)にマッチしたことになるが、両者が等しくに不正であるにも関わらず、:lang(abcde)とマッチしない。同様に、ウェブブラウザーおよびスクリーンリーダーの作業が要素の言語について一致して通信した場合、万が一スクリーンリーダーが実際にそのタグをもつ言語をサポートした場合、たとえそれが不正であること知っていたとしても、ブラウザーは言語が"xyzzy"であったことをスクリーンリーダーに教える。たとえスクリーンリーダーがBCP 47とエンコーディング言語名の他の構文の両方をサポートし、その別の構文で文字列"xyzzy"がベラルーシ語を意味する手段であっても、スクリーンリーダーは、ベラルーシ語としてテキストを処理開始することは不適切である。なぜなら、"xyzzy"は、ベラルーシ語がBCP 47コードで記述されている手段ではない(BCP 47は、てベラルーシ語に対してコード"be"を使用する)ためである。



lang IDL属性は、名前空間なしのlangコンテンツ属性を反映しなければならない。 translate属性








取得時に、要素の変換モード翻訳可能である場合、translate IDL属性は、trueを返さなければならず、そうでなければfalseを返さなければならない。設定時に、新しい値がtrueである場合、それはコンテンツ属性値を"yes"に設定しなければならず、そうでなければコンテンツ属性値を"no"に設定しなければならない。


<html lang=en> <!-- default on the document element is translate=yes -->
  <title>The Bee Game</title> <!-- implied translate=yes inherited from ancestors -->
  <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>
</html> dir属性





































document . dir [ = value ]




The dir IDL attribute on an element must reflect the dir content attribute of that element, limited to only known values.

The dir IDL attribute on Document objects must reflect the dir content attribute of the html element, if any, limited to only known values. If there is no such element, then the attribute must return the empty string and do nothing on setting.



<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>


Each paragraph rendered as a separate block, with the paragraphs left-aligned except the second paragraph and the last one, which would be right aligned, with the usernames ('Student' and 'Teacher' in this example) flush right, with a colon to their left, and the text first to the left of that.

前述したように、auto値は万能薬ではない。この例の最後の段落は、アラビア文字で始まるので、右から左へのテキストであると誤って解釈されており、これは"right?"がアラビア語テキストの左側になる原因となる。 style属性

すべてのHTML要素は、指定のstyleコンテンツ属性をもってもよい。これは、CSS Style Attributesによって定義されるとおりのスタイル属性である。[CSSATTR]


しかし、属性のelementおよび"style attribute"で実行される際にelementのインライン挙動はContent Security Policyによってブロックされるべきか?のアルゴリズムが"Blocked"を返す場合、属性の値で定義されるスタイル規則は要素に適用されてはならない。[CSP]



element . style


The style IDL attribute is defined in CSS Object Model (CSSOM). [CSSOM]


<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-*属性をもつカスタム非視覚データの埋め込み

Support: datasetChrome for Android 78+Chrome 7+iOS Safari 5.0+Firefox 6+Safari 5.1+Samsung Internet 4+UC Browser for Android 12.12+Edge 12+IE 11+Opera Mini (limited) all+Opera 11.1+KaiOS Browser 2.5+

Source: caniuse.com






 <li data-length="2m11s">Beyond The Sea</li>




<p>The third <span data-mytrans-de="Anspruch">claim</span> covers the case of <span
translate="no">HTML</span> markup.</p>



 if ('PaymentRequest' in window) {
   document.documentElement.dataset.hasPaymentRequest = '';

ここでは、data-has-payment-request属性は事実上 真偽属性として使用されている。属性の有無を確認するだけで十分である。しかし、著者が望む場合、後で何らかの値を持つことができる、制限された機能を示すかもしれない。






element . dataset



dataset IDL属性は、要素のすべてのdata-*属性に対する便利なアクセス機構を提供する。On getting, the dataset IDL attribute must return a DOMStringMap whose associated element is this element.

The DOMStringMap interface is used for the dataset attribute. Each DOMStringMap has an associated element.

interface DOMStringMap {
  getter DOMString (DOMString name);
  [CEReactions] setter void (DOMString name, DOMString value);
  [CEReactions] deleter void (DOMString name);

To get a DOMStringMap's name-value pairs, run the following algorithm:

  1. listを名前-値のペアの空のリストにする。

  2. For each content attribute on the DOMStringMap's associated element whose first five characters are the string "data-" and whose remaining characters (if any) do not include any ASCII upper alphas, in the order that those attributes are listed in the element's attribute list, add a name-value pair to list whose name is the attribute's name with the first five characters removed and whose value is the attribute's value.

  3. For each name in list, for each U+002D HYPHEN-MINUS character (-) in the name that is followed by an ASCII lower alpha, remove the U+002D HYPHEN-MINUS character (-) and replace the character that followed it by the same character converted to ASCII uppercase.

  4. listを返す。

The supported property names on a DOMStringMap object at any instant are the names of each pair returned from getting the DOMStringMap's name-value pairs at that instant, in the order returned.

To determine the value of a named property name for a DOMStringMap, return the value component of the name-value pair whose name component is name in the list returned from getting the DOMStringMap's name-value pairs.

To set the value of a new named property or set the value of an existing named property for a DOMStringMap, given a property name name and a new value value, run the following steps:

  1. If name contains a U+002D HYPHEN-MINUS character (-) followed by an ASCII lower alpha, then throw a "SyntaxError" DOMException.

  2. For each ASCII upper alpha in name, insert a U+002D HYPHEN-MINUS character (-) before the character and replace the character with the same character converted to ASCII lowercase.

  3. nameの先頭に文字列data-を挿入する。

  4. If name does not match the XML Name production, throw an "InvalidCharacterError" DOMException.

  5. Set an attribute value for the DOMStringMap's associated element using name and value.

To delete an existing named property name for a DOMStringMap, run the following steps:

  1. For each ASCII upper alpha in name, insert a U+002D HYPHEN-MINUS character (-) before the character and replace the character with the same character converted to ASCII lowercase.

  2. nameの先頭に文字列data-を挿入する。

  3. Remove an attribute by name given name and the DOMStringMap's associated element.

This algorithm will only get invoked by Web IDL for names that are given by the earlier algorithm for getting the DOMStringMap's name-value pairs. [WEBIDL]


<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"



<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">


function splashDamage(node, x, y, damage) {
  if (node.classList.contains('tower') && // checking the 'class' attribute
      node.dataset.x == x && // reading the 'data-x' attribute
      node.dataset.y == y) { // reading the 'data-y' attribute
    var hp = parseInt(node.dataset.hp); // reading the 'data-hp' attribute
    hp = hp - damage;
    if (hp < 0) {
      hp = 0;
      node.dataset.ai = 'dead'; // setting the 'data-ai' attribute
      delete node.dataset.ability; // removing the 'data-ability' attribute
    node.dataset.hp = hp; // setting the 'data-hp' attribute

3.2.7 innerText IDL属性

Support: innertextChrome for Android 78+Chrome 4+iOS Safari 4.0+Firefox 45+Safari 3.2+Samsung Internet 4+UC Browser for Android 12.12+Edge 12+IE 6+Opera Mini all+Opera 9.5+KaiOS Browser 2.5+

Source: caniuse.com

element . innerText [ = value ]



On getting, the innerText attribute must follow these steps:

  1. If this element is not being rendered, or if the user agent is a non-CSS user agent, then return this element's descendant text content.

    This step can produce surprising results, as when the innerText attribute is accessed on an element not being rendered, its text contents are returned, but when accessed on an element that is being rendered, all of its children that are not being rendered have their text contents ignored.

  2. Let results be a new empty list.

  3. For each child node node of this element:

    1. Let current be the list resulting in running the inner text collection steps with node. Each item in results will either be a JavaScript string or a positive integer (a required line break count).

      Intuitively, a required line break count item means that a certain number of line breaks appear at that point, but they can be collapsed with the line breaks induced by adjacent required line break count items, reminiscent to CSS margin-collapsing.

    2. For each item item in current, append item to results.

  4. Remove any items from results that are the empty string.

  5. Remove any runs of consecutive required line break count items at the start or end of results.

  6. Replace each remaining run of consecutive required line break count items with a string consisting of as many U+000A LINE FEED (LF) characters as the maximum of the values in the required line break count items.

  7. Return the concatenation of the string items in results.

The inner text collection steps, given a node node, are as follows:

  1. Let items be the result of running the inner text collection steps with each child node of node in tree order, and then concatenating the results to a single list.

  2. If node's computed value of 'visibility' is not 'visible', then return items.

  3. If node is not being rendered, then return items. For the purpose of this step, the following elements must act as described if the computed value of the 'display' property is not 'none':

    items can be non-empty due to 'display:contents'.

  4. If node is a Text node, then for each CSS text box produced by node, in content order, compute the text of the box after application of the CSS 'white-space' processing rules and 'text-transform' rules, set items to the list of the resulting strings, and return items. The CSS 'white-space' processing rules are slightly modified: collapsible spaces at the end of lines are always collapsed, but they are only removed if the line is the last line of the block, or it ends with a br element. Soft hyphens should be preserved. [CSSTEXT]

  5. If node is a br element, then append a string containing a single U+000A LINE FEED (LF) character to items.

  6. If node's computed value of 'display' is 'table-cell', and node's CSS box is not the last 'table-cell' box of its enclosing 'table-row' box, then append a string containing a single U+0009 CHARACTER TABULATION (tab) character to items.

  7. If node's computed value of 'display' is 'table-row', and node's CSS box is not the last 'table-row' box of the nearest ancestor 'table' box, then append a string containing a single U+000A LINE FEED (LF) character to items.

  8. If node is a p element, then append 2 (a required line break count) at the beginning and end of items.

  9. If node's used value of 'display' is block-level or 'table-caption', then append 1 (a required line break count) at the beginning and end of items. [CSSDISPLAY]

    Floats and absolutely-positioned elements fall into this category.

  10. Return items.

Note that descendant nodes of most replaced elements (e.g., textarea, input, and video — but not button) are not rendered by CSS, strictly speaking, and therefore have no CSS boxes for the purposes of this algorithm.

This algorithm is amenable to being generalized to work on ranges. Then we can use it as the basis for Selection's stringifier and maybe expose it directly on ranges. See Bugzilla bug 10583.

On setting, the innerText attribute must follow these steps:

  1. Let document be this element's node document.

  2. Let fragment be a new DocumentFragment object whose node document is document.

  3. Let input be the given value.

  4. Let position be a pointer into input, initially pointing at the start of the string.

  5. Let text be the empty string.

  6. While position is not past the end of input:

    1. Collect a sequence of code points that are not U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters from input given position. Set text to the collected characters.

    2. If text is not the empty string, then append a new Text node whose data is text and node document is document to fragment.

    3. While position is not past the end of input, and the character at position is either a U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) character:

      1. If the character at position is a U+000D CARRIAGE RETURN (CR) character and the next character is a U+000A LINE FEED (LF) character, then advance position to the next character in input.

      2. Advance position to the next character in input.

      3. Append the result of creating an element given document, br, and the HTML namespace to fragment.

  7. Replace all with fragment within this element.

3.2.8 双方向アルゴリズムに関連する要求 双方向アルゴリズムの書式設定文字に対するオーサリング適合性要求


著者は、手動で双方向アルゴリズムの書式設定文字を維持するよりもむしろ、dir属性、bdo要素、およびbdi要素を使用するよう推奨される。双方向アルゴリズムの書式設定文字は、CSSと互いに不完全に影響しあう。 User agent conformance criteria

User agents must implement the Unicode bidirectional algorithm to determine the proper ordering of characters when rendering documents and parts of documents. [BIDI]

The mapping of HTML to the Unicode bidirectional algorithm must be done in one of three ways. Either the user agent must implement CSS, including in particular the CSS 'unicode-bidi', 'direction', and 'content' properties, and must have, in its user agent style sheet, the rules using those properties given in this specification's rendering section, or, alternatively, the user agent must act as if it implemented just the aforementioned properties and had a user agent style sheet that included all the aforementioned rules, but without letting style sheets specified in documents override them, or, alternatively, the user agent must implement another styling language with equivalent semantics. [CSSGC]

The following elements and attributes have requirements defined by the rendering section that, due to the requirements in this section, are requirements on all user agents (not just those that support the suggested default rendering):

3.2.9 Requirements related to ARIA and to platform accessibility APIs

User agent requirements for implementing Accessibility API semantics on HTML elements are defined in HTML Accessibility API Mappings. [HTMLAAM]

Conformance checker requirements for checking use of ARIA role and aria-* attributes on HTML elements are defined in ARIA in HTML. [ARIAHTML]