CINXE.COM

<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=/link-fixup.js defer=""></script><meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=https://resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=stylesheet href=https://resources.whatwg.org/standard.css crossorigin=""><link rel=stylesheet href=https://resources.whatwg.org/spec.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=/styles.css crossorigin=""><script> function toggleStatus(div) { div.parentNode.classList.toggle('wrapped'); } function setLinkFragment(link) { link.hash = location.hash; } </script><body> <script defer="" crossorigin="" src=/html-dfn.js></script> <header id=head class="head with-buttons"> <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a> <hgroup><h1 class=allcaps>HTML</h1>Living Standard — Last Updated 26 November 2024</hgroup> </header> <nav><a href=structured-data.html>← 2.7 Safe passing of structured data</a> — <a href=./>Table of Contents</a> — <a href=semantics.html>4 The elements of HTML →</a></nav><ol class=toc><li id=toc-dom><a href=dom.html#dom>3 Semantics, structure, and APIs of HTML documents</a><ol><li><a href=dom.html#documents>3.1 Documents</a><ol><li><a href=dom.html#the-document-object>3.1.1 The <code>Document</code> object</a><li><a href=dom.html#the-documentorshadowroot-interface>3.1.2 The <code>DocumentOrShadowRoot</code> interface</a><li><a href=dom.html#resource-metadata-management>3.1.3 Resource metadata management</a><li><a href=dom.html#reporting-document-loading-status>3.1.4 Reporting document loading status</a><li><a href=dom.html#render-blocking-mechanism>3.1.5 Render-blocking mechanism</a><li><a href=dom.html#dom-tree-accessors>3.1.6 DOM tree accessors</a></ol><li><a href=dom.html#elements>3.2 Elements</a><ol><li><a href=dom.html#semantics-2>3.2.1 Semantics</a><li><a href=dom.html#elements-in-the-dom>3.2.2 Elements in the DOM</a><li><a href=dom.html#html-element-constructors>3.2.3 HTML element constructors</a><li><a href=dom.html#element-definitions>3.2.4 Element definitions</a><ol><li><a href=dom.html#attributes>3.2.4.1 Attributes</a></ol><li><a href=dom.html#content-models>3.2.5 Content models</a><ol><li><a href=dom.html#the-nothing-content-model>3.2.5.1 The "nothing" content model</a><li><a href=dom.html#kinds-of-content>3.2.5.2 Kinds of content</a><ol><li><a href=dom.html#metadata-content>3.2.5.2.1 Metadata content</a><li><a href=dom.html#flow-content>3.2.5.2.2 Flow content</a><li><a href=dom.html#sectioning-content>3.2.5.2.3 Sectioning content</a><li><a href=dom.html#heading-content>3.2.5.2.4 Heading content</a><li><a href=dom.html#phrasing-content>3.2.5.2.5 Phrasing content</a><li><a href=dom.html#embedded-content-2>3.2.5.2.6 Embedded content</a><li><a href=dom.html#interactive-content>3.2.5.2.7 Interactive content</a><li><a href=dom.html#palpable-content>3.2.5.2.8 Palpable content</a><li><a href=dom.html#script-supporting-elements>3.2.5.2.9 Script-supporting elements</a></ol><li><a href=dom.html#transparent-content-models>3.2.5.3 Transparent content models</a><li><a href=dom.html#paragraphs>3.2.5.4 Paragraphs</a></ol><li><a href=dom.html#global-attributes>3.2.6 Global attributes</a><ol><li><a href=dom.html#the-title-attribute>3.2.6.1 The <code>title</code> attribute</a><li><a href=dom.html#the-lang-and-xml:lang-attributes>3.2.6.2 The <code>lang</code> and <code>xml:lang</code> attributes</a><li><a href=dom.html#the-translate-attribute>3.2.6.3 The <code>translate</code> attribute</a><li><a href=dom.html#the-dir-attribute>3.2.6.4 The <code>dir</code> attribute</a><li><a href=dom.html#the-style-attribute>3.2.6.5 The <code>style</code> attribute</a><li><a href=dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes>3.2.6.6 Embedding custom non-visible data with the <code>data-*</code> attributes</a></ol><li><a href=dom.html#the-innertext-idl-attribute>3.2.7 The <code>innerText</code> and <code>outerText</code> properties</a><li><a href=dom.html#requirements-relating-to-the-bidirectional-algorithm>3.2.8 Requirements relating to the bidirectional algorithm</a><ol><li><a href=dom.html#authoring-conformance-criteria-for-bidirectional-algorithm-formatting-characters>3.2.8.1 Authoring conformance criteria for bidirectional-algorithm formatting characters</a><li><a href=dom.html#user-agent-conformance-criteria>3.2.8.2 User agent conformance criteria</a></ol><li><a href=dom.html#wai-aria>3.2.9 Requirements related to ARIA and to platform accessibility APIs</a></ol></ol></ol><h2 id=dom>3 Semantics, structure, and APIs of HTML documents<a href=#dom class=self-link></a></h2> <h3 id=documents>3.1 Documents<a href=#documents class=self-link></a></h3> Every XML and HTML document in an HTML UA is represented by a <code id=documents:document><a href=#document>Document</a></code> object. <a href=references.html#refsDOM>[DOM]</a> The <code id=documents:document-2><a href=#document>Document</a></code> object's <dfn data-x-for=Document id="the-document's-address"><a href=https://dom.spec.whatwg.org/#concept-document-url>URL</a></dfn> is defined in <cite>DOM</cite>. It is initially set when the <code id=documents:document-3><a href=#document>Document</a></code> object is created, but can change during the lifetime of the <code id=documents:document-4><a href=#document>Document</a></code> object; for example, it changes when the user <a href=browsing-the-web.html#navigate id=documents:navigate>navigates</a> to a <a href=browsing-the-web.html#navigate-fragid id=documents:navigate-fragid>fragment</a> on the page and when the <code id=documents:dom-history-pushstate><a href=nav-history-apis.html#dom-history-pushstate>pushState()</a></code> method is called with a new <a id=documents:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>. <a href=references.html#refsDOM>[DOM]</a> Interactive user agents typically expose the <code id=documents:document-5><a href=#document>Document</a></code> object's <a href=https://dom.spec.whatwg.org/#concept-document-url id="documents:the-document's-address" data-x-internal="the-document's-address">URL</a> in their user interface. This is the primary mechanism by which a user can tell if a site is attempting to impersonate another. The <code id=documents:document-6><a href=#document>Document</a></code> object's <dfn data-x-for=Document id=concept-document-origin><a href=https://dom.spec.whatwg.org/#concept-document-origin>origin</a></dfn> is defined in <cite>DOM</cite>. It is initially set when the <code id=documents:document-7><a href=#document>Document</a></code> object is created, and can change during the lifetime of the <code id=documents:document-8><a href=#document>Document</a></code> only upon setting <code id=documents:dom-document-domain><a href=browsers.html#dom-document-domain>document.domain</a></code>. A <code id=documents:document-9><a href=#document>Document</a></code>'s <a href=https://dom.spec.whatwg.org/#concept-document-origin id=documents:concept-document-origin data-x-internal=concept-document-origin>origin</a> can differ from the <a href=https://url.spec.whatwg.org/#concept-url-origin id=documents:concept-url-origin data-x-internal=concept-url-origin>origin</a> of its <a href=https://dom.spec.whatwg.org/#concept-document-url id="documents:the-document's-address-2" data-x-internal="the-document's-address">URL</a>; for example when a <a id=documents:child-navigable href=document-sequences.html#child-navigable>child navigable</a> is <a href=document-sequences.html#create-a-new-child-navigable id=documents:create-a-new-child-navigable>created</a>, its <a href=document-sequences.html#nav-document id=documents:nav-document>active document</a>'s <a href=https://dom.spec.whatwg.org/#concept-document-origin id=documents:concept-document-origin-2 data-x-internal=concept-document-origin>origin</a> is inherited from its <a href=document-sequences.html#nav-parent id=documents:nav-parent>parent</a>'s <a href=document-sequences.html#nav-document id=documents:nav-document-2>active document</a>'s <a href=https://dom.spec.whatwg.org/#concept-document-origin id=documents:concept-document-origin-3 data-x-internal=concept-document-origin>origin</a>, even though its <a href=document-sequences.html#nav-document id=documents:nav-document-3>active document</a>'s <a href=https://dom.spec.whatwg.org/#concept-document-url id="documents:the-document's-address-3" data-x-internal="the-document's-address">URL</a> is <code id=documents:about:blank><a href=infrastructure.html#about:blank>about:blank</a></code>. <a href=references.html#refsDOM>[DOM]</a> When a <code id=documents:document-10><a href=#document>Document</a></code> is created by a <a href=webappapis.html#concept-script id=documents:concept-script>script</a> using the <code id=documents:dom-domimplementation-createdocument><a data-x-internal=dom-domimplementation-createdocument href=https://dom.spec.whatwg.org/#dom-domimplementation-createdocument>createDocument()</a></code> or <code id=documents:dom-domimplementation-createhtmldocument><a data-x-internal=dom-domimplementation-createhtmldocument href=https://dom.spec.whatwg.org/#dom-domimplementation-createhtmldocument>createHTMLDocument()</a></code> methods, the <code id=documents:document-11><a href=#document>Document</a></code> is <a id=documents:ready-for-post-load-tasks href=parsing.html#ready-for-post-load-tasks>ready for post-load tasks</a> immediately. <dfn id="the-document's-referrer" data-export="">The document's referrer</dfn> is a string (representing a <a id=documents:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>) that can be set when the <code id=documents:document-12><a href=#document>Document</a></code> is created. If it is not explicitly set, then its value is the empty string. <h4 id=the-document-object>3.1.1 The <code id=the-document-object:document><a href=#document>Document</a></code> object<a href=#the-document-object class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document title="The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree.">Document</a>Support in all current engines.<div class=support>Firefox1+Safari1+Chrome1+<hr>Opera3+Edge79+<hr>Edge (Legacy)12+Internet Explorer4+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android10.1+</div></div></div> <cite>DOM</cite> defines a <code id=the-document-object:dom-document><a data-x-internal=dom-document href=https://dom.spec.whatwg.org/#interface-document>Document</a></code> interface, which this specification extends significantly. <pre><code class='idl'><c- b>enum</c-> <dfn id='documentreadystate' data-dfn-type='enum'><c- g>DocumentReadyState</c-></dfn> { <c- s>"loading"</c->, <c- s>"interactive"</c->, <c- s>"complete"</c-> }; <c- b>enum</c-> <dfn id='documentvisibilitystate' data-dfn-type='enum'><c- g>DocumentVisibilityState</c-></dfn> { <c- s>"visible"</c->, <c- s>"hidden"</c-> }; <c- b>typedef</c-> (<a id='the-document-object:htmlscriptelement' href='scripting.html#htmlscriptelement'><c- n>HTMLScriptElement</c-></a> <c- b>or</c-> <a id='the-document-object:svgscriptelement' href='https://svgwg.org/svg2-draft/interact.html#InterfaceSVGScriptElement' data-x-internal='svgscriptelement'><c- n>SVGScriptElement</c-></a>) <dfn id='htmlorsvgscriptelement' data-dfn-type='typedef'><c- g>HTMLOrSVGScriptElement</c-></dfn>; [<a id='the-document-object:legacyoverridebuiltins' href='https://webidl.spec.whatwg.org/#LegacyOverrideBuiltIns' data-x-internal='legacyoverridebuiltins'><c- g>LegacyOverrideBuiltIns</c-></a>] <c- b>partial</c-> <c- b>interface</c-> <dfn data-lt id='document'><c- g>Document</c-></dfn> { <c- b>static</c-> <code id='the-document-object:document-2'><a href='#document'><c- n>Document</c-></a></code> <a href='dynamic-markup-insertion.html#dom-parsehtmlunsafe' id='the-document-object:dom-parsehtmlunsafe'><c- g>parseHTMLUnsafe</c-></a>((<code id='the-document-object:tt-trustedhtml'><a data-x-internal='tt-trustedhtml' href='https://w3c.github.io/trusted-types/dist/spec/#trustedhtml'><c- n>TrustedHTML</c-></a></code> <c- b>or</c-> <c- b>DOMString</c->) <c- g>html</c->); // <a href='#resource-metadata-management' id='the-document-object:resource-metadata-management'>resource metadata management</a> [<c- g>PutForwards</c->=<a href='nav-history-apis.html#dom-location-href' id='the-document-object:dom-location-href'><c- n>href</c-></a>, <a id='the-document-object:legacyunforgeable' href='https://webidl.spec.whatwg.org/#LegacyUnforgeable' data-x-internal='legacyunforgeable'><c- g>LegacyUnforgeable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-document-object:location' href='nav-history-apis.html#location'><c- n>Location</c-></a>? <a href='nav-history-apis.html#dom-document-location' id='the-document-object:dom-document-location'><c- g>location</c-></a>; <c- b>attribute</c-> <c- b>USVString</c-> <a href='browsers.html#dom-document-domain' id='the-document-object:dom-document-domain'><c- g>domain</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <c- b>USVString</c-> <a href='#dom-document-referrer' id='the-document-object:dom-document-referrer'><c- g>referrer</c-></a>; <c- b>attribute</c-> <c- b>USVString</c-> <a href='#dom-document-cookie' id='the-document-object:dom-document-cookie'><c- g>cookie</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-document-lastmodified' id='the-document-object:dom-document-lastmodified'><c- g>lastModified</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a href='#documentreadystate' id='the-document-object:documentreadystate'><c- n>DocumentReadyState</c-></a> <a href='#dom-document-readystate' id='the-document-object:dom-document-readystate'><c- g>readyState</c-></a>; // <a href='#dom-tree-accessors' id='the-document-object:dom-tree-accessors'>DOM tree accessors</a> <a href='#dom-document-nameditem'><c- b>getter</c-></a> <c- b>object</c-> (<c- b>DOMString</c-> <c- g>name</c->); [<a id='the-document-object:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#document.title' id='the-document-object:document.title'><c- g>title</c-></a>; [<a id='the-document-object:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-document-dir' id='the-document-object:dom-document-dir'><c- g>dir</c-></a>; [<a id='the-document-object:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <a href='#htmlelement' id='the-document-object:htmlelement'><c- n>HTMLElement</c-></a>? <a href='#dom-document-body' id='the-document-object:dom-document-body'><c- g>body</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-document-object:htmlheadelement' href='semantics.html#htmlheadelement'><c- n>HTMLHeadElement</c-></a>? <a href='#dom-document-head' id='the-document-object:dom-document-head'><c- g>head</c-></a>; [<c- g>SameObject</c->] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-document-object:htmlcollection' href='https://dom.spec.whatwg.org/#interface-htmlcollection' data-x-internal='htmlcollection'><c- n>HTMLCollection</c-></a> <a href='#dom-document-images' id='the-document-object:dom-document-images'><c- g>images</c-></a>; [<c- g>SameObject</c->] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-document-object:htmlcollection-2' href='https://dom.spec.whatwg.org/#interface-htmlcollection' data-x-internal='htmlcollection'><c- n>HTMLCollection</c-></a> <a href='#dom-document-embeds' id='the-document-object:dom-document-embeds'><c- g>embeds</c-></a>; [<c- g>SameObject</c->] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-document-object:htmlcollection-3' href='https://dom.spec.whatwg.org/#interface-htmlcollection' data-x-internal='htmlcollection'><c- n>HTMLCollection</c-></a> <a href='#dom-document-plugins' id='the-document-object:dom-document-plugins'><c- g>plugins</c-></a>; [<c- g>SameObject</c->] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-document-object:htmlcollection-4' href='https://dom.spec.whatwg.org/#interface-htmlcollection' data-x-internal='htmlcollection'><c- n>HTMLCollection</c-></a> <a href='#dom-document-links' id='the-document-object:dom-document-links'><c- g>links</c-></a>; [<c- g>SameObject</c->] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-document-object:htmlcollection-5' href='https://dom.spec.whatwg.org/#interface-htmlcollection' data-x-internal='htmlcollection'><c- n>HTMLCollection</c-></a> <a href='#dom-document-forms' id='the-document-object:dom-document-forms'><c- g>forms</c-></a>; [<c- g>SameObject</c->] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-document-object:htmlcollection-6' href='https://dom.spec.whatwg.org/#interface-htmlcollection' data-x-internal='htmlcollection'><c- n>HTMLCollection</c-></a> <a href='#dom-document-scripts' id='the-document-object:dom-document-scripts'><c- g>scripts</c-></a>; <c- n>NodeList</c-> <a href='#dom-document-getelementsbyname' id='the-document-object:dom-document-getelementsbyname'><c- g>getElementsByName</c-></a>(<c- b>DOMString</c-> <c- g>elementName</c->); <c- b>readonly</c-> <c- b>attribute</c-> <a href='#htmlorsvgscriptelement' id='the-document-object:htmlorsvgscriptelement'><c- n>HTMLOrSVGScriptElement</c-></a>? <a href='#dom-document-currentscript' id='the-document-object:dom-document-currentscript'><c- g>currentScript</c-></a>; // classic scripts in a document tree only // <a id='the-document-object:dynamic-markup-insertion' href='dynamic-markup-insertion.html#dynamic-markup-insertion'>dynamic markup insertion</a> [<a id='the-document-object:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <a href='#document' id='the-document-object:document-3'><c- n>Document</c-></a> <a href='dynamic-markup-insertion.html#dom-document-open' id='the-document-object:dom-document-open'><c- g>open</c-></a>(<c- b>optional</c-> <c- b>DOMString</c-> <c- g>unused1</c->, <c- b>optional</c-> <c- b>DOMString</c-> <c- g>unused2</c->); // both arguments are <a href='dynamic-markup-insertion.html#dom-document-open-unused-arguments'>ignored</a> <a id='the-document-object:windowproxy' href='nav-history-apis.html#windowproxy'><c- n>WindowProxy</c-></a>? <a href='dynamic-markup-insertion.html#dom-document-open-window' id='the-document-object:dom-document-open-window'><c- g>open</c-></a>(<c- b>USVString</c-> <c- g>url</c->, <c- b>DOMString</c-> <c- g>name</c->, <c- b>DOMString</c-> <c- g>features</c->); [<a id='the-document-object:cereactions-5' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>undefined</c-> <a href='dynamic-markup-insertion.html#dom-document-close' id='the-document-object:dom-document-close'><c- g>close</c-></a>(); [<a id='the-document-object:cereactions-6' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>undefined</c-> <a href='dynamic-markup-insertion.html#dom-document-write' id='the-document-object:dom-document-write'><c- g>write</c-></a>((<code id='the-document-object:tt-trustedhtml-2'><a data-x-internal='tt-trustedhtml' href='https://w3c.github.io/trusted-types/dist/spec/#trustedhtml'><c- n>TrustedHTML</c-></a></code> <c- b>or</c-> <c- b>DOMString</c->)... <c- g>text</c->); [<a id='the-document-object:cereactions-7' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>undefined</c-> <a href='dynamic-markup-insertion.html#dom-document-writeln' id='the-document-object:dom-document-writeln'><c- g>writeln</c-></a>((<code id='the-document-object:tt-trustedhtml-3'><a data-x-internal='tt-trustedhtml' href='https://w3c.github.io/trusted-types/dist/spec/#trustedhtml'><c- n>TrustedHTML</c-></a></code> <c- b>or</c-> <c- b>DOMString</c->)... <c- g>text</c->); // <a id='the-document-object:editing' href='interaction.html#editing'>user interaction</a> <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-document-object:windowproxy-2' href='nav-history-apis.html#windowproxy'><c- n>WindowProxy</c-></a>? <a href='nav-history-apis.html#dom-document-defaultview' id='the-document-object:dom-document-defaultview'><c- g>defaultView</c-></a>; <c- b>boolean</c-> <a href='interaction.html#dom-document-hasfocus' id='the-document-object:dom-document-hasfocus'><c- g>hasFocus</c-></a>(); [<a id='the-document-object:cereactions-8' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='interaction.html#designMode' id='the-document-object:designMode'><c- g>designMode</c-></a>; [<a id='the-document-object:cereactions-9' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>boolean</c-> <a href='https://w3c.github.io/editing/docs/execCommand/#execcommand%28%29' id='the-document-object:execCommand' data-x-internal='execCommand'><c- g>execCommand</c-></a>(<c- b>DOMString</c-> <c- g>commandId</c->, <c- b>optional</c-> <c- b>boolean</c-> <c- g>showUI</c-> = <c- b>false</c->, <c- b>optional</c-> <c- b>DOMString</c-> <c- g>value</c-> = ""); <c- b>boolean</c-> <a href='https://w3c.github.io/editing/docs/execCommand/#querycommandenabled%28%29' id='the-document-object:dom-document-querycommandenabled' data-x-internal='dom-document-querycommandenabled'><c- g>queryCommandEnabled</c-></a>(<c- b>DOMString</c-> <c- g>commandId</c->); <c- b>boolean</c-> <a href='https://w3c.github.io/editing/docs/execCommand/#querycommandindeterm%28%29' id='the-document-object:dom-document-querycommandindeterm' data-x-internal='dom-document-querycommandindeterm'><c- g>queryCommandIndeterm</c-></a>(<c- b>DOMString</c-> <c- g>commandId</c->); <c- b>boolean</c-> <a href='https://w3c.github.io/editing/docs/execCommand/#querycommandstate%28%29' id='the-document-object:dom-document-querycommandstate' data-x-internal='dom-document-querycommandstate'><c- g>queryCommandState</c-></a>(<c- b>DOMString</c-> <c- g>commandId</c->); <c- b>boolean</c-> <a href='https://w3c.github.io/editing/docs/execCommand/#querycommandsupported%28%29' id='the-document-object:dom-document-querycommandsupported' data-x-internal='dom-document-querycommandsupported'><c- g>queryCommandSupported</c-></a>(<c- b>DOMString</c-> <c- g>commandId</c->); <c- b>DOMString</c-> <a href='https://w3c.github.io/editing/docs/execCommand/#querycommandvalue%28%29' id='the-document-object:dom-document-querycommandvalue' data-x-internal='dom-document-querycommandvalue'><c- g>queryCommandValue</c-></a>(<c- b>DOMString</c-> <c- g>commandId</c->); <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='interaction.html#dom-document-hidden' id='the-document-object:dom-document-hidden'><c- g>hidden</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a href='#documentvisibilitystate' id='the-document-object:documentvisibilitystate'><c- n>DocumentVisibilityState</c-></a> <a href='interaction.html#dom-document-visibilitystate' id='the-document-object:dom-document-visibilitystate'><c- g>visibilityState</c-></a>; // special <a id='the-document-object:event-handler-idl-attributes' href='webappapis.html#event-handler-idl-attributes'>event handler IDL attributes</a> that only apply to Document objects [<a id='the-document-object:legacylenientthis' href='https://webidl.spec.whatwg.org/#LegacyLenientThis' data-x-internal='legacylenientthis'><c- g>LegacyLenientThis</c-></a>] <c- b>attribute</c-> <a id='the-document-object:eventhandler' href='webappapis.html#eventhandler'><c- n>EventHandler</c-></a> <a href='webappapis.html#handler-onreadystatechange' id='the-document-object:handler-onreadystatechange'><c- g>onreadystatechange</c-></a>; <c- b>attribute</c-> <a id='the-document-object:eventhandler-2' href='webappapis.html#eventhandler'><c- n>EventHandler</c-></a> <a href='webappapis.html#handler-onvisibilitychange' id='the-document-object:handler-onvisibilitychange'><c- g>onvisibilitychange</c-></a>; // <a href='obsolete.html#Document-partial'>also has obsolete members</a> }; <a href='#document' id='the-document-object:document-4'><c- n>Document</c-></a> <c- b>includes</c-> <a id='the-document-object:globaleventhandlers' href='webappapis.html#globaleventhandlers'><c- n>GlobalEventHandlers</c-></a>;</code></pre> Each <code id=the-document-object:document-5><a href=#document>Document</a></code> has a <dfn data-dfn-for=Document id=concept-document-policy-container data-export="">policy container</dfn> (a <a id=the-document-object:policy-container href=browsers.html#policy-container>policy container</a>), initially a new policy container, which contains policies which apply to the <code id=the-document-object:document-6><a href=#document>Document</a></code>. Each <code id=the-document-object:document-7><a href=#document>Document</a></code> has a <dfn data-dfn-for=Document id=concept-document-permissions-policy data-export="">permissions policy</dfn>, which is a <a href=https://w3c.github.io/webappsec-feature-policy/#permissions-policy id=the-document-object:concept-permissions-policy data-x-internal=concept-permissions-policy>permissions policy</a>, which is initially empty. Each <code id=the-document-object:document-8><a href=#document>Document</a></code> has a <dfn id=concept-document-module-map>module map</dfn>, which is a <a id=the-document-object:module-map href=webappapis.html#module-map>module map</a>, initially empty. Each <code id=the-document-object:document-9><a href=#document>Document</a></code> has an <dfn id=concept-document-coop>opener policy</dfn>, which is an <a id=the-document-object:cross-origin-opener-policy href=browsers.html#cross-origin-opener-policy>opener policy</a>, initially a new opener policy. Each <code id=the-document-object:document-10><a href=#document>Document</a></code> has an <dfn id=is-initial-about:blank>is initial <code>about:blank</code></dfn>, which is a boolean, initially false. Each <code id=the-document-object:document-11><a href=#document>Document</a></code> has a <dfn id=concept-document-navigation-id>during-loading navigation ID for WebDriver BiDi</dfn>, which is a <a id=the-document-object:navigation-id href=browsing-the-web.html#navigation-id>navigation ID</a> or null, initially null. As the name indicates, this is used for interfacing with the <cite>WebDriver BiDi</cite> specification, which needs to be informed about certain occurrences during the early parts of the <code id=the-document-object:document-12><a href=#document>Document</a></code>'s lifecycle, in a way that ties them to the original <a id=the-document-object:navigation-id-2 href=browsing-the-web.html#navigation-id>navigation ID</a> used when the navigation that created this <code id=the-document-object:document-13><a href=#document>Document</a></code> was the <a id=the-document-object:ongoing-navigation href=browsing-the-web.html#ongoing-navigation>ongoing navigation</a>. This eventually gets set back to null, after <cite>WebDriver BiDi</cite> considers the loading process to be finished. <a href=references.html#refsBIDI>[BIDI]</a> Each <code id=the-document-object:document-14><a href=#document>Document</a></code> has an <dfn id=concept-document-about-base-url>about base URL</dfn>, which is a <a id=the-document-object:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> or null, initially null. This is only populated for "<code>about:</code>"-schemed <code id=the-document-object:document-15><a href=#document>Document</a></code>s. Each <code id=the-document-object:document-16><a href=#document>Document</a></code> has a <dfn id=concept-document-bfcache-blocking-details>bfcache blocking details</dfn>, which is a <a id=the-document-object:set href=https://infra.spec.whatwg.org/#ordered-set data-x-internal=set>set</a> of <a href=nav-history-apis.html#nrr-details-struct id=the-document-object:nrr-details-struct>not restored reason details</a>, initially empty. <h4 id=the-documentorshadowroot-interface>3.1.2 The <code id=the-documentorshadowroot-interface:documentorshadowroot><a href=#documentorshadowroot>DocumentOrShadowRoot</a></code> interface<a href=#the-documentorshadowroot-interface class=self-link></a></h4> <cite>DOM</cite> defines the <code id=the-documentorshadowroot-interface:dom-documentorshadowroot><a data-x-internal=dom-documentorshadowroot href=https://dom.spec.whatwg.org/#documentorshadowroot>DocumentOrShadowRoot</a></code> mixin, which this specification extends. <pre><code class='idl'><c- b>partial</c-> <c- b>interface</c-> <c- b>mixin</c-> <dfn data-lt id='documentorshadowroot'><c- g>DocumentOrShadowRoot</c-></dfn> { <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-documentorshadowroot-interface:element' href='https://dom.spec.whatwg.org/#interface-element' data-x-internal='element'><c- n>Element</c-></a>? <a href='interaction.html#dom-documentorshadowroot-activeelement' id='the-documentorshadowroot-interface:dom-documentorshadowroot-activeelement'><c- g>activeElement</c-></a>; };</code></pre> <h4 id=resource-metadata-management>3.1.3 <dfn>Resource metadata management</dfn><a href=#resource-metadata-management class=self-link></a></h4> <dl class=domintro><dt><code><var>document</var>.<a href=#dom-document-referrer id=dom-document-referrer-dev>referrer</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer title="The Document.referrer property returns the URI of the page that linked to this page.">Document/referrer</a>Support in all current engines.<div class=support>Firefox1+Safari1+Chrome1+<hr>Opera3+Edge79+<hr>Edge (Legacy)12+Internet Explorer4+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+</div></div></div><dd> Returns the <a href=https://dom.spec.whatwg.org/#concept-document-url id="resource-metadata-management:the-document's-address" data-x-internal="the-document's-address">URL</a> of the <code id=resource-metadata-management:document><a href=#document>Document</a></code> 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 <code id=resource-metadata-management:link-type-noreferrer><a href=links.html#link-type-noreferrer>noreferrer</a></code> link type can be used to block the referrer. </dl> The <dfn data-dfn-for=Document id=dom-document-referrer data-dfn-type=attribute><code>referrer</code></dfn> attribute must return <a href="#the-document's-referrer" id="resource-metadata-management:the-document's-referrer">the document's referrer</a>. <hr> <dl class=domintro><dt><code><var>document</var>.<a href=#dom-document-cookie id=dom-document-cookie-dev>cookie</a> [ = <var>value</var> ]</code><dd> Returns the HTTP cookies that apply to the <code id=resource-metadata-management:document-2><a href=#document>Document</a></code>. 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 <a href=browsers.html#sandboxed-origin-browsing-context-flag id=resource-metadata-management:sandboxed-origin-browsing-context-flag>sandboxed into an opaque origin</a> (e.g., in an <code id=resource-metadata-management:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> with the <code id=resource-metadata-management:attr-iframe-sandbox><a href=iframe-embed-object.html#attr-iframe-sandbox>sandbox</a></code> attribute), a <a id=resource-metadata-management:securityerror href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a> <code id=resource-metadata-management:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> will be thrown on getting and setting. </dl> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie title="The Document property cookie lets you read and write cookies associated with the document. It serves as a getter and setter for the actual values of the cookies.">Document/cookie</a>Support in all current engines.<div class=support>Firefox1+Safari1+Chrome1+<hr>Opera3+Edge79+<hr>Edge (Legacy)12+Internet Explorer4+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+</div></div></div>The <dfn data-dfn-for=Document id=dom-document-cookie data-dfn-type=attribute><code>cookie</code></dfn> attribute represents the cookies of the resource identified by the document's <a href=https://dom.spec.whatwg.org/#concept-document-url id="resource-metadata-management:the-document's-address-2" data-x-internal="the-document's-address">URL</a>. A <code id=resource-metadata-management:document-3><a href=#document>Document</a></code> object that falls into one of the following conditions is a <dfn id=cookie-averse-document-object>cookie-averse <code>Document</code> object</dfn>: <ul><li>A <code id=resource-metadata-management:document-4><a href=#document>Document</a></code> object whose <a href=document-sequences.html#concept-document-bc id=resource-metadata-management:concept-document-bc>browsing context</a> is null.<li>A <code id=resource-metadata-management:document-5><a href=#document>Document</a></code> whose <a href=https://dom.spec.whatwg.org/#concept-document-url id="resource-metadata-management:the-document's-address-3" data-x-internal="the-document's-address">URL</a>'s <a href=https://url.spec.whatwg.org/#concept-url-scheme id=resource-metadata-management:concept-url-scheme data-x-internal=concept-url-scheme>scheme</a> is not an <a id=resource-metadata-management:http(s)-scheme href=https://fetch.spec.whatwg.org/#http-scheme data-x-internal=http(s)-scheme>HTTP(S) scheme</a>.</ul> <a id=resource-metadata-management:tracking-vector title="There is a tracking vector here." href=https://infra.spec.whatwg.org/#tracking-vector class=tracking-vector data-x-internal=tracking-vector><img width=46 alt="(This is a tracking vector.)" crossorigin="" src=https://resources.whatwg.org/tracking-vector.svg height=64></a> On getting, if the document is a <a href=#cookie-averse-document-object id=resource-metadata-management:cookie-averse-document-object>cookie-averse <code>Document</code> object</a>, then the user agent must return the empty string. Otherwise, if the <code id=resource-metadata-management:document-6><a href=#document>Document</a></code>'s <a href=https://dom.spec.whatwg.org/#concept-document-origin id=resource-metadata-management:concept-document-origin data-x-internal=concept-document-origin>origin</a> is an <a href=browsers.html#concept-origin-opaque id=resource-metadata-management:concept-origin-opaque>opaque origin</a>, the user agent must throw a <a id=resource-metadata-management:securityerror-2 href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a> <code id=resource-metadata-management:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>. Otherwise, the user agent must return the <a id=resource-metadata-management:cookie-string href=https://httpwg.org/specs/rfc6265.html#sane-cookie-syntax data-x-internal=cookie-string>cookie-string</a> for the document's <a href=https://dom.spec.whatwg.org/#concept-document-url id="resource-metadata-management:the-document's-address-4" data-x-internal="the-document's-address">URL</a> for a "non-HTTP" API, decoded using <a id=resource-metadata-management:utf-8-decode-without-bom href=https://encoding.spec.whatwg.org/#utf-8-decode-without-bom data-x-internal=utf-8-decode-without-bom>UTF-8 decode without BOM</a>. <a href=references.html#refsCOOKIES>[COOKIES]</a> On setting, if the document is a <a href=#cookie-averse-document-object id=resource-metadata-management:cookie-averse-document-object-2>cookie-averse <code>Document</code> object</a>, then the user agent must do nothing. Otherwise, if the <code id=resource-metadata-management:document-7><a href=#document>Document</a></code>'s <a href=https://dom.spec.whatwg.org/#concept-document-origin id=resource-metadata-management:concept-document-origin-2 data-x-internal=concept-document-origin>origin</a> is an <a href=browsers.html#concept-origin-opaque id=resource-metadata-management:concept-origin-opaque-2>opaque origin</a>, the user agent must throw a <a id=resource-metadata-management:securityerror-3 href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a> <code id=resource-metadata-management:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>. Otherwise, the user agent must act as it would when <a href=https://httpwg.org/specs/rfc6265.html#storage-model id=resource-metadata-management:receives-a-set-cookie-string data-x-internal=receives-a-set-cookie-string>receiving a set-cookie-string</a> for the document's <a href=https://dom.spec.whatwg.org/#concept-document-url id="resource-metadata-management:the-document's-address-5" data-x-internal="the-document's-address">URL</a> via a "non-HTTP" API, consisting of the new value <a href=https://encoding.spec.whatwg.org/#utf-8-encode id=resource-metadata-management:utf-8-encode data-x-internal=utf-8-encode>encoded as UTF-8</a>. <a href=references.html#refsCOOKIES>[COOKIES]</a> <a href=references.html#refsENCODING>[ENCODING]</a> Since the <code id=resource-metadata-management:dom-document-cookie><a href=#dom-document-cookie>cookie</a></code> 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 <code id=resource-metadata-management:dom-document-cookie-2><a href=#dom-document-cookie>cookie</a></code> 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. <hr> <dl class=domintro><dt><code><var>document</var>.<a href=#dom-document-lastmodified id=dom-document-lastmodified-dev>lastModified</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/lastModified title="The lastModified property of the Document interface returns a string containing the date and time on which the current document was last modified.">Document/lastModified</a>Support in all current engines.<div class=support>Firefox1+Safari1+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer4+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div><dd> Returns the date of the last modification to the document, as reported by the server, in the form "<code>MM/DD/YYYY hh:mm:ss</code>", in the user's local time zone. If the last modification date is not known, the current time is returned instead. </dl> The <dfn data-dfn-for=Document id=dom-document-lastmodified data-dfn-type=attribute><code>lastModified</code></dfn> attribute, on getting, must return the date and time of the <code id=resource-metadata-management:document-8><a href=#document>Document</a></code>'s source file's last modification, in the user's local time zone, in the following format: <ol><li>The month component of the date.<li>A U+002F SOLIDUS character (/).<li>The day component of the date.<li>A U+002F SOLIDUS character (/).<li>The year component of the date.<li>A U+0020 SPACE character.<li>The hours component of the time.<li>A U+003A COLON character (:).<li>The minutes component of the time.<li>A U+003A COLON character (:).<li>The seconds component of the time.</ol> All the numeric components above, other than the year, must be given as two <a id=resource-metadata-management:ascii-digits href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a> representing the number in base ten, zero-padded if necessary. The year must be given as the shortest possible string of four or more <a id=resource-metadata-management:ascii-digits-2 href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a> representing the number in base ten, zero-padded if necessary. The <code id=resource-metadata-management:document-9><a href=#document>Document</a></code>'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 `<code id=resource-metadata-management:http-last-modified><a data-x-internal=http-last-modified href=https://httpwg.org/specs/rfc7232.html#header.last-modified>Last-Modified</a></code>` 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. <h4 id=reporting-document-loading-status>3.1.4 Reporting document loading status<a href=#reporting-document-loading-status class=self-link></a></h4> <dl class=domintro><dt><code><var>document</var>.<a href=#dom-document-readystate id=dom-document-readystate-dev>readyState</a></code><dd> Returns "<code>loading</code>" while the <code id=reporting-document-loading-status:document><a href=#document>Document</a></code> is loading, "<code>interactive</code>" once it is finished parsing but still loading subresources, and "<code>complete</code>" once it has loaded. The <code id=reporting-document-loading-status:event-readystatechange><a href=indices.html#event-readystatechange>readystatechange</a></code> event fires on the <code id=reporting-document-loading-status:document-2><a href=#document>Document</a></code> object when this value changes. The <code id=reporting-document-loading-status:event-domcontentloaded><a href=indices.html#event-domcontentloaded>DOMContentLoaded</a></code> event fires after the transition to "<code>interactive</code>" but before the transition to "<code>complete</code>", at the point where all subresources apart from <code id=reporting-document-loading-status:attr-script-async><a href=scripting.html#attr-script-async>async</a></code> <code id=reporting-document-loading-status:the-script-element><a href=scripting.html#the-script-element>script</a></code> elements have loaded. </dl> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState title="The Document.readyState property describes the loading state of the document. When the value of this property changes, a readystatechange event fires on the document object.">Document/readyState</a>Support in all current engines.<div class=support>Firefox3.6+Safari1+Chrome1+<hr>Opera11+Edge79+<hr>Edge (Legacy)12+Internet Explorer11<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11+</div></div></div>Each <code id=reporting-document-loading-status:document-3><a href=#document>Document</a></code> has a <dfn id=current-document-readiness>current document readiness</dfn>, a string, initially "<code>complete</code>". For <code id=reporting-document-loading-status:document-4><a href=#document>Document</a></code> objects created via the <a href=document-lifecycle.html#initialise-the-document-object id=reporting-document-loading-status:initialise-the-document-object>create and initialize a <code>Document</code> object</a> algorithm, this will be immediately reset to "<code>loading</code>" before any script can observe the value of <code id=reporting-document-loading-status:dom-document-readystate><a href=#dom-document-readystate>document.readyState</a></code>. This default applies to other cases such as <a href=#is-initial-about:blank id=reporting-document-loading-status:is-initial-about:blank>initial <code>about:blank</code></a> <code id=reporting-document-loading-status:document-5><a href=#document>Document</a></code>s or <code id=reporting-document-loading-status:document-6><a href=#document>Document</a></code>s without a <a href=document-sequences.html#concept-document-bc id=reporting-document-loading-status:concept-document-bc>browsing context</a>. The <dfn data-dfn-for=Document id=dom-document-readystate data-dfn-type=attribute><code>readyState</code></dfn> getter steps are to return <a id=reporting-document-loading-status:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#current-document-readiness id=reporting-document-loading-status:current-document-readiness>current document readiness</a>. To <dfn id=update-the-current-document-readiness>update the current document readiness</dfn> for <code id=reporting-document-loading-status:document-7><a href=#document>Document</a></code> <var>document</var> to <var>readinessValue</var>: <ol><li>If <var>document</var>'s <a href=#current-document-readiness id=reporting-document-loading-status:current-document-readiness-2>current document readiness</a> equals <var>readinessValue</var>, then return.<li>Set <var>document</var>'s <a href=#current-document-readiness id=reporting-document-loading-status:current-document-readiness-3>current document readiness</a> to <var>readinessValue</var>.<li> If <var>document</var> is associated with an <a id=reporting-document-loading-status:html-parser href=parsing.html#html-parser>HTML parser</a>, then: <ol><li>Let <var>now</var> be the <a id=reporting-document-loading-status:current-high-resolution-time href=https://w3c.github.io/hr-time/#dfn-current-high-resolution-time data-x-internal=current-high-resolution-time>current high resolution time</a> given <var>document</var>'s <a id=reporting-document-loading-status:concept-relevant-global href=webappapis.html#concept-relevant-global>relevant global object</a>.<li>If <var>readinessValue</var> is "<code>complete</code>", and <var>document</var>'s <a href=#load-timing-info id=reporting-document-loading-status:load-timing-info>load timing info</a>'s <a href=#dom-complete-time id=reporting-document-loading-status:dom-complete-time>DOM complete time</a> is 0, then set <var>document</var>'s <a href=#load-timing-info id=reporting-document-loading-status:load-timing-info-2>load timing info</a>'s <a href=#dom-complete-time id=reporting-document-loading-status:dom-complete-time-2>DOM complete time</a> to <var>now</var>.<li>Otherwise, if <var>readinessValue</var> is "<code>interactive</code>", and <var>document</var>'s <a href=#load-timing-info id=reporting-document-loading-status:load-timing-info-3>load timing info</a>'s <a href=#dom-interactive-time id=reporting-document-loading-status:dom-interactive-time>DOM interactive time</a> is 0, then set <var>document</var>'s <a href=#load-timing-info id=reporting-document-loading-status:load-timing-info-4>load timing info</a>'s <a href=#dom-interactive-time id=reporting-document-loading-status:dom-interactive-time-2>DOM interactive time</a> to <var>now</var>.</ol> <li><a href=https://dom.spec.whatwg.org/#concept-event-fire id=reporting-document-loading-status:concept-event-fire data-x-internal=concept-event-fire>Fire an event</a> named <code id=reporting-document-loading-status:event-readystatechange-2><a href=indices.html#event-readystatechange>readystatechange</a></code> at <var>document</var>.</ol> <hr> A <code id=reporting-document-loading-status:document-8><a href=#document>Document</a></code> is said to have an <dfn id=active-parser>active parser</dfn> if it is associated with an <a id=reporting-document-loading-status:html-parser-2 href=parsing.html#html-parser>HTML parser</a> or an <a id=reporting-document-loading-status:xml-parser href=xhtml.html#xml-parser>XML parser</a> that has not yet been <a href=parsing.html#stop-parsing id=reporting-document-loading-status:stop-parsing>stopped</a> or <a href=parsing.html#abort-a-parser id=reporting-document-loading-status:abort-a-parser>aborted</a>. <hr> A <code id=reporting-document-loading-status:document-9><a href=#document>Document</a></code> has a <a href=#document-load-timing-info id=reporting-document-loading-status:document-load-timing-info>document load timing info</a> <dfn data-dfn-for=Document id=load-timing-info data-export="">load timing info</dfn>. A <code id=reporting-document-loading-status:document-10><a href=#document>Document</a></code> has a <a href=#document-unload-timing-info id=reporting-document-loading-status:document-unload-timing-info>document unload timing info</a> <dfn data-dfn-for=Document id=previous-document-unload-timing data-export="">previous document unload timing</dfn>. A <code id=reporting-document-loading-status:document-11><a href=#document>Document</a></code> has a boolean <dfn id=was-created-via-cross-origin-redirects data-export="">was created via cross-origin redirects</dfn>, initially false. The <dfn id=document-load-timing-info data-export="">document load timing info</dfn> <a id=reporting-document-loading-status:struct href=https://infra.spec.whatwg.org/#struct data-x-internal=struct>struct</a> has the following <a href=https://infra.spec.whatwg.org/#struct-item id=reporting-document-loading-status:struct-item data-x-internal=struct-item>items</a>: <dl><dt><dfn data-dfn-for="document load timing info" id=navigation-start-time data-export="">navigation start time</dfn> (default 0)<dd>A number<dt><dfn data-dfn-for="document load timing info" id=dom-interactive-time data-export="">DOM interactive time</dfn> (default 0)<dt><dfn data-dfn-for="document load timing info" id=dom-content-loaded-event-start-time data-export="">DOM content loaded event start time</dfn> (default 0)<dt><dfn data-dfn-for="document load timing info" id=dom-content-loaded-event-end-time data-export="">DOM content loaded event end time</dfn> (default 0)<dt><dfn data-dfn-for="document load timing info" id=dom-complete-time data-export="">DOM complete time</dfn> (default 0)<dt><dfn data-dfn-for="document load timing info" id=load-event-start-time data-export="">load event start time</dfn> (default 0)<dt><dfn data-dfn-for="document load timing info" id=load-event-end-time data-export="">load event end time</dfn> (default 0)<dd><code id=reporting-document-loading-status:domhighrestimestamp><a data-x-internal=domhighrestimestamp href=https://w3c.github.io/hr-time/#dom-domhighrestimestamp>DOMHighResTimeStamp</a></code> values</dl> The <dfn id=document-unload-timing-info data-export="">document unload timing info</dfn> <a id=reporting-document-loading-status:struct-2 href=https://infra.spec.whatwg.org/#struct data-x-internal=struct>struct</a> has the following <a href=https://infra.spec.whatwg.org/#struct-item id=reporting-document-loading-status:struct-item-2 data-x-internal=struct-item>items</a>: <dl><dt><dfn data-dfn-for="document unload timing info" id=unload-event-start-time data-export="">unload event start time</dfn> (default 0)<dt><dfn data-dfn-for="document unload timing info" id=unload-event-end-time data-export="">unload event end time</dfn> (default 0)<dd><code id=reporting-document-loading-status:domhighrestimestamp-2><a data-x-internal=domhighrestimestamp href=https://w3c.github.io/hr-time/#dom-domhighrestimestamp>DOMHighResTimeStamp</a></code> values</dl> <h4 id=render-blocking-mechanism>3.1.5 <dfn>Render-blocking mechanism</dfn><a href=#render-blocking-mechanism class=self-link></a></h4> Each <code id=render-blocking-mechanism:document><a href=#document>Document</a></code> has a <dfn id=render-blocking-element-set>render-blocking element set</dfn>, a <a id=render-blocking-mechanism:set href=https://infra.spec.whatwg.org/#ordered-set data-x-internal=set>set</a> of elements, initially the empty set. A <code id=render-blocking-mechanism:document-2><a href=#document>Document</a></code> <var>document</var> <dfn id=allows-adding-render-blocking-elements>allows adding render-blocking elements</dfn> if <var>document</var>'s <a href=https://dom.spec.whatwg.org/#concept-document-content-type id=render-blocking-mechanism:concept-document-content-type data-x-internal=concept-document-content-type>content type</a> is "<code id=render-blocking-mechanism:text/html><a href=iana.html#text/html>text/html</a></code>" and <a href=#the-body-element-2 id=render-blocking-mechanism:the-body-element-2>the body element</a> of <var>document</var> is null. A <code id=render-blocking-mechanism:document-3><a href=#document>Document</a></code> <var>document</var> is <dfn id=render-blocked>render-blocked</dfn> if both of the following are true: <ul><li><var>document</var>'s <a href=#render-blocking-element-set id=render-blocking-mechanism:render-blocking-element-set>render-blocking element set</a> is non-empty, or <var>document</var> <a href=#allows-adding-render-blocking-elements id=render-blocking-mechanism:allows-adding-render-blocking-elements>allows adding render-blocking elements</a>. <li>The <a id=render-blocking-mechanism:current-high-resolution-time href=https://w3c.github.io/hr-time/#dfn-current-high-resolution-time data-x-internal=current-high-resolution-time>current high resolution time</a> given <var>document</var>'s <a id=render-blocking-mechanism:concept-relevant-global href=webappapis.html#concept-relevant-global>relevant global object</a> has not exceeded an <a id=render-blocking-mechanism:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> timeout value. </ul> An element <var>el</var> is <dfn id=render-blocking>render-blocking</dfn> if <var>el</var>'s <a id=render-blocking-mechanism:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> <var>document</var> is <a href=#render-blocked id=render-blocking-mechanism:render-blocked>render-blocked</a>, and <var>el</var> is in <var>document</var>'s <a href=#render-blocking-element-set id=render-blocking-mechanism:render-blocking-element-set-2>render-blocking element set</a>. To <dfn id=block-rendering>block rendering</dfn> on an element <var>el</var>: <ol><li>Let <var>document</var> be <var>el</var>'s <a id=render-blocking-mechanism:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>. <li>If <var>document</var> <a href=#allows-adding-render-blocking-elements id=render-blocking-mechanism:allows-adding-render-blocking-elements-2>allows adding render-blocking elements</a>, then <a href=https://infra.spec.whatwg.org/#set-append id=render-blocking-mechanism:set-append data-x-internal=set-append>append</a> <var>el</var> to <var>document</var>'s <a href=#render-blocking-element-set id=render-blocking-mechanism:render-blocking-element-set-3>render-blocking element set</a>. </ol> To <dfn id=unblock-rendering>unblock rendering</dfn> on an element <var>el</var>: <ol><li>Let <var>document</var> be <var>el</var>'s <a id=render-blocking-mechanism:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>. <li><a href=https://infra.spec.whatwg.org/#list-remove id=render-blocking-mechanism:list-remove data-x-internal=list-remove>Remove</a> <var>el</var> from <var>document</var>'s <a href=#render-blocking-element-set id=render-blocking-mechanism:render-blocking-element-set-4>render-blocking element set</a>. </ol> Whenever a <a href=#render-blocking id=render-blocking-mechanism:render-blocking>render-blocking</a> element <var>el</var> <a id=render-blocking-mechanism:becomes-browsing-context-disconnected href=infrastructure.html#becomes-browsing-context-disconnected>becomes browsing-context disconnected</a>, or <var>el</var>'s <a id=render-blocking-mechanism:blocking-attribute href=urls-and-fetching.html#blocking-attribute>blocking attribute</a>'s value is changed so that <var>el</var> is no longer <a id=render-blocking-mechanism:potentially-render-blocking href=urls-and-fetching.html#potentially-render-blocking>potentially render-blocking</a>, then <a href=#unblock-rendering id=render-blocking-mechanism:unblock-rendering>unblock rendering</a> on <var>el</var>. <h4 id=dom-tree-accessors>3.1.6 <dfn>DOM tree accessors</dfn><a href=#dom-tree-accessors class=self-link></a></h4> <dfn id=the-html-element-2>The <code>html</code> element</dfn> of a document is its <a id=dom-tree-accessors:document-element href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a>, if it's an <code id=dom-tree-accessors:the-html-element><a href=semantics.html#the-html-element>html</a></code> element, and null otherwise. <hr> <dl class=domintro><dt><code><var>document</var>.<a href=#dom-document-head id=dom-document-head-dev>head</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/head title="The head read-only property of the Document interface returns the <head> element of the current document.">Document/head</a>Support in all current engines.<div class=support>Firefox4+Safari5+Chrome4+<hr>Opera11+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+</div></div></div><dd>Returns <a href=#the-head-element-2 id=dom-tree-accessors:the-head-element-2>the <code>head</code> element</a>.</dl> <dfn id=the-head-element-2>The <code>head</code> element</dfn> of a document is the first <code id=dom-tree-accessors:the-head-element><a href=semantics.html#the-head-element>head</a></code> element that is a child of <a href=#the-html-element-2 id=dom-tree-accessors:the-html-element-2>the <code>html</code> element</a>, if there is one, or null otherwise. The <dfn data-dfn-for=Document id=dom-document-head data-dfn-type=attribute><code>head</code></dfn> attribute, on getting, must return <a href=#the-head-element-2 id=dom-tree-accessors:the-head-element-2-2>the <code>head</code> element</a> of the document (a <code id=dom-tree-accessors:the-head-element-3><a href=semantics.html#the-head-element>head</a></code> element or null). <hr> <dl class=domintro><dt><code><var>document</var>.<a href=#document.title id=dom-document-title-dev>title</a> [ = <var>value</var> ]</code><dd> Returns the document's title, as given by <a href=#the-title-element-2 id=dom-tree-accessors:the-title-element-2>the <code>title</code> element</a> for HTML and as given by the <a id=dom-tree-accessors:svg-title href=https://svgwg.org/svg2-draft/struct.html#TitleElement data-x-internal=svg-title>SVG <code>title</code></a> 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. </dl> <dfn id=the-title-element-2>The <code>title</code> element</dfn> of a document is the first <code id=dom-tree-accessors:the-title-element><a href=semantics.html#the-title-element>title</a></code> element in the document (in <a id=dom-tree-accessors:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>), if there is one, or null otherwise. <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/title title="The document.title property gets or sets the current title of the document. When present, it defaults to the value of the <title>.">Document/title</a>Support in all current engines.<div class=support>Firefox1+Safari1+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer4+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div>The <dfn data-dfn-for=Document id=document.title data-dfn-type=attribute><code>title</code></dfn> attribute must, on getting, run the following algorithm: <ol><li>If the <a id=dom-tree-accessors:document-element-2 href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a> is an <a id=dom-tree-accessors:svg-svg href=https://svgwg.org/svg2-draft/struct.html#SVGElement data-x-internal=svg-svg>SVG <code>svg</code></a> element, then let <var>value</var> be the <a id=dom-tree-accessors:child-text-content href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text content</a> of the first <a id=dom-tree-accessors:svg-title-2 href=https://svgwg.org/svg2-draft/struct.html#TitleElement data-x-internal=svg-title>SVG <code>title</code></a> element that is a child of the <a id=dom-tree-accessors:document-element-3 href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a>.<li>Otherwise, let <var>value</var> be the <a id=dom-tree-accessors:child-text-content-2 href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text content</a> of <a href=#the-title-element-2 id=dom-tree-accessors:the-title-element-2-2>the <code>title</code> element</a>, or the empty string if <a href=#the-title-element-2 id=dom-tree-accessors:the-title-element-2-3>the <code>title</code> element</a> is null.<li><a id=dom-tree-accessors:strip-and-collapse-ascii-whitespace href=https://infra.spec.whatwg.org/#strip-and-collapse-ascii-whitespace data-x-internal=strip-and-collapse-ascii-whitespace>Strip and collapse ASCII whitespace</a> in <var>value</var>.<li>Return <var>value</var>.</ol> On setting, the steps corresponding to the first matching condition in the following list must be run: <dl class=switch><dt>If the <a id=dom-tree-accessors:document-element-4 href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a> is an <a id=dom-tree-accessors:svg-svg-2 href=https://svgwg.org/svg2-draft/struct.html#SVGElement data-x-internal=svg-svg>SVG <code>svg</code></a> element<dd> <ol><li>If there is an <a id=dom-tree-accessors:svg-title-3 href=https://svgwg.org/svg2-draft/struct.html#TitleElement data-x-internal=svg-title>SVG <code>title</code></a> element that is a child of the <a id=dom-tree-accessors:document-element-5 href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a>, let <var>element</var> be the first such element.<li> Otherwise: <ol><li>Let <var>element</var> be the result of <a href=https://dom.spec.whatwg.org/#concept-create-element id=dom-tree-accessors:create-an-element data-x-internal=create-an-element>creating an element</a> given the <a id=dom-tree-accessors:document-element-6 href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a>'s <a id=dom-tree-accessors:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>, <code id=dom-tree-accessors:svg-title-4><a data-x-internal=svg-title href=https://svgwg.org/svg2-draft/struct.html#TitleElement>title</a></code>, and the <a id=dom-tree-accessors:svg-namespace href=https://infra.spec.whatwg.org/#svg-namespace data-x-internal=svg-namespace>SVG namespace</a>. <li>Insert <var>element</var> as the <a id=dom-tree-accessors:first-child href=https://dom.spec.whatwg.org/#concept-tree-first-child data-x-internal=first-child>first child</a> of the <a id=dom-tree-accessors:document-element-7 href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a>.</ol> <li><a id=dom-tree-accessors:string-replace-all href=https://dom.spec.whatwg.org/#string-replace-all data-x-internal=string-replace-all>String replace all</a> with the given value within <var>element</var>.</ol> <dt>If the <a id=dom-tree-accessors:document-element-8 href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a> is in the <a id=dom-tree-accessors:html-namespace-2 href=https://infra.spec.whatwg.org/#html-namespace data-x-internal=html-namespace-2>HTML namespace</a><dd> <ol><li>If <a href=#the-title-element-2 id=dom-tree-accessors:the-title-element-2-4>the <code>title</code> element</a> is null and <a href=#the-head-element-2 id=dom-tree-accessors:the-head-element-2-3>the <code>head</code> element</a> is null, then return.<li>If <a href=#the-title-element-2 id=dom-tree-accessors:the-title-element-2-5>the <code>title</code> element</a> is non-null, let <var>element</var> be <a href=#the-title-element-2 id=dom-tree-accessors:the-title-element-2-6>the <code>title</code> element</a>.<li> Otherwise: <ol><li>Let <var>element</var> be the result of <a href=https://dom.spec.whatwg.org/#concept-create-element id=dom-tree-accessors:create-an-element-2 data-x-internal=create-an-element>creating an element</a> given the <a id=dom-tree-accessors:document-element-9 href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a>'s <a id=dom-tree-accessors:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>, <code id=dom-tree-accessors:the-title-element-3><a href=semantics.html#the-title-element>title</a></code>, and the <a id=dom-tree-accessors:html-namespace-2-2 href=https://infra.spec.whatwg.org/#html-namespace data-x-internal=html-namespace-2>HTML namespace</a>. <li><a href=https://dom.spec.whatwg.org/#concept-node-append id=dom-tree-accessors:concept-node-append data-x-internal=concept-node-append>Append</a> <var>element</var> to <a href=#the-head-element-2 id=dom-tree-accessors:the-head-element-2-4>the <code>head</code> element</a>.</ol> <li><a id=dom-tree-accessors:string-replace-all-2 href=https://dom.spec.whatwg.org/#string-replace-all data-x-internal=string-replace-all>String replace all</a> with the given value within <var>element</var>.</ol> <dt>Otherwise<dd> Do nothing. </dl> <hr> <dl class=domintro><dt><code><var>document</var>.<a href=#dom-document-body id=dom-document-body-dev>body</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/body title="The Document.body property represents the <body> or <frameset> node of the current document, or null if no such element exists.">Document/body</a>Support in all current engines.<div class=support>Firefox60+Safari1+Chrome1+<hr>Opera9.6+Edge79+<hr>Edge (Legacy)12+Internet Explorer4+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+</div></div></div><dd> Returns <a href=#the-body-element-2 id=dom-tree-accessors:the-body-element-2>the body element</a>. Can be set, to replace <a href=#the-body-element-2 id=dom-tree-accessors:the-body-element-2-2>the body element</a>. If the new value is not a <code id=dom-tree-accessors:the-body-element><a href=sections.html#the-body-element>body</a></code> or <code id=dom-tree-accessors:frameset><a href=obsolete.html#frameset>frameset</a></code> element, this will throw a <a id=dom-tree-accessors:hierarchyrequesterror href=https://webidl.spec.whatwg.org/#hierarchyrequesterror data-x-internal=hierarchyrequesterror>"<code>HierarchyRequestError</code>"</a> <code id=dom-tree-accessors:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>. </dl> <dfn id=the-body-element-2 data-export="">The body element</dfn> of a document is the first of <a href=#the-html-element-2 id=dom-tree-accessors:the-html-element-2-2>the <code>html</code> element</a>'s children that is either a <code id=dom-tree-accessors:the-body-element-3><a href=sections.html#the-body-element>body</a></code> element or a <code id=dom-tree-accessors:frameset-2><a href=obsolete.html#frameset>frameset</a></code> element, or null if there is no such element. The <dfn data-dfn-for=Document id=dom-document-body data-dfn-type=attribute><code>body</code></dfn> attribute, on getting, must return <a href=#the-body-element-2 id=dom-tree-accessors:the-body-element-2-3>the body element</a> of the document (either a <code id=dom-tree-accessors:the-body-element-4><a href=sections.html#the-body-element>body</a></code> element, a <code id=dom-tree-accessors:frameset-3><a href=obsolete.html#frameset>frameset</a></code> element, or null). On setting, the following algorithm must be run: <ol><li>If the new value is not a <code id=dom-tree-accessors:the-body-element-5><a href=sections.html#the-body-element>body</a></code> or <code id=dom-tree-accessors:frameset-4><a href=obsolete.html#frameset>frameset</a></code> element, then throw a <a id=dom-tree-accessors:hierarchyrequesterror-2 href=https://webidl.spec.whatwg.org/#hierarchyrequesterror data-x-internal=hierarchyrequesterror>"<code>HierarchyRequestError</code>"</a> <code id=dom-tree-accessors:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li>Otherwise, if the new value is the same as <a href=#the-body-element-2 id=dom-tree-accessors:the-body-element-2-4>the body element</a>, return.<li>Otherwise, if <a href=#the-body-element-2 id=dom-tree-accessors:the-body-element-2-5>the body element</a> is not null, then <a href=https://dom.spec.whatwg.org/#concept-node-replace id=dom-tree-accessors:concept-node-replace data-x-internal=concept-node-replace>replace</a> <a href=#the-body-element-2 id=dom-tree-accessors:the-body-element-2-6>the body element</a> with the new value within <a href=#the-body-element-2 id=dom-tree-accessors:the-body-element-2-7>the body element</a>'s parent and return.<li>Otherwise, if there is no <a id=dom-tree-accessors:document-element-10 href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a>, throw a <a id=dom-tree-accessors:hierarchyrequesterror-3 href=https://webidl.spec.whatwg.org/#hierarchyrequesterror data-x-internal=hierarchyrequesterror>"<code>HierarchyRequestError</code>"</a> <code id=dom-tree-accessors:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li>Otherwise, <a href=#the-body-element-2 id=dom-tree-accessors:the-body-element-2-8>the body element</a> is null, but there's a <a id=dom-tree-accessors:document-element-11 href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a>. <a href=https://dom.spec.whatwg.org/#concept-node-append id=dom-tree-accessors:concept-node-append-2 data-x-internal=concept-node-append>Append</a> the new value to the <a id=dom-tree-accessors:document-element-12 href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a>.</ol> The value returned by the <code id=dom-tree-accessors:dom-document-body><a href=#dom-document-body>body</a></code> getter is not always the one passed to the setter. <div class=example> In this example, the setter successfully inserts a <code id=dom-tree-accessors:the-body-element-6><a href=sections.html#the-body-element>body</a></code> element (though this is non-conforming since SVG does not allow a <code id=dom-tree-accessors:the-body-element-7><a href=sections.html#the-body-element>body</a></code> as child of <a id=dom-tree-accessors:svg-svg-3 href=https://svgwg.org/svg2-draft/struct.html#SVGElement data-x-internal=svg-svg>SVG <code>svg</code></a>). However the getter will return null because the document element is not <code id=dom-tree-accessors:the-html-element-3><a href=semantics.html#the-html-element>html</a></code>. <pre><code class='html'><c- p><</c-><c- f>svg</c-> <c- e>xmlns</c-><c- o>=</c-><c- s>"http://www.w3.org/2000/svg"</c-><c- p>></c-> <c- p><</c-><c- f>script</c-><c- p>></c-> document<c- p>.</c->body <c- o>=</c-> document<c- p>.</c->createElementNS<c- p>(</c-><c- u>"http://www.w3.org/1999/xhtml"</c-><c- p>,</c-> <c- u>"body"</c-><c- p>);</c-> console<c- p>.</c->assert<c- p>(</c->document<c- p>.</c->body <c- o>===</c-> <c- kc>null</c-><c- p>);</c-> <c- p></</c-><c- f>script</c-><c- p>></c-> <c- p></</c-><c- f>svg</c-><c- p>></c-></code></pre> </div> <hr> <dl class=domintro><dt><code><var>document</var>.<a href=#dom-document-images id=dom-document-images-dev>images</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/images title="The images read-only property of the Document interface returns a collection of the images in the current HTML document.">Document/images</a>Support in all current engines.<div class=support>Firefox1+Safari1+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer4+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div><dd> Returns an <code id=dom-tree-accessors:htmlcollection><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> of the <code id=dom-tree-accessors:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> elements in the <code id=dom-tree-accessors:document><a href=#document>Document</a></code>. <dt><code><var>document</var>.<a href=#dom-document-embeds id=dom-document-embeds-dev>embeds</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/embeds title="The embeds read-only property of the Document interface returns a list of the embedded <embed> elements within the current document.">Document/embeds</a>Support in all current engines.<div class=support>Firefox1+Safari10.1+Chrome64+<hr>Opera51+Edge79+<hr>Edge (Legacy)12+Internet Explorer4+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+</div></div></div><dt><code><var>document</var>.<a href=#dom-document-plugins id=dom-document-plugins-dev>plugins</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/plugins title="The plugins read-only property of the Document interface returns an HTMLCollection object containing one or more HTMLEmbedElements representing the <embed> elements in the current document.">Document/plugins</a>Support in all current engines.<div class=support>Firefox1+Safari10.1+Chrome64+<hr>Opera51+Edge79+<hr>Edge (Legacy)12+Internet Explorer4+<hr>Firefox Android?Safari iOS10.3+Chrome Android?WebView Android?Samsung Internet?Opera Android47+</div></div></div><dd> Returns an <code id=dom-tree-accessors:htmlcollection-2><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> of the <code id=dom-tree-accessors:the-embed-element><a href=iframe-embed-object.html#the-embed-element>embed</a></code> elements in the <code id=dom-tree-accessors:document-2><a href=#document>Document</a></code>. <dt><code><var>document</var>.<a href=#dom-document-links id=dom-document-links-dev>links</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/links title="The links read-only property of the Document interface returns a collection of all <area> elements and <a> elements in a document with a value for the href attribute.">Document/links</a>Support in all current engines.<div class=support>Firefox1+Safari1+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer4+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div><dd> Returns an <code id=dom-tree-accessors:htmlcollection-3><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> of the <code id=dom-tree-accessors:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=dom-tree-accessors:the-area-element><a href=image-maps.html#the-area-element>area</a></code> elements in the <code id=dom-tree-accessors:document-3><a href=#document>Document</a></code> that have <code id=dom-tree-accessors:attr-hyperlink-href><a href=links.html#attr-hyperlink-href>href</a></code> attributes. <dt><code><var>document</var>.<a href=#dom-document-forms id=dom-document-forms-dev>forms</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/forms title="The forms read-only property of the Document interface returns an HTMLCollection listing all the <form> elements contained in the document.">Document/forms</a>Support in all current engines.<div class=support>Firefox1+Safari1+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer4+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div><dd> Returns an <code id=dom-tree-accessors:htmlcollection-4><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> of the <code id=dom-tree-accessors:the-form-element><a href=forms.html#the-form-element>form</a></code> elements in the <code id=dom-tree-accessors:document-4><a href=#document>Document</a></code>. <dt><code><var>document</var>.<a href=#dom-document-scripts id=dom-document-scripts-dev>scripts</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/scripts title="The scripts property of the Document interface returns a list of the <script> elements in the document. The returned object is an HTMLCollection.">Document/scripts</a>Support in all current engines.<div class=support>Firefox9+Safari3+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer4+<hr>Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div><dd> Returns an <code id=dom-tree-accessors:htmlcollection-5><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> of the <code id=dom-tree-accessors:the-script-element><a href=scripting.html#the-script-element>script</a></code> elements in the <code id=dom-tree-accessors:document-5><a href=#document>Document</a></code>. </dl> The <dfn data-dfn-for=Document id=dom-document-images data-dfn-type=attribute><code>images</code></dfn> attribute must return an <code id=dom-tree-accessors:htmlcollection-6><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> rooted at the <code id=dom-tree-accessors:document-6><a href=#document>Document</a></code> node, whose filter matches only <code id=dom-tree-accessors:the-img-element-2><a href=embedded-content.html#the-img-element>img</a></code> elements. The <dfn data-dfn-for=Document id=dom-document-embeds data-dfn-type=attribute><code>embeds</code></dfn> attribute must return an <code id=dom-tree-accessors:htmlcollection-7><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> rooted at the <code id=dom-tree-accessors:document-7><a href=#document>Document</a></code> node, whose filter matches only <code id=dom-tree-accessors:the-embed-element-2><a href=iframe-embed-object.html#the-embed-element>embed</a></code> elements. The <dfn data-dfn-for=Document id=dom-document-plugins data-dfn-type=attribute><code>plugins</code></dfn> attribute must return the same object as that returned by the <code id=dom-tree-accessors:dom-document-embeds><a href=#dom-document-embeds>embeds</a></code> attribute. The <dfn data-dfn-for=Document id=dom-document-links data-dfn-type=attribute><code>links</code></dfn> attribute must return an <code id=dom-tree-accessors:htmlcollection-8><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> rooted at the <code id=dom-tree-accessors:document-8><a href=#document>Document</a></code> node, whose filter matches only <code id=dom-tree-accessors:the-a-element-2><a href=text-level-semantics.html#the-a-element>a</a></code> elements with <code id=dom-tree-accessors:attr-hyperlink-href-2><a href=links.html#attr-hyperlink-href>href</a></code> attributes and <code id=dom-tree-accessors:the-area-element-2><a href=image-maps.html#the-area-element>area</a></code> elements with <code id=dom-tree-accessors:attr-hyperlink-href-3><a href=links.html#attr-hyperlink-href>href</a></code> attributes. The <dfn data-dfn-for=Document id=dom-document-forms data-dfn-type=attribute><code>forms</code></dfn> attribute must return an <code id=dom-tree-accessors:htmlcollection-9><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> rooted at the <code id=dom-tree-accessors:document-9><a href=#document>Document</a></code> node, whose filter matches only <code id=dom-tree-accessors:the-form-element-2><a href=forms.html#the-form-element>form</a></code> elements. The <dfn data-dfn-for=Document id=dom-document-scripts data-dfn-type=attribute><code>scripts</code></dfn> attribute must return an <code id=dom-tree-accessors:htmlcollection-10><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> rooted at the <code id=dom-tree-accessors:document-10><a href=#document>Document</a></code> node, whose filter matches only <code id=dom-tree-accessors:the-script-element-2><a href=scripting.html#the-script-element>script</a></code> elements. <hr> <dl class=domintro><dt><code><var>collection</var> = <var>document</var>.<a href=#dom-document-getelementsbyname id=dom-document-getelementsbyname-dev>getElementsByName</a>(<var>name</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName title="The getElementsByName() method of the Document object returns a NodeList Collection of elements with a given name attribute in the document.">Document/getElementsByName</a>Support in all current engines.<div class=support>Firefox1+Safari1+Chrome1+<hr>Opera5+Edge79+<hr>Edge (Legacy)12+Internet Explorer5+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+</div></div></div><dd>Returns a <code id=dom-tree-accessors:nodelist><a data-x-internal=nodelist href=https://dom.spec.whatwg.org/#interface-nodelist>NodeList</a></code> of elements in the <code id=dom-tree-accessors:document-11><a href=#document>Document</a></code> that have a <code>name</code> attribute with the value <var>name</var>.</dl> The <dfn data-dfn-for=Document id=dom-document-getelementsbyname data-dfn-type=method><code>getElementsByName(<var>elementName</var>)</code></dfn> method steps are to return a <a id=dom-tree-accessors:live href=infrastructure.html#live>live</a> <code id=dom-tree-accessors:nodelist-2><a data-x-internal=nodelist href=https://dom.spec.whatwg.org/#interface-nodelist>NodeList</a></code> containing all the <a id=dom-tree-accessors:html-elements href=infrastructure.html#html-elements>HTML elements</a> in that document that have a <code>name</code> attribute whose value is <a id=dom-tree-accessors:identical-to href=https://infra.spec.whatwg.org/#string-is data-x-internal=identical-to>identical to</a> the <var>elementName</var> argument, in <a id=dom-tree-accessors:tree-order-2 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>. When the method is invoked on a <code id=dom-tree-accessors:document-12><a href=#document>Document</a></code> 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 <code id=dom-tree-accessors:nodelist-3><a data-x-internal=nodelist href=https://dom.spec.whatwg.org/#interface-nodelist>NodeList</a></code> object must be returned. <hr> <dl class=domintro><dt><code><var>document</var>.<a href=#dom-document-currentscript id=dom-document-currentscript-dev>currentScript</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/currentScript title="The Document.currentScript property returns the <script> element whose script is currently being processed and isn't a JavaScript module. (For modules use import.meta instead.)">Document/currentScript</a>Support in all current engines.<div class=support>Firefox4+Safari8+Chrome29+<hr>Opera?Edge79+<hr>Edge (Legacy)12+Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div><dd> Returns the <code id=dom-tree-accessors:the-script-element-3><a href=scripting.html#the-script-element>script</a></code> element, or the <a id=dom-tree-accessors:svg-script href=https://svgwg.org/svg2-draft/interact.html#ScriptElement data-x-internal=svg-script>SVG <code>script</code></a> element, that is currently executing, as long as the element represents a <a id=dom-tree-accessors:classic-script href=webappapis.html#classic-script>classic script</a>. 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 <code id=dom-tree-accessors:document-13><a href=#document>Document</a></code> is not currently executing a <code id=dom-tree-accessors:the-script-element-4><a href=scripting.html#the-script-element>script</a></code> or <a id=dom-tree-accessors:svg-script-2 href=https://svgwg.org/svg2-draft/interact.html#ScriptElement data-x-internal=svg-script>SVG <code>script</code></a> element (e.g., because the running script is an event handler, or a timeout), or if the currently executing <code id=dom-tree-accessors:the-script-element-5><a href=scripting.html#the-script-element>script</a></code> or <a id=dom-tree-accessors:svg-script-3 href=https://svgwg.org/svg2-draft/interact.html#ScriptElement data-x-internal=svg-script>SVG <code>script</code></a> element represents a <a id=dom-tree-accessors:module-script href=webappapis.html#module-script>module script</a>. </dl> The <dfn data-dfn-for=Document id=dom-document-currentscript data-dfn-type=attribute><code>currentScript</code></dfn> attribute, on getting, must return the value to which it was most recently set. When the <code id=dom-tree-accessors:document-14><a href=#document>Document</a></code> is created, the <code id=dom-tree-accessors:dom-document-currentscript><a href=#dom-document-currentscript>currentScript</a></code> must be initialized to null. This API has fallen out of favor in the implementer and standards community, as it globally exposes <code id=dom-tree-accessors:the-script-element-6><a href=scripting.html#the-script-element>script</a></code> or <a id=dom-tree-accessors:svg-script-4 href=https://svgwg.org/svg2-draft/interact.html#ScriptElement data-x-internal=svg-script>SVG <code>script</code></a> elements. As such, it is not available in newer contexts, such as when running <a href=webappapis.html#module-script id=dom-tree-accessors:module-script-2>module scripts</a> or when running scripts in a <a id=dom-tree-accessors:shadow-tree href=https://dom.spec.whatwg.org/#concept-shadow-tree data-x-internal=shadow-tree>shadow tree</a>. We are looking into creating a new solution for identifying the running script in such contexts, which does not make it globally available: see <a href=https://github.com/whatwg/html/issues/1013>issue #1013</a>. <hr> The <code id=dom-tree-accessors:document-15><a href=#document>Document</a></code> interface <a href=https://webidl.spec.whatwg.org/#dfn-support-named-properties id=dom-tree-accessors:support-named-properties data-x-internal=support-named-properties>supports named properties</a>. The <a id=dom-tree-accessors:supported-property-names href=https://webidl.spec.whatwg.org/#dfn-supported-property-names data-x-internal=supported-property-names>supported property names</a> of a <code id=dom-tree-accessors:document-16><a href=#document>Document</a></code> object <var>document</var> at any moment consist of the following, in <a id=dom-tree-accessors:tree-order-3 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a> according to the element that contributed them, ignoring later duplicates, and with values from <code id=dom-tree-accessors:the-id-attribute><a href=#the-id-attribute>id</a></code> attributes coming before values from <code>name</code> attributes when the same element contributes both: <ul><li>the value of the <code>name</code> content attribute for all <a href=#exposed id=dom-tree-accessors:exposed>exposed</a> <code id=dom-tree-accessors:the-embed-element-3><a href=iframe-embed-object.html#the-embed-element>embed</a></code>, <code id=dom-tree-accessors:the-form-element-3><a href=forms.html#the-form-element>form</a></code>, <code id=dom-tree-accessors:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>, <code id=dom-tree-accessors:the-img-element-3><a href=embedded-content.html#the-img-element>img</a></code>, and <a href=#exposed id=dom-tree-accessors:exposed-2>exposed</a> <code id=dom-tree-accessors:the-object-element><a href=iframe-embed-object.html#the-object-element>object</a></code> elements that have a non-empty <code>name</code> content attribute and are <a id=dom-tree-accessors:in-a-document-tree href=https://dom.spec.whatwg.org/#in-a-document-tree data-x-internal=in-a-document-tree>in a document tree</a> with <var>document</var> as their <a id=dom-tree-accessors:root href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a>;<li>the value of the <code id=dom-tree-accessors:the-id-attribute-2><a href=#the-id-attribute>id</a></code> content attribute for all <a href=#exposed id=dom-tree-accessors:exposed-3>exposed</a> <code id=dom-tree-accessors:the-object-element-2><a href=iframe-embed-object.html#the-object-element>object</a></code> elements that have a non-empty <code id=dom-tree-accessors:the-id-attribute-3><a href=#the-id-attribute>id</a></code> content attribute and are <a id=dom-tree-accessors:in-a-document-tree-2 href=https://dom.spec.whatwg.org/#in-a-document-tree data-x-internal=in-a-document-tree>in a document tree</a> with <var>document</var> as their <a id=dom-tree-accessors:root-2 href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a>; and<li>the value of the <code id=dom-tree-accessors:the-id-attribute-4><a href=#the-id-attribute>id</a></code> content attribute for all <code id=dom-tree-accessors:the-img-element-4><a href=embedded-content.html#the-img-element>img</a></code> elements that have both a non-empty <code id=dom-tree-accessors:the-id-attribute-5><a href=#the-id-attribute>id</a></code> content attribute and a non-empty <code>name</code> content attribute, and are <a id=dom-tree-accessors:in-a-document-tree-3 href=https://dom.spec.whatwg.org/#in-a-document-tree data-x-internal=in-a-document-tree>in a document tree</a> with <var>document</var> as their <a id=dom-tree-accessors:root-3 href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a>.</ul> To <a id=dom-tree-accessors:determine-the-value-of-a-named-property href=https://webidl.spec.whatwg.org/#dfn-determine-the-value-of-a-named-property data-x-internal=determine-the-value-of-a-named-property>determine the value of a named property</a> <var>name</var> for a <code id=dom-tree-accessors:document-17><a href=#document>Document</a></code>, the user agent must return the value obtained using the following steps: <ol><li> Let <var>elements</var> be the list of <a href=#dom-document-nameditem-filter id=dom-tree-accessors:dom-document-nameditem-filter>named elements</a> with the name <var>name</var> that are <a id=dom-tree-accessors:in-a-document-tree-4 href=https://dom.spec.whatwg.org/#in-a-document-tree data-x-internal=in-a-document-tree>in a document tree</a> with the <code id=dom-tree-accessors:document-18><a href=#document>Document</a></code> as their <a id=dom-tree-accessors:root-4 href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a>. There will be at least one such element, since the algorithm would otherwise not have been <a href=https://webidl.spec.whatwg.org/#LegacyPlatformObjectGetOwnProperty id=dom-tree-accessors:legacyplatformobjectgetownproperty data-x-internal=legacyplatformobjectgetownproperty>invoked by Web IDL</a>. <li>If <var>elements</var> has only one element, and that element is an <code id=dom-tree-accessors:the-iframe-element-2><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> element, and that <code id=dom-tree-accessors:the-iframe-element-3><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> element's <a id=dom-tree-accessors:content-navigable href=document-sequences.html#content-navigable>content navigable</a> is not null, then return the <a href=document-sequences.html#nav-wp id=dom-tree-accessors:nav-wp>active <code>WindowProxy</code></a> of the element's <a id=dom-tree-accessors:content-navigable-2 href=document-sequences.html#content-navigable>content navigable</a>.<li> Otherwise, if <var>elements</var> has only one element, return that element. <li> Otherwise, return an <code id=dom-tree-accessors:htmlcollection-11><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> rooted at the <code id=dom-tree-accessors:document-19><a href=#document>Document</a></code> node, whose filter matches only <a href=#dom-document-nameditem-filter id=dom-tree-accessors:dom-document-nameditem-filter-2>named elements</a> with the name <var>name</var>. </ol> <dfn id=dom-document-nameditem-filter>Named elements</dfn> with the name <var>name</var>, for the purposes of the above algorithm, are those that are either: <ul><li><a href=#exposed id=dom-tree-accessors:exposed-4>Exposed</a> <code id=dom-tree-accessors:the-embed-element-4><a href=iframe-embed-object.html#the-embed-element>embed</a></code>, <code id=dom-tree-accessors:the-form-element-4><a href=forms.html#the-form-element>form</a></code>, <code id=dom-tree-accessors:the-iframe-element-4><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>, <code id=dom-tree-accessors:the-img-element-5><a href=embedded-content.html#the-img-element>img</a></code>, or <a href=#exposed id=dom-tree-accessors:exposed-5>exposed</a> <code id=dom-tree-accessors:the-object-element-3><a href=iframe-embed-object.html#the-object-element>object</a></code> elements that have a <code>name</code> content attribute whose value is <var>name</var>, or<li><a href=#exposed id=dom-tree-accessors:exposed-6>Exposed</a> <code id=dom-tree-accessors:the-object-element-4><a href=iframe-embed-object.html#the-object-element>object</a></code> elements that have an <code id=dom-tree-accessors:the-id-attribute-6><a href=#the-id-attribute>id</a></code> content attribute whose value is <var>name</var>, or<li><code id=dom-tree-accessors:the-img-element-6><a href=embedded-content.html#the-img-element>img</a></code> elements that have an <code id=dom-tree-accessors:the-id-attribute-7><a href=#the-id-attribute>id</a></code> content attribute whose value is <var>name</var>, and that have a non-empty <code>name</code> content attribute present also.</ul> An <code id=dom-tree-accessors:the-embed-element-5><a href=iframe-embed-object.html#the-embed-element>embed</a></code> or <code id=dom-tree-accessors:the-object-element-5><a href=iframe-embed-object.html#the-object-element>object</a></code> element is said to be <dfn id=exposed>exposed</dfn> if it has no <a href=#exposed id=dom-tree-accessors:exposed-7>exposed</a> <code id=dom-tree-accessors:the-object-element-6><a href=iframe-embed-object.html#the-object-element>object</a></code> ancestor, and, for <code id=dom-tree-accessors:the-object-element-7><a href=iframe-embed-object.html#the-object-element>object</a></code> elements, is additionally either not showing its <a href=#fallback-content id=dom-tree-accessors:fallback-content>fallback content</a> or has no <code id=dom-tree-accessors:the-object-element-8><a href=iframe-embed-object.html#the-object-element>object</a></code> or <code id=dom-tree-accessors:the-embed-element-6><a href=iframe-embed-object.html#the-embed-element>embed</a></code> descendants. <hr> The <code id=dom-tree-accessors:dom-document-dir><a href=#dom-document-dir>dir</a></code> attribute on the <code id=dom-tree-accessors:document-20><a href=#document>Document</a></code> interface is defined along with the <code id=dom-tree-accessors:attr-dir><a href=#attr-dir>dir</a></code> content attribute. <h3 id=elements>3.2 Elements<a href=#elements class=self-link></a></h3> <h4 id=semantics-2>3.2.1 Semantics<a href=#semantics-2 class=self-link></a></h4> Elements, attributes, and attribute values in HTML are defined (by this specification) to have certain meanings (semantics). For example, the <code id=semantics-2:the-ol-element><a href=grouping-content.html#the-ol-element>ol</a></code> element represents an ordered list, and the <code id=semantics-2:attr-lang><a href=#attr-lang>lang</a></code> attribute represents the language of the content. These definitions allow HTML processors, such as web browsers or search engines, to present and use documents and applications in a wide variety of contexts that the author might not have considered. <div class=example> As a simple example, consider a web page written by an author who only considered desktop computer web browsers: <pre><code class='html'><c- cp><!DOCTYPE HTML></c-> <c- p><</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>"en"</c-><c- p>></c-> <c- p><</c-><c- f>head</c-><c- p>></c-> <c- p><</c-><c- f>title</c-><c- p>></c->My Page<c- p></</c-><c- f>title</c-><c- p>></c-> <c- p></</c-><c- f>head</c-><c- p>></c-> <c- p><</c-><c- f>body</c-><c- p>></c-> <c- p><</c-><c- f>h1</c-><c- p>></c->Welcome to my page<c- p></</c-><c- f>h1</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c->I like cars and lorries and have a big Jeep!<c- p></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>h2</c-><c- p>></c->Where I live<c- p></</c-><c- f>h2</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c->I live in a small hut on a mountain!<c- p></</c-><c- f>p</c-><c- p>></c-> <c- p></</c-><c- f>body</c-><c- p>></c-> <c- p></</c-><c- f>html</c-><c- p>></c-></code></pre> Because HTML conveys meaning, rather than presentation, the same page can also be used by a small browser on a mobile phone, without any change to the page. Instead of headings being in large letters as on the desktop, for example, the browser on the mobile phone might use the same size text for the whole page, but with the headings in bold. But it goes further than just differences in screen size: the same page could equally be used by a blind user using a browser based around speech synthesis, which instead of displaying the page on a screen, reads the page to the user, e.g. using headphones. Instead of large text for the headings, the speech browser might use a different volume or a slower voice. That's not all, either. Since the browsers know which parts of the page are the headings, they can create a document outline that the user can use to quickly navigate around the document, using keys for "jump to next heading" or "jump to previous heading". Such features are especially common with speech browsers, where users would otherwise find quickly navigating a page quite difficult. Even beyond browsers, software can make use of this information. Search engines can use the headings to more effectively index a page, or to provide quick links to subsections of the page from their results. Tools can use the headings to create a table of contents (that is in fact how this very specification's table of contents is generated). This example has focused on headings, but the same principle applies to all of the semantics in HTML. </div> Authors must not use elements, attributes, or attribute values for purposes other than their appropriate intended semantic purpose, as doing so prevents software from correctly processing the page. <div class=example> For example, the following snippet, intended to represent the heading of a corporate site, is non-conforming because the second line is not intended to be a heading of a subsection, but merely a subheading or subtitle (a subordinate heading for the same section). <pre class=bad><code class='html'><c- p><</c-><c- f>body</c-><c- p>></c-> <c- p><</c-><c- f>h1</c-><c- p>></c->ACME Corporation<c- p></</c-><c- f>h1</c-><c- p>></c-> <c- p><</c-><c- f>h2</c-><c- p>></c->The leaders in arbitrary fast delivery since 1920<c- p></</c-><c- f>h2</c-><c- p>></c-> ...</code></pre> The <code id=semantics-2:the-hgroup-element><a href=sections.html#the-hgroup-element>hgroup</a></code> element can be used for these kinds of situations: <pre><code class='html'><c- p><</c-><c- f>body</c-><c- p>></c-> <c- p><</c-><c- f>hgroup</c-><c- p>></c-> <c- p><</c-><c- f>h1</c-><c- p>></c->ACME Corporation<c- p></</c-><c- f>h1</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c->The leaders in arbitrary fast delivery since 1920<c- p></</c-><c- f>p</c-><c- p>></c-> <c- p></</c-><c- f>hgroup</c-><c- p>></c-> ...</code></pre> </div> <div class=example> The document in this next example is similarly non-conforming, despite being syntactically correct, because the data placed in the cells is clearly not tabular data, and the <code id=semantics-2:the-cite-element><a href=text-level-semantics.html#the-cite-element>cite</a></code> element mis-used: <pre lang=en-GB class=bad><code class='html'><c- cp><!DOCTYPE HTML></c-> <c- p><</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>"en-GB"</c-><c- p>></c-> <c- p><</c-><c- f>head</c-><c- p>></c-> <c- p><</c-><c- f>title</c-><c- p>></c-> Demonstration <c- p></</c-><c- f>title</c-><c- p>></c-> <c- p></</c-><c- f>head</c-><c- p>></c-> <c- p><</c-><c- f>body</c-><c- p>></c-> <c- p><</c-><c- f>table</c-><c- p>></c-> <c- p><</c-><c- f>tr</c-><c- p>></c-> <c- p><</c-><c- f>td</c-><c- p>></c-> My favourite animal is the cat. <c- p></</c-><c- f>td</c-><c- p>></c-> <c- p></</c-><c- f>tr</c-><c- p>></c-> <c- p><</c-><c- f>tr</c-><c- p>></c-> <c- p><</c-><c- f>td</c-><c- p>></c-> —<c- p><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>"https://example.org/~ernest/"</c-><c- p>><</c-><c- f>cite</c-><c- p>></c->Ernest<c- p></</c-><c- f>cite</c-><c- p>></</c-><c- f>a</c-><c- p>></c->, in an essay from 1992 <c- p></</c-><c- f>td</c-><c- p>></c-> <c- p></</c-><c- f>tr</c-><c- p>></c-> <c- p></</c-><c- f>table</c-><c- p>></c-> <c- p></</c-><c- f>body</c-><c- p>></c-> <c- p></</c-><c- f>html</c-><c- p>></c-></code></pre> This would make software that relies on these semantics fail: for example, a speech browser that allowed a blind user to navigate tables in the document would report the quote above as a table, confusing the user; similarly, a tool that extracted titles of works from pages would extract "Ernest" as the title of a work, even though it's actually a person's name, not a title. A corrected version of this document might be: <pre lang=en-GB><code class='html'><c- cp><!DOCTYPE HTML></c-> <c- p><</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>"en-GB"</c-><c- p>></c-> <c- p><</c-><c- f>head</c-><c- p>></c-> <c- p><</c-><c- f>title</c-><c- p>></c-> Demonstration <c- p></</c-><c- f>title</c-><c- p>></c-> <c- p></</c-><c- f>head</c-><c- p>></c-> <c- p><</c-><c- f>body</c-><c- p>></c-> <c- p><</c-><c- f>blockquote</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c-> My favourite animal is the cat. <c- p></</c-><c- f>p</c-><c- p>></c-> <c- p></</c-><c- f>blockquote</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c-> —<c- p><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>"https://example.org/~ernest/"</c-><c- p>></c->Ernest<c- p></</c-><c- f>a</c-><c- p>></c->, in an essay from 1992 <c- p></</c-><c- f>p</c-><c- p>></c-> <c- p></</c-><c- f>body</c-><c- p>></c-> <c- p></</c-><c- f>html</c-><c- p>></c-></code></pre> </div> Authors must not use elements, attributes, or attribute values that are not permitted by this specification or <a id=semantics-2:other-applicable-specifications href=infrastructure.html#other-applicable-specifications>other applicable specifications</a>, as doing so makes it significantly harder for the language to be extended in the future. <div class=example> In the next example, there is a non-conforming attribute value ("carpet") and a non-conforming attribute ("texture"), which is not permitted by this specification: <pre class=bad><code class='html'><c- p><</c-><c- f>label</c-><c- p>></c->Carpet: <c- p><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>"carpet"</c-> <c- e>name</c-><c- o>=</c-><c- s>"c"</c-> <c- e>texture</c-><c- o>=</c-><c- s>"deep pile"</c-><c- p>></</c-><c- f>label</c-><c- p>></c-></code></pre> Here would be an alternative and correct way to mark this up: <pre><code class='html'><c- p><</c-><c- f>label</c-><c- p>></c->Carpet: <c- p><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>"text"</c-> <c- e>class</c-><c- o>=</c-><c- s>"carpet"</c-> <c- e>name</c-><c- o>=</c-><c- s>"c"</c-> <c- e>data-texture</c-><c- o>=</c-><c- s>"deep pile"</c-><c- p>></</c-><c- f>label</c-><c- p>></c-></code></pre> </div> DOM nodes whose <a id=semantics-2:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=document-sequences.html#concept-document-bc id=semantics-2:concept-document-bc>browsing context</a> is null are exempt from all document conformance requirements other than the <a href=syntax.html#writing>HTML syntax</a> requirements and <a href=xhtml.html#writing-xhtml-documents>XML syntax</a> requirements. <div class=example> In particular, the <code id=semantics-2:the-template-element><a href=scripting.html#the-template-element>template</a></code> element's <a id=semantics-2:template-contents href=scripting.html#template-contents>template contents</a>'s <a id=semantics-2:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=document-sequences.html#concept-document-bc id=semantics-2:concept-document-bc-2>browsing context</a> is null. For example, the <a href=#concept-element-content-model id=semantics-2:concept-element-content-model>content model</a> requirements and attribute value microsyntax requirements do not apply to a <code id=semantics-2:the-template-element-2><a href=scripting.html#the-template-element>template</a></code> element's <a id=semantics-2:template-contents-2 href=scripting.html#template-contents>template contents</a>. In this example an <code id=semantics-2:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> element has attribute values that are placeholders that would be invalid outside a <code id=semantics-2:the-template-element-3><a href=scripting.html#the-template-element>template</a></code> element. <pre><code class='html'><c- p><</c-><c- f>template</c-><c- p>></c-> <c- p><</c-><c- f>article</c-><c- p>></c-> <c- p><</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>"{{src}}"</c-> <c- e>alt</c-><c- o>=</c-><c- s>"{{alt}}"</c-><c- p>></c-> <c- p><</c-><c- f>h1</c-><c- p>></</c-><c- f>h1</c-><c- p>></c-> <c- p></</c-><c- f>article</c-><c- p>></c-> <c- p></</c-><c- f>template</c-><c- p>></c-></code></pre> However, if the above markup were to omit the <code></h1></code> end tag, that would be a violation of the <a href=syntax.html#writing>HTML syntax</a>, and would thus be flagged as an error by conformance checkers. </div> Through scripting and using other mechanisms, the values of attributes, text, and indeed the entire structure of the document may change dynamically while a user agent is processing it. The semantics of a document at an instant in time are those represented by the state of the document at that instant in time, and the semantics of a document can therefore change over time. User agents must update their presentation of the document as this occurs. HTML has a <code id=semantics-2:the-progress-element><a href=form-elements.html#the-progress-element>progress</a></code> element that describes a progress bar. If its "value" attribute is dynamically updated by a script, the UA would update the rendering to show the progress changing. <h4 id=elements-in-the-dom>3.2.2 Elements in the DOM<a href=#elements-in-the-dom class=self-link></a></h4> The nodes representing <a id=elements-in-the-dom:html-elements href=infrastructure.html#html-elements>HTML elements</a> in the DOM must implement, and expose to scripts, the interfaces listed for them in the relevant sections of this specification. This includes <a id=elements-in-the-dom:html-elements-2 href=infrastructure.html#html-elements>HTML elements</a> in <a id=elements-in-the-dom:xml-documents href=https://dom.spec.whatwg.org/#xml-document data-x-internal=xml-documents>XML documents</a>, even when those documents are in another context (e.g. inside an XSLT transform). Elements in the DOM <dfn id=represents>represent</dfn> things; that is, they have intrinsic meaning, also known as semantics. For example, an <code id=elements-in-the-dom:the-ol-element><a href=grouping-content.html#the-ol-element>ol</a></code> element represents an ordered list. Elements can be <dfn id=referenced>referenced</dfn> (referred to) in some way, either explicitly or implicitly. One way that an element in the DOM can be explicitly referenced is by giving an <code id=elements-in-the-dom:the-id-attribute><a href=#the-id-attribute>id</a></code> attribute to the element, and then creating a <a id=elements-in-the-dom:hyperlink href=links.html#hyperlink>hyperlink</a> with that <code id=elements-in-the-dom:the-id-attribute-2><a href=#the-id-attribute>id</a></code> attribute's value as the <a href=browsing-the-web.html#navigate-fragid id=elements-in-the-dom:navigate-fragid>fragment</a> for the <a id=elements-in-the-dom:hyperlink-2 href=links.html#hyperlink>hyperlink</a>'s <code id=elements-in-the-dom:attr-hyperlink-href><a href=links.html#attr-hyperlink-href>href</a></code> attribute value. Hyperlinks are not necessary for a reference, however; any manner of referring to the element in question will suffice. <div class=example> Consider the following <code id=elements-in-the-dom:the-figure-element><a href=grouping-content.html#the-figure-element>figure</a></code> element, which is given an <code id=elements-in-the-dom:the-id-attribute-3><a href=#the-id-attribute>id</a></code> attribute: <pre><code class='html'><c- p><</c-><c- f>figure</c-> <c- e>id</c-><c- o>=</c-><c- s>"module-script-graph"</c-><c- p>></c-> <c- p><</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>"module-script-graph.svg"</c-> <c- e>alt</c-><c- o>=</c-><c- s>"Module A depends on module B, which depends</c-> <c- s> on modules C and D."</c-><c- p>></c-> <c- p><</c-><c- f>figcaption</c-><c- p>></c->Figure 27: a simple module graph<c- p></</c-><c- f>figcaption</c-><c- p>></c-> <c- p></</c-><c- f>figure</c-><c- p>></c-></code></pre> A <a id=elements-in-the-dom:hyperlink-3 href=links.html#hyperlink>hyperlink</a>-based <a href=#referenced id=elements-in-the-dom:referenced>reference</a> could be created using the <code id=elements-in-the-dom:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> element, like so: <pre><code class='html'>As we can see in <c- p><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>"#module-script-graph"</c-><c- p>></c->figure 27<c- p></</c-><c- f>a</c-><c- p>></c->, ...</code></pre> However, there are many other ways of <a href=#referenced id=elements-in-the-dom:referenced-2>referencing</a> the <code id=elements-in-the-dom:the-figure-element-2><a href=grouping-content.html#the-figure-element>figure</a></code> element, such as: <ul><li>"As depicted in the figure of modules A, B, C, and D..."<li>"In Figure 27..." (without a hyperlink)<li>"From the contents of the 'simple module graph' figure..."<li>"In the figure below..." (but <a href=grouping-content.html#figure-note-about-references>this is discouraged</a>)</ul> </div> The basic interface, from which all the <a id=elements-in-the-dom:html-elements-3 href=infrastructure.html#html-elements>HTML elements</a>' interfaces inherit, and which must be used by elements that have no additional requirements, is the <code id=elements-in-the-dom:htmlelement><a href=#htmlelement>HTMLElement</a></code> interface. <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement title="The HTMLElement interface represents any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.">HTMLElement</a>Support in all current engines.<div class=support>Firefox1+Safari1+Chrome1+<hr>Opera8+Edge79+<hr>Edge (Legacy)12+Internet Explorer5.5+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android1+Samsung Internet?Opera Android10.1+</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLUnknownElement title="The HTMLUnknownElement interface represents an invalid HTML element and derives from the HTMLElement interface, but without implementing any additional properties or methods.">HTMLUnknownElement</a>Support in all current engines.<div class=support>Firefox1+Safari6+Chrome15+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer9+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div><pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->] <c- b>interface</c-> <dfn id='htmlelement' data-dfn-type='interface'><c- g>HTMLElement</c-></dfn> : <a id='elements-in-the-dom:element' href='https://dom.spec.whatwg.org/#interface-element' data-x-internal='element'><c- n>Element</c-></a> { [<a href='#htmlconstructor' id='elements-in-the-dom:htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->(); // metadata attributes [<a id='elements-in-the-dom:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-title' id='elements-in-the-dom:dom-title'><c- g>title</c-></a>; [<a id='elements-in-the-dom:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-lang' id='elements-in-the-dom:dom-lang'><c- g>lang</c-></a>; [<a id='elements-in-the-dom:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-translate' id='elements-in-the-dom:dom-translate'><c- g>translate</c-></a>; [<a id='elements-in-the-dom:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-dir' id='elements-in-the-dom:dom-dir'><c- g>dir</c-></a>; // <a id='elements-in-the-dom:editing' href='interaction.html#editing'>user interaction</a> [<a id='elements-in-the-dom:cereactions-5' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> (<c- b>boolean</c-> <c- b>or</c-> <c- b>unrestricted</c-> <c- b>double</c-> <c- b>or</c-> <c- b>DOMString</c->)? <a href='interaction.html#dom-hidden' id='elements-in-the-dom:dom-hidden'><c- g>hidden</c-></a>; [<a id='elements-in-the-dom:cereactions-6' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <a href='interaction.html#dom-inert' id='elements-in-the-dom:dom-inert'><c- g>inert</c-></a>; <c- b>undefined</c-> <a href='interaction.html#dom-click' id='elements-in-the-dom:dom-click'><c- g>click</c-></a>(); [<a id='elements-in-the-dom:cereactions-7' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='interaction.html#dom-accesskey' id='elements-in-the-dom:dom-accesskey'><c- g>accessKey</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='interaction.html#dom-accesskeylabel' id='elements-in-the-dom:dom-accesskeylabel'><c- g>accessKeyLabel</c-></a>; [<a id='elements-in-the-dom:cereactions-8' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <a href='dnd.html#dom-draggable' id='elements-in-the-dom:dom-draggable'><c- g>draggable</c-></a>; [<a id='elements-in-the-dom:cereactions-9' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <a href='interaction.html#dom-spellcheck' id='elements-in-the-dom:dom-spellcheck'><c- g>spellcheck</c-></a>; [<a id='elements-in-the-dom:cereactions-10' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='interaction.html#dom-writingsuggestions' id='elements-in-the-dom:dom-writingsuggestions'><c- g>writingSuggestions</c-></a>; [<a id='elements-in-the-dom:cereactions-11' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='interaction.html#dom-autocapitalize' id='elements-in-the-dom:dom-autocapitalize'><c- g>autocapitalize</c-></a>; [<a id='elements-in-the-dom:cereactions-12' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <a href='interaction.html#dom-autocorrect' id='elements-in-the-dom:dom-autocorrect'><c- g>autocorrect</c-></a>; [<a id='elements-in-the-dom:cereactions-13' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> [<a id='elements-in-the-dom:legacynulltoemptystring' href='https://webidl.spec.whatwg.org/#LegacyNullToEmptyString' data-x-internal='legacynulltoemptystring'><c- g>LegacyNullToEmptyString</c-></a>] <c- b>DOMString</c-> <a href='#dom-innertext' id='elements-in-the-dom:dom-innertext'><c- g>innerText</c-></a>; [<a id='elements-in-the-dom:cereactions-14' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> [<a id='elements-in-the-dom:legacynulltoemptystring-2' href='https://webidl.spec.whatwg.org/#LegacyNullToEmptyString' data-x-internal='legacynulltoemptystring'><c- g>LegacyNullToEmptyString</c-></a>] <c- b>DOMString</c-> <a href='#dom-outertext' id='elements-in-the-dom:dom-outertext'><c- g>outerText</c-></a>; <a id='elements-in-the-dom:elementinternals' href='custom-elements.html#elementinternals'><c- n>ElementInternals</c-></a> <a href='custom-elements.html#dom-attachinternals' id='elements-in-the-dom:dom-attachinternals'><c- g>attachInternals</c-></a>(); // The popover API <c- b>undefined</c-> <a href='popover.html#dom-showpopover' id='elements-in-the-dom:dom-showpopover'><c- g>showPopover</c-></a>(<c- b>optional</c-> <a href='#showpopoveroptions' id='elements-in-the-dom:showpopoveroptions'><c- n>ShowPopoverOptions</c-></a> <c- g>options</c-> = {}); <c- b>undefined</c-> <a href='popover.html#dom-hidepopover' id='elements-in-the-dom:dom-hidepopover'><c- g>hidePopover</c-></a>(); <c- b>boolean</c-> <a href='popover.html#dom-togglepopover' id='elements-in-the-dom:dom-togglepopover'><c- g>togglePopover</c-></a>(<c- b>optional</c-> (<a href='#togglepopoveroptions' id='elements-in-the-dom:togglepopoveroptions'><c- n>TogglePopoverOptions</c-></a> <c- b>or</c-> <c- b>boolean</c->) <c- g>options</c-> = {}); [<a id='elements-in-the-dom:cereactions-15' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c->? <a href='popover.html#dom-popover' id='elements-in-the-dom:dom-popover'><c- g>popover</c-></a>; }; <c- b>dictionary</c-> <dfn id='showpopoveroptions' data-dfn-type='dictionary'><c- g>ShowPopoverOptions</c-></dfn> { <a href='#htmlelement' id='elements-in-the-dom:htmlelement-2'><c- n>HTMLElement</c-></a> <dfn data-dfn-for='ShowPopoverOptions' id='dom-showpopoveroptions-source' data-dfn-type='dict-member'><c- g>source</c-></dfn>; }; <c- b>dictionary</c-> <dfn id='togglepopoveroptions' data-dfn-type='dictionary'><c- g>TogglePopoverOptions</c-></dfn> : <a href='#showpopoveroptions' id='elements-in-the-dom:showpopoveroptions-2'><c- n>ShowPopoverOptions</c-></a> { <c- b>boolean</c-> <dfn data-dfn-for='TogglePopoverOptions' id='dom-togglepopoveroptions-force' data-dfn-type='dict-member'><c- g>force</c-></dfn>; }; <a href='#htmlelement' id='elements-in-the-dom:htmlelement-3'><c- n>HTMLElement</c-></a> <c- b>includes</c-> <a id='elements-in-the-dom:globaleventhandlers' href='webappapis.html#globaleventhandlers'><c- n>GlobalEventHandlers</c-></a>; <a href='#htmlelement' id='elements-in-the-dom:htmlelement-4'><c- n>HTMLElement</c-></a> <c- b>includes</c-> <a id='elements-in-the-dom:elementcontenteditable' href='interaction.html#elementcontenteditable'><c- n>ElementContentEditable</c-></a>; <a href='#htmlelement' id='elements-in-the-dom:htmlelement-5'><c- n>HTMLElement</c-></a> <c- b>includes</c-> <a href='#htmlorsvgelement' id='elements-in-the-dom:htmlorsvgelement'><c- n>HTMLOrSVGElement</c-></a>; [<c- g>Exposed</c->=<c- n>Window</c->] <c- b>interface</c-> <dfn id='htmlunknownelement' data-dfn-type='interface'><c- g>HTMLUnknownElement</c-></dfn> : <a href='#htmlelement' id='elements-in-the-dom:htmlelement-6'><c- n>HTMLElement</c-></a> { // Note: <a href='custom-elements.html#customized-built-in-element-restrictions'>intentionally</a> no [<a href='#htmlconstructor' id='elements-in-the-dom:htmlconstructor-2'>HTMLConstructor</a>] };</code></pre> The <code id=elements-in-the-dom:htmlelement-7><a href=#htmlelement>HTMLElement</a></code> interface holds methods and attributes related to a number of disparate features, and the members of this interface are therefore described in various different sections of this specification. <hr> The <a id=elements-in-the-dom:element-interface href=https://dom.spec.whatwg.org/#concept-element-interface data-x-internal=element-interface>element interface</a> for an element with name <var>name</var> in the <a id=elements-in-the-dom:html-namespace-2 href=https://infra.spec.whatwg.org/#html-namespace data-x-internal=html-namespace-2>HTML namespace</a> is determined as follows: <ol><li>If <var>name</var> is <code id=elements-in-the-dom:applet><a href=obsolete.html#applet>applet</a></code>, <code id=elements-in-the-dom:bgsound><a href=obsolete.html#bgsound>bgsound</a></code>, <code id=elements-in-the-dom:blink><a href=obsolete.html#blink>blink</a></code>, <code id=elements-in-the-dom:isindex><a href=obsolete.html#isindex>isindex</a></code>, <code id=elements-in-the-dom:keygen><a href=obsolete.html#keygen>keygen</a></code>, <code id=elements-in-the-dom:multicol><a href=obsolete.html#multicol>multicol</a></code>, <code id=elements-in-the-dom:nextid><a href=obsolete.html#nextid>nextid</a></code>, or <code id=elements-in-the-dom:spacer><a href=obsolete.html#spacer>spacer</a></code>, then return <code id=elements-in-the-dom:htmlunknownelement><a href=#htmlunknownelement>HTMLUnknownElement</a></code>.<li>If <var>name</var> is <code id=elements-in-the-dom:acronym><a href=obsolete.html#acronym>acronym</a></code>, <code id=elements-in-the-dom:basefont><a href=obsolete.html#basefont>basefont</a></code>, <code id=elements-in-the-dom:big><a href=obsolete.html#big>big</a></code>, <code id=elements-in-the-dom:center><a href=obsolete.html#center>center</a></code>, <code id=elements-in-the-dom:nobr><a href=obsolete.html#nobr>nobr</a></code>, <code id=elements-in-the-dom:noembed><a href=obsolete.html#noembed>noembed</a></code>, <code id=elements-in-the-dom:noframes><a href=obsolete.html#noframes>noframes</a></code>, <code id=elements-in-the-dom:plaintext><a href=obsolete.html#plaintext>plaintext</a></code>, <code id=elements-in-the-dom:rb><a href=obsolete.html#rb>rb</a></code>, <code id=elements-in-the-dom:rtc><a href=obsolete.html#rtc>rtc</a></code>, <code id=elements-in-the-dom:strike><a href=obsolete.html#strike>strike</a></code>, or <code id=elements-in-the-dom:tt><a href=obsolete.html#tt>tt</a></code>, then return <code id=elements-in-the-dom:htmlelement-8><a href=#htmlelement>HTMLElement</a></code>.<li>If <var>name</var> is <code id=elements-in-the-dom:listing><a href=obsolete.html#listing>listing</a></code> or <code id=elements-in-the-dom:xmp><a href=obsolete.html#xmp>xmp</a></code>, then return <code id=elements-in-the-dom:htmlpreelement><a href=grouping-content.html#htmlpreelement>HTMLPreElement</a></code>.<li>Otherwise, if this specification defines an interface appropriate for the <a id=elements-in-the-dom:element-type href=infrastructure.html#element-type>element type</a> corresponding to the local name <var>name</var>, then return that interface.<li>If <a id=elements-in-the-dom:other-applicable-specifications href=infrastructure.html#other-applicable-specifications>other applicable specifications</a> define an appropriate interface for <var>name</var>, then return the interface they define.<li>If <var>name</var> is a <a id=elements-in-the-dom:valid-custom-element-name href=custom-elements.html#valid-custom-element-name>valid custom element name</a>, then return <code id=elements-in-the-dom:htmlelement-9><a href=#htmlelement>HTMLElement</a></code>. <li>Return <code id=elements-in-the-dom:htmlunknownelement-2><a href=#htmlunknownelement>HTMLUnknownElement</a></code>.</ol> The use of <code id=elements-in-the-dom:htmlelement-10><a href=#htmlelement>HTMLElement</a></code> instead of <code id=elements-in-the-dom:htmlunknownelement-3><a href=#htmlunknownelement>HTMLUnknownElement</a></code> in the case of <a href=custom-elements.html#valid-custom-element-name id=elements-in-the-dom:valid-custom-element-name-2>valid custom element names</a> is done to ensure that any potential future <a href=custom-elements.html#upgrades id=elements-in-the-dom:upgrades>upgrades</a> only cause a linear transition of the element's prototype chain, from <code id=elements-in-the-dom:htmlelement-11><a href=#htmlelement>HTMLElement</a></code> to a subclass, instead of a lateral one, from <code id=elements-in-the-dom:htmlunknownelement-4><a href=#htmlunknownelement>HTMLUnknownElement</a></code> to an unrelated subclass. Features shared between HTML and SVG elements use the <code id=elements-in-the-dom:htmlorsvgelement-2><a href=#htmlorsvgelement>HTMLOrSVGElement</a></code> interface mixin: <a href=references.html#refsSVG>[SVG]</a> <pre><code class='idl'><c- b>interface</c-> <c- b>mixin</c-> <dfn id='htmlorsvgelement' data-dfn-type='interface'><c- g>HTMLOrSVGElement</c-></dfn> { [<c- g>SameObject</c->] <c- b>readonly</c-> <c- b>attribute</c-> <a href='#domstringmap' id='elements-in-the-dom:domstringmap'><c- n>DOMStringMap</c-></a> <a href='#dom-dataset' id='elements-in-the-dom:dom-dataset'><c- g>dataset</c-></a>; <c- b>attribute</c-> <c- b>DOMString</c-> <a href='urls-and-fetching.html#dom-noncedelement-nonce' id='elements-in-the-dom:dom-noncedelement-nonce'><c- g>nonce</c-></a>; // <a href='urls-and-fetching.html#nonce-does-not-update-dom'>intentionally no [CEReactions]</a> [<a id='elements-in-the-dom:cereactions-16' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <a href='interaction.html#dom-fe-autofocus' id='elements-in-the-dom:dom-fe-autofocus'><c- g>autofocus</c-></a>; [<a id='elements-in-the-dom:cereactions-17' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>long</c-> <a href='interaction.html#dom-tabindex' id='elements-in-the-dom:dom-tabindex'><c- g>tabIndex</c-></a>; <c- b>undefined</c-> <a href='interaction.html#dom-focus' id='elements-in-the-dom:dom-focus'><c- g>focus</c-></a>(<c- b>optional</c-> <a id='elements-in-the-dom:focusoptions' href='interaction.html#focusoptions'><c- n>FocusOptions</c-></a> <c- g>options</c-> = {}); <c- b>undefined</c-> <a href='interaction.html#dom-blur' id='elements-in-the-dom:dom-blur'><c- g>blur</c-></a>(); };</code></pre> <div class=example> An example of an element that is neither an HTML nor SVG element is one created as follows: <pre><code class='html'>const el = document.createElementNS("some namespace", "example"); console.assert(el.constructor === Element);</code></pre> </div> <h4 id=html-element-constructors>3.2.3 HTML element constructors<a href=#html-element-constructors class=self-link></a></h4> To support the <a href=custom-elements.html#custom-elements>custom elements</a> feature, all HTML elements have special constructor behavior. This is indicated via the <dfn id=htmlconstructor data-dfn-type=extended-attribute data-lt=HTMLConstructor><code>[HTMLConstructor]</code></dfn> IDL <a id=html-element-constructors:extended-attribute href=https://webidl.spec.whatwg.org/#dfn-extended-attribute data-x-internal=extended-attribute>extended attribute</a>. It indicates that the interface object for the given interface will have a specific behavior when called, as defined in detail below. The <code id=html-element-constructors:htmlconstructor><a href=#htmlconstructor>[HTMLConstructor]</a></code> extended attribute must take no arguments, and must only appear on <a href=https://webidl.spec.whatwg.org/#idl-constructors id=html-element-constructors:constructor-operation data-x-internal=constructor-operation>constructor operations</a>. 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 <code id=html-element-constructors:htmlconstructor-2><a href=#htmlconstructor>[HTMLConstructor]</a></code> extended attribute have the following <a id=html-element-constructors:overridden-constructor-steps href=https://webidl.spec.whatwg.org/#overridden-constructor-steps data-x-internal=overridden-constructor-steps>overridden constructor steps</a>: <ol><li>Let <var>registry</var> be the <a id=html-element-constructors:current-global-object href=webappapis.html#current-global-object>current global object</a>'s <code id=html-element-constructors:customelementregistry><a href=custom-elements.html#customelementregistry>CustomElementRegistry</a></code> object.<li> If <a id=html-element-constructors:newtarget href=https://tc39.es/ecma262/#sec-built-in-function-objects data-x-internal=newtarget>NewTarget</a> is equal to the <a id=html-element-constructors:active-function-object href=https://tc39.es/ecma262/#active-function-object data-x-internal=active-function-object>active function object</a>, then throw a <code id=html-element-constructors:typeerror><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code>. <div class=example> This can occur when a custom element is defined using an <a id=html-element-constructors:element-interface href=https://dom.spec.whatwg.org/#concept-element-interface data-x-internal=element-interface>element interface</a> as its constructor: <pre><code class='js'>customElements<c- p>.</c->define<c- p>(</c-><c- u>"bad-1"</c-><c- p>,</c-> HTMLButtonElement<c- p>);</c-> <c- k>new</c-> HTMLButtonElement<c- p>();</c-> <c- c1>// (1)</c-> document<c- p>.</c->createElement<c- p>(</c-><c- u>"bad-1"</c-><c- p>);</c-> <c- c1>// (2)</c-></code></pre> In this case, during the execution of <code id=html-element-constructors:htmlbuttonelement><a href=form-elements.html#htmlbuttonelement>HTMLButtonElement</a></code> (either explicitly, as in (1), or implicitly, as in (2)), both the <a id=html-element-constructors:active-function-object-2 href=https://tc39.es/ecma262/#active-function-object data-x-internal=active-function-object>active function object</a> and <a id=html-element-constructors:newtarget-2 href=https://tc39.es/ecma262/#sec-built-in-function-objects data-x-internal=newtarget>NewTarget</a> are <code id=html-element-constructors:htmlbuttonelement-2><a href=form-elements.html#htmlbuttonelement>HTMLButtonElement</a></code>. If this check was not present, it would be possible to create an instance of <code id=html-element-constructors:htmlbuttonelement-3><a href=form-elements.html#htmlbuttonelement>HTMLButtonElement</a></code> whose local name was <code>bad-1</code>. </div> <li> Let <var>definition</var> be the entry in <var>registry</var> with <a href=custom-elements.html#concept-custom-element-definition-constructor id=html-element-constructors:concept-custom-element-definition-constructor>constructor</a> equal to <a id=html-element-constructors:newtarget-3 href=https://tc39.es/ecma262/#sec-built-in-function-objects data-x-internal=newtarget>NewTarget</a>. If there is no such definition, then throw a <code id=html-element-constructors:typeerror-2><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code>. Since there can be no entry in <var>registry</var> with a <a href=custom-elements.html#concept-custom-element-definition-constructor id=html-element-constructors:concept-custom-element-definition-constructor-2>constructor</a> of undefined, this step also prevents HTML element constructors from being called as functions (since in that case <a id=html-element-constructors:newtarget-4 href=https://tc39.es/ecma262/#sec-built-in-function-objects data-x-internal=newtarget>NewTarget</a> will be undefined). <li>Let <var>is value</var> be null.<li> If <var>definition</var>'s <a href=custom-elements.html#concept-custom-element-definition-local-name id=html-element-constructors:concept-custom-element-definition-local-name>local name</a> is equal to <var>definition</var>'s <a href=custom-elements.html#concept-custom-element-definition-name id=html-element-constructors:concept-custom-element-definition-name>name</a> (i.e., <var>definition</var> is for an <a id=html-element-constructors:autonomous-custom-element href=custom-elements.html#autonomous-custom-element>autonomous custom element</a>), then: <ol><li> If the <a id=html-element-constructors:active-function-object-3 href=https://tc39.es/ecma262/#active-function-object data-x-internal=active-function-object>active function object</a> is not <code id=html-element-constructors:htmlelement><a href=#htmlelement>HTMLElement</a></code>, then throw a <code id=html-element-constructors:typeerror-3><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code>. <div class=example> This can occur when a custom element is defined to not extend any local names, but inherits from a non-<code id=html-element-constructors:htmlelement-2><a href=#htmlelement>HTMLElement</a></code> class: <pre><code class='js'>customElements<c- p>.</c->define<c- p>(</c-><c- u>"bad-2"</c-><c- p>,</c-> <c- a>class</c-> Bad2 <c- k>extends</c-> HTMLParagraphElement <c- p>{});</c-></code></pre> In this case, during the (implicit) <code>super()</code> call that occurs when constructing an instance of <code>Bad2</code>, the <a id=html-element-constructors:active-function-object-4 href=https://tc39.es/ecma262/#active-function-object data-x-internal=active-function-object>active function object</a> is <code id=html-element-constructors:htmlparagraphelement><a href=grouping-content.html#htmlparagraphelement>HTMLParagraphElement</a></code>, not <code id=html-element-constructors:htmlelement-3><a href=#htmlelement>HTMLElement</a></code>. </div> </ol> <li> Otherwise (i.e., if <var>definition</var> is for a <a id=html-element-constructors:customized-built-in-element href=custom-elements.html#customized-built-in-element>customized built-in element</a>): <ol><li>Let <var>valid local names</var> be the list of local names for elements defined in this specification or in <a id=html-element-constructors:other-applicable-specifications href=infrastructure.html#other-applicable-specifications>other applicable specifications</a> that use the <a id=html-element-constructors:active-function-object-5 href=https://tc39.es/ecma262/#active-function-object data-x-internal=active-function-object>active function object</a> as their <a id=html-element-constructors:element-interface-2 href=https://dom.spec.whatwg.org/#concept-element-interface data-x-internal=element-interface>element interface</a>.<li> If <var>valid local names</var> does not contain <var>definition</var>'s <a href=custom-elements.html#concept-custom-element-definition-local-name id=html-element-constructors:concept-custom-element-definition-local-name-2>local name</a>, then throw a <code id=html-element-constructors:typeerror-4><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code>. <div class=example> This can occur when a custom element is defined to extend a given local name but inherits from the wrong class: <pre><code class='js'>customElements<c- p>.</c->define<c- p>(</c-><c- u>"bad-3"</c-><c- p>,</c-> <c- a>class</c-> Bad3 <c- k>extends</c-> HTMLQuoteElement <c- p>{},</c-> <c- p>{</c-> <c- k>extends</c-><c- o>:</c-> <c- u>"p"</c-> <c- p>});</c-></code></pre> In this case, during the (implicit) <code>super()</code> call that occurs when constructing an instance of <code>Bad3</code>, <var>valid local names</var> is the list containing <code id=html-element-constructors:the-q-element><a href=text-level-semantics.html#the-q-element>q</a></code> and <code id=html-element-constructors:the-blockquote-element><a href=grouping-content.html#the-blockquote-element>blockquote</a></code>, but <var>definition</var>'s <a href=custom-elements.html#concept-custom-element-definition-local-name id=html-element-constructors:concept-custom-element-definition-local-name-3>local name</a> is <code id=html-element-constructors:the-p-element><a href=grouping-content.html#the-p-element>p</a></code>, which is not in that list. </div> <li>Set <var>is value</var> to <var>definition</var>'s <a href=custom-elements.html#concept-custom-element-definition-name id=html-element-constructors:concept-custom-element-definition-name-2>name</a>.</ol> <li> If <var>definition</var>'s <a href=custom-elements.html#concept-custom-element-definition-construction-stack id=html-element-constructors:concept-custom-element-definition-construction-stack>construction stack</a> is empty, then: <ol><li>Let <var>element</var> be the result of <a href=https://webidl.spec.whatwg.org/#internally-create-a-new-object-implementing-the-interface id=html-element-constructors:internally-create-a-new-object-implementing-the-interface data-x-internal=internally-create-a-new-object-implementing-the-interface>internally creating a new object implementing the interface</a> to which the <a id=html-element-constructors:active-function-object-6 href=https://tc39.es/ecma262/#active-function-object data-x-internal=active-function-object>active function object</a> corresponds, given the <a id=html-element-constructors:current-realm href=https://tc39.es/ecma262/#current-realm data-x-internal=current-realm>current realm</a> and <a id=html-element-constructors:newtarget-5 href=https://tc39.es/ecma262/#sec-built-in-function-objects data-x-internal=newtarget>NewTarget</a>.<li>Set <var>element</var>'s <a id=html-element-constructors:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> to the <a id=html-element-constructors:current-global-object-2 href=webappapis.html#current-global-object>current global object</a>'s <a href=nav-history-apis.html#concept-document-window id=html-element-constructors:concept-document-window>associated <code>Document</code></a>.<li>Set <var>element</var>'s <a href=https://dom.spec.whatwg.org/#concept-element-namespace id=html-element-constructors:concept-element-namespace data-x-internal=concept-element-namespace>namespace</a> to the <a id=html-element-constructors:html-namespace-2 href=https://infra.spec.whatwg.org/#html-namespace data-x-internal=html-namespace-2>HTML namespace</a>.<li>Set <var>element</var>'s <a href=https://dom.spec.whatwg.org/#concept-element-namespace-prefix id=html-element-constructors:concept-element-namespace-prefix data-x-internal=concept-element-namespace-prefix>namespace prefix</a> to null.<li>Set <var>element</var>'s <a href=https://dom.spec.whatwg.org/#concept-element-local-name id=html-element-constructors:concept-element-local-name data-x-internal=concept-element-local-name>local name</a> to <var>definition</var>'s <a href=custom-elements.html#concept-custom-element-definition-local-name id=html-element-constructors:concept-custom-element-definition-local-name-4>local name</a>.<li>Set <var>element</var>'s <a id=html-element-constructors:custom-element-state href=https://dom.spec.whatwg.org/#concept-element-custom-element-state data-x-internal=custom-element-state>custom element state</a> to "<code>custom</code>".<li>Set <var>element</var>'s <a href=https://dom.spec.whatwg.org/#concept-element-custom-element-definition id=html-element-constructors:concept-element-custom-element-definition data-x-internal=concept-element-custom-element-definition>custom element definition</a> to <var>definition</var>.<li>Set <var>element</var>'s <a href=https://dom.spec.whatwg.org/#concept-element-is-value id=html-element-constructors:concept-element-is-value data-x-internal=concept-element-is-value><code>is</code> value</a> to <var>is value</var>.<li>Return <var>element</var>.</ol> This occurs when author script constructs a new custom element directly, e.g. via <code>new MyCustomElement()</code>. <li>Let <var>prototype</var> be ? <a href=https://tc39.es/ecma262/#sec-get-o-p id=html-element-constructors:js-get data-x-internal=js-get>Get</a>(<a id=html-element-constructors:newtarget-6 href=https://tc39.es/ecma262/#sec-built-in-function-objects data-x-internal=newtarget>NewTarget</a>, "prototype").<li> If <var>prototype</var> <a href=https://tc39.es/ecma262/#sec-object-type id=html-element-constructors:js-object data-x-internal=js-object>is not an Object</a>, then: <ol><li>Let <var>realm</var> be ? <a id=html-element-constructors:getfunctionrealm href=https://tc39.es/ecma262/#sec-getfunctionrealm data-x-internal=getfunctionrealm>GetFunctionRealm</a>(<a id=html-element-constructors:newtarget-7 href=https://tc39.es/ecma262/#sec-built-in-function-objects data-x-internal=newtarget>NewTarget</a>).<li>Set <var>prototype</var> to the <a id=html-element-constructors:interface-prototype-object href=https://webidl.spec.whatwg.org/#dfn-interface-prototype-object data-x-internal=interface-prototype-object>interface prototype object</a> of <var>realm</var> whose interface is the same as the interface of the <a id=html-element-constructors:active-function-object-7 href=https://tc39.es/ecma262/#active-function-object data-x-internal=active-function-object>active function object</a>.</ol> The realm of the <a id=html-element-constructors:active-function-object-8 href=https://tc39.es/ecma262/#active-function-object data-x-internal=active-function-object>active function object</a> might not be <var>realm</var>, so we are using the more general concept of "the same interface" across realms; we are not looking for equality of <a href=https://webidl.spec.whatwg.org/#dfn-interface-object id=html-element-constructors:interface-object data-x-internal=interface-object>interface objects</a>. This fallback behavior, including using the realm of <a id=html-element-constructors:newtarget-8 href=https://tc39.es/ecma262/#sec-built-in-function-objects data-x-internal=newtarget>NewTarget</a> and looking up the appropriate prototype there, is designed to match analogous behavior for the JavaScript built-ins and Web IDL's <a id=html-element-constructors:internally-create-a-new-object-implementing-the-interface-2 href=https://webidl.spec.whatwg.org/#internally-create-a-new-object-implementing-the-interface data-x-internal=internally-create-a-new-object-implementing-the-interface>internally create a new object implementing the interface</a> algorithm. <li>Let <var>element</var> be the last entry in <var>definition</var>'s <a href=custom-elements.html#concept-custom-element-definition-construction-stack id=html-element-constructors:concept-custom-element-definition-construction-stack-2>construction stack</a>.<li> If <var>element</var> is an <a href=custom-elements.html#concept-already-constructed-marker id=html-element-constructors:concept-already-constructed-marker>already constructed marker</a>, then throw a <code id=html-element-constructors:typeerror-5><a data-x-internal=typeerror href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError</a></code>. <div class=example> This can occur when the author code inside the <a id=html-element-constructors:custom-element-constructor href=custom-elements.html#custom-element-constructor>custom element constructor</a> <a href=custom-elements.html#custom-element-conformance>non-conformantly</a> creates another instance of the class being constructed, before calling <code>super()</code>: <pre><code class='js'><c- a>let</c-> doSillyThing <c- o>=</c-> <c- kc>true</c-><c- p>;</c-> <c- a>class</c-> DontDoThis <c- k>extends</c-> HTMLElement <c- p>{</c-> constructor<c- p>()</c-> <c- p>{</c-> <c- k>if</c-> <c- p>(</c->doSillyThing<c- p>)</c-> <c- p>{</c-> doSillyThing <c- o>=</c-> <c- kc>false</c-><c- p>;</c-> <c- k>new</c-> DontDoThis<c- p>();</c-> <c- c1>// Now the construction stack will contain an </c-><c- c1>already constructed</c-><c- c1> marker.</c-> <c- p>}</c-> <c- c1>// This will then fail with a TypeError:</c-> <c- k>super</c-><c- p>();</c-> <c- p>}</c-> <c- p>}</c-></code></pre> </div> <div class=example> This can also occur when author code inside the <a id=html-element-constructors:custom-element-constructor-2 href=custom-elements.html#custom-element-constructor>custom element constructor</a> <a href=custom-elements.html#custom-element-conformance>non-conformantly</a> calls <code>super()</code> twice, since per the JavaScript specification, this actually executes the superclass constructor (i.e. this algorithm) twice, before throwing an error: <pre><code class='js'><c- a>class</c-> DontDoThisEither <c- k>extends</c-> HTMLElement <c- p>{</c-> constructor<c- p>()</c-> <c- p>{</c-> <c- k>super</c-><c- p>();</c-> <c- c1>// This will throw, but not until it has already called into the HTMLElement constructor</c-> <c- k>super</c-><c- p>();</c-> <c- p>}</c-> <c- p>}</c-></code></pre> </div> <li>Perform ? <var>element</var>.[[SetPrototypeOf]](<var>prototype</var>).<li>Replace the last entry in <var>definition</var>'s <a href=custom-elements.html#concept-custom-element-definition-construction-stack id=html-element-constructors:concept-custom-element-definition-construction-stack-3>construction stack</a> with an <a href=custom-elements.html#concept-already-constructed-marker id=html-element-constructors:concept-already-constructed-marker-2>already constructed marker</a>.<li> Return <var>element</var>. This step is normally reached when <a href=custom-elements.html#upgrades id=html-element-constructors:upgrades>upgrading</a> a custom element; the existing element is returned, so that the <code>super()</code> call inside the <a id=html-element-constructors:custom-element-constructor-3 href=custom-elements.html#custom-element-constructor>custom element constructor</a> assigns that existing element to this. </ol> <hr> In addition to the constructor behavior implied by <code id=html-element-constructors:htmlconstructor-3><a href=#htmlconstructor>[HTMLConstructor]</a></code>, some elements also have <a href=https://webidl.spec.whatwg.org/#dfn-named-constructor id=html-element-constructors:named-constructor data-x-internal=named-constructor>named constructors</a> (which are really factory functions with a modified <code>prototype</code> property). <div class=example> Named constructors for HTML elements can also be used in an <code>extends</code> clause when defining a <a id=html-element-constructors:custom-element-constructor-4 href=custom-elements.html#custom-element-constructor>custom element constructor</a>: <pre><code class='js'><c- a>class</c-> AutoEmbiggenedImage <c- k>extends</c-> Image <c- p>{</c-> constructor<c- p>(</c->width<c- p>,</c-> height<c- p>)</c-> <c- p>{</c-> <c- k>super</c-><c- p>(</c->width <c- o>*</c-> <c- mf>10</c-><c- p>,</c-> height <c- o>*</c-> <c- mf>10</c-><c- p>);</c-> <c- p>}</c-> <c- p>}</c-> customElements<c- p>.</c->define<c- p>(</c-><c- u>"auto-embiggened"</c-><c- p>,</c-> AutoEmbiggenedImage<c- p>,</c-> <c- p>{</c-> <c- k>extends</c-><c- o>:</c-> <c- u>"img"</c-> <c- p>});</c-> <c- a>const</c-> image <c- o>=</c-> <c- k>new</c-> AutoEmbiggenedImage<c- p>(</c-><c- mf>15</c-><c- p>,</c-> <c- mf>20</c-><c- p>);</c-> console<c- p>.</c->assert<c- p>(</c->image<c- p>.</c->width <c- o>===</c-> <c- mf>150</c-><c- p>);</c-> console<c- p>.</c->assert<c- p>(</c->image<c- p>.</c->height <c- o>===</c-> <c- mf>200</c-><c- p>);</c-></code></pre> </div> <h4 id=element-definitions>3.2.4 Element definitions<a href=#element-definitions class=self-link></a></h4> Each element in this specification has a definition that includes the following information: <dl><dt><dfn id=concept-element-categories>Categories</dfn><dd>A list of <a href=#content-categories id=element-definitions:content-categories>categories</a> to which the element belongs. These are used when defining the <a href=#content-models id=element-definitions:content-models>content models</a> for each element.<dt><dfn id=concept-element-contexts>Contexts in which this element can be used</dfn><dd> A non-normative description of where the element can be used. This information is redundant with the content models of elements that allow this one as a child, and is provided only as a convenience. <div class=note> For simplicity, only the most specific expectations are listed. For example, all <a href=#phrasing-content-2 id=element-definitions:phrasing-content-2>phrasing content</a> is <a href=#flow-content-2 id=element-definitions:flow-content-2>flow content</a>. Thus, elements that are <a href=#phrasing-content-2 id=element-definitions:phrasing-content-2-2>phrasing content</a> will only be listed as "where <a href=#phrasing-content-2 id=element-definitions:phrasing-content-2-3>phrasing content</a> is expected", since this is the more-specific expectation. Anywhere that expects <a href=#flow-content-2 id=element-definitions:flow-content-2-2>flow content</a> also expects <a href=#phrasing-content-2 id=element-definitions:phrasing-content-2-4>phrasing content</a>, and thus also meets this expectation. </div> <dt><dfn id=concept-element-content-model>Content model</dfn><dd>A normative description of what content must be included as children and descendants of the element.<dt><dfn id=concept-element-tag-omission>Tag omission in text/html</dfn><dd>A non-normative description of whether, in the <code id=element-definitions:text/html><a href=iana.html#text/html>text/html</a></code> syntax, the <a href=syntax.html#syntax-start-tag id=element-definitions:syntax-start-tag>start</a> and <a href=syntax.html#syntax-end-tag id=element-definitions:syntax-end-tag>end</a> tags can be omitted. This information is redundant with the normative requirements given in the <a href=syntax.html#syntax-tag-omission id=element-definitions:syntax-tag-omission>optional tags</a> section, and is provided in the element definitions only as a convenience.<dt><dfn id=concept-element-attributes>Content attributes</dfn><dd>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.)<dt><dfn id=concept-element-accessibility-considerations>Accessibility considerations</dfn><dd> For authors: Conformance requirements for use of <cite>ARIA</cite> <code id=element-definitions:attr-aria-role><a href=infrastructure.html#attr-aria-role>role</a></code> and <code id=element-definitions:attr-aria-*><a href=infrastructure.html#attr-aria-*>aria-*</a></code> attributes are defined in <cite>ARIA in HTML</cite>. <a href=references.html#refsARIA>[ARIA]</a> <a href=references.html#refsARIAHTML>[ARIAHTML]</a> For implementers: User agent requirements for implementing accessibility API semantics are defined in <cite>HTML Accessibility API Mappings</cite>. <a href=references.html#refsHTMLAAM>[HTMLAAM]</a> <dt><dfn id=concept-element-dom>DOM interface</dfn><dd>A normative definition of a DOM interface that such elements must implement.</dl> This is then followed by a description of what the element <a href=#represents id=element-definitions:represents>represents</a>, along with any additional normative conformance criteria that may apply to authors and implementations. Examples are sometimes also included. <h5 id=attributes>3.2.4.1 Attributes<a href=#attributes class=self-link></a></h5> An attribute value is a string. Except where otherwise specified, attribute values on <a id=attributes:html-elements href=infrastructure.html#html-elements>HTML elements</a> may be any string value, including the empty string, and there is no restriction on what text can be specified in such attribute values. <h4 id=content-models>3.2.5 <dfn>Content models</dfn><a href=#content-models class=self-link></a></h4> Each element defined in this specification has a content model: a description of the element's expected <a href=#concept-html-contents id=content-models:concept-html-contents>contents</a>. An <a href=infrastructure.html#html-elements id=content-models:html-elements>HTML element</a> must have contents that match the requirements described in the element's content model. The <dfn id=concept-html-contents>contents</dfn> of an element are its children in the DOM. <a id=content-models:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a> is always allowed between elements. User agents represent these characters between elements in the source markup as <code id=content-models:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes in the DOM. Empty <code id=content-models:text-2><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes and <code id=content-models:text-3><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes consisting of just sequences of those characters are considered <dfn id=inter-element-whitespace>inter-element whitespace</dfn>. <a href=#inter-element-whitespace id=content-models:inter-element-whitespace>Inter-element whitespace</a>, comment nodes, and processing instruction nodes must be ignored when establishing whether an element's contents match the element's content model or not, and must be ignored when following algorithms that define document and element semantics. Thus, an element <var>A</var> is said to be preceded or followed by a second element <var>B</var> if <var>A</var> and <var>B</var> have the same parent node and there are no other element nodes or <code id=content-models:text-4><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes (other than <a href=#inter-element-whitespace id=content-models:inter-element-whitespace-2>inter-element whitespace</a>) between them. Similarly, a node is the only child of an element if that element contains no other nodes other than <a href=#inter-element-whitespace id=content-models:inter-element-whitespace-3>inter-element whitespace</a>, comment nodes, and processing instruction nodes. Authors must not use <a id=content-models:html-elements-2 href=infrastructure.html#html-elements>HTML elements</a> anywhere except where they are explicitly allowed, as defined for each element, or as explicitly required by other specifications. For XML compound documents, these contexts could be inside elements from other namespaces, if those elements are defined as providing the relevant contexts. <cite>The Atom Syndication Format</cite> defines a <code>content</code> element. When its <code>type</code> attribute has the value <code>xhtml</code>, <cite>The Atom Syndication Format</cite> requires that it contain a single HTML <code id=content-models:the-div-element><a href=grouping-content.html#the-div-element>div</a></code> element. Thus, a <code id=content-models:the-div-element-2><a href=grouping-content.html#the-div-element>div</a></code> element is allowed in that context, even though this is not explicitly normatively stated by this specification. <a href=references.html#refsATOM>[ATOM]</a> In addition, <a id=content-models:html-elements-3 href=infrastructure.html#html-elements>HTML elements</a> may be orphan nodes (i.e. without a parent node). <div class=example> For example, creating a <code id=content-models:the-td-element><a href=tables.html#the-td-element>td</a></code> element and storing it in a global variable in a script is conforming, even though <code id=content-models:the-td-element-2><a href=tables.html#the-td-element>td</a></code> elements are otherwise only supposed to be used inside <code id=content-models:the-tr-element><a href=tables.html#the-tr-element>tr</a></code> elements. <pre><code class='js'><c- a>var</c-> data <c- o>=</c-> <c- p>{</c-> name<c- o>:</c-> <c- u>"Banana"</c-><c- p>,</c-> cell<c- o>:</c-> document<c- p>.</c->createElement<c- p>(</c-><c- t>'td'</c-><c- p>),</c-> <c- p>};</c-></code></pre> </div> <h5 id=the-nothing-content-model>3.2.5.1 The "nothing" content model<a href=#the-nothing-content-model class=self-link></a></h5> When an element's content model is <dfn id=concept-content-nothing>nothing</dfn>, the element must contain no <code id=the-nothing-content-model:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes (other than <a href=#inter-element-whitespace id=the-nothing-content-model:inter-element-whitespace>inter-element whitespace</a>) and no element nodes. Most HTML elements whose content model is "nothing" are also, for convenience, <a id=the-nothing-content-model:void-elements href=syntax.html#void-elements>void elements</a> (elements that have no <a href=syntax.html#syntax-end-tag id=the-nothing-content-model:syntax-end-tag>end tag</a> in the <a href=syntax.html#syntax>HTML syntax</a>). However, these are entirely separate concepts. <h5 id=kinds-of-content>3.2.5.2 Kinds of content<a href=#kinds-of-content class=self-link></a></h5> Each element in HTML falls into zero or more <dfn id=content-categories>categories</dfn> that group elements with similar characteristics together. The following broad categories are used in this specification: <ul class=brief><li><a href=#metadata-content-2 id=kinds-of-content:metadata-content-2>Metadata content</a><li><a href=#flow-content-2 id=kinds-of-content:flow-content-2>Flow content</a><li><a href=#sectioning-content-2 id=kinds-of-content:sectioning-content-2>Sectioning content</a><li><a href=#heading-content-2 id=kinds-of-content:heading-content-2>Heading content</a><li><a href=#phrasing-content-2 id=kinds-of-content:phrasing-content-2>Phrasing content</a><li><a href=#embedded-content-category id=kinds-of-content:embedded-content-category>Embedded content</a><li><a href=#interactive-content-2 id=kinds-of-content:interactive-content-2>Interactive content</a></ul> Some elements also fall into other categories, which are defined in other parts of this specification. These categories are related as follows: <iframe src=/images/content-venn.svg width=1000 height=288></iframe> Sectioning content, heading content, phrasing content, embedded content, and interactive content are all types of flow content. Metadata is sometimes flow content. Metadata and interactive content are sometimes phrasing content. Embedded content is also a type of phrasing content, and sometimes is interactive content. Other categories are also used for specific purposes, e.g. form controls are specified using a number of categories to define common requirements. Some elements have unique requirements and do not fit into any particular category. <h6 id=metadata-content>3.2.5.2.1 Metadata content<a href=#metadata-content class=self-link></a></h6> <dfn id=metadata-content-2 data-export="">Metadata content</dfn> is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band" information. <ul class="brief category-list"><li><code id=metadata-content:the-base-element><a href=semantics.html#the-base-element>base</a></code><li><code id=metadata-content:the-link-element><a href=semantics.html#the-link-element>link</a></code><li><code id=metadata-content:the-meta-element><a href=semantics.html#the-meta-element>meta</a></code><li><code id=metadata-content:the-noscript-element><a href=scripting.html#the-noscript-element>noscript</a></code><li><code id=metadata-content:the-script-element><a href=scripting.html#the-script-element>script</a></code><li><code id=metadata-content:the-style-element><a href=semantics.html#the-style-element>style</a></code><li><code id=metadata-content:the-template-element><a href=scripting.html#the-template-element>template</a></code><li><code id=metadata-content:the-title-element><a href=semantics.html#the-title-element>title</a></code></ul> Elements from other namespaces whose semantics are primarily metadata-related (e.g. RDF) are also <a href=#metadata-content-2 id=metadata-content:metadata-content-2>metadata content</a>. <div class=example> Thus, in the XML serialization, one can use RDF, like this: <pre><code class='html'><c- p><</c-><c- f>html</c-> <c- e>xmlns</c-><c- o>=</c-><c- s>"http://www.w3.org/1999/xhtml"</c-> <c- e>xmlns:r</c-><c- o>=</c-><c- s>"http://www.w3.org/1999/02/22-rdf-syntax-ns#"</c-> <c- e>xml:lang</c-><c- o>=</c-><c- s>"en"</c-><c- p>></c-> <c- p><</c-><c- f>head</c-><c- p>></c-> <c- p><</c-><c- f>title</c-><c- p>></c->Hedral's Home Page<c- p></</c-><c- f>title</c-><c- p>></c-> <c- p><</c-><c- f>r:RDF</c-><c- p>></c-> <c- p><</c-><c- f>Person</c-> <c- e>xmlns</c-><c- o>=</c-><c- s>"http://www.w3.org/2000/10/swap/pim/contact#"</c-> <c- e>r:about</c-><c- o>=</c-><c- s>"https://hedral.example.com/#"</c-><c- p>></c-> <c- p><</c-><c- f>fullName</c-><c- p>></c->Cat Hedral<c- p></</c-><c- f>fullName</c-><c- p>></c-> <c- p><</c-><c- f>mailbox</c-> <c- e>r:resource</c-><c- o>=</c-><c- s>"mailto:hedral@damowmow.com"</c-><c- p>/></c-> <c- p><</c-><c- f>personalTitle</c-><c- p>></c->Sir<c- p></</c-><c- f>personalTitle</c-><c- p>></c-> <c- p></</c-><c- f>Person</c-><c- p>></c-> <c- p></</c-><c- f>r:RDF</c-><c- p>></c-> <c- p></</c-><c- f>head</c-><c- p>></c-> <c- p><</c-><c- f>body</c-><c- p>></c-> <c- p><</c-><c- f>h1</c-><c- p>></c->My home page<c- p></</c-><c- f>h1</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c->I like playing with string, I guess. Sister says squirrels are fun too so sometimes I follow her to play with them.<c- p></</c-><c- f>p</c-><c- p>></c-> <c- p></</c-><c- f>body</c-><c- p>></c-> <c- p></</c-><c- f>html</c-><c- p>></c-></code></pre> This isn't possible in the HTML serialization, however. </div> <h6 id=flow-content>3.2.5.2.2 Flow content<a href=#flow-content class=self-link></a></h6> Most elements that are used in the body of documents and applications are categorized as <dfn id=flow-content-2 data-export="">flow content</dfn>. <ul class="brief category-list"><li><code id=flow-content:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code><li><code id=flow-content:the-abbr-element><a href=text-level-semantics.html#the-abbr-element>abbr</a></code><li><code id=flow-content:the-address-element><a href=sections.html#the-address-element>address</a></code><li><code id=flow-content:the-area-element><a href=image-maps.html#the-area-element>area</a></code> (if it is a descendant of a <code id=flow-content:the-map-element><a href=image-maps.html#the-map-element>map</a></code> element)<li><code id=flow-content:the-article-element><a href=sections.html#the-article-element>article</a></code><li><code id=flow-content:the-aside-element><a href=sections.html#the-aside-element>aside</a></code><li><code id=flow-content:the-audio-element><a href=media.html#the-audio-element>audio</a></code><li><code id=flow-content:the-b-element><a href=text-level-semantics.html#the-b-element>b</a></code><li><code id=flow-content:the-bdi-element><a href=text-level-semantics.html#the-bdi-element>bdi</a></code><li><code id=flow-content:the-bdo-element><a href=text-level-semantics.html#the-bdo-element>bdo</a></code><li><code id=flow-content:the-blockquote-element><a href=grouping-content.html#the-blockquote-element>blockquote</a></code><li><code id=flow-content:the-br-element><a href=text-level-semantics.html#the-br-element>br</a></code><li><code id=flow-content:the-button-element><a href=form-elements.html#the-button-element>button</a></code><li><code id=flow-content:the-canvas-element><a href=canvas.html#the-canvas-element>canvas</a></code><li><code id=flow-content:the-cite-element><a href=text-level-semantics.html#the-cite-element>cite</a></code><li><code id=flow-content:the-code-element><a href=text-level-semantics.html#the-code-element>code</a></code><li><code id=flow-content:the-data-element><a href=text-level-semantics.html#the-data-element>data</a></code><li><code id=flow-content:the-datalist-element><a href=form-elements.html#the-datalist-element>datalist</a></code><li><code id=flow-content:the-del-element><a href=edits.html#the-del-element>del</a></code><li><code id=flow-content:the-details-element><a href=interactive-elements.html#the-details-element>details</a></code><li><code id=flow-content:the-dfn-element><a href=text-level-semantics.html#the-dfn-element>dfn</a></code><li><code id=flow-content:the-dialog-element><a href=interactive-elements.html#the-dialog-element>dialog</a></code><li><code id=flow-content:the-div-element><a href=grouping-content.html#the-div-element>div</a></code><li><code id=flow-content:the-dl-element><a href=grouping-content.html#the-dl-element>dl</a></code><li><code id=flow-content:the-em-element><a href=text-level-semantics.html#the-em-element>em</a></code><li><code id=flow-content:the-embed-element><a href=iframe-embed-object.html#the-embed-element>embed</a></code><li><code id=flow-content:the-fieldset-element><a href=form-elements.html#the-fieldset-element>fieldset</a></code><li><code id=flow-content:the-figure-element><a href=grouping-content.html#the-figure-element>figure</a></code><li><code id=flow-content:the-footer-element><a href=sections.html#the-footer-element>footer</a></code><li><code id=flow-content:the-form-element><a href=forms.html#the-form-element>form</a></code><li><code id=flow-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code><li><code id=flow-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-2><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code><li><code id=flow-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-3><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code><li><code id=flow-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-4><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code><li><code id=flow-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-5><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code><li><code id=flow-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-6><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code><li><code id=flow-content:the-header-element><a href=sections.html#the-header-element>header</a></code><li><code id=flow-content:the-hgroup-element><a href=sections.html#the-hgroup-element>hgroup</a></code><li><code id=flow-content:the-hr-element><a href=grouping-content.html#the-hr-element>hr</a></code><li><code id=flow-content:the-i-element><a href=text-level-semantics.html#the-i-element>i</a></code><li><code id=flow-content:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code><li><code id=flow-content:the-img-element><a href=embedded-content.html#the-img-element>img</a></code><li><code id=flow-content:the-input-element><a href=input.html#the-input-element>input</a></code><li><code id=flow-content:the-ins-element><a href=edits.html#the-ins-element>ins</a></code><li><code id=flow-content:the-kbd-element><a href=text-level-semantics.html#the-kbd-element>kbd</a></code><li><code id=flow-content:the-label-element><a href=forms.html#the-label-element>label</a></code><li><code id=flow-content:the-link-element><a href=semantics.html#the-link-element>link</a></code> (if it is <a id=flow-content:allowed-in-the-body href=semantics.html#allowed-in-the-body>allowed in the body</a>)<li><code id=flow-content:the-main-element><a href=grouping-content.html#the-main-element>main</a></code> (if it is a <a id=flow-content:hierarchically-correct-main-element href=grouping-content.html#hierarchically-correct-main-element>hierarchically correct <code>main</code> element</a>)<li><code id=flow-content:the-map-element-2><a href=image-maps.html#the-map-element>map</a></code><li><code id=flow-content:the-mark-element><a href=text-level-semantics.html#the-mark-element>mark</a></code><li><a id=flow-content:mathml-math href=https://w3c.github.io/mathml-core/#the-top-level-math-element data-x-internal=mathml-math>MathML <code>math</code></a><li><code id=flow-content:the-menu-element><a href=grouping-content.html#the-menu-element>menu</a></code><li><code id=flow-content:the-meta-element><a href=semantics.html#the-meta-element>meta</a></code> (if the <code id=flow-content:names:-the-itemprop-attribute><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute is present)<li><code id=flow-content:the-meter-element><a href=form-elements.html#the-meter-element>meter</a></code><li><code id=flow-content:the-nav-element><a href=sections.html#the-nav-element>nav</a></code><li><code id=flow-content:the-noscript-element><a href=scripting.html#the-noscript-element>noscript</a></code><li><code id=flow-content:the-object-element><a href=iframe-embed-object.html#the-object-element>object</a></code><li><code id=flow-content:the-ol-element><a href=grouping-content.html#the-ol-element>ol</a></code><li><code id=flow-content:the-output-element><a href=form-elements.html#the-output-element>output</a></code><li><code id=flow-content:the-p-element><a href=grouping-content.html#the-p-element>p</a></code><li><code id=flow-content:the-picture-element><a href=embedded-content.html#the-picture-element>picture</a></code><li><code id=flow-content:the-pre-element><a href=grouping-content.html#the-pre-element>pre</a></code><li><code id=flow-content:the-progress-element><a href=form-elements.html#the-progress-element>progress</a></code><li><code id=flow-content:the-q-element><a href=text-level-semantics.html#the-q-element>q</a></code><li><code id=flow-content:the-ruby-element><a href=text-level-semantics.html#the-ruby-element>ruby</a></code><li><code id=flow-content:the-s-element><a href=text-level-semantics.html#the-s-element>s</a></code><li><code id=flow-content:the-samp-element><a href=text-level-semantics.html#the-samp-element>samp</a></code><li><code id=flow-content:the-script-element><a href=scripting.html#the-script-element>script</a></code><li><code id=flow-content:the-search-element><a href=grouping-content.html#the-search-element>search</a></code><li><code id=flow-content:the-section-element><a href=sections.html#the-section-element>section</a></code><li><code id=flow-content:the-select-element><a href=form-elements.html#the-select-element>select</a></code><li><code id=flow-content:the-slot-element><a href=scripting.html#the-slot-element>slot</a></code><li><code id=flow-content:the-small-element><a href=text-level-semantics.html#the-small-element>small</a></code><li><code id=flow-content:the-span-element><a href=text-level-semantics.html#the-span-element>span</a></code><li><code id=flow-content:the-strong-element><a href=text-level-semantics.html#the-strong-element>strong</a></code><li><code id=flow-content:the-sub-and-sup-elements><a href=text-level-semantics.html#the-sub-and-sup-elements>sub</a></code><li><code id=flow-content:the-sub-and-sup-elements-2><a href=text-level-semantics.html#the-sub-and-sup-elements>sup</a></code><li><a id=flow-content:svg-svg href=https://svgwg.org/svg2-draft/struct.html#SVGElement data-x-internal=svg-svg>SVG <code>svg</code></a><li><code id=flow-content:the-table-element><a href=tables.html#the-table-element>table</a></code><li><code id=flow-content:the-template-element><a href=scripting.html#the-template-element>template</a></code><li><code id=flow-content:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code><li><code id=flow-content:the-time-element><a href=text-level-semantics.html#the-time-element>time</a></code><li><code id=flow-content:the-u-element><a href=text-level-semantics.html#the-u-element>u</a></code><li><code id=flow-content:the-ul-element><a href=grouping-content.html#the-ul-element>ul</a></code><li><code id=flow-content:the-var-element><a href=text-level-semantics.html#the-var-element>var</a></code><li><code id=flow-content:the-video-element><a href=media.html#the-video-element>video</a></code><li><code id=flow-content:the-wbr-element><a href=text-level-semantics.html#the-wbr-element>wbr</a></code><li><a href=custom-elements.html#autonomous-custom-element id=flow-content:autonomous-custom-element>autonomous custom elements</a><li><a href=#text-content id=flow-content:text-content>text</a></ul> <h6 id=sectioning-content>3.2.5.2.3 Sectioning content<a href=#sectioning-content class=self-link></a></h6> <dfn id=sectioning-content-2 data-export="">Sectioning content</dfn> is content that defines the scope of <code id=sectioning-content:the-header-element><a href=sections.html#the-header-element>header</a></code> and <code id=sectioning-content:the-footer-element><a href=sections.html#the-footer-element>footer</a></code> elements. <ul class="brief category-list"><li><code id=sectioning-content:the-article-element><a href=sections.html#the-article-element>article</a></code><li><code id=sectioning-content:the-aside-element><a href=sections.html#the-aside-element>aside</a></code><li><code id=sectioning-content:the-nav-element><a href=sections.html#the-nav-element>nav</a></code><li><code id=sectioning-content:the-section-element><a href=sections.html#the-section-element>section</a></code></ul> <h6 id=heading-content>3.2.5.2.4 Heading content<a href=#heading-content class=self-link></a></h6> <dfn id=heading-content-2 data-export="">Heading content</dfn> defines the heading of a section (whether explicitly marked up using <a href=#sectioning-content-2 id=heading-content:sectioning-content-2>sectioning content</a> elements, or implied by the heading content itself). <ul class="brief category-list"><li><code id=heading-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code><li><code id=heading-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-2><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code><li><code id=heading-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-3><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code><li><code id=heading-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-4><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code><li><code id=heading-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-5><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code><li><code id=heading-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-6><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code><li><code id=heading-content:the-hgroup-element><a href=sections.html#the-hgroup-element>hgroup</a></code> (if it has a descendant <code id=heading-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-7><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> to <code id=heading-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-8><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code> element)</ul> <h6 id=phrasing-content>3.2.5.2.5 Phrasing content<a href=#phrasing-content class=self-link></a></h6> <dfn id=phrasing-content-2 data-export="">Phrasing content</dfn> is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of <a href=#phrasing-content-2 id=phrasing-content:phrasing-content-2>phrasing content</a> form <a href=#paragraph id=phrasing-content:paragraph>paragraphs</a>. <ul class="brief category-list"><li><code id=phrasing-content:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code><li><code id=phrasing-content:the-abbr-element><a href=text-level-semantics.html#the-abbr-element>abbr</a></code><li><code id=phrasing-content:the-area-element><a href=image-maps.html#the-area-element>area</a></code> (if it is a descendant of a <code id=phrasing-content:the-map-element><a href=image-maps.html#the-map-element>map</a></code> element)<li><code id=phrasing-content:the-audio-element><a href=media.html#the-audio-element>audio</a></code><li><code id=phrasing-content:the-b-element><a href=text-level-semantics.html#the-b-element>b</a></code><li><code id=phrasing-content:the-bdi-element><a href=text-level-semantics.html#the-bdi-element>bdi</a></code><li><code id=phrasing-content:the-bdo-element><a href=text-level-semantics.html#the-bdo-element>bdo</a></code><li><code id=phrasing-content:the-br-element><a href=text-level-semantics.html#the-br-element>br</a></code><li><code id=phrasing-content:the-button-element><a href=form-elements.html#the-button-element>button</a></code><li><code id=phrasing-content:the-canvas-element><a href=canvas.html#the-canvas-element>canvas</a></code><li><code id=phrasing-content:the-cite-element><a href=text-level-semantics.html#the-cite-element>cite</a></code><li><code id=phrasing-content:the-code-element><a href=text-level-semantics.html#the-code-element>code</a></code><li><code id=phrasing-content:the-data-element><a href=text-level-semantics.html#the-data-element>data</a></code><li><code id=phrasing-content:the-datalist-element><a href=form-elements.html#the-datalist-element>datalist</a></code><li><code id=phrasing-content:the-del-element><a href=edits.html#the-del-element>del</a></code><li><code id=phrasing-content:the-dfn-element><a href=text-level-semantics.html#the-dfn-element>dfn</a></code><li><code id=phrasing-content:the-em-element><a href=text-level-semantics.html#the-em-element>em</a></code><li><code id=phrasing-content:the-embed-element><a href=iframe-embed-object.html#the-embed-element>embed</a></code><li><code id=phrasing-content:the-i-element><a href=text-level-semantics.html#the-i-element>i</a></code><li><code id=phrasing-content:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code><li><code id=phrasing-content:the-img-element><a href=embedded-content.html#the-img-element>img</a></code><li><code id=phrasing-content:the-input-element><a href=input.html#the-input-element>input</a></code><li><code id=phrasing-content:the-ins-element><a href=edits.html#the-ins-element>ins</a></code><li><code id=phrasing-content:the-kbd-element><a href=text-level-semantics.html#the-kbd-element>kbd</a></code><li><code id=phrasing-content:the-label-element><a href=forms.html#the-label-element>label</a></code><li><code id=phrasing-content:the-link-element><a href=semantics.html#the-link-element>link</a></code> (if it is <a id=phrasing-content:allowed-in-the-body href=semantics.html#allowed-in-the-body>allowed in the body</a>)<li><code id=phrasing-content:the-map-element-2><a href=image-maps.html#the-map-element>map</a></code><li><code id=phrasing-content:the-mark-element><a href=text-level-semantics.html#the-mark-element>mark</a></code><li><a id=phrasing-content:mathml-math href=https://w3c.github.io/mathml-core/#the-top-level-math-element data-x-internal=mathml-math>MathML <code>math</code></a><li><code id=phrasing-content:the-meta-element><a href=semantics.html#the-meta-element>meta</a></code> (if the <code id=phrasing-content:names:-the-itemprop-attribute><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute is present)<li><code id=phrasing-content:the-meter-element><a href=form-elements.html#the-meter-element>meter</a></code><li><code id=phrasing-content:the-noscript-element><a href=scripting.html#the-noscript-element>noscript</a></code><li><code id=phrasing-content:the-object-element><a href=iframe-embed-object.html#the-object-element>object</a></code><li><code id=phrasing-content:the-output-element><a href=form-elements.html#the-output-element>output</a></code><li><code id=phrasing-content:the-picture-element><a href=embedded-content.html#the-picture-element>picture</a></code><li><code id=phrasing-content:the-progress-element><a href=form-elements.html#the-progress-element>progress</a></code><li><code id=phrasing-content:the-q-element><a href=text-level-semantics.html#the-q-element>q</a></code><li><code id=phrasing-content:the-ruby-element><a href=text-level-semantics.html#the-ruby-element>ruby</a></code><li><code id=phrasing-content:the-s-element><a href=text-level-semantics.html#the-s-element>s</a></code><li><code id=phrasing-content:the-samp-element><a href=text-level-semantics.html#the-samp-element>samp</a></code><li><code id=phrasing-content:the-script-element><a href=scripting.html#the-script-element>script</a></code><li><code id=phrasing-content:the-select-element><a href=form-elements.html#the-select-element>select</a></code><li><code id=phrasing-content:the-slot-element><a href=scripting.html#the-slot-element>slot</a></code><li><code id=phrasing-content:the-small-element><a href=text-level-semantics.html#the-small-element>small</a></code><li><code id=phrasing-content:the-span-element><a href=text-level-semantics.html#the-span-element>span</a></code><li><code id=phrasing-content:the-strong-element><a href=text-level-semantics.html#the-strong-element>strong</a></code><li><code id=phrasing-content:the-sub-and-sup-elements><a href=text-level-semantics.html#the-sub-and-sup-elements>sub</a></code><li><code id=phrasing-content:the-sub-and-sup-elements-2><a href=text-level-semantics.html#the-sub-and-sup-elements>sup</a></code><li><a id=phrasing-content:svg-svg href=https://svgwg.org/svg2-draft/struct.html#SVGElement data-x-internal=svg-svg>SVG <code>svg</code></a><li><code id=phrasing-content:the-template-element><a href=scripting.html#the-template-element>template</a></code><li><code id=phrasing-content:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code><li><code id=phrasing-content:the-time-element><a href=text-level-semantics.html#the-time-element>time</a></code><li><code id=phrasing-content:the-u-element><a href=text-level-semantics.html#the-u-element>u</a></code><li><code id=phrasing-content:the-var-element><a href=text-level-semantics.html#the-var-element>var</a></code><li><code id=phrasing-content:the-video-element><a href=media.html#the-video-element>video</a></code><li><code id=phrasing-content:the-wbr-element><a href=text-level-semantics.html#the-wbr-element>wbr</a></code><li><a href=custom-elements.html#autonomous-custom-element id=phrasing-content:autonomous-custom-element>autonomous custom elements</a><li><a href=#text-content id=phrasing-content:text-content>text</a></ul> Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content, not any flow content. <dfn id=text-content>Text</dfn>, in the context of content models, means either nothing, or <code id=phrasing-content:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes. <a href=#text-content id=phrasing-content:text-content-2>Text</a> is sometimes used as a content model on its own, but is also <a href=#phrasing-content-2 id=phrasing-content:phrasing-content-2-2>phrasing content</a>, and can be <a href=#inter-element-whitespace id=phrasing-content:inter-element-whitespace>inter-element whitespace</a> (if the <code id=phrasing-content:text-2><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes are empty or contain just <a id=phrasing-content:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>). <code id=phrasing-content:text-3><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes and attribute values must consist of <a href=https://infra.spec.whatwg.org/#scalar-value id=phrasing-content:scalar-value data-x-internal=scalar-value>scalar values</a>, excluding <a href=https://infra.spec.whatwg.org/#noncharacter id=phrasing-content:noncharacter data-x-internal=noncharacter>noncharacters</a>, and <a href=https://infra.spec.whatwg.org/#control id=phrasing-content:control data-x-internal=control>controls</a> other than <a id=phrasing-content:space-characters-2 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>. This specification includes extra constraints on the exact value of <code id=phrasing-content:text-4><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes and attribute values depending on their precise context. <h6 id=embedded-content-2>3.2.5.2.6 Embedded content<a href=#embedded-content-2 class=self-link></a></h6> <dfn id=embedded-content-category data-export="">Embedded content</dfn> is content that imports another resource into the document, or content from another vocabulary that is inserted into the document. <ul class="brief category-list"><li><code id=embedded-content-2:the-audio-element><a href=media.html#the-audio-element>audio</a></code><li><code id=embedded-content-2:the-canvas-element><a href=canvas.html#the-canvas-element>canvas</a></code><li><code id=embedded-content-2:the-embed-element><a href=iframe-embed-object.html#the-embed-element>embed</a></code><li><code id=embedded-content-2:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code><li><code id=embedded-content-2:the-img-element><a href=embedded-content.html#the-img-element>img</a></code><li><a id=embedded-content-2:mathml-math href=https://w3c.github.io/mathml-core/#the-top-level-math-element data-x-internal=mathml-math>MathML <code>math</code></a><li><code id=embedded-content-2:the-object-element><a href=iframe-embed-object.html#the-object-element>object</a></code><li><code id=embedded-content-2:the-picture-element><a href=embedded-content.html#the-picture-element>picture</a></code><li><a id=embedded-content-2:svg-svg href=https://svgwg.org/svg2-draft/struct.html#SVGElement data-x-internal=svg-svg>SVG <code>svg</code></a><li><code id=embedded-content-2:the-video-element><a href=media.html#the-video-element>video</a></code></ul> Elements that are from namespaces other than the <a id=embedded-content-2:html-namespace-2 href=https://infra.spec.whatwg.org/#html-namespace data-x-internal=html-namespace-2>HTML namespace</a> and that convey content but not metadata, are <a href=#embedded-content-category id=embedded-content-2:embedded-content-category>embedded content</a> for the purposes of the content models defined in this specification. (For example, MathML or SVG.) Some embedded content elements can have <dfn id=fallback-content>fallback content</dfn>: content that is to be used when the external resource cannot be used (e.g. because it is of an unsupported format). The element definitions state what the fallback is, if any. <h6 id=interactive-content>3.2.5.2.7 Interactive content<a href=#interactive-content class=self-link></a></h6> <dfn id=interactive-content-2 data-export="">Interactive content</dfn> is content that is specifically intended for user interaction. <ul class="brief category-list"><li><code id=interactive-content:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> (if the <code id=interactive-content:attr-hyperlink-href><a href=links.html#attr-hyperlink-href>href</a></code> attribute is present)<li><code id=interactive-content:the-audio-element><a href=media.html#the-audio-element>audio</a></code> (if the <code id=interactive-content:attr-media-controls><a href=media.html#attr-media-controls>controls</a></code> attribute is present)<li><code id=interactive-content:the-button-element><a href=form-elements.html#the-button-element>button</a></code><li><code id=interactive-content:the-details-element><a href=interactive-elements.html#the-details-element>details</a></code><li><code id=interactive-content:the-embed-element><a href=iframe-embed-object.html#the-embed-element>embed</a></code><li><code id=interactive-content:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code><li><code id=interactive-content:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> (if the <code id=interactive-content:attr-hyperlink-usemap><a href=image-maps.html#attr-hyperlink-usemap>usemap</a></code> attribute is present)<li><code id=interactive-content:the-input-element><a href=input.html#the-input-element>input</a></code> (if the <code id=interactive-content:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is not in the <a href="input.html#hidden-state-(type=hidden)" id="interactive-content:hidden-state-(type=hidden)">Hidden</a> state)<li><code id=interactive-content:the-label-element><a href=forms.html#the-label-element>label</a></code><li><code id=interactive-content:the-select-element><a href=form-elements.html#the-select-element>select</a></code><li><code id=interactive-content:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code><li><code id=interactive-content:the-video-element><a href=media.html#the-video-element>video</a></code> (if the <code id=interactive-content:attr-media-controls-2><a href=media.html#attr-media-controls>controls</a></code> attribute is present)</ul> <h6 id=palpable-content>3.2.5.2.8 Palpable content<a href=#palpable-content class=self-link></a></h6> As a general rule, elements whose content model allows any <a href=#flow-content-2 id=palpable-content:flow-content-2>flow content</a> or <a href=#phrasing-content-2 id=palpable-content:phrasing-content-2>phrasing content</a> should have at least one node in its <a href=#concept-html-contents id=palpable-content:concept-html-contents>contents</a> that is <dfn id=palpable-content-2 data-export="">palpable content</dfn> and that does not have the <code id=palpable-content:attr-hidden><a href=interaction.html#attr-hidden>hidden</a></code> attribute specified. <a href=#palpable-content-2 id=palpable-content:palpable-content-2>Palpable content</a> makes an element non-empty by providing either some descendant non-empty <a href=#text-content id=palpable-content:text-content>text</a>, or else something users can hear (<code id=palpable-content:the-audio-element><a href=media.html#the-audio-element>audio</a></code> elements) or view (<code id=palpable-content:the-video-element><a href=media.html#the-video-element>video</a></code>, <code id=palpable-content:the-img-element><a href=embedded-content.html#the-img-element>img</a></code>, or <code id=palpable-content:the-canvas-element><a href=canvas.html#the-canvas-element>canvas</a></code> elements) or otherwise interact with (for example, interactive form controls). This requirement is not a hard requirement, however, as there are many cases where an element can be empty legitimately, for example when it is used as a placeholder which will later be filled in by a script, or when the element is part of a template and would on most pages be filled in but on some pages is not relevant. Conformance checkers are encouraged to provide a mechanism for authors to find elements that fail to fulfill this requirement, as an authoring aid. The following elements are palpable content: <ul class="brief category-list"><li><code id=palpable-content:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code><li><code id=palpable-content:the-abbr-element><a href=text-level-semantics.html#the-abbr-element>abbr</a></code><li><code id=palpable-content:the-address-element><a href=sections.html#the-address-element>address</a></code><li><code id=palpable-content:the-article-element><a href=sections.html#the-article-element>article</a></code><li><code id=palpable-content:the-aside-element><a href=sections.html#the-aside-element>aside</a></code><li><code id=palpable-content:the-audio-element-2><a href=media.html#the-audio-element>audio</a></code> (if the <code id=palpable-content:attr-media-controls><a href=media.html#attr-media-controls>controls</a></code> attribute is present)<li><code id=palpable-content:the-b-element><a href=text-level-semantics.html#the-b-element>b</a></code><li><code id=palpable-content:the-bdi-element><a href=text-level-semantics.html#the-bdi-element>bdi</a></code><li><code id=palpable-content:the-bdo-element><a href=text-level-semantics.html#the-bdo-element>bdo</a></code><li><code id=palpable-content:the-blockquote-element><a href=grouping-content.html#the-blockquote-element>blockquote</a></code><li><code id=palpable-content:the-button-element><a href=form-elements.html#the-button-element>button</a></code><li><code id=palpable-content:the-canvas-element-2><a href=canvas.html#the-canvas-element>canvas</a></code><li><code id=palpable-content:the-cite-element><a href=text-level-semantics.html#the-cite-element>cite</a></code><li><code id=palpable-content:the-code-element><a href=text-level-semantics.html#the-code-element>code</a></code><li><code id=palpable-content:the-data-element><a href=text-level-semantics.html#the-data-element>data</a></code><li><code id=palpable-content:the-del-element><a href=edits.html#the-del-element>del</a></code><li><code id=palpable-content:the-details-element><a href=interactive-elements.html#the-details-element>details</a></code><li><code id=palpable-content:the-dfn-element><a href=text-level-semantics.html#the-dfn-element>dfn</a></code><li><code id=palpable-content:the-div-element><a href=grouping-content.html#the-div-element>div</a></code><li><code id=palpable-content:the-dl-element><a href=grouping-content.html#the-dl-element>dl</a></code> (if the element's children include at least one name-value group)<li><code id=palpable-content:the-em-element><a href=text-level-semantics.html#the-em-element>em</a></code><li><code id=palpable-content:the-embed-element><a href=iframe-embed-object.html#the-embed-element>embed</a></code><li><code id=palpable-content:the-fieldset-element><a href=form-elements.html#the-fieldset-element>fieldset</a></code><li><code id=palpable-content:the-figure-element><a href=grouping-content.html#the-figure-element>figure</a></code><li><code id=palpable-content:the-footer-element><a href=sections.html#the-footer-element>footer</a></code><li><code id=palpable-content:the-form-element><a href=forms.html#the-form-element>form</a></code><li><code id=palpable-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code><li><code id=palpable-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-2><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code><li><code id=palpable-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-3><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code><li><code id=palpable-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-4><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code><li><code id=palpable-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-5><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code><li><code id=palpable-content:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-6><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code><li><code id=palpable-content:the-header-element><a href=sections.html#the-header-element>header</a></code><li><code id=palpable-content:the-hgroup-element><a href=sections.html#the-hgroup-element>hgroup</a></code><li><code id=palpable-content:the-i-element><a href=text-level-semantics.html#the-i-element>i</a></code><li><code id=palpable-content:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code><li><code id=palpable-content:the-img-element-2><a href=embedded-content.html#the-img-element>img</a></code><li><code id=palpable-content:the-input-element><a href=input.html#the-input-element>input</a></code> (if the <code id=palpable-content:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is not in the <a href="input.html#hidden-state-(type=hidden)" id="palpable-content:hidden-state-(type=hidden)">Hidden</a> state)<li><code id=palpable-content:the-ins-element><a href=edits.html#the-ins-element>ins</a></code><li><code id=palpable-content:the-kbd-element><a href=text-level-semantics.html#the-kbd-element>kbd</a></code><li><code id=palpable-content:the-label-element><a href=forms.html#the-label-element>label</a></code><li><code id=palpable-content:the-main-element><a href=grouping-content.html#the-main-element>main</a></code><li><code id=palpable-content:the-map-element><a href=image-maps.html#the-map-element>map</a></code><li><code id=palpable-content:the-mark-element><a href=text-level-semantics.html#the-mark-element>mark</a></code><li><a id=palpable-content:mathml-math href=https://w3c.github.io/mathml-core/#the-top-level-math-element data-x-internal=mathml-math>MathML <code>math</code></a><li><code id=palpable-content:the-menu-element><a href=grouping-content.html#the-menu-element>menu</a></code> (if the element's children include at least one <code id=palpable-content:the-li-element><a href=grouping-content.html#the-li-element>li</a></code> element)<li><code id=palpable-content:the-meter-element><a href=form-elements.html#the-meter-element>meter</a></code><li><code id=palpable-content:the-nav-element><a href=sections.html#the-nav-element>nav</a></code><li><code id=palpable-content:the-object-element><a href=iframe-embed-object.html#the-object-element>object</a></code><li><code id=palpable-content:the-ol-element><a href=grouping-content.html#the-ol-element>ol</a></code> (if the element's children include at least one <code id=palpable-content:the-li-element-2><a href=grouping-content.html#the-li-element>li</a></code> element)<li><code id=palpable-content:the-output-element><a href=form-elements.html#the-output-element>output</a></code><li><code id=palpable-content:the-p-element><a href=grouping-content.html#the-p-element>p</a></code><li><code id=palpable-content:the-picture-element><a href=embedded-content.html#the-picture-element>picture</a></code><li><code id=palpable-content:the-pre-element><a href=grouping-content.html#the-pre-element>pre</a></code><li><code id=palpable-content:the-progress-element><a href=form-elements.html#the-progress-element>progress</a></code><li><code id=palpable-content:the-q-element><a href=text-level-semantics.html#the-q-element>q</a></code><li><code id=palpable-content:the-ruby-element><a href=text-level-semantics.html#the-ruby-element>ruby</a></code><li><code id=palpable-content:the-s-element><a href=text-level-semantics.html#the-s-element>s</a></code><li><code id=palpable-content:the-samp-element><a href=text-level-semantics.html#the-samp-element>samp</a></code><li><code id=palpable-content:the-search-element><a href=grouping-content.html#the-search-element>search</a></code><li><code id=palpable-content:the-section-element><a href=sections.html#the-section-element>section</a></code><li><code id=palpable-content:the-select-element><a href=form-elements.html#the-select-element>select</a></code><li><code id=palpable-content:the-small-element><a href=text-level-semantics.html#the-small-element>small</a></code><li><code id=palpable-content:the-span-element><a href=text-level-semantics.html#the-span-element>span</a></code><li><code id=palpable-content:the-strong-element><a href=text-level-semantics.html#the-strong-element>strong</a></code><li><code id=palpable-content:the-sub-and-sup-elements><a href=text-level-semantics.html#the-sub-and-sup-elements>sub</a></code><li><code id=palpable-content:the-sub-and-sup-elements-2><a href=text-level-semantics.html#the-sub-and-sup-elements>sup</a></code><li><a id=palpable-content:svg-svg href=https://svgwg.org/svg2-draft/struct.html#SVGElement data-x-internal=svg-svg>SVG <code>svg</code></a><li><code id=palpable-content:the-table-element><a href=tables.html#the-table-element>table</a></code><li><code id=palpable-content:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code><li><code id=palpable-content:the-time-element><a href=text-level-semantics.html#the-time-element>time</a></code><li><code id=palpable-content:the-u-element><a href=text-level-semantics.html#the-u-element>u</a></code><li><code id=palpable-content:the-ul-element><a href=grouping-content.html#the-ul-element>ul</a></code> (if the element's children include at least one <code id=palpable-content:the-li-element-3><a href=grouping-content.html#the-li-element>li</a></code> element)<li><code id=palpable-content:the-var-element><a href=text-level-semantics.html#the-var-element>var</a></code><li><code id=palpable-content:the-video-element-2><a href=media.html#the-video-element>video</a></code><li><a href=custom-elements.html#autonomous-custom-element id=palpable-content:autonomous-custom-element>autonomous custom elements</a><li><a href=#text-content id=palpable-content:text-content-2>text</a> that is not <a href=#inter-element-whitespace id=palpable-content:inter-element-whitespace>inter-element whitespace</a></ul> <h6 id=script-supporting-elements>3.2.5.2.9 Script-supporting elements<a href=#script-supporting-elements class=self-link></a></h6> <dfn id=script-supporting-elements-2>Script-supporting elements</dfn> are those that do not <a href=#represents id=script-supporting-elements:represents>represent</a> anything themselves (i.e. they are not rendered), but are used to support scripts, e.g. to provide functionality for the user. The following elements are script-supporting elements: <ul class="brief category-list"><li><code id=script-supporting-elements:the-script-element><a href=scripting.html#the-script-element>script</a></code><li><code id=script-supporting-elements:the-template-element><a href=scripting.html#the-template-element>template</a></code></ul> <h5 id=transparent-content-models>3.2.5.3 Transparent content models<a href=#transparent-content-models class=self-link></a></h5> Some elements are described as <dfn id=transparent>transparent</dfn>; they have "transparent" in the description of their content model. The content model of a <a href=#transparent id=transparent-content-models:transparent>transparent</a> element is derived from the content model of its parent element: the elements required in the part of the content model that is "transparent" are the same elements as required in the part of the content model of the parent of the transparent element in which the transparent element finds itself. <div class=example> For instance, an <code id=transparent-content-models:the-ins-element><a href=edits.html#the-ins-element>ins</a></code> element inside a <code id=transparent-content-models:the-ruby-element><a href=text-level-semantics.html#the-ruby-element>ruby</a></code> element cannot contain an <code id=transparent-content-models:the-rt-element><a href=text-level-semantics.html#the-rt-element>rt</a></code> element, because the part of the <code id=transparent-content-models:the-ruby-element-2><a href=text-level-semantics.html#the-ruby-element>ruby</a></code> element's content model that allows <code id=transparent-content-models:the-ins-element-2><a href=edits.html#the-ins-element>ins</a></code> elements is the part that allows <a href=#phrasing-content-2 id=transparent-content-models:phrasing-content-2>phrasing content</a>, and the <code id=transparent-content-models:the-rt-element-2><a href=text-level-semantics.html#the-rt-element>rt</a></code> element is not <a href=#phrasing-content-2 id=transparent-content-models:phrasing-content-2-2>phrasing content</a>. </div> In some cases, where transparent elements are nested in each other, the process has to be applied iteratively. <div class=example> Consider the following markup fragment: <pre><code class='html'><c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>object</c-><c- p>><</c-><c- f>param</c-><c- p>><</c-><c- f>ins</c-><c- p>><</c-><c- f>map</c-><c- p>><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>"/"</c-><c- p>></c->Apples<c- p></</c-><c- f>a</c-><c- p>></</c-><c- f>map</c-><c- p>></</c-><c- f>ins</c-><c- p>></</c-><c- f>object</c-><c- p>></</c-><c- f>p</c-><c- p>></c-></code></pre> To check whether "Apples" is allowed inside the <code id=transparent-content-models:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> element, the content models are examined. The <code id=transparent-content-models:the-a-element-2><a href=text-level-semantics.html#the-a-element>a</a></code> element's content model is transparent, as is the <code id=transparent-content-models:the-map-element><a href=image-maps.html#the-map-element>map</a></code> element's, as is the <code id=transparent-content-models:the-ins-element-3><a href=edits.html#the-ins-element>ins</a></code> element's, as is the part of the <code id=transparent-content-models:the-object-element><a href=iframe-embed-object.html#the-object-element>object</a></code> element's in which the <code id=transparent-content-models:the-ins-element-4><a href=edits.html#the-ins-element>ins</a></code> element is found. The <code id=transparent-content-models:the-object-element-2><a href=iframe-embed-object.html#the-object-element>object</a></code> element is found in the <code id=transparent-content-models:the-p-element><a href=grouping-content.html#the-p-element>p</a></code> element, whose content model is <a href=#phrasing-content-2 id=transparent-content-models:phrasing-content-2-3>phrasing content</a>. Thus, "Apples" is allowed, as text is phrasing content. </div> When a transparent element has no parent, then the part of its content model that is "transparent" must instead be treated as accepting any <a href=#flow-content-2 id=transparent-content-models:flow-content-2>flow content</a>. <h5 id=paragraphs>3.2.5.4 Paragraphs<a href=#paragraphs class=self-link></a></h5> The term <a href=#paragraph id=paragraphs:paragraph>paragraph</a> as defined in this section is used for more than just the definition of the <code id=paragraphs:the-p-element><a href=grouping-content.html#the-p-element>p</a></code> element. The <a href=#paragraph id=paragraphs:paragraph-2>paragraph</a> concept defined here is used to describe how to interpret documents. The <code id=paragraphs:the-p-element-2><a href=grouping-content.html#the-p-element>p</a></code> element is merely one of several ways of marking up a <a href=#paragraph id=paragraphs:paragraph-3>paragraph</a>. A <dfn id=paragraph>paragraph</dfn> is typically a run of <a href=#phrasing-content-2 id=paragraphs:phrasing-content-2>phrasing content</a> that forms a block of text with one or more sentences that discuss a particular topic, as in typography, but can also be used for more general thematic grouping. For instance, an address is also a paragraph, as is a part of a form, a byline, or a stanza in a poem. <div class=example> In the following example, there are two paragraphs in a section. There is also a heading, which contains phrasing content that is not a paragraph. Note how the comments and <a href=#inter-element-whitespace id=paragraphs:inter-element-whitespace>inter-element whitespace</a> do not form paragraphs. <pre><code class='html'><c- p><</c-><c- f>section</c-><c- p>></c-> <c- p><</c-><c- f>h2</c-><c- p>></c->Example of paragraphs<c- p></</c-><c- f>h2</c-><c- p>></c-> This is the <c- p><</c-><c- f>em</c-><c- p>></c->first<c- p></</c-><c- f>em</c-><c- p>></c-> paragraph in this example. <c- p><</c-><c- f>p</c-><c- p>></c->This is the second.<c- p></</c-><c- f>p</c-><c- p>></c-> <c- c></c-> <c- p></</c-><c- f>section</c-><c- p>></c-></code></pre> </div> Paragraphs in <a href=#flow-content-2 id=paragraphs:flow-content-2>flow content</a> are defined relative to what the document looks like without the <code id=paragraphs:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code>, <code id=paragraphs:the-ins-element><a href=edits.html#the-ins-element>ins</a></code>, <code id=paragraphs:the-del-element><a href=edits.html#the-del-element>del</a></code>, and <code id=paragraphs:the-map-element><a href=image-maps.html#the-map-element>map</a></code> elements complicating matters, since those elements, with their hybrid content models, can straddle paragraph boundaries, as shown in the first two examples below. Generally, having elements straddle paragraph boundaries is best avoided. Maintaining such markup can be difficult. <div class=example> The following example takes the markup from the earlier example and puts <code id=paragraphs:the-ins-element-2><a href=edits.html#the-ins-element>ins</a></code> and <code id=paragraphs:the-del-element-2><a href=edits.html#the-del-element>del</a></code> elements around some of the markup to show that the text was changed (though in this case, the changes admittedly don't make much sense). Notice how this example has exactly the same paragraphs as the previous one, despite the <code id=paragraphs:the-ins-element-3><a href=edits.html#the-ins-element>ins</a></code> and <code id=paragraphs:the-del-element-3><a href=edits.html#the-del-element>del</a></code> elements — the <code id=paragraphs:the-ins-element-4><a href=edits.html#the-ins-element>ins</a></code> element straddles the heading and the first paragraph, and the <code id=paragraphs:the-del-element-4><a href=edits.html#the-del-element>del</a></code> element straddles the boundary between the two paragraphs. <pre><code class='html'><c- p><</c-><c- f>section</c-><c- p>></c-> <c- p><</c-><c- f>ins</c-><c- p>><</c-><c- f>h2</c-><c- p>></c->Example of paragraphs<c- p></</c-><c- f>h2</c-><c- p>></c-> This is the <c- p><</c-><c- f>em</c-><c- p>></c->first<c- p></</c-><c- f>em</c-><c- p>></c-> paragraph in<c- p></</c-><c- f>ins</c-><c- p>></c-> this example<c- p><</c-><c- f>del</c-><c- p>></c->. <c- p><</c-><c- f>p</c-><c- p>></c->This is the second.<c- p></</c-><c- f>p</c-><c- p>></</c-><c- f>del</c-><c- p>></c-> <c- c></c-> <c- p></</c-><c- f>section</c-><c- p>></c-></code></pre> </div> Let <var>view</var> be a view of the DOM that replaces all <code id=paragraphs:the-a-element-2><a href=text-level-semantics.html#the-a-element>a</a></code>, <code id=paragraphs:the-ins-element-5><a href=edits.html#the-ins-element>ins</a></code>, <code id=paragraphs:the-del-element-5><a href=edits.html#the-del-element>del</a></code>, and <code id=paragraphs:the-map-element-2><a href=image-maps.html#the-map-element>map</a></code> elements in the document with their <a href=#concept-html-contents id=paragraphs:concept-html-contents>contents</a>. Then, in <var>view</var>, for each run of sibling <a href=#phrasing-content-2 id=paragraphs:phrasing-content-2-2>phrasing content</a> nodes uninterrupted by other types of content, in an element that accepts content other than <a href=#phrasing-content-2 id=paragraphs:phrasing-content-2-3>phrasing content</a> as well as <a href=#phrasing-content-2 id=paragraphs:phrasing-content-2-4>phrasing content</a>, let <var>first</var> be the first node of the run, and let <var>last</var> be the last node of the run. For each such run that consists of at least one node that is neither <a href=#embedded-content-category id=paragraphs:embedded-content-category>embedded content</a> nor <a href=#inter-element-whitespace id=paragraphs:inter-element-whitespace-2>inter-element whitespace</a>, a paragraph exists in the original DOM from immediately before <var>first</var> to immediately after <var>last</var>. (Paragraphs can thus span across <code id=paragraphs:the-a-element-3><a href=text-level-semantics.html#the-a-element>a</a></code>, <code id=paragraphs:the-ins-element-6><a href=edits.html#the-ins-element>ins</a></code>, <code id=paragraphs:the-del-element-6><a href=edits.html#the-del-element>del</a></code>, and <code id=paragraphs:the-map-element-3><a href=image-maps.html#the-map-element>map</a></code> elements.) Conformance checkers may warn authors of cases where they have paragraphs that overlap each other (this can happen with <code id=paragraphs:the-object-element><a href=iframe-embed-object.html#the-object-element>object</a></code>, <code id=paragraphs:the-video-element><a href=media.html#the-video-element>video</a></code>, <code id=paragraphs:the-audio-element><a href=media.html#the-audio-element>audio</a></code>, and <code id=paragraphs:the-canvas-element><a href=canvas.html#the-canvas-element>canvas</a></code> elements, and indirectly through elements in other namespaces that allow HTML to be further embedded therein, like <a id=paragraphs:svg-svg href=https://svgwg.org/svg2-draft/struct.html#SVGElement data-x-internal=svg-svg>SVG <code>svg</code></a> or <a id=paragraphs:mathml-math href=https://w3c.github.io/mathml-core/#the-top-level-math-element data-x-internal=mathml-math>MathML <code>math</code></a>). A <a href=#paragraph id=paragraphs:paragraph-4>paragraph</a> is also formed explicitly by <code id=paragraphs:the-p-element-3><a href=grouping-content.html#the-p-element>p</a></code> elements. The <code id=paragraphs:the-p-element-4><a href=grouping-content.html#the-p-element>p</a></code> 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. <div class=example> In the following example, the link spans half of the first paragraph, all of the heading separating the two paragraphs, and half of the second paragraph. It straddles the paragraphs and the heading. <pre><code class='html'><c- p><</c-><c- f>header</c-><c- p>></c-> Welcome! <c- p><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>"about.html"</c-><c- p>></c-> This is home of... <c- p><</c-><c- f>h1</c-><c- p>></c->The Falcons!<c- p></</c-><c- f>h1</c-><c- p>></c-> The Lockheed Martin multirole jet fighter aircraft! <c- p></</c-><c- f>a</c-><c- p>></c-> This page discusses the F-16 Fighting Falcon's innermost secrets. <c- p></</c-><c- f>header</c-><c- p>></c-></code></pre> Here is another way of marking this up, this time showing the paragraphs explicitly, and splitting the one link element into three: <pre><code class='html'><c- p><</c-><c- f>header</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c->Welcome! <c- p><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>"about.html"</c-><c- p>></c->This is home of...<c- p></</c-><c- f>a</c-><c- p>></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>h1</c-><c- p>><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>"about.html"</c-><c- p>></c->The Falcons!<c- p></</c-><c- f>a</c-><c- p>></</c-><c- f>h1</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>"about.html"</c-><c- p>></c->The Lockheed Martin multirole jet fighter aircraft!<c- p></</c-><c- f>a</c-><c- p>></c-> This page discusses the F-16 Fighting Falcon's innermost secrets.<c- p></</c-><c- f>p</c-><c- p>></c-> <c- p></</c-><c- f>header</c-><c- p>></c-></code></pre> </div> <div class=example> It is possible for paragraphs to overlap when using certain elements that define fallback content. For example, in the following section: <pre><code class='html'><c- p><</c-><c- f>section</c-><c- p>></c-> <c- p><</c-><c- f>h2</c-><c- p>></c->My Cats<c- p></</c-><c- f>h2</c-><c- p>></c-> You can play with my cat simulator. <c- p><</c-><c- f>object</c-> <c- e>data</c-><c- o>=</c-><c- s>"cats.sim"</c-><c- p>></c-> To see the cat simulator, use one of the following links: <c- p><</c-><c- f>ul</c-><c- p>></c-> <c- p><</c-><c- f>li</c-><c- p>><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>"cats.sim"</c-><c- p>></c->Download simulator file<c- p></</c-><c- f>a</c-><c- p>></c-> <c- p><</c-><c- f>li</c-><c- p>><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>"https://sims.example.com/watch?v=LYds5xY4INU"</c-><c- p>></c->Use online simulator<c- p></</c-><c- f>a</c-><c- p>></c-> <c- p></</c-><c- f>ul</c-><c- p>></c-> Alternatively, upgrade to the Mellblom Browser. <c- p></</c-><c- f>object</c-><c- p>></c-> I'm quite proud of it. <c- p></</c-><c- f>section</c-><c- p>></c-></code></pre> There are five paragraphs: <ol class=brief><li>The paragraph that says "You can play with my cat simulator. object I'm quite proud of it.", where object is the <code id=paragraphs:the-object-element-2><a href=iframe-embed-object.html#the-object-element>object</a></code> element.<li>The paragraph that says "To see the cat simulator, use one of the following links:".<li>The paragraph that says "Download simulator file".<li>The paragraph that says "Use online simulator".<li>The paragraph that says "Alternatively, upgrade to the Mellblom Browser.".</ol> The first paragraph is overlapped by the other four. A user agent that supports the "cats.sim" resource will only show the first one, but a user agent that shows the fallback will confusingly show the first sentence of the first paragraph as if it was in the same paragraph as the second one, and will show the last paragraph as if it was at the start of the second sentence of the first paragraph. To avoid this confusion, explicit <code id=paragraphs:the-p-element-5><a href=grouping-content.html#the-p-element>p</a></code> elements can be used. For example: <pre><code class='html'><c- p><</c-><c- f>section</c-><c- p>></c-> <c- p><</c-><c- f>h2</c-><c- p>></c->My Cats<c- p></</c-><c- f>h2</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c->You can play with my cat simulator.<c- p></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>object</c-> <c- e>data</c-><c- o>=</c-><c- s>"cats.sim"</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c->To see the cat simulator, use one of the following links:<c- p></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>ul</c-><c- p>></c-> <c- p><</c-><c- f>li</c-><c- p>><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>"cats.sim"</c-><c- p>></c->Download simulator file<c- p></</c-><c- f>a</c-><c- p>></c-> <c- p><</c-><c- f>li</c-><c- p>><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>"https://sims.example.com/watch?v=LYds5xY4INU"</c-><c- p>></c->Use online simulator<c- p></</c-><c- f>a</c-><c- p>></c-> <c- p></</c-><c- f>ul</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c->Alternatively, upgrade to the Mellblom Browser.<c- p></</c-><c- f>p</c-><c- p>></c-> <c- p></</c-><c- f>object</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c->I'm quite proud of it.<c- p></</c-><c- f>p</c-><c- p>></c-> <c- p></</c-><c- f>section</c-><c- p>></c-></code></pre> </div> <h4 id=global-attributes>3.2.6 <dfn>Global attributes</dfn><a href=#global-attributes class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn>MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes title="Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.">Global_attributes</a></div></div> The following attributes are common to and may be specified on all <a id=global-attributes:html-elements href=infrastructure.html#html-elements>HTML elements</a> (even those not defined in this specification): <ul class=brief><li><code id=global-attributes:the-accesskey-attribute><a href=interaction.html#the-accesskey-attribute>accesskey</a></code><li><code id=global-attributes:attr-autocapitalize><a href=interaction.html#attr-autocapitalize>autocapitalize</a></code><li><code id=global-attributes:attr-autocorrect><a href=interaction.html#attr-autocorrect>autocorrect</a></code><li><code id=global-attributes:attr-fe-autofocus><a href=interaction.html#attr-fe-autofocus>autofocus</a></code><li><code id=global-attributes:attr-contenteditable><a href=interaction.html#attr-contenteditable>contenteditable</a></code><li><code id=global-attributes:attr-dir><a href=#attr-dir>dir</a></code><li><code id=global-attributes:attr-draggable><a href=dnd.html#attr-draggable>draggable</a></code><li><code id=global-attributes:attr-enterkeyhint><a href=interaction.html#attr-enterkeyhint>enterkeyhint</a></code><li><code id=global-attributes:attr-hidden><a href=interaction.html#attr-hidden>hidden</a></code><li><code id=global-attributes:the-inert-attribute><a href=interaction.html#the-inert-attribute>inert</a></code><li><code id=global-attributes:attr-inputmode><a href=interaction.html#attr-inputmode>inputmode</a></code><li><code id=global-attributes:attr-is><a href=custom-elements.html#attr-is>is</a></code><li><code id=global-attributes:attr-itemid><a href=microdata.html#attr-itemid>itemid</a></code><li><code id=global-attributes:names:-the-itemprop-attribute><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code><li><code id=global-attributes:attr-itemref><a href=microdata.html#attr-itemref>itemref</a></code><li><code id=global-attributes:attr-itemscope><a href=microdata.html#attr-itemscope>itemscope</a></code><li><code id=global-attributes:attr-itemtype><a href=microdata.html#attr-itemtype>itemtype</a></code><li><code id=global-attributes:attr-lang><a href=#attr-lang>lang</a></code><li><code id=global-attributes:attr-nonce><a href=urls-and-fetching.html#attr-nonce>nonce</a></code><li><code id=global-attributes:attr-popover><a href=popover.html#attr-popover>popover</a></code><li><code id=global-attributes:attr-spellcheck><a href=interaction.html#attr-spellcheck>spellcheck</a></code><li><code id=global-attributes:attr-style><a href=#attr-style>style</a></code><li><code id=global-attributes:attr-tabindex><a href=interaction.html#attr-tabindex>tabindex</a></code><li><code id=global-attributes:attr-title><a href=#attr-title>title</a></code><li><code id=global-attributes:attr-translate><a href=#attr-translate>translate</a></code><li><code id=global-attributes:attr-writingsuggestions><a href=interaction.html#attr-writingsuggestions>writingsuggestions</a></code></ul> These attributes are only defined by this specification as attributes for <a id=global-attributes:html-elements-2 href=infrastructure.html#html-elements>HTML elements</a>. When this specification refers to elements having these attributes, elements from namespaces that are not defined as having these attributes must not be considered as being elements with these attributes. <div class=example> For example, in the following XML fragment, the "<code>bogus</code>" element does not have a <code id=global-attributes:attr-dir-2><a href=#attr-dir>dir</a></code> attribute as defined in this specification, despite having an attribute with the literal name "<code>dir</code>". Thus, <a href=#the-directionality id=global-attributes:the-directionality>the directionality</a> of the inner-most <code id=global-attributes:the-span-element><a href=text-level-semantics.html#the-span-element>span</a></code> element is '<a href=#concept-rtl id=global-attributes:concept-rtl>rtl</a>', inherited from the <code id=global-attributes:the-div-element><a href=grouping-content.html#the-div-element>div</a></code> element indirectly through the "<code>bogus</code>" element. <pre class=bad><code class='html'><c- p><</c-><c- f>div</c-> <c- e>xmlns</c-><c- o>=</c-><c- s>"http://www.w3.org/1999/xhtml"</c-> <c- e>dir</c-><c- o>=</c-><c- s>"rtl"</c-><c- p>></c-> <c- p><</c-><c- f>bogus</c-> <c- e>xmlns</c-><c- o>=</c-><c- s>"https://example.net/ns"</c-> <c- e>dir</c-><c- o>=</c-><c- s>"ltr"</c-><c- p>></c-> <c- p><</c-><c- f>span</c-> <c- e>xmlns</c-><c- o>=</c-><c- s>"http://www.w3.org/1999/xhtml"</c-><c- p>></c-> <c- p></</c-><c- f>span</c-><c- p>></c-> <c- p></</c-><c- f>bogus</c-><c- p>></c-> <c- p></</c-><c- f>div</c-><c- p>></c-></code></pre> </div> <hr> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot title="The slot global attribute assigns a slot in a shadow DOM shadow tree to an element: An element with a slot attribute is assigned to the slot created by the <slot> element whose name attribute's value matches that slot attribute's value.">Global_attributes/slot</a>Support in all current engines.<div class=support>Firefox63+Safari10+Chrome53+<hr>Opera?Edge79+<hr>Edge (Legacy)NoInternet Explorer?<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div><cite>DOM</cite> defines the user agent requirements for the <dfn data-dfn-for=global id=classes data-dfn-type=element-attr><code>class</code></dfn>, <dfn data-dfn-for=global id=the-id-attribute data-dfn-type=element-attr><code>id</code></dfn>, and <dfn data-dfn-for=global id=attr-slot data-dfn-type=element-attr><code>slot</code></dfn> attributes for any element in any namespace. <a href=references.html#refsDOM>[DOM]</a> The <code id=global-attributes:classes><a href=#classes>class</a></code>, <code id=global-attributes:the-id-attribute><a href=#the-id-attribute>id</a></code>, and <code id=global-attributes:attr-slot><a href=#attr-slot>slot</a></code> attributes may be specified on all <a id=global-attributes:html-elements-3 href=infrastructure.html#html-elements>HTML elements</a>. When specified on <a id=global-attributes:html-elements-4 href=infrastructure.html#html-elements>HTML elements</a>, the <code id=global-attributes:classes-2><a href=#classes>class</a></code> attribute must have a value that is a <a id=global-attributes:set-of-space-separated-tokens href=common-microsyntaxes.html#set-of-space-separated-tokens>set of space-separated tokens</a> representing the various classes that the element belongs to. <div class=note> Assigning classes to an element affects class matching in selectors in CSS, the <code id=global-attributes:dom-document-getelementsbyclassname><a data-x-internal=dom-document-getelementsbyclassname href=https://dom.spec.whatwg.org/#dom-document-getelementsbyclassname>getElementsByClassName()</a></code> method in the DOM, and other such features. There are no additional restrictions on the tokens authors can use in the <code id=global-attributes:classes-3><a href=#classes>class</a></code> attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content. </div> When specified on <a id=global-attributes:html-elements-5 href=infrastructure.html#html-elements>HTML elements</a>, the <code id=global-attributes:the-id-attribute-2><a href=#the-id-attribute>id</a></code> attribute value must be unique amongst all the <a href=https://dom.spec.whatwg.org/#concept-id id=global-attributes:concept-id data-x-internal=concept-id>IDs</a> in the element's <a id=global-attributes:tree href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a> and must contain at least one character. The value must not contain any <a id=global-attributes:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>. <div class=note> The <code id=global-attributes:the-id-attribute-3><a href=#the-id-attribute>id</a></code> attribute specifies its element's <a href=https://dom.spec.whatwg.org/#concept-id id=global-attributes:concept-id-2 data-x-internal=concept-id>unique identifier (ID)</a>. There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc. An element's <a href=https://dom.spec.whatwg.org/#concept-id id=global-attributes:concept-id-3 data-x-internal=concept-id>unique identifier</a> can be used for a variety of purposes, most notably as a way to link to specific parts of a document using <a href=https://url.spec.whatwg.org/#concept-url-fragment id=global-attributes:concept-url-fragment data-x-internal=concept-url-fragment>fragments</a>, as a way to target an element when scripting, and as a way to style a specific element from CSS. </div> Identifiers are opaque strings. Particular meanings should not be derived from the value of the <code id=global-attributes:the-id-attribute-4><a href=#the-id-attribute>id</a></code> attribute. There are no conformance requirements for the <code id=global-attributes:attr-slot-2><a href=#attr-slot>slot</a></code> attribute specific to <a id=global-attributes:html-elements-6 href=infrastructure.html#html-elements>HTML elements</a>. The <code id=global-attributes:attr-slot-3><a href=#attr-slot>slot</a></code> attribute is used to <a id=global-attributes:assign-a-slot href=https://dom.spec.whatwg.org/#assign-a-slot data-x-internal=assign-a-slot>assign a slot</a> to an element: an element with a <code id=global-attributes:attr-slot-4><a href=#attr-slot>slot</a></code> attribute is <a href=https://dom.spec.whatwg.org/#assign-a-slot id=global-attributes:assign-a-slot-2 data-x-internal=assign-a-slot>assigned</a> to the <a href=https://dom.spec.whatwg.org/#concept-slot id=global-attributes:concept-slot data-x-internal=concept-slot>slot</a> created by the <code id=global-attributes:the-slot-element><a href=scripting.html#the-slot-element>slot</a></code> element whose <a href=scripting.html#attr-slot-name id=global-attributes:attr-slot-name>name</a> attribute's value matches that <code id=global-attributes:attr-slot-5><a href=#attr-slot>slot</a></code> attribute's value — but only if that <code id=global-attributes:the-slot-element-2><a href=scripting.html#the-slot-element>slot</a></code> element finds itself in the <a id=global-attributes:shadow-tree href=https://dom.spec.whatwg.org/#concept-shadow-tree data-x-internal=shadow-tree>shadow tree</a> whose <a id=global-attributes:root href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a>'s <a href=https://dom.spec.whatwg.org/#concept-documentfragment-host id=global-attributes:concept-documentfragment-host data-x-internal=concept-documentfragment-host>host</a> has the corresponding <code id=global-attributes:attr-slot-6><a href=#attr-slot>slot</a></code> attribute value. <hr> To enable assistive technology products to expose a more fine-grained interface than is otherwise possible with HTML elements and attributes, a set of <a href=#wai-aria>annotations for assistive technology products</a> can be specified (the ARIA <code id=global-attributes:attr-aria-role><a href=infrastructure.html#attr-aria-role>role</a></code> and <code id=global-attributes:attr-aria-*><a href=infrastructure.html#attr-aria-*>aria-*</a></code> attributes). <a href=references.html#refsARIA>[ARIA]</a> <hr> The following <a id=global-attributes:event-handler-content-attributes href=webappapis.html#event-handler-content-attributes>event handler content attributes</a> may be specified on any <a href=infrastructure.html#html-elements id=global-attributes:html-elements-7>HTML element</a>: <ul class=brief><li><code id=global-attributes:handler-onauxclick><a href=webappapis.html#handler-onauxclick>onauxclick</a></code><li><code id=global-attributes:handler-onbeforeinput><a href=webappapis.html#handler-onbeforeinput>onbeforeinput</a></code><li><code id=global-attributes:handler-onbeforematch><a href=webappapis.html#handler-onbeforematch>onbeforematch</a></code><li><code id=global-attributes:handler-onbeforetoggle><a href=webappapis.html#handler-onbeforetoggle>onbeforetoggle</a></code><li><code id=global-attributes:handler-onblur><a href=webappapis.html#handler-onblur>onblur</a></code>*<li><code id=global-attributes:handler-oncancel><a href=webappapis.html#handler-oncancel>oncancel</a></code><li><code id=global-attributes:handler-oncanplay><a href=webappapis.html#handler-oncanplay>oncanplay</a></code><li><code id=global-attributes:handler-oncanplaythrough><a href=webappapis.html#handler-oncanplaythrough>oncanplaythrough</a></code><li><code id=global-attributes:handler-onchange><a href=webappapis.html#handler-onchange>onchange</a></code><li><code id=global-attributes:handler-onclick><a href=webappapis.html#handler-onclick>onclick</a></code><li><code id=global-attributes:handler-onclose><a href=webappapis.html#handler-onclose>onclose</a></code><li><code id=global-attributes:handler-oncontextlost><a href=webappapis.html#handler-oncontextlost>oncontextlost</a></code><li><code id=global-attributes:handler-oncontextmenu><a href=webappapis.html#handler-oncontextmenu>oncontextmenu</a></code><li><code id=global-attributes:handler-oncontextrestored><a href=webappapis.html#handler-oncontextrestored>oncontextrestored</a></code><li><code id=global-attributes:handler-oncopy><a href=webappapis.html#handler-oncopy>oncopy</a></code><li><code id=global-attributes:handler-oncuechange><a href=webappapis.html#handler-oncuechange>oncuechange</a></code><li><code id=global-attributes:handler-oncut><a href=webappapis.html#handler-oncut>oncut</a></code><li><code id=global-attributes:handler-ondblclick><a href=webappapis.html#handler-ondblclick>ondblclick</a></code><li><code id=global-attributes:handler-ondrag><a href=webappapis.html#handler-ondrag>ondrag</a></code><li><code id=global-attributes:handler-ondragend><a href=webappapis.html#handler-ondragend>ondragend</a></code><li><code id=global-attributes:handler-ondragenter><a href=webappapis.html#handler-ondragenter>ondragenter</a></code><li><code id=global-attributes:handler-ondragleave><a href=webappapis.html#handler-ondragleave>ondragleave</a></code><li><code id=global-attributes:handler-ondragover><a href=webappapis.html#handler-ondragover>ondragover</a></code><li><code id=global-attributes:handler-ondragstart><a href=webappapis.html#handler-ondragstart>ondragstart</a></code><li><code id=global-attributes:handler-ondrop><a href=webappapis.html#handler-ondrop>ondrop</a></code><li><code id=global-attributes:handler-ondurationchange><a href=webappapis.html#handler-ondurationchange>ondurationchange</a></code><li><code id=global-attributes:handler-onemptied><a href=webappapis.html#handler-onemptied>onemptied</a></code><li><code id=global-attributes:handler-onended><a href=webappapis.html#handler-onended>onended</a></code><li><code id=global-attributes:handler-onerror><a href=webappapis.html#handler-onerror>onerror</a></code>*<li><code id=global-attributes:handler-onfocus><a href=webappapis.html#handler-onfocus>onfocus</a></code>*<li><code id=global-attributes:handler-onformdata><a href=webappapis.html#handler-onformdata>onformdata</a></code><li><code id=global-attributes:handler-oninput><a href=webappapis.html#handler-oninput>oninput</a></code><li><code id=global-attributes:handler-oninvalid><a href=webappapis.html#handler-oninvalid>oninvalid</a></code><li><code id=global-attributes:handler-onkeydown><a href=webappapis.html#handler-onkeydown>onkeydown</a></code><li><code id=global-attributes:handler-onkeypress><a href=webappapis.html#handler-onkeypress>onkeypress</a></code><li><code id=global-attributes:handler-onkeyup><a href=webappapis.html#handler-onkeyup>onkeyup</a></code><li><code id=global-attributes:handler-onload><a href=webappapis.html#handler-onload>onload</a></code>*<li><code id=global-attributes:handler-onloadeddata><a href=webappapis.html#handler-onloadeddata>onloadeddata</a></code><li><code id=global-attributes:handler-onloadedmetadata><a href=webappapis.html#handler-onloadedmetadata>onloadedmetadata</a></code><li><code id=global-attributes:handler-onloadstart><a href=webappapis.html#handler-onloadstart>onloadstart</a></code><li><code id=global-attributes:handler-onmousedown><a href=webappapis.html#handler-onmousedown>onmousedown</a></code><li><code id=global-attributes:handler-onmouseenter><a href=webappapis.html#handler-onmouseenter>onmouseenter</a></code><li><code id=global-attributes:handler-onmouseleave><a href=webappapis.html#handler-onmouseleave>onmouseleave</a></code><li><code id=global-attributes:handler-onmousemove><a href=webappapis.html#handler-onmousemove>onmousemove</a></code><li><code id=global-attributes:handler-onmouseout><a href=webappapis.html#handler-onmouseout>onmouseout</a></code><li><code id=global-attributes:handler-onmouseover><a href=webappapis.html#handler-onmouseover>onmouseover</a></code><li><code id=global-attributes:handler-onmouseup><a href=webappapis.html#handler-onmouseup>onmouseup</a></code><li><code id=global-attributes:handler-onpaste><a href=webappapis.html#handler-onpaste>onpaste</a></code><li><code id=global-attributes:handler-onpause><a href=webappapis.html#handler-onpause>onpause</a></code><li><code id=global-attributes:handler-onplay><a href=webappapis.html#handler-onplay>onplay</a></code><li><code id=global-attributes:handler-onplaying><a href=webappapis.html#handler-onplaying>onplaying</a></code><li><code id=global-attributes:handler-onprogress><a href=webappapis.html#handler-onprogress>onprogress</a></code><li><code id=global-attributes:handler-onratechange><a href=webappapis.html#handler-onratechange>onratechange</a></code><li><code id=global-attributes:handler-onreset><a href=webappapis.html#handler-onreset>onreset</a></code><li><code id=global-attributes:handler-onresize><a href=webappapis.html#handler-onresize>onresize</a></code>*<li><code id=global-attributes:handler-onscroll><a href=webappapis.html#handler-onscroll>onscroll</a></code>*<li><code id=global-attributes:handler-onscrollend><a href=webappapis.html#handler-onscrollend>onscrollend</a></code>*<li><code id=global-attributes:handler-onsecuritypolicyviolation><a href=webappapis.html#handler-onsecuritypolicyviolation>onsecuritypolicyviolation</a></code><li><code id=global-attributes:handler-onseeked><a href=webappapis.html#handler-onseeked>onseeked</a></code><li><code id=global-attributes:handler-onseeking><a href=webappapis.html#handler-onseeking>onseeking</a></code><li><code id=global-attributes:handler-onselect><a href=webappapis.html#handler-onselect>onselect</a></code><li><code id=global-attributes:handler-onslotchange><a href=webappapis.html#handler-onslotchange>onslotchange</a></code><li><code id=global-attributes:handler-onstalled><a href=webappapis.html#handler-onstalled>onstalled</a></code><li><code id=global-attributes:handler-onsubmit><a href=webappapis.html#handler-onsubmit>onsubmit</a></code><li><code id=global-attributes:handler-onsuspend><a href=webappapis.html#handler-onsuspend>onsuspend</a></code><li><code id=global-attributes:handler-ontimeupdate><a href=webappapis.html#handler-ontimeupdate>ontimeupdate</a></code><li><code id=global-attributes:handler-ontoggle><a href=webappapis.html#handler-ontoggle>ontoggle</a></code><li><code id=global-attributes:handler-onvolumechange><a href=webappapis.html#handler-onvolumechange>onvolumechange</a></code><li><code id=global-attributes:handler-onwaiting><a href=webappapis.html#handler-onwaiting>onwaiting</a></code><li><code id=global-attributes:handler-onwheel><a href=webappapis.html#handler-onwheel>onwheel</a></code></ul> The attributes marked with an asterisk have a different meaning when specified on <code id=global-attributes:the-body-element><a href=sections.html#the-body-element>body</a></code> elements as those elements expose <a id=global-attributes:event-handlers href=webappapis.html#event-handlers>event handlers</a> of the <code id=global-attributes:window><a href=nav-history-apis.html#window>Window</a></code> object with the same names. While these attributes apply to all elements, they are not useful on all elements. For example, only <a href=media.html#media-element id=global-attributes:media-element>media elements</a> will ever receive a <code id=global-attributes:event-media-volumechange><a href=media.html#event-media-volumechange>volumechange</a></code> event fired by the user agent. <hr> <a href=#custom-data-attribute id=global-attributes:custom-data-attribute>Custom data attributes</a> (e.g. <code>data-foldername</code> or <code>data-msgid</code>) can be specified on any <a href=infrastructure.html#html-elements id=global-attributes:html-elements-8>HTML element</a>, to store custom data, state, annotations, and similar, specific to the page. <hr> In <a id=global-attributes:html-documents href=https://dom.spec.whatwg.org/#html-document data-x-internal=html-documents>HTML documents</a>, elements in the <a id=global-attributes:html-namespace-2 href=https://infra.spec.whatwg.org/#html-namespace data-x-internal=html-namespace-2>HTML namespace</a> may have an <code>xmlns</code> attribute specified, if, and only if, it has the exact value "<code>http://www.w3.org/1999/xhtml</code>". This does not apply to <a id=global-attributes:xml-documents href=https://dom.spec.whatwg.org/#xml-document data-x-internal=xml-documents>XML documents</a>. In HTML, the <code>xmlns</code> 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 <a id=global-attributes:html-parser href=parsing.html#html-parser>HTML parser</a>, the attribute ends up in no namespace, not the "<code>http://www.w3.org/2000/xmlns/</code>" namespace like namespace declaration attributes in XML do. In XML, an <code>xmlns</code> attribute is part of the namespace declaration mechanism, and an element cannot actually have an <code>xmlns</code> attribute in no namespace specified. <hr> <cite>XML</cite> also allows the use of the <code id=global-attributes:attr-xml-space><a data-x-internal=attr-xml-space href=https://www.w3.org/TR/xml/#sec-white-space>xml:space</a></code> attribute in the <a id=global-attributes:xml-namespace href=https://infra.spec.whatwg.org/#xml-namespace data-x-internal=xml-namespace>XML namespace</a> on any element in an <a href=https://dom.spec.whatwg.org/#xml-document id=global-attributes:xml-documents-2 data-x-internal=xml-documents>XML document</a>. This attribute has no effect on <a id=global-attributes:html-elements-9 href=infrastructure.html#html-elements>HTML elements</a>, as the default behavior in HTML is to preserve whitespace. <a href=references.html#refsXML>[XML]</a> There is no way to serialize the <code id=global-attributes:attr-xml-space-2><a data-x-internal=attr-xml-space href=https://www.w3.org/TR/xml/#sec-white-space>xml:space</a></code> attribute on <a id=global-attributes:html-elements-10 href=infrastructure.html#html-elements>HTML elements</a> in the <code id=global-attributes:text/html><a href=iana.html#text/html>text/html</a></code> syntax. <h5 id=the-title-attribute>3.2.6.1 The <code id=the-title-attribute:attr-title><a href=#attr-title>title</a></code> attribute<a href=#the-title-attribute class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title title="The title global attribute contains text representing advisory information related to the element it belongs to.">Global_attributes/title</a>Support in all current engines.<div class=support>Firefox1+Safari4+Chrome1+<hr>Opera?Edge79+<hr>Edge (Legacy)12+Internet ExplorerYes<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div> The <dfn data-dfn-for=html-global id=attr-title data-dfn-type=element-attr><code>title</code></dfn> attribute <a href=#represents id=the-title-attribute:represents>represents</a> advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; on <a href=#interactive-content-2 id=the-title-attribute:interactive-content-2>interactive content</a>, it could be a label for, or instructions for, use of the element; and so forth. The value is text. Relying on the <code id=the-title-attribute:attr-title-2><a href=#attr-title>title</a></code> attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g., requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet). If this attribute is omitted from an element, then it implies that the <code id=the-title-attribute:attr-title-3><a href=#attr-title>title</a></code> attribute of the nearest ancestor <a href=infrastructure.html#html-elements id=the-title-attribute:html-elements>HTML element</a> with a <code id=the-title-attribute:attr-title-4><a href=#attr-title>title</a></code> attribute set is also relevant to this element. Setting the attribute overrides this, explicitly stating that the advisory information of any ancestors is not relevant to this element. Setting the attribute to the empty string indicates that the element has no advisory information. If the <code id=the-title-attribute:attr-title-5><a href=#attr-title>title</a></code> attribute's value contains U+000A LINE FEED (LF) characters, the content is split into multiple lines. Each U+000A LINE FEED (LF) character represents a line break. <div class=example> Caution is advised with respect to the use of newlines in <code id=the-title-attribute:attr-title-6><a href=#attr-title>title</a></code> attributes. For instance, the following snippet actually defines an abbreviation's expansion with a line break in it: <pre class=bad><code class='html'><c- p><</c-><c- f>p</c-><c- p>></c->My logs show that there was some interest in <c- p><</c-><c- f>abbr</c-> <c- e>title</c-><c- o>=</c-><c- s>"Hypertext</c-> <c- s>Transport Protocol"</c-><c- p>></c->HTTP<c- p></</c-><c- f>abbr</c-><c- p>></c-> today.<c- p></</c-><c- f>p</c-><c- p>></c-></code></pre> </div> Some elements, such as <code id=the-title-attribute:the-link-element><a href=semantics.html#the-link-element>link</a></code>, <code id=the-title-attribute:the-abbr-element><a href=text-level-semantics.html#the-abbr-element>abbr</a></code>, and <code id=the-title-attribute:the-input-element><a href=input.html#the-input-element>input</a></code>, define additional semantics for the <code id=the-title-attribute:attr-title-7><a href=#attr-title>title</a></code> attribute beyond the semantics described above. The <dfn id=advisory-information>advisory information</dfn> of an element is the value that the following algorithm returns, with the algorithm being aborted once a value is returned. When the algorithm returns the empty string, then there is no advisory information. <ol><li>If the element has a <code id=the-title-attribute:attr-title-8><a href=#attr-title>title</a></code> attribute, then return the result of running <a id=the-title-attribute:normalize-newlines href=https://infra.spec.whatwg.org/#normalize-newlines data-x-internal=normalize-newlines>normalize newlines</a> on its value.<li>If the element has a parent element, then return the parent element's <a href=#advisory-information id=the-title-attribute:advisory-information>advisory information</a>.<li>Return the empty string.</ol> User agents should inform the user when elements have <a href=#advisory-information id=the-title-attribute:advisory-information-2>advisory information</a>, otherwise the information would not be discoverable. <hr> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/title title="The HTMLElement.title property represents the title of the element: the text usually displayed in a 'tooltip' popup when the mouse is over the node.">HTMLElement/title</a>Support in all current engines.<div class=support>Firefox1+Safari3+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer5.5+<hr>Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div>The <dfn data-dfn-for=HTMLElement id=dom-title data-dfn-type=attribute><code>title</code></dfn> IDL attribute must <a id=the-title-attribute:reflect href=common-dom-interfaces.html#reflect>reflect</a> the <code id=the-title-attribute:attr-title-9><a href=#attr-title>title</a></code> content attribute. <h5 id=the-lang-and-xml:lang-attributes>3.2.6.2 The <code id=the-lang-and-xml:lang-attributes:attr-lang><a href=#attr-lang>lang</a></code> and <code id=the-lang-and-xml:lang-attributes:attr-xml-lang><a data-x-internal=attr-xml-lang href=https://www.w3.org/TR/xml/#sec-lang-tag>xml:lang</a></code> attributes<a href=#the-lang-and-xml:lang-attributes class=self-link></a></h5> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang title="The lang global attribute helps define the language of an element: the language that non-editable elements are written in, or the language that the editable elements should be written in by the user. The attribute contains a single "language tag" in the format defined in RFC 5646: Tags for Identifying Languages (also known as BCP 47).">Global_attributes/lang</a>Support in all current engines.<div class=support>Firefox1+Safari4+Chrome1+<hr>Opera?Edge79+<hr>Edge (Legacy)12+Internet ExplorerYes<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div>The <dfn data-dfn-for=html-global id=attr-lang data-dfn-type=element-attr><code>lang</code></dfn> attribute (in no namespace) specifies the primary language for the element's contents and for any of the element's attributes that contain text. Its value must be a valid BCP 47 language tag, or the empty string. Setting the attribute to the empty string indicates that the primary language is unknown. <a href=references.html#refsBCP47>[BCP47]</a> The <dfn id=attr-xml-lang><a href=https://www.w3.org/TR/xml/#sec-lang-tag><code>lang</code></a></dfn> attribute in the <a id=the-lang-and-xml:lang-attributes:xml-namespace href=https://infra.spec.whatwg.org/#xml-namespace data-x-internal=xml-namespace>XML namespace</a> is defined in XML. <a href=references.html#refsXML>[XML]</a> If these attributes are omitted from an element, then the language of this element is the same as the language of its parent element, if any (except for <code id=the-lang-and-xml:lang-attributes:the-slot-element><a href=scripting.html#the-slot-element>slot</a></code> elements in a <a id=the-lang-and-xml:lang-attributes:shadow-tree href=https://dom.spec.whatwg.org/#concept-shadow-tree data-x-internal=shadow-tree>shadow tree</a>). The <code id=the-lang-and-xml:lang-attributes:attr-lang-2><a href=#attr-lang>lang</a></code> attribute in no namespace may be used on any <a href=infrastructure.html#html-elements id=the-lang-and-xml:lang-attributes:html-elements>HTML element</a>. The <a href=https://www.w3.org/TR/xml/#sec-lang-tag id=the-lang-and-xml:lang-attributes:attr-xml-lang-2 data-x-internal=attr-xml-lang><code>lang</code> attribute in the XML namespace</a> may be used on <a id=the-lang-and-xml:lang-attributes:html-elements-2 href=infrastructure.html#html-elements>HTML elements</a> in <a id=the-lang-and-xml:lang-attributes:xml-documents href=https://dom.spec.whatwg.org/#xml-document data-x-internal=xml-documents>XML documents</a>, as well as elements in other namespaces if the relevant specifications allow it (in particular, MathML and SVG allow <a href=https://www.w3.org/TR/xml/#sec-lang-tag id=the-lang-and-xml:lang-attributes:attr-xml-lang-3 data-x-internal=attr-xml-lang><code>lang</code> attributes in the XML namespace</a> to be specified on their elements). If both the <code id=the-lang-and-xml:lang-attributes:attr-lang-3><a href=#attr-lang>lang</a></code> attribute in no namespace and the <a href=https://www.w3.org/TR/xml/#sec-lang-tag id=the-lang-and-xml:lang-attributes:attr-xml-lang-4 data-x-internal=attr-xml-lang><code>lang</code> attribute in the XML namespace</a> are specified on the same element, they must have exactly the same value when compared in an <a id=the-lang-and-xml:lang-attributes:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> manner. Authors must not use the <a href=https://www.w3.org/TR/xml/#sec-lang-tag id=the-lang-and-xml:lang-attributes:attr-xml-lang-5 data-x-internal=attr-xml-lang><code>lang</code> attribute in the XML namespace</a> on <a id=the-lang-and-xml:lang-attributes:html-elements-3 href=infrastructure.html#html-elements>HTML elements</a> in <a id=the-lang-and-xml:lang-attributes:html-documents href=https://dom.spec.whatwg.org/#html-document data-x-internal=html-documents>HTML documents</a>. To ease migration to and from XML, authors may specify an attribute in no namespace with no prefix and with the literal localname "<code>xml:lang</code>" on <a id=the-lang-and-xml:lang-attributes:html-elements-4 href=infrastructure.html#html-elements>HTML elements</a> in <a id=the-lang-and-xml:lang-attributes:html-documents-2 href=https://dom.spec.whatwg.org/#html-document data-x-internal=html-documents>HTML documents</a>, but such attributes must only be specified if a <code id=the-lang-and-xml:lang-attributes:attr-lang-4><a href=#attr-lang>lang</a></code> attribute in no namespace is also specified, and both attributes must have the same value when compared in an <a id=the-lang-and-xml:lang-attributes:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> manner. The attribute in no namespace with no prefix and with the literal localname "<code>xml:lang</code>" has no effect on language processing. <hr> To determine the <dfn data-dfn-for=Node id=language data-export="">language</dfn> of a node, user agents must use the first appropriate step in the following list: <dl class=switch><dt>If the node is an element that has a <a href=https://www.w3.org/TR/xml/#sec-lang-tag id=the-lang-and-xml:lang-attributes:attr-xml-lang-6 data-x-internal=attr-xml-lang><code>lang</code> attribute in the XML namespace</a> set<dd>Use the value of that attribute.<dt>If the node is an <a href=infrastructure.html#html-elements id=the-lang-and-xml:lang-attributes:html-elements-5>HTML element</a> or an element in the <a id=the-lang-and-xml:lang-attributes:svg-namespace href=https://infra.spec.whatwg.org/#svg-namespace data-x-internal=svg-namespace>SVG namespace</a>, and it has a <code id=the-lang-and-xml:lang-attributes:attr-lang-5><a href=#attr-lang>lang</a></code> in no namespace attribute set<dd>Use the value of that attribute.<dt>If the node's parent is a <a id=the-lang-and-xml:lang-attributes:shadow-root href=https://dom.spec.whatwg.org/#concept-shadow-root data-x-internal=shadow-root>shadow root</a><dd>Use the <a href=#language id=the-lang-and-xml:lang-attributes:language>language</a> of that <a id=the-lang-and-xml:lang-attributes:shadow-root-2 href=https://dom.spec.whatwg.org/#concept-shadow-root data-x-internal=shadow-root>shadow root</a>'s <a href=https://dom.spec.whatwg.org/#concept-documentfragment-host id=the-lang-and-xml:lang-attributes:concept-documentfragment-host data-x-internal=concept-documentfragment-host>host</a>.<dt>If the node's <a id=the-lang-and-xml:lang-attributes:parent-element href=https://dom.spec.whatwg.org/#parent-element data-x-internal=parent-element>parent element</a> is not null<dd>Use the <a href=#language id=the-lang-and-xml:lang-attributes:language-2>language</a> of that <a id=the-lang-and-xml:lang-attributes:parent-element-2 href=https://dom.spec.whatwg.org/#parent-element data-x-internal=parent-element>parent element</a>.<dt>Otherwise<dd>If there is a <a id=the-lang-and-xml:lang-attributes:pragma-set-default-language href=semantics.html#pragma-set-default-language>pragma-set default language</a> set, then that is the language of the node. If there is no <a id=the-lang-and-xml:lang-attributes:pragma-set-default-language-2 href=semantics.html#pragma-set-default-language>pragma-set default language</a> set, then language information from a higher-level protocol (such as HTTP), if any, must be used as the final fallback language instead. In the absence of any such language information, and in cases where the higher-level protocol reports multiple languages, the language of the node is unknown, and the corresponding language tag is the empty string.</dl> If the resulting value is not a recognized language tag, then it must be treated as an unknown language having the given language tag, distinct from all other languages. For the purposes of round-tripping or communicating with other services that expect language tags, user agents should pass unknown language tags through unmodified, and tagged as being BCP 47 language tags, so that subsequent services do not interpret the data as another type of language description. <a href=references.html#refsBCP47>[BCP47]</a> Thus, for instance, an element with <code>lang="xyzzy"</code> would be matched by the selector <code>:lang(xyzzy)</code> (e.g. in CSS), but it would not be matched by <code>:lang(abcde)</code>, 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). If the resulting value is the empty string, then it must be interpreted as meaning that the language of the node is explicitly unknown. <hr> User agents may use the element's language to determine proper processing or rendering (e.g. in the selection of appropriate fonts or pronunciations, for dictionary selection, or for the user interfaces of form controls such as date pickers). <hr> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lang title="The HTMLElement.lang property gets or sets the base language of an element's attribute values and text content.">HTMLElement/lang</a>Support in all current engines.<div class=support>Firefox1+Safari3+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer5.5+<hr>Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div>The <dfn data-dfn-for=HTMLElement id=dom-lang data-dfn-type=attribute><code>lang</code></dfn> IDL attribute must <a id=the-lang-and-xml:lang-attributes:reflect href=common-dom-interfaces.html#reflect>reflect</a> the <code id=the-lang-and-xml:lang-attributes:attr-lang-6><a href=#attr-lang>lang</a></code> content attribute in no namespace. <h5 id=the-translate-attribute>3.2.6.3 The <code id=the-translate-attribute:attr-translate><a href=#attr-translate>translate</a></code> attribute<a href=#the-translate-attribute class=self-link></a></h5> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate title="The translate global attribute is an enumerated attribute that is used to specify whether an element's translatable attribute values and its Text node children should be translated when the page is localized, or whether to leave them unchanged.">Global_attributes/translate</a>Support in all current engines.<div class=support>Firefox111+Safari6+Chrome19+<hr>Opera?Edge79+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div>The <dfn data-dfn-for=html-global id=attr-translate data-dfn-type=element-attr><code>translate</code></dfn> attribute is used to specify whether an element's attribute values and the values of its <code id=the-translate-attribute:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node children are to be translated when the page is localized, or whether to leave them unchanged. It is an attribute is an <a id=the-translate-attribute:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the following keywords and states: <table><thead><tr><th>Keyword <th>State <th>Brief description <tbody><tr><td><dfn data-dfn-for=html-global/translate id=attr-translate-yes-keyword data-dfn-type=attr-value><code>yes</code></dfn> <td rowspan=2><dfn id=attr-translate-yes-state>yes</dfn> <td rowspan=2>Sets <a href=#translation-mode id=the-translate-attribute:translation-mode>translation mode</a> to <a href=#translate-enabled id=the-translate-attribute:translate-enabled>translate-enabled</a>. <tr><td>(the empty string) <tr><td><dfn data-dfn-for=html-global/translate id=attr-translate-no-keyword data-dfn-type=attr-value><code>no</code></dfn> <td><dfn id=attr-translate-no-state>no</dfn> <td>Sets <a href=#translation-mode id=the-translate-attribute:translation-mode-2>translation mode</a> to <a href=#no-translate id=the-translate-attribute:no-translate>no-translate</a>. </table> The attribute's <a href=common-microsyntaxes.html#missing-value-default>missing value default</a> and <a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a> are both the <dfn id=attr-translate-inherit-state>inherit</dfn> state. Each element (even non-HTML elements) has a <dfn id=translation-mode>translation mode</dfn>, which is in either the <a href=#translate-enabled id=the-translate-attribute:translate-enabled-2>translate-enabled</a> state or the <a href=#no-translate id=the-translate-attribute:no-translate-2>no-translate</a> state. If an <a href=infrastructure.html#html-elements id=the-translate-attribute:html-elements>HTML element</a>'s <code id=the-translate-attribute:attr-translate-2><a href=#attr-translate>translate</a></code> attribute is in the <a href=#attr-translate-yes-state id=the-translate-attribute:attr-translate-yes-state>yes</a> state, then the element's <a href=#translation-mode id=the-translate-attribute:translation-mode-3>translation mode</a> is in the <a href=#translate-enabled id=the-translate-attribute:translate-enabled-3>translate-enabled</a> state; otherwise, if the element's <code id=the-translate-attribute:attr-translate-3><a href=#attr-translate>translate</a></code> attribute is in the <a href=#attr-translate-no-state id=the-translate-attribute:attr-translate-no-state>no</a> state, then the element's <a href=#translation-mode id=the-translate-attribute:translation-mode-4>translation mode</a> is in the <a href=#no-translate id=the-translate-attribute:no-translate-3>no-translate</a> state. Otherwise, either the element's <code id=the-translate-attribute:attr-translate-4><a href=#attr-translate>translate</a></code> attribute is in the <a href=#attr-translate-inherit-state id=the-translate-attribute:attr-translate-inherit-state>inherit</a> state, or the element is not an <a href=infrastructure.html#html-elements id=the-translate-attribute:html-elements-2>HTML element</a> and thus does not have a <code id=the-translate-attribute:attr-translate-5><a href=#attr-translate>translate</a></code> attribute; in either case, the element's <a href=#translation-mode id=the-translate-attribute:translation-mode-5>translation mode</a> is in the same state as its <a id=the-translate-attribute:parent-element href=https://dom.spec.whatwg.org/#parent-element data-x-internal=parent-element>parent element</a>'s, if any, or in the <a href=#translate-enabled id=the-translate-attribute:translate-enabled-4>translate-enabled</a> state, if the element's <a id=the-translate-attribute:parent-element-2 href=https://dom.spec.whatwg.org/#parent-element data-x-internal=parent-element>parent element</a> is null. When an element is in the <dfn id=translate-enabled>translate-enabled</dfn> state, the element's <a href=#translatable-attributes id=the-translate-attribute:translatable-attributes>translatable attributes</a> and the values of its <code id=the-translate-attribute:text-2><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node children are to be translated when the page is localized. When an element is in the <dfn id=no-translate>no-translate</dfn> state, the element's attribute values and the values of its <code id=the-translate-attribute:text-3><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node children are to be left as-is when the page is localized, e.g. because the element contains a person's name or a name of a computer program. The following attributes are <dfn id=translatable-attributes>translatable attributes</dfn>: <ul class=brief><li><code id=the-translate-attribute:attr-th-abbr><a href=tables.html#attr-th-abbr>abbr</a></code> on <code id=the-translate-attribute:the-th-element><a href=tables.html#the-th-element>th</a></code> elements<li><code>alt</code> on <code id=the-translate-attribute:attr-area-alt><a href=image-maps.html#attr-area-alt>area</a></code>, <code id=the-translate-attribute:attr-img-alt><a href=embedded-content.html#attr-img-alt>img</a></code>, and <code id=the-translate-attribute:attr-input-alt><a href=input.html#attr-input-alt>input</a></code> elements<li><code id=the-translate-attribute:attr-meta-content><a href=semantics.html#attr-meta-content>content</a></code> on <code id=the-translate-attribute:the-meta-element><a href=semantics.html#the-meta-element>meta</a></code> elements, if the <code id=the-translate-attribute:attr-meta-name><a href=semantics.html#attr-meta-name>name</a></code> attribute specifies a metadata name whose value is known to be translatable<li><code id=the-translate-attribute:attr-hyperlink-download><a href=links.html#attr-hyperlink-download>download</a></code> on <code id=the-translate-attribute:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=the-translate-attribute:the-area-element><a href=image-maps.html#the-area-element>area</a></code> elements<li><code>label</code> on <code id=the-translate-attribute:attr-optgroup-label><a href=form-elements.html#attr-optgroup-label>optgroup</a></code>, <code id=the-translate-attribute:attr-option-label><a href=form-elements.html#attr-option-label>option</a></code>, and <code id=the-translate-attribute:attr-track-label><a href=media.html#attr-track-label>track</a></code> elements<li><code id=the-translate-attribute:attr-lang><a href=#attr-lang>lang</a></code> on <a id=the-translate-attribute:html-elements-3 href=infrastructure.html#html-elements>HTML elements</a>; must be "translated" to match the language used in the translation<li><code>placeholder</code> on <code id=the-translate-attribute:attr-input-placeholder><a href=input.html#attr-input-placeholder>input</a></code> and <code id=the-translate-attribute:attr-textarea-placeholder><a href=form-elements.html#attr-textarea-placeholder>textarea</a></code> elements<li><code id=the-translate-attribute:attr-iframe-srcdoc><a href=iframe-embed-object.html#attr-iframe-srcdoc>srcdoc</a></code> on <code id=the-translate-attribute:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> elements; must be parsed and recursively processed<li><code id=the-translate-attribute:attr-style><a href=#attr-style>style</a></code> on <a id=the-translate-attribute:html-elements-4 href=infrastructure.html#html-elements>HTML elements</a>; must be parsed and recursively processed (e.g. for the values of <a id="the-translate-attribute:'content'" href=https://drafts.csswg.org/css2/#content%E2%91%A0 data-x-internal="'content'">'content'</a> properties)<li><code id=the-translate-attribute:attr-title><a href=#attr-title>title</a></code> on all <a id=the-translate-attribute:html-elements-5 href=infrastructure.html#html-elements>HTML elements</a><li><code id=the-translate-attribute:attr-input-value><a href=input.html#attr-input-value>value</a></code> on <code id=the-translate-attribute:the-input-element><a href=input.html#the-input-element>input</a></code> elements with a <code id=the-translate-attribute:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#button-state-(type=button)" id="the-translate-attribute:button-state-(type=button)">Button</a> state or the <a href="input.html#reset-button-state-(type=reset)" id="the-translate-attribute:reset-button-state-(type=reset)">Reset Button</a> state</ul> Other specifications may define other attributes that are also <a href=#translatable-attributes id=the-translate-attribute:translatable-attributes-2>translatable attributes</a>. For example, <cite>ARIA</cite> would define the <code id=the-translate-attribute:attr-aria-label><a data-x-internal=attr-aria-label href=https://w3c.github.io/aria/#aria-label>aria-label</a></code> attribute as translatable. <hr> The <dfn data-dfn-for=HTMLElement id=dom-translate data-dfn-type=attribute><code>translate</code></dfn> IDL attribute must, on getting, return true if the element's <a href=#translation-mode id=the-translate-attribute:translation-mode-6>translation mode</a> is <a href=#translate-enabled id=the-translate-attribute:translate-enabled-5>translate-enabled</a>, and false otherwise. On setting, it must set the content attribute's value to "<code>yes</code>" if the new value is true, and set the content attribute's value to "<code>no</code>" otherwise. <div class=example> In this example, everything in the document is to be translated when the page is localized, except the sample keyboard input and sample program output: <pre><code class='html'><c- cp><!DOCTYPE HTML></c-> <c- p><</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>en</c-><c- p>></c-> <c- c></c-> <c- p><</c-><c- f>head</c-><c- p>></c-> <c- p><</c-><c- f>title</c-><c- p>></c->The Bee Game<c- p></</c-><c- f>title</c-><c- p>></c-> <c- c></c-> <c- p></</c-><c- f>head</c-><c- p>></c-> <c- p><</c-><c- f>body</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c->The Bee Game is a text adventure game in English.<c- p></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c->When the game launches, the first thing you should do is type <c- p><</c-><c- f>kbd</c-> <c- e>translate</c-><c- o>=</c-><c- s>no</c-><c- p>></c->eat honey<c- p></</c-><c- f>kbd</c-><c- p>></c->. The game will respond with:<c- p></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>pre</c-><c- p>><</c-><c- f>samp</c-> <c- e>translate</c-><c- o>=</c-><c- s>no</c-><c- p>></c->Yum yum! That was some good honey!<c- p></</c-><c- f>samp</c-><c- p>></</c-><c- f>pre</c-><c- p>></c-> <c- p></</c-><c- f>body</c-><c- p>></c-> <c- p></</c-><c- f>html</c-><c- p>></c-></code></pre> </div> <h5 id=the-dir-attribute>3.2.6.4 The <code id=the-dir-attribute:attr-dir><a href=#attr-dir>dir</a></code> attribute<a href=#the-dir-attribute class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir title="The dir global attribute is an enumerated attribute that indicates the directionality of the element's text.">Global_attributes/dir</a>Support in all current engines.<div class=support>Firefox1+Safari4+Chrome1+<hr>Opera?Edge79+<hr>Edge (Legacy)?Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div> The <dfn data-dfn-for=html-global id=attr-dir data-dfn-type=element-attr><code>dir</code></dfn> attribute is an <a id=the-dir-attribute:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the following keywords and states: <table><thead><tr><th>Keyword <th>State <th>Brief description <tbody><tr><td><dfn data-dfn-for=html-global/dir id=attr-dir-ltr data-dfn-type=attr-value><code>ltr</code></dfn> <td><dfn id=attr-dir-ltr-state>ltr</dfn> <td>The contents of the element are explicitly directionally isolated left-to-right text. <tr><td><dfn data-dfn-for=html-global/dir id=attr-dir-rtl data-dfn-type=attr-value><code>rtl</code></dfn> <td><dfn id=attr-dir-rtl-state>rtl</dfn> <td>The contents of the element are explicitly directionally isolated right-to-left text. <tr><td><dfn data-dfn-for=html-global/dir id=attr-dir-auto data-dfn-type=attr-value><code>auto</code></dfn> <td><dfn id=attr-dir-auto-state>auto</dfn> <td>The contents of the element are explicitly directionally isolated text, but the direction is to be determined programmatically using the contents of the element (as described below). </table> <div class=note> The heuristic used by the <a href=#attr-dir-auto-state id=the-dir-attribute:attr-dir-auto-state>auto</a> 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. <a href=references.html#refsBIDI>[BIDI]</a> For <code id=the-dir-attribute:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> and <code id=the-dir-attribute:the-pre-element><a href=grouping-content.html#the-pre-element>pre</a></code> elements, the heuristic is applied on a per-paragraph level. </div> The attribute's <a href=common-microsyntaxes.html#missing-value-default>missing value default</a> and <a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a> are both the <dfn id=attr-dir-undefined-state>undefined</dfn> state. <hr> The <dfn id=the-directionality>directionality</dfn> of an element (any element, not just an <a href=infrastructure.html#html-elements id=the-dir-attribute:html-elements>HTML element</a>) is either '<dfn id=concept-ltr>ltr</dfn>' or '<dfn id=concept-rtl>rtl</dfn>'. To compute the <a href=#the-directionality id=the-dir-attribute:the-directionality>directionality</a> given an element <var>element</var>, switch on <var>element</var>'s <code id=the-dir-attribute:attr-dir-2><a href=#attr-dir>dir</a></code> attribute state: <dl class=switch><dt><a href=#attr-dir-ltr-state id=the-dir-attribute:attr-dir-ltr-state>ltr</a><dd>Return '<a href=#concept-ltr id=the-dir-attribute:concept-ltr>ltr</a>'.<dt><a href=#attr-dir-rtl-state id=the-dir-attribute:attr-dir-rtl-state>rtl</a><dd>Return '<a href=#concept-rtl id=the-dir-attribute:concept-rtl>rtl</a>'.<dt><a href=#attr-dir-auto-state id=the-dir-attribute:attr-dir-auto-state-2>auto</a><dd> <ol><li>Let <var>result</var> be the <a href=#auto-directionality id=the-dir-attribute:auto-directionality>auto directionality</a> of <var>element</var>.<li>If <var>result</var> is null, then return '<a href=#concept-ltr id=the-dir-attribute:concept-ltr-2>ltr</a>'.<li>Return <var>result</var>.</ol> <dt><a href=#attr-dir-undefined-state id=the-dir-attribute:attr-dir-undefined-state>undefined</a><dd> <dl class=switch><dt>If <var>element</var> is a <code id=the-dir-attribute:the-bdi-element><a href=text-level-semantics.html#the-bdi-element>bdi</a></code> element<dd> <ol><li>Let <var>result</var> be the <a href=#auto-directionality id=the-dir-attribute:auto-directionality-2>auto directionality</a> of <var>element</var>.<li>If <var>result</var> is null, then return '<a href=#concept-ltr id=the-dir-attribute:concept-ltr-3>ltr</a>'.<li>Return <var>result</var>.</ol> <dt>If <var>element</var> is an <code id=the-dir-attribute:the-input-element><a href=input.html#the-input-element>input</a></code> element whose <code id=the-dir-attribute:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#telephone-state-(type=tel)" id="the-dir-attribute:telephone-state-(type=tel)">Telephone</a> state<dd>Return '<a href=#concept-ltr id=the-dir-attribute:concept-ltr-4>ltr</a>'.<dt>Otherwise<dd>Return the <a href=#parent-directionality id=the-dir-attribute:parent-directionality>parent directionality</a> of <var>element</var>.</dl> </dl> Since the <code id=the-dir-attribute:attr-dir-3><a href=#attr-dir>dir</a></code> attribute is only defined for <a id=the-dir-attribute:html-elements-2 href=infrastructure.html#html-elements>HTML elements</a>, it cannot be present on elements from other namespaces. Thus, elements from other namespaces always end up using the <a href=#parent-directionality id=the-dir-attribute:parent-directionality-2>parent directionality</a>. The <dfn id=auto-directionality-form-associated-elements>auto-directionality form-associated elements</dfn> are: <ul><li><code id=the-dir-attribute:the-input-element-2><a href=input.html#the-input-element>input</a></code> elements whose <code id=the-dir-attribute:attr-input-type-2><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#hidden-state-(type=hidden)" id="the-dir-attribute:hidden-state-(type=hidden)">Hidden</a>, <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="the-dir-attribute:text-(type=text)-state-and-search-state-(type=search)">Text</a>, <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="the-dir-attribute:text-(type=text)-state-and-search-state-(type=search)-2">Search</a>, <a href="input.html#telephone-state-(type=tel)" id="the-dir-attribute:telephone-state-(type=tel)-2">Telephone</a>, <a href="input.html#url-state-(type=url)" id="the-dir-attribute:url-state-(type=url)">URL</a>, <a href="input.html#email-state-(type=email)" id="the-dir-attribute:email-state-(type=email)">Email</a>, <a href="input.html#password-state-(type=password)" id="the-dir-attribute:password-state-(type=password)">Password</a>, <a href="input.html#submit-button-state-(type=submit)" id="the-dir-attribute:submit-button-state-(type=submit)">Submit Button</a>, <a href="input.html#reset-button-state-(type=reset)" id="the-dir-attribute:reset-button-state-(type=reset)">Reset Button</a>, or <a href="input.html#button-state-(type=button)" id="the-dir-attribute:button-state-(type=button)">Button</a> state, and<li><code id=the-dir-attribute:the-textarea-element-2><a href=form-elements.html#the-textarea-element>textarea</a></code> elements.</ul> To compute the <dfn id=auto-directionality>auto directionality</dfn> given an element <var>element</var>: <ol><li> If <var>element</var> is an <a href=#auto-directionality-form-associated-elements id=the-dir-attribute:auto-directionality-form-associated-elements>auto-directionality form-associated element</a>: <ol><li>If <var>element</var>'s <a href=form-control-infrastructure.html#concept-fe-value id=the-dir-attribute:concept-fe-value>value</a> 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 <a href=form-control-infrastructure.html#concept-fe-value id=the-dir-attribute:concept-fe-value-2>value</a>, then return '<a href=#concept-rtl id=the-dir-attribute:concept-rtl-2>rtl</a>'. <a href=references.html#refsBIDI>[BIDI]</a><li>If <var>element</var>'s <a href=form-control-infrastructure.html#concept-fe-value id=the-dir-attribute:concept-fe-value-3>value</a> is not the empty string, then return '<a href=#concept-ltr id=the-dir-attribute:concept-ltr-5>ltr</a>'.<li>Return null.</ol> <li> If <var>element</var> is a <code id=the-dir-attribute:the-slot-element><a href=scripting.html#the-slot-element>slot</a></code> element whose <a id=the-dir-attribute:root href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a> is a <a id=the-dir-attribute:shadow-root href=https://dom.spec.whatwg.org/#concept-shadow-root data-x-internal=shadow-root>shadow root</a> and <var>element</var>'s <a id=the-dir-attribute:assigned-nodes href=https://dom.spec.whatwg.org/#slot-assigned-nodes data-x-internal=assigned-nodes>assigned nodes</a> are not empty: <ol><li> <a href=https://infra.spec.whatwg.org/#list-iterate id=the-dir-attribute:list-iterate data-x-internal=list-iterate>For each</a> node <var>child</var> of <var>element</var>'s <a id=the-dir-attribute:assigned-nodes-2 href=https://dom.spec.whatwg.org/#slot-assigned-nodes data-x-internal=assigned-nodes>assigned nodes</a>: <ol><li>Let <var>childDirection</var> be null.<li>If <var>child</var> is a <code id=the-dir-attribute:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node, then set <var>childDirection</var> to the <a href=#text-node-directionality id=the-dir-attribute:text-node-directionality>text node directionality</a> of <var>child</var>.<li> Otherwise: <ol><li><a id=the-dir-attribute:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>child</var> is an <code id=the-dir-attribute:element><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code> node.<li>Set <var>childDirection</var> to the <a href=#contained-text-auto-directionality id=the-dir-attribute:contained-text-auto-directionality>contained text auto directionality</a> of <var>child</var> with <a href=#auto-directionality-can-exclude-root id=the-dir-attribute:auto-directionality-can-exclude-root>canExcludeRoot</a> set to true.</ol> <li>If <var>childDirection</var> is not null, then return <var>childDirection</var>.</ol> <li>Return null.</ol> <li>Return the <a href=#contained-text-auto-directionality id=the-dir-attribute:contained-text-auto-directionality-2>contained text auto directionality</a> of <var>element</var> with <a href=#auto-directionality-can-exclude-root id=the-dir-attribute:auto-directionality-can-exclude-root-2>canExcludeRoot</a> set to false.</ol> To compute the <dfn id=contained-text-auto-directionality>contained text auto directionality</dfn> of an element <var>element</var> with a boolean <dfn id=auto-directionality-can-exclude-root><var>canExcludeRoot</var></dfn>: <ol><li> <a href=https://infra.spec.whatwg.org/#list-iterate id=the-dir-attribute:list-iterate-2 data-x-internal=list-iterate>For each</a> node <var>descendant</var> of <var>element</var>'s <a href=https://dom.spec.whatwg.org/#concept-tree-descendant id=the-dir-attribute:descendant data-x-internal=descendant>descendants</a>, in <a id=the-dir-attribute:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>: <ol><li> If any of <ul class=brief><li><var>descendant</var><li>any ancestor element of <var>descendant</var> that is a descendant of <var>element</var><li>if <var>canExcludeRoot</var> is true, <var>element</var></ul> is one of <ul class=brief><li>a <code id=the-dir-attribute:the-bdi-element-2><a href=text-level-semantics.html#the-bdi-element>bdi</a></code> element<li>a <code id=the-dir-attribute:the-script-element><a href=scripting.html#the-script-element>script</a></code> element<li>a <code id=the-dir-attribute:the-style-element><a href=semantics.html#the-style-element>style</a></code> element<li>a <code id=the-dir-attribute:the-textarea-element-3><a href=form-elements.html#the-textarea-element>textarea</a></code> element<li>an element whose <code id=the-dir-attribute:attr-dir-4><a href=#attr-dir>dir</a></code> attribute is not in the <a href=#attr-dir-undefined-state id=the-dir-attribute:attr-dir-undefined-state-2>undefined</a> state</ul> then <a id=the-dir-attribute:continue href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>. <li>If <var>descendant</var> is a <code id=the-dir-attribute:the-slot-element-2><a href=scripting.html#the-slot-element>slot</a></code> element whose <a id=the-dir-attribute:root-2 href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a> is a <a id=the-dir-attribute:shadow-root-2 href=https://dom.spec.whatwg.org/#concept-shadow-root data-x-internal=shadow-root>shadow root</a>, then return the <a href=#the-directionality id=the-dir-attribute:the-directionality-2>directionality</a> of that <a id=the-dir-attribute:shadow-root-3 href=https://dom.spec.whatwg.org/#concept-shadow-root data-x-internal=shadow-root>shadow root</a>'s <a href=https://dom.spec.whatwg.org/#concept-documentfragment-host id=the-dir-attribute:concept-documentfragment-host data-x-internal=concept-documentfragment-host>host</a>.<li>If <var>descendant</var> is not a <code id=the-dir-attribute:text-2><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node, then <a id=the-dir-attribute:continue-2 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a>.<li>Let <var>result</var> be the <a href=#text-node-directionality id=the-dir-attribute:text-node-directionality-2>text node directionality</a> of <var>descendant</var>.<li>If <var>result</var> is not null, then return <var>result</var>.</ol> <li>Return null.</ol> To compute the <dfn id=text-node-directionality>text node directionality</dfn> given a <code id=the-dir-attribute:text-3><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node <var>text</var>: <ol><li>If <var>text</var>'s <a href=https://dom.spec.whatwg.org/#concept-cd-data id=the-dir-attribute:concept-cd-data data-x-internal=concept-cd-data>data</a> does not contain a code point whose bidirectional character type is L, AL, or R, then return null. <a href=references.html#refsBIDI>[BIDI]</a><li>Let <var>codePoint</var> be the first code point in <var>text</var>'s <a href=https://dom.spec.whatwg.org/#concept-cd-data id=the-dir-attribute:concept-cd-data-2 data-x-internal=concept-cd-data>data</a> whose bidirectional character type is L, AL, or R.<li>If <var>codePoint</var> is of bidirectional character type AL or R, then return '<a href=#concept-rtl id=the-dir-attribute:concept-rtl-3>rtl</a>'.<li>If <var>codePoint</var> is of bidirectional character type L, then return '<a href=#concept-ltr id=the-dir-attribute:concept-ltr-6>ltr</a>'.</ol> To compute the <dfn id=parent-directionality>parent directionality</dfn> given an element <var>element</var>: <ol><li>Let <var>parentNode</var> be <var>element</var>'s parent node.<li>If <var>parentNode</var> is a <a id=the-dir-attribute:shadow-root-4 href=https://dom.spec.whatwg.org/#concept-shadow-root data-x-internal=shadow-root>shadow root</a>, then return the <a href=#the-directionality id=the-dir-attribute:the-directionality-3>directionality</a> of <var>parentNode</var>'s <a href=https://dom.spec.whatwg.org/#concept-documentfragment-host id=the-dir-attribute:concept-documentfragment-host-2 data-x-internal=concept-documentfragment-host>host</a>.<li>If <var>parentNode</var> is an element, then return the <a href=#the-directionality id=the-dir-attribute:the-directionality-4>directionality</a> of <var>parentNode</var>.<li>Return '<a href=#concept-ltr id=the-dir-attribute:concept-ltr-7>ltr</a>'.</ol> This attribute <a href=#bidireq>has rendering requirements involving the bidirectional algorithm</a>. <hr> The <dfn id=directionality-of-the-attribute>directionality of an attribute</dfn> of an <a href=infrastructure.html#html-elements id=the-dir-attribute:html-elements-3>HTML element</a>, which is used when the text of that attribute is to be included in the rendering in some manner, is determined as per the first appropriate set of steps from the following list: <dl class=switch><dt>If the attribute is a <a href=#directionality-capable-attribute id=the-dir-attribute:directionality-capable-attribute>directionality-capable attribute</a> and the element's <code id=the-dir-attribute:attr-dir-5><a href=#attr-dir>dir</a></code> attribute is in the <a href=#attr-dir-auto-state id=the-dir-attribute:attr-dir-auto-state-3>auto</a> state<dd> Find the first character (in logical order) of the attribute's value that is of bidirectional character type L, AL, or R. <a href=references.html#refsBIDI>[BIDI]</a> If such a character is found and it is of bidirectional character type AL or R, the <a href=#directionality-of-the-attribute id=the-dir-attribute:directionality-of-the-attribute>directionality of the attribute</a> is '<a href=#concept-rtl id=the-dir-attribute:concept-rtl-4>rtl</a>'. Otherwise, the <a href=#directionality-of-the-attribute id=the-dir-attribute:directionality-of-the-attribute-2>directionality of the attribute</a> is '<a href=#concept-ltr id=the-dir-attribute:concept-ltr-8>ltr</a>'. <dt>Otherwise<dd>The <a href=#directionality-of-the-attribute id=the-dir-attribute:directionality-of-the-attribute-3>directionality of the attribute</a> is the same as <a href=#the-directionality id=the-dir-attribute:the-directionality-5>the element's directionality</a>.</dl> The following attributes are <dfn id=directionality-capable-attribute>directionality-capable attributes</dfn>: <ul class=brief><li><code id=the-dir-attribute:attr-th-abbr><a href=tables.html#attr-th-abbr>abbr</a></code> on <code id=the-dir-attribute:the-th-element><a href=tables.html#the-th-element>th</a></code> elements<li><code>alt</code> on <code id=the-dir-attribute:attr-area-alt><a href=image-maps.html#attr-area-alt>area</a></code>, <code id=the-dir-attribute:attr-img-alt><a href=embedded-content.html#attr-img-alt>img</a></code>, and <code id=the-dir-attribute:attr-input-alt><a href=input.html#attr-input-alt>input</a></code> elements<li><code id=the-dir-attribute:attr-meta-content><a href=semantics.html#attr-meta-content>content</a></code> on <code id=the-dir-attribute:the-meta-element><a href=semantics.html#the-meta-element>meta</a></code> elements, if the <code id=the-dir-attribute:attr-meta-name><a href=semantics.html#attr-meta-name>name</a></code> attribute specifies a metadata name whose value is primarily intended to be human-readable rather than machine-readable<li><code>label</code> on <code id=the-dir-attribute:attr-optgroup-label><a href=form-elements.html#attr-optgroup-label>optgroup</a></code>, <code id=the-dir-attribute:attr-option-label><a href=form-elements.html#attr-option-label>option</a></code>, and <code id=the-dir-attribute:attr-track-label><a href=media.html#attr-track-label>track</a></code> elements<li><code>placeholder</code> on <code id=the-dir-attribute:attr-input-placeholder><a href=input.html#attr-input-placeholder>input</a></code> and <code id=the-dir-attribute:attr-textarea-placeholder><a href=form-elements.html#attr-textarea-placeholder>textarea</a></code> elements<li><code id=the-dir-attribute:attr-title><a href=#attr-title>title</a></code> on all <a id=the-dir-attribute:html-elements-4 href=infrastructure.html#html-elements>HTML elements</a></ul> <hr> <dl class=domintro><dt><code><var>document</var>.<a href=#dom-dir id=dom-dir-dev>dir</a> [ = <var>value</var> ]</code><dd> Returns <a href=#the-html-element-2 id=the-dir-attribute:the-html-element-2>the <code>html</code> element</a>'s <code id=the-dir-attribute:attr-dir-6><a href=#attr-dir>dir</a></code> attribute's value, if any. Can be set, to either "<code>ltr</code>", "<code>rtl</code>", or "<code>auto</code>" to replace <a href=#the-html-element-2 id=the-dir-attribute:the-html-element-2-2>the <code>html</code> element</a>'s <code id=the-dir-attribute:attr-dir-7><a href=#attr-dir>dir</a></code> attribute's value. If there is no <a href=#the-html-element-2 id=the-dir-attribute:the-html-element-2-3><code>html</code> element</a>, returns the empty string and ignores new values. </dl> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dir title="The HTMLElement.dir property gets or sets the text writing directionality of the content of the current element.">HTMLElement/dir</a>Support in all current engines.<div class=support>Firefox1+Safari3+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer5.5+<hr>Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+</div></div></div>The <dfn data-dfn-for=HTMLElement id=dom-dir data-dfn-type=attribute><code>dir</code></dfn> IDL attribute on an element must <a id=the-dir-attribute:reflect href=common-dom-interfaces.html#reflect>reflect</a> the <code id=the-dir-attribute:attr-dir-8><a href=#attr-dir>dir</a></code> content attribute of that element, <a id=the-dir-attribute:limited-to-only-known-values href=common-dom-interfaces.html#limited-to-only-known-values>limited to only known values</a>. <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/Document/dir title="The Document.dir property is a string representing the directionality of the text of the document, whether left to right (default) or right to left. Possible values are 'rtl', right to left, and 'ltr', left to right.">Document/dir</a>Support in all current engines.<div class=support>Firefox1+Safari10.1+Chrome64+<hr>Opera51+Edge79+<hr>Edge (Legacy)12+Internet Explorer5+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+</div></div></div>The <dfn data-dfn-for=Document id=dom-document-dir data-dfn-type=attribute><code>dir</code></dfn> IDL attribute on <code id=the-dir-attribute:document><a href=#document>Document</a></code> objects must <a id=the-dir-attribute:reflect-2 href=common-dom-interfaces.html#reflect>reflect</a> the <code id=the-dir-attribute:attr-dir-9><a href=#attr-dir>dir</a></code> content attribute of <a href=#the-html-element-2 id=the-dir-attribute:the-html-element-2-4>the <code>html</code> element</a>, if any, <a id=the-dir-attribute:limited-to-only-known-values-2 href=common-dom-interfaces.html#limited-to-only-known-values>limited to only known values</a>. If there is no such element, then the attribute must return the empty string and do nothing on setting. Authors are strongly encouraged to use the <code id=the-dir-attribute:attr-dir-10><a href=#attr-dir>dir</a></code> 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). <div class=example> This markup fragment is of an IM conversation. <pre><code class='html'><c- p><</c-><c- f>p</c-> <c- e>dir</c-><c- o>=</c-><c- s>auto</c-> <c- e>class</c-><c- o>=</c-><c- s>"u1"</c-><c- p>><</c-><c- f>b</c-><c- p>><</c-><c- f>bdi</c-><c- p>></c->Student<c- p></</c-><c- f>bdi</c-><c- p>></c->:<c- p></</c-><c- f>b</c-><c- p>></c-> How do you write "What's your name?" in Arabic?<c- p></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>p</c-> <c- e>dir</c-><c- o>=</c-><c- s>auto</c-> <c- e>class</c-><c- o>=</c-><c- s>"u2"</c-><c- p>><</c-><c- f>b</c-><c- p>><</c-><c- f>bdi</c-><c- p>></c->Teacher<c- p></</c-><c- f>bdi</c-><c- p>></c->:<c- p></</c-><c- f>b</c-><c- p>></c-> ما اسمك؟<c- p></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>p</c-> <c- e>dir</c-><c- o>=</c-><c- s>auto</c-> <c- e>class</c-><c- o>=</c-><c- s>"u1"</c-><c- p>><</c-><c- f>b</c-><c- p>><</c-><c- f>bdi</c-><c- p>></c->Student<c- p></</c-><c- f>bdi</c-><c- p>></c->:<c- p></</c-><c- f>b</c-><c- p>></c-> Thanks.<c- p></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>p</c-> <c- e>dir</c-><c- o>=</c-><c- s>auto</c-> <c- e>class</c-><c- o>=</c-><c- s>"u2"</c-><c- p>><</c-><c- f>b</c-><c- p>><</c-><c- f>bdi</c-><c- p>></c->Teacher<c- p></</c-><c- f>bdi</c-><c- p>></c->:<c- p></</c-><c- f>b</c-><c- p>></c-> That's written "شكرًا".<c- p></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>p</c-> <c- e>dir</c-><c- o>=</c-><c- s>auto</c-> <c- e>class</c-><c- o>=</c-><c- s>"u2"</c-><c- p>><</c-><c- f>b</c-><c- p>><</c-><c- f>bdi</c-><c- p>></c->Teacher<c- p></</c-><c- f>bdi</c-><c- p>></c->:<c- p></</c-><c- f>b</c-><c- p>></c-> Do you know how to write "Please"?<c- p></</c-><c- f>p</c-><c- p>></c-> <c- p><</c-><c- f>p</c-> <c- e>dir</c-><c- o>=</c-><c- s>auto</c-> <c- e>class</c-><c- o>=</c-><c- s>"u1"</c-><c- p>><</c-><c- f>b</c-><c- p>><</c-><c- f>bdi</c-><c- p>></c->Student<c- p></</c-><c- f>bdi</c-><c- p>></c->:<c- p></</c-><c- f>b</c-><c- p>></c-> "من فضلك", right?<c- p></</c-><c- f>p</c-><c- p>></c-></code></pre> Given a suitable style sheet and the default alignment styles for the <code id=the-dir-attribute:the-p-element><a href=grouping-content.html#the-p-element>p</a></code> element, namely to align the text to the start edge of the paragraph, the resulting rendering could be as follows: <img width=366 src=/images/im.png height=157 alt="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."> As noted earlier, the <code id=the-dir-attribute:attr-dir-auto><a href=#attr-dir-auto>auto</a></code> 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. </div> <h5 id=the-style-attribute>3.2.6.5 The <code id=the-style-attribute:attr-style><a href=#attr-style>style</a></code> attribute<a href=#the-style-attribute class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style title="The style global attribute contains CSS styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the <style> element have mainly the purpose of allowing for quick styling, for example for testing purposes.">Global_attributes/style</a>Support in all current engines.<div class=support>Firefox1+Safari1+Chrome1+<hr>Opera?Edge79+<hr>Edge (Legacy)12+Internet ExplorerYes<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div> All <a id=the-style-attribute:html-elements href=infrastructure.html#html-elements>HTML elements</a> may have the <dfn data-dfn-for=html-global id=attr-style data-dfn-type=element-attr><code>style</code></dfn> content attribute set. This is a <a href=https://drafts.csswg.org/css-style-attr/#style-attribute id=the-style-attribute:css-styling-attribute data-x-internal=css-styling-attribute>style attribute</a> as defined by <cite>CSS Style Attributes</cite>. <a href=references.html#refsCSSATTR>[CSSATTR]</a> In user agents that support CSS, the attribute's value must be parsed when the attribute is added or has its value changed, according to the rules given for <a href=https://drafts.csswg.org/css-style-attr/#style-attribute id=the-style-attribute:css-styling-attribute-2 data-x-internal=css-styling-attribute>style attributes</a>. <a href=references.html#refsCSSATTR>[CSSATTR]</a> However, if the <a id="the-style-attribute:should-element's-inline-behavior-be-blocked-by-content-security-policy" href=https://w3c.github.io/webappsec-csp/#should-block-inline data-x-internal="should-element's-inline-behavior-be-blocked-by-content-security-policy">Should element's inline behavior be blocked by Content Security Policy?</a> algorithm returns "<code>Blocked</code>" when executed upon the attribute's <a id=the-style-attribute:element href=https://dom.spec.whatwg.org/#interface-element data-x-internal=element>element</a>, "<code>style attribute</code>", and the attribute's value, then the style rules defined in the attribute's value must not be applied to the <a id=the-style-attribute:element-2 href=https://dom.spec.whatwg.org/#interface-element data-x-internal=element>element</a>. <a href=references.html#refsCSP>[CSP]</a> Documents that use <code id=the-style-attribute:attr-style-2><a href=#attr-style>style</a></code> attributes on any of their elements must still be comprehensible and usable if those attributes were removed. In particular, using the <code id=the-style-attribute:attr-style-3><a href=#attr-style>style</a></code> 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 <code id=the-style-attribute:attr-hidden><a href=interaction.html#attr-hidden>hidden</a></code> attribute.) <hr> <dl class=domintro><dt><code><var>element</var>.<a href=https://drafts.csswg.org/cssom/#dom-elementcssinlinestyle-style id=dom-style-dev data-x-internal=dom-style>style</a></code><dd>Returns a <code id=the-style-attribute:cssstyledeclaration><a data-x-internal=cssstyledeclaration href=https://drafts.csswg.org/cssom/#the-cssstyledeclaration-interface>CSSStyleDeclaration</a></code> object for the element's <code id=the-style-attribute:attr-style-4><a href=#attr-style>style</a></code> attribute.</dl> The <code id=the-style-attribute:dom-style><a data-x-internal=dom-style href=https://drafts.csswg.org/cssom/#dom-elementcssinlinestyle-style>style</a></code> IDL attribute is defined in <cite>CSS Object Model</cite>. <a href=references.html#refsCSSOM>[CSSOM]</a> <div class=example> In the following example, the words that refer to colors are marked up using the <code id=the-style-attribute:the-span-element><a href=text-level-semantics.html#the-span-element>span</a></code> element and the <code id=the-style-attribute:attr-style-5><a href=#attr-style>style</a></code> attribute to make those words show up in the relevant colors in visual media. <pre><code class='html'><c- p><</c-><c- f>p</c-><c- p>></c->My sweat suit is <c- p><</c-><c- f>span</c-> <c- e>style</c-><c- o>=</c-><c- s>"color: green; background:</c-> <c- s>transparent"</c-><c- p>></c->green<c- p></</c-><c- f>span</c-><c- p>></c-> and my eyes are <c- p><</c-><c- f>span</c-> <c- e>style</c-><c- o>=</c-><c- s>"color: blue;</c-> <c- s>background: transparent"</c-><c- p>></c->blue<c- p></</c-><c- f>span</c-><c- p>></c->.<c- p></</c-><c- f>p</c-><c- p>></c-></code></pre> </div> <h5 id=embedding-custom-non-visible-data-with-the-data-*-attributes>3.2.6.6 <dfn>Embedding custom non-visible data</dfn> with the <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:attr-data-*><a href=#attr-data-*>data-*</a></code> attributes<a href=#embedding-custom-non-visible-data-with-the-data-*-attributes class=self-link></a></h5> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-* title="The data-* global attributes form a class of attributes called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation by scripts.">Global_attributes/data-*</a>Support in all current engines.<div class=support>Firefox6+Safari5.1+Chrome7+<hr>Opera?Edge79+<hr>Edge (Legacy)12+Internet ExplorerYes<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?</div></div></div>A <dfn id=custom-data-attribute>custom data attribute</dfn> is an attribute in no namespace whose name starts with the string "<dfn id=attr-data-*><code>data-</code></dfn>", has at least one character after the hyphen, is <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:xml-compatible href=infrastructure.html#xml-compatible>XML-compatible</a>, and contains no <a href=https://infra.spec.whatwg.org/#ascii-upper-alpha id=embedding-custom-non-visible-data-with-the-data-*-attributes:uppercase-ascii-letters data-x-internal=uppercase-ascii-letters>ASCII upper alphas</a>. All attribute names on <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:html-elements href=infrastructure.html#html-elements>HTML elements</a> in <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:html-documents href=https://dom.spec.whatwg.org/#html-document data-x-internal=html-documents>HTML documents</a> get ASCII-lowercased automatically, so the restriction on ASCII uppercase letters doesn't affect such documents. <a href=#custom-data-attribute id=embedding-custom-non-visible-data-with-the-data-*-attributes:custom-data-attribute>Custom data attributes</a> are intended to store custom data, state, annotations, and similar, private to the page or application, for which there are no more appropriate attributes or elements. These attributes are not intended for use by software that is not known to the administrators of the site that uses the attributes. For generic extensions that are to be used by multiple independent tools, either this specification should be extended to provide the feature explicitly, or a technology like <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:microdata href=microdata.html#microdata>microdata</a> should be used (with a standardized vocabulary). <div class=example> For instance, a site about music could annotate list items representing tracks in an album with custom data attributes containing the length of each track. This information could then be used by the site itself to allow the user to sort the list by track length, or to filter the list for tracks of certain lengths. <pre><code class='html'><c- p><</c-><c- f>ol</c-><c- p>></c-> <c- p><</c-><c- f>li</c-> <c- e>data-length</c-><c- o>=</c-><c- s>"2m11s"</c-><c- p>></c->Beyond The Sea<c- p></</c-><c- f>li</c-><c- p>></c-> ... <c- p></</c-><c- f>ol</c-><c- p>></c-></code></pre> It would be inappropriate, however, for the user to use generic software not associated with that music site to search for tracks of a certain length by looking at this data. This is because these attributes are intended for use by the site's own scripts, and are not a generic extension mechanism for publicly-usable metadata. </div> <div class=example> Similarly, a page author could write markup that provides information for a translation tool that they are intending to use: <pre><code class='html'><c- p><</c-><c- f>p</c-><c- p>></c->The third <c- p><</c-><c- f>span</c-> <c- e>data-mytrans-de</c-><c- o>=</c-><c- s>"Anspruch"</c-><c- p>></c->claim<c- p></</c-><c- f>span</c-><c- p>></c-> covers the case of <c- p><</c-><c- f>span</c-> <c- e>translate</c-><c- o>=</c-><c- s>"no"</c-><c- p>></c->HTML<c- p></</c-><c- f>span</c-><c- p>></c-> markup.<c- p></</c-><c- f>p</c-><c- p>></c-></code></pre> In this example, the "<code>data-mytrans-de</code>" attribute gives specific text for the MyTrans product to use when translating the phrase "claim" to German. However, the standard <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:attr-translate><a href=#attr-translate>translate</a></code> attribute is used to tell it that in all languages, "HTML" is to remain unchanged. When a standard attribute is available, there is no need for a <a href=#custom-data-attribute id=embedding-custom-non-visible-data-with-the-data-*-attributes:custom-data-attribute-2>custom data attribute</a> to be used. </div> <div class=example> In this example, custom data attributes are used to store the result of a feature detection for <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:paymentrequest><a data-x-internal=paymentrequest href=https://w3c.github.io/payment-request/#dom-paymentrequest>PaymentRequest</a></code>, which could be used in CSS to style a checkout page differently. <pre><code class='html'><c- p><</c-><c- f>script</c-><c- p>></c-> <c- k>if</c-> <c- p>(</c-><c- t>'PaymentRequest'</c-> <c- k>in</c-> window<c- p>)</c-> <c- p>{</c-> document<c- p>.</c->documentElement<c- p>.</c->dataset<c- p>.</c->hasPaymentRequest <c- o>=</c-> <c- t>''</c-><c- p>;</c-> <c- p>}</c-> <c- p></</c-><c- f>script</c-><c- p>></c-></code></pre> Here, the <code>data-has-payment-request</code> attribute is effectively being used as a <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>; it is enough to check the presence of the attribute. However, if the author so wishes, it could later be populated with some value, maybe to indicate limited functionality of the feature. </div> Every <a href=infrastructure.html#html-elements id=embedding-custom-non-visible-data-with-the-data-*-attributes:html-elements-2>HTML element</a> may have any number of <a href=#custom-data-attribute id=embedding-custom-non-visible-data-with-the-data-*-attributes:custom-data-attribute-3>custom data attributes</a> specified, with any value. Authors should carefully design such extensions so that when the attributes are ignored and any associated CSS dropped, the page is still usable. User agents must not derive any implementation behavior from these attributes or values. Specifications intended for user agents must not define these attributes to have any meaningful values. JavaScript libraries may use the <a href=#custom-data-attribute id=embedding-custom-non-visible-data-with-the-data-*-attributes:custom-data-attribute-4>custom data attributes</a>, as they are considered to be part of the page on which they are used. Authors of libraries that are reused by many authors are encouraged to include their name in the attribute names, to reduce the risk of clashes. Where it makes sense, library authors are also encouraged to make the exact name used in the attribute names customizable, so that libraries whose authors unknowingly picked the same name can be used on the same page, and so that multiple versions of a particular library can be used on the same page even when those versions are not mutually compatible. <div class=example> For example, a library called "DoQuery" could use attribute names like <code>data-doquery-range</code>, and a library called "jJo" could use attributes names like <code>data-jjo-range</code>. The jJo library could also provide an API to set which prefix to use (e.g. <code>J.setDataPrefix('j2')</code>, making the attributes have names like <code>data-j2-range</code>). </div> <hr> <dl class=domintro><dt><code><var>element</var>.<a href=#dom-dataset id=dom-dataset-dev>dataset</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset title="The dataset read-only property of the HTMLElement interface provides read/write access to custom data attributes (data-*) on elements. It exposes a map of strings (DOMStringMap) with an entry for each data-* attribute.">HTMLElement/dataset</a>Support in all current engines.<div class=support>Firefox6+Safari5.1+Chrome7+<hr>Opera11+Edge79+<hr>Edge (Legacy)12+Internet Explorer11<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android11+</div></div><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/SVGElement/dataset title="The dataset read-only property of the HTMLElement interface provides read/write access to custom data attributes (data-*) on elements. It exposes a map of strings (DOMStringMap) with an entry for each data-* attribute.">SVGElement/dataset</a>Support in all current engines.<div class=support>Firefox51+Safari5.1+Chrome55+<hr>Opera41+Edge79+<hr>Edge (Legacy)17+Internet ExplorerNo<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android41+</div></div></div><dd> Returns a <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:domstringmap><a href=#domstringmap>DOMStringMap</a></code> object for the element's <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:attr-data-*-2><a href=#attr-data-*>data-*</a></code> attributes. Hyphenated names become camel-cased. For example, <code>data-foo-bar=""</code> becomes <code>element.dataset.fooBar</code>. </dl> The <dfn data-dfn-for=HTMLOrSVGElement id=dom-dataset data-dfn-type=attribute><code>dataset</code></dfn> IDL attribute provides convenient accessors for all the <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:attr-data-*-3><a href=#attr-data-*>data-*</a></code> attributes on an element. On getting, the <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:dom-dataset><a href=#dom-dataset>dataset</a></code> IDL attribute must return a <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:domstringmap-2><a href=#domstringmap>DOMStringMap</a></code> whose associated element is this element. The <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:domstringmap-3><a href=#domstringmap>DOMStringMap</a></code> interface is used for the <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:dom-dataset-2><a href=#dom-dataset>dataset</a></code> attribute. Each <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:domstringmap-4><a href=#domstringmap>DOMStringMap</a></code> has an <dfn id=concept-domstringmap-element>associated element</dfn>. <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->, <a id='embedding-custom-non-visible-data-with-the-data-*-attributes:legacyoverridebuiltins' href='https://webidl.spec.whatwg.org/#LegacyOverrideBuiltIns' data-x-internal='legacyoverridebuiltins'><c- g>LegacyOverrideBuiltIns</c-></a>] <c- b>interface</c-> <dfn id='domstringmap' data-dfn-type='interface'><c- g>DOMStringMap</c-></dfn> { <a href='#dom-domstringmap-nameditem'><c- b>getter</c-></a> <c- b>DOMString</c-> (<c- b>DOMString</c-> <c- g>name</c->); [<a id='embedding-custom-non-visible-data-with-the-data-*-attributes:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <a href='#dom-domstringmap-setitem'><c- b>setter</c-></a> <c- b>undefined</c-> (<c- b>DOMString</c-> <c- g>name</c->, <c- b>DOMString</c-> <c- g>value</c->); [<a id='embedding-custom-non-visible-data-with-the-data-*-attributes:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <a href='#dom-domstringmap-removeitem'><c- b>deleter</c-></a> <c- b>undefined</c-> (<c- b>DOMString</c-> <c- g>name</c->); };</code></pre> To <dfn id=concept-domstringmap-pairs>get a <code>DOMStringMap</code>'s name-value pairs</dfn>, run the following algorithm: <ol><li>Let <var>list</var> be an empty list of name-value pairs.<li>For each content attribute on the <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:domstringmap-5><a href=#domstringmap>DOMStringMap</a></code>'s <a href=#concept-domstringmap-element id=embedding-custom-non-visible-data-with-the-data-*-attributes:concept-domstringmap-element>associated element</a> whose first five characters are the string "<code>data-</code>" and whose remaining characters (if any) do not include any <a href=https://infra.spec.whatwg.org/#ascii-upper-alpha id=embedding-custom-non-visible-data-with-the-data-*-attributes:uppercase-ascii-letters-2 data-x-internal=uppercase-ascii-letters>ASCII upper alphas</a>, in the order that those attributes are listed in the element's <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:attribute-list href=https://dom.spec.whatwg.org/#concept-element-attribute data-x-internal=attribute-list>attribute list</a>, add a name-value pair to <var>list</var> whose name is the attribute's name with the first five characters removed and whose value is the attribute's value.<li>For each name in <var>list</var>, for each U+002D HYPHEN-MINUS character (-) in the name that is followed by an <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:lowercase-ascii-letters href=https://infra.spec.whatwg.org/#ascii-lower-alpha data-x-internal=lowercase-ascii-letters>ASCII lower alpha</a>, remove the U+002D HYPHEN-MINUS character (-) and replace the character that followed it by the same character <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:converted-to-ascii-uppercase href=https://infra.spec.whatwg.org/#ascii-uppercase data-x-internal=converted-to-ascii-uppercase>converted to ASCII uppercase</a>.<li>Return <var>list</var>.</ol> The <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:supported-property-names href=https://webidl.spec.whatwg.org/#dfn-supported-property-names data-x-internal=supported-property-names>supported property names</a> on a <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:domstringmap-6><a href=#domstringmap>DOMStringMap</a></code> object at any instant are the names of each pair returned from <a href=#concept-domstringmap-pairs id=embedding-custom-non-visible-data-with-the-data-*-attributes:concept-domstringmap-pairs>getting the <code>DOMStringMap</code>'s name-value pairs</a> at that instant, in the order returned. To <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:determine-the-value-of-a-named-property href=https://webidl.spec.whatwg.org/#dfn-determine-the-value-of-a-named-property data-x-internal=determine-the-value-of-a-named-property>determine the value of a named property</a> <var>name</var> for a <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:domstringmap-7><a href=#domstringmap>DOMStringMap</a></code>, return the value component of the name-value pair whose name component is <var>name</var> in the list returned from <a href=#concept-domstringmap-pairs id=embedding-custom-non-visible-data-with-the-data-*-attributes:concept-domstringmap-pairs-2>getting the <code>DOMStringMap</code>'s name-value pairs</a>. To <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:set-the-value-of-a-new-named-property href=https://webidl.spec.whatwg.org/#dfn-set-the-value-of-a-new-named-property data-x-internal=set-the-value-of-a-new-named-property>set the value of a new named property</a> or <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:set-the-value-of-an-existing-named-property href=https://webidl.spec.whatwg.org/#dfn-set-the-value-of-an-existing-named-property data-x-internal=set-the-value-of-an-existing-named-property>set the value of an existing named property</a> for a <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:domstringmap-8><a href=#domstringmap>DOMStringMap</a></code>, given a property name <var>name</var> and a new value <var>value</var>, run the following steps: <ol><li>If <var>name</var> contains a U+002D HYPHEN-MINUS character (-) followed by an <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:lowercase-ascii-letters-2 href=https://infra.spec.whatwg.org/#ascii-lower-alpha data-x-internal=lowercase-ascii-letters>ASCII lower alpha</a>, then throw a <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:syntaxerror href=https://webidl.spec.whatwg.org/#syntaxerror data-x-internal=syntaxerror>"<code>SyntaxError</code>"</a> <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li>For each <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:uppercase-ascii-letters-3 href=https://infra.spec.whatwg.org/#ascii-upper-alpha data-x-internal=uppercase-ascii-letters>ASCII upper alpha</a> in <var>name</var>, insert a U+002D HYPHEN-MINUS character (-) before the character and replace the character with the same character <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:converted-to-ascii-lowercase href=https://infra.spec.whatwg.org/#ascii-lowercase data-x-internal=converted-to-ascii-lowercase>converted to ASCII lowercase</a>.<li>Insert the string <code>data-</code> at the front of <var>name</var>.<li>If <var>name</var> does not match the XML <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:xml-name><a data-x-internal=xml-name href=https://www.w3.org/TR/xml/#NT-Name>Name</a></code> production, throw an <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:invalidcharactererror href=https://webidl.spec.whatwg.org/#invalidcharactererror data-x-internal=invalidcharactererror>"<code>InvalidCharacterError</code>"</a> <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><a href=https://dom.spec.whatwg.org/#concept-element-attributes-set-value id=embedding-custom-non-visible-data-with-the-data-*-attributes:concept-element-attributes-set-value data-x-internal=concept-element-attributes-set-value>Set an attribute value</a> for the <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:domstringmap-9><a href=#domstringmap>DOMStringMap</a></code>'s <a href=#concept-domstringmap-element id=embedding-custom-non-visible-data-with-the-data-*-attributes:concept-domstringmap-element-2>associated element</a> using <var>name</var> and <var>value</var>.</ol> To <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:delete-an-existing-named-property href=https://webidl.spec.whatwg.org/#dfn-delete-an-existing-named-property data-x-internal=delete-an-existing-named-property>delete an existing named property</a> <var>name</var> for a <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:domstringmap-10><a href=#domstringmap>DOMStringMap</a></code>, run the following steps: <ol><li>For each <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:uppercase-ascii-letters-4 href=https://infra.spec.whatwg.org/#ascii-upper-alpha data-x-internal=uppercase-ascii-letters>ASCII upper alpha</a> in <var>name</var>, insert a U+002D HYPHEN-MINUS character (-) before the character and replace the character with the same character <a id=embedding-custom-non-visible-data-with-the-data-*-attributes:converted-to-ascii-lowercase-2 href=https://infra.spec.whatwg.org/#ascii-lowercase data-x-internal=converted-to-ascii-lowercase>converted to ASCII lowercase</a>.<li>Insert the string <code>data-</code> at the front of <var>name</var>.<li><a href=https://dom.spec.whatwg.org/#concept-element-attributes-remove id=embedding-custom-non-visible-data-with-the-data-*-attributes:concept-element-attributes-remove data-x-internal=concept-element-attributes-remove>Remove an attribute by name</a> given <var>name</var> and the <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:domstringmap-11><a href=#domstringmap>DOMStringMap</a></code>'s <a href=#concept-domstringmap-element id=embedding-custom-non-visible-data-with-the-data-*-attributes:concept-domstringmap-element-3>associated element</a>.</ol> This algorithm will only get invoked by <cite>Web IDL</cite> for names that are given by the earlier algorithm for <a href=#concept-domstringmap-pairs id=embedding-custom-non-visible-data-with-the-data-*-attributes:concept-domstringmap-pairs-3>getting the <code>DOMStringMap</code>'s name-value pairs</a>. <a href=references.html#refsWEBIDL>[WEBIDL]</a> <div class=example> If a web page wanted an element to represent a space ship, e.g. as part of a game, it would have to use the <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:classes><a href=#classes>class</a></code> attribute along with <code id=embedding-custom-non-visible-data-with-the-data-*-attributes:attr-data-*-4><a href=#attr-data-*>data-*</a></code> attributes: <pre><code class='html'><c- p><</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>"spaceship"</c-> <c- e>data-ship-id</c-><c- o>=</c-><c- s>"92432"</c-> <c- e>data-weapons</c-><c- o>=</c-><c- s>"laser 2"</c-> <c- e>data-shields</c-><c- o>=</c-><c- s>"50%"</c-> <c- e>data-</c-><c- e>x</c-><c- o>=</c-><c- s>"30"</c-> <c- e>data-y</c-><c- o>=</c-><c- s>"10"</c-> <c- e>data-z</c-><c- o>=</c-><c- s>"90"</c-><c- p>></c-> <c- p><</c-><c- f>button</c-> <c- e>class</c-><c- o>=</c-><c- s>"fire"</c-> <c- e>onclick</c-><c- o>=</c-><c- s>"spaceships[this.parentNode.dataset.shipId].fire()"</c-><c- p>></c-> Fire <c- p></</c-><c- f>button</c-><c- p>></c-> <c- p></</c-><c- f>div</c-><c- p>></c-></code></pre> Notice how the hyphenated attribute name becomes camel-cased in the API. </div> <div class=example> Given the following fragment and elements with similar constructions: <pre><code class='html'><c- p><</c-><c- f>img</c-> <c- e>class</c-><c- o>=</c-><c- s>"tower"</c-> <c- e>id</c-><c- o>=</c-><c- s>"tower5"</c-> <c- e>data-</c-><c- e>x</c-><c- o>=</c-><c- s>"12"</c-> <c- e>data-y</c-><c- o>=</c-><c- s>"5"</c-> <c- e>data-ai</c-><c- o>=</c-><c- s>"robotarget"</c-> <c- e>data-hp</c-><c- o>=</c-><c- s>"46"</c-> <c- e>data-ability</c-><c- o>=</c-><c- s>"flames"</c-> <c- e>src</c-><c- o>=</c-><c- s>"towers/rocket.png"</c-> <c- e>alt</c-><c- o>=</c-><c- s>"Rocket Tower"</c-><c- p>></c-></code></pre> ...one could imagine a function <code>splashDamage()</code> that takes some arguments, the first of which is the element to process: <pre><code class='js'><c- a>function</c-> splashDamage<c- p>(</c->node<c- p>,</c-> x<c- p>,</c-> y<c- p>,</c-> damage<c- p>)</c-> <c- p>{</c-> <c- k>if</c-> <c- p>(</c->node<c- p>.</c->classList<c- p>.</c->contains<c- p>(</c-><c- t>'tower'</c-><c- p>)</c-> <c- o>&&</c-> <c- c1>// checking the 'class' attribute</c-> node<c- p>.</c->dataset<c- p>.</c->x <c- o>==</c-> x <c- o>&&</c-> <c- c1>// reading the 'data-x' attribute</c-> node<c- p>.</c->dataset<c- p>.</c->y <c- o>==</c-> y<c- p>)</c-> <c- p>{</c-> <c- c1>// reading the 'data-y' attribute</c-> <c- a>var</c-> hp <c- o>=</c-> parseInt<c- p>(</c->node<c- p>.</c->dataset<c- p>.</c->hp<c- p>);</c-> <c- c1>// reading the 'data-hp' attribute</c-> hp <c- o>=</c-> hp <c- o>-</c-> damage<c- p>;</c-> <c- k>if</c-> <c- p>(</c->hp <c- o><</c-> <c- mf>0</c-><c- p>)</c-> <c- p>{</c-> hp <c- o>=</c-> <c- mf>0</c-><c- p>;</c-> node<c- p>.</c->dataset<c- p>.</c->ai <c- o>=</c-> <c- t>'dead'</c-><c- p>;</c-> <c- c1>// setting the 'data-ai' attribute</c-> <c- k>delete</c-> node<c- p>.</c->dataset<c- p>.</c->ability<c- p>;</c-> <c- c1>// removing the 'data-ability' attribute</c-> <c- p>}</c-> node<c- p>.</c->dataset<c- p>.</c->hp <c- o>=</c-> hp<c- p>;</c-> <c- c1>// setting the 'data-hp' attribute</c-> <c- p>}</c-> <c- p>}</c-></code></pre> </div> <h4 id=the-innertext-idl-attribute>3.2.7 The <code id=the-innertext-idl-attribute:dom-innertext><a href=#dom-innertext>innerText</a></code> and <code id=the-innertext-idl-attribute:dom-outertext><a href=#dom-outertext>outerText</a></code> properties<a href=#the-innertext-idl-attribute class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText title="The innerText property of the HTMLElement interface represents the rendered text content of a node and its descendants.">HTMLElement/innerText</a>Support in all current engines.<div class=support>Firefox45+Safari1+Chrome1+<hr>Opera9.6+Edge79+<hr>Edge (Legacy)12+Internet Explorer5.5+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android1+Samsung Internet?Opera Android10.1+</div></div></div> <dl class=domintro><dt><code><var>element</var>.<a href=#dom-innertext id=dom-innertext-dev>innerText</a> [ = <var>value</var> ]</code><dd> 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 <code id=the-innertext-idl-attribute:the-br-element><a href=text-level-semantics.html#the-br-element>br</a></code> elements. <dt><code><var>element</var>.<a href=#dom-outertext id=dom-outertext-dev>outerText</a> [ = <var>value</var> ]</code><dd> Returns the element's text content "as rendered". Can be set, to replace the element with the given value, but with line breaks converted to <code id=the-innertext-idl-attribute:the-br-element-2><a href=text-level-semantics.html#the-br-element>br</a></code> elements. </dl> The <dfn id=get-the-text-steps data-export="">get the text steps</dfn>, given an <a href=#htmlelement id=the-innertext-idl-attribute:htmlelement>HTMLElement</a> <var>element</var>, are: <ol><li> If <var>element</var> is not <a id=the-innertext-idl-attribute:being-rendered href=rendering.html#being-rendered>being rendered</a> or if the user agent is a non-CSS user agent, then return <var>element</var>'s <a id=the-innertext-idl-attribute:descendant-text-content href=https://dom.spec.whatwg.org/#concept-descendant-text-content data-x-internal=descendant-text-content>descendant text content</a>. This step can produce surprising results, as when the <code id=the-innertext-idl-attribute:dom-innertext-2><a href=#dom-innertext>innerText</a></code> getter is invoked on an element not <a id=the-innertext-idl-attribute:being-rendered-2 href=rendering.html#being-rendered>being rendered</a>, its text contents are returned, but when accessed on an element that is <a id=the-innertext-idl-attribute:being-rendered-3 href=rendering.html#being-rendered>being rendered</a>, all of its children that are not <a id=the-innertext-idl-attribute:being-rendered-4 href=rendering.html#being-rendered>being rendered</a> have their text contents ignored. <li>Let <var>results</var> be a new empty <a id=the-innertext-idl-attribute:list href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a>.<li> For each child node <var>node</var> of <var>element</var>: <ol><li>Let <var>current</var> be the <a id=the-innertext-idl-attribute:list-2 href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> resulting in running the <a href=#rendered-text-collection-steps id=the-innertext-idl-attribute:rendered-text-collection-steps>rendered text collection steps</a> with <var>node</var>. Each item in <var>results</var> will either be a <a id=the-innertext-idl-attribute:string href=https://infra.spec.whatwg.org/#string data-x-internal=string>string</a> 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. <li>For each item <var>item</var> in <var>current</var>, append <var>item</var> to <var>results</var>.</ol> <li><a href=https://infra.spec.whatwg.org/#list-remove id=the-innertext-idl-attribute:list-remove data-x-internal=list-remove>Remove</a> any items from <var>results</var> that are the empty string.<li><a href=https://infra.spec.whatwg.org/#list-remove id=the-innertext-idl-attribute:list-remove-2 data-x-internal=list-remove>Remove</a> any runs of consecutive required line break count items at the start or end of <var>results</var>.<li><a href=https://infra.spec.whatwg.org/#list-replace id=the-innertext-idl-attribute:list-replace data-x-internal=list-replace>Replace</a> each remaining run of consecutive required line break count items with a string consisting of as many U+000A LF code points as the maximum of the values in the required line break count items.<li>Return the concatenation of the string items in <var>results</var>.</ol> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn>✔MDN</button><div class=feature><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/outerText title="The outerText property of the HTMLElement interface returns the same value as HTMLElement.innerText. When used as a setter it replaces the whole current node with the given text (this differs from innerText, which replaces the content inside the current node).">HTMLElement/outerText</a>Support in all current engines.<div class=support>Firefox98+Safari1.3+Chrome1+<hr>Opera12.1+Edge79+<hr>Edge (Legacy)12+Internet Explorer5.5+<hr>Firefox Android?Safari iOS?Chrome Android?WebView Android1+Samsung Internet?Opera Android12.1+</div></div></div>The <dfn data-dfn-for=HTMLElement id=dom-innertext data-dfn-type=attribute><code>innerText</code></dfn> and <dfn data-dfn-for=HTMLElement id=dom-outertext data-dfn-type=attribute><code>outerText</code></dfn> getter steps are to return the result of running <a href=#get-the-text-steps id=the-innertext-idl-attribute:get-the-text-steps>get the text steps</a> with <a id=the-innertext-idl-attribute:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>. The <dfn id=rendered-text-collection-steps>rendered text collection steps</dfn>, given a <a id=the-innertext-idl-attribute:node href=https://dom.spec.whatwg.org/#interface-node data-x-internal=node>node</a> <var>node</var>, are as follows: <ol><li>Let <var>items</var> be the result of running the <a href=#rendered-text-collection-steps id=the-innertext-idl-attribute:rendered-text-collection-steps-2>rendered text collection steps</a> with each child node of <var>node</var> in <a id=the-innertext-idl-attribute:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>, and then concatenating the results to a single <a id=the-innertext-idl-attribute:list-3 href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a>.<li>If <var>node</var>'s <a id=the-innertext-idl-attribute:computed-value href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a> of <a id="the-innertext-idl-attribute:'visibility'" href=https://drafts.csswg.org/css2/#propdef-visibility data-x-internal="'visibility'">'visibility'</a> is not 'visible', then return <var>items</var>.<li> If <var>node</var> is not <a id=the-innertext-idl-attribute:being-rendered-5 href=rendering.html#being-rendered>being rendered</a>, then return <var>items</var>. For the purpose of this step, the following elements must act as described if the <a id=the-innertext-idl-attribute:computed-value-2 href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a> of the <a id="the-innertext-idl-attribute:'display'" href=https://drafts.csswg.org/css2/#display-prop data-x-internal="'display'">'display'</a> property is not 'none': <ul><li><code id=the-innertext-idl-attribute:the-select-element><a href=form-elements.html#the-select-element>select</a></code> elements have an associated non-replaced inline <a id=the-innertext-idl-attribute:css-box href=https://drafts.csswg.org/css-display/#css-box data-x-internal=css-box>CSS box</a> whose child boxes include only those of <code id=the-innertext-idl-attribute:the-optgroup-element><a href=form-elements.html#the-optgroup-element>optgroup</a></code> and <code id=the-innertext-idl-attribute:the-option-element><a href=form-elements.html#the-option-element>option</a></code> element child nodes;<li><code id=the-innertext-idl-attribute:the-optgroup-element-2><a href=form-elements.html#the-optgroup-element>optgroup</a></code> elements have an associated non-replaced block-level <a id=the-innertext-idl-attribute:css-box-2 href=https://drafts.csswg.org/css-display/#css-box data-x-internal=css-box>CSS box</a> whose child boxes include only those of <code id=the-innertext-idl-attribute:the-option-element-2><a href=form-elements.html#the-option-element>option</a></code> element child nodes; and<li><code id=the-innertext-idl-attribute:the-option-element-3><a href=form-elements.html#the-option-element>option</a></code> element have an associated non-replaced block-level <a id=the-innertext-idl-attribute:css-box-3 href=https://drafts.csswg.org/css-display/#css-box data-x-internal=css-box>CSS box</a> whose child boxes are as normal for non-replaced block-level <a href=https://drafts.csswg.org/css-display/#css-box id=the-innertext-idl-attribute:css-box-4 data-x-internal=css-box>CSS boxes</a>.</ul> <var>items</var> can be non-empty due to 'display:contents'. <li>If <var>node</var> is a <code id=the-innertext-idl-attribute:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node, then for each CSS text box produced by <var>node</var>, in content order, compute the text of the box after application of the CSS <a id="the-innertext-idl-attribute:'white-space'" href=https://drafts.csswg.org/css-text/#white-space-property data-x-internal="'white-space'">'white-space'</a> processing rules and <a id="the-innertext-idl-attribute:'text-transform'" href=https://drafts.csswg.org/css-text/#text-transform-property data-x-internal="'text-transform'">'text-transform'</a> rules, set <var>items</var> to the <a id=the-innertext-idl-attribute:list-4 href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of the resulting strings, and return <var>items</var>. The CSS <a id="the-innertext-idl-attribute:'white-space'-2" href=https://drafts.csswg.org/css-text/#white-space-property data-x-internal="'white-space'">'white-space'</a> 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 <code id=the-innertext-idl-attribute:the-br-element-3><a href=text-level-semantics.html#the-br-element>br</a></code> element. Soft hyphens should be preserved. <a href=references.html#refsCSSTEXT>[CSSTEXT]</a><li>If <var>node</var> is a <code id=the-innertext-idl-attribute:the-br-element-4><a href=text-level-semantics.html#the-br-element>br</a></code> element, then <a href=https://infra.spec.whatwg.org/#list-append id=the-innertext-idl-attribute:list-append data-x-internal=list-append>append</a> a string containing a single U+000A LF code point to <var>items</var>.<li>If <var>node</var>'s <a id=the-innertext-idl-attribute:computed-value-3 href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a> of <a id="the-innertext-idl-attribute:'display'-2" href=https://drafts.csswg.org/css2/#display-prop data-x-internal="'display'">'display'</a> is <a id="the-innertext-idl-attribute:'table-cell'" href=https://drafts.csswg.org/css-tables/#table-cell data-x-internal="'table-cell'">'table-cell'</a>, and <var>node</var>'s <a id=the-innertext-idl-attribute:css-box-5 href=https://drafts.csswg.org/css-display/#css-box data-x-internal=css-box>CSS box</a> is not the last <a id="the-innertext-idl-attribute:'table-cell'-2" href=https://drafts.csswg.org/css-tables/#table-cell data-x-internal="'table-cell'">'table-cell'</a> box of its enclosing <a id="the-innertext-idl-attribute:'table-row'" href=https://drafts.csswg.org/css-tables/#table-row data-x-internal="'table-row'">'table-row'</a> box, then <a href=https://infra.spec.whatwg.org/#list-append id=the-innertext-idl-attribute:list-append-2 data-x-internal=list-append>append</a> a string containing a single U+0009 TAB code point to <var>items</var>.<li>If <var>node</var>'s <a id=the-innertext-idl-attribute:computed-value-4 href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a> of <a id="the-innertext-idl-attribute:'display'-3" href=https://drafts.csswg.org/css2/#display-prop data-x-internal="'display'">'display'</a> is <a id="the-innertext-idl-attribute:'table-row'-2" href=https://drafts.csswg.org/css-tables/#table-row data-x-internal="'table-row'">'table-row'</a>, and <var>node</var>'s <a id=the-innertext-idl-attribute:css-box-6 href=https://drafts.csswg.org/css-display/#css-box data-x-internal=css-box>CSS box</a> is not the last <a id="the-innertext-idl-attribute:'table-row'-3" href=https://drafts.csswg.org/css-tables/#table-row data-x-internal="'table-row'">'table-row'</a> box of the nearest ancestor <a id="the-innertext-idl-attribute:'table'" href=https://drafts.csswg.org/css-tables/#table data-x-internal="'table'">'table'</a> box, then <a href=https://infra.spec.whatwg.org/#list-append id=the-innertext-idl-attribute:list-append-3 data-x-internal=list-append>append</a> a string containing a single U+000A LF code point to <var>items</var>.<li>If <var>node</var> is a <code id=the-innertext-idl-attribute:the-p-element><a href=grouping-content.html#the-p-element>p</a></code> element, then <a href=https://infra.spec.whatwg.org/#list-append id=the-innertext-idl-attribute:list-append-4 data-x-internal=list-append>append</a> 2 (a required line break count) at the beginning and end of <var>items</var>.<li> If <var>node</var>'s <a id=the-innertext-idl-attribute:used-value href=https://drafts.csswg.org/css-cascade/#used-value data-x-internal=used-value>used value</a> of <a id="the-innertext-idl-attribute:'display'-4" href=https://drafts.csswg.org/css2/#display-prop data-x-internal="'display'">'display'</a> is <a id=the-innertext-idl-attribute:block-level href=https://drafts.csswg.org/css-display/#block-level data-x-internal=block-level>block-level</a> or <a id="the-innertext-idl-attribute:'table-caption'" href=https://drafts.csswg.org/css-tables/#table-caption data-x-internal="'table-caption'">'table-caption'</a>, then <a href=https://infra.spec.whatwg.org/#list-append id=the-innertext-idl-attribute:list-append-5 data-x-internal=list-append>append</a> 1 (a required line break count) at the beginning and end of <var>items</var>. <a href=references.html#refsCSSDISPLAY>[CSSDISPLAY]</a> Floats and absolutely-positioned elements fall into this category. <li>Return <var>items</var>.</ol> Note that descendant nodes of most replaced elements (e.g., <code id=the-innertext-idl-attribute:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code>, <code id=the-innertext-idl-attribute:the-input-element><a href=input.html#the-input-element>input</a></code>, and <code id=the-innertext-idl-attribute:the-video-element><a href=media.html#the-video-element>video</a></code> — but not <code id=the-innertext-idl-attribute:the-button-element><a href=form-elements.html#the-button-element>button</a></code>) are not rendered by CSS, strictly speaking, and therefore have no <a href=https://drafts.csswg.org/css-display/#css-box id=the-innertext-idl-attribute:css-box-7 data-x-internal=css-box>CSS boxes</a> for the purposes of this algorithm. This algorithm is amenable to being generalized to work on <a href=https://dom.spec.whatwg.org/#concept-range id=the-innertext-idl-attribute:concept-range data-x-internal=concept-range>ranges</a>. Then we can use it as the basis for <code id=the-innertext-idl-attribute:selection><a data-x-internal=selection href=https://w3c.github.io/selection-api/#selection-interface>Selection</a></code>'s stringifier and maybe expose it directly on <a href=https://dom.spec.whatwg.org/#concept-range id=the-innertext-idl-attribute:concept-range-2 data-x-internal=concept-range>ranges</a>. See <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=10583">Bugzilla bug 10583</a>. <hr> The <dfn id=set-the-inner-text-steps data-export="">set the inner text steps</dfn>, given an <a href=#htmlelement id=the-innertext-idl-attribute:htmlelement-2>HTMLElement</a> <var>element</var>, and a string <var>value</var> are: <ol><li>Let <var>fragment</var> be the <a href=#rendered-text-fragment id=the-innertext-idl-attribute:rendered-text-fragment>rendered text fragment</a> for <var>value</var> given <var>element</var>'s <a id=the-innertext-idl-attribute:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><a href=https://dom.spec.whatwg.org/#concept-node-replace-all id=the-innertext-idl-attribute:concept-node-replace-all data-x-internal=concept-node-replace-all>Replace all</a> with <var>fragment</var> within <var>element</var>.</ol> The <code id=the-innertext-idl-attribute:dom-innertext-3><a href=#dom-innertext>innerText</a></code> setter steps are to run <a href=#set-the-inner-text-steps id=the-innertext-idl-attribute:set-the-inner-text-steps>set the inner text steps</a>. The <code id=the-innertext-idl-attribute:dom-outertext-2><a href=#dom-outertext>outerText</a></code> setter steps are: <ol><li>If <a id=the-innertext-idl-attribute:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s parent is null, then throw a <a id=the-innertext-idl-attribute:nomodificationallowederror href=https://webidl.spec.whatwg.org/#nomodificationallowederror data-x-internal=nomodificationallowederror>"<code>NoModificationAllowedError</code>"</a> <code id=the-innertext-idl-attribute:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li>Let <var>next</var> be <a id=the-innertext-idl-attribute:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-innertext-idl-attribute:next-sibling href=https://dom.spec.whatwg.org/#concept-tree-next-sibling data-x-internal=next-sibling>next sibling</a>.<li>Let <var>previous</var> be <a id=the-innertext-idl-attribute:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-innertext-idl-attribute:previous-sibling href=https://dom.spec.whatwg.org/#concept-tree-previous-sibling data-x-internal=previous-sibling>previous sibling</a>.<li>Let <var>fragment</var> be the <a href=#rendered-text-fragment id=the-innertext-idl-attribute:rendered-text-fragment-2>rendered text fragment</a> for the given value given <a id=the-innertext-idl-attribute:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-innertext-idl-attribute:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li>If <var>fragment</var> has no <a href=https://dom.spec.whatwg.org/#concept-tree-child id=the-innertext-idl-attribute:concept-tree-child data-x-internal=concept-tree-child>children</a>, then <a href=https://dom.spec.whatwg.org/#concept-node-append id=the-innertext-idl-attribute:concept-node-append data-x-internal=concept-node-append>append</a> a new <code id=the-innertext-idl-attribute:text-2><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node whose <a href=https://dom.spec.whatwg.org/#concept-cd-data id=the-innertext-idl-attribute:concept-cd-data data-x-internal=concept-cd-data>data</a> is the empty string and <a id=the-innertext-idl-attribute:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is <a id=the-innertext-idl-attribute:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-innertext-idl-attribute:node-document-4 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> to <var>fragment</var>.<li><a href=https://dom.spec.whatwg.org/#concept-node-replace id=the-innertext-idl-attribute:concept-node-replace data-x-internal=concept-node-replace>Replace</a> <a id=the-innertext-idl-attribute:this-7 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> with <var>fragment</var> within <a id=the-innertext-idl-attribute:this-8 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s parent.<li>If <var>next</var> is non-null and <var>next</var>'s <a id=the-innertext-idl-attribute:previous-sibling-2 href=https://dom.spec.whatwg.org/#concept-tree-previous-sibling data-x-internal=previous-sibling>previous sibling</a> is a <code id=the-innertext-idl-attribute:text-3><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node, then <a href=#merge-with-the-next-text-node id=the-innertext-idl-attribute:merge-with-the-next-text-node>merge with the next text node</a> given <var>next</var>'s <a id=the-innertext-idl-attribute:previous-sibling-3 href=https://dom.spec.whatwg.org/#concept-tree-previous-sibling data-x-internal=previous-sibling>previous sibling</a>.<li>If <var>previous</var> is a <code id=the-innertext-idl-attribute:text-4><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node, then <a href=#merge-with-the-next-text-node id=the-innertext-idl-attribute:merge-with-the-next-text-node-2>merge with the next text node</a> given <var>previous</var>.</ol> The <dfn id=rendered-text-fragment>rendered text fragment</dfn> for a string <var>input</var> given a <code id=the-innertext-idl-attribute:document><a href=#document>Document</a></code> <var>document</var> is the result of running the following steps: <ol><li>Let <var>fragment</var> be a new <code id=the-innertext-idl-attribute:documentfragment><a data-x-internal=documentfragment href=https://dom.spec.whatwg.org/#interface-documentfragment>DocumentFragment</a></code> whose <a id=the-innertext-idl-attribute:node-document-5 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is <var>document</var>.<li>Let <var>position</var> be a <a id=the-innertext-idl-attribute:position-variable href=https://infra.spec.whatwg.org/#string-position-variable data-x-internal=position-variable>position variable</a> for <var>input</var>, initially pointing at the start of <var>input</var>.<li>Let <var>text</var> be the empty string.<li> While <var>position</var> is not past the end of <var>input</var>: <ol><li><a id=the-innertext-idl-attribute:collect-a-sequence-of-code-points href=https://infra.spec.whatwg.org/#collect-a-sequence-of-code-points data-x-internal=collect-a-sequence-of-code-points>Collect a sequence of code points</a> that are not U+000A LF or U+000D CR from <var>input</var> given <var>position</var>, and set <var>text</var> to the result.<li>If <var>text</var> is not the empty string, then <a href=https://dom.spec.whatwg.org/#concept-node-append id=the-innertext-idl-attribute:concept-node-append-2 data-x-internal=concept-node-append>append</a> a new <code id=the-innertext-idl-attribute:text-5><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node whose <a href=https://dom.spec.whatwg.org/#concept-cd-data id=the-innertext-idl-attribute:concept-cd-data-2 data-x-internal=concept-cd-data>data</a> is <var>text</var> and <a id=the-innertext-idl-attribute:node-document-6 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is <var>document</var> to <var>fragment</var>.<li> While <var>position</var> is not past the end of <var>input</var>, and the code point at <var>position</var> is either U+000A LF or U+000D CR: <ol><li>If the code point at <var>position</var> is U+000D CR and the next code point is U+000A LF, then advance <var>position</var> to the next code point in <var>input</var>.<li>Advance <var>position</var> to the next code point in <var>input</var>.<li><a href=https://dom.spec.whatwg.org/#concept-node-append id=the-innertext-idl-attribute:concept-node-append-3 data-x-internal=concept-node-append>Append</a> the result of <a href=https://dom.spec.whatwg.org/#concept-create-element id=the-innertext-idl-attribute:create-an-element data-x-internal=create-an-element>creating an element</a> given <var>document</var>, <code id=the-innertext-idl-attribute:the-br-element-5><a href=text-level-semantics.html#the-br-element>br</a></code>, and the <a id=the-innertext-idl-attribute:html-namespace-2 href=https://infra.spec.whatwg.org/#html-namespace data-x-internal=html-namespace-2>HTML namespace</a> to <var>fragment</var>.</ol> </ol> <li>Return <var>fragment</var>.</ol> To <dfn id=merge-with-the-next-text-node>merge with the next text node</dfn> given a <code id=the-innertext-idl-attribute:text-6><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node <var>node</var>: <ol><li>Let <var>next</var> be <var>node</var>'s <a id=the-innertext-idl-attribute:next-sibling-2 href=https://dom.spec.whatwg.org/#concept-tree-next-sibling data-x-internal=next-sibling>next sibling</a>.<li>If <var>next</var> is not a <code id=the-innertext-idl-attribute:text-7><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node, then return.<li><a id=the-innertext-idl-attribute:replace-data href=https://dom.spec.whatwg.org/#concept-cd-replace data-x-internal=replace-data>Replace data</a> with <var>node</var>, <var>node</var>'s <a href=https://dom.spec.whatwg.org/#concept-cd-data id=the-innertext-idl-attribute:concept-cd-data-3 data-x-internal=concept-cd-data>data</a>'s <a id=the-innertext-idl-attribute:length href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a>, 0, and <var>next</var>'s <a href=https://dom.spec.whatwg.org/#concept-cd-data id=the-innertext-idl-attribute:concept-cd-data-4 data-x-internal=concept-cd-data>data</a>.<li><a href=https://dom.spec.whatwg.org/#concept-node-remove id=the-innertext-idl-attribute:concept-node-remove data-x-internal=concept-node-remove>Remove</a> <var>next</var>.</ol> <h4 id=requirements-relating-to-the-bidirectional-algorithm>3.2.8 Requirements relating to the bidirectional algorithm<a href=#requirements-relating-to-the-bidirectional-algorithm class=self-link></a></h4> <h5 id=authoring-conformance-criteria-for-bidirectional-algorithm-formatting-characters>3.2.8.1 Authoring conformance criteria for bidirectional-algorithm formatting characters<a href=#authoring-conformance-criteria-for-bidirectional-algorithm-formatting-characters class=self-link></a></h5> <a href=#text-content id=authoring-conformance-criteria-for-bidirectional-algorithm-formatting-characters:text-content>Text content</a> in <a id=authoring-conformance-criteria-for-bidirectional-algorithm-formatting-characters:html-elements href=infrastructure.html#html-elements>HTML elements</a> with <code id=authoring-conformance-criteria-for-bidirectional-algorithm-formatting-characters:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes in their <a href=#concept-html-contents id=authoring-conformance-criteria-for-bidirectional-algorithm-formatting-characters:concept-html-contents>contents</a>, and text in attributes of <a id=authoring-conformance-criteria-for-bidirectional-algorithm-formatting-characters:html-elements-2 href=infrastructure.html#html-elements>HTML elements</a> that allow free-form text, may contain characters in the ranges U+202A to U+202E and U+2066 to U+2069 (the bidirectional-algorithm formatting characters). <a href=references.html#refsBIDI>[BIDI]</a> Authors are encouraged to use the <code id=authoring-conformance-criteria-for-bidirectional-algorithm-formatting-characters:attr-dir><a href=#attr-dir>dir</a></code> attribute, the <code id=authoring-conformance-criteria-for-bidirectional-algorithm-formatting-characters:the-bdo-element><a href=text-level-semantics.html#the-bdo-element>bdo</a></code> element, and the <code id=authoring-conformance-criteria-for-bidirectional-algorithm-formatting-characters:the-bdi-element><a href=text-level-semantics.html#the-bdi-element>bdi</a></code> element, rather than maintaining the bidirectional-algorithm formatting characters manually. The bidirectional-algorithm formatting characters interact poorly with CSS. <h5 id=user-agent-conformance-criteria>3.2.8.2 User agent conformance criteria<a href=#user-agent-conformance-criteria class=self-link></a></h5> User agents must implement the Unicode bidirectional algorithm to determine the proper ordering of characters when rendering documents and parts of documents. <a href=references.html#refsBIDI>[BIDI]</a> 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 <a id="user-agent-conformance-criteria:'unicode-bidi'" href=https://drafts.csswg.org/css-writing-modes/#unicode-bidi data-x-internal="'unicode-bidi'">'unicode-bidi'</a>, <a id="user-agent-conformance-criteria:'direction'" href=https://drafts.csswg.org/css-writing-modes/#direction data-x-internal="'direction'">'direction'</a>, and <a id="user-agent-conformance-criteria:'content'" href=https://drafts.csswg.org/css2/#content%E2%91%A0 data-x-internal="'content'">'content'</a> properties, and must have, in its user agent style sheet, the rules using those properties given in this specification's <a href=rendering.html#rendering>rendering</a> 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. <a href=references.html#refsCSSGC>[CSSGC]</a> The following elements and attributes have requirements defined by the <a href=rendering.html#rendering>rendering</a> section that, due to the requirements in this section, are requirements on all user agents (not just those that <a href=infrastructure.html#renderingUA>support the suggested default rendering</a>): <ul class=brief><li><code id=user-agent-conformance-criteria:attr-dir><a href=#attr-dir>dir</a></code> attribute<li><code id=user-agent-conformance-criteria:the-bdi-element><a href=text-level-semantics.html#the-bdi-element>bdi</a></code> element<li><code id=user-agent-conformance-criteria:the-bdo-element><a href=text-level-semantics.html#the-bdo-element>bdo</a></code> element<li><code id=user-agent-conformance-criteria:the-br-element><a href=text-level-semantics.html#the-br-element>br</a></code> element<li><code id=user-agent-conformance-criteria:the-pre-element><a href=grouping-content.html#the-pre-element>pre</a></code> element<li><code id=user-agent-conformance-criteria:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> element<li><code id=user-agent-conformance-criteria:the-wbr-element><a href=text-level-semantics.html#the-wbr-element>wbr</a></code> element</ul> <h4 id=wai-aria>3.2.9 Requirements related to ARIA and to platform accessibility APIs<a href=#wai-aria class=self-link></a></h4> User agent requirements for implementing Accessibility API semantics on <a id=wai-aria:html-elements href=infrastructure.html#html-elements>HTML elements</a> are defined in <cite>HTML Accessibility API Mappings</cite>. In addition to the rules there, for a <a id=wai-aria:custom-element href=custom-elements.html#custom-element>custom element</a> <var>element</var>, the default ARIA role semantics are determined as follows: <a href=references.html#refsHTMLAAM>[HTMLAAM]</a> <ol><li>Let <var>map</var> be <var>element</var>'s <a id=wai-aria:internal-content-attribute-map href=custom-elements.html#internal-content-attribute-map>internal content attribute map</a>.<li>If <var>map</var>["<code>role</code>"] <a href=https://infra.spec.whatwg.org/#map-exists id=wai-aria:map-exists data-x-internal=map-exists>exists</a>, then return it.<li>Return no role.</ol> Similarly, for a <a id=wai-aria:custom-element-2 href=custom-elements.html#custom-element>custom element</a> <var>element</var>, the default ARIA state and property semantics, for a state or property named <var>stateOrProperty</var>, are determined as follows: <ol><li> If <var>element</var>'s <a id=wai-aria:attached-internals href=custom-elements.html#attached-internals>attached internals</a> is non-null: <ol><li>If <var>element</var>'s <a id=wai-aria:attached-internals-2 href=custom-elements.html#attached-internals>attached internals</a>'s <a href=common-dom-interfaces.html#attr-associated-element id=wai-aria:attr-associated-element>get the <var>stateOrProperty</var>-associated element</a> exists, then return the result of running it.<li>If <var>element</var>'s <a id=wai-aria:attached-internals-3 href=custom-elements.html#attached-internals>attached internals</a>'s <a href=common-dom-interfaces.html#attr-associated-elements id=wai-aria:attr-associated-elements>get the <var>stateOrProperty</var>-associated elements</a> exists, then return the result of running it.</ol> <li>If <var>element</var>'s <a id=wai-aria:internal-content-attribute-map-2 href=custom-elements.html#internal-content-attribute-map>internal content attribute map</a>[<var>stateOrProperty</var>] <a href=https://infra.spec.whatwg.org/#map-exists id=wai-aria:map-exists-2 data-x-internal=map-exists>exists</a>, then return it.<li>Return the default value for <var>stateOrProperty</var>.</ol> The "default semantics" referred to here are sometimes also called "native", "implicit", or "host language" semantics in <cite>ARIA</cite>. <a href=references.html#refsARIA>[ARIA]</a> One implication of these definitions is that the default semantics can change over time. This allows custom elements the same expressivity as built-in elements; e.g., compare to how the default ARIA role semantics of an <code id=wai-aria:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> element change as the <code id=wai-aria:attr-hyperlink-href><a href=links.html#attr-hyperlink-href>href</a></code> attribute is added or removed. For an example of this in action, see <a href=custom-elements.html#custom-elements-accessibility-example>the custom elements section</a>. <hr> Conformance checker requirements for checking use of ARIA <code id=wai-aria:attr-aria-role><a href=infrastructure.html#attr-aria-role>role</a></code> and <code id=wai-aria:attr-aria-*><a href=infrastructure.html#attr-aria-*>aria-*</a></code> attributes on <a id=wai-aria:html-elements-2 href=infrastructure.html#html-elements>HTML elements</a> are defined in <cite>ARIA in HTML</cite>. <a href=references.html#refsARIAHTML>[ARIAHTML]</a> <nav><a href=structured-data.html>← 2.7 Safe passing of structured data</a> — <a href=./>Table of Contents</a> — <a href=semantics.html>4 The elements of HTML →</a></nav>