HTML Living Standard — Last Updated 12 May 2023 ← 2.7 Safe passing of structured data — Table of Contents — 4 The elements of HTML → 3 Semantics, structure, and APIs of HTML documents 3.1 Documents 3.1.1 The Document object 3.1.2 The DocumentOrShadowRoot interface 3.1.3 Resource metadata management 3.1.4 Reporting document loading status 3.1.5 Render-blocking mechanism 3.1.6 DOM tree accessors 3.2 Elements 3.2.1 Semantics 3.2.2 Elements in the DOM 3.2.3 HTML element constructors 3.2.4 Element definitions 3.2.4.1 Attributes 3.2.5 Content models 3.2.5.1 The "nothing" content model 3.2.5.2 Kinds of content 3.2.5.2.1 Metadata content 3.2.5.2.2 Flow content 3.2.5.2.3 Sectioning content 3.2.5.2.4 Heading content 3.2.5.2.5 Phrasing content 3.2.5.2.6 Embedded content 3.2.5.2.7 Interactive content 3.2.5.2.8 Palpable content 3.2.5.2.9 Script-supporting elements 3.2.5.3 Transparent content models 3.2.5.4 Paragraphs 3.2.6 Global attributes 3.2.6.1 The title attribute 3.2.6.2 The lang and xml:lang attributes 3.2.6.3 The translate attribute 3.2.6.4 The dir attribute 3.2.6.5 The style attribute 3.2.6.6 Embedding custom non-visible data with the data-* attributes 3.2.7 The innerText and outerText properties 3.2.8 Requirements relating to the bidirectional algorithm 3.2.8.1 Authoring conformance criteria for bidirectional-algorithm formatting characters 3.2.8.2 User agent conformance criteria 3.2.9 Requirements related to ARIA and to platform accessibility APIs
3 Semantics, structure, and APIs of HTML documents
3.1 Documents Every XML and HTML document in an HTML UA is represented by a Document object. [DOM] The Document object's URL is defined in DOM. It is initially set when the Document object is created, but can change during the lifetime of the Document object; for example, it changes when the user navigates to a fragment on the page and when the pushState() method is called with a new URL. [DOM] Interactive user agents typically expose the Document object's URL in their user interface. This is the primary mechanism by which a user can tell if a site is attempting to impersonate another. The Document object's origin is defined in DOM. It is initially set when the Document object is created, and can change during the lifetime of the Document only upon setting document.domain. A Document's origin can differ from the origin of its URL; for example when a child navigable is created, its active document's origin is inherited from its parent's active document's origin, even though its active document's URL is about:blank. [DOM] When a Document is created by a script using the createDocument() or createHTMLDocument() methods, the Document is ready for post-load tasks immediately. The document's referrer is a string (representing a URL) that can be set when the Document is created. If it is not explicitly set, then its value is the empty string. 3.1.1 The Document object DOM defines a Document interface, which this specification extends significantly. enum DocumentReadyState { "loading", "interactive", "complete" }; enum DocumentVisibilityState { "visible", "hidden" }; typedef (HTMLScriptElement or SVGScriptElement) HTMLOrSVGScriptElement; [LegacyOverrideBuiltIns] partial interface Document { // resource metadata management [PutForwards=href, LegacyUnforgeable] readonly attribute Location? location; attribute USVString domain; readonly attribute USVString referrer; attribute USVString cookie; readonly attribute DOMString lastModified; readonly attribute DocumentReadyState readyState; // DOM tree accessors getter object (DOMString name); [CEReactions] attribute DOMString title; [CEReactions] attribute DOMString dir; [CEReactions] attribute HTMLElement? body; readonly attribute HTMLHeadElement? head; [SameObject] readonly attribute HTMLCollection images; [SameObject] readonly attribute HTMLCollection embeds; [SameObject] readonly attribute HTMLCollection plugins; [SameObject] readonly attribute HTMLCollection links; [SameObject] readonly attribute HTMLCollection forms; [SameObject] readonly attribute HTMLCollection scripts; NodeList getElementsByName(DOMString elementName); readonly attribute HTMLOrSVGScriptElement? currentScript; // classic scripts in a document tree only // dynamic markup insertion [CEReactions] Document open(optional DOMString unused1, optional DOMString unused2); // both arguments are ignored WindowProxy? open(USVString url, DOMString name, DOMString features); [CEReactions] undefined close(); [CEReactions] undefined write(DOMString... text); [CEReactions] undefined writeln(DOMString... text); // user interaction readonly attribute WindowProxy? defaultView; boolean hasFocus(); [CEReactions] attribute DOMString designMode; [CEReactions] boolean execCommand(DOMString commandId, optional boolean showUI = false, optional DOMString value = ""); boolean queryCommandEnabled(DOMString commandId); boolean queryCommandIndeterm(DOMString commandId); boolean queryCommandState(DOMString commandId); boolean queryCommandSupported(DOMString commandId); DOMString queryCommandValue(DOMString commandId); readonly attribute boolean hidden; readonly attribute DocumentVisibilityState visibilityState; // special event handler IDL attributes that only apply to Document objects [LegacyLenientThis] attribute EventHandler onreadystatechange; attribute EventHandler onvisibilitychange; // also has obsolete members }; Document includes GlobalEventHandlers; Each Document has a policy container (a policy container), initially a new policy container, which contains policies which apply to the Document. Each Document has a permissions policy, which is a permissions policy, which is initially empty. Each Document has a module map, which is a module map, initially empty. Each Document has a cross-origin opener policy, which is a cross-origin opener policy, initially a new cross-origin opener policy. Each Document has an is initial about:blank, which is a boolean, initially false. Each Document has a navigation id, which is a navigation ID or null, initially null. 3.1.2 The DocumentOrShadowRoot interface DOM defines the DocumentOrShadowRoot mixin, which this specification extends. partial interface mixin DocumentOrShadowRoot { readonly attribute Element? activeElement; }; 3.1.3 Resource metadata management document.referrer Returns the URL of the Document from which the user navigated to this one, unless it was blocked or there was no such document, in which case it returns the empty string. The noreferrer link type can be used to block the referrer. The referrer attribute must return the document's referrer. document.cookie [ = value ] Returns the HTTP cookies that apply to the Document. If there are no cookies or cookies can't be applied to this resource, the empty string will be returned. Can be set, to add a new cookie to the element's set of HTTP cookies. If the contents are sandboxed into a unique origin (e.g. in an iframe with the sandbox attribute), a "SecurityError" DOMException will be thrown on getting and setting. The cookie attribute represents the cookies of the resource identified by the document's URL. A Document object that falls into one of the following conditions is a cookie-averse Document object: A Document object whose browsing context is null. A Document whose URL's scheme is not an HTTP(S) scheme. (This is a tracking vector.) On getting, if the document is a cookie-averse Document object, then the user agent must return the empty string. Otherwise, if the Document's origin is an opaque origin, the user agent must throw a "SecurityError" DOMException. Otherwise, the user agent must return the cookie-string for the document's URL for a "non-HTTP" API, decoded using UTF-8 decode without BOM. [COOKIES] On setting, if the document is a cookie-averse Document object, then the user agent must do nothing. Otherwise, if the Document's origin is an opaque origin, the user agent must throw a "SecurityError" DOMException. Otherwise, the user agent must act as it would when receiving a set-cookie-string for the document's URL via a "non-HTTP" API, consisting of the new value encoded as UTF-8. [COOKIES] [ENCODING] Since the cookie attribute is accessible across frames, the path restrictions on cookies are only a tool to help manage which cookies are sent to which parts of the site, and are not in any way a security feature. The cookie attribute's getter and setter synchronously access shared state. Since there is no locking mechanism, other browsing contexts in a multiprocess user agent can modify cookies while scripts are running. A site could, for instance, try to read a cookie, increment its value, then write it back out, using the new value of the cookie as a unique identifier for the session; if the site does this twice in two different browser windows at the same time, it might end up using the same "unique" identifier for both sessions, with potentially disastrous effects. document.lastModified Returns the date of the last modification to the document, as reported by the server, in the form "MM/DD/YYYY hh:mm:ss", in the user's local time zone. If the last modification date is not known, the current time is returned instead. The lastModified attribute, on getting, must return the date and time of the Document's source file's last modification, in the user's local time zone, in the following format: The month component of the date. A U+002F SOLIDUS character (/). The day component of the date. A U+002F SOLIDUS character (/). The year component of the date. A U+0020 SPACE character. The hours component of the time. A U+003A COLON character (:). The minutes component of the time. A U+003A COLON character (:). The seconds component of the time. All the numeric components above, other than the year, must be given as two ASCII digits representing the number in base ten, zero-padded if necessary. The year must be given as the shortest possible string of four or more ASCII digits representing the number in base ten, zero-padded if necessary. The Document's source file's last modification date and time must be derived from relevant features of the networking protocols used, e.g. from the value of the HTTP `Last-Modified` header of the document, or from metadata in the file system for local files. If the last modification date and time are not known, the attribute must return the current date and time in the above format. 3.1.4 Reporting document loading status document.readyState Returns "loading" while the Document is loading, "interactive" once it is finished parsing but still loading subresources, and "complete" once it has loaded. The readystatechange event fires on the Document object when this value changes. The DOMContentLoaded event fires after the transition to "interactive" but before the transition to "complete", at the point where all subresources apart from async script elements have loaded. Each Document has a current document readiness, a string, initially "complete". For Document objects created via the create and initialize a Document object algorithm, this will be immediately reset to "loading" before any script can observe the value of document.readyState. This default applies to other cases such as initial about:blank Documents or Documents without a browsing context. The readyState getter steps are to return this's current document readiness. To update the current document readiness for Document document to readinessValue: If document's current document readiness equals readinessValue, then return. Set document's current document readiness to readinessValue. If document is associated with an HTML parser, then: Let now be the current high resolution time given document's relevant global object. If readinessValue is "complete", and document's load timing info's DOM complete time is 0, then set document's load timing info's DOM complete time to now. Otherwise, if readinessValue is "interactive", and document's load timing info's DOM interactive time is 0, then set document's load timing info's DOM interactive time to now. Fire an event named readystatechange at document. A Document is said to have an active parser if it is associated with an HTML parser or an XML parser that has not yet been stopped or aborted. A Document has a document load timing info load timing info. A Document has a document unload timing info previous document unload timing. A Document has a boolean was created via cross-origin redirects, initially false. The document load timing info struct has the following items: navigation start time (default 0) A number DOM interactive time (default 0) DOM content loaded event start time (default 0) DOM content loaded event end time (default 0) DOM complete time (default 0) load event start time (default 0) load event end time (default 0) DOMHighResTimeStamp values The document unload timing info struct has the following items: unload event start time (default 0) unload event end time (default 0) DOMHighResTimeStamp values 3.1.5 Render-blocking mechanism Each Document has a render-blocking element set, a set of elements, initially the empty set. A Document document allows adding render-blocking elements if document's content type is "text/html" and the body element of document is null. A Document document is render-blocked if both of the following are true: document's render-blocking element set is non-empty, or document allows adding render-blocking elements. The current high resolution time given document's relevant global object has not exceeded an implementation-defined timeout value. An element el is render-blocking if el's node document document is render-blocked, and el is in document's render-blocking element set. To block rendering on an element el: Let document be el's node document. If document allows adding render-blocking elements, then append el to document's render-blocking element set. To unblock rendering on an element el: Let document be el's node document. Remove el from document's render-blocking element set. Whenever a render-blocking element el becomes browsing-context disconnected, or el's blocking attribute's value is changed so that el is no longer potentially render-blocking, then unblock rendering on el. 3.1.6 DOM tree accessors The html element of a document is its document element, if it's an html element, and null otherwise. document.head Returns the head element. The head element of a document is the first head element that is a child of the html element, if there is one, or null otherwise. The head attribute, on getting, must return the head element of the document (a head element or null). document.title [ = value ] Returns the document's title, as given by the title element for HTML and as given by the SVG title element for SVG. Can be set, to update the document's title. If there is no appropriate element to update, the new value is ignored. The title element of a document is the first title element in the document (in tree order), if there is one, or null otherwise. The title attribute must, on getting, run the following algorithm: If the document element is an SVG svg element, then let value be the child text content of the first SVG title element that is a child of the document element. Otherwise, let value be the child text content of the title element, or the empty string if the title element is null. Strip and collapse ASCII whitespace in value. Return value. On setting, the steps corresponding to the first matching condition in the following list must be run: If the document element is an SVG svg element If there is an SVG title element that is a child of the document element, let element be the first such element. Otherwise: Let element be the result of creating an element given the document element's node document, title, and the SVG namespace. Insert element as the first child of the document element. String replace all with the given value within element. If the document element is in the HTML namespace If the title element is null and the head element is null, then return. If the title element is non-null, let element be the title element. Otherwise: Let element be the result of creating an element given the document element's node document, title, and the HTML namespace. Append element to the head element. String replace all with the given value within element. Otherwise Do nothing. document.body [ = value ] Returns the body element. Can be set, to replace the body element. If the new value is not a body or frameset element, this will throw a "HierarchyRequestError" DOMException. The body element of a document is the first of the html element's children that is either a body element or a frameset element, or null if there is no such element. The body attribute, on getting, must return the body element of the document (either a body element, a frameset element, or null). On setting, the following algorithm must be run: If the new value is not a body or frameset element, then throw a "HierarchyRequestError" DOMException. Otherwise, if the new value is the same as the body element, return. Otherwise, if the body element is not null, then replace the body element with the new value within the body element's parent and return. Otherwise, if there is no document element, throw a "HierarchyRequestError" DOMException. Otherwise, the body element is null, but there's a document element. Append the new value to the document element. The value returned by the body getter is not always the one passed to the setter. In this example, the setter successfully inserts a body element (though this is non-conforming since SVG does not allow a body as child of SVG svg). However the getter will return null because the document element is not html. document.images Returns an HTMLCollection of the img elements in the Document. document.embeds document.plugins Returns an HTMLCollection of the embed elements in the Document. document.links Returns an HTMLCollection of the a and area elements in the Document that have href attributes. document.forms Returns an HTMLCollection of the form elements in the Document. document.scripts Returns an HTMLCollection of the script elements in the Document. The images attribute must return an HTMLCollection rooted at the Document node, whose filter matches only img elements. The embeds attribute must return an HTMLCollection rooted at the Document node, whose filter matches only embed elements. The plugins attribute must return the same object as that returned by the embeds attribute. The links attribute must return an HTMLCollection rooted at the Document node, whose filter matches only a elements with href attributes and area elements with href attributes. The forms attribute must return an HTMLCollection rooted at the Document node, whose filter matches only form elements. The scripts attribute must return an HTMLCollection rooted at the Document node, whose filter matches only script elements. collection = document.getElementsByName(name) Returns a NodeList of elements in the Document that have a name attribute with the value name. The getElementsByName(elementName) method steps are to return a live NodeList containing all the HTML elements in that document that have a name attribute whose value is identical to the elementName argument, in tree order. When the method is invoked on a Document object again with the same argument, the user agent may return the same as the object returned by the earlier call. In other cases, a new NodeList object must be returned. document.currentScript Returns the script element, or the SVG script element, that is currently executing, as long as the element represents a classic script. In the case of reentrant script execution, returns the one that most recently started executing amongst those that have not yet finished executing. Returns null if the Document is not currently executing a script or SVG script element (e.g., because the running script is an event handler, or a timeout), or if the currently executing script or SVG script element represents a module script. The currentScript attribute, on getting, must return the value to which it was most recently set. When the Document is created, the currentScript must be initialized to null. This API has fallen out of favor in the implementer and standards community, as it globally exposes script or SVG script elements. As such, it is not available in newer contexts, such as when running module scripts or when running scripts in a shadow tree. We are looking into creating a new solution for identifying the running script in such contexts, which does not make it globally available: see issue #1013. The Document interface supports named properties. The supported property names of a Document object document at any moment consist of the following, in tree order according to the element that contributed them, ignoring later duplicates, and with values from id attributes coming before values from name attributes when the same element contributes both: the value of the name content attribute for all exposed embed, form, iframe, img, and exposed object elements that have a non-empty name content attribute and are in a document tree with document as their root; the value of the id content attribute for all exposed object elements that have a non-empty id content attribute and are in a document tree with document as their root; and the value of the id content attribute for all img elements that have both a non-empty id content attribute and a non-empty name content attribute, and are in a document tree with document as their root. To determine the value of a named property name for a Document, the user agent must return the value obtained using the following steps: Let elements be the list of named elements with the name name that are in a document tree with the Document as their root. There will be at least one such element, since the algorithm would otherwise not have been invoked by Web IDL. If elements has only one element, and that element is an iframe element, and that iframe element's content navigable is not null, then return the active WindowProxy of the element's content navigable. Otherwise, if elements has only one element, return that element. Otherwise return an HTMLCollection rooted at the Document node, whose filter matches only named elements with the name name. Named elements with the name name, for the purposes of the above algorithm, are those that are either: Exposed embed, form, iframe, img, or exposed object elements that have a name content attribute whose value is name, or Exposed object elements that have an id content attribute whose value is name, or img elements that have an id content attribute whose value is name, and that have a non-empty name content attribute present also. An embed or object element is said to be exposed if it has no exposed object ancestor, and, for object elements, is additionally either not showing its fallback content or has no object or embed descendants. The dir attribute on the Document interface is defined along with the dir content attribute. 3.2 Elements 3.2.1 Semantics Elements, attributes, and attribute values in HTML are defined (by this specification) to have certain meanings (semantics). For example, the ol element represents an ordered list, and the lang 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. As a simple example, consider a web page written by an author who only considered desktop computer web browsers:My Page Welcome to my page
I like cars and lorries and have a big Jeep!
Where I live
I live in a small hut on a mountain!
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. 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. 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).ACME Corporation
The leaders in arbitrary fast delivery since 1920
... The hgroup element can be used for these kinds of situations:ACME Corporation
The leaders in arbitrary fast delivery since 1920
... 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 cite element mis-used:Demonstration
My favourite animal is the cat. |
—Ernest, in an essay from 1992 |
My favourite animal is the cat.
—Ernest, in an essay from 1992
Authors must not use elements, attributes, or attribute values that are not permitted by this specification or other applicable specifications, as doing so makes it significantly harder for the language to be extended in the future. 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: Here would be an alternative and correct way to mark this up: DOM nodes whose node document's browsing context is null are exempt from all document conformance requirements other than the HTML syntax requirements and XML syntax requirements. In particular, the template element's template contents's node document's browsing context is null. For example, the content model requirements and attribute value microsyntax requirements do not apply to a template element's template contents. In this example an img element has attribute values that are placeholders that would be invalid outside a template element.I like playing with string, I guess. Sister says squirrels are fun too so sometimes I follow her to play with them.
This isn't possible in the HTML serialization, however. 3.2.5.2.2 Flow content Most elements that are used in the body of documents and applications are categorized as flow content. aabbraddressarea (if it is a descendant of a map element)articleasideaudiobbdibdoblockquotebrbuttoncanvascitecodedatadatalistdeldetailsdfndialogdivdlemembedfieldsetfigurefooterformh1h2h3h4h5h6headerhgrouphriiframeimginputinskbdlabellink (if it is allowed in the body)main (if it is a hierarchically correct main element)mapmarkMathML mathmenumeta (if the itemprop attribute is present)meternavnoscriptobjectoloutputppicturepreprogressqrubyssampscriptsearchsectionselectslotsmallspanstrongsubsupSVG svgtabletemplatetextareatimeuulvarvideowbrautonomous custom elementstext 3.2.5.2.3 Sectioning content Sectioning content is content that defines the scope of header and footer elements. articleasidenavsection 3.2.5.2.4 Heading content Heading content defines the heading of a section (whether explicitly marked up using sectioning content elements, or implied by the heading content itself). h1h2h3h4h5h6hgroup (if it has a descendant h1 to h6 element) 3.2.5.2.5 Phrasing content Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs. aabbrarea (if it is a descendant of a map element)audiobbdibdobrbuttoncanvascitecodedatadatalistdeldfnemembediiframeimginputinskbdlabellink (if it is allowed in the body)mapmarkMathML mathmeta (if the itemprop attribute is present)meternoscriptobjectoutputpictureprogressqrubyssampscriptselectslotsmallspanstrongsubsupSVG svgtemplatetextareatimeuvarvideowbrautonomous custom elementstext Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content, not any flow content. Text, in the context of content models, means either nothing, or Text nodes. Text is sometimes used as a content model on its own, but is also phrasing content, and can be inter-element whitespace (if the Text nodes are empty or contain just ASCII whitespace). Text nodes and attribute values must consist of scalar values, excluding noncharacters, and controls other than ASCII whitespace. This specification includes extra constraints on the exact value of Text nodes and attribute values depending on their precise context. 3.2.5.2.6 Embedded content Embedded content is content that imports another resource into the document, or content from another vocabulary that is inserted into the document. audiocanvasembediframeimgMathML mathobjectpictureSVG svgvideo Elements that are from namespaces other than the HTML namespace and that convey content but not metadata, are embedded content for the purposes of the content models defined in this specification. (For example, MathML or SVG.) Some embedded content elements can have fallback content: 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. 3.2.5.2.7 Interactive content Interactive content is content that is specifically intended for user interaction. a (if the href attribute is present)audio (if the controls attribute is present)buttondetailsembediframeimg (if the usemap attribute is present)input (if the type attribute is not in the Hidden state)labelselecttextareavideo (if the controls attribute is present) 3.2.5.2.8 Palpable content As a general rule, elements whose content model allows any flow content or phrasing content should have at least one node in its contents that is palpable content and that does not have the hidden attribute specified. Palpable content makes an element non-empty by providing either some descendant non-empty text, or else something users can hear (audio elements) or view (video, img, or canvas 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: aabbraddressarticleasideaudio (if the controls attribute is present)bbdibdoblockquotebuttoncanvascitecodedatadeldetailsdfndivdl (if the element's children include at least one name-value group)emembedfieldsetfigurefooterformh1h2h3h4h5h6headerhgroupiiframeimginput (if the type attribute is not in the Hidden state)inskbdlabelmainmapmarkMathML mathmenu (if the element's children include at least one li element)meternavobjectol (if the element's children include at least one li element)outputppicturepreprogressqrubyssampsearchsectionselectsmallspanstrongsubsupSVG svgtabletextareatimeuul (if the element's children include at least one li element)varvideoautonomous custom elementstext that is not inter-element whitespace 3.2.5.2.9 Script-supporting elements Script-supporting elements are those that do not represent 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: scripttemplate 3.2.5.3 Transparent content models Some elements are described as transparent; they have "transparent" in the description of their content model. The content model of a transparent 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. For instance, an ins element inside a ruby element cannot contain an rt element, because the part of the ruby element's content model that allows ins elements is the part that allows phrasing content, and the rt element is not phrasing content. In some cases, where transparent elements are nested in each other, the process has to be applied iteratively. Consider the following markup fragment: To check whether "Apples" is allowed inside the a element, the content models are examined. The a element's content model is transparent, as is the map element's, as is the ins element's, as is the part of the object element's in which the ins element is found. The object element is found in the p element, whose content model is phrasing content. Thus, "Apples" is allowed, as text is phrasing content. When a transparent element has no parent, then the part of its content model that is "transparent" must instead be treated as accepting any flow content. 3.2.5.4 Paragraphs The term paragraph as defined in this section is used for more than just the definition of the p element. The paragraph concept defined here is used to describe how to interpret documents. The p element is merely one of several ways of marking up a paragraph. A paragraph is typically a run of phrasing content 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. 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 inter-element whitespace do not form paragraphs.This is the second.
This is the second.
Welcome! This is home of...
The Lockheed Martin multirole jet fighter aircraft! This page discusses the F-16 Fighting Falcon's innermost secrets.
You can play with my cat simulator.
I'm quite proud of it.
My logs show that there was some interest in HTTP today.
Some elements, such as link, abbr, and input, define additional semantics for the title attribute beyond the semantics described above. The advisory information 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. If the element has a title attribute, then return its value. If the element has a parent element, then return the parent element's advisory information. Return the empty string. User agents should inform the user when elements have advisory information, otherwise the information would not be discoverable. The title IDL attribute must reflect the title content attribute. 3.2.6.2 The lang and xml:lang attributes The lang 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. [BCP47] The lang attribute in the XML namespace is defined in XML. [XML] 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. The lang attribute in no namespace may be used on any HTML element. The lang attribute in the XML namespace may be used on HTML elements in XML documents, as well as elements in other namespaces if the relevant specifications allow it (in particular, MathML and SVG allow lang attributes in the XML namespace to be specified on their elements). If both the lang attribute in no namespace and the lang attribute in the XML namespace are specified on the same element, they must have exactly the same value when compared in an ASCII case-insensitive manner. Authors must not use the lang attribute in the XML namespace on HTML elements in HTML documents. To ease migration to and from XML, authors may specify an attribute in no namespace with no prefix and with the literal localname "xml:lang" on HTML elements in HTML documents, but such attributes must only be specified if a lang attribute in no namespace is also specified, and both attributes must have the same value when compared in an ASCII case-insensitive manner. The attribute in no namespace with no prefix and with the literal localname "xml:lang" has no effect on language processing. To determine the language of a node, user agents must look at the nearest ancestor element (including the element itself if the node is an element) that has a lang attribute in the XML namespace set or is an HTML element and has a lang in no namespace attribute set. That attribute specifies the language of the node (regardless of its value). If both the lang attribute in no namespace and the lang attribute in the XML namespace are set on an element, user agents must use the lang attribute in the XML namespace, and the lang attribute in no namespace must be ignored for the purposes of determining the element's language. If node's inclusive ancestors do not have either attribute set, but there is a pragma-set default language set, then that is the language of the node. If there is no pragma-set default language 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. 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. [BCP47] Thus, for instance, an element with lang="xyzzy" would be matched by the selector :lang(xyzzy) (e.g. in CSS), but it would not be matched by :lang(abcde), even though both are equally invalid. Similarly, if a web browser and screen reader working in unison communicated about the language of the element, the browser would tell the screen reader that the language was "xyzzy", even if it knew it was invalid, just in case the screen reader actually supported a language with that tag after all. Even if the screen reader supported both BCP 47 and another syntax for encoding language names, and in that other syntax the string "xyzzy" was a way to denote the Belarusian language, it would be incorrect for the screen reader to then start treating text as Belarusian, because "xyzzy" is not how Belarusian is described in BCP 47 codes (BCP 47 uses the code "be" for Belarusian). If the resulting value is the empty string, then it must be interpreted as meaning that the language of the node is explicitly unknown. 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). The lang IDL attribute must reflect the lang content attribute in no namespace. 3.2.6.3 The translate attribute The translate attribute is an enumerated attribute that is used to specify whether an element's attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged. The attribute's keywords are the empty string, yes, and no. The empty string and the yes keyword map to the yes state. The no keyword maps to the no state. In addition, there is a third state, the inherit state, which is the missing value default and the invalid value default. Each element (even non-HTML elements) has a translation mode, which is in either the translate-enabled state or the no-translate state. If an HTML element's translate attribute is in the yes state, then the element's translation mode is in the translate-enabled state; otherwise, if the element's translate attribute is in the no state, then the element's translation mode is in the no-translate state. Otherwise, either the element's translate attribute is in the inherit state, or the element is not an HTML element and thus does not have a translate attribute; in either case, the element's translation mode is in the same state as its parent element's, if any, or in the translate-enabled state, if the element's parent element is null. When an element is in the translate-enabled state, the element's translatable attributes and the values of its Text node children are to be translated when the page is localized. When an element is in the no-translate state, the element's attribute values and the values of its Text 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 translatable attributes: abbr on th elements alt on area, img, and input elements content on meta elements, if the name attribute specifies a metadata name whose value is known to be translatable download on a and area elements label on optgroup, option, and track elements lang on HTML elements; must be "translated" to match the language used in the translation placeholder on input and textarea elements srcdoc on iframe elements; must be parsed and recursively processed style on HTML elements; must be parsed and recursively processed (e.g. for the values of 'content' properties) title on all HTML elements value on input elements with a type attribute in the Button state or the Reset Button state Other specifications may define other attributes that are also translatable attributes. For example, ARIA would define the aria-label attribute as translatable. The translate IDL attribute must, on getting, return true if the element's translation mode is translate-enabled, and false otherwise. On setting, it must set the content attribute's value to "yes" if the new value is true, and set the content attribute's value to "no" otherwise. 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:The Bee Game is a text adventure game in English.
When the game launches, the first thing you should do is type eat honey. The game will respond with:
Yum yum! That was some good honey!3.2.6.4 The dir attribute The dir attribute specifies the element's text directionality. The attribute is an enumerated attribute with the following keywords and states: The ltr keyword, which maps to the ltr state Indicates that the contents of the element are explicitly directionally isolated left-to-right text. The rtl keyword, which maps to the rtl state Indicates that the contents of the element are explicitly directionally isolated right-to-left text. The auto keyword, which maps to the auto state Indicates that the contents of the element are explicitly directionally isolated text, but that the direction is to be determined programmatically using the contents of the element (as described below). The heuristic used by this state is very crude (it just looks at the first character with a strong directionality, in a manner analogous to the Paragraph Level determination in the bidirectional algorithm). Authors are urged to only use this value as a last resort when the direction of the text is truly unknown and no better server-side heuristic can be applied. [BIDI] For textarea and pre elements, the heuristic is applied on a per-paragraph level. The attribute has no invalid value default and no missing value default. The directionality of an element (any element, not just an HTML element) is either 'ltr' or 'rtl', and is determined as per the first appropriate set of steps from the following list: If the element's dir attribute is in the ltr state If the element is a document element and the dir attribute is not in a defined state (i.e. it is not present or has an invalid value) If the element is an input element whose type attribute is in the Telephone state, and the dir attribute is not in a defined state (i.e. it is not present or has an invalid value) The directionality of the element is 'ltr'. If the element's dir attribute is in the rtl state The directionality of the element is 'rtl'. If the element is an input element whose type attribute is in the Text, Search, Telephone, URL, or Email state, and the dir attribute is in the auto state If the element is a textarea element and the dir attribute is in the auto state If the element's value contains a character of bidirectional character type AL or R, and there is no character of bidirectional character type L anywhere before it in the element's value, then the directionality of the element is 'rtl'. [BIDI] Otherwise, if the element's value is not the empty string, or if the element is a document element, the directionality of the element is 'ltr'. Otherwise, the directionality of the element is the same as the element's parent element's directionality. If the element's dir attribute is in the auto state If the element is a bdi element and the dir attribute is not in a defined state (i.e. it is not present or has an invalid value) Find the first character in tree order that matches the following criteria: The character is from a Text node that is a descendant of the element whose directionality is being determined. The character is of bidirectional character type L, AL, or R. [BIDI] The character is not in a Text node that has an ancestor element that is a descendant of the element whose directionality is being determined and that is either: A bdi element. A script element. A style element. A textarea element. An element with a dir attribute in a defined state. If such a character is found and it is of bidirectional character type AL or R, the directionality of the element is 'rtl'. If such a character is found and it is of bidirectional character type L, the directionality of the element is 'ltr'. Otherwise, if the element is a document element, the directionality of the element is 'ltr'. Otherwise, the directionality of the element is the same as the element's parent element's directionality. If the element has a parent element and the dir attribute is not in a defined state (i.e. it is not present or has an invalid value) The directionality of the element is the same as the element's parent element's directionality. Since the dir attribute is only defined for HTML elements, it cannot be present on elements from other namespaces. Thus, elements from other namespaces always just inherit their directionality from their parent element, or, if they don't have one, default to 'ltr'. This attribute has rendering requirements involving the bidirectional algorithm. The directionality of an attribute of an HTML element, 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: If the attribute is a directionality-capable attribute and the element's dir attribute is in the auto state Find the first character (in logical order) of the attribute's value that is of bidirectional character type L, AL, or R. [BIDI] If such a character is found and it is of bidirectional character type AL or R, the directionality of the attribute is 'rtl'. Otherwise, the directionality of the attribute is 'ltr'. Otherwise The directionality of the attribute is the same as the element's directionality. The following attributes are directionality-capable attributes: abbr on th elements alt on area, img, and input elements content on meta elements, if the name attribute specifies a metadata name whose value is primarily intended to be human-readable rather than machine-readable label on optgroup, option, and track elements placeholder on input and textarea elements title on all HTML elements document.dir [ = value ] Returns the html element's dir attribute's value, if any. Can be set, to either "ltr", "rtl", or "auto" to replace the html element's dir attribute's value. If there is no html element, returns the empty string and ignores new values. The dir IDL attribute on an element must reflect the dir content attribute of that element, limited to only known values. The dir IDL attribute on Document objects must reflect the dir content attribute of the html element, if any, limited to only known values. If there is no such element, then the attribute must return the empty string and do nothing on setting. Authors are strongly encouraged to use the dir attribute to indicate text direction rather than using CSS, since that way their documents will continue to render correctly even in the absence of CSS (e.g. as interpreted by search engines). This markup fragment is of an IM conversation.
Student: How do you write "What's your name?" in Arabic?
Teacher: ما اسمك؟
Student: Thanks.
Teacher: That's written "شكرًا".
Teacher: Do you know how to write "Please"?
Student: "من فضلك", right?
Given a suitable style sheet and the default alignment styles for the p element, namely to align the text to the start edge of the paragraph, the resulting rendering could be as follows: 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 auto value is not a panacea. The final paragraph in this example is misinterpreted as being right-to-left text, since it begins with an Arabic character, which causes the "right?" to be to the left of the Arabic text. 3.2.6.5 The style attribute All HTML elements may have the style content attribute set. This is a style attribute as defined by CSS Style Attributes. [CSSATTR] 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 style attributes. [CSSATTR] However, if the Should element's inline behavior be blocked by Content Security Policy? algorithm returns "Blocked" when executed upon the attribute's element, "style attribute", and the attribute's value, then the style rules defined in the attribute's value must not be applied to the element. [CSP] Documents that use style attributes on any of their elements must still be comprehensible and usable if those attributes were removed. In particular, using the style attribute to hide and show content, or to convey meaning that is otherwise not included in the document, is non-conforming. (To hide and show content, use the hidden attribute.) element.style Returns a CSSStyleDeclaration object for the element's style attribute. The style IDL attribute is defined in CSS Object Model. [CSSOM] In the following example, the words that refer to colors are marked up using the span element and the style attribute to make those words show up in the relevant colors in visual media.My sweat suit is green and my eyes are blue.
3.2.6.6 Embedding custom non-visible data with the data-* attributes A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no ASCII upper alphas. All attribute names on HTML elements in HTML documents get ASCII-lowercased automatically, so the restriction on ASCII uppercase letters doesn't affect such documents. Custom data attributes 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 microdata should be used (with a standardized vocabulary). 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.The third claim covers the case of HTML markup.
In this example, the "data-mytrans-de" attribute gives specific text for the MyTrans product to use when translating the phrase "claim" to German. However, the standard translate 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 custom data attribute to be used. In this example, custom data attributes are used to store the result of a feature detection for PaymentRequest, which could be used in CSS to style a checkout page differently. Here, the data-has-payment-request attribute is effectively being used as a boolean attribute; 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. Every HTML element may have any number of custom data attributes 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 custom data attributes, 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. For example, a library called "DoQuery" could use attribute names like data-doquery-range, and a library called "jJo" could use attributes names like data-jjo-range. The jJo library could also provide an API to set which prefix to use (e.g. J.setDataPrefix('j2'), making the attributes have names like data-j2-range). element.dataset Returns a DOMStringMap object for the element's data-* attributes. Hyphenated names become camel-cased. For example, data-foo-bar="" becomes element.dataset.fooBar. The dataset IDL attribute provides convenient accessors for all the data-* attributes on an element. On getting, the dataset IDL attribute must return a DOMStringMap whose associated element is this element. The DOMStringMap interface is used for the dataset attribute. Each DOMStringMap has an associated element. [Exposed=Window, LegacyOverrideBuiltIns] interface DOMStringMap { getter DOMString (DOMString name); [CEReactions] setter undefined (DOMString name, DOMString value); [CEReactions] deleter undefined (DOMString name); }; To get a DOMStringMap's name-value pairs, run the following algorithm: Let list be an empty list of name-value pairs. For each content attribute on the DOMStringMap's associated element whose first five characters are the string "data-" and whose remaining characters (if any) do not include any ASCII upper alphas, in the order that those attributes are listed in the element's attribute list, add a name-value pair to list whose name is the attribute's name with the first five characters removed and whose value is the attribute's value. For each name in list, for each U+002D HYPHEN-MINUS character (-) in the name that is followed by an ASCII lower alpha, remove the U+002D HYPHEN-MINUS character (-) and replace the character that followed it by the same character converted to ASCII uppercase. Return list. The supported property names on a DOMStringMap object at any instant are the names of each pair returned from getting the DOMStringMap's name-value pairs at that instant, in the order returned. To determine the value of a named property name for a DOMStringMap, return the value component of the name-value pair whose name component is name in the list returned from getting the DOMStringMap's name-value pairs. To set the value of a new named property or set the value of an existing named property for a DOMStringMap, given a property name name and a new value value, run the following steps: If name contains a U+002D HYPHEN-MINUS character (-) followed by an ASCII lower alpha, then throw a "SyntaxError" DOMException. For each ASCII upper alpha in name, insert a U+002D HYPHEN-MINUS character (-) before the character and replace the character with the same character converted to ASCII lowercase. Insert the string data- at the front of name. If name does not match the XML Name production, throw an "InvalidCharacterError" DOMException. Set an attribute value for the DOMStringMap's associated element using name and value. To delete an existing named property name for a DOMStringMap, run the following steps: For each ASCII upper alpha in name, insert a U+002D HYPHEN-MINUS character (-) before the character and replace the character with the same character converted to ASCII lowercase. Insert the string data- at the front of name. Remove an attribute by name given name and the DOMStringMap's associated element. This algorithm will only get invoked by Web IDL for names that are given by the earlier algorithm for getting the DOMStringMap's name-value pairs. [WEBIDL] 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 class attribute along with data-* attributes: