Semantics, structure, and APIs of HTML documents

Documents

Interactive user agents typically expose the {{Document}} object's [=Document/URL=] in their user interface. This is the primary mechanism by which a user can tell if a site is attempting to impersonate another.

The Document object

    enum DocumentReadyState { "loading", "interactive", "complete" };

    typedef (HTMLScriptElement or SVGScriptElement) HTMLOrSVGScriptElement;

    [OverrideBuiltins]
    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;
      attribute DOMString dir;
      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
      Document open(optional DOMString type = "text/html", optional DOMString replace = "");
      WindowProxy open(DOMString url, DOMString name, DOMString features, optional boolean replace = false);
      [CEReactions] void close();
      [CEReactions] void write(DOMString... text);
      [CEReactions] void writeln(DOMString... text);

      // user interaction
      readonly attribute WindowProxy? defaultView;
      readonly attribute Element? activeElement;
      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;
    };
    Document implements GlobalEventHandlers;
    Document implements DocumentAndElementEventHandlers;
  

Resource metadata management

: |document| . {{Document/referrer}} :: Returns the [=Document/URL=] of the {{Document}} from which the user navigated to this one, unless it was blocked or there was no such document, in which case it returns the empty string. The <{link/noreferrer}> link type can be used to block the referrer.

: |document| . {{Document/cookie}} [ = |value| ] :: Returns the HTTP cookies that apply to the {{Document}}. If there are no cookies or cookies can't be applied to this resource, the empty string will be returned. Can be set, to add a new cookie to the element's set of HTTP cookies. If the contents are [=sandboxed into a unique origin=] (e.g., in an <{iframe}> with the <{iframe/sandbox}> attribute), a "{{SecurityError}}" {{DOMException}} will be thrown on getting and setting.

Since the {{Document/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 {{Document/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| . {{Document/lastModified}} :: Returns the date of the last modification to the document, as reported by the server, in the form "MM/DD/YYYY hh:mm:ss", in the user's local time zone. If the last modification date is not known, the current time is returned instead.

: |document| . {{Document/readyState}} :: Returns "{{DocumentReadyState/loading}}" while the {{Document}} is loading, "{{DocumentReadyState/interactive}}" once it is finished parsing but still loading sub-resources, and "{{DocumentReadyState/complete}}" once it has loaded. The {{global/readystatechange}} event fires on the {{Document}} object when this value changes.

DOM tree accessors

: |document| . {{Document/head}} :: Returns the <{head}> element.

: |document| . {{Document/title}} [ = |value| ] :: Returns the document's title, as given by the <{title}> element for HTML and as given by the SVG title element for SVG. Can be set, to update the document's title. If there is no appropriate element to update, the new value is ignored.

: 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=], SVG title, and the [=SVG namespace=]. 2. Insert |element| as the first child of the [=document element=]. 3. Act as if the {{Node/textContent}} IDL attribute of |element| was set to the new value being assigned. : If the [=document element=] is in the [=HTML namespace=] :: 1. If the <{title}> element is null and the <{head}> element is null, then abort these steps. 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. Act as if the {{Node/textContent}} IDL attribute of |element| was set to the new value being assigned. : Otherwise :: Do nothing.

: |document| . {{Document/body}} [ = |value| ] :: Returns the <{body}> element. Can be set, to replace the <{body}> element. If the new value is not a <{body}> or <{frameset}> element, this will throw a "{{HierarchyRequestError}}" {{DOMException}}.

: |document| . {{Document/images}} :: Returns an {{HTMLCollection}} of the <{img}> elements in the {{Document}}. : |document| . {{Document/embeds}} : |document| . {{Document/plugins}} :: Return an {{HTMLCollection}} of the <{embed}> elements in the {{Document}}. : |document| . {{Document/links}} :: Returns an {{HTMLCollection}} of the <{a}> and <{area}> elements in the {{Document}} that have <{links/href}> attributes. : |document| . {{Document/forms}} :: Return an {{HTMLCollection}} of the <{form}> elements in the {{Document}}. : |document| . {{Document/scripts}} :: Return an {{HTMLCollection}} of the <{script}> elements in the {{Document}}.

: |collection| = |document| . {{Document/getElementsByName()|getElementsByName}}(|name|) :: Returns a {{NodeList}} of elements in the {{Document}} that have a name attribute with the value |name|.

: |document| . {{Document/currentScript}} :: Returns the <{script}> element, or the SVG script element, that is currently executing, as long as the element represents a [=classic script=]. In the case of reentrant script execution, returns the one that most recently started executing amongst those that have not yet finished executing. Returns null if the {{Document}} is not currently executing a <{script}> element or SVG script element (e.g., because the running script is an event handler, or a timeout), or if the currently executing <{script}> or SVG script element represents a [=module script=].

This API has fallen out of favor in the implementor and standards community, as it globally exposes <{script}> or SVG script elements. As such, it is not available in newer contexts, such as when running [=module scripts=] or when running scripts in a shadow tree.

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

The {{Document/dir}} attribute on the {{Document}} interface is defined along with the <{global/dir}> content attribute.

Elements

Semantics

DOM nodes whose [=node document=] does not have a [=browsing context=] are exempt from all document conformance requirements other than [=the HTML syntax=] requirements and [=the XML syntax=] requirements.

Elements in the DOM

For example, an <{ol}> element represents an ordered list.

    [HTMLConstructor]
    interface HTMLElement : Element {
      // 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;
      [CEReactions] attribute boolean draggable;
      [CEReactions] attribute boolean spellcheck;
      void forceSpellCheck();
      [CEReactions, TreatNullAs=EmptyString] attribute DOMString innerText;
    };
    HTMLElement implements GlobalEventHandlers;
    HTMLElement implements DocumentAndElementEventHandlers;
    HTMLElement implements ElementContentEditable;

    // Note: intentionally not [HTMLConstructor]
    interface HTMLUnknownElement : HTMLElement { };
  

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;

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

    HTMLElement includes HTMLOrSVGElement;
    SVGElement includes HTMLOrSVGElement;
  

The CustomElementRegistry interface

Each {{Window}} object is associated with a unique instance of a {{CustomElementRegistry}} object, allocated when the {{Window}} object is created.

Custom element registries are associated with {{Window}} objects, instead of {{Document}} objects, since each custom element constructor inherits from the {{HTMLElement}} interface, and there is exactly one {{HTMLElement}} interface per {{Window}} object.

interface CustomElementRegistry {
[CEReactions] void define(DOMString name, Function constructor, optional ElementDefinitionOptions options);
any get(DOMString name);
Promise<void> whenDefined(DOMString name);
};

dictionary ElementDefinitionOptions {
DOMString extends;
};

• a set of custom element definitions, initially empty. In general, algorithms in this specification look up elements in the registry by any of name, local name, or {{constructor}}.
• an element definition is running flag, used to prevent reentrant invocations of element definition. It is initially unset.
• a when-defined promise map, mapping valid custom element names to promises. It is used to implement the {{whenDefined()}} method.

window . {{customElements}} . {{define()|define(name}}, constructor)

Defines a new autonomous custom element, mapping the given name to the given constructor.

window . {{customElements}} . {{define()|define(name, constructor), { extends: baseLocalName })}}

Defines a new customized built-in element, mapping the given name to the given constructor for the element type identified by the supplied baseLocalName. A "{{NotSupportedError}}" {{DOMException}} will be thrown upon trying to extend a custom element or an unknown element.

window . {{customElements}} . {{get}}(name)

Retrieves the custom element constructor defined for the given name. Returns undefined if there is no custom element definition with the given name.

window . {{customElements}} . {{whenDefined()|whenDefined(name)}}

Returns a promise that will be fulfilled when a custom element becomes defined with the name |name|. (If such a custom element is already defined, the returned promise will be immediately fulfilled.) Returns a promise rejected with a "{{SyntaxError}}" {{DOMException}} if |name| is not a valid custom element name.

1. If IsConstructor(constructor) is false, then throw a {{TypeError}} and abort these steps.

2. If name is not a valid custom element name, then throw a "{{SyntaxError}}" {{DOMException}} and abort these steps.

3. If this {{CustomElementRegistry}} contains an entry with name name, then throw a "{{NotSupportedError}} {{DOMException}} and abort these steps.

4. If this {{CustomElementRegistry}} contains an entry with constructor constructor, then throw a "{{NotSupportedError}}" {{DOMException}} and abort these steps.

5. Let localName be name.

6. Let extends be the value of the extends member of options, or null if no such member exists.

7. If extends is not null, then:

   1. If extends is a valid custom element name, then throw a "{{NotSupportedError}}" {{DOMException}}.

   2. If the element interface for extends and the HTML namespace is {{HTMLUnknownElement}} (e.g., if extends does not indicate an element definition in this specification), then throw a "{{NotSupportedError}}" {{DOMException}}.

   3. Set localName to extends.

8. If this {{CustomElementRegistry}}'s element definition is running flag is set, then throw a "{{NotSupportedError}}" {{DOMException}} and abort these steps.

9. Set this {{CustomElementRegistry}}'s element definition is running flag.

10. Run the following substeps while catching any exceptions:

    1. Let prototype be Get(constructor, "prototype"). Rethrow any exceptions.

    2. If Type(prototype) is not Object, then throw a TypeError exception.

    3. Let lifecycleCallbacks be a map with the four keys "connectedCallback", "disconnectedCallback", "adoptedCallback", and "attributeChangedCallback", each of which belongs to an entry whose value is null.

    4. For each of the four keys callbackName in lifecycleCallbacks, in the order listed in the previous step:

       1. Let callbackValue be {{get}}(prototype, callbackName). Rethrow any exceptions.

       2. If callbackValue is not undefined, then set the value of the entry in lifecycleCallbacks with key callbackName to the result of converting callbackValue to the Web IDL {{Function}} callback type. Rethrow any exceptions from the conversion.

    5. Let observedAttributes be an empty sequence<DOMString>.

    6. If the value of the entry in lifecycleCallbacks with key "attributeChangedCallback" is not null, then:

       1. Let observedAttributesIterable be Get(constructor, "observedAttributes"). Rethrow any exceptions.

       2. If observedAttributesIterable is not undefined, then set observedAttributes to the result of converting observedAttributesIterable to a sequence<DOMString>. Rethrow any exceptions from the conversion.

    Then, perform the following substep, regardless of whether the above steps threw an exception or not:

    1. Unset this {{CustomElementRegistry}}'s element definition is running flag.

    Finally, if the first set of substeps threw an exception, then rethrow that exception, and terminate this algorithm. Otherwise, continue onward.

11. Let definition be a new custom element definition with name name, local name localName, constructor constructor, prototype prototype, observed attributes observedAttributes, and lifecycle callbacks lifecycleCallbacks.

12. Add definition to this {{CustomElementRegistry}}.

13. Let document be this {{CustomElementRegistry}}'s relevant global object's associated Document.

14. Let upgrade candidates be all elements that are shadow-including descendants of document, whose namespace is the HTML namespace and whose local name is localName, in shadow-including tree order. Additionally, if extends is non-null, only include elements whose is value is equal to name.

15. For each element element in upgrade candidates, enqueue a custom element upgrade reaction given element and definition.

16. If this {{CustomElementRegistry}}'s when-defined promise map contains an entry with key name:

    1. Let promise be the value of that entry.

    2. Resolve promise with undefined.

    3. Delete the entry with key name from this {{CustomElementRegistry}}'s when-defined promise map.

When invoked, the get(name) method must run these steps:

1. If this {{CustomElementRegistry}} contains an entry with name name, then return that entry's constructor.

2. Otherwise, return undefined.

1. If name is not a valid custom element name, then return a new promise rejected with a "{{SyntaxError}}" {{DOMException}} and abort these steps.

2. If this {{CustomElementRegistry}} contains an entry with name name, then return a new promise resolved with undefined and abort these steps.

3. Let map be this {{CustomElementRegistry}}'s when-defined promise map.

4. If map does not contain an entry with key name, create an entry in map with key name and whose value is a new promise.

5. Let promise be the value of the entry in map with key name.

6. Return promise.

Upgrades

To upgrade an element, given a custom element definition definition and an element element, run the following steps:

1. If element is custom, abort these steps.

   This can occur due to reentrant invocation of this algorithm, as in the following example:

   <!DOCTYPE html> <x-foo id="a"></x-foo> <x-foo id="b"></x-foo> <script> // Defining enqueues upgrade reactions for both "a" and "b" customElements.define("x-foo", class extends HTMLElement { constructor() { super(); const b = document.querySelector("#b"); b.remove(); // While this constructor is running for "a", "b" is still // undefined, and so inserting it into the document will enqueue a // second upgrade reaction for "b" in addition to the one enqueued // by defining x-foo. document.body.appendChild(b); } }) </script>

   This step will thus bail out the algorithm early when upgrade an element is invoked with "b" a second time.

2. If element's custom element state is "failed", then abort these steps.

3. For each attribute in element's attribute list, in order, enqueue a custom element callback reaction with element, callback name "attributeChangedCallback", and an argument list containing attribute's local name, null, attribute's value, and attribute's namespace.

4. If element is connected, then enqueue a custom element callback reaction with element, callback name "connectedCallback", and an empty argument list.

5. Add element to the end of definition's construction stack.

6. Let C be definition's constructor.

7. Let constructResult be Construct(C).

   If C non-conformantly uses an API decorated with the [{{CEReactions}}] extended attribute, then the reactions enqueued at the beginning of this algorithm will execute during this step, before C finishes and control returns to this algorithm. Otherwise, they will execute after C and the rest of the upgrade process finishes.

8. Remove the last entry from the end of definition's construction stack.

   Assuming C calls super() and that the call succeeds, this will be the already constructed marker that replaced the element pushed at the beginning of this algorithm. (The HTML element constructor carries out this replacement.)

   If C does not call super() (i.e. it is not conformant), or if any step in the HTML element constructor throws, then this entry will still be element.

9. If constructResult is an abrupt completion, then:

   1. Set element's custom element state to "failed".

   2. Return constructResult (i.e., rethrow the exception), and terminate these steps.

10. If SameValue(constructResult.[[\value]], element) is false, then throw an "{{InvalidStateError}}" {{DOMException}} and terminate these steps.

    This can occur if C constructs another instance of the same custom element before calling super(), or if C uses JavaScript's return-override feature to return an arbitrary object from the constructor.

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

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

To try to upgrade an element, given as input an element element, run the following steps:

1. Let definition be the result of looking up a custom element definition given element's node document, element's namespace, element's local name, and element's is value.

2. If definition is not null, then enqueue a custom element upgrade reaction given element and definition.

Custom element reactions

• When upgraded, its constructor is run.
• When it becomes connected, its connectedCallback is run.
• When it becomes disconnected, its disconnectedCallback is run.
• When it is adopted into a new document, its adoptedCallback is run.
• When any of its attributes are changed, appended, removed, or replaced, its attributeChangedCallback is run.

• An upgrade reaction, which upgrades the custom element and contains a custom element definition; or
• A callback reaction, which will call a lifecycle callback, and contains a {{Function!!callback}} as well as a list of arguments.

1. If the custom element reactions stack is empty, then:
   1. Add element to the backup element queue.
   2. If the processing the backup element queue flag is set, abort this algorithm.
   3. Set the processing the backup element queue flag.
   4. Queue a microtask to perform the following steps:
      1. Invoke custom element reactions in the backup element queue.
      2. Unset the processing the backup element queue flag.
2. Otherwise, add element to the current element queue.

1. Let definition be element's custom element definition.

2. Let callback be the value of the entry in definition's lifecycle callbacks with key callbackName.

3. If callback is null, then abort these steps.

4. If callbackName is "attributeChangedCallback", then:

   1. Let attributeName be the first element of args.

   2. If definition's observed attributes does not contain attributeName, then abort these steps.

5. Add a new callback reaction to element's custom element reaction queue, with callback function callback and arguments args.

6. Enqueue an element on the appropriate element queue given element.

To enqueue a custom element upgrade reaction, given an element element and custom element definition definition, run the following steps:

1. Add a new upgrade reaction to element's custom element reaction queue, with custom element definition definition.

2. Enqueue an element on the appropriate element queue given element.

To invoke custom element reactions in an element queue queue, run the following steps:

1. For each custom element element in queue:

   1. Let reactions be element's custom element reaction queue.

   2. Repeat until reactions is empty:

      1. Remove the first element of reactions, and let reaction be that element. Switch on reaction's type:

         upgrade reaction

         Upgrade element using reaction's custom element definition.

         callback reaction

         Invoke reaction's callback function with reaction's arguments, and with element as the callback this value.

         If this throws any exception, then report the exception.

Before executing the algorithm's steps

Push a new element queue onto the custom element reactions stack.

After executing the algorithm's steps

Pop the element queue from the custom element reactions stack, and invoke custom element reactions in that queue.

HTML: HTML element constructors

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}} and abort these steps.
   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}} and abort these steps.

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

4. 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}} and abort these steps.
      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}}.
5. 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}} and abort these steps.
      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.

6. Let prototype be definition's prototype.

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

   1. Let element be a new element that implements the interface to which the active function object corresponds, with no attributes, namespace set to the HTML namespace, local name set to definition's local name, and node document set to the current global object's associated Document.

   2. Perform element.[[\SetPrototypeOf]](prototype). Rethrow any exceptions.

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

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

   5. Return element.

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

8. Let element be the last entry in definition's construction stack.
9. If element is an already constructed marker, then throw an "{{InvalidStateError}}" {{DOMException}} and abort these steps.
   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:
      super();
     }
   }
   

   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() { super(); // This will throw, but not until it has already called into the HTMLElement constructor super(); } }
10. Perform element.[[\SetPrototypeOf]](prototype). Rethrow any exceptions.
11. Replace the last entry in definition's construction stack with an already constructed marker.
12. 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.

Element definitions

For simplicity, only the most specific expectations are listed. For example, an element that is both [=flow content=] and [=phrasing content=] can be used anywhere that either [=flow content=] or [=phrasing content=] is expected, but since anywhere that [=flow content=] is expected, [=phrasing content=] is also expected (since all [=phrasing content=] is [=flow content=]), only "where [=phrasing content=] is expected" will be listed. : Content model :: A normative description of what content must be included as children and descendants of the element. : Tag omission in text/html :: A non-normative description of whether, in the [[#text-html|text/html]] syntax, the [=start tag|start=] and [=end tag|end=] tags can be omitted. This information is redundant with the normative requirements given in the [=omitted|optional tags=] section, and is provided in the element definitions only as a convenience. : Content attributes :: A normative list of attributes that may be specified on the element (except where otherwise disallowed), along with non-normative descriptions of those attributes. (The content to the left of the dash is normative, the content to the right of the dash is not.) : Allowed ARIA role attribute values :: A non normative list of [[#aria-role-attribute|ARIA role attribute]] values that may be specified on the element (except where otherwise disallowed). Each value is linked to a non normative description. : Allowed ARIA state and property attributes :: Links to the [=Global aria-* attributes=] list and the [[#allowed-aria-roles-states-and-properties|allowed roles, states and properties]] table as described in the [[#state-and-property-attributes|state and property attributes]] section. : DOM interface :: A normative definition of a DOM interface that such elements must implement. This is then followed by a description of what the element [=represents=], along with any additional normative conformance criteria that may apply to authors and implementations. Examples are sometimes also included.

Attributes

Content models

When a <{template}> element is being parsed, its children are assigned to the [=template contents=] (a separate {{DocumentFragment}} assigned to the element when the element is created), rather than its children.

Thus, an element |A| is said to be preceded or followed by a second element |B| if |A| and |B| have the same parent node and there are no other element nodes or {{Text}} nodes (other than [=inter-element white space=]) between them. Similarly, a node is the only child of an element if that element contains no other nodes other than [=inter-element white space=], comment nodes, and processing instruction nodes.

      var data = {
        name: "Banana",
        cell: document.createElement('td'),
      };
    

The "nothing" content model

Most HTML elements whose content model is "nothing" are also, for convenience, [=void elements=] (elements that have no [=end tag=] in the [[#syntax|HTML syntax]]). However, these are entirely separate concepts.

Kinds of content

* [[#metadata-content|Metadata content]] * [[#flow-content|Flow content]] * [[#sectioning-content|Sectioning content]] * [[#heading-content|Heading content]] * [[#phrasing-content|Phrasing content]] * [[#embedded-content|Embedded content]] * [[#interactive-content|Interactive content]]

Some elements also fall into other categories, which are defined in other parts of this specification.

Metadata content

• <{base}>
• <{link}>
• <{meta}>
• <{noscript}>
• <{script}>
• <{style}>
• <{template}>
• <{title}>

Flow content

• <{a}>
• <{abbr}>
• <{address}>
• <{area}> (if it is a descendant of a <{map}> element)
• <{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}>
• <{hr}>
• <{i}>
• <{iframe}>
• <{img}>
• <{input}>
• <{ins}>
• <{kbd}>
• <{label}>
• <{link}> (if it is [=allowed in the body=])
• <{main}>
• <{map}>
• <{mark}>
• MathML <{math}>
• <{meter}>
• <{nav}>
• <{noscript}>
• <{object}>
• <{ol}>
• <{output}>
• <{p}>
• <{picture}>
• <{pre}>
• <{progress}>
• <{q}>
• <{ruby}>
• <{s}>
• <{samp}>
• <{script}>
• <{section}>
• <{select}>
• <{small}>
• <{span}>
• <{strong}>
• <{style}>
• <{sub}>
• <{sup}>
• SVG <{svg}>
• <{table}>
• <{template}>
• <{textarea}>
• <{time}>
• <{u}>
• <{ul}>
• <{var}>
• <{video}>
• <{wbr}>
• autonomous custom elements
• [=text=]

Sectioning content

• <{article}>
• <{aside}>
• <{nav}>
• <{section}>

There are also certain elements that are [=sectioning roots=]. These are distinct from [=sectioning content=], but they can also have an [=outline=].

Heading content

• <{h1}>
• <{h2}>
• <{h3}>
• <{h4}>
• <{h5}>
• <{h6}>

Phrasing content

• <{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}>
• MathML <{math}>
• <{meter}>
• <{noscript}>
• <{object}>
• <{output}>
• <{picture}>
• <{progress}>
• <{q}>
• <{ruby}>
• <{s}>
• <{samp}>
• <{script}>
• <{select}>
• <{small}>
• <{span}>
• <{strong}>
• <{sub}>
• <{sup}>
• SVG <{svg}>
• <{template}>
• <{textarea}>
• <{time}>
• <{u}>
• <{var}>
• <{video}>
• <{wbr}>
• autonomous custom elements
• [=text=]

Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content, not any flow content.

Embedded content

• <{audio}>
• <{canvas}>
• <{embed}>
• <{iframe}>
• <{img}>
• MathML <{math}>
• <{object}>
• <{picture}>
• SVG <{svg}>
• <{video}>

Interactive content

• <{a}> (if the <{a/href}> attribute is present)
• <{audio}> (if the <{audio/controls}> attribute is present)
• <{button}>
• <{details}>
• <{embed}>
• <{iframe}>
• <{img}> (if the <{img/usemap}> attribute is present)
• <{input}> (if the <{input/type}> attribute is not in the <{input/Hidden}> state)
• <{label}>
• <{select}>
• <{textarea}>
• <{video}> (if the <{video/controls}> attribute is present)

Palpable content

[=Palpable content=] makes an element non-empty by providing either some descendant non-empty [=text=], or else something users can hear (<{audio}> elements) or view (<{video}> or <{img}> or <{canvas}> elements) or otherwise interact with (for example, interactive form controls).

• <{a}>
• <{abbr}>
• <{address}>
• <{article}>
• <{aside}>
• <{audio}> (if the <{audio/controls}> attribute is present)
• <{b}>
• <{bdi}>
• <{bdo}>
• <{blockquote}>
• <{button}>
• <{canvas}>
• <{cite}>
• <{code}>
• <{data}>
• <{details}>
• <{dfn}>
• <{div}>
• <{dl}> (if the element's children include at least one name-value group)
• <{em}>
• <{embed}>
• <{fieldset}>
• <{figure}>
• <{footer}>
• <{form}>
• <{h1}>
• <{h2}>
• <{h3}>
• <{h4}>
• <{h5}>
• <{h6}>
• <{header}>
• <{i}>
• <{iframe}>
• <{img}>
• <{input}> (if the <{input/type}> attribute is not in the <{input/Hidden}> state)
• <{ins}>
• <{kbd}>
• <{label}>
• <{main}>
• <{map}>
• <{mark}>
• MathML <{math}>
• <{meter}>
• <{nav}>
• <{object}>
• <{ol}> (if the element's children include at least one <{li}> element)
• <{output}>
• <{p}>
• <{pre}>
• <{progress}>
• <{q}>
• <{ruby}>
• <{s}>
• <{samp}>
• <{section}>
• <{select}>
• <{small}>
• <{span}>
• <{strong}>
• <{sub}>
• <{sup}>
• SVG <{svg}>
• <{table}>
• <{textarea}>
• <{time}>
• <{u}>
• <{ul}> (if the element's children include at least one <{li}> element)
• <{var}>
• <{video}>
• autonomous custom elements
• [=text=] that is not [=inter-element white space=]

Script-supporting elements

• <{script}>
• <{template}>

Transparent content models

In some cases, where transparent elements are nested in each other, the process has to be applied iteratively.

Paragraphs

The term [=paragraph=] as defined in this section is used for more than just the definition of the <{p}> element. The [=paragraph=] concept defined here is used to describe how to interpret documents. The <{p}> element is merely one of several ways of marking up a [=paragraph=].

Generally, having elements straddle paragraph boundaries is best avoided. Maintaining such markup can be difficult.

The <{p}> element can be used to wrap individual paragraphs when there would otherwise not be any content other than phrasing content to separate the paragraphs from each other.

Global attributes

* <{global/accesskey}> * Attributes whose name begins with [=global aria-* attributes|aria-*=] * <{global/class}> * <{global/contenteditable}> * <{global/dir}> * Attributes whose name begins with [=custom data attribute|data-=] * <{global/draggable}> * <{global/hidden}> * <{global/id}> * <{global/is}> * <{global/lang}> * <{global/nonce}> * <{aria/role}> * <{global/spellcheck}> * <{global/style}> * <{global/tabindex}> * <{global/title}> * <{global/translate}> * <{xmlns/xmlns}>

The <{global/slot}> attribute is used for elements in shadow trees, to assign a slot for the element. The slot will be assigned to the <{slot}> element whose <{slot/name}> attribute matches the value of the <{global/slot}> attribute.

* {{GlobalEventHandlers/onabort}} * {{GlobalEventHandlers/onauxclick}} * {{GlobalEventHandlers/onblur}}* * {{GlobalEventHandlers/oncancel}} * {{GlobalEventHandlers/oncanplay}} * {{GlobalEventHandlers/oncanplaythrough}} * {{GlobalEventHandlers/onchange}} * {{GlobalEventHandlers/onclick}} * {{GlobalEventHandlers/onclose}} * {{GlobalEventHandlers/oncuechange}} * {{GlobalEventHandlers/ondblclick}} * {{GlobalEventHandlers/ondrag}} * {{GlobalEventHandlers/ondragend}} * {{GlobalEventHandlers/ondragenter}} * {{GlobalEventHandlers/ondragexit}} * {{GlobalEventHandlers/ondragleave}} * {{GlobalEventHandlers/ondragover}} * {{GlobalEventHandlers/ondragstart}} * {{GlobalEventHandlers/ondrop}} * {{GlobalEventHandlers/ondurationchange}} * {{GlobalEventHandlers/onemptied}} * {{GlobalEventHandlers/onended}} * {{GlobalEventHandlers/onerror}}* * {{GlobalEventHandlers/onfocus}}* * {{GlobalEventHandlers/oninput}} * {{GlobalEventHandlers/oninvalid}} * {{GlobalEventHandlers/onkeydown}} * {{GlobalEventHandlers/onkeypress}} * {{GlobalEventHandlers/onkeyup}} * {{GlobalEventHandlers/onload}}* * {{GlobalEventHandlers/onloadeddata}} * {{GlobalEventHandlers/onloadedmetadata}} * {{GlobalEventHandlers/onloadend}} * {{GlobalEventHandlers/onloadstart}} * {{GlobalEventHandlers/onmousedown}} * {{GlobalEventHandlers/onmouseenter}} * {{GlobalEventHandlers/onmouseleave}} * {{GlobalEventHandlers/onmousemove}} * {{GlobalEventHandlers/onmouseout}} * {{GlobalEventHandlers/onmouseover}} * {{GlobalEventHandlers/onmouseup}} * {{GlobalEventHandlers/onwheel}} * {{GlobalEventHandlers/onpause}} * {{GlobalEventHandlers/onplay}} * {{GlobalEventHandlers/onplaying}} * {{GlobalEventHandlers/onprogress}} * {{GlobalEventHandlers/onratechange}} * {{GlobalEventHandlers/onreset}} * {{GlobalEventHandlers/onresize}}* * {{GlobalEventHandlers/onscroll}}* * {{GlobalEventHandlers/onseeked}} * {{GlobalEventHandlers/onseeking}} * {{GlobalEventHandlers/onselect}} * {{GlobalEventHandlers/onstalled}} * {{GlobalEventHandlers/onsubmit}} * {{GlobalEventHandlers/onsuspend}} * {{GlobalEventHandlers/ontimeupdate}} * {{GlobalEventHandlers/ontoggle}} * {{GlobalEventHandlers/onvolumechange}} * {{GlobalEventHandlers/onwaiting}}

The attributes marked with an asterisk have a different meaning when specified on <{body}> elements as those elements expose [=event handlers=] of the {{Window}} object with the same names.

While these attributes apply to all elements, they are not useful on all elements. For example, only [=media elements=] will ever receive a {{media/volumechange}} event fired by the user agent.

In HTML, the <{xmlns/xmlns}> attribute has absolutely no effect. It is basically a talisman. It is allowed merely to make migration to and from XML mildly easier. When parsed by an [=HTML parser=], the attribute ends up in no namespace, not the "http://www.w3.org/2000/xmlns/" namespace like namespace declaration attributes in XML do.

In XML, an <{xmlns/xmlns}> attribute is part of the namespace declaration mechanism, and an element cannot actually have an <{xmlns/xmlns}> attribute in no namespace specified.

There is no way to serialize the <{xml/space|xml:space}> attribute on [=HTML elements=] in the [[#text-html|text/html]] syntax.

The <{global/title}> attribute

The <{global/lang}> and <{xml/lang|xml:lang}> attributes

The attribute in no namespace with no prefix and with the literal localname "<{xml/lang|xml:lang}>" has no effect on language processing.

For example, if a document is delivered over HTTP and the Content-Language HTTP header is specified with a value "en", then for any element in the document that does not itself have a <{global/lang}> attribute nor any ancestor of that element, the fallback language for the element will be English. If the value of the Content-Language header was "de, fr, it" then the language of the node is unknown. This article provides some additional guidance on the use of HTTP headers, and <{meta}> elements for providing language information.

Thus, for instance, an element with lang="xyzzy" would be matched by the selector :lang(xyzzy) (e.g., in CSS), but it would not be matched by :lang(abcde), even though both are equally invalid. Similarly, if a Web browser and screen reader working in unison communicated about the language of the element, the browser would tell the screen reader that the language was "xyzzy", even if it knew it was invalid, just in case the screen reader actually supported a language with that tag after all. Even if the screen reader supported both BCP 47 and another syntax for encoding language names, and in that other syntax the string "xyzzy" was a way to denote the Belarusian language, it would be *incorrect* for the screen reader to then start treating text as Belarusian, because "xyzzy" is not how Belarusian is described in BCP 47 codes (BCP 47 uses the code "be" for Belarusian).

The <{global/translate}> attribute

* <{th/abbr}> on <{th}> elements * alt on <{area/alt|area}>, <{img/alt|img}>, and <{input/alt|input}> elements * <{meta/content}> on <{meta}> elements, if the <{meta/name}> attribute specifies a metadata name whose value is known to be translatable * <{links/download}> on <{a}> and <{area}> elements * label on <{optgroup/label|optgroup}>, <{option/label|option}>, and <{track/label|track}> elements * <{global/lang}> on [=HTML elements=]; must be "translated" to match the language used in the translation * placeholder on <{input/placeholder|input}> and <{textarea/placeholder|textarea}> elements * <{iframe/srcdoc}> on <{iframe}> elements; must be parsed and recursively processed * <{global/style}> on [=HTML elements=]; must be parsed and recursively processed (e.g., for the values of 'content' properties) * <{global/title}> on all [=HTML elements=] * <{input/value}> on <{input}> elements with a <{input/type}> attribute in the <{input/Button}> state or the <{input/Reset|Reset Button}> state

The <{xml/base|xml:base}> attribute (XML only)

The <{global/dir}> attribute

The heuristic used by this state is very crude (it just looks at the first character with a strong directionality, in a manner analogous to the Paragraph Level determination in the bidirectional algorithm). Authors are urged to only use this value as a last resort when the direction of the text is truly unknown and no better server-side heuristic can be applied. [[!BIDI]]

For <{textarea}> and <{pre}> elements, the heuristic is applied on a per-paragraph level.

: If the element's <{global/dir}> attribute is in the ltr state : If the element is a [=document element=] and the <{global/dir}> attribute is not in a defined state (i.e., it is not present or has an invalid value) : If the element is an <{input}> element whose <{input/type}> attribute is in the <{input/Telephone}> state, and the <{global/dir}> attribute is not in a defined state (i.e., it is not present or has an invalid value) :: [=The directionality=] of the element is 'ltr'. : If the element's <{global/dir}> attribute is in the rtl state :: [=The directionality=] of the element is 'rtl'. : If the element is an <{input}> element whose <{input/type}> attribute is in the <{input/Text}>, <{input/Search}>, <{input/Telephone}>, <{input/URL}>, or <{input/E-mail}> state, and the <{global/dir}> attribute is in the auto state : If the element is a <{textarea}> element and the <{global/dir}> attribute is in the auto state :: If the element's [=attribute value|value=] contains a character of bidirectional character type AL or R, and there is no character of bidirectional character type L anywhere before it in the element's [=attribute value|value=], then [=the directionality=] of the element is 'rtl'. [[!BIDI]] Otherwise, if the element's [=attribute value|value=] is not the empty string, or if the element is a [=document element=], [=the directionality=] of the element is 'ltr'. Otherwise, [=the directionality=] of the element is the same as the element's parent element's [=directionality=]. : If the element's <{global/dir}> attribute is in the auto state : If the element is a <{bdi}> element and the <{global/dir}> attribute is not in a defined state (i.e., it is not present or has an invalid value) :: Find the first character in [=tree order=] that matches the following criteria: * The character is from a {{Text}} node that is a descendant of the element whose [=directionality=] is being determined. * The character is of bidirectional character type L, AL, or R. [[!BIDI]] * The character is not in a {{Text}} node that has an ancestor element that is a descendant of the element whose [=directionality=] is being determined and that is either:

* A <{bdi}> element. * A <{script}> element. * A <{style}> element. * A <{textarea}> element. * An element with a <{global/dir}> attribute in a defined state.

If such a character is found and it is of bidirectional character type AL or R, [=the directionality=] of the element is 'rtl'. If such a character is found and it is of bidirectional character type L, [=the directionality=] of the element is 'ltr'. Otherwise, if the element is a [=document element=], [=the directionality=] of the element is 'ltr'. Otherwise, [=the directionality=] of the element the same as the element's parent element's [=directionality=]. : If the element has a parent element and the <{global/dir}> attribute is not in a defined state (i.e., it is not present or has an invalid value) :: [=The directionality=] of the element is the same as the element's parent element's [=directionality=].

Since the <{global/dir}> attribute is only defined for [=HTML elements=], it cannot be present on elements from other namespaces. Thus, elements from other namespaces always just inherit their [=directionality=] from their parent element, or, if they don't have one, default to 'ltr'.

This attribute has rendering requirements involving the bidirectional algorithm.

: If the attribute is a [=directionality-capable attribute=] and the element's <{global/dir}> attribute is in the auto state :: Find the first character (in logical order) of the attribute's value that is of bidirectional character type L, AL, or R. [[!BIDI]] If such a character is found and it is of bidirectional character type AL or R, the [=directionality of the attribute=] is 'rtl'. Otherwise, the [=directionality of the attribute=] is 'ltr'. : Otherwise :: The [=directionality of the attribute=] is the same as [=the element's directionality=].

* <{th/abbr}> on <{th}> elements * alt on <{area/alt|area}>, <{img/alt|img}>, and <{input/alt|input}> elements * <{meta/content}> on <{meta}> elements, if the <{meta/name}> attribute specifies a metadata name whose value is primarily intended to be human-readable rather than machine-readable * label on <{optgroup/label|optgroup}>, <{option/label|option}>, and <{track/label|track}> elements * placeholder on <{input/placeholder|input}> and <{textarea/placeholder|textarea}> elements * <{global/title}> on all [=HTML elements=]

: |document| . {{Document/dir}} [ = |value| ] :: Returns the <{html}> element's <{global/dir}> attribute's value, if any. Can be set, to either 'ltr', 'rtl', or 'auto' to replace the <{html}> element's <{global/dir}> attribute's value. If there is no <{html}> element, returns the empty string and ignores new values.

Authors are strongly encouraged to use the <{global/dir}> attribute to indicate text direction rather than using CSS, since that way their documents will continue to render correctly even in the absence of CSS (e.g., as interpreted by search engines).

This markup fragment is of an IM conversation. <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> Given a suitable style sheet and the default alignment styles for the <{p}> element, namely to align the text to the start edge of the paragraph, the resulting rendering could be as follows: As noted earlier, the 'auto' value is not a panacea. The final paragraph in this example is misinterpreted as being right-to-left text, since it begins with an Arabic character, which causes the "right?" to be to the left of the Arabic text.

The style attribute

In particular, using the <{global/style}> attribute to hide and show content, or to convey meaning that is otherwise not included in the document, is non-conforming. (To hide and show content, use the <{global/hidden}> attribute.)

: |element| . {{ElementCSSInlineStyle/style}} :: Returns a {{CSSStyleDeclaration}} object for the element's <{global/style}> attribute.

Embedding custom non-visible data with the <{global/data-*}> attributes

All attribute names on [=HTML elements=] in [=HTML documents=] get ASCII-lowercased automatically, so the restriction on ASCII uppercase letters doesn't affect such documents.

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

: |element| . {{HTMLElement/dataset}} :: Returns a {{DOMStringMap}} object for the element's <{global/data-*}> attributes. Hyphenated names are converted to dromedary-case (which is the same as camel-case except the initial letter is not uppercased). For example, data-foo-bar="" becomes element.dataset.fooBar.

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

This algorithm will only get invoked by the Web IDL specification for names that are given by the earlier algorithm for [=DOMStringMap/__getter__()|getting the DOMStringMap's name-value pairs=]. [[!WEBIDL]]

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

The {{HTMLElement/innerText}} IDL attribute

: |element| . {{HTMLElement/innerText}} [ = value ] :: Returns the element's text content "as rendered". Can be set, to replace the element's children with the given value, but with line breaks converted to <{br}> elements.

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.

* <{select}> elements have an associated non-replaced inline CSS box whose child boxes include only those of <{optgroup}> and <{option}> element child nodes; * <{optgroup}> elements have an associated non-replaced block-level CSS box whose child boxes include only those of <{option}> element child nodes; and * <{option}> element have an associated non-replaced block-level CSS box whose child boxes are as normal for non-replaced block-level CSS boxes.

Items can be non-empty due to "display: contents".

Floats and absolutely-positioned elements fall into this category.

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.

Requirements relating to the bidirectional algorithm

Authoring conformance criteria for bidirectional-algorithm formatting characters

Authors are encouraged to use the <{global/dir}> attribute, the <{bdo}> element, and the <{bdi}> element, rather than maintaining the bidirectional-algorithm formatting characters manually. The bidirectional-algorithm formatting characters interact poorly with CSS.

User agent conformance criteria

The following elements and attributes have requirements defined by the [[#rendering|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=]):

* <{global/dir}> attribute * <{bdi}> element * <{bdo}> element * <{br}> element * <{pre}> element * <{textarea}> element * <{wbr}> element

WAI-ARIA and HTML Accessibility API Mappings

ARIA Authoring Requirements

In the majority of cases setting an ARIA <{aria/role}> and/or <{aria/aria-*}> attribute that matches the default implicit ARIA semantics is unnecessary and not recommended as these properties are already set by the browser.

Conformance Checker Implementation Requirements

User Agent Implementation Requirements

ARIA Role Attribute

State and Property Attributes

Allowed ARIA roles, states and properties

The following table provides an informative reference to the ARIA roles, states and properties permitted for use in HTML. Links to ARIA roles, states and properties in the table reference the normative definitions in the [[!wai-aria-1.1]] specification.