interface URL { }; // URL API
interface Blob { }; // File API
interface File : Blob { }; // File API
interface FileCallback { }; // File API
interface FileList { }; // File API
interface ArrayBuffer { }; // WebGL
interface Uint8ClampedArray { }; // WebGL
interface XMLDocument { }; // DOM Core
interface HTMLCollection { }; // DOM Core
interface DOMTokenList { }; // DOM Core
interface DOMSettableTokenList { attribute any value; }; // DOM Core
This specification defines a big part of the Web platform, in lots of detail. Its place in the Web platform specification stack relative to other specifications can be best summed up as follows:

This section is non-normative.
In short: Yes.
In more length: The term "HTML5" is widely used as a buzzword to refer to modern Web technologies, many of which (though by no means all) are developed at the WHATWG, in some cases in conjunction with the W3C and IETF.
The WHATWG work is all published in one specification (known as "HTML"), (the one you are reading right now), parts of which are republished in a variety of other forms, including an edition optimized for Web developers (which you are reading right now). (known as HTML5).
The W3C also publishes parts of this specification as separate documents. One of these parts is called "HTML5"; it is a subset of this specification (the HTML Living Standard). the HTML Living Standard.
The features present in both the WHATWG and W3C specifications are specified using identical text, except for the following (mostly editorial) differences:
alt attribute and instead
references other documents on the matter because of a
working group decision from March 2011.table
elements for layout purposes.img element's alt
attribute is its fallback content, because of a
working group decision from April 2011.canvas
invalid, because of a
working group chair decision from June 2011.pubdate attribute on
time elements, because of a
working group chair request from December 2011. This issue is
not yet formally resolved in the W3C and the specifications will
likely converge on this issue when it is.The following sections are only published in the WHATWG specifications and are not currently available anywhere else:
download attribute to make download links and the ping attribute for hyperlink auditing.cssElementMap feature for defining CSS element reference identifiers.window.find() API.data element for marking up machine-readable data.This section is non-normative.
The World Wide Web's markup language has always been HTML. HTML was primarily designed as a language for semantically describing scientific documents, although its general design and adaptations over the years have enabled it to be used to describe a number of other types of documents.
The main area that has not been adequately addressed by HTML is a vague subject referred to as Web Applications. This specification attempts to rectify this, while at the same time updating the HTML specifications to address issues raised in the past few years.
This section is non-normative.
This specification is intended for authors of documents and scripts that use the features defined in this specification, implementors of tools that operate on pages that use the features defined in this specification, and individuals wishing to establish the correctness of documents or implementations with respect to the requirements of this specification.
This document is probably not suited to readers who do not already have at least a passing familiarity with Web technologies, as in places it sacrifices clarity for precision, and brevity for completeness. More approachable tutorials and authoring guides can provide a gentler introduction to the topic.
In particular, familiarity with the basics of DOM Core and DOM Events is necessary for a complete understanding of some of the more technical parts of this specification. An understanding of Web IDL, HTTP, XML, Unicode, character encodings, JavaScript, and CSS will also be helpful in places but is not essential.
This section is non-normative.
This specification is limited to providing a semantic-level markup language and associated semantic-level scripting APIs for authoring accessible pages on the Web ranging from static documents to dynamic applications.
The scope of this specification does not include providing mechanisms for media-specific customization of presentation (although default rendering rules for Web browsers are included at the end of this specification, and several mechanisms for hooking into CSS are provided as part of the language).
The scope of this specification is not to describe an entire operating system. In particular, hardware configuration software, image manipulation tools, and applications that users would be expected to use with high-end workstations on a daily basis are out of scope. In terms of applications, this specification is targeted specifically at applications that would be expected to be used by users on an occasional basis, or regularly but from disparate locations, with low CPU requirements. For instance online purchasing systems, searching systems, games (especially multiplayer online games), public telephone books or address books, communications software (e-mail clients, instant messaging clients, discussion software), document editing software, etc.
This section is non-normative.
For its first five years (1990-1995), HTML went through a number of revisions and experienced a number of extensions, primarily hosted first at CERN, and then at the IETF.
With the creation of the W3C, HTML's development changed venue again. A first abortive attempt at extending HTML in 1995 known as HTML 3.0 then made way to a more pragmatic approach known as HTML 3.2, which was completed in 1997. HTML4 quickly followed later that same year.
The following year, the W3C membership decided to stop evolving HTML and instead begin work on an XML-based equivalent, called XHTML. This effort started with a reformulation of HTML4 in XML, known as XHTML 1.0, which added no new features except the new serialization, and which was completed in 2000. After XHTML 1.0, the W3C's focus turned to making it easier for other working groups to extend XHTML, under the banner of XHTML Modularization. In parallel with this, the W3C also worked on a new language that was not compatible with the earlier HTML and XHTML languages, calling it XHTML2.
Around the time that HTML's evolution was stopped in 1998, parts of the API for HTML developed by browser vendors were specified and published under the name DOM Level 1 (in 1998) and DOM Level 2 Core and DOM Level 2 HTML (starting in 2000 and culminating in 2003). These efforts then petered out, with some DOM Level 3 specifications published in 2004 but the working group being closed before all the Level 3 drafts were completed.
In 2003, the publication of XForms, a technology which was positioned as the next generation of Web forms, sparked a renewed interest in evolving HTML itself, rather than finding replacements for it. This interest was borne from the realization that XML's deployment as a Web technology was limited to entirely new technologies (like RSS and later Atom), rather than as a replacement for existing deployed technologies (like HTML).
A proof of concept to show that it was possible to extend HTML4's forms to provide many of the features that XForms 1.0 introduced, without requiring browsers to implement rendering engines that were incompatible with existing HTML Web pages, was the first result of this renewed interest. At this early stage, while the draft was already publicly available, and input was already being solicited from all sources, the specification was only under Opera Software's copyright.
The idea that HTML's evolution should be reopened was tested at a W3C workshop in 2004, where some of the principles that underlie the HTML5 work (described below), as well as the aforementioned early draft proposal covering just forms-related features, were presented to the W3C jointly by Mozilla and Opera. The proposal was rejected on the grounds that the proposal conflicted with the previously chosen direction for the Web's evolution; the W3C staff and membership voted to continue developing XML-based replacements instead.
Shortly thereafter, Apple, Mozilla, and Opera jointly announced their intent to continue working on the effort under the umbrella of a new venue called the WHATWG. A public mailing list was created, and the draft was moved to the WHATWG site. The copyright was subsequently amended to be jointly owned by all three vendors, and to allow reuse of the specification.
The WHATWG was based on several core principles, in particular that technologies need to be backwards compatible, that specifications and implementations need to match even if this means changing the specification rather than the implementations, and that specifications need to be detailed enough that implementations can achieve complete interoperability without reverse-engineering each other.
The latter requirement in particular required that the scope of the HTML5 specification include what had previously been specified in three separate documents: HTML4, XHTML1, and DOM2 HTML. It also meant including significantly more detail than had previously been considered the norm.
In 2006, the W3C indicated an interest to participate in the development of HTML5 after all, and in 2007 formed a working group chartered to work with the WHATWG on the development of the HTML5 specification. Apple, Mozilla, and Opera allowed the W3C to publish the specification under the W3C copyright, while keeping a version with the less restrictive license on the WHATWG site.
Since then, both groups have been working together.
The HTML specification published by the WHATWG is not identical to this specification. The main differences are that the WHATWG version includes features not included in this W3C version: some features have been omitted as they are considered part of future revisions of HTML, not HTML5; and other features are omitted because at the W3C they are published as separate specifications. There are also some minor differences. For an exact list of differences, please see the WHATWG specification.
The HTML specification published by the WHATWG is not identical to this specification. At the time of this publication, the main differences were that the WHATWG version included features not included in this W3C version: some features have been omitted, but may be considered for future revisions of HTML beyond HTML5; and other features were omitted because at the W3C they are published as separate specifications.
A separate document has been published by the W3C HTML working group to document the differences between the HTML specified in this document and the language described in the HTML4 specification. [HTMLDIFF]
This section is non-normative.
It must be admitted that many aspects of HTML appear at first glance to be nonsensical and inconsistent.
HTML, its supporting DOM APIs, as well as many of its supporting technologies, have been developed over a period of several decades by a wide array of people with different priorities who, in many cases, did not know of each other's existence.
Features have thus arisen from many sources, and have not always been designed in especially consistent ways. Furthermore, because of the unique characteristics of the Web, implementation bugs have often become de-facto, and now de-jure, standards, as content is often unintentionally written in ways that rely on them before they can be fixed.
Despite all this, efforts have been made to adhere to certain design goals. These are described in the next few subsections.
This section is non-normative.
To avoid exposing Web authors to the complexities of multithreading, the HTML and DOM APIs are designed such that no script can ever detect the simultaneous execution of other scripts. Even with workers, the intent is that the behavior of implementations can be thought of as completely serializing the execution of all scripts in all browsing contexts.
The navigator.yieldForStorageUpdates()
method, in this model, is equivalent to allowing other scripts to
run while the calling script is blocked.
This section is non-normative.
This specification interacts with and relies on a wide variety of other specifications. In certain circumstances, unfortunately, conflicting needs have led to this specification violating the requirements of these other specifications. Whenever this has occurred, the transgressions have each been noted as a "willful violation", and the reason for the violation has been noted.
This section is non-normative.
This specification defines an abstract language for describing documents and applications, and some APIs for interacting with in-memory representations of resources that use this language.
The in-memory representation is known as "DOM HTML", or "the DOM" for short.
There are various concrete syntaxes that can be used to transmit resources that use this abstract language, two of which are defined in this specification.
The first such concrete syntax is the HTML syntax. This is the
format suggested for most authors. It is compatible with most legacy
Web browsers. If a document is transmitted with the
text/html MIME type, then it will be
processed as an HTML document by Web browsers.
This specification defines version 5 of the HTML syntax, known as
"HTML5".
This specification defines the latest HTML syntax, known simply as
"HTML".
The second concrete syntax is the XHTML syntax, which is an
application of XML. When a document is transmitted with an XML
MIME type, such as application/xhtml+xml, then
it is treated as an XML document by Web browsers, to be parsed by an
XML processor. Authors are reminded that the processing for XML and
HTML differs; in particular, even minor syntax errors will prevent a
document labeled as XML from being rendered fully, whereas they
would be ignored in the HTML syntax.
This specification defines version 5 of the XHTML syntax, known as
"XHTML5".
This specification defines the latest XHTML syntax, known simply as
"XHTML".
The DOM, the HTML syntax, and the XHTML syntax cannot all
represent the same content. For example, namespaces cannot be
represented using the HTML syntax, but they are supported in the DOM
and in the XHTML syntax. Similarly, documents that use the
noscript feature can be represented using the HTML
syntax, but cannot be represented with the DOM or in the XHTML
syntax. Comments that contain the string "-->" can only be represented in the DOM, not in
the HTML and XHTML syntaxes.
This section is non-normative.
This specification is divided into the following major sections:
There are also some appendices, defining rendering rules for Web browsers and listing obsolete features and IANA considerations.
This specification should be read like all other specifications. First, it should be read cover-to-cover, multiple times. Then, it should be read backwards at least once. Then it should be read by picking random sections from the contents list and following all the cross-references.
As described in the conformance requirements section below, this specification describes conformance criteria for a variety of conformance classes. In particular, there are conformance requirements that apply to producers, for example authors and the documents they create, and there are conformance requirements that apply to consumers, for example Web browsers. They can be distinguished by what they are requiring: a requirement on a producer states what is allowed, while a requirement on a consumer states how software is to act.
For example, "the foo attribute's value
must be a valid integer" is a requirement on
producers, as it lays out the allowed values; in contrast, the
requirement "the foo attribute's value must
be parsed using the rules for parsing integers" is a
requirement on consumers, as it describes how to process the
content.
Requirements on producers have no bearing whatsoever on consumers.
Continuing the above example, a requirement stating that a particular attribute's value is constrained to being a valid integer emphatically does not imply anything about the requirements on consumers. It might be that the consumers are in fact required to treat the attribute as an opaque string, completely unaffected by whether the value conforms to the requirements or not. It might be (as in the previous example) that the consumers are required to parse the value using specific rules that define how invalid (non-numeric in this case) values are to be processed.
This is a definition, requirement, or explanation.
This is a note.
This is an example.
This is an open issue.
This is a warning.
interface Example {
// this is an IDL definition
};
method( [ optionalArgument ] )This is a note to authors describing the usage of an interface.
/* this is a CSS fragment */
The defining instance of a term is marked up like this. Uses of that term are marked up like this or like this.
The defining instance of an element, attribute, or API is marked
up like this. References to
that element, attribute, or API are marked up like this.
Other code fragments are marked up like
this.
Variables are marked up like this.
This is an implementation requirement.
This section is non-normative.
A basic HTML document looks like this:
<!DOCTYPE html> <html> <head> <title>Sample page</title> </head> <body> <h1>Sample page</h1> <p>This is a <a href="demo.html">simple</a> sample.</p> <!-- this is a comment --> </body> </html>
HTML documents consist of a tree of elements and text. Each
element is denoted in the source by a start tag, such as "<body>", and an end
tag, such as "</body>". (Certain
start tags and end tags can in certain cases be omitted and are implied by other
tags.)
Tags have to be nested such that elements are all completely within each other, without overlapping:
<p>This is <em>very <strong>wrong</em>!</strong></p>
<p>This <em>is <strong>correct</strong>.</em></p>
This specification defines a set of elements that can be used in HTML, along with rules about the ways in which the elements can be nested.
Elements can have attributes, which control how the elements
work. In the example below, there is a hyperlink,
formed using the a element and its href attribute:
<a href="demo.html">simple</a>
Attributes are placed
inside the start tag, and consist of a name and a value, separated by an "=" character. The attribute value can remain unquoted if it doesn't contain space characters or any of " ' `
= < or >. Otherwise, it has to be quoted using either
single or double quotes. The value, along with the "=" character, can be omitted altogether if the value
is the empty string.
<!-- empty attributes --> <input name=address disabled> <input name=address disabled=""> <!-- attributes with a value --> <input name=address maxlength=200> <input name=address maxlength='200'> <input name=address maxlength="200">
HTML user agents (e.g. Web browsers) then parse this markup, turning it into a DOM (Document Object Model) tree. A DOM tree is an in-memory representation of a document.
DOM trees contain several kinds of nodes, in particular a
DocumentType node, Element nodes,
Text nodes, Comment nodes, and in some
cases ProcessingInstruction nodes.
The markup snippet at the top of this section would be turned into the following DOM tree:
htmlhtmlhead#text: ⏎␣␣title#text: Sample page#text: ⏎␣#text: ⏎␣body#text: ⏎␣␣h1#text: Sample page#text: ⏎␣␣p#text: This is a a href="demo.html"#text: simple#text: sample.#text: ⏎␣␣#comment: this is a comment #text: ⏎␣⏎The root element of this tree is the
html element, which is the element always found at the
root of HTML documents. It contains two elements, head
and body, as well as a Text node between
them.
There are many more Text nodes in the DOM tree than
one would initially expect, because the source contains a number of
spaces (represented here by "␣") and line breaks ("⏎")
that all end up as Text nodes in the DOM. However, for
historical reasons not all of the spaces and line breaks in the
original markup appear in the DOM. In particular, all the whitespace
before head start tag ends up being dropped silently,
and all the whitespace after the body end tag ends up
placed at the end of the body.
The head element contains a title
element, which itself contains a Text node with the
text "Sample page". Similarly, the body element
contains an h1 element, a p element, and a
comment.
This DOM tree can be manipulated from scripts in the
page. Scripts (typically in JavaScript) are small programs that can
be embedded using the script element or using
event handler content attributes. For example, here is
a form with a script that sets the value of the form's
output element to say "Hello World":
<form name="main"> Result: <output name="result"></output> <script> document.forms.main.elements.result.value = 'Hello World'; </script> </form>
Each element in the DOM tree is represented by an object, and
these objects have APIs so that they can be manipulated. For
instance, a link (e.g. the a element in the tree above)
can have its "href"
attribute changed in several ways:
var a = document.links[0]; // obtain the first link in the document a.href = 'sample.html'; // change the destination URL of the link a.protocol = 'https'; // change just the scheme part of the URL a.setAttribute('href', 'http://example.com/'); // change the content attribute directly
Since DOM trees are used as the way to represent HTML documents when they are processed and presented by implementations (especially interactive implementations like Web browsers), this specification is mostly phrased in terms of DOM trees, instead of the markup described above.
HTML documents represent a media-independent description of interactive content. HTML documents might be rendered to a screen, or through a speech synthesizer, or on a braille display. To influence exactly how such rendering takes place, authors can use a styling language such as CSS.
In the following example, the page has been made yellow-on-blue using CSS.
<!DOCTYPE html>
<html>
<head>
<title>Sample styled page</title>
<style>
body { background: navy; color: yellow; }
</style>
</head>
<body>
<h1>Sample styled page</h1>
<p>This page is just a demo.</p>
</body>
</html>
For more details on how to use HTML, authors are encouraged to consult tutorials and guides. Some of the examples included in this specification might also be of use, but the novice author is cautioned that this specification, by necessity, defines the language with a level of detail that might be difficult to understand at first.
This section is non-normative.
When HTML is used to create interactive sites, care needs to be taken to avoid introducing vulnerabilities through which attackers can compromise the integrity of the site itself or of the site's users.
A comprehensive study of this matter is beyond the scope of this document, and authors are strongly encouraged to study the matter in more detail. However, this section attempts to provide a quick introduction to some common pitfalls in HTML application development.
The security model of the Web is based on the concept of "origins", and correspondingly many of the potential attacks on the Web involve cross-origin actions. [ORIGIN]
When accepting untrusted input, e.g. user-generated content such as text comments, values in URL parameters, messages from third-party sites, etc, it is imperative that the data be validated before use, and properly escaped when displayed. Failing to do this can allow a hostile user to perform a variety of attacks, ranging from the potentially benign, such as providing bogus user information like a negative age, to the serious, such as running scripts every time a user looks at a page that includes the information, potentially propagating the attack in the process, to the catastrophic, such as deleting all data in the server.
When writing filters to validate user input, it is imperative that filters always be whitelist-based, allowing known-safe constructs and disallowing all other input. Blacklist-based filters that disallow known-bad inputs and allow everything else are not secure, as not everything that is bad is yet known (for example, because it might be invented in the future).
For example, suppose a page looked at its URL's query string to determine what to display, and the site then redirected the user to that page to display a message, as in:
<ul> <li><a href="message.cgi?say=Hello">Say Hello</a> <li><a href="message.cgi?say=Welcome">Say Welcome</a> <li><a href="message.cgi?say=Kittens">Say Kittens</a> </ul>
If the message was just displayed to the user without escaping, a hostile attacker could then craft a URL that contained a script element:
http://example.com/message.cgi?say=%3Cscript%3Ealert%28%27Oh%20no%21%27%29%3C/script%3E
If the attacker then convinced a victim user to visit this page, a script of the attacker's choosing would run on the page. Such a script could do any number of hostile actions, limited only by what the site offers: if the site is an e-commerce shop, for instance, such a script could cause the user to unknowingly make arbitrarily many unwanted purchases.
This is called a cross-site scripting attack.
There are many constructs that can be used to try to trick a site into executing code. Here are some that authors are encouraged to consider when writing whitelist filters:
img, it is important to whitelist any provided
attributes as well. If one allowed all attributes then an
attacker could, for instance, use the onload attribute to run arbitrary
script.javascript:", but user agents
can implement (and indeed, have historically implemented)
others.base element to be inserted means any
script elements in the page with relative links can
be hijacked, and similarly that any form submissions can get
redirected to a hostile site.If a site allows a user to make form submissions with user-specific side-effects, for example posting messages on a forum under the user's name, making purchases, or applying for a passport, it is important to verify that the request was made by the user intentionally, rather than by another site tricking the user into making the request unknowingly.
This problem exists because HTML forms can be submitted to other origins.
Sites can prevent such attacks by populating forms with
user-specific hidden tokens, or by checking Origin headers on all requests.
A page that provides users with an interface to perform actions that the user might not wish to perform needs to be designed so as to avoid the possibility that users can be tricked into activating the interface.
One way that a user could be so tricked is if a hostile site
places the victim site in a small iframe and then
convinces the user to click, for instance by having the user play
a reaction game. Once the user is playing the game, the hostile
site can quickly position the iframe under the mouse cursor just
as the user is about to click, thus tricking the user into
clicking the victim site's interface.
To avoid this, sites that do not expect to be used in frames
are encouraged to only enable their interface if they detect that
they are not in a frame (e.g. by comparing the window object to the value of the top attribute).
This section is non-normative.
Scripts in HTML have "run-to-completion" semantics, meaning that the browser will generally run the script uninterrupted before doing anything else, such as firing further events or continuing to parse the document.
On the other hand, parsing of HTML files happens asynchronously and incrementally, meaning that the parser can pause at any point to let scripts run. This is generally a good thing, but it does mean that authors need to be careful to avoid hooking event handlers after the events could have possibly fired.
There are two techniques for doing this reliably: use event handler content attributes, or create the element and add the event handlers in the same script. The latter is safe because, as mentioned earlier, scripts are run to completion before further events can fire.
One way this could manifest itself is with img
elements and the load event. The
event could fire as soon as the element has been parsed, especially
if the image has already been cached (which is common).
Here, the author uses the onload handler on an img
element to catch the load event:
<img src="games.png" alt="Games" onload="gamesLogoHasLoaded(event)">
If the element is being added by script, then so long as the event handlers are added in the same script, the event will still not be missed:
<script>
var img = new Image();
img.src = 'games.png';
img.alt = 'Games';
img.onload = gamesLogoHasLoaded;
// img.addEventListener('load', gamesLogoHasLoaded, false); // would work also
</script>
However, if the author first created the img
element and then in a separate script added the event listeners,
there's a chance that the load
event would be fired in between, leading it to be missed:
<!-- Do not use this style, it has a race condition! -->
<img id="games" src="games.png" alt="Games">
<!-- the 'load' event might fire here while the parser is taking a
break, in which case you will not see it! -->
<script>
var img = document.getElementById('games');
img.onload = gamesLogoHasLoaded; // might never fire!
</script>
This section is non-normative.
Unlike previous versions of the HTML specification, this specification defines in some detail the required processing for invalid documents as well as valid documents.
However, even though the processing of invalid content is in most cases well-defined, conformance requirements for documents are still important: in practice, interoperability (the situation in which all implementations process particular content in a reliable and identical or equivalent way) is not the only goal of document conformance requirements. This section details some of the more common reasons for still distinguishing between a conforming document and one with errors.
This section is non-normative.
The majority of presentational features from previous versions of HTML are no longer allowed. Presentational markup in general has been found to have a number of problems:
While it is possible to use presentational markup in a way that provides users of assistive technologies (ATs) with an acceptable experience (e.g. using ARIA), doing so is significantly more difficult than doing so when using semantically-appropriate markup. Furthermore, even using such techniques doesn't help make pages accessible for non-AT non-graphical users, such as users of text-mode browsers.
Using media-independent markup, on the other hand, provides an easy way for documents to be authored in such a way that they work for more users (e.g. text browsers).
It is significantly easier to maintain a site written in such a
way that the markup is style-independent. For example, changing
the color of a site that uses <font color="">
throughout requires changes across the entire site, whereas a
similar change to a site based on CSS can be done by changing a
single file.
Presentational markup tends to be much more redundant, and thus results in larger document sizes.
For those reasons, presentational markup has been removed from HTML in this version. This change should not come as a surprise; HTML4 deprecated presentational markup many years ago and provided a mode (HTML4 Transitional) to help authors move away from presentational markup; later, XHTML 1.1 went further and obsoleted those features altogether.
The only remaining presentational markup features in HTML are the
style attribute and the
style element. Use of the style attribute is somewhat discouraged in
production environments, but it can be useful for rapid prototyping
(where its rules can be directly moved into a separate style sheet
later) and for providing specific styles in unusual cases where a
separate style sheet would be inconvenient. Similarly, the
style element can be useful in syndication or for
page-specific styles, but in general an external style sheet is
likely to be more convenient when the styles apply to multiple
pages.
It is also worth noting that some elements that were previously
presentational have been redefined in this specification to be
media-independent: b, i, hr,
s, small, and u.
This section is non-normative.
The syntax of HTML is constrained to avoid a wide variety of problems.
Certain invalid syntax constructs, when parsed, result in DOM trees that are highly unintuitive.
For example, the following markup fragment results in a DOM
with an hr element that is an earlier
sibling of the corresponding table element:
<table><hr>...
To allow user agents to be used in controlled environments without having to implement the more bizarre and convoluted error handling rules, user agents are permitted to fail whenever encountering a parse error.
Some error-handling behavior, such as the behavior for the
<table><hr>... example mentioned
above, are incompatible with streaming user agents (user agents
that process HTML files in one pass, without storing state). To
avoid interoperability problems with such user agents, any syntax
resulting in such behavior is considered invalid.
When a user agent based on XML is connected to an HTML parser, it is possible that certain invariants that XML enforces, such as comments never containing two consecutive hyphens, will be violated by an HTML file. Handling this can require that the parser coerce the HTML DOM into an XML-compatible infoset. Most syntax constructs that require such handling are considered invalid.
Certain syntax constructs can result in disproportionally poor performance. To discourage the use of such constructs, they are typically made non-conforming.
For example, the following markup results in poor performance,
since all the unclosed i elements have to be
reconstructed in each paragraph, resulting in progressively more
elements in each paragraph:
<p><i>He dreamt. <p><i>He dreamt that he ate breakfast. <p><i>Then lunch. <p><i>And finally dinner.
The resulting DOM for this fragment would be:
pi#text: He dreamt.pii#text: He dreamt that he ate breakfast.piii#text: Then lunch.piiii#text: And finally dinner.There are syntax constructs that, for historical reasons, are relatively fragile. To help reduce the number of users who accidentally run into such problems, they are made non-conforming.
For example, the parsing of certain named character references in attributes happens even with the closing semicolon being omitted. It is safe to include an ampersand followed by letters that do not form a named character reference, but if the letters are changed to a string that does form a named character reference, they will be interpreted as that character instead.
In this fragment, the attribute's value is "?bill&ted":
<a href="?bill&ted">Bill and Ted</a>
In the following fragment, however, the attribute's value is
actually "?art©", not the
intended "?art©", because even
without the final semicolon, "©" is
handled the same as "©" and thus
gets interpreted as "©":
<a href="?art©">Art and Copy</a>
To avoid this problem, all named character references are required to end with a semicolon, and uses of named character references without a semicolon are flagged as errors.
Thus, the correct way to express the above cases is as follows:
<a href="?bill&ted">Bill and Ted</a> <!-- &ted is ok, since it's not a named character reference -->
<a href="?art&copy">Art and Copy</a> <!-- the & has to be escaped, since © is a named character reference -->
Certain syntax constructs are known to cause especially subtle or serious problems in legacy user agents, and are therefore marked as non-conforming to help authors avoid them.
For example, this is why the U+0060 GRAVE ACCENT character (`) is not allowed in unquoted attributes. In certain legacy user agents, it is sometimes treated as a quote character.
Another example of this is the DOCTYPE, which is required to trigger no-quirks mode, because the behavior of legacy user agents in quirks mode is often largely undocumented.
Certain restrictions exist purely to avoid known security problems.
For example, the restriction on using UTF-7 exists purely to avoid authors falling prey to a known cross-site-scripting attack using UTF-7.
Markup where the author's intent is very unclear is often made non-conforming. Correcting these errors early makes later maintenance easier.
For example, it is unclear whether the author intended the
following to be an h1 heading or an h2
heading:
<h1>Contact details</h2>
When a user makes a simple typo, it is helpful if the error can be caught early, as this can save the author a lot of debugging time. This specification therefore usually considers it an error to use element names, attribute names, and so forth, that do not match the names defined in this specification.
For example, if the author typed <capton>
instead of <caption>, this would be flagged as an
error and the author could correct the typo immediately.
In order to allow the language syntax to be extended in the future, certain otherwise harmless features are disallowed.
For example, "attributes" in end tags are ignored currently, but they are invalid, in case a future change to the language makes use of that syntax feature without conflicting with already-deployed (and valid!) content.
Some authors find it helpful to be in the practice of always quoting all attributes and always including all optional tags, preferring the consistency derived from such custom over the minor benefits of terseness afforded by making use of the flexibility of the HTML syntax. To aid such authors, conformance checkers can provide modes of operation wherein such conventions are enforced.
This section is non-normative.
Beyond the syntax of the language, this specification also places restrictions on how elements and attributes can be specified. These restrictions are present for similar reasons:
To avoid misuse of elements with defined meanings, content models are defined that restrict how elements can be nested when such nestings would be of dubious value.
For example, this specification disallows
nesting a section element inside a kbd
element, since it is highly unlikely for an author to indicate
that an entire section should be keyed in.
Similarly, to draw the author's attention to mistakes in the use of elements, clear contradictions in the semantics expressed are also considered conformance errors.
In the fragments below, for example, the semantics are nonsensical: a separator cannot simultaneously be a cell, nor can a radio button be a progress bar.
<hr role="cell">
<input type=radio role=progressbar>
Another example is the restrictions on the
content models of the ul element, which only allows
li element children. Lists by definition consist just
of zero or more list items, so if a ul element
contains something other than an li element, it's not
clear what was meant.
Certain elements have default styles or behaviors that make certain combinations likely to lead to confusion. Where these have equivalent alternatives without this problem, the confusing combinations are disallowed.
For example, div elements are
rendered as block boxes, and span elements as inline
boxes. Putting a block box in an inline box is unnecessarily
confusing; since either nesting just div elements, or
nesting just span elements, or nesting
span elements inside div elements all
serve the same purpose as nesting a div element in a
span element, but only the latter involves a block
box in an inline box, the latter combination is disallowed.
Another example would be the way
interactive content cannot be nested. For example, a
button element cannot contain a textarea
element. This is because the default behavior of such nesting
interactive elements would be highly confusing to users. Instead
of nesting these elements, they can be placed side by side.
Sometimes, something is disallowed because allowing it would likely cause author confusion.
For example, setting the disabled attribute to the value
"false" is disallowed, because despite the
appearance of meaning that the element is enabled, it in fact
means that the element is disabled (what matters for
implementations is the presence of the attribute, not its
value).
Some conformance errors simplify the language that authors need to learn.
For example, the area element's
shape attribute, despite
accepting both circ and circle values in
practice as synonyms, disallows the use of the circ value, so as to
simplify tutorials and other learning aids. There would be no
benefit to allowing both, but it would cause extra confusion when
teaching the language.
Certain elements are parsed in somewhat eccentric ways (typically for historical reasons), and their content model restrictions are intended to avoid exposing the author to these issues.
For example, a form element isn't allowed inside
phrasing content, because when parsed as HTML, a
form element's start tag will imply a p
element's end tag. Thus, the following markup results in two
paragraphs, not one:
<p>Welcome. <form><label>Name:</label> <input></form>
It is parsed exactly like the following:
<p>Welcome. </p><form><label>Name:</label> <input></form>
Some errors are intended to help prevent script problems that would be hard to debug.
This is why, for instance, it is non-conforming
to have two id attributes with the
same value. Duplicate IDs lead to the wrong element being
selected, with sometimes disastrous effects whose cause is hard to
determine.
Some constructs are disallowed because historically they have been the cause of a lot of wasted authoring time, and by encouraging authors to avoid making them, authors can save time in future efforts.
For example, a script element's
src attribute causes the
element's contents to be ignored. However, this isn't obvious,
especially if the element's contents appear to be executable
script — which can lead to authors spending a lot of time
trying to debug the inline script without realizing that it is not
executing. To reduce this problem, this specification makes it
non-conforming to have executable script in a script
element when the src
attribute is present. This means that authors who are validating
their documents are less likely to waste time with this kind of
mistake.
Some authors like to write files that can be interpreted as both XML and HTML with similar results. Though this practice is discouraged in general due to the myriad of subtle complications involved (especially when involving scripting, styling, or any kind of automated serialization), this specification has a few restrictions intended to at least somewhat mitigate the difficulties. This makes it easier for authors to use this as a transitionary step when migrating between HTML and XHTML.
For example, there are somewhat complicated
rules surrounding the lang and
xml:lang attributes intended
to keep the two synchronized.
Another example would be the restrictions on
the values of xmlns attributes in the HTML
serialization, which are intended to ensure that elements in
conforming documents end up in the same namespaces whether
processed as HTML or XML.
As with the restrictions on the syntax intended to allow for new syntax in future revisions of the language, some restrictions on the content models of elements and values of attributes are intended to allow for future expansion of the HTML vocabulary.
For example, limiting the values of the target attribute that start
with an U+005F LOW LINE character (_) to only specific predefined
values allows new predefined values to be introduced at a future
time without conflicting with author-defined values.
Certain restrictions are intended to support the restrictions made by other specifications.
For example, requiring that attributes that take media queries use only valid media queries reinforces the importance of following the conformance rules of that specification.
This section is non-normative.
The following documents might be of interest to readers of this specification.
This Architectural Specification provides authors of specifications, software developers, and content developers with a common reference for interoperable text manipulation on the World Wide Web, building on the Universal Character Set, defined jointly by the Unicode Standard and ISO/IEC 10646. Topics addressed include use of the terms 'character', 'encoding' and 'string', a reference processing model, choice and identification of character encodings, character escaping, and string indexing.
Because Unicode contains such a large number of characters and incorporates the varied writing systems of the world, incorrect usage can expose programs or systems to possible security attacks. This is especially important as more and more products are internationalized. This document describes some of the security considerations that programmers, system analysts, standards developers, and users should take into account, and provides specific recommendations to reduce the risk of problems.
Web Content Accessibility Guidelines (WCAG) 2.0 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Following these guidelines will also often make your Web content more usable to users in general.
This specification provides guidelines for designing Web content authoring tools that are more accessible for people with disabilities. An authoring tool that conforms to these guidelines will promote accessibility by providing an accessible user interface to authors with disabilities as well as by enabling, supporting, and promoting the production of accessible Web content by all authors.
This document provides guidelines for designing user agents that lower barriers to Web accessibility for people with disabilities. User agents include browsers and other types of software that retrieve and render Web content. A user agent that conforms to these guidelines will promote accessibility through its own user interface and through other internal facilities, including its ability to communicate with other technologies (especially assistive technologies). Furthermore, all users, not just users with disabilities, should find conforming user agents to be more usable.
A document that uses polyglot markup is a document that is a stream of bytes that parses into identical document trees (with the exception of the xmlns attribute on the root element) when processed as HTML and when processed as XML. Polyglot markup that meets a well defined set of constraints is interpreted as compatible, regardless of whether they are processed as HTML or as XHTML, per the HTML5 specification. Polyglot markup uses a specific DOCTYPE, namespace declarations, and a specific case — normally lower case but occasionally camel case — for element and attribute names. Polyglot markup uses lower case for certain attribute values. Further constraints include those on empty elements, named entity references, and the use of scripts and style.
This is draft documentation mapping HTML elements and attributes to accessibility API Roles, States and Properties on a variety of platforms. It provides recommendations on deriving the accessible names and descriptions for HTML elements. It also provides accessible feature implementation examples.
This specification refers to both HTML and XML attributes and IDL attributes, often in the same context. When it is not clear which is being referred to, they are referred to as content attributes for HTML and XML attributes, and IDL attributes for those defined on IDL interfaces. Similarly, the term "properties" is used for both JavaScript object properties and CSS properties. When these are ambiguous they are qualified as object properties and CSS properties respectively.
Generally, when the specification states that a feature applies to the HTML syntax or the XHTML syntax, it also includes the other. When a feature specifically only applies to one of the two languages, it is called out by explicitly stating that it does not apply to the other format, as in "for HTML, ... (this does not apply to XHTML)".
This specification uses the term document to
refer to any use of HTML, ranging from short static documents to
long essays or reports with rich multimedia, as well as to
fully-fledged interactive applications. The term is used to refer
both to Document objects and their descendant DOM
trees, and to serialized byte streams using the HTML syntax or XHTML syntax, depending on context.
In the context of the DOM structures, the terms HTML document and XML
document are used as defined in the DOM Core specification,
and refer specifically to two different modes that
Document objects can find themselves in. [DOMCORE] (Such uses are always hyperlinked
to their definition.)
In the context of byte streams, the term HTML document refers to
resources labeled as text/html, and the term XML
document refers to resources labeled with an XML MIME
type.
The term XHTML document is used to refer to both
Documents in the XML
document mode that contains element nodes in the HTML
namespace, and byte streams labeled with an XML MIME
type that contain elements from the HTML
namespace, depending on context.
For simplicity, terms such as shown, displayed, and visible might sometimes be used when referring to the way a document is rendered to the user. These terms are not meant to imply a visual medium; they must be considered to apply to other media in equivalent ways.
When an algorithm B says to return to another algorithm A, it implies that A called B. Upon returning to A, the implementation must continue from where it left off in calling B.
The term "transparent black" refers to the color with red, green, blue, and alpha channels all set to zero.
The specification uses the term supported when referring to whether a user agent has an implementation capable of decoding the semantics of an external resource. A format or type is said to be supported if the implementation can process an external resource of that format or type without critical aspects of the resource being ignored. Whether a specific resource is supported can depend on what features of the resource's format are in use.
For example, a PNG image would be considered to be in a supported format if its pixel data could be decoded and rendered, even if, unbeknownst to the implementation, the image also contained animation data.
A MPEG4 video file would not be considered to be in a supported format if the compression format used was not supported, even if the implementation could determine the dimensions of the movie from the file's metadata.
What some specifications, in particular the HTTP and URI specifications, refer to as a representation is referred to in this specification as a resource. [HTTP] [RFC3986]
The term MIME type is used to refer to what is sometimes called an Internet media type in protocol literature. The term media type in this specification is used to refer to the type of media intended for presentation, as used by the CSS specifications. [RFC2046] [MQ]
A string is a valid MIME type if it matches the media-type rule defined in section 3.7 "Media Types"
of RFC 2616. In particular, a valid MIME type may
include MIME type parameters. [HTTP]
A string is a valid MIME type with no parameters if it
matches the media-type rule defined in section
3.7 "Media Types" of RFC 2616, but does not contain any U+003B
SEMICOLON characters (;). In other words, if it consists only of a
type and subtype, with no MIME Type parameters. [HTTP]
The term HTML MIME type is used to refer to the
MIME type text/html.
A resource's critical subresources are those that the
resource needs to have available to be correctly processed. Which
resources are considered critical or not is defined by the
specification that defines the resource's format. For CSS resources,
only @import rules introduce critical
subresources; other resources, e.g. fonts or backgrounds, are
not.
The term data:
URL refers to URLs that use the data: scheme. [RFC2397]
To ease migration from HTML to XHTML, UAs
conforming to this specification will place elements in HTML in the
http://www.w3.org/1999/xhtml namespace, at least for
the purposes of the DOM and CSS. The term "HTML
elements", when used in this specification, refers to any
element in that namespace, and thus refers to both HTML and XHTML
elements.
Except where otherwise stated, all elements defined or mentioned
in this specification are in the HTML namespace
("http://www.w3.org/1999/xhtml"), and all attributes
defined or mentioned in this specification have no namespace.
The term element type is used to refer to the class of
elements have a given local name and namespace. For example,
button elements are elements with the element type
button, meaning they have the local name "button" and (implicitly as defined above) the
HTML namespace.
Attribute names are said to be XML-compatible if they
match the Name production defined in XML, they contain no
U+003A COLON characters (:), and their first three characters are
not an ASCII case-insensitive match for the string
"xml". [XML]
The term XML MIME type is used to refer to the MIME types text/xml,
application/xml, and any MIME
type whose subtype ends with the four characters "+xml". [RFC3023]
The root element of a Document object is
that Document's first element child, if any. If it does
not have one then the Document has no root element.
The term root element, when not referring to a
Document object's root element, means the furthest
ancestor element node of whatever node is being discussed, or the
node itself if it has no ancestors. When the node is a part of the
document, then the node's root element is indeed the
document's root element; however, if the node is not currently part
of the document tree, the root element will be an orphaned node.
When an element's root element is the root
element of a Document object, it is said to be
in a Document. An element is said to have
been inserted into a
document when its root element changes and is now
the document's root element. Analogously, an element is
said to have been removed from a document when its root
element changes from being the document's root
element to being another element.
A node's home subtree is the subtree rooted at that
node's root element. When a node is in a
Document, its home subtree is that
Document's tree.
The Document of a Node (such as an
element) is the Document that the Node's
ownerDocument IDL
attribute returns. When a Node is in a
Document then that Document is
always the Node's Document, and the
Node's ownerDocument IDL attribute
thus always returns that Document.
The Document of a content attribute is the
Document of the attribute's element.
The term tree order means a pre-order, depth-first
traversal of DOM nodes involved (through the parentNode/childNodes relationship).
When it is stated that some element or attribute is ignored, or treated as some other value, or handled as if it was something else, this refers only to the processing of the node after it is in the DOM. A user agent must not mutate the DOM in such situations.
A content attribute is said to change value only if its new value is different than its previous value; setting an attribute to a value it already has does not change it.
The term empty, when used of an attribute
value, Text node, or string, means that the length of
the text is zero (i.e. not even containing spaces or control
characters).
The construction "a Foo object", where
Foo is actually an interface, is sometimes used instead
of the more accurate "an object implementing the interface
Foo".
An IDL attribute is said to be getting when its value is being retrieved (e.g. by author script), and is said to be setting when a new value is assigned to it.
If a DOM object is said to be live, then the attributes and methods on that object must operate on the actual underlying data, not a snapshot of the data.
In the contexts of events, the terms fire and
dispatch are used as
defined in the DOM Core specification: firing an event means to
create and dispatch it, and dispatching an event means to follow the
steps that propagate the event through the tree. The term trusted event is used to refer
to events whose isTrusted
attribute is initialized to true. [DOMCORE]
The term plugin refers to a user-agent defined set of
content handlers used by the user agent that can take part in the
user agent's rendering of a Document object, but that
neither act as child browsing
contexts of the Document nor introduce any
Node objects to the Document's DOM.
Typically such content handlers are provided by third parties, though a user agent can also designate built-in content handlers as plugins.
A user agent must not consider the types text/plain
and application/octet-stream as having a registered
plugin.
One example of a plugin would be a PDF viewer that is instantiated in a browsing context when the user navigates to a PDF file. This would count as a plugin regardless of whether the party that implemented the PDF viewer component was the same as that which implemented the user agent itself. However, a PDF viewer application that launches separate from the user agent (as opposed to using the same interface) is not a plugin by this definition.
This specification does not define a mechanism for interacting with plugins, as it is expected to be user-agent- and platform-specific. Some UAs might opt to support a plugin mechanism such as the Netscape Plugin API; others might use remote content converters or have built-in support for certain types. Indeed, this specification doesn't require user agents to support plugins at all. [NPAPI]
A plugin can be secured
if it honors the semantics of the sandbox attribute.
For example, a secured plugin would prevent its
contents from creating pop-up windows when the plugin is
instantiated inside a sandboxed iframe.
Browsers should take extreme care when interacting with external content intended for plugins. When third-party software is run with the same privileges as the user agent itself, vulnerabilities in the third-party software become as dangerous as those in the user agent.
The preferred MIME name of a character encoding is the name or alias labeled as "preferred MIME name" in the IANA Character Sets registry, if there is one, or the encoding's name, if none of the aliases are so labeled. [IANACHARSET]
An ASCII-compatible character encoding is a single-byte or variable-length encoding in which the bytes 0x09, 0x0A, 0x0C, 0x0D, 0x20 - 0x22, 0x26, 0x27, 0x2C - 0x3F, 0x41 - 0x5A, and 0x61 - 0x7A, ignoring bytes that are the second and later bytes of multibyte sequences, all correspond to single-byte sequences that map to the same Unicode characters as those bytes in ANSI_X3.4-1968 (US-ASCII). [RFC1345]
This includes such encodings as Shift_JIS, HZ-GB-2312, and variants of ISO-2022, even though it is possible in these encodings for bytes like 0x70 to be part of longer sequences that are unrelated to their interpretation as ASCII. It excludes such encodings as UTF-7, UTF-16, GSM03.38, and EBCDIC variants.
The term a UTF-16 encoding refers to any variant of UTF-16: self-describing UTF-16 with a BOM, ambiguous UTF-16 without a BOM, raw UTF-16LE, and raw UTF-16BE. [RFC2781]
The term code unit is used as defined in the Web IDL
specification: a 16 bit unsigned integer, the smallest atomic
component of a DOMString. (This is a narrower
definition than the one used in Unicode.) [WEBIDL]
The term Unicode code point means a Unicode scalar value where possible, and an isolated surrogate code point when not. When a conformance requirement is defined in terms of characters or Unicode code points, a pair of code units consisting of a high surrogate followed by a low surrogate must be treated as the single code point represented by the surrogate pair, but isolated surrogates must each be treated as the single code point with the value of the surrogate. [UNICODE]
In this specification, the term character, when not qualified as Unicode character, is synonymous with the term Unicode code point.
The term Unicode character is used to mean a Unicode scalar value (i.e. any Unicode code point that is not a surrogate code point). [UNICODE]
The code-point length of a string is the number of code units in that string.
This complexity results from the historical decision to define the DOM API in terms of 16 bit (UTF-16) code units, rather than in terms of Unicode characters.
All diagrams, examples, and notes in this specification are non-normative, as are all sections explicitly marked non-normative. Everything else in this specification is normative.
The key words "MUST", "MUST NOT", "REQUIRED", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this document are to be interpreted as described in RFC2119. The key word "OPTIONALLY" in the normative parts of this document is to be interpreted with the same normative meaning as "MAY" and "OPTIONAL". For readability, these words do not appear in all uppercase letters in this specification. [RFC2119]
Requirements phrased in the imperative as part of algorithms (such as "strip any leading space characters" or "return false and abort these steps") are to be interpreted with the meaning of the key word ("must", "should", "may", etc) used in introducing the algorithm.
For example, were the spec to say:
To eat a kiwi, the user must: 1. Peel the kiwi. 2. Eat the kiwi flesh.
...it would be equivalent to the following:
To eat a kiwi: 1. The user must peel the kiwi. 2. The user must eat the kiwi flesh.
Here the key word is "must".
The former (imperative) style is generally preferred in this specification for stylistic reasons.
Conformance requirements phrased as algorithms or specific steps may be implemented in any manner, so long as the end result is equivalent. (In particular, the algorithms defined in this specification are intended to be easy to follow, and not intended to be performant.)
This specification describes the conformance criteria for user agents (relevant to implementors) and documents (relevant to authors and authoring tool implementors).
Conforming HTML5 documents are those that comply with all the conformance criteria for documents. For readability, some of these conformance requirements are phrased as conformance requirements on authors; such requirements are implicitly requirements on documents: by definition, all documents are assumed to have had an author. (In some cases, that author may itself be a user agent — such user agents are subject to additional rules, as explained below.)
For example, if a requirement states that
"authors must not use the foobar element", it
would imply that documents are not allowed to contain elements named
foobar.
There is no implied relationship between document conformance requirements and implementation conformance requirements. User agents are not free to handle non-conformant documents as they please; the processing model described in this specification applies to implementations regardless of the conformity of the input documents.
User agents fall into several (overlapping) categories with different conformance requirements.
Web browsers that support the XHTML syntax must process elements and attributes from the HTML namespace found in XML documents as described in this specification, so that users can interact with them, unless the semantics of those elements have been overridden by other specifications.
A conforming XHTML processor would, upon
finding an XHTML script element in an XML document,
execute the script contained in that element. However, if the
element is found within a transformation expressed in XSLT
(assuming the user agent also supports XSLT), then the processor
would instead treat the script element as an opaque
element that forms part of the transform.
Web browsers that support the HTML syntax must process documents labeled with an HTML MIME type as described in this specification, so that users can interact with them.
User agents that support scripting must also be conforming implementations of the IDL fragments in this specification, as described in the Web IDL specification. [WEBIDL]
Unless explicitly stated, specifications that
override the semantics of HTML elements do not override the
requirements on DOM objects representing those elements. For
example, the script element in the example above
would still implement the HTMLScriptElement
interface.
User agents that process HTML and XHTML documents purely to render non-interactive versions of them must comply to the same conformance criteria as Web browsers, except that they are exempt from requirements regarding user interaction.
Typical examples of non-interactive presentation user agents are printers (static UAs) and overhead displays (dynamic UAs). It is expected that most static non-interactive presentation user agents will also opt to lack scripting support.
A non-interactive but dynamic presentation UA would still execute scripts, allowing forms to be dynamically submitted, and so forth. However, since the concept of "focus" is irrelevant when the user cannot interact with the document, the UA would not need to support any of the focus-related DOM APIs.
User agents, whether interactive or not, may be designated (possibly as a user option) as supporting the suggested default rendering defined by this specification.
This is not required. In particular, even user agents that do implement the suggested default rendering are encouraged to offer settings that override this default to improve the experience for the user, e.g. changing the color contrast, using different focus styles, or otherwise making the experience more accessible and usable to the user.
User agents that are designated as supporting the suggested default rendering must, while so designated, implement the rules in the rendering section that that section defines as the behavior that user agents are expected to implement.
Implementations that do not support scripting (or which have their scripting features disabled entirely) are exempt from supporting the events and DOM interfaces mentioned in this specification. For the parts of this specification that are defined in terms of an events model or in terms of the DOM, such user agents must still act as if events and the DOM were supported.
Scripting can form an integral part of an application. Web browsers that do not support scripting, or that have scripting disabled, might be unable to fully convey the author's intent.
Conformance checkers must verify that a document conforms to
the applicable conformance criteria described in this
specification. Automated conformance checkers are exempt from
detecting errors that require interpretation of the author's
intent (for example, while a document is non-conforming if the
content of a blockquote element is not a quote,
conformance checkers running without the input of human judgement
do not have to check that blockquote elements only
contain quoted material).
Conformance checkers must check that the input document conforms when parsed without a browsing context (meaning that no scripts are run, and that the parser's scripting flag is disabled), and should also check that the input document conforms when parsed with a browsing context in which scripts execute, and that the scripts never cause non-conforming states to occur other than transiently during script execution itself. (This is only a "SHOULD" and not a "MUST" requirement because it has been proven to be impossible. [COMPUTABLE])
The term "HTML5 validator" can be used to refer to a conformance checker that itself conforms to the applicable requirements of this specification.
The term "HTML validator" can be used to refer to a conformance checker that itself conforms to the applicable requirements of this specification.
XML DTDs cannot express all the conformance requirements of this specification. Therefore, a validating XML processor and a DTD cannot constitute a conformance checker. Also, since neither of the two authoring formats defined in this specification are applications of SGML, a validating SGML system cannot constitute a conformance checker either.
To put it another way, there are three types of conformance criteria:
A conformance checker must check for the first two. A simple DTD-based validator only checks for the first class of errors and is therefore not a conforming conformance checker according to this specification.
Applications and tools that process HTML and XHTML documents for reasons other than to either render the documents or check them for conformance should act in accordance with the semantics of the documents that they process.
A tool that generates document outlines but increases the nesting level for each paragraph and does not increase the nesting level for each section would not be conforming.
Authoring tools and markup generators must generate conforming HTML5 documents. Conformance criteria that apply to authors also apply to authoring tools, where appropriate.
Authoring tools are exempt from the strict requirements of using elements only for their specified purpose, but only to the extent that authoring tools are not yet able to determine author intent. However, authoring tools must not automatically misuse elements or encourage their users to do so.
For example, it is not conforming to use an
address element for arbitrary contact information;
that element can only be used for marking up contact information
for the author of the document or section. However, since an
authoring tool is likely unable to determine the difference, an
authoring tool is exempt from that requirement. This does not
mean, though, that authoring tools can use address
elements for any block of italics text (for instance); it just
means that the authoring tool doesn't have to verify that when the
user uses a tool for inserting contact information for a section,
that the user really is doing that and not inserting something
else instead.
In terms of conformance checking, an editor has to output documents that conform to the same extent that a conformance checker will verify.
When an authoring tool is used to edit a non-conforming document, it may preserve the conformance errors in sections of the document that were not edited during the editing session (i.e. an editing tool is allowed to round-trip erroneous content). However, an authoring tool must not claim that the output is conformant if errors have been so preserved.
Authoring tools are expected to come in two broad varieties: tools that work from structure or semantic data, and tools that work on a What-You-See-Is-What-You-Get media-specific editing basis (WYSIWYG).
The former is the preferred mechanism for tools that author HTML, since the structure in the source information can be used to make informed choices regarding which HTML elements and attributes are most appropriate.
However, WYSIWYG tools are legitimate. WYSIWYG tools should use
elements they know are appropriate, and should not use elements
that they do not know to be appropriate. This might in certain
extreme cases mean limiting the use of flow elements to just a few
elements, like div, b, i,
and span and making liberal use of the style attribute.
All authoring tools, whether WYSIWYG or not, should make a best effort attempt at enabling users to create well-structured, semantically rich, media-independent content.
User agents may impose implementation-specific limits on otherwise unconstrained inputs, e.g. to prevent denial of service attacks, to guard against running out of memory, or to work around platform-specific limitations.
For compatibility with existing content and prior specifications, this specification describes two authoring formats: one based on XML (referred to as the XHTML syntax), and one using a custom format inspired by SGML (referred to as the HTML syntax). Implementations must support at least one of these two formats, although supporting both is encouraged.
Some conformance requirements are phrased as requirements on elements, attributes, methods or objects. Such requirements fall into two categories: those describing content model restrictions, and those describing implementation behavior. Those in the former category are requirements on documents and authoring tools. Those in the second category are requirements on user agents. Similarly, some conformance requirements are phrased as requirements on authors; such requirements are to be interpreted as conformance requirements on the documents that authors produce. (In other words, this specification does not distinguish between conformance criteria on authors and conformance criteria on documents.)
This specification relies on several other underlying specifications.
Implementations that support the XHTML syntax must support some version of XML, as well as its corresponding namespaces specification, because that syntax uses an XML serialization with namespaces. [XML] [XMLNS]
The Document Object Model (DOM) is a representation — a model — of a document and its content. The DOM is not just an API; the conformance criteria of HTML implementations are defined, in this specification, in terms of operations on the DOM. [DOMCORE]
Implementations must support DOM Core and the events defined in DOM Events, because this specification is defined in terms of the DOM, and some of the features are defined as extensions to the DOM Core interfaces. [DOMCORE] [DOMEVENTS]
In particular, the following features are defined in the DOM Core specification: [DOMCORE]
Attr interfaceComment interfaceDOMImplementation interfaceDocument interfaceDocumentFragment interfaceDocumentType interfaceDOMException interfaceElement interfaceNode interfaceNodeList interfaceProcessingInstruction interfaceText interfaceHTMLCollection interface, and the terms collections and represented by the collectionDOMStringList interfaceDOMTokenList interfaceDOMSettableTokenList interfacecreateDocument() methodcreateHTMLDocument() methodcreateElement() methodcreateElementNS() methodgetElementById() methodinsertBefore() methodownerDocument attributechildNodes attributelocalName attributeparentNode attributenamespaceURI attributetagName attributeid attributetextContent attributeEvent interfaceEventTarget interfaceEventInit dictionary typetarget attributeisTrusted attributeEventTargetDocumentNode, and the concept of cloning steps used by that algorithmThe term throw in this specification is used as
defined in the DOM Core specification. The following
DOMException types are defined in the DOM Core
specification: [DOMCORE]
IndexSizeErrorHierarchyRequestErrorWrongDocumentErrorInvalidCharacterErrorNoModificationAllowedErrorNotFoundErrorNotSupportedErrorInvalidStateErrorSyntaxErrorInvalidModificationErrorNamespaceErrorInvalidAccessErrorTypeMismatchErrorSecurityErrorNetworkErrorAbortErrorURLMismatchErrorQuotaExceededErrorTimeoutErrorInvalidNodeTypeErrorDataCloneErrorFor example, to throw a
TimeoutError exception, a user agent would
construct a DOMException object whose type was the
string "TimeoutError" (and whose code was
the number 23, for legacy reasons) and actually throw that object
as an exception.
The following features are defined in the DOM Events specification: [DOMEVENTS]
MouseEvent interfaceMouseEventInit dictionary typeUIEvent interface's detail attributeclick eventIn addition, user agents must implement the features defined in the DOM Parsing and Serialization specification, HTML Editing APIs, and UndoManager and DOM Transaction specifications that apply to their conformance class. [DOMPARSING] [EDITING] [UNDO]
The following features are defined in the DOM Parsing and Serialization specification: [DOMPARSING]
This specification uses the following interfaces defined in the File API specification: [FILEAPI]
BlobFileFileListIt also uses the following interface defined in the File System API specification: [FILESYSTEMAPI]
FileCallbackThe IDL fragments in this specification must be interpreted as required for conforming IDL fragments, as described in the Web IDL specification. [WEBIDL]
The terms relevant namespace object, supported property indices, determine the value of an indexed property, support named properties, supported property names, determine the value of a named property, platform array objects, and read only (when applied to arrays) are used as defined in the Web IDL specification.
Except where otherwise specified, if an IDL
attribute that is a floating point number type (double) is assigned an Infinity or Not-a-Number
(NaN) value, a NotSupportedError exception must be
thrown.
Except where otherwise specified, if a method with an argument
that is a floating point number type (double)
is passed an Infinity or Not-a-Number (NaN) value, a
NotSupportedError exception must be thrown.
When this specification requires a user agent to create a
Date object representing a particular time, the
milliseconds component of that time, if any, must be truncated to
an integer and the time value of the newly created
Date object must represent the time after that
truncation.
For instance, given the time 23045 millionths
of a second after 01:00 UTC on January 1st 2000, i.e. the time
2000-01-01T00:00:00.023045Z, then the Date object
created representing that time would represent the same time as
that created representing the time 2000-01-01T00:00:00.023Z, 45
millionths earlier.
The ArrayBuffer interface and underlying concepts
from the Typed Array Specification are used for several features
in this specification. The Uint8ClampedArray interface
type is specifically used in the definition of the
canvas element's 2D API. [TYPEDARRAY]
Some parts of the language described by this specification only support JavaScript as the underlying scripting language. [ECMA262]
The term "JavaScript" is used to refer to ECMA262,
rather than the official term ECMAScript, since the term
JavaScript is more widely known. Similarly, the MIME
type used to refer to JavaScript in this specification is
text/javascript, since that is the most
commonly used type, despite it
being an officially obsoleted type according to RFC
4329. [RFC4329]
Implementations must support the Media Queries language. [MQ]
Implementations may support WebVTT as a text track format for subtitles, captions, chapter titles, metadata, etc, for media resources. [WEBVTT]
The following terms, used in this specification, are defined in the WebVTT specification:
Implementations must support the semantics of URLs defined in the URI and IRI specifications, as well as the semantics of IDNA domain names defined in the Internationalizing Domain Names in Applications (IDNA) specification. [RFC3986] [RFC3987] [RFC3490]
The following terms are defined in the Cookie specification: [COOKIES]
The following terms are defined in the CORS specification: [CORS]
While support for CSS as a whole is not required of implementations of this specification (though it is encouraged, at least for Web browsers), some features are defined in terms of specific CSS requirements.
In particular, some features require that a string be parsed as a CSS <color> value. When parsing a CSS value, user agents are required by the CSS specifications to apply some error handling rules. These apply to this specification also. [CSSCOLOR] [CSS]
For example, user agents are required to close
all open constructs upon finding the end of a style sheet
unexpectedly. Thus, when parsing the string "rgb(0,0,0" (with a missing close-parenthesis) for
a color value, the close parenthesis is implied by this error
handling rule, and a value is obtained (the color 'black').
However, the similar construct "rgb(0,0,"
(with both a missing parenthesis and a missing "blue" value)
cannot be parsed, as closing the open construct does not result
in a viable value.
The term CSS element reference identifier is used as defined in the CSS Image Values and Replaced Content specification to define the API that declares identifiers for use with the CSS 'element()' function. [CSSIMAGES]
Similarly, the term provides a paint source is used as defined in the CSS Image Values and Replaced Content specification to define the interaction of certain HTML elements with the CSS 'element()' function. [CSSIMAGES]
Support for the CSS Object Model is required for implementations that support scripting. The following features and terms are defined in the CSSOM specifications: [CSSOM] [CSSOMVIEW]
LinkStyleCSSStyleDeclarationStyleSheetsheetdisabledThe following terms are defined in the WebSocket protocol specification: [WSP]
This specification does not require support of any particular network protocol, style sheet language, scripting language, or any of the DOM specifications beyond those described above. However, the language described by this specification is biased towards CSS as the styling language, JavaScript as the scripting language, and HTTP as the network protocol, and several features assume that those languages and protocols are in use.
This specification might have certain additional requirements on character encodings, image formats, audio formats, and video formats in the respective sections.
HTML has a wide number of extensibility mechanisms that can be used for adding semantics in a safe manner:
class
attribute to extend elements, effectively creating their own
elements, while using the most applicable existing "real" HTML
element, so that browsers and other tools that don't know of the
extension can still support it somewhat well. This is the tack used
by microformats, for example.data-*="" attributes. These are
guaranteed to never be touched by browsers, and allow scripts to
include data on HTML elements that scripts can then look for and
process.<meta name=""
content=""> mechanism to include page-wide metadata by
registering extensions to the
predefined set of metadata names.rel="" mechanism to annotate
links with specific meanings by registering extensions to the predefined set of
link types. This is also used by microformats.<script type=""> mechanism with a custom
type, for further handling by inline or server-side scripts.embed element. This is how Flash
works.itemscope="" and itemprop="" attributes) to embed
nested name-value pairs of data to be shared with other
applications and sites.Vendor-specific proprietary user agent extensions to this specification are strongly discouraged. Documents must not use such extensions, as doing so reduces interoperability and fragments the user base, allowing only users of specific user agents to access the content in question.
If such extensions are nonetheless needed, e.g. for experimental purposes, then vendors are strongly urged to use one of the following extension mechanisms:
For markup-level features that can be limited to the XML serialization and need not be supported in the HTML serialization, vendors should use the namespace mechanism to define custom namespaces in which the non-standard elements and attributes are supported.
For markup-level features that are intended for use with
the HTML syntax, extensions should be limited to new
attributes of the form "x-vendor-feature", where
vendor is a short string that identifies the
vendor responsible for the extension, and feature is the name of the feature. New element names
should not be created. Using attributes for such extensions
exclusively allows extensions from multiple vendors to co-exist on
the same element, which would not be possible with elements. Using
the "x-vendor-feature" form allows extensions to be made
without risk of conflicting with future additions to the
specification.
For instance, a browser named "FerretBrowser" could use "ferret" as a vendor prefix, while a browser named "Mellblom Browser" could use "mb". If both of these browsers invented extensions that turned elements into scratch-and-sniff areas, an author experimenting with these features could write:
<p>This smells of lemons!
<span x-ferret-smellovision x-ferret-smellcode="LEM01"
x-mb-outputsmell x-mb-smell="lemon juice"></span></p>
Attribute names beginning with the two characters "x-" are reserved for user agent use and are
guaranteed to never be formally added to the HTML language. For
flexibility, attributes names containing underscores (the U+005F LOW
LINE character) are also reserved for experimental purposes and are
guaranteed to never be formally added to the HTML language.
Pages that use such attributes are by definition non-conforming.
For DOM extensions, e.g. new methods and IDL attributes, the new members should be prefixed by vendor-specific strings to prevent clashes with future versions of this specification.
For events, experimental event names should be prefixed with vendor-specific strings.
For example, if a user agent called "Pleasold" were to
add an event to indicate when the user is going up in an elevator,
it could use the prefix "pleasold" and thus
name the event "pleasoldgoingup", possibly
with an event handler attribute named "onpleasoldgoingup".
All extensions must be defined so that the use of extensions neither contradicts nor causes the non-conformance of functionality defined in the specification.
For example, while strongly discouraged from doing so, an
implementation "Foo Browser" could add a new IDL attribute "fooTypeTime" to a control's DOM interface that
returned the time it took the user to select the current value of a
control (say). On the other hand, defining a new control that
appears in a form's elements
array would be in violation of the above requirement, as it would
violate the definition of elements given in this
specification.
When adding new reflecting IDL
attributes corresponding to content attributes of the form "x-vendor-feature", the IDL attribute should be named
"vendorFeature" (i.e. the "x"
is dropped from the IDL attribute's name).
When vendor-neutral extensions to this specification are needed, either this specification can be updated accordingly, or an extension specification can be written that overrides the requirements in this specification. When someone applying this specification to their activities decides that they will recognize the requirements of such an extension specification, it becomes an applicable specification for the purposes of conformance requirements in this specification.
Someone could write a specification that defines any arbitrary byte stream as conforming, and then claim that their random junk is conforming. However, that does not mean that their random junk actually is conforming for everyone's purposes: if someone else decides that that specification does not apply to their work, then they can quite legitimately say that the aforementioned random junk is just that, junk, and not conforming at all. As far as conformance goes, what matters in a particular community is what that community agrees is applicable.
applicable specification.The conformance terminology for documents depends on the nature of the changes introduced by such applicable specificactions, and on the content and intended interpretation of the document. Applicable specifications MAY define new document content (e.g. a foobar element), MAY prohibit certain otherwise conforming content (e.g. prohibit use of <table>s), or MAY change the semantics, DOM mappings, or other processing rules for content defined in this specification. Whether a document is or is not a conforming HTML5 document does not depend on the use of applicable specifications: if the syntax and semantics of a given conforming HTML5 document document is unchanged by the use of applicable specification(s), then that document remains a conforming HTML5 document. If the semantics or processing of a given (otherwise conforming) document is changed by use of applicable specification(s), then it is not a conforming HTML5 document. For such cases, the applicable specifications SHOULD define conformance terminology.
As a suggested but not required convention, such specifications might define conformance terminology such as: "Conforming HTML5+XXX document", where XXX is a short name for the applicable specification. (Example: "Conforming HTML5+AutomotiveExtensions document").
a consequence of the rule given above is that certain syntactically correct HTML5 documents may not be conforming HTML5 documents in the presence of applicable specifications. (Example: the applicable specification defines <table> to be a piece of furniture — a document written to that specification and containing a <table> element is NOT a conforming HTML5 document, even if the element happens to be syntactically correct HTML5.)
User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them.
When support for a feature is disabled (e.g. as an emergency measure to mitigate a security problem, or to aid in development, or for performance reasons), user agents must act as if they had no support for the feature whatsoever, and as if the feature was not mentioned in this specification. For example, if a particular feature is accessed via an attribute in a Web IDL interface, the attribute itself would be omitted from the objects that implement that interface — leaving the attribute on the object but making it return null or throw an exception is insufficient.
Comparing two strings in a case-sensitive manner means comparing them exactly, code point for code point.
Comparing two strings in an ASCII case-insensitive manner means comparing them exactly, code point for code point, except that the characters in the range U+0041 to U+005A (i.e. LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z) and the corresponding characters in the range U+0061 to U+007A (i.e. LATIN SMALL LETTER A to LATIN SMALL LETTER Z) are considered to also match.
Comparing two strings in a compatibility caseless manner means using the Unicode compatibility caseless match operation to compare the two strings. [UNICODE]
Except where otherwise stated, string comparisons must be performed in a case-sensitive manner.
Converting a string to ASCII uppercase means replacing all characters in the range U+0061 to U+007A (i.e. LATIN SMALL LETTER A to LATIN SMALL LETTER Z) with the corresponding characters in the range U+0041 to U+005A (i.e. LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).
Converting a string to ASCII lowercase means replacing all characters in the range U+0041 to U+005A (i.e. LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z) with the corresponding characters in the range U+0061 to U+007A (i.e. LATIN SMALL LETTER A to LATIN SMALL LETTER Z).
A string pattern is a prefix match for a string s when pattern is not longer than s and truncating s to pattern's length leaves the two strings as matches of each other.
When a user agent is required to decode a byte string as UTF-8, with error handling, it means that the byte stream must be converted to a Unicode string by interpreting it as UTF-8, except that any errors must be handled as described in the following list. Bytes in the following list are represented in hexadecimal. [RFC3629]
For the purposes of the above requirements, an overlong form in UTF-8 is a sequence that encodes a code point using more bytes than the minimum needed to encode that code point in UTF-8.
For example, the byte string "41 98 BA 42 E2 98 43 E2 98 BA E2 98" would be converted to the string "A��B�C☺�".
There are various places in HTML that accept particular data types, such as dates or numbers. This section describes what the conformance criteria for content in those formats is, and how to parse them.
Implementors are strongly urged to carefully examine any third-party libraries they might consider using to implement the parsing of syntaxes described below. For example, date libraries are likely to implement error handling behavior that differs from what is required in this specification, since error-handling behavior is often not defined in specifications that describe date syntaxes similar to those used in this specification, and thus implementations tend to vary greatly in how they handle errors.
The space characters, for the purposes of this specification, are U+0020 SPACE, U+0009 CHARACTER TABULATION (tab), U+000A LINE FEED (LF), U+000C FORM FEED (FF), and U+000D CARRIAGE RETURN (CR).
The White_Space characters are
those that have the Unicode property "White_Space" in the Unicode
PropList.txt data file. [UNICODE]
This should not be confused with the "White_Space"
value (abbreviated "WS") of the "Bidi_Class" property in the Unicode.txt data file.
The alphanumeric ASCII characters are those in the ranges U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0041 LATIN CAPITAL LETTER A to U+005A LATIN CAPITAL LETTER Z, U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER Z.
Some of the micro-parsers described below follow the pattern of having an input variable that holds the string being parsed, and having a position variable pointing at the next character to parse in input.
For parsers based on this pattern, a step that requires the user agent to collect a sequence of characters means that the following algorithm must be run, with characters being the set of characters that can be collected:
Let input and position be the same variables as those of the same name in the algorithm that invoked these steps.
Let result be the empty string.
While position doesn't point past the end of input and the character at position is one of the characters, append that character to the end of result and advance position to the next character in input.
Return result.
The step skip whitespace means that the user agent must collect a sequence of characters that are space characters. The step skip White_Space characters means that the user agent must collect a sequence of characters that are White_Space characters. In both cases, the collected characters are not used. [UNICODE]
When a user agent is to strip line breaks from a string, the user agent must remove any U+000A LINE FEED (LF) and U+000D CARRIAGE RETURN (CR) characters from that string.
When a user agent is to strip leading and trailing whitespace from a string, the user agent must remove all space characters that are at the start or end of the string.
When a user agent has to strictly split a string on a particular delimiter character delimiter, it must use the following algorithm:
Let input be the string being parsed.
Let position be a pointer into input, initially pointing at the start of the string.
Let tokens be a list of tokens, initially empty.
While position is not past the end of input:
Collect a sequence of characters that are not the delimiter character.
Add the string collected in the previous step to tokens.
Advance position to the next character in input.
Return tokens.
For the special cases of splitting a string on spaces and on commas, this algorithm does not apply (those algorithms also perform whitespace trimming).
A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.
If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.
The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.
Here is an example of a checkbox that is checked and disabled.
The checked and disabled attributes are the
boolean attributes.
<label><input type=checkbox checked name=cheese disabled> Cheese</label>
This could be equivalently written as this:
<label><input type=checkbox checked=checked name=cheese disabled=disabled> Cheese</label>
You can also mix styles; the following is still equivalent:
<label><input type='checkbox' checked name=cheese disabled=""> Cheese</label>
Some attributes are defined as taking one of a finite set of keywords. Such attributes are called enumerated attributes. The keywords are each defined to map to a particular state (several keywords might map to the same state, in which case some of the keywords are synonyms of each other; additionally, some of the keywords can be said to be non-conforming, and are only in the specification for historical reasons). In addition, two default states can be given. The first is the invalid value default, the second is the missing value default.
If an enumerated attribute is specified, the attribute's value must be an ASCII case-insensitive match for one of the given keywords that are not said to be non-conforming, with no leading or trailing whitespace.
When the attribute is specified, if its value is an ASCII case-insensitive match for one of the given keywords then that keyword's state is the state that the attribute represents. If the attribute value matches none of the given keywords, but the attribute has an invalid value default, then the attribute represents that state. Otherwise, if the attribute value matches none of the keywords but there is a missing value default state defined, then that is the state represented by the attribute. Otherwise, there is no default, and invalid values must be ignored.
When the attribute is not specified, if there is a missing value default state defined, then that is the state represented by the (missing) attribute. Otherwise, the absence of the attribute means that there is no state represented.
The empty string can be a valid keyword.
A string is a valid integer if it consists of one or more characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), optionally prefixed with a U+002D HYPHEN-MINUS character (-).
A valid integer without a U+002D HYPHEN-MINUS (-) prefix represents the number that is represented in base ten by that string of digits. A valid integer with a U+002D HYPHEN-MINUS (-) prefix represents the number represented in base ten by the string of digits that follows the U+002D HYPHEN-MINUS, subtracted from zero.
The rules for parsing integers are as given in the following algorithm. When invoked, the steps must be followed in the order given, aborting at the first step that returns a value. This algorithm will return either an integer or an error.
Let input be the string being parsed.
Let position be a pointer into input, initially pointing at the start of the string.
Let sign have the value "positive".
Skip whitespace.
If position is past the end of input, return an error.
If the character indicated by position (the first character) is a U+002D HYPHEN-MINUS character (-):
Otherwise, if the character indicated by position (the first character) is a U+002B PLUS SIGN character (+):
+" is ignored, but it is
not conforming.)If the character indicated by position is not one of U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then return an error.
Collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and interpret the resulting sequence as a base-ten integer. Let value be that integer.
If sign is "positive", return value, otherwise return the result of subtracting value from zero.
A string is a valid non-negative integer if it consists of one or more characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9).
A valid non-negative integer represents the number that is represented in base ten by that string of digits.
The rules for parsing non-negative integers are as given in the following algorithm. When invoked, the steps must be followed in the order given, aborting at the first step that returns a value. This algorithm will return either zero, a positive integer, or an error.
Let input be the string being parsed.
Let value be the result of parsing input using the rules for parsing integers.
If value is an error, return an error.
If value is less than zero, return an error.
Return value.
A string is a valid floating point number if it consists of:
A valid floating point number represents the number obtained by multiplying the significand by ten raised to the power of the exponent, where the significand is the first number, interpreted as base ten (including the decimal point and the number after the decimal point, if any, and interpreting the significand as a negative number if the whole string starts with a U+002D HYPHEN-MINUS character (-) and the number is not zero), and where the exponent is the number after the E, if any (interpreted as a negative number if there is a U+002D HYPHEN-MINUS character (-) between the E and the number and the number is not zero, or else ignoring a U+002B PLUS SIGN character (+) between the E and the number if there is one). If there is no E, then the exponent is treated as zero.
The Infinity and Not-a-Number (NaN) values are not valid floating point numbers.
The best representation of the number n as a floating point number is the string obtained from applying the JavaScript operator ToString to n. The JavaScript operator ToString is not uniquely determined. When there are multiple possible strings that could be obtained from the JavaScript operator ToString for a particular value, the user agent must always return the same string for that value (though it may differ from the value used by other user agents).
The rules for parsing floating point number values are as given in the following algorithm. This algorithm must be aborted at the first step that returns something. This algorithm will return either a number or an error.
Let input be the string being parsed.
Let position be a pointer into input, initially pointing at the start of the string.
Let value have the value 1.
Let divisor have the value 1.
Let exponent have the value 1.
Skip whitespace.
If position is past the end of input, return an error.
If the character indicated by position is a U+002D HYPHEN-MINUS character (-):
Otherwise, if the character indicated by position (the first character) is a U+002B PLUS SIGN character (+):
+" is ignored, but it is
not conforming.)If the character indicated by position is a U+002E FULL STOP (.), and that is not the last character in input, and the character after the character indicated by position is one of U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then set value to zero and jump to the step labeled fraction.
If the character indicated by position is not one of U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then return an error.
Collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and interpret the resulting sequence as a base-ten integer. Multiply value by that integer.
Fraction: If the character indicated by position is a U+002E FULL STOP (.), run these substeps:
Advance position to the next character.
If position is past the end of input, or if the character indicated by position is not one of U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0065 LATIN SMALL LETTER E (e), or U+0045 LATIN CAPITAL LETTER E (E), then jump to the step labeled conversion.
If the character indicated by position is a U+0065 LATIN SMALL LETTER E character (e) or a U+0045 LATIN CAPITAL LETTER E character (E), skip the remainder of these substeps.
Fraction loop: Multiply divisor by ten.
Advance position to the next character.
If position is past the end of input, then jump to the step labeled conversion.
If the character indicated by position is one of U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), jump back to the step labeled fraction loop in these substeps.
If the character indicated by position is a U+0065 LATIN SMALL LETTER E character (e) or a U+0045 LATIN CAPITAL LETTER E character (E), run these substeps:
Advance position to the next character.
If position is past the end of input, then jump to the step labeled conversion.
If the character indicated by position is a U+002D HYPHEN-MINUS character (-):
If position is past the end of input, then jump to the step labeled conversion.
Otherwise, if the character indicated by position is a U+002B PLUS SIGN character (+):
If position is past the end of input, then jump to the step labeled conversion.
If the character indicated by position is not one of U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then jump to the step labeled conversion.
Collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and interpret the resulting sequence as a base-ten integer. Multiply exponent by that integer.
Multiply value by ten raised to the exponentth power.
Conversion: Let S be the set of finite IEEE 754 double-precision floating point values except −0, but with two special values added: 21024 and −21024.
Let rounded-value be the number in S that is closest to value, selecting the number with an even significand if there are two equally close values. (The two special values 21024 and −21024 are considered to have even significands for this purpose.)
If rounded-value is 21024 or −21024, return an error.
Return rounded-value.
The rules for parsing dimension values are as given in the following algorithm. When invoked, the steps must be followed in the order given, aborting at the first step that returns a value. This algorithm will return either a number greater than or equal to 1.0, or an error; if a number is returned, then it is further categorized as either a percentage or a length.
Let input be the string being parsed.
Let position be a pointer into input, initially pointing at the start of the string.
Skip whitespace.
If position is past the end of input, return an error.
If the character indicated by position is a U+002B PLUS SIGN character (+), advance position to the next character.
Collect a sequence of characters that are U+0030 DIGIT ZERO (0) characters, and discard them.
If position is past the end of input, return an error.
If the character indicated by position is not one of U+0031 DIGIT ONE (1) to U+0039 DIGIT NINE (9), then return an error.
Collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and interpret the resulting sequence as a base-ten integer. Let value be that number.
If position is past the end of input, return value as a length.
If the character indicated by position is a U+002E FULL STOP character (.):
Advance position to the next character.
If position is past the end of input, or if the character indicated by position is not one of U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then return value as a length.
Let divisor have the value 1.
Fraction loop: Multiply divisor by ten.
Advance position to the next character.
If position is past the end of input, then return value as a length.
If the character indicated by position is one of U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), return to the step labeled fraction loop in these substeps.
If position is past the end of input, return value as a length.
If the character indicated by position is a U+0025 PERCENT SIGN character (%), return value as a percentage.
Return value as a length.
A valid list of integers is a number of valid integers separated by U+002C COMMA characters, with no other characters (e.g. no space characters). In addition, there might be restrictions on the number of integers that can be given, or on the range of values allowed.
The rules for parsing a list of integers are as follows:
Let input be the string being parsed.
Let position be a pointer into input, initially pointing at the start of the string.
Let numbers be an initially empty list of integers. This list will be the result of this algorithm.
If there is a character in the string input at position position, and it is either a U+0020 SPACE, U+002C COMMA, or U+003B SEMICOLON character, then advance position to the next character in input, or to beyond the end of the string if there are no more characters.
If position points to beyond the end of input, return numbers and abort.
If the character in the string input at position position is a U+0020 SPACE, U+002C COMMA, or U+003B SEMICOLON character, then return to step 4.
Let negated be false.
Let value be 0.
Let started be false. This variable is set to true when the parser sees a number or a U+002D HYPHEN-MINUS character (-).
Let got number be false. This variable is set to true when the parser sees a number.
Let finished be false. This variable is set to true to switch parser into a mode where it ignores characters until the next separator.
Let bogus be false.
Parser: If the character in the string input at position position is:
Follow these substeps:
Follow these substeps:
Follow these substeps:
1,2,x,4".Follow these substeps:
Follow these substeps:
Advance position to the next character in input, or to beyond the end of the string if there are no more characters.
If position points to a character (and not to beyond the end of input), jump to the big Parser step above.
If negated is true, then negate value.
If got number is true, then append value to the numbers list.
Return the numbers list and abort.
The rules for parsing a list of dimensions are as follows. These rules return a list of zero or more pairs consisting of a number and a unit, the unit being one of percentage, relative, and absolute.
Let raw input be the string being parsed.
If the last character in raw input is a U+002C COMMA character (,), then remove that character from raw input.
Split the string raw input on commas. Let raw tokens be the resulting list of tokens.
Let result be an empty list of number/unit pairs.
For each token in raw tokens, run the following substeps:
Let input be the token.
Let position be a pointer into input, initially pointing at the start of the string.
Let value be the number 0.
Let unit be absolute.
If position is past the end of input, set unit to relative and jump to the last substep.
If the character at position is a character in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), interpret the resulting sequence as an integer in base ten, and increment value by that integer.
If the character at position is a U+002E FULL STOP character (.), run these substeps:
Collect a sequence of characters consisting of space characters and characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). Let s be the resulting sequence.
Remove all space characters in s.
If s is not the empty string, run these subsubsteps:
Let length be the number of characters in s (after the spaces were removed).
Let fraction be the result of interpreting s as a base-ten integer, and then dividing that number by 10length.
Increment value by fraction.
Skip whitespace.
If the character at position is a U+0025 PERCENT SIGN character (%), then set unit to percentage.
Otherwise, if the character at position is a U+002A ASTERISK character (*), then set unit to relative.
Add an entry to result consisting of the number given by value and the unit given by unit.
Return the list result.
In the algorithms below, the number of days in month month of year year is: 31 if month is 1, 3, 5, 7, 8, 10, or 12; 30 if month is 4, 6, 9, or 11; 29 if month is 2 and year is a number divisible by 400, or if year is a number divisible by 4 but not by 100; and 28 otherwise. This takes into account leap years in the Gregorian calendar. [GREGORIAN]
The digits in the date and time syntaxes defined in this section must be characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), used to express numbers in base ten.
While the formats described here are intended to be subsets of the corresponding ISO8601 formats, this specification defines parsing rules in much more detail than ISO8601. Implementors are therefore encouraged to carefully examine any date parsing libraries before using them to implement the parsing rules described below; ISO8601 libraries might not parse dates and times in exactly the same manner. [ISO8601]
A month consists of a specific proleptic Gregorian date with no time-zone information and no date information beyond a year and a month. [GREGORIAN]
A string is a valid month string representing a year year and month month if it consists of the following components in the given order:
The rules to parse a month string are as follows. This will return either a year and month, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing.
Let input be the string being parsed.
Let position be a pointer into input, initially pointing at the start of the string.
Parse a month component to obtain year and month. If this returns nothing, then fail.
If position is not beyond the end of input, then fail.
Return year and month.
The rules to parse a month component, given an input string and a position, are as follows. This will return either a year and a month, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing.
Collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected sequence is not at least four characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let that number be the year.
If year is not a number greater than zero, then fail.
If position is beyond the end of input or if the character at position is not a U+002D HYPHEN-MINUS character, then fail. Otherwise, move position forwards one character.
Collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected sequence is not exactly two characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let that number be the month.
If month is not a number in the range 1 ≤ month ≤ 12, then fail.
Return year and month.
A date consists of a specific proleptic Gregorian date with no time-zone information, consisting of a year, a month, and a day. [GREGORIAN]
A string is a valid date string representing a year year, month month, and day day if it consists of the following components in the given order:
The rules to parse a date string are as follows. This will return either a date, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing.
Let input be the string being parsed.
Let position be a pointer into input, initially pointing at the start of the string.
Parse a date component to obtain year, month, and day. If this returns nothing, then fail.
If position is not beyond the end of input, then fail.
Let date be the date with year year, month month, and day day.
Return date.
The rules to parse a date component, given an input string and a position, are as follows. This will return either a year, a month, and a day, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing.
Parse a month component to obtain year and month. If this returns nothing, then fail.
Let maxday be the number of days in month month of year year.
If position is beyond the end of input or if the character at position is not a U+002D HYPHEN-MINUS character, then fail. Otherwise, move position forwards one character.
Collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected sequence is not exactly two characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let that number be the day.
If day is not a number in the range 1 ≤ day ≤ maxday, then fail.
Return year, month, and day.
A yearless date consists of a month and a day, but with no associated year.
A string is a valid yearless date string representing a month month and a day day if it consists of the following components in the given order:
In other words, if the month is
"02", meaning February, then the day can be
29, as if the year was a leap year.
The rules to parse a yearless date string are as follows. This will return either a month and a day, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing.
Let input be the string being parsed.
Let position be a pointer into input, initially pointing at the start of the string.
Parse a yearless date component to obtain month and day. If this returns nothing, then fail.
If position is not beyond the end of input, then fail.
Return month and day.
The rules to parse a yearless date component, given an input string and a position, are as follows. This will return either a month and a day, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing.
Collect a sequence of characters that are U+002D HYPHEN-MINUS characters (-). If the collected sequence is not exactly zero or two characters long, then fail.
Collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected sequence is not exactly two characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let that number be the month.
If month is not a number in the range 1 ≤ month ≤ 12, then fail.
Let maxday be the number of days in month month of any arbitrary leap year (e.g. 4 or 2000).
If position is beyond the end of input or if the character at position is not a U+002D HYPHEN-MINUS character, then fail. Otherwise, move position forwards one character.
Collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected sequence is not exactly two characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let that number be the day.
If day is not a number in the range 1 ≤ day ≤ maxday, then fail.
Return month and day.
A time consists of a specific time with no time-zone information, consisting of an hour, a minute, a second, and a fraction of a second.
A string is a valid time string representing an hour hour, a minute minute, and a second second if it consists of the following components in the given order:
The second component cannot be 60 or 61; leap seconds cannot be represented.
The rules to parse a time string are as follows. This will return either a time, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing.
Let input be the string being parsed.
Let position be a pointer into input, initially pointing at the start of the string.
Parse a time component to obtain hour, minute, and second. If this returns nothing, then fail.
If position is not beyond the end of input, then fail.
Let time be the time with hour hour, minute minute, and second second.
Return time.
The rules to parse a time component, given an input string and a position, are as follows. This will return either an hour, a minute, and a second, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing.
Collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected sequence is not exactly two characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let that number be the hour.
If position is beyond the end of input or if the character at position is not a U+003A COLON character, then fail. Otherwise, move position forwards one character.
Collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected sequence is not exactly two characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let that number be the minute.
Let second be a string with the value "0".
If position is not beyond the end of input and the character at position is a U+003A COLON, then run these substeps:
Advance position to the next character in input.
If position is beyond the end of input, or at the last character in input, or if the next two characters in input starting at position are not two characters both in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then fail.
Collect a sequence of characters that are either characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9) or U+002E FULL STOP characters. If the collected sequence is three characters long, or if it is longer than three characters long and the third character is not a U+002E FULL STOP character, or if it has more than one U+002E FULL STOP character, then fail. Otherwise, let the collected string be second instead of its previous value.
Interpret second as a base-ten number (possibly with a fractional part). Let second be that number instead of the string version.
If second is not a number in the range 0 ≤ second < 60, then fail.
Return hour, minute, and second.
A local date and time consists of a specific proleptic Gregorian date, consisting of a year, a month, and a day, and a time, consisting of an hour, a minute, a second, and a fraction of a second, but expressed without a time zone. [GREGORIAN]
A string is a valid local date and time string representing a date and time if it consists of the following components in the given order:
A string is a valid normalized local date and time string representing a date and time if it consists of the following components in the given order:
The rules to parse a local date and time string are as follows. This will return either a date and time, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing.
Let input be the string being parsed.
Let position be a pointer into input, initially pointing at the start of the string.
Parse a date component to obtain year, month, and day. If this returns nothing, then fail.
If position is beyond the end of input or if the character at position is neither a U+0054 LATIN CAPITAL LETTER T character (T) nor a U+0020 SPACE character, then fail. Otherwise, move position forwards one character.
Parse a time component to obtain hour, minute, and second. If this returns nothing, then fail.
If position is not beyond the end of input, then fail.
Let date be the date with year year, month month, and day day.
Let time be the time with hour hour, minute minute, and second second.
Return date and time.
A time-zone offset consists of a signed number of hours and minutes.
A string is a valid time-zone offset string representing a time-zone offset if it consists of either:
A U+005A LATIN CAPITAL LETTER Z character (Z), allowed only if the time zone is UTC
Or, the following components, in the given order:
This format allows for time-zone offsets from -23:59 to +23:59. In practice, however, the range of offsets of actual time zones is -12:00 to +14:00, and the minutes component of offsets of actual time zones is always either 00, 30, or 45.
See also the usage notes and examples in the global date and time section below for details on using time-zone offsets with historical times that predate the formation of formal time zones.
The rules to parse a time-zone offset string are as follows. This will return either a time-zone offset, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing.
Let input be the string being parsed.
Let position be a pointer into input, initially pointing at the start of the string.
Parse a time-zone offset component to obtain timezonehours and timezoneminutes. If this returns nothing, then fail.
If position is not beyond the end of input, then fail.
Return the time-zone offset that is timezonehours hours and timezoneminutes minutes from UTC.
The rules to parse a time-zone offset component, given an input string and a position, are as follows. This will return either time-zone hours and time-zone minutes, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing.
If the character at position is a U+005A LATIN CAPITAL LETTER Z character (Z), then:
Let timezonehours be 0.
Let timezoneminutes be 0.
Advance position to the next character in input.
Otherwise, if the character at position is either a U+002B PLUS SIGN (+) or a U+002D HYPHEN-MINUS (-), then:
If the character at position is a U+002B PLUS SIGN (+), let sign be "positive". Otherwise, it's a U+002D HYPHEN-MINUS (-); let sign be "negative".
Advance position to the next character in input.
Collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). Let s be the collected sequence.
If s is exactly two characters long, then run these substeps:
Interpret s as a base-ten integer. Let that number be the timezonehours.
If position is beyond the end of input or if the character at position is not a U+003A COLON character, then fail. Otherwise, move position forwards one character.
Collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected sequence is not exactly two characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let that number be the timezoneminutes.
If s is exactly four characters long, then run these substeps:
Interpret the first two characters of s as a base-ten integer. Let that number be the timezonehours.
Interpret the last two characters of s as a base-ten integer. Let that number be the timezoneminutes.
Otherwise, fail.
Otherwise, fail.
Return timezonehours and timezoneminutes.
A global date and time consists of a specific proleptic Gregorian date, consisting of a year, a month, and a day, and a time, consisting of an hour, a minute, a second, and a fraction of a second, expressed with a time-zone offset, consisting of a signed number of hours and minutes. [GREGORIAN]
A string is a valid global date and time string representing a date, time, and a time-zone offset if it consists of the following components in the given order:
Times in dates before the formation of UTC in the mid twentieth century must be expressed and interpreted in terms of UT1 (contemporary Earth solar time at the 0° longitude), not UTC (the approximation of UT1 that ticks in SI seconds). Time before the formation of time zones must be expressed and interpeted as UT1 times with explicit time zones that approximate the contemporary difference between the appropriate local time and the time observed at the location of Greenwich, London.
The following are some examples of dates written as valid global date and time strings.
0037-12-13 00:00Z"1979-10-14T12:00:00.001-04:00"8592-01-01T02:09+02:09"Several things are notable about these dates:
T" is replaced by a space, it
must be a single space character. The string "2001-12-21 12:00Z" (with two spaces
between the components) would not be parsed successfully.A string is a valid normalized forced-UTC global date and time string representing a date, time, and a time-zone offset if it consists of the following components in the given order:
The rules to parse a global date and time string are as follows. This will return either a time in UTC, with associated time-zone offset information for round-tripping or display purposes, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing.
Let input be the string being parsed.
Let position be a pointer into input, initially pointing at the start of the string.
Parse a date component to obtain year, month, and day. If this returns nothing, then fail.
If position is beyond the end of input or if the character at position is neither a U+0054 LATIN CAPITAL LETTER T character (T) nor a U+0020 SPACE character, then fail. Otherwise, move position forwards one character.
Parse a time component to obtain hour, minute, and second. If this returns nothing, then fail.
If position is beyond the end of input, then fail.
Parse a time-zone offset component to obtain timezonehours and timezoneminutes. If this returns nothing, then fail.
If position is not beyond the end of input, then fail.
Let time be the moment in time at year year, month month, day day, hours hour, minute minute, second second, subtracting timezonehours hours and timezoneminutes minutes. That moment in time is a moment in the UTC time zone.
Let timezone be timezonehours hours and timezoneminutes minutes from UTC.
Return time and timezone.
A week consists of a week-year number and a week number representing a seven-day period starting on a Monday. Each week-year in this calendaring system has either 52 or 53 such seven-day periods, as defined below. The seven-day period starting on the Gregorian date Monday December 29th 1969 (1969-12-29) is defined as week number 1 in week-year 1970. Consecutive weeks are numbered sequentially. The week before the number 1 week in a week-year is the last week in the previous week-year, and vice versa. [GREGORIAN]
A week-year with a number year has 53 weeks if it corresponds to either a year year in the proleptic Gregorian calendar that has a Thursday as its first day (January 1st), or a year year in the proleptic Gregorian calendar that has a Wednesday as its first day (January 1st) and where year is a number divisible by 400, or a number divisible by 4 but not by 100. All other week-years have 52 weeks.
The week number of the last day of a week-year with 53 weeks is 53; the week number of the last day of a week-year with 52 weeks is 52.
The week-year number of a particular day can be different than the number of the year that contains that day in the proleptic Gregorian calendar. The first week in a week-year y is the week that contains the first Thursday of the Gregorian year y.
A string is a valid week string representing a week-year year and week week if it consists of the following components in the given order:
The rules to parse a week string are as follows. This will return either a week-year number and week number, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing.
Let input be the string being parsed.
Let position be a pointer into input, initially pointing at the start of the string.
Collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected sequence is not at least four characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let that number be the year.
If year is not a number greater than zero, then fail.
If position is beyond the end of input or if the character at position is not a U+002D HYPHEN-MINUS character, then fail. Otherwise, move position forwards one character.
If position is beyond the end of input or if the character at position is not a U+0057 LATIN CAPITAL LETTER W character (W), then fail. Otherwise, move position forwards one character.
Collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). If the collected sequence is not exactly two characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let that number be the week.
Let maxweek be the week number of the last day of year year.
If week is not a number in the range 1 ≤ week ≤ maxweek, then fail.
If position is not beyond the end of input, then fail.
Return the week-year number year and the week number week.
A duration consists of a number of seconds.
Since months and seconds are not comparable (a month is not a precise number of seconds, but is instead a period whose exact length depends on the precise day from which it is measured) a duration as defined in this specification cannot include months (or years, which are equivalent to twelve months). Only durations that describe a specific number of seconds can be described.
A string is a valid duration string representing a duration t if it consists of either of the following:
A literal U+0050 LATIN CAPITAL LETTER P character followed by one or more of the following subcomponents, in the order given, where the number of days, hours, minutes, and seconds corresponds to the same number of seconds as in t:
One or more digits followed by a U+0044 LATIN CAPITAL LETTER D character, representing a number of days.
A U+0054 LATIN CAPITAL LETTER T character followed by one or more of the following subcomponents, in the order given:
One or more digits followed by a U+0048 LATIN CAPITAL LETTER H character, representing a number of hours.
One or more digits followed by a U+004D LATIN CAPITAL LETTER M character, representing a number of minutes.
The following components:
One or more digits, representing a number of seconds.
Optionally, a U+002E FULL STOP character (.) followed by one, two, or three digits, representing a fraction of a second.
A U+0053 LATIN CAPITAL LETTER S character.
This, as with a number of other date- and time-related microsyntaxes defined in this specification, is based on one of the formats defined in ISO 8601. [ISO8601]
One or more duration time components, each with a different duration time component scale, in any order; the sum of the represented seconds being equal to the number of seconds in t.
A duration time component is a string consisting of the following components:
Zero or more space characters.
One or more digits, representing a number of time units, scaled by the duration time component scale specified (see below) to represent a number of seconds.
If the duration time component scale specified is 1 (i.e. the units are seconds), then, optionally, a U+002E FULL STOP character (.) followed by one, two, or three digits, representing a fraction of a second.
Zero or more space characters.
One of the following characters, representing the duration time component scale of the time unit used in the numeric part of the duration time component:
Zero or more space characters.
This is not based on any of the formats in ISO 8601. It is intended to be a more human-readable alternative to the ISO 8601 duration format.
The rules to parse a duration string are as follows. This will return either a duration or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing.
Let input be the string being parsed.
Let position be a pointer into input, initially pointing at the start of the string.
Let months, seconds, and component count all be zero.
Let M-disambiguator be minutes.
This flag's other value is months. It is used to disambiguate the "M" unit in ISO8601 durations, which use the same unit for months and minutes. Months are not allowed, but are parsed for future compatibility and to avoid misinterpreting ISO8601 durations that would be valid in other contexts.
Skip whitespace.
If position is past the end of input, then fail.
If the character in input pointed to by position is a U+0050 LATIN CAPITAL LETTER P character, then advance position to the next character, set M-disambiguator to months, and skip whitespace.
Run the following substeps in a loop, until the first step in the loop requires that the loop be broken, or until a step requiring the algorithm to fail is reached:
Let units be undefined. It will be assigned one of the following values: years, months, weeks, days, hours, minutes, and seconds.
Let next character be undefined. It is used to process characters from the input.
If position is past the end of input, then break the loop.
If the character in input pointed to by position is a U+0054 LATIN CAPITAL LETTER T character, then advance position to the next character, set M-disambiguator to minutes, skip whitespace, and return to the top of the loop.
Set next character to the character in input pointed to by position.
If next character is a U+002E FULL STOP character (.), then let N equal zero. (Do not advance position. That is taken care of below.)
Otherwise, if next character is a character in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), interpret the resulting sequence as a base-ten integer, and let N be that number.
Otherwise next character is not part of a number; fail.
If position is past the end of input, then fail.
Set next character to the character in input pointed to by position, and this time advance position to the next character. (If next character was a U+002E FULL STOP character (.) before, it will still be that character this time.)
If next character is a U+002E FULL STOP character (.), then run these substeps:
Collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9). Let s be the resulting sequence.
If s is the empty string, then fail.
Let length be the number of characters in s.
Let fraction be the result of interpreting s as a base-ten integer, and then dividing that number by 10length.
Increment N by fraction.
Skip whitespace.
If position is past the end of input, then fail.
Set next character to the character in input pointed to by position, and advance position to the next character.
If next character is neither a U+0053 LATIN CAPITAL LETTER S character nor a U+0073 LATIN SMALL LETTER S character, then fail.
Set units to seconds.
Otherwise, run these substeps:
If next character is a space character, then skip whitespace, set next character to the character in input pointed to by position, and advance position to the next character.
If next character is a U+0059 LATIN CAPITAL LETTER Y character, or a U+0079 LATIN SMALL LETTER Y character, set units to years and set M-disambiguator to months.
If next character is a U+004D LATIN CAPITAL LETTER M character or a U+006D LATIN SMALL LETTER M character, and M-disambiguator is months, then set units to months.
If next character is a U+0057 LATIN CAPITAL LETTER W character or a U+0077 LATIN SMALL LETTER W character, set units to weeks and set M-disambiguator to minutes.
If next character is a U+0044 LATIN CAPITAL LETTER D character or a U+0064 LATIN SMALL LETTER D character, set units to days and set M-disambiguator to minutes.
If next character is a U+0048 LATIN CAPITAL LETTER H character or a U+0068 LATIN SMALL LETTER H character, set units to hours and set M-disambiguator to minutes.
If next character is a U+004D LATIN CAPITAL LETTER M character or a U+006D LATIN SMALL LETTER M character, and M-disambiguator is minutes, then set units to minutes.
If next character is a U+0053 LATIN CAPITAL LETTER S character or a U+0073 LATIN SMALL LETTER S character, set units to seconds and set M-disambiguator to minutes.
Otherwise if next character is none of the above characters, then fail.
Increment component count.
Let multiplier be 1.
If units is years, multiply multiplier by 12 and set units to months.
If units is months, add the product of N and multiplier to months.
Otherwise, run these substeps:
If units is weeks, multiply multiplier by 7 and set units to days.
If units is days, multiply multiplier by 24 and set units to hours.
If units is hours, multiply multiplier by 60 and set units to minutes.
If units is minutes, multiply multiplier by 60 and set units to seconds.
Forcibly, units is now seconds. Add the product of N and multiplier to seconds.
Skip whitespace.
If component count is zero, fail.
If months is not zero, fail.
Return the duration consisting of seconds seconds.
A string is a valid date string with optional time if it is also one of the following:
The rules to parse a date or time string are as follows. The algorithm will return either a date, a time, a global date and time, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing.
Let input be the string being parsed.
Let position be a pointer into input, initially pointing at the start of the string.
Set start position to the same position as position.
Set the date present and time present flags to true.
Parse a date component to obtain year, month, and day. If this fails, then set the date present flag to false.
If date present is true, and position is not beyond the end of input, and the character at position is either a U+0054 LATIN CAPITAL LETTER T character (T) or a U+0020 SPACE character, then advance position to the next character in input.
Otherwise, if date present is true, and either position is beyond the end of input or the character at position is neither a U+0054 LATIN CAPITAL LETTER T character (T) nor a U+0020 SPACE character, then set time present to false.
Otherwise, if date present is false, set position back to the same position as start position.
If the time present flag is true, then parse a time component to obtain hour, minute, and second. If this returns nothing, then fail.
If the date present and time present flags are both true, but position is beyond the end of input, then fail.
If the date present and time present flags are both true, parse a time-zone offset component to obtain timezonehours and timezoneminutes. If this returns nothing, then fail.
If position is not beyond the end of input, then fail.
If the date present flag is true and the time present flag is false, then let date be the date with year year, month month, and day day, and return date.
Otherwise, if the time present flag is true and the date present flag is false, then let time be the time with hour hour, minute minute, and second second, and return time.
Otherwise, let time be the moment in time at year year, month month, day day, hours hour, minute minute, second second, subtracting timezonehours hours and timezoneminutes minutes, that moment in time being a moment in the UTC time zone; let timezone be timezonehours hours and timezoneminutes minutes from UTC; and return time and timezone.
A simple color consists of three 8-bit numbers in the range 0..255, representing the red, green, and blue components of the color respectively, in the sRGB color space. [SRGB]
A string is a valid simple color if it is exactly seven characters long, and the first character is a U+0023 NUMBER SIGN character (#), and the remaining six characters are all in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0041 LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F, U+0061 LATIN SMALL LETTER A to U+0066 LATIN SMALL LETTER F, with the first two digits representing the red component, the middle two digits representing the green component, and the last two digits representing the blue component, in hexadecimal.
A string is a valid lowercase simple color if it is a valid simple color and doesn't use any characters in the range U+0041 LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F.
The rules for parsing simple color values are as given in the following algorithm. When invoked, the steps must be followed in the order given, aborting at the first step that returns a value. This algorithm will return either a simple color or an error.
Let input be the string being parsed.
If input is not exactly seven characters long, then return an error.
If the first character in input is not a U+0023 NUMBER SIGN character (#), then return an error.
If the last six characters of input are not all in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0041 LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F, U+0061 LATIN SMALL LETTER A to U+0066 LATIN SMALL LETTER F, then return an error.
Let result be a simple color.
Interpret the second and third characters as a hexadecimal number and let the result be the red component of result.
Interpret the fourth and fifth characters as a hexadecimal number and let the result be the green component of result.
Interpret the sixth and seventh characters as a hexadecimal number and let the result be the blue component of result.
Return result.
The rules for serializing simple color values given a simple color are as given in the following algorithm:
Let result be a string consisting of a single U+0023 NUMBER SIGN character (#).
Convert the red, green, and blue components in turn to two-digit hexadecimal numbers using the digits U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9) and U+0061 LATIN SMALL LETTER A to U+0066 LATIN SMALL LETTER F, zero-padding if necessary, and append these numbers to result, in the order red, green, blue.
Return result, which will be a valid lowercase simple color.
Some obsolete legacy attributes parse colors in a more complicated manner, using the rules for parsing a legacy color value, which are given in the following algorithm. When invoked, the steps must be followed in the order given, aborting at the first step that returns a value. This algorithm will return either a simple color or an error.
Let input be the string being parsed.
If input is the empty string, then return an error.
Strip leading and trailing whitespace from input.
If input is an ASCII
case-insensitive match for the string "transparent", then return an error.
If input is an ASCII case-insensitive match for one of the keywords listed in the SVG color keywords section of the CSS3 Color specification, then return the simple color corresponding to that keyword. [CSSCOLOR]
CSS2 System Colors are not recognised.
If input is four characters long, and the first character in input is a U+0023 NUMBER SIGN character (#), and the last three characters of input are all in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0041 LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F, and U+0061 LATIN SMALL LETTER A to U+0066 LATIN SMALL LETTER F, then run these substeps:
Let result be a simple color.
Interpret the second character of input as a hexadecimal digit; let the red component of result be the resulting number multiplied by 17.
Interpret the third character of input as a hexadecimal digit; let the green component of result be the resulting number multiplied by 17.
Interpret the fourth character of input as a hexadecimal digit; let the blue component of result be the resulting number multiplied by 17.
Return result.
Replace any characters in input that
have a Unicode code point greater than U+FFFF (i.e. any characters
that are not in the basic multilingual plane) with the
two-character string "00".
If input is longer than 128 characters, truncate input, leaving only the first 128 characters.
If the first character in input is a U+0023 NUMBER SIGN character (#), remove it.
Replace any character in input that is not in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0041 LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F, and U+0061 LATIN SMALL LETTER A to U+0066 LATIN SMALL LETTER F with the character U+0030 DIGIT ZERO (0).
While input's length is zero or not a multiple of three, append a U+0030 DIGIT ZERO (0) character to input.
Split input into three strings of equal length, to obtain three components. Let length be the length of those components (one third the length of input).
If length is greater than 8, then remove the leading length-8 characters in each component, and let length be 8.
While length is greater than two and the first character in each component is a U+0030 DIGIT ZERO (0) character, remove that character and reduce length by one.
If length is still greater than two, truncate each component, leaving only the first two characters in each.
Let result be a simple color.
Interpret the first component as a hexadecimal number; let the red component of result be the resulting number.
Interpret the second component as a hexadecimal number; let the green component of result be the resulting number.
Interpret the third component as a hexadecimal number; let the blue component of result be the resulting number.
Return result.
The 2D graphics context has a separate color syntax that also handles opacity.
A set of space-separated tokens is a string containing zero or more words (known as tokens) separated by one or more space characters, where words consist of any string of one or more characters, none of which are space characters.
A string containing a set of space-separated tokens may have leading or trailing space characters.
An unordered set of unique space-separated tokens is a set of space-separated tokens where none of the tokens are duplicated.
An ordered set of unique space-separated tokens is a set of space-separated tokens where none of the tokens are duplicated but where the order of the tokens is meaningful.
Sets of space-separated tokens sometimes have a defined set of allowed values. When a set of allowed values is defined, the tokens must all be from that list of allowed values; other values are non-conforming. If no such set of allowed values is provided, then all values are conforming.
How tokens in a set of space-separated tokens are to be compared (e.g. case-sensitively or not) is defined on a per-set basis.
When a user agent has to split a string on spaces, it must use the following algorithm:
Let input be the string being parsed.
Let position be a pointer into input, initially pointing at the start of the string.
Let tokens be a list of tokens, initially empty.
Skip whitespace
While position is not past the end of input:
Collect a sequence of characters that are not space characters.
Add the string collected in the previous step to tokens.
Skip whitespace
Return tokens.
When a user agent has to remove a token from a string, it must use the following algorithm:
Let input be the string being modified.
Let token be the token being removed. It will not contain any space characters.
Let output be the output string, initially empty.
Let position be a pointer into input, initially pointing at the start of the string.
Loop: If position is beyond the end of input, abort these steps.
If the character at position is a space character:
Append the character at position to the end of output.
Advance position so it points at the next character in input.
Return to the step labeled loop.
Otherwise, the character at position is the first character of a token. Collect a sequence of characters that are not space characters, and let that be s.
If s is exactly equal to token (this is a case-sensitive comparison), then:
Skip whitespace (in input).
Remove any space characters currently at the end of output.
If position is not past the end of input, and output is not the empty string, append a single U+0020 SPACE character at the end of output.
Otherwise, append s to the end of output.
Return to the step labeled loop.
This causes any occurrences of the token to be removed from the string, and any spaces that were surrounding the token to be collapsed to a single space, except at the start and end of the string, where such spaces are removed.
A set of comma-separated tokens is a string containing zero or more tokens each separated from the next by a single U+002C COMMA character (,), where tokens consist of any string of zero or more characters, neither beginning nor ending with space characters, nor containing any U+002C COMMA characters (,), and optionally surrounded by space characters.
For instance, the string " a ,b,,d d " consists of four
tokens: "a", "b", the empty string, and "d d". Leading and
trailing whitespace around each token doesn't count as part of the
token, and the empty string can be a token.
Sets of comma-separated tokens sometimes have further restrictions on what consists a valid token. When such restrictions are defined, the tokens must all fit within those restrictions; other values are non-conforming. If no such restrictions are specified, then all values are conforming.
When a user agent has to split a string on commas, it must use the following algorithm:
Let input be the string being parsed.
Let position be a pointer into input, initially pointing at the start of the string.
Let tokens be a list of tokens, initially empty.
Token: If position is past the end of input, jump to the last step.
Collect a sequence of characters that are not U+002C COMMA characters (,). Let s be the resulting sequence (which might be the empty string).
Strip leading and trailing whitespace from s.
Add s to tokens.
If position is not past the end of input, then the character at position is a U+002C COMMA character (,); advance position past that character.
Jump back to the step labeled token.
Return tokens.
A valid hash-name reference to an element of type type is a string consisting of a U+0023 NUMBER SIGN
character (#) followed by a string which exactly matches the value
of the name attribute of an element with type
type in the document.
The rules for parsing a hash-name reference to an element of type type are as follows:
If the string being parsed does not contain a U+0023 NUMBER SIGN character, or if the first such character in the string is the last character in the string, then return null and abort these steps.
Let s be the string from the character immediately after the first U+0023 NUMBER SIGN character in the string being parsed up to the end of that string.
Return the first element of type type
that has an id attribute whose value
is a case-sensitive match for s or
a name attribute whose value is a
compatibility caseless match for s.
A string is a valid media query if it matches the
media_query_list production of the Media
Queries specification. [MQ]
A string matches the environment of the user if it is the empty string, a string consisting of only space characters, or is a media query that matches the user's environment according to the definitions given in the Media Queries specification. [MQ]
This specification defines the term URL, and defines various algorithms for dealing with URLs, because for historical reasons the rules defined by the URI and IRI specifications are not a complete description of what HTML user agents need to implement to be compatible with Web content.
The term "URL" in this specification is used in a manner distinct from the precise technical meaning it is given in RFC 3986. Readers familiar with that RFC will find it easier to read this specification if they pretend the term "URL" as used herein is really called something else altogether. This is a willful violation of RFC 3986. [RFC3986]
A URL is a string used to identify a resource.
A URL is a valid URL if at least one of the following conditions holds:
The URL is a valid URI reference [RFC3986].
The URL is a valid IRI reference and it has no query component. [RFC3987]
The URL is a valid IRI reference and its query component contains no unescaped non-ASCII characters. [RFC3987]
The URL is a valid IRI reference and the character encoding of
the URL's Document is UTF-8 or a UTF-16
encoding. [RFC3987]
A string is a valid non-empty URL if it is a valid URL but it is not the empty string.
A string is a valid URL potentially surrounded by spaces if, after stripping leading and trailing whitespace from it, it is a valid URL.
A string is a valid non-empty URL potentially surrounded by spaces if, after stripping leading and trailing whitespace from it, it is a valid non-empty URL.
This specification defines the URL
about:legacy-compat as a reserved, though
unresolvable, about: URI, for use in DOCTYPEs in HTML
documents when needed for compatibility with XML tools. [ABOUT]
This specification defines the URL
about:srcdoc as a reserved, though
unresolvable, about: URI, that is used as
the document's address of iframe srcdoc documents. [ABOUT]
To parse a URL url into its component parts, the user agent must use the following steps:
Strip leading and trailing whitespace from url.
Parse url in the manner defined by RFC 3986, with the following exceptions:
If url doesn't match the <URI-reference> production, even after the above changes are made to the ABNF definitions, then parsing the URL fails with an error. [RFC3986]
Otherwise, parsing url was successful; the components of the URL are substrings of url defined as follows:
The substring matched by the <scheme> production, if any.
The substring matched by the <host> production, if any.
The substring matched by the <port> production, if any.
If there is a <scheme> component and a <port> component and the port given by the <port> component is different than the default port defined for the protocol given by the <scheme> component, then <hostport> is the substring that starts with the substring matched by the <host> production and ends with the substring matched by the <port> production, and includes the colon in between the two. Otherwise, it is the same as the <host> component.
The substring matched by one of the following productions, if one of them was matched:
The substring matched by the <query> production, if any.
The substring matched by the <fragment> production, if any.
The substring that follows the substring matched by the <authority> production, or the whole string if the <authority> production wasn't matched.
These parsing rules are a willful violation of RFC 3986 and RFC 3987 (which do not define error handling), motivated by a desire to handle legacy content. [RFC3986] [RFC3987]
Resolving a URL is the process of taking a relative URL and obtaining the absolute URL that it implies.
To resolve a URL to an absolute URL relative to either another absolute URL or an element, the user agent must use the following steps. Resolving a URL can result in an error, in which case the URL is not resolvable.
Let url be the URL being resolved.
Let encoding be determined as follows:
Document, and the URL character
encoding is the document's character encoding.If encoding is a UTF-16 encoding, then change the value of encoding to UTF-8.
If the algorithm was invoked with an absolute URL to use as the base URL, let base be that absolute URL.
Otherwise, let base be the base URI of
the element, as defined by the XML Base specification, with
the base URI of the document entity being defined as the
document base URL of the Document that
owns the element. [XMLBASE]
For the purposes of the XML Base specification, user agents
must act as if all Document objects represented XML
documents.
It is possible for xml:base attributes to be present
even in HTML fragments, as such attributes can be added
dynamically using script. (Such scripts would not be conforming,
however, as xml:base attributes
are not allowed in HTML documents.)
The document base URL of a Document
object is the absolute URL obtained by running these
substeps:
Let fallback base url be the document's address.
If fallback base url is
about:blank, and the Document's
browsing context has a creator browsing
context, then let fallback base url
be the document base URL of the creator
Document instead.
If the Document is an
iframe srcdoc document, then
let fallback base url be the document
base URL of the Document's browsing
context's browsing context container's
Document instead.
If there is no base element that has an href attribute, then the
document base URL is fallback base
url; abort these steps. Otherwise, let url be the value of the href attribute of the first such
element.
Resolve url relative to fallback base
url (thus, the base href attribute isn't affected by
xml:base attributes).
The document base URL is the result of the previous step if it was successful; otherwise it is fallback base url.
Parse url into its component parts.
If parsing url resulted in a <host> component, then replace the matching substring of url with the string that results from expanding any sequences of percent-encoded octets in that component that are valid UTF-8 sequences into Unicode characters as defined by UTF-8.
If any percent-encoded octets in that component are not valid UTF-8 sequences (e.g. sequences of percent-encoded octets that expand to surrogate code points), then return an error and abort these steps.
Apply the IDNA ToASCII algorithm to the matching substring, with both the AllowUnassigned and UseSTD3ASCIIRules flags set. Replace the matching substring with the result of the ToASCII algorithm.
If ToASCII fails to convert one of the components of the string, e.g. because it is too long or because it contains invalid characters, then return an error and abort these steps. [RFC3490]
If parsing url resulted in a <path> component, then replace the matching substring of url with the string that results from applying the following steps to each character other than U+0025 PERCENT SIGN (%) that doesn't match the original <path> production defined in RFC 3986:
For instance if url was "//example.com/a^b☺c%FFd%z/?e", then the
<path> component's substring
would be "/a^b☺c%FFd%z/" and the two
characters that would have to be escaped would be "^" and "☺". The
result after this step was applied would therefore be that url now had the value "//example.com/a%5Eb%E2%98%BAc%FFd%z/?e".
If parsing url resulted in a <query> component, then replace the matching substring of url with the string that results from applying the following steps to each character other than U+0025 PERCENT SIGN (%) that doesn't match the original <query> production defined in RFC 3986:
Apply the algorithm described in RFC 3986 section 5.2 Relative Resolution, using url as the potentially relative URI reference (R), and base as the base URI (Base). [RFC3986]
Apply any relevant conformance criteria of RFC 3986 and RFC 3987, returning an error and aborting these steps if appropriate. [RFC3986] [RFC3987]
For instance, if an absolute URI that would be
returned by the above algorithm violates the restrictions specific
to its scheme, e.g. a data: URI using the
"//" server-based naming authority syntax,
then user agents are to treat this as an error instead.
Let result be the target URI (T) returned by the Relative Resolution algorithm.
If result uses a scheme with a server-based naming authority, replace all U+005C REVERSE SOLIDUS (\) characters in result with U+002F SOLIDUS (/) characters.
Return result.
Some of the steps in these rules, for example the processing of U+005C REVERSE SOLIDUS (\) characters, are a willful violation of RFC 3986 and RFC 3987, motivated by a desire to handle legacy content. [RFC3986] [RFC3987]
A URL is an absolute URL if resolving it results in the same output regardless of what it is resolved relative to, and that output is not a failure.
An absolute URL is a hierarchical URL if, when resolved and then parsed, there is a character immediately after the <scheme> component and it is a U+002F SOLIDUS character (/).
An absolute URL is an authority-based URL if, when resolved and then parsed, there are two characters immediately after the <scheme> component and they are both U+002F SOLIDUS characters (//).
To fragment-escape a string input, a user agent must run the following steps:
Let input be the string to be escaped.
Let position point at the first character of input.
Let output be an empty string.
Loop: If position is past the end of input, then jump to the step labeled end.
If the character in input pointed to by position is in the range U+0000 to U+0020 or is one of the following characters:
...then append the percent-encoded form of the character to output. [RFC3986]
Otherwise, append the character itself to output.
This escapes any ASCII characters that are not valid in the URI <fragment> production without being escaped.
Advance position to the next character in input.
Return to the step labeled loop.
End: Return output.
When an xml:base attribute
changes, the attribute's element, and all descendant elements, are
affected by a base URL change.
When a document's document base URL changes, all elements in that document are affected by a base URL change.
The following are base URL change steps, which run when an element is affected by a base URL change (as defined by the DOM Core specification):
If the absolute URL identified by the hyperlink is
being shown to the user, or if any data derived from that URL is
affecting the display, then the href attribute should be re-resolved relative to the element
and the UI updated appropriately.
For example, the CSS :link/:visited pseudo-classes might have
been affected.
If the hyperlink has a ping attribute and its absolute URL(s) are being shown to the
user, then the ping
attribute's tokens should be re-resolved relative to the element and the UI updated
appropriately.
q, blockquote,
ins, or del element with a cite attributeIf the absolute URL identified by the cite attribute is being shown to the user, or if
any data derived from that URL is affecting the display, then the
URL should be re-resolved relative to the element and the UI updated
appropriately.
The element is not directly affected.
For instance, changing the base URL doesn't
affect the image displayed by img elements, although
subsequent accesses of the src
IDL attribute from script will return a new absolute
URL that might no longer correspond to the image being
shown.
An interface that has a complement of URL decomposition IDL attributes has seven attributes with the following definitions:
attribute DOMString protocol; attribute DOMString host; attribute DOMString hostname; attribute DOMString port; attribute DOMString pathname; attribute DOMString search; attribute DOMString hash;
protocol [ = value ]Returns the current scheme of the underlying URL.
Can be set, to change the underlying URL's scheme.
host [ = value ]Returns the current host and port (if it's not the default port) in the underlying URL.
Can be set, to change the underlying URL's host and port.
The host and the port are separated by a colon. The port part, if omitted, will be assumed to be the current scheme's default port.
hostname [ = value ]Returns the current host in the underlying URL.
Can be set, to change the underlying URL's host.
port [ = value ]Returns the current port in the underlying URL.
Can be set, to change the underlying URL's port.
pathname [ = value ]Returns the current path in the underlying URL.
Can be set, to change the underlying URL's path.
search [ = value ]Returns the current query component in the underlying URL.
Can be set, to change the underlying URL's query component.
hash [ = value ]Returns the current fragment identifier in the underlying URL.
Can be set, to change the underlying URL's fragment identifier.
The attributes defined to be URL decomposition IDL attributes must act as described for the attributes with the same corresponding names in this section.
In addition, an interface with a complement of URL decomposition IDL attributes defines an input, which is a URL that the attributes act on, and a common setter action, which is a set of steps invoked when any of the attributes' setters are invoked.
The seven URL decomposition IDL attributes have similar requirements.
On getting, if the input is an absolute URL that fulfills the condition given in the "getter condition" column corresponding to the attribute in the table below, the user agent must return the part of the input URL given in the "component" column, with any prefixes specified in the "prefix" column appropriately added to the start of the string and any suffixes specified in the "suffix" column appropriately added to the end of the string. Otherwise, the attribute must return the empty string.
On setting, the new value must first be mutated as described by the "setter preprocessor" column, then mutated by %-escaping any characters in the new value that are not valid in the relevant component as given by the "component" column. Then, if the input is an absolute URL and the resulting new value fulfills the condition given in the "setter condition" column, the user agent must make a new string output by replacing the component of the URL given by the "component" column in the input URL with the new value; otherwise, the user agent must let output be equal to the input. Finally, the user agent must invoke the common setter action with the value of output.
When replacing a component in the URL, if the component is part of an optional group in the URL syntax consisting of a character followed by the component, the component (including its prefix character) must be included even if the new value is the empty string.
The previous paragraph applies in particular to the
":" before a <port> component, the "?" before a <query> component, and the "#" before a <fragment> component.
For the purposes of the above definitions, URLs must be parsed using the URL parsing rules defined in this specification.
| Attribute | Component | Getter Condition | Prefix | Suffix | Setter Preprocessor | Setter Condition |
|---|---|---|---|---|---|---|
protocol
| <scheme> | — | — | U+003A COLON (:) | Remove all trailing U+003A COLON characters (:) | The new value is not the empty string |
host
| <hostport> | input is an authority-based URL | — | — | — | The new value is not the empty string and input is an authority-based URL |
hostname
| <host> | input is an authority-based URL | — | — | Remove all leading U+002F SOLIDUS characters (/) | The new value is not the empty string and input is an authority-based URL |
port
| <port> | input is an authority-based URL, and contained a <port> component (possibly an empty one) | — | — | Remove all characters in the new value from the first that is not in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), if any. Remove any leading U+0030 DIGIT ZERO characters (0) in the new value. If the resulting string is empty, set it to a single U+0030 DIGIT ZERO character (0). | input is an authority-based URL, and the new value, when interpreted as a base-ten integer, is less than or equal to 65535 |
pathname
| <path> | input is a hierarchical URL | — | — | If it has no leading U+002F SOLIDUS character (/), prepend a U+002F SOLIDUS character (/) to the new value | input is hierarchical |
search
| <query> | input is a hierarchical URL, and contained a <query> component (possibly an empty one) | U+003F QUESTION MARK (?) | — | Remove one leading U+003F QUESTION MARK character (?), if any | input is a hierarchical URL |
hash
| <fragment> | input contained a non-empty <fragment> component | U+0023 NUMBER SIGN (#) | — | Remove one leading U+0023 NUMBER SIGN character (#), if any | — |
The table below demonstrates how the getter condition for search results in different results
depending on the exact original syntax of the URL:
| Input URL | search value
| Explanation |
|---|---|---|
http://example.com/
| empty string | No <query> component in input URL. |
http://example.com/?
| ?
| There is a <query> component, but it is empty. The question mark in the resulting value is the prefix. |
http://example.com/?test
| ?test
| The <query> component has the value "test".
|
http://example.com/?test#
| ?test
| The (empty) <fragment> component is not part of the <query> component. |
The following table is similar; it provides a list of what each of the URL decomposition IDL attributes returns for a given input URL.
| Input | protocol
| host
| hostname
| port
| pathname
| search
| hash
|
|---|---|---|---|---|---|---|---|
http://example.com/carrot#question%3f
| http:
| example.com
| example.com
| (empty string) | /carrot
| (empty string) | #question%3f
|
https://www.example.com:4443?
| https:
| www.example.com:4443
| www.example.com
| 4443
| /
| ?
| (empty string) |
When a user agent is to fetch a resource or URL, optionally from an origin origin, and optionally with a synchronous flag, a manual redirect flag, a force same-origin flag, and/or a block cookies flag, the following steps must be run. (When a URL is to be fetched, the URL identifies a resource to be obtained.)
Let document be the appropriate
Document as given by the following list:
Document.While document is an
iframe srcdoc
document, let document be document's browsing context's
browsing context container's Document
instead.
Generate the address of the resource from which Request-URIs
are obtained as required by HTTP for the Referer (sic) header from the
document's current address of document.
[HTTP]
Remove any <fragment> component from the generated address of the resource from which Request-URIs are obtained.
If the origin of the appropriate
Document is not a scheme/host/port tuple, then the
Referer (sic) header must be
omitted, regardless of its value.
If the algorithm was not invoked with the synchronous flag, perform the remaining steps asynchronously.
This is the main step.
If the resource is identified by an absolute URL,
and the resource is to be obtained using an idempotent action
(such as an HTTP GET or
equivalent), and it is already being downloaded for other
reasons (e.g. another invocation of this algorithm), and this
request would be identical to the previous one (e.g. same Accept and Origin headers), and the user agent is
configured such that it is to reuse the data from the existing
download instead of initiating a new one, then use the results of
the existing download instead of starting a new one.
Otherwise, if the resource is identified by an absolute
URL with a scheme that does not define a mechanism to
obtain the resource (e.g. it is a mailto:
URL) or that the user agent does not support, then act as if the
resource was an HTTP 204 No Content response with no other
metadata.
Otherwise, if the resource is identified by the
URL about:blank, then the
resource is immediately available and consists of the empty
string, with no metadata.
Otherwise, at a time convenient to the user and the user agent,
download (or otherwise obtain) the resource, applying the
semantics of the relevant specifications (e.g. performing an HTTP
GET or POST operation, or reading the file from disk, dereferencing javascript: URLs,
etc).
For the purposes of the Referer (sic) header, use the
address of the resource from which Request-URIs are
obtained generated in the earlier step.
For the purposes of the Origin
header, if the fetching algorithm was
explicitly initiated from an origin, then the origin that initiated the HTTP request is origin. Otherwise, this is a request from
a "privacy-sensitive" context. [ORIGIN]
If the algorithm was not invoked with the block cookies flag, and there are cookies to be set, then the user agent must run the following substeps:
Wait until ownership of the storage mutex can be taken by this instance of the fetching algorithm.
Take ownership of the storage mutex.
Update the cookies. [COOKIES]
Release the storage mutex so that it is once again free.
If the fetched resource is an HTTP redirect or equivalent, then:
Abort these steps and return failure from this algorithm, as if the remote host could not be contacted.
Continue, using the fetched resource (the redirect) as the result of the algorithm. If the calling algorithm subsequently requires the user agent to transparently follow the redirect, then the user agent must resume this algorithm from the main step, but using the target of the redirect as the resource to fetch, rather than the original resource.
First, apply any relevant requirements for redirects (such as showing any appropriate prompts). Then, redo main step, but using the target of the redirect as the resource to fetch, rather than the original resource.
The HTTP specification requires that 301, 302, and 307 redirects, when applied to methods other than the safe methods, not be followed without user confirmation. That would be an appropriate prompt for the purposes of the requirement in the paragraph above. [HTTP]
If the algorithm was not invoked with the synchronous flag: When the resource is available, or if there is an error of some description, queue a task that uses the resource as appropriate. If the resource can be processed incrementally, as, for instance, with a progressively interlaced JPEG or an HTML file, additional tasks may be queued to process the data as it is downloaded. The task source for these tasks is the networking task source.
Otherwise, return the resource or error information to the calling algorithm.
If the user agent can determine the actual length of the resource
being fetched for an instance of this
algorithm, and if that length is finite, then that length is the
file's size. Otherwise, the
subject of the algorithm (that is, the resource being fetched) has
no known size. (For
example, the HTTP Content-Length header might
provide this information.)
The user agent must also keep track of the number of bytes downloaded for each instance of this algorithm. This number must exclude any out-of-band metadata, such as HTTP headers.
The application cache processing model introduces some changes to the networking model to handle the returning of cached resources.
The navigation processing model handles redirects itself, overriding the redirection handling that would be done by the fetching algorithm.
Whether the type sniffing rules apply to the fetched resource depends on the algorithm that invokes the rules — they are not always applicable.
User agents can implement a variety of transfer protocols, but this specification mostly defines behavior in terms of HTTP. [HTTP]
The HTTP GET method is equivalent to the default retrieval action of the protocol. For example, RETR in FTP. Such actions are idempotent and safe, in HTTP terms.
The HTTP response codes are equivalent to statuses in other protocols that have the same basic meanings. For example, a "file not found" error is equivalent to a 404 code, a server error is equivalent to a 5xx code, and so on.
The HTTP headers are equivalent to fields in other protocols that have the same basic meaning. For example, the HTTP authentication headers are equivalent to the authentication aspects of the FTP protocol.
Anything in this specification that refers to HTTP also applies
to HTTP-over-TLS, as represented by URLs
representing the https scheme.
User agents should report certificate errors to the user and must either refuse to download resources sent with erroneous certificates or must act as if such resources were in fact served with no encryption.
User agents should warn the user that there is a potential problem whenever the user visits a page that the user has previously visited, if the page uses less secure encryption on the second visit.
Not doing so can result in users not noticing man-in-the-middle attacks.
If a user connects to a server with a self-signed certificate, the user agent could allow the connection but just act as if there had been no encryption. If the user agent instead allowed the user to override the problem and then displayed the page as if it was fully and safely encrypted, the user could be easily tricked into accepting man-in-the-middle connections.
If a user connects to a server with full encryption, but the page then refers to an external resource that has an expired certificate, then the user agent will act as if the resource was unavailable, possibly also reporting the problem to the user. If the user agent instead allowed the resource to be used, then an attacker could just look for "secure" sites that used resources from a different host and only apply man-in-the-middle attacks to that host, for example taking over scripts in the page.
If a user bookmarks a site that uses a CA-signed certificate, and then later revisits that site directly but the site has started using a self-signed certificate, the user agent could warn the user that a man-in-the-middle attack is likely underway, instead of simply acting as if the page was not encrypted.
The Content-Type metadata of a resource must be obtained and interpreted in a manner consistent with the requirements of the Media Type Sniffing specification. [MIMESNIFF]
The sniffed type of a resource must be found in a manner consistent with the requirements given in the Media Type Sniffing specification for finding the sniffed-type of the relevant sequence of octets. [MIMESNIFF]
The rules for sniffing images specifically and the rules for distinguishing if a resource is text or binary are also defined in the Media Type Sniffing specification. Both sets of rules return a MIME type as their result. [MIMESNIFF]
It is imperative that the rules in the Media Type Sniffing specification be followed exactly. When a user agent uses different heuristics for content type detection than the server expects, security problems can occur. For more details, see the Media Type Sniffing specification. [MIMESNIFF]
meta elementsThe algorithm for extracting an encoding from a
meta element, given a string s, is as follows. It either returns an encoding or
nothing.
Let position be a pointer into s, initially pointing at the start of the string.
Loop: Find the first seven characters in s after position that are an
ASCII case-insensitive match for the word "charset". If no such match is found, return nothing
and abort these steps.
Skip any U+0009, U+000A, U+000C, U+000D, or U+0020
characters that immediately follow the word "charset" (there might not be any).
If the next character is not a U+003D EQUALS SIGN (=), then move position to point just before that next character, and jump back to the step labeled loop.
Skip any U+0009, U+000A, U+000C, U+000D, or U+0020 characters that immediately follow the equals sign (there might not be any).
Process the next character as follows:
This algorithm is distinct from those in the HTTP specification (for example, HTTP doesn't allow the use of single quotes and requires supporting a backslash-escape mechanism that is not supported by this algorithm). While the algorithm is used in contexts that, historically, were related to HTTP, the syntax as supported by implementations diverged some time ago. [HTTP]
A CORS settings attribute is an enumerated attribute. The following table lists the keywords and states for the attribute — the keywords in the left column map to the states in the cell in the second column on the same row as the keyword.
| Keyword | State | Brief description |
|---|---|---|
anonymous
| Anonymous | Cross-origin CORS requests for the element will not have the credentials flag set. |
use-credentials
| Use Credentials | Cross-origin CORS requests for the element will have the credentials flag set. |
The empty string is also a valid keyword, and maps to the Anonymous state. The attribute's invalid value default is the Anonymous state. The missing value default, used when the attribute is omitted, is the No CORS state.
When the user agent is required to perform a potentially CORS-enabled fetch of an absolute URL URL, with a mode mode that is either "No CORS", "Anonymous", or "Use Credentials", an origin origin, and a default origin behaviour default which is either "taint" or "fail", it must run the first applicable set of steps from the following list. The default origin behaviour is only used if mode is "No CORS". This algorithm wraps the fetch algorithm above, and labels the obtained resource as either CORS-same-origin or CORS-cross-origin, or blocks the resource entirely.
Run these substeps:
Let result have no value.
Fetch URL, with the manual redirect flag set.
Loop: Wait for the fetch algorithm to know if the result is a redirect or not.
If the result of the fetch is a redirect, and the mode is not "No CORS", and the origin of the target URL of the redirect is not the same origin as origin, then set URL to the the target URL of the redirect and return to the top of the potentially CORS-enabled fetch algorithm (this time, the branch below will be taken, resulting in the fetch being done in a CORS-aware fashion).
Otherwise, if the result of the fetch is a redirect, and result still has no value, then apply the CORS redirect steps, with the CORS credential flag set to true and the request rules being that the user agent continue to follow these steps. If this resumes the fetch algorithm, then return to the loop step. If it failed due to a failure of the CORS resource sharing check, then: if default is fail, then set result to fail and jump to the step labeled end; if default is taint, then set result to taint, transparently follow the redirect but with the manual redirect flag no longer set, and jump to the step labeled end below.
Otherwise, if the resource is not available (e.g. there is a network error) then set result to the same value as default, and jump to the step labeled end below.
Otherwise, perform a resource sharing check, with the CORS credential flag set to true. If it returns fail, then set result to the same value as default; otherwise, set result to success. Then, jump to the step labeled end below.
End: Jump to the appropriate step from the following list:
Discard all fetched data and prevent any tasks from the fetch algorithm from being queued. For the purposes of the calling algorithm, the user agent must act as if there was a fatal network error and no resource was obtained. The user agent may report a cross-origin resource access failure to the user (e.g. in a debugging console).
The tasks from the fetch algorithm are queued normally, but for the purposes of the calling algorithm, the obtained resource is CORS-cross-origin. The user agent may report a cross-origin resource access failure to the user (e.g. in a debugging console).
The tasks from the fetch algorithm are queued normally, and for the purposes of the calling algorithm, the obtained resource is CORS-same-origin.
Run these steps:
Perform a cross-origin request with the request URL set to URL, the source origin set to origin, and the credentials flag set to true if mode is "Use Credentials" and set to false otherwise. [CORS]
Wait for the CORS cross-origin request status to have a value.
Jump to the appropriate step from the following list:
Discard all fetched data and prevent any tasks from the fetch algorithm from being queued. For the purposes of the calling algorithm, the user agent must act as if there was a fatal network error and no resource was obtained. If a CORS resource sharing check failed, the user agent may report a cross-origin resource access failure to the user (e.g. in a debugging console).
The tasks from the fetch algorithm are queued normally, and for the purposes of the calling algorithm, the obtained resource is CORS-same-origin.
Some IDL attributes are defined to reflect a particular content attribute. This means that on getting, the IDL attribute returns the current value of the content attribute, and on setting, the IDL attribute changes the value of the content attribute to the given value.
In general, on getting, if the content attribute is not present, the IDL attribute must act as if the content attribute's value is the empty string; and on setting, if the content attribute is not present, it must first be added.
If a reflecting IDL attribute is a DOMString
attribute whose content attribute is defined to contain a
URL, then on getting, the IDL attribute must resolve the value of the content
attribute relative to the element and return the resulting
absolute URL if that was successful, or the empty
string otherwise; and on setting, must set the content attribute to
the specified literal value. If the content attribute is absent, the
IDL attribute must return the default value, if the content
attribute has one, or else the empty string.
If a reflecting IDL attribute is a DOMString
attribute whose content attribute is defined to contain one or more
URLs, then on getting, the IDL attribute
must split the content
attribute on spaces and return the concatenation of resolving each token URL to an
absolute URL relative to the element, with a single
U+0020 SPACE character between each URL, ignoring any tokens that
did not resolve successfully. If the content attribute is absent,
the IDL attribute must return the default value, if the content
attribute has one, or else the empty string. On setting, the IDL
attribute must set the content attribute to the specified literal
value.
If a reflecting IDL attribute is a DOMString
attribute whose content attribute is an enumerated
attribute, and the IDL attribute is limited to only
known values, then, on getting, the IDL attribute must return
the conforming value associated with the state the attribute is in
(in its canonical case), or the empty string if the attribute is in
a state that has no associated keyword value; and on setting, the
content attribute must be set to the specified new value.
If a reflecting IDL attribute is a DOMString
attribute but doesn't fall into any of the above categories, then
the getting and setting must be done in a transparent,
case-preserving manner.
If a reflecting IDL attribute is a boolean
attribute, then on getting the IDL attribute must return true if the
content attribute is set, and false if it is absent. On setting, the
content attribute must be removed if the IDL attribute is set to
false, and must be set to the empty string if the IDL attribute is
set to true. (This corresponds to the rules for boolean content attributes.)
If a reflecting IDL attribute has a signed integer type
(long) then, on getting, the content attribute must be
parsed according to the rules for parsing signed integers, and if that is
successful, and the value is in the range of the IDL attribute's
type, the resulting value must be returned. If, on the other hand,
it fails or returns an out of range value, or if the attribute is
absent, then the default value must be returned instead, or 0 if
there is no default value. On setting, the given value must be
converted to the shortest possible string representing the number as
a valid integer and then that string must be used as
the new content attribute value.
If a reflecting IDL attribute has a signed integer type
(long) that is limited to only non-negative
numbers then, on getting, the content attribute must be parsed
according to the rules for parsing non-negative
integers, and if that is successful, and the value is in the
range of the IDL attribute's type, the resulting value must be
returned. If, on the other hand, it fails or returns an out of range
value, or if the attribute is absent, the default value must be
returned instead, or −1 if there is no default value. On
setting, if the value is negative, the user agent must throw an
IndexSizeError exception. Otherwise, the given value
must be converted to the shortest possible string representing the
number as a valid non-negative integer and then that
string must be used as the new content attribute value.
If a reflecting IDL attribute has an unsigned integer
type (unsigned long) then, on getting, the content
attribute must be parsed according to the rules for parsing
non-negative integers, and if that is successful, and the
value is in the range 0 to 2147483647 inclusive, the resulting value
must be returned. If, on the other hand, it fails or returns an out
of range value, or if the attribute is absent, the default value
must be returned instead, or 0 if there is no default value. On
setting, the given value must be converted to the shortest possible
string representing the number as a valid non-negative
integer and then that string must be used as the new content
attribute value.
If a reflecting IDL attribute has an unsigned integer type
(unsigned long) that is limited to only
non-negative numbers greater than zero, then the behavior is
similar to the previous case, but zero is not allowed. On getting,
the content attribute must first be parsed according to the
rules for parsing non-negative integers, and if that is
successful, and the value is in the range 1 to 2147483647 inclusive,
the resulting value must be returned. If, on the other hand, it
fails or returns an out of range value, or if the attribute is
absent, the default value must be returned instead, or 1 if there is
no default value. On setting, if the value is zero, the user agent
must throw an IndexSizeError exception. Otherwise, the
given value must be converted to the shortest possible string
representing the number as a valid non-negative integer
and then that string must be used as the new content attribute
value.
If a reflecting IDL attribute has a floating point number type
(double), then, on getting, the content attribute must
be parsed according to the rules for parsing floating point
number values, and if that is successful, the resulting value
must be returned. If, on the other hand, it fails, or if the
attribute is absent, the default value must be returned instead, or
0.0 if there is no default value. On setting, the given value must
be converted to the best representation of the number as a
floating point number and then that string must be used as
the new content attribute value.
If a reflecting IDL attribute has a floating point number type
(double) that is limited to numbers greater than
zero, then the behavior is similar to the previous case, but
zero and negative values are not allowed. On getting, the content
attribute must be parsed according to the rules for parsing
floating point number values, and if that is successful and
the value is greater than 0.0, the resulting value must be returned.
If, on the other hand, it fails or returns an out of range value, or
if the attribute is absent, the default value must be returned
instead, or 0.0 if there is no default value. On setting, if the
value is less than or equal to zero, then the value must be ignored.
Otherwise, the given value must be converted to the best
representation of the number as a floating point number and
then that string must be used as the new content attribute
value.
The values Infinity and Not-a-Number (NaN) values throw an exception on setting, as defined earlier.
If a reflecting IDL attribute has the type
DOMTokenList or DOMSettableTokenList, then
on getting it must return a DOMTokenList or
DOMSettableTokenList object (as appropriate) whose
underlying string is the element's corresponding content attribute.
When the object mutates its underlying string, the content attribute
must itself be immediately mutated. When the attribute is absent,
then the string represented by the object is the empty string; when
the object mutates this empty string, the user agent must add the
corresponding content attribute, with its value set to the value it
would have been set to after mutating the empty string. The same
DOMTokenList or DOMSettableTokenList
object must be returned every time for each attribute.
If an element with no attributes has its element.classList.remove()
method invoked, the underlying string won't be changed, since the
result of removing any token from the empty string is still the
empty string. However, if the element.classList.add() method is
then invoked, a class attribute
will be added to the element with the value of the token to be
added.
If a reflecting IDL attribute has the type
HTMLElement, or an interface that descends from
HTMLElement, then, on getting, it must run the
following algorithm (stopping at the first point where a value is
returned):
document.getElementById() method
would find when called on the content attribute's document if it
were passed as its argument the current value of the corresponding
content attribute.On setting, if the given element has an id attribute, and has the same home
subtree as the element of the attribute being set, and the
given element is the first element in that home subtree
whose ID is the value of that id attribute, then the content attribute must
be set to the value of that id
attribute. Otherwise, the content attribute must be set to the empty
string.
The HTMLAllCollection,
HTMLFormControlsCollection,
HTMLOptionsCollection,
and HTMLPropertiesCollection
interfaces are collections derived from the
HTMLCollection interface.
The HTMLAllCollection interface represents a generic
collection of elements just like
HTMLCollection, with the exception that its namedItem() method
returns an HTMLAllCollection object when there are
multiple matching elements, and that its item() method can be used
as a synonym for its namedItem()
method.
interface HTMLAllCollection : HTMLCollection { // inherits length and item(unsigned long index) object? item(DOMString name); legacycaller getter object? namedItem(DOMString name); // overrides inherited namedItem() HTMLAllCollection tags(DOMString tagName); };
lengthReturns the number of elements in the collection.
item(index)Returns the item with index index from the collection. The items are sorted in tree order.
item(name)item(name)namedItem(name)namedItem(name)Returns the item with ID or name name from the collection.
If there are multiple matching items, then an HTMLAllCollection object containing all those elements is returned.
Only a, applet, area,
embed, form, frame,
frameset, iframe, img, and
object elements can have a name for the purpose of
this method; their name is given by the value of their name attribute.
tags(tagName)Returns a collection that is a filtered view of the current collection, containing only elements with the given tag name.
The object's supported property indices and
supported property names are as defined for
HTMLCollection objects.
The item(name) and namedItem(name) methods must act according to the
following algorithm:
Let collection be an
HTMLAllCollection object rooted at the same node as
the HTMLAllCollection object on which the method was
invoked, whose filter matches only elements that already
match the filter of the HTMLAllCollection object on
which the method was invoked and that are either:
a, applet, area,
embed, form, frame,
frameset, iframe, img, or
object elements with a name
attribute equal to name, or,The tags(tagName) method must return an
HTMLAllCollection rooted at the same node as the
HTMLAllCollection object on which the method was
invoked, whose filter matches only HTML elements whose
local name is the tagName argument and that
already match the filter of the HTMLAllCollection
object on which the method was invoked. In HTML
documents, the argument must first be converted to
ASCII lowercase.
The HTMLFormControlsCollection interface represents
a collection of listed elements in form
and fieldset elements.
interface HTMLFormControlsCollection : HTMLCollection { // inherits length and item() legacycaller getter object? namedItem(DOMString name); // overrides inherited namedItem() }; interface RadioNodeList : NodeList { attribute DOMString value; };
lengthReturns the number of elements in the collection.
item(index)Returns the item with index index from the collection. The items are sorted in tree order.
namedItem(name)namedItem(name)Returns the item with ID or name name from the collection.
If there are multiple matching items, then a RadioNodeList object containing all those elements is returned.
Returns the value of the first checked radio button represented by the object.
Can be set, to check the first radio button with the given value represented by the object.
The object's supported property indices are as
defined for HTMLCollection objects.
The supported property names consist of the values
of all the id and name attributes of all the elements
represented by the collection.
The namedItem(name) method must act according to the
following algorithm:
id attribute or a name attribute equal to name, then return that node and stop the
algorithm.id attribute or a name attribute equal to name, then return null and stop the algorithm.RadioNodeList object
representing a live view of the
HTMLFormControlsCollection object, further filtered so
that the only nodes in the RadioNodeList object are
those that have either an id attribute
or a name attribute equal to name. The nodes in the RadioNodeList
object must be sorted in tree order.RadioNodeList object.Members of the RadioNodeList interface inherited
from the NodeList interface must behave as they would
on a NodeList object.
The value
IDL attribute on the RadioNodeList object, on getting,
must return the value returned by running the following steps:
Let element be the first element in
tree order represented by the
RadioNodeList object that is an input
element whose type attribute
is in the Radio Button
state and whose checkedness
is true. Otherwise, let it be null.
If element is null, or if it is an
element with no value
attribute, return the empty string.
Otherwise, return the value of element's
value attribute.
On setting, the value IDL attribute must run
the following steps:
Let element be the first element in
tree order represented by the
RadioNodeList object that is an input
element whose type attribute
is in the Radio Button
state and whose value content
attribute is present and equal to the new value, if any. Otherwise,
let it be null.
If element is not null, then set its checkedness to true.
The HTMLOptionsCollection interface represents a
list of option elements. It is always rooted on a
select element and has attributes and methods that
manipulate that element's descendants.
interface HTMLOptionsCollection : HTMLCollection { // inherits item() attribute unsigned long length; // overrides inherited length legacycaller getter object? namedItem(DOMString name); // overrides inherited namedItem() setter creator void (unsigned long index, HTMLOptionElement option); void add(HTMLOptionElement element, optional HTMLElement? before); void add(HTMLOptGroupElement element, optional HTMLElement? before); void add(HTMLOptionElement element, long before); void add(HTMLOptGroupElement element, long before); void remove(long index); attribute long selectedIndex; };
length [ = value ]Returns the number of elements in the collection.
When set to a smaller number, truncates the number of option elements in the corresponding container.
When set to a greater number, adds new blank option elements to that container.
item(index)Returns the item with index index from the collection. The items are sorted in tree order.
namedItem(name)namedItem(name)Returns the item with ID or name name from the collection.
If there are multiple matching items, then a NodeList object containing all those elements is returned.
add(element [, before ] )Inserts element before the node given by before.
The before argument can be a number, in which case element is inserted before the item with that number, or an element from the collection, in which case element is inserted before that element.
If before is omitted, null, or a number out of range, then element will be added at the end of the list.
This method will throw a HierarchyRequestError
exception if element is an ancestor of the
element into which it is to be inserted.
selectedIndex [ = value ]Returns the index of the first selected item, if any, or −1 if there is no selected item.
Can be set, to change the selection.
The object's supported property indices are as
defined for HTMLCollection objects.
On getting, the length
attribute must return the number of nodes represented by the
collection.
On setting, the behavior depends on whether the new value is
equal to, greater than, or less than the number of nodes
represented by the collection at that time. If the
number is the same, then setting the attribute must do nothing. If
the new value is greater, then n new
option elements with no attributes and no child nodes
must be appended to the select element on which the
HTMLOptionsCollection is rooted, where n is the difference between the two numbers (new
value minus old value). Mutation events must be fired as if a
DocumentFragment containing the new option
elements had been inserted. If the new value is lower, then the
last n nodes in the collection must be removed
from their parent nodes, where n is the
difference between the two numbers (old value minus new value).
Setting length never removes
or adds any optgroup elements, and never adds new
children to existing optgroup elements (though it can
remove children from them).
The supported property names consist of the values
of all the id and name attributes of all the elements
represented by the collection.
The namedItem(name) method must act according to the
following algorithm:
id attribute or a name attribute equal to name, then return that node and stop the
algorithm.id attribute or a name attribute equal to name, then return null and stop the algorithm.NodeList object
representing a live view of the
HTMLOptionsCollection object, further filtered so that
the only nodes in the NodeList object are those that
have either an id attribute or a name attribute equal to name. The nodes in the NodeList object
must be sorted in tree order.NodeList object.When the user agent is to set the value of a new indexed property for a given property index index to a new value value, it must run the following algorithm:
Let length be the number of nodes represented by the collection.
Let n be index minus length.
If n is greater than zero, then append
n-1 new
option elements with no attributes and no child nodes
to the select element on which the
HTMLOptionsCollection is rooted. Mutation events must
be fired as if a DocumentFragment containing the new
option elements had been inserted.
If n is greater than or equal to zero,
append value to the select
element. Otherwise, replace the indexth element
in the collection by value.
The add(element, before)
method must act according to the following algorithm:
If element is an ancestor of the
select element on which the
HTMLOptionsCollection is rooted, then throw a
HierarchyRequestError exception.
If before is an element, but that
element isn't a descendant of the select element on
which the HTMLOptionsCollection is rooted, then throw
a NotFoundError exception.
If element and before are the same element, then return and abort these steps.
If before is a node, then let reference be that node. Otherwise, if before is an integer, and there is a beforeth node in the collection, let reference be that node. Otherwise, let reference be null.
If reference is not null, let parent be the parent node of reference. Otherwise, let parent
be the select element on which the
HTMLOptionsCollection is rooted.
Act as if the DOM Core insertBefore() method was
invoked on the parent node, with element as the first argument and reference as the second argument.
The remove(index) method must act according to
the following algorithm:
If the number of nodes represented by the collection is zero, abort these steps.
If index is not a number greater than or equal to 0 and less than the number of nodes represented by the collection, let element be the first element in the collection. Otherwise, let element be the indexth element in the collection.
Remove element from its parent node.
The selectedIndex
IDL attribute must act like the identically named attribute on the
select element on which the
HTMLOptionsCollection is rooted
The HTMLPropertiesCollection interface represents a
collection of elements that add
name-value pairs to a particular item in the microdata
model.
interface HTMLPropertiesCollection : HTMLCollection { // inherits length and item() legacycaller getter PropertyNodeList? namedItem(DOMString name); // overrides inherited namedItem() readonly attribute DOMStringList names; }; typedef sequence<any> PropertyValueArray; interface PropertyNodeList : NodeList { PropertyValueArray getValues(); };
lengthReturns the number of elements in the collection.
item(index)Returns the element with index index from the collection. The items are sorted in tree order.
namedItem(name)Returns a PropertyNodeList object containing any elements that add a property named name.
Returns a PropertyNodeList object containing any elements that add a property named name. The name index has to be one of the values listed in the names list.
namesReturns a DOMStringList with the property names of the elements in the collection.
getValues()Returns an array of the various values that the relevant elements have.
The object's supported property indices are as
defined for HTMLCollection objects.
The supported property names consist of the property names of all the elements represented by the collection.
The names
attribute must return a live DOMStringList
object giving the property names of all the elements
represented by the collection, listed in tree
order, but with duplicates removed, leaving only the first
occurrence of each name. The same object must be returned each
time.
The namedItem(name) method must return a
PropertyNodeList object representing a
live view of the HTMLPropertiesCollection
object, further filtered so that the only nodes in the
PropertyNodeList object are those that have a property name equal to name. The nodes in the PropertyNodeList
object must be sorted in tree order, and the same
object must be returned each time a particular name is queried.
Members of the PropertyNodeList interface inherited
from the NodeList interface must behave as they would
on a NodeList object.
The getValues
method the PropertyNodeList object must return a newly
constructed array whose values are the values obtained from the
itemValue DOM property of each of
the elements represented by the object, in tree
order.
The DOMStringMap interface represents a set of
name-value pairs. It exposes these using the scripting language's
native mechanisms for property access.
When a DOMStringMap object is instantiated, it is
associated with three algorithms, one for getting the list of
name-value pairs, one for setting names to certain values, and one
for deleting names.
interface DOMStringMap {
getter DOMString (DOMString name);
setter void (DOMString name, DOMString value);
creator void (DOMString name, DOMString value);
deleter void (DOMString name);
};
The supported property names on a
DOMStringMap object at any instant are the names of
each pair returned from the algorithm for getting the list of
name-value pairs at that instant.
To determine the value of
a named property name in a
DOMStringMap, the user agent must return the value
component of the name-value pair whose name component is name in the list returned by the algorithm for
getting the list of name-value pairs.
To set the value of a new or existing named property name to value value, the
algorithm for setting names to certain values must be run, passing
name as the name and the result of converting
value to a DOMString as the
value.
To delete an existing named property name, the algorithm for deleting names must be run, passing name as the name.
The DOMStringMap interface definition
here is only intended for JavaScript environments. Other language
bindings will need to define how DOMStringMap is to be
implemented for those languages.
The dataset attribute on
elements exposes the data-*
attributes on the element.
Given the following fragment and elements with similar constructions:
<img class="tower" id="tower5" data-x="12" data-y="5"
data-ai="robotarget" data-hp="46" data-ability="flames"
src="towers/rocket.png alt="Rocket Tower">
...one could imagine a function splashDamage() that takes some arguments, the first
of which is the element to process:
function splashDamage(node, x, y, damage) {
if (node.classList.contains('tower') && // checking the 'class' attribute
node.dataset.x == x && // reading the 'data-x' attribute
node.dataset.y == y) { // reading the 'data-y' attribute
var hp = parseInt(node.dataset.hp); // reading the 'data-hp' attribute
hp = hp - damage;
if (hp < 0) {
hp = 0;
node.dataset.ai = 'dead'; // setting the 'data-ai' attribute
delete node.dataset.ability; // removing the 'data-ability' attribute
}
node.dataset.hp = hp; // setting the 'data-hp' attribute
}
}
The DOMElementMap interface represents a set of
name-element mappings. It exposes these using the scripting
language's native mechanisms for property access.
When a DOMElementMap object is instantiated, it is
associated with three algorithms, one for getting the list of
name-element mappings, one for mapping a name to a certain element,
and one for deleting mappings by name.
interface DOMElementMap {
getter Element (DOMString name);
setter void (DOMString name, Element value);
creator void (DOMString name, Element value);
deleter void (DOMString name);
};
The supported property names on a
DOMElementMap object at any instant are the names for
each mapping returned from the algorithm for getting the list of
name-element mappings at that instant.
To determine the value
of a named property name in a
DOMElementMap, the user agent must return the element
component of the name-element mapping whose name component is name in the list returned by the algorithm for
getting the list of name-element mappings.
To set the value of a new or existing named property name to value value, the algorithm for mapping a name to a certain element must be run, passing name as the name value as the element.
To delete an existing named property name, the algorithm for deleting mappings must be run, passing name as the name component of the mapping to be deleted.
The DOMElementMap interface definition
here is only intended for JavaScript environments. Other language
bindings will need to define how DOMElementMap is to be
implemented for those languages.
Some objects support being copied and closed in one operation. This is called transferring the object, and is used in particular to transfer ownership of unsharable or expensive resources across worker boundaries.
[NoInterfaceObject]
interface Transferable { };
To transfer a Transferable object to a
new owner, the user agent must run the steps defined for the type of
object in question. The steps will return a new object of the same
type, and will permanently neuter the original
object. (This is an irreversible and non-idempotent operation; once
an object has been transferred, it cannot be transferred, or indeed
used, again.)
The following Transferable types exist:
MessagePort
When a user agent is required to obtain a structured
clone of a value, optionally with a transfer map, it
must run the following algorithm, which either returns a separate
value, or throws an exception. If a transfer map is provided,
it consists of an association list of Transferable
objects to placeholder objects.
Let input be the value being cloned.
Let transfer map be the transfer map passed to the algorithm, if any, or the empty list otherwise.
Let memory be an association list of pairs of objects, initially empty. This is used to handle duplicate references. In each pair of objects, one is called the source object and the other the destination object.
For each mapping in transfer map, add a
mapping from the Transferable object (the source
object) to the placeholder object (the destination object) to memory.
Let output be the value resulting from calling the internal structured cloning algorithm with input as the "input" argument, and memory as the "memory" argument.
Return output.
The internal structured cloning algorithm is always called with two arguments, input and memory, and its behavior is as follows:
If input is the source object of a pair of objects in memory, then return the destination object in that pair of objects and abort these steps.
If input is a primitive value, then return that value and abort these steps.
The input value is an object. Jump to the appropriate step below:
Let output be a newly constructed Boolean object with the same value as input.
Let output be a newly constructed Number object with the same value as input.
Let output be a newly constructed String object with the same value as input.
Date objectLet output be a newly constructed Date object with the same value as input.
RegExp objectLet output be a newly constructed RegExp object with the same pattern and flags as input.
The value of the lastIndex property is not copied.
File objectLet output be a newly constructed File object corresponding to the same underlying data.
Blob objectLet output be a newly constructed Blob object corresponding to the same underlying data.
FileList objectLet output be a newly constructed FileList object containing a list of newly constructed File objects corresponding to the same underlying data as those in input, maintaining their relative order.
Let output be a newly constructed empty
Array object whose length is
equal to the length of input.
This means that the length of sparse arrays is preserved.
Let output be a newly constructed empty Object object.
Error, Function)Throw a DataCloneError exception and abort
the overall structured clone algorithm.
Add a mapping from input (the source object) to output (the destination object) to memory.
If input is an Array object or an Object object, then, for each enumerable property in input, add a new property to output having the same name, and having a value created from invoking the internal structured cloning algorithm recursively with the value of the property as the "input" argument and memory as the "memory" argument. The order of the properties in the input and output objects must be the same, and any properties that involve running script must be processed in that same order. If obtaining the value of the property involved executing script, and that script threw an uncaught exception, then abort the overall structured clone algorithm, with that exception being passed through to the caller.
This does not walk the prototype chain.
Property descriptors, setters, getters, and analogous features are not copied in this process. For example, the property in the input could be marked as read-only, but in the output it would just have the default state (typically read-write, though that could depend on the scripting environment).
Properties of Array objects are not treated any differently than those of other Objects. In particular, this means that non-index properties of arrays are copied as well.
Return output.
This algorithm preserves cycles and preserves the identity of duplicate objects in graphs.
DOM3 Core defines mechanisms for checking for interface support, and for obtaining implementations of interfaces, using feature strings. [DOMCORE]
Authors are strongly discouraged from using these, as they are notoriously unreliable and imprecise. Authors are encouraged to rely on explicit feature testing or the graceful degradation behavior intrinsic to some of the features in this specification.
For historical reasons, user agents should return the true value
when the hasFeature(feature, version)
method of the DOMImplementation interface is invoked
with feature set to either "HTML" or "XHTML" and version set to either "1.0" or
"2.0".
There is an implied strong reference from any IDL attribute that returns a pre-existing object to that object.
For example, the document.location attribute means
that there is a strong reference from a Document
object to its Location object. Similarly, there is
always a strong reference from a Document to any
descendant nodes, and from any node to its owner
Document.
The HTML namespace is: http://www.w3.org/1999/xhtml
The MathML namespace is: http://www.w3.org/1998/Math/MathML
The SVG namespace is: http://www.w3.org/2000/svg
The XLink namespace is: http://www.w3.org/1999/xlink
The XML namespace is: http://www.w3.org/XML/1998/namespace
The XMLNS namespace is: http://www.w3.org/2000/xmlns/
Data mining tools and other user agents that perform operations on content without running scripts, evaluating CSS or XPath expressions, or otherwise exposing the resulting DOM to arbitrary content, may "support namespaces" by just asserting that their DOM node analogues are in certain namespaces, without actually exposing the above strings.
In the HTML syntax, namespace prefixes and namespace declarations do not have the same effect as in XML. For instance, the colon has no special meaning in HTML element names.
Every XML and HTML document in an HTML UA is represented by a
Document object. [DOMCORE]
The document's address is an absolute URL
that is set when the Document is created. The
document's current address is an absolute URL
that can change during the lifetime of the Document,
for example when the user navigates to
a fragment identifier on the
page or when the pushState() method is called
with a new URL. The document's
current address must be set to the document's
address when the Document is created.
Interactive user agents typically expose the document's current address in their user interface.
When a Document is created by a script using the createDocument()
or createHTMLDocument()
APIs, the document's address is the same as the
document's address of the script's document, and
the Document is both ready for post-load
tasks and completely loaded immediately.
Each Document object has a reload override
flag that is originally unset. The flag is set by the document.open() and document.write() methods in certain
situations. When the flag is set, the Document also has
a reload override buffer which is a Unicode string that
is used as the source of the document when it is reloaded.
When the user agent is to perform an overridden reload, it must act as follows:
Let source be the value of the browsing context's active document's reload override buffer.
Navigate the
browsing context to a resource whose source is source, with replacement enabled. When
the navigate algorithm creates a Document
object for this purpose, set that Document's
reload override flag and set its reload override
buffer to source.
The DOM Core specification defines a Document interface, which this specification
extends significantly:
[OverrideBuiltins]
partial interface Document {
// resource metadata management
[PutForwards=href] readonly attribute Location? location;
readonly attribute DOMString URL;
attribute DOMString domain;
readonly attribute DOMString referrer;
attribute DOMString cookie;
readonly attribute DOMString lastModified;
readonly attribute DOMString readyState;
// DOM tree accessors
getter object (DOMString name);
attribute DOMString title;
attribute DOMString dir;
attribute HTMLElement? body;
readonly attribute HTMLHeadElement? head;
readonly attribute HTMLCollection images;
readonly attribute HTMLCollection embeds;
readonly attribute HTMLCollection plugins;
readonly attribute HTMLCollection links;
readonly attribute HTMLCollection forms;
readonly attribute HTMLCollection scripts;
NodeList getElementsByName(DOMString elementName);
NodeList getItems(optional DOMString typeNames); // microdata
readonly attribute DOMElementMap cssElementMap;
// dynamic markup insertion
Document open(optional DOMString type, optional DOMString replace);
WindowProxy open(DOMString url, DOMString name, DOMString features, optional boolean replace);
void close();
void write(DOMString... text);
void writeln(DOMString... text);
// user interaction
readonly attribute WindowProxy? defaultView;
readonly attribute Element? activeElement;
boolean hasFocus();
attribute DOMString designMode;
boolean execCommand(DOMString commandId);
boolean execCommand(DOMString commandId, boolean showUI);
boolean execCommand(DOMString commandId, boolean showUI, DOMString value);
boolean queryCommandEnabled(DOMString commandId);
boolean queryCommandIndeterm(DOMString commandId);
boolean queryCommandState(DOMString commandId);
boolean queryCommandSupported(DOMString commandId);
DOMString queryCommandValue(DOMString commandId);
readonly attribute HTMLCollection commands;
// event handler IDL attributes
[TreatNonCallableAsNull] attribute Function? onabort;
[TreatNonCallableAsNull] attribute Function? onblur;
[TreatNonCallableAsNull] attribute Function? oncanplay;
[TreatNonCallableAsNull] attribute Function? oncanplaythrough;
[TreatNonCallableAsNull] attribute Function? onchange;
[TreatNonCallableAsNull] attribute Function? onclick;
[TreatNonCallableAsNull] attribute Function? oncontextmenu;
[TreatNonCallableAsNull] attribute Function? oncuechange;
[TreatNonCallableAsNull] attribute Function? ondblclick;
[TreatNonCallableAsNull] attribute Function? ondrag;
[TreatNonCallableAsNull] attribute Function? ondragend;
[TreatNonCallableAsNull] attribute Function? ondragenter;
[TreatNonCallableAsNull] attribute Function? ondragleave;
[TreatNonCallableAsNull] attribute Function? ondragover;
[TreatNonCallableAsNull] attribute Function? ondragstart;
[TreatNonCallableAsNull] attribute Function? ondrop;
[TreatNonCallableAsNull] attribute Function? ondurationchange;
[TreatNonCallableAsNull] attribute Function? onemptied;
[TreatNonCallableAsNull] attribute Function? onended;
[TreatNonCallableAsNull] attribute Function? onerror;
[TreatNonCallableAsNull] attribute Function? onfocus;
[TreatNonCallableAsNull] attribute Function? oninput;
[TreatNonCallableAsNull] attribute Function? oninvalid;
[TreatNonCallableAsNull] attribute Function? onkeydown;
[TreatNonCallableAsNull] attribute Function? onkeypress;
[TreatNonCallableAsNull] attribute Function? onkeyup;
[TreatNonCallableAsNull] attribute Function? onload;
[TreatNonCallableAsNull] attribute Function? onloadeddata;
[TreatNonCallableAsNull] attribute Function? onloadedmetadata;
[TreatNonCallableAsNull] attribute Function? onloadstart;
[TreatNonCallableAsNull] attribute Function? onmousedown;
[TreatNonCallableAsNull] attribute Function? onmousemove;
[TreatNonCallableAsNull] attribute Function? onmouseout;
[TreatNonCallableAsNull] attribute Function? onmouseover;
[TreatNonCallableAsNull] attribute Function? onmouseup;
[TreatNonCallableAsNull] attribute Function? onmousewheel;
[TreatNonCallableAsNull] attribute Function? onpause;
[TreatNonCallableAsNull] attribute Function? onplay;
[TreatNonCallableAsNull] attribute Function? onplaying;
[TreatNonCallableAsNull] attribute Function? onprogress;
[TreatNonCallableAsNull] attribute Function? onratechange;
[TreatNonCallableAsNull] attribute Function? onreset;
[TreatNonCallableAsNull] attribute Function? onscroll;
[TreatNonCallableAsNull] attribute Function? onseeked;
[TreatNonCallableAsNull] attribute Function? onseeking;
[TreatNonCallableAsNull] attribute Function? onselect;
[TreatNonCallableAsNull] attribute Function? onshow;
[TreatNonCallableAsNull] attribute Function? onstalled;
[TreatNonCallableAsNull] attribute Function? onsubmit;
[TreatNonCallableAsNull] attribute Function? onsuspend;
[TreatNonCallableAsNull] attribute Function? ontimeupdate;
[TreatNonCallableAsNull] attribute Function? onvolumechange;
[TreatNonCallableAsNull] attribute Function? onwaiting;
// special event handler IDL attributes that only apply to Document objects
[TreatNonCallableAsNull,LenientThis] attribute Function? onreadystatechange;
};
User agents must throw a
SecurityError exception whenever any properties of a
Document object are accessed by scripts whose
effective script origin is not the same as the Document's effective
script origin.
URLReturns the document's address.
referrerReturns the
address 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 URL
attribute must return the document's address.
The referrer attribute
must return either the current address of the active document
of the source browsing context at the time the
navigation was started (that is, the page which navigated the browsing context
to the current document), with any <fragment> component removed; or
the empty string if there is no such originating page, or if the UA
has been configured not to report referrers in this case, or if the
navigation was initiated for a hyperlink with a noreferrer keyword.
In the case of HTTP, the referrer IDL attribute will
match the Referer (sic) header
that was sent when fetching the current
page.
Typically user agents are configured to not report
referrers in the case where the referrer uses an encrypted protocol
and the current page does not (e.g. when navigating from an https: page to an http:
page).
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 (in an
iframe with the sandbox attribute), a
SecurityError exception will be thrown on getting and
setting.
The cookie
attribute represents the cookies of the resource from which the
Document was created.
A Document object that falls into one of the
following conditions is a cookie-free Document
object:
Document that has no browsing
context.Document whose address does not use a server-based naming
authority.On getting, if the document is a
cookie-free Document object, then the user
agent must return the empty string. Otherwise, if the
Document's origin is not a
scheme/host/port tuple, the user agent must throw a
SecurityError exception. Otherwise, the user agent must
first obtain the storage mutex and then return the
cookie-string for the document's address for a
"non-HTTP" API, decoded as UTF-8, with error handling.
[COOKIES]
On setting, if the document is a cookie-free
Document object, then the user agent must do
nothing. Otherwise, if the Document's
origin is not a scheme/host/port tuple, the user agent
must throw a SecurityError exception. Otherwise, the
user agent must obtain the storage mutex and then act
as it would when receiving a set-cookie-string for
the document's address via a "non-HTTP" API, consisting
of the new value encoded as UTF-8. [COOKIES] [RFC3629]
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.
lastModifiedReturns 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:
All the numeric components above, other than the year, must be given as two digits in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9) representing the number in base ten, zero-padded if necessary. The year must be given as the shortest possible string of four or more digits in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9) 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.
readyStateReturns "loading" while the Document is loading, "interactive" once it is finished parsing but still loading sub-resources, and "complete" once it has loaded.
The readystatechange event fires on the Document object when this value changes.
Each document has a current document readiness. When a
Document object is created, it must have its
current document readiness set to the string "loading"
if the document is associated with an HTML parser or an
XML parser, or to the string "complete" otherwise.
Various algorithms during page loading affect this value. When the
value is set, the user agent must fire a simple event
named readystatechange
at the Document object.
A Document is said to have an active
parser if it is associated with an HTML parser or
an XML parser that has not yet been stopped or aborted.
The readyState IDL
attribute must, on getting, return the current document
readiness.
The html element of a document is the
document's root element, if there is one and it's an
html element, or null otherwise.
headReturns 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).
title [ = value ]Returns the document's title, as given by the
title element.
Can be set, to update the document's title. If there is no
head element,
the new value is ignored.
In SVG documents, the SVGDocument interface's
title attribute takes
precedence.
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 root element is an svg
element in the "http://www.w3.org/2000/svg"
namespace, and the user agent supports SVG, then return the value
that would have been returned by the IDL attribute of the same name
on the SVGDocument interface. [SVG]
Otherwise, let value be a concatenation
of the data of all the child Text nodes of the
title element, in tree order, or
the empty string if the title element is
null.
Replace any sequence of one or more consecutive space characters in value with a single U+0020 SPACE character.
Strip leading and trailing whitespace from value.
Return value.
On setting, the following algorithm must be run. Mutation events must be fired as appropriate.
If the root element is an svg
element in the "http://www.w3.org/2000/svg"
namespace, and the user agent supports SVG, then the setter must
act as if it was the setter for the IDL attribute of the same name
on the Document interface defined by the SVG
specification. Stop the algorithm here. [SVG]
title element is null and
the head element is null, then the
attribute must do nothing. Stop the algorithm here.title element is null, then a
new title element must be created and appended to
the head element. Let element be that element. Otherwise, let element be the title
element.Text node whose data is the new value
being assigned must be appended to element.The title IDL attribute
defined above must replace the attribute of the same name on the
Document interface defined by the SVG specification
when the user agent supports both HTML and SVG. [SVG]
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 exception.
The body element of a document is the first child of
the html element that is either a
body element or a frameset element. If
there is no such element, it is null.
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:
body or
frameset element, then throw a
HierarchyRequestError exception and abort these
steps.replaceChild() method had been
called with the new value and the
incumbent body element as its two arguments respectively,
then abort these steps.imagesReturns an HTMLCollection of the img elements in the Document.
embedspluginsReturn an HTMLCollection of the embed elements in the Document.
linksReturns an HTMLCollection of the a and area elements in the Document that have href attributes.
formsReturn an HTMLCollection of the form elements in the Document.
scriptsReturn 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.
getElementsByName(name)Returns a NodeList of elements in the
Document that have a name
attribute with the value name.
The getElementsByName(name) method takes a string name, and must return a live
NodeList containing all the HTML elements
in that document that have a name attribute
whose value is equal to the name argument (in a
case-sensitive manner), in tree order.
When the method is invoked on a Document object again
with the same argument, the user agent may return the same as the
object returned by the earlier call. In other cases, a new
NodeList object must be returned.
cssElementMapReturns a DOMElementMap object for the
Document representing the current CSS element reference
identifiers.
The cssElementMap
IDL attribute allows authors to define CSS element reference identifiers,
which are used in certain CSS features to override the normal ID-based mapping. [CSSIMAGES]
When a Document is created, it must be associated
with an initially-empty CSS ID overrides list, which
consists of a list of mappings each of which consists of a string
name mapped to an Element node.
Each entry in the CSS ID overrides list, while it is
in the list and is either in the
Document or is an img,
video, or canvas element, defines a
CSS element reference identifier mapping the given name
to the given Element. [CSSIMAGES]
On getting, the cssElementMap IDL
attribute must return a DOMElementMap object,
associated with the following algorithms, which expose the current
mappings:
Return the Document's CSS ID overrides
list, maintaining the order in which the entries were
originally added to the list.
Let name be the name passed to the
algorithm and element be the
Element passed to the algorithm.
If element is null, run the algorithm for deleting mappings by name, passing it name.
Otherwise, if there is an entry in the Document's
CSS ID overrides list whose name is name, replace its current value with element.
Otherwise, add a mapping to the Document's
CSS ID overrides list whose name is name and whose element is element.
If there is an entry in the Document's CSS
ID overrides list whose name is the name passed to this
algorithm, remove it. This also undefines the CSS element
reference identifier for that name. [CSSIMAGES]
The same object must be returned each time.
The Document
interface supports named
properties. The supported property names at any
moment consist of the values of the name content attributes of all the
applet,
exposed embed,
form,
iframe,
img, and
exposed object
elements in the Document that have name content attributes, and the values of
the id content attributes of all the
applet and
exposed object
elements in the Document that have id content attributes, and the values of the
id content attributes of all the
img
elements in the Document that have both name content attributes and id content attributes.
To determine the value of a named property name when the
Document object is indexed for property
retrieval, the user agent must return the value obtained using
the following steps:
Let elements be the list of named elements with
the name name in the Document.
There will be at least one such element, by definition.
If elements has only one element, and that
element is an iframe element, then return the
WindowProxy object of the nested browsing
context represented by that iframe element,
and abort these steps.
Otherwise, if elements has only one element, return that element and abort these steps.
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:
applet, exposed embed,
form, iframe, img, or
exposed object elements that have a name content attribute whose value is name, orapplet or exposed object
elements that have an id content
attribute whose value is name, orimg elements that have an id content attribute whose value is name, and that have a 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.
partial interface XMLDocument {
boolean load(DOMString url);
};
The load(url) method must run the following
steps:
Let document be the XMLDocument
object on which the method was invoked.
Resolve the method's
first argument, relative to the entry script's base URL. If this is not
successful, throw a SyntaxError exception and abort
these steps. Otherwise, let url be the
resulting absolute URL.
If the origin of url is not
the same as the origin of document, throw a SecurityError
exception and abort these steps.
Remove all child nodes of document, without firing any mutation events.
Set the current document readiness of document to "loading".
Run the remainder of these steps asynchronously, and return true from the method.
Let result be a Document
object.
Let success be false.
Fetch url from the origin of document, with the synchronous flag set and the force same-origin flag set.
If the fetch attempt was successful, and the resource's Content-Type metadata is an XML MIME type, then run these substeps:
Create a new XML parser associated with the result document.
Pass this parser the fetched document.
If there is an XML well-formedness or XML namespace well-formedness error, then remove all child nodes from result. Otherwise let success be true.
Queue a task to run the following steps.
Set the current document readiness of document to "complete".
Replace all the children of document
by the children of result (even if it has no
children), firing mutation events as if a
DocumentFragment containing the new children had
been inserted.
Fire a simple event named load at document.
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. 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 the 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 document is non-conforming, despite being syntactically correct:
<!DOCTYPE HTML>
<html lang="en-GB">
<head> <title> Demonstration </title> </head>
<body>
<table>
<tr> <td> My favourite animal is the cat. </td> </tr>
<tr>
<td>
—<a href="http://example.org/~ernest/"><cite>Ernest</cite></a>,
in an essay from 1992
</td>
</tr>
</table>
</body>
</html>
...because the data placed in the cells is clearly not tabular
data (and the cite element mis-used). 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:
<!DOCTYPE HTML> <html lang="en-GB"> <head> <title> Demonstration </title> </head> <body> <blockquote> <p> My favourite animal is the cat. </p> </blockquote> <p> —<a href="http://example.org/~ernest/">Ernest</a>, in an essay from 1992 </p> </body> </html>
This next document fragment, intended to represent the heading of a corporate site, is similarly 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).
<body> <h1>ABC Company</h1> <h2>Leading the way in widget design since 1432</h2> ...
The hgroup element is intended for these kinds of
situations:
<body> <hgroup> <h1>ABC Company</h1> <h2>Leading the way in widget design since 1432</h2> </hgroup> ...
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:
<label>Carpet: <input type="carpet" name="c" texture="deep pile"></label>
Here would be an alternative and correct way to mark this up:
<label>Carpet: <input type="text" class="carpet" name="c" data-texture="deep pile"></label>
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 progress 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.
The nodes representing HTML elements in the DOM must implement, and expose to scripts, the interfaces listed for them in the relevant sections of this specification. This includes HTML elements in XML documents, even when those documents are in another context (e.g. inside an XSLT transform).
Elements in the DOM represent things; that is, they have intrinsic meaning, also known as semantics.
For example, an ol element
represents an ordered list.
The basic interface, from which all the HTML
elements' interfaces inherit, and which
must be used by elements that have no additional
requirements, is the HTMLElement interface.
interface HTMLElement : Element { // metadata attributes attribute DOMString title; attribute DOMString lang; attribute boolean translate; attribute DOMString dir; attribute DOMString className; readonly attribute DOMTokenList classList; readonly attribute DOMStringMap dataset; // microdata attribute boolean itemScope; [PutForwards=value] readonly attribute DOMSettableTokenList itemType; attribute DOMString itemId; [PutForwards=value] readonly attribute DOMSettableTokenList itemRef; [PutForwards=value] readonly attribute DOMSettableTokenList itemProp; readonly attribute HTMLPropertiesCollection properties; attribute any itemValue; // user interaction attribute boolean hidden; void click(); attribute long tabIndex; void focus(); void blur(); attribute DOMString accessKey; readonly attribute DOMString accessKeyLabel; attribute boolean draggable; [PutForwards=value] readonly attribute DOMSettableTokenList dropzone; attribute DOMString contentEditable; readonly attribute boolean isContentEditable; attribute HTMLMenuElement? contextMenu; attribute boolean spellcheck; // command API readonly attribute DOMString? commandType; readonly attribute DOMString? commandLabel; readonly attribute DOMString? commandIcon; readonly attribute boolean? commandHidden; readonly attribute boolean? commandDisabled; readonly attribute boolean? commandChecked; // styling readonly attribute CSSStyleDeclaration style; // event handler IDL attributes [TreatNonCallableAsNull] attribute Function? onabort; [TreatNonCallableAsNull] attribute Function? onblur; [TreatNonCallableAsNull] attribute Function? oncanplay; [TreatNonCallableAsNull] attribute Function? oncanplaythrough; [TreatNonCallableAsNull] attribute Function? onchange; [TreatNonCallableAsNull] attribute Function? onclick; [TreatNonCallableAsNull] attribute Function? oncontextmenu; [TreatNonCallableAsNull] attribute Function? oncuechange; [TreatNonCallableAsNull] attribute Function? ondblclick; [TreatNonCallableAsNull] attribute Function? ondrag; [TreatNonCallableAsNull] attribute Function? ondragend; [TreatNonCallableAsNull] attribute Function? ondragenter; [TreatNonCallableAsNull] attribute Function? ondragleave; [TreatNonCallableAsNull] attribute Function? ondragover; [TreatNonCallableAsNull] attribute Function? ondragstart; [TreatNonCallableAsNull] attribute Function? ondrop; [TreatNonCallableAsNull] attribute Function? ondurationchange; [TreatNonCallableAsNull] attribute Function? onemptied; [TreatNonCallableAsNull] attribute Function? onended; [TreatNonCallableAsNull] attribute Function? onerror; [TreatNonCallableAsNull] attribute Function? onfocus; [TreatNonCallableAsNull] attribute Function? oninput; [TreatNonCallableAsNull] attribute Function? oninvalid; [TreatNonCallableAsNull] attribute Function? onkeydown; [TreatNonCallableAsNull] attribute Function? onkeypress; [TreatNonCallableAsNull] attribute Function? onkeyup; [TreatNonCallableAsNull] attribute Function? onload; [TreatNonCallableAsNull] attribute Function? onloadeddata; [TreatNonCallableAsNull] attribute Function? onloadedmetadata; [TreatNonCallableAsNull] attribute Function? onloadstart; [TreatNonCallableAsNull] attribute Function? onmousedown; [TreatNonCallableAsNull] attribute Function? onmousemove; [TreatNonCallableAsNull] attribute Function? onmouseout; [TreatNonCallableAsNull] attribute Function? onmouseover; [TreatNonCallableAsNull] attribute Function? onmouseup; [TreatNonCallableAsNull] attribute Function? onmousewheel; [TreatNonCallableAsNull] attribute Function? onpause; [TreatNonCallableAsNull] attribute Function? onplay; [TreatNonCallableAsNull] attribute Function? onplaying; [TreatNonCallableAsNull] attribute Function? onprogress; [TreatNonCallableAsNull] attribute Function? onratechange; [TreatNonCallableAsNull] attribute Function? onreset; [TreatNonCallableAsNull] attribute Function? onscroll; [TreatNonCallableAsNull] attribute Function? onseeked; [TreatNonCallableAsNull] attribute Function? onseeking; [TreatNonCallableAsNull] attribute Function? onselect; [TreatNonCallableAsNull] attribute Function? onshow; [TreatNonCallableAsNull] attribute Function? onstalled; [TreatNonCallableAsNull] attribute Function? onsubmit; [TreatNonCallableAsNull] attribute Function? onsuspend; [TreatNonCallableAsNull] attribute Function? ontimeupdate; [TreatNonCallableAsNull] attribute Function? onvolumechange; [TreatNonCallableAsNull] attribute Function? onwaiting; }; interface HTMLUnknownElement : HTMLElement { };
The HTMLElement 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.
The HTMLUnknownElement interface must be used for
HTML elements that are not defined by this
specification (or other applicable specifications).
The following attributes are common to and may be specified on all HTML elements (even those not defined in this specification):
accesskeyclasscontenteditablecontextmenudirdraggabledropzonehiddeniditemiditempropitemrefitemscopeitemtypelangspellcheckstyletabindextitletranslateThese attributes are only defined by this specification as attributes for HTML elements. 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.
For example, in the following XML fragment, the "bogus" element does not have a dir attribute as defined in this
specification, despite having an attribute with the literal name
"dir". Thus, the directionality
of the inner-most span element is 'rtl', inherited from the
div element indirectly through the "bogus" element.
<div xmlns="http://www.w3.org/1999/html" dir="rtl"> <bogus xmlns="http://example.net/ns" dir="ltr"> <span xmlns="http://www.w3.org/1999/html"> </span> </bogus> </div>
The following event handler content attributes may be specified on any HTML element:
onabortonblur*oncanplayoncanplaythroughonchangeonclickoncontextmenuoncuechangeondblclickondragondragendondragenterondragleaveondragoverondragstartondropondurationchangeonemptiedonendedonerror*onfocus*oninputoninvalidonkeydownonkeypressonkeyuponload*onloadeddataonloadedmetadataonloadstartonmousedownonmousemoveonmouseoutonmouseoveronmouseuponmousewheelonpauseonplayonplayingonprogressonratechangeonresetonscroll*onseekedonseekingonselectonshowonstalledonsubmitonsuspendontimeupdateonvolumechangeonwaitingThe attributes marked with an asterisk have a
different meaning when specified on body elements as
those elements expose event handlers of the
Window object with the same names.
While these attributes apply to all elements, they
are not useful on all elements. For example, only media elements will ever receive a volumechange event fired by
the user agent.
Custom data attributes
(e.g. data-foldername or data-msgid) can be specified on any HTML element, to store custom data
specific to the page.
In HTML documents, elements in the HTML
namespace may have an xmlns attribute
specified, if, and only if, it has the exact value
"http://www.w3.org/1999/xhtml". This does not apply to
XML documents.
In HTML, the xmlns attribute
has absolutely no effect. It is basically a talisman. It is allowed
merely to make migration to and from XHTML mildly easier. When
parsed by an HTML parser, the attribute ends up in no
namespace, not the "http://www.w3.org/2000/xmlns/"
namespace like namespace declaration attributes in XML do.
In XML, an xmlns attribute is
part of the namespace declaration mechanism, and an element cannot
actually have an xmlns attribute in no
namespace specified.
The XML specification also allows the use of the xml:space attribute in the XML
namespace on any element in an XML document. This attribute has no effect on
HTML elements, as the default behavior in HTML is to
preserve whitespace. [XML]
There is no way to serialize the xml:space attribute on HTML
elements in the text/html syntax.
To enable assistive technology products to expose a more
fine-grained interface than is otherwise possible with HTML elements
and attributes, a set of annotations for
assistive technology products can be specified (the ARIA
role and aria-* attributes).
id attributeThe id attribute specifies its
element's unique identifier (ID). [DOMCORE]
The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.
An element's unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS.
Identifiers are opaque strings. Particular meanings should not be
derived from the value of the id
attribute.
title attributeThe title attribute
represents 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; and so forth. The
value is text.
If this attribute is omitted from an element, then it implies
that the title attribute of the
nearest ancestor HTML element
with a title 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 title 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.
Caution is advised with respect to the use of newlines in title attributes.
For instance, the following snippet actually defines an abbreviation's expansion with a line break in it:
<p>My logs show that there was some interest in <abbr title="Hypertext Transport Protocol">HTTP</abbr> today.</p>
Some elements, such as link, abbr, and
input, define additional semantics for the title attribute beyond the semantics
described above.
The title IDL attribute
must reflect the title
content attribute.
lang and xml:lang attributesThe 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 XHTML, 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 none of the node's ancestors, including the root element, 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.
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.
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.
translate attributeThe 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 has a translation mode, which is in
either the translate-enabled state or the
no-translate state. If the 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,
the element's translate
attribute is in the inherit state; in that case, the
element's translation mode is in the same state as its
parent element, if any, or in the translate-enabled
state, if the element is a root element.
When an element is in the translate-enabled state, the
element's attribute values 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 the name of a
computer program.
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 localised, except the sample keyboard input and sample program output:
<!DOCTYPE HTML> <html> <!-- default on the root element is translate=yes --> <head> <title>The Bee Game</title> <!-- implied translate=yes inherited from ancestors --> </head> <body> <p>The Bee Game is a text adventure game in English.</p> <p>When the game launches, the first thing you should do is type <kbd translate=no>eat honey</kbd>. The game will respond with:</p> <pre><samp translate=no>Yum yum! That was some good honey!</samp></pre> </body> </html>
xml:base
attribute (XML only)The xml:base attribute is
defined in XML Base. [XMLBASE]
The xml:base attribute may be
used on elements of XML documents. Authors must not
use the xml:base attribute in
HTML documents.
dir attributeThe dir attribute specifies the
element's text directionality. The attribute is an enumerated
attribute with the following keywords and states:
ltr keyword, which maps to the ltr stateIndicates that the contents of the element are explicitly directionally embedded left-to-right text.
rtl keyword, which maps to the rtl stateIndicates that the contents of the element are explicitly directionally embedded right-to-left text.
auto keyword, which maps to the auto stateIndicates that the contents of the element are explicitly embedded 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.
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 is either 'ltr' or 'rtl', and is determined as per the first appropriate set of steps from the following list:
dir attribute is
in the ltr stateThe directionality of the element is 'ltr'.
dir attribute is
in the rtl stateThe directionality of the element is 'rtl'.
input element whose type attribute is in the Text, Search, Telephone, URL, or E-mail state, and the dir attribute is in the auto statetextarea element and the dir attribute is in the auto stateIf 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'. Otherwise, the directionality of the element is 'ltr'.
dir attribute is
in the auto statebdi 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:
bdi element.
script element.
style element.
textarea element.
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'.
Otherwise, the directionality of the element is 'ltr'.
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'.
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.
The effect of this attribute is primarily on the presentation layer. For example, the rendering section in this specification defines a mapping from this attribute to the CSS 'direction' and 'unicode-bidi' properties, and CSS defines rendering in terms of those properties.
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.
<p dir=auto class="u1"><b><bdi>Student</bdi>:</b> How do you write "What's your name?" in Arabic?</p> <p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> ما اسمك؟</p> <p dir=auto class="u1"><b><bdi>Student</bdi>:</b> Thanks.</p> <p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> That's written "شكرًا".</p> <p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> Do you know how to write "Please"?</p> <p dir=auto class="u1"><b><bdi>Student</bdi>:</b> "من فضلك", right?</p>
Given a suitable style sheet and the default alignment styles
for the p element, namely to align the text to the
start edge of the paragraph, the resulting rendering could
be as follows:

As noted earlier, the auto
value is not a panacea. The final paragraph in this example is
misinterpreted as being right-to-left text, since it begins with an
Arabic character, which causes the "right?" to be to the left of
the Arabic text.
class attributeEvery HTML element may have a
class attribute specified.
The attribute, if specified, must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.
The classes that an HTML
element has assigned to it consists of all the classes
returned when the value of the class
attribute is split on
spaces. (Duplicates are ignored.)
Assigning classes to an element affects class
matching in selectors in CSS, the getElementsByClassName()
method in the DOM, and other such features.
There are no additional restrictions on the tokens authors can
use in the class 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.
The className and
classList IDL
attributes must both reflect the class content attribute.
style attributeAll HTML elements may have the style content attribute set. This is a
CSS styling attribute as defined by the CSS Styling
Attribute Syntax specification. [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 CSS styling attributes. [CSSATTR]
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.)
styleReturns a CSSStyleDeclaration object for the element's style attribute.
The style IDL attribute
must return a CSSStyleDeclaration whose value
represents the declarations specified in the attribute, if
present. Mutating the CSSStyleDeclaration object must
create a style attribute on the
element (if there isn't one already) and then change its value to be
a value representing the serialized form of the
CSSStyleDeclaration object. The same object must be
returned each time. [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.
<p>My sweat suit is <span style="color: green; background: transparent">green</span> and my eyes are <span style="color: blue; background: transparent">blue</span>.</p>
data-* attributesA 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 characters in the range U+0041 to U+005A (LATIN CAPITAL
LETTER A to LATIN CAPITAL LETTER Z).
All attributes 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 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 independent of the site that uses the attributes.
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.
<ol> <li data-length="2m11s">Beyond The Sea</li> ... </ol>
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.
Every HTML element may have any number of custom data attributes specified, with any value.
datasetReturns 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 object, associated with the
following algorithms, which expose these attributes on their
element:
data-" and whose
remaining characters (if any) do not include any characters in
the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN
CAPITAL LETTER Z), 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.SyntaxError exception and abort these
steps.data- at the front of
name.setAttribute() would have thrown an
exception when setting an attribute with the name name, then this must throw the same
exception.data- at the front of
name.The same object must be returned each time.
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:
<div class="spaceship" data-ship-id="92432"
data-weapons="laser 2" data-shields="50%"
data-x="30" data-y="10" data-z="90">
<button class="fire"
onclick="spaceships[this.parentNode.dataset.shipId].fire()">
Fire
</button>
</div>
Notice how the hyphenated attribute name becomes camel-cased in the API.
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).
Each element in this specification has a definition that includes the following information:
A list of categories to which the element belongs. These are used when defining the content models for each element.
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.
For simplicity, only the most specific expectations are listed. For example, an element that is both flow content and phrasing content can be used anywhere that either flow content or phrasing content is expected, but since anywhere that flow content is expected, phrasing content is also expected (since all phrasing content is flow content), only "where phrasing content is expected" will be listed.
A normative description of what content must be included as children and descendants of the element.
A normative list of attributes that may be specified on the element (except where otherwise disallowed).
A normative definition of a DOM interface that such elements must implement.
This is then followed by a description of what the element represents, along with any additional normative conformance criteria that may apply to authors and implementations. Examples are sometimes also included.
Except where otherwise specified, attributes on HTML elements may have any string value, including the empty string. Except where explicitly stated, there is no restriction on what text can be specified in such attributes.
Each element defined in this specification has a content model: a description of the element's expected contents. An HTML element must have contents that match the requirements described in the element's content model.
The space characters are
always allowed between elements. User agents represent these
characters between elements in the source markup as
Text nodes in the DOM. Empty Text nodes and
Text nodes consisting of just sequences of those
characters are considered inter-element whitespace.
Inter-element whitespace, 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 A is said to be
preceded or followed by a second element B if A and B
have the same parent node and there are no other element nodes or
Text nodes (other than inter-element
whitespace) between them. Similarly, a node is the only
child of an element if that element contains no other nodes
other than inter-element whitespace, comment nodes, and
processing instruction nodes.
Authors must not use HTML elements 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.
For example, the Atom specification defines a content element. When its type attribute has the value xhtml, the Atom specification requires that it
contain a single HTML div element. Thus, a
div element is allowed in that context, even though
this is not explicitly normatively stated by this specification. [ATOM]
In addition, HTML elements may be orphan nodes (i.e. without a parent node).
For example, creating a td element and storing it
in a global variable in a script is conforming, even though
td elements are otherwise only supposed to be used
inside tr elements.
var data = {
name: "Banana",
cell: document.createElement('td'),
};
Each element in HTML falls into zero or more categories that group elements with similar characteristics together. The following broad categories are used in this specification:
Some elements also fall into other categories, which are defined in other parts of this specification.
These categories are related as follows:
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.
Metadata content 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.
basecommandlinkmetanoscriptscriptstyletitleElements from other namespaces whose semantics are primarily metadata-related (e.g. RDF) are also metadata content.
Thus, in the XML serialization, one can use RDF, like this:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:r="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<head>
<title>Hedral's Home Page</title>
<r:RDF>
<Person xmlns="http://www.w3.org/2000/10/swap/pim/contact#"
r:about="http://hedral.example.com/#">
<fullName>Cat Hedral</fullName>
<mailbox r:resource="mailto:hedral@damowmow.com"/>
<personalTitle>Sir</personalTitle>
</Person>
</r:RDF>
</head>
<body>
<h1>My home page</h1>
<p>I like playing with string, I guess. Sister says squirrels are fun
too so sometimes I follow her to play with them.</p>
</body>
</html>
This isn't possible in the HTML serialization, however.
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)articleasideaudiobbdibdoblockquotebrbuttoncanvascitecodecommanddatadatalistdeldetailsdfndivdlemembedfieldsetfigurefooterformh1h2h3h4h5h6headerhgrouphriiframeimginputinskbdkeygenlabellink (if the itemprop attribute is present)mapmarkmathmenumeta (if the itemprop attribute is present)meternavnoscriptobjectoloutputppreprogressqrubyssampscriptsectionselectsmallspanstrongstyle (if the scoped attribute is present)subsupsvgtabletextareatimeuulvarvideowbrSectioning content is content that defines the scope of headings and footers.
articleasidenavsectionEach sectioning content element potentially has a heading and an outline. See the section on headings and sections for further details.
There are also certain elements that are sectioning roots. These are distinct from sectioning content, but they can also have an outline.
Heading content defines the header of a section (whether explicitly marked up using sectioning content elements, or implied by the heading content itself).
h1h2h3h4h5h6hgroupPhrasing 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.
a (if it contains only phrasing content)abbrarea (if it is a descendant of a map element)audiobbdibdobrbuttoncanvascitecodecommanddatadatalistdel (if it contains only phrasing content)dfnemembediiframeimginputins (if it contains only phrasing content)kbdkeygenlabellink (if the itemprop attribute is present)map (if it contains only phrasing content)markmathmeta (if the itemprop attribute is present)meternoscriptobjectoutputprogressqrubyssampscriptselectsmallspanstrongsubsupsvgtextareatimeuvarvideowbrAs a general rule, elements whose content model allows any
phrasing content should have either at least one
descendant Text node that is not inter-element
whitespace, or at least one descendant element node that is
embedded content. For the purposes of this requirement,
nodes that are descendants of del elements must not be
counted as contributing to the ancestors of the del
element.
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 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 space
characters).
Text nodes and attribute values must consist of
Unicode characters, must not
contain U+0000 characters, must not contain permanently undefined
Unicode characters (noncharacters), and must not contain control
characters other than space
characters.
This specification includes extra constraints on the exact value of
Text nodes and attribute values depending on their
precise context.
Embedded content is content that imports another resource into the document, or content from another vocabulary that is inserted into the document.
audiocanvasembediframeimgmathobjectsvgvideoElements 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.
Interactive content is content that is specifically intended for user interaction.
aaudio (if the controls attribute is present)buttondetailsembediframeimg (if the usemap attribute is present)input (if the type attribute is not in the Hidden state)keygenlabelmenu (if the type attribute is in the toolbar state)object (if the usemap attribute is present)selecttextareavideo (if the controls attribute is present)Certain elements in HTML have an activation
behavior, which means that the user can activate them. This
triggers a sequence of events dependent on the activation mechanism,
and normally culminating in a click
event, as described below.
The user agent should allow the user to manually trigger elements that have an activation behavior, for instance using keyboard or voice input, or through mouse clicks. When the user triggers an element with a defined activation behavior in a manner other than clicking it, the default action of the interaction event must be to run synthetic click activation steps on the element.
Each element has a click in progress flag, initially set to false.
When a user agent is to run synthetic click activation steps on an element, the user agent must run the following steps:
If the element's click in progress flag is set to true, then abort these steps.
Set the click in progress flag on the element to true.
Run pre-click activation steps on the element.
Fire a click
event at the element.
If this click event is not
canceled, run post-click activation steps on the
element.
If the event is canceled, the user agent must run canceled activation steps on the element instead.
Set the click in progress flag on the element to false.
When a pointing device is clicked, the user agent must run these steps:
If the element's click in progress flag is set to true, then abort these steps.
Set the click in progress flag on the element to true.
Let e be the nearest activatable element of the element designated by the user (defined below), if any.
If there is an element e, run pre-click activation steps on it.
Dispatch the required click
event.
If there is an element e and the click event is not canceled, run
post-click activation steps on element e.
If there is an element e and the event is canceled, run canceled activation steps on element e.
Set the click in progress flag on the element to false.
The above doesn't happen for arbitrary synthetic
events dispatched by author script. However, the click() method can be used to make it
happen programmatically.
Click-focusing behavior (e.g. the focusing of a text field when user clicks in one) typically happens before the click, when the mouse button is first depressed, and is therefore not discussed here.
Given an element target, the nearest activatable element is the element returned by the following algorithm:
If target has a defined activation behavior, then return target and abort these steps.
If target has a parent element, then set target to that parent element and return to the first step.
Otherwise, there is no nearest activatable element.
When a user agent is to run pre-click activation steps on an element, it must run the pre-click activation steps defined for that element, if any.
When a user agent is to run canceled activation steps on an element, it must run the canceled activation steps defined for that element, if any.
When a user agent is to run post-click activation
steps on an element, it must run the activation
behavior defined for that element, if any. Activation
behaviors can refer to the click
event that was fired by the steps above leading up to this
point.
As a general rule, elements whose content model allows any
flow content or phrasing content should
have at least one child node that is palpable content
and that does not have the hidden
attribute specified.
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)bbdibdoblockquotebuttoncanvascitecodedatadetailsdfndivdl (if the element's children include at least one name-value group)emembedfieldsetfigurefooterformh1h2h3h4h5h6headerhgroupiiframeimginput (if the type attribute is not in the Hidden state)inskbdkeygenlabelmapmarkmathmenu (if the type attribute is in the toolbar state or the list state)meternavobjectol (if the element's children include at least one li element)outputppreprogressqrubyssampsectionselectsmallspanstrongsubsupsvgtabletextareatimeuul (if the element's children include at least one li element)varvideoSome 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:
<p><object><param><ins><map><a href="/">Apples</a></map></ins></object></p>
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.
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.
<section> <h1>Example of paragraphs</h1> This is the <em>first</em> paragraph in this example. <p>This is the second.</p> <!-- This is not a paragraph. --> </section>
Paragraphs in flow content are defined relative to
what the document looks like without the a,
ins, del, and map 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.
The following example takes the markup from the earlier example
and puts ins and del 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 ins and del elements —
the ins element straddles the heading and the first
paragraph, and the del element straddles the boundary
between the two paragraphs.
<section> <ins><h1>Example of paragraphs</h1> This is the <em>first</em> paragraph in</ins> this example<del>. <p>This is the second.</p></del> <!-- This is not a paragraph. --> </section>
Let view be a view of the DOM that replaces
all a, ins, del, and
map elements in the document with their contents. Then,
in view, for each run of sibling phrasing
content nodes uninterrupted by other types of content, in an
element that accepts content other than phrasing
content as well as phrasing content, let first be the first node of the run, and let last be the last node of the run. For each such run
that consists of at least one node that is neither embedded
content nor inter-element whitespace, a
paragraph exists in the original DOM from immediately before first to immediately after last. (Paragraphs can thus span across
a, ins, del, and
map elements.)
Conformance checkers may warn authors of cases where they have
paragraphs that overlap each other (this can happen with
object, video, audio, and
canvas elements, and indirectly through elements in
other namespaces that allow HTML to be further embedded therein,
like svg or math).
A paragraph is also formed explicitly by
p elements.
The p element can be used to wrap
individual paragraphs when there would otherwise not be any content
other than phrasing content to separate the paragraphs from each
other.
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.
<header> Welcome! <a href="about.html"> This is home of... <h1>The Falcons!</h1> The Lockheed Martin multirole jet fighter aircraft! </a> This page discusses the F-16 Fighting Falcon's innermost secrets. </header>
Here is another way of marking this up, this time showing the paragraphs explicitly, and splitting the one link element into three:
<header> <p>Welcome! <a href="about.html">This is home of...</a></p> <h1><a href="about.html">The Falcons!</a></h1> <p><a href="about.html">The Lockheed Martin multirole jet fighter aircraft!</a> This page discusses the F-16 Fighting Falcon's innermost secrets.</p> </header>
It is possible for paragraphs to overlap when using certain elements that define fallback content. For example, in the following section:
<section> <h1>My Cats</h1> You can play with my cat simulator. <object data="cats.sim"> To see the cat simulator, use one of the following links: <ul> <li><a href="cats.sim">Download simulator file</a> <li><a href="http://sims.example.com/watch?v=LYds5xY4INU">Use online simulator</a> </ul> Alternatively, upgrade to the Mellblom Browser. </object> I'm quite proud of it. </section>
There are five paragraphs:
object element.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 p elements can be
used.
Text content in HTML elements with
child Text nodes, and text in attributes of HTML
elements that allow free-form text, may contain characters in
the range U+202A to U+202E (the bidirectional-algorithm formatting
characters). However, the use of these characters is restricted so
that any embedding or overrides generated by these characters do not
start and end with different parent elements, and so that all such
embeddings and overrides are explicitly terminated by a U+202C POP
DIRECTIONAL FORMATTING character. This helps reduce incidences of
text being reused in a manner that has unforeseen effects on the
bidirectional algorithm.
The aforementioned restrictions are defined by specifying that certain parts of documents form bidirectional-algorithm formatting character ranges, and then imposing a requirement on such ranges.
The strings resulting from applying the following algorithm to an HTML element element are bidirectional-algorithm formatting character ranges:
Let output be an empty list of strings.
Let string be an empty string.
Let node be the first child node of element, if any, or null otherwise.
Loop: If node is null, jump to the step labeled end.
Process node according to the first matching step from the following list:
Text nodeAppend the text data of node to string.
br elementIf string is not the empty string, push string onto output, and let string be empty string.
Let node be node's next sibling, if any, or null otherwise.
Jump to the step labeled loop.
End: If string is not the empty string, push string onto output.
Return output as the bidirectional-algorithm formatting character ranges.
The value of a namespace-less attribute of an HTML element is a bidirectional-algorithm formatting character range.
Any strings that, as described above, are
bidirectional-algorithm formatting character ranges must
match the string production in the following
ABNF, the character set for which is Unicode. [ABNF]
string = *( plaintext ( embedding / override ) ) plaintext
embedding = ( lre / rle ) string pdf
override = ( lro / rlo ) string pdf
lre = %x202A ; U+202A LEFT-TO-RIGHT EMBEDDING
rle = %x202B ; U+202B RIGHT-TO-LEFT EMBEDDING
lro = %x202D ; U+202D LEFT-TO-RIGHT OVERRIDE
rlo = %x202E ; U+202E RIGHT-TO-LEFT OVERRIDE
pdf = %x202C ; U+202C POP DIRECTIONAL FORMATTING
plaintext = *( %x0000-2029 / %x202F-10FFFF )
; any string with no bidirectional-algorithm formatting characters
Authors are encouraged to use the dir attribute, the bdo element,
and the bdi element, rather than maintaining the
bidirectional-algorithm formatting characters manually. The
bidirectional-algorithm formatting characters interact poorly with
CSS.
Authors may use the ARIA role
and aria-* attributes on HTML
elements, in accordance with the requirements described in
the ARIA specifications, except where these conflict with the
strong native semantics
or are equal to the default implied ARIA semantics
described below. These exceptions are intended to prevent authors
from making assistive technology products report nonsensical states
that do not represent the actual state of the document. [ARIA]
Authors must not set the ARIA role and aria-* attributes in a manner that
conflicts with the semantics described in the following table,
except that the presentation role may
always be used. Authors must not set the ARIA role and aria-* attributes to values that match
the default implicit ARIA semantics defined in the
following two tables.
User agents are required to implement ARIA semantics on all HTML elements, as defined in the ARIA specifications. The implicit ARIA semantics defined below must be recognized by implementations for the purposes of ARIA processing. [ARIAIMPL]
The ARIA attributes defined in the ARIA specifications, and the strong native semantics and default implicit ARIA semantics defined below, do not have any effect on CSS pseudo-class matching, user interface modalities that don't use assistive technologies, or the default actions of user interaction events as described in this specification.
The following table defines the strong native semantics and corresponding default implicit ARIA semantics that apply to HTML elements. Each language feature (element or attribute) in a cell in the first column implies the ARIA semantics (role, states, and/or properties) given in the cell in the second column of the same row. When multiple rows apply to an element, the role from the last row to define a role must be applied, and the states and properties from all the rows must be combined.
| Language feature | Strong native semantics and default implied ARIA semantics |
|---|---|
area element that creates a hyperlink
| link role
|
base element
| No role |
datalist element
| listbox role, with the aria-multiselectable property set to "false"
|
details element
| aria-expanded state set to "true" if the element's open attribute is present, and set to "false" otherwise
|
head element
| No role |
hgroup element
| heading role, with the aria-level property set to the element's outline depth
|
hr element
| separator role
|
html element
| No role |
img element whose alt attribute's value is empty
| presentation role
|
input element with a type attribute in the Checkbox state
| aria-checked state set to "mixed" if the element's indeterminate IDL attribute is true, or "true" if the element's checkedness is true, or "false" otherwise
|
input element with a type attribute in the Color state
| No role |
input element with a type attribute in the Date state
| No role, with the aria-readonly property set to "true" if the element has a readonly attribute
|
input element with a type attribute in the Date and Time state
| No role, with the aria-readonly property set to "true" if the element has a readonly attribute
|
input element with a type attribute in the Local Date and Time state
| No role, with the aria-readonly property set to "true" if the element has a readonly attribute
|
input element with a type attribute in the E-mail state with no suggestions source element
| textbox role, with the aria-readonly property set to "true" if the element has a readonly attribute
|
input element with a type attribute in the File Upload state
| No role |
input element with a type attribute in the Hidden state
| No role |
input element with a type attribute in the Month state
| No role, with the aria-readonly property set to "true" if the element has a readonly attribute
|
input element with a type attribute in the Number state
| spinbutton role, with the aria-readonly property set to "true" if the element has a readonly attribute, the aria-valuemax property set to the element's maximum, the aria-valuemin property set to the element's minimum, and, if the result of applying the rules for parsing floating point number values to the element's value is a number, with the aria-valuenow property set to that number
|
input element with a type attribute in the Password state
| textbox role, with the aria-readonly property set to "true" if the element has a readonly attribute
|
input element with a type attribute in the Radio Button state
| aria-checked state set to "true" if the element's checkedness is true, or "false" otherwise
|
input element with a type attribute in the Range state
| slider role, with the aria-valuemax property set to the element's maximum, the aria-valuemin property set to the element's minimum, and the aria-valuenow property set to the result of applying the rules for parsing floating point number values to the element's value, if that results in a number, or the default value otherwise
|
input element with a type attribute in the Reset Button state
| button role
|
input element with a type attribute in the Search state with no suggestions source element
| textbox role, with the aria-readonly property set to "true" if the element has a readonly attribute
|
input element with a type attribute in the Submit Button state
| button role
|
input element with a type attribute in the Telephone state with no suggestions source element
| textbox role, with the aria-readonly property set to "true" if the element has a readonly attribute
|
input element with a type attribute in the Text state with no suggestions source element
| textbox role, with the aria-readonly property set to "true" if the element has a readonly attribute
|
input element with a type attribute in the Text, Search, Telephone, URL, or E-mail states with a suggestions source element
| combobox role, with the aria-owns property set to the same value as the list attribute, and the aria-readonly property set to "true" if the element has a readonly attribute
|
input element with a type attribute in the Time state
| No role, with the aria-readonly property set to "true" if the element has a readonly attribute
|
input element with a type attribute in the URL state with no suggestions source element
| textbox role, with the aria-readonly property set to "true" if the element has a readonly attribute
|
input element with a type attribute in the Week state
| No role, with the aria-readonly property set to "true" if the element has a readonly attribute
|
input element that is required
| The aria-required state set to "true"
|
keygen element
| No role |
label element
| No role |
link element that creates a hyperlink
| link role
|
menu element with a type attribute in the context menu state
| No role |
menu element with a type attribute in the list state
| menu role
|
menu element with a type attribute in the toolbar state
| toolbar role
|
meta element
| No role |
meter element
| No role |
nav element
| navigation role
|
noscript element
| No role |
optgroup element
| No role |
option element that is in a list of options or that represents a suggestion in a datalist element
| option role, with the aria-selected state set to "true" if the element's selectedness is true, or "false" otherwise.
|
param element
| No role |
progress element
| progressbar role, with, if the progress bar is determinate, the aria-valuemax property set to the maximum value of the progress bar, the aria-valuemin property set to zero, and the aria-valuenow property set to the current value of the progress bar
|
script element
| No role |
select element with a multiple attribute
| listbox role, with the aria-multiselectable property set to "true"
|
select element with no multiple attribute
| listbox role, with the aria-multiselectable property set to "false"
|
select element with a required attribute
| The aria-required state set to "true"
|
source element
| No role |
style element
| No role |
summary element
| No role |
textarea element
| textbox role, with the aria-multiline property set to "true", and the aria-readonly property set to "true" if the element has a readonly attribute
|
textarea element with a required attribute
| The aria-required state set to "true"
|
title element
| No role |
An element that defines a command, whose Type facet is "checkbox", and that is a descendant of a menu element whose type attribute in the list state
| menuitemcheckbox role, with the aria-checked state set to "true" if the command's Checked State facet is true, and "false" otherwise
|
An element that defines a command, whose Type facet is "command", and that is a descendant of a menu element whose type attribute in the list state
| menuitem role
|
An element that defines a command, whose Type facet is "radio", and that is a descendant of a menu element whose type attribute in the list state
| menuitemradio role, with the aria-checked state set to "true" if the command's Checked State facet is true, and "false" otherwise
|
| Element that is disabled | The aria-disabled state set to "true"
|
Element with a hidden attribute
| The aria-hidden state set to "true"
|
| Element that is a candidate for constraint validation but that does not satisfy its constraints | The aria-invalid state set to "true"
|
Some HTML elements have native semantics that can be
overridden. The following table lists these elements and their
default implicit ARIA semantics, along with the
restrictions that apply to those elements. Each language feature
(element or attribute) in a cell in the first column implies, unless
otherwise overridden, the ARIA semantic (role, state, or property)
given in the cell in the second column of the same row, but this
semantic may be overridden under the conditions listed in the cell
in the third column of that row. In addition, any element may be
given the presentation role,
regardless of the restrictions below.
| Language feature | Default implied ARIA semantic | Restrictions |
|---|---|---|
a element that creates a hyperlink
| link role
| Role must be either link, button, checkbox, menuitem, menuitemcheckbox, menuitemradio, tab, or treeitem
|
address element
| No role | If specified, role must be contentinfo
|
article element
| article role
| Role must be either article, document, application, or main
|
aside element
| note role
| Role must be either note, complementary, or search
|
audio element
| No role | If specified, role must be application
|
button element
| button role
| Role must be either button, link, menuitem, menuitemcheckbox, menuitemradio, radio
|
details element
| group role
| Role must be a role that supports aria-expanded
|
embed element
| No role | If specified, role must be either application, document, or img
|
footer element
| No role | If specified, role must be contentinfo
|
h1 element that does not have an hgroup ancestor
| heading role, with the aria-level property set to the element's outline depth
| Role must be either heading or tab
|
h2 element that does not have an hgroup ancestor
| heading role, with the aria-level property set to the element's outline depth
| Role must be either heading or tab
|
h3 element that does not have an hgroup ancestor
| heading role, with the aria-level property set to the element's outline depth
| Role must be either heading or tab
|
h4 element that does not have an hgroup ancestor
| heading role, with the aria-level property set to the element's outline depth
| Role must be either heading or tab
|
h5 element that does not have an hgroup ancestor
| heading role, with the aria-level property set to the element's outline depth
| Role must be either heading or tab
|
h6 element that does not have an hgroup ancestor
| heading role, with the aria-level property set to the element's outline depth
| Role must be either heading or tab
|
header element
| No role | If specified, role must be banner
|
iframe element
| No role | If specified, role must be either application, document, or img
|
img element whose alt attribute's value is absent
| img role
| No restrictions |
img element whose alt attribute's value is present and not empty
| img role
| No restrictions |
input element with a type attribute in the Button state
| button role
| Role must be either button, link, menuitem, menuitemcheckbox, menuitemradio, radio
|
input element with a type attribute in the Checkbox state
| checkbox role
| Role must be either checkbox or menuitemcheckbox
|
input element with a type attribute in the Image Button state
| button role
| Role must be either button, link, menuitem, menuitemcheckbox, menuitemradio, radio
|
input element with a type attribute in the Radio Button state
| radio role
| Role must be either radio or menuitemradio
|
li element whose parent is an ol or ul element
| listitem role
| Role must be either listitem, menuitemcheckbox, menuitemradio, option, tab, or treeitem
|
object element
| No role | If specified, role must be either application, document, or img
|
ol element
| list role
| Role must be either directory, list, listbox, menu, menubar, tablist, toolbar, tree
|
output element
| status role
| No restrictions |
section element
| region role
| Role must be either
alert,
alertdialog,
application,
contentinfo,
dialog,
document,
log,
main,
marquee,
region,
search, or
status
|
ul element
| list role
| Role must be either directory, list, listbox, menu, menubar, tablist, toolbar, tree
|
video element
| No role | If specified, role must be application
|
| The body element | document role
| Role must be either document or application
|
The entry "no role", when
used as a strong native
semantic, means that no role other than presentation can be used.
When used as a default
implied ARIA semantic, it means the user agent has no default
mapping to ARIA roles. (However, it probably will have its own
mappings to the accessibility layer.)
The WAI-ARIA specification neither requires or forbids user agents from enhancing native presentation and interaction behaviors on the basis of WAI- ARIA markup. Even mainstream user agents might choose to expose metadata or navigational features directly or via user-installed extensions; for example, exposing required form fields or landmark navigation. User agents are encouraged to maximize their usefulness to users, including users without disabilities.
Conformance checkers are encouraged to phrase errors such that
authors are encouraged to use more appropriate elements rather than
remove accessibility annotations. For example, if an a
element is marked as having the button role, a conformance
checker could say "Use a more appropriate element to represent a
button, for example a button element or an
input element" rather than "The button role cannot be used with
a elements".
These features can be used to make accessibility tools render content to their users in more useful ways. For example, ASCII art, which is really an image, appears to be text, and in the absence of appropriate annotations would end up being rendered by screen readers as a very painful reading of lots of punctuation. Using the features described in this section, one can instead make the ATs skip the ASCII art and just read the caption:
<figure role="img" aria-labelledby="fish-caption">
<pre>
o .'`/
' / (
O .-'` ` `'-._ .')
_/ (o) '. .' /
) ))) >< <
`\ |_\ _.' '. \
'-._ _ .-' '.)
jgs `\__\
</pre>
<figcaption id="fish-caption">
Joan G. Stark, "<cite>fish</cite>".
October 1997. ASCII on electrons. 28×8.
</figcaption>
</figure>
Implementations of XPath 1.0 that
operate on HTML documents parsed or created in the
manners described in this specification (e.g. as part of the document.evaluate() API) must act as if the
following edit was applied to the XPath 1.0 specification.
First, remove this paragraph:
A QName in the node test is expanded into an expanded-name using the namespace declarations from the expression context. This is the same way expansion is done for element type names in start and end-tags except that the default namespace declared with
xmlnsis not used: if the QName does not have a prefix, then the namespace URI is null (this is the same way attribute names are expanded). It is an error if the QName has a prefix for which there is no namespace declaration in the expression context.
Then, insert in its place the following:
A QName in the node test is expanded into an expanded-name using the namespace declarations from the expression context. If the QName has a prefix, then there must be a namespace declaration for this prefix in the expression context, and the corresponding namespace URI is the one that is associated with this prefix. It is an error if the QName has a prefix for which there is no namespace declaration in the expression context.
If the QName has no prefix and the principal node type of the axis is element, then the default element namespace is used. Otherwise if the QName has no prefix, the namespace URI is null. The default element namespace is a member of the context for the XPath expression. The value of the default element namespace when executing an XPath expression through the DOM3 XPath API is determined in the following way:
- If the context node is from an HTML DOM, the default element namespace is "http://www.w3.org/1999/xhtml".
- Otherwise, the default element namespace URI is null.
This is equivalent to adding the default element namespace feature of XPath 2.0 to XPath 1.0, and using the HTML namespace as the default element namespace for HTML documents. It is motivated by the desire to have implementations be compatible with legacy HTML content while still supporting the changes that this specification introduces to HTML regarding the namespace used for HTML elements, and by the desire to use XPath 1.0 rather than XPath 2.0.
This change is a willful violation of the XPath 1.0 specification, motivated by desire to have implementations be compatible with legacy content while still supporting the changes that this specification introduces to HTML regarding which namespace is used for HTML elements. [XPATH10]
XSLT 1.0 processors outputting to a DOM when the output method is "html" (either explicitly or via the defaulting rule in XSLT 1.0) are affected as follows:
If the transformation program outputs an element in no namespace, the processor must, prior to constructing the corresponding DOM element node, change the namespace of the element to the HTML namespace, ASCII-lowercase the element's local name, and ASCII-lowercase the names of any non-namespaced attributes on the element.
This requirement is a willful violation of the XSLT 1.0 specification, required because this specification changes the namespaces and case-sensitivity rules of HTML in a manner that would otherwise be incompatible with DOM-based XSLT transformations. (Processors that serialize the output are unaffected.) [XSLT10]
There are also additional comments regarding the
interaction of XSLT and HTML in the
script element section.
APIs for dynamically inserting markup into the document interact with the parser, and thus their behavior varies depending on whether they are used with HTML documents (and the HTML parser) or XHTML in XML documents (and the XML parser).
The open()
method comes in several variants with different numbers of
arguments.
open( [ type [, replace ] ] )Causes the Document to be replaced in-place, as if
it was a new Document object, but reusing the
previous object, which is then returned.
If the type argument is omitted or has the
value "text/html", then the resulting
Document has an HTML parser associated with it, which
can be given data to parse using document.write(). Otherwise, all
content passed to document.write() will be parsed
as plain text.
If the replace argument is present and has
the value "replace", the existing entries in
the session history for the Document object are
removed.
The method has no effect if the Document is still
being parsed.
Throws an InvalidStateError exception if the
Document is an XML
document.
open( url, name, features [, replace ] )Works like the window.open()
method.
When called with two or fewer arguments, the method must act as follows:
Document object is not flagged as an HTML document, throw an
InvalidStateError exception and abort these
steps.Let type be the value of the first
argument, if there is one, or "text/html"
otherwise.
Let replace be true if there is a second argument and it is an ASCII case-insensitive match for the value "replace", and false otherwise.
If the document has an active parser that isn't a
script-created parser, and the insertion
point associated with that parser's input
stream is not undefined (that is, it does point to
somewhere in the input stream), then the method does
nothing. Abort these steps and return the Document
object on which the method was invoked.
This basically causes document.open() to be ignored
when it's called in an inline script found during the parsing of
data sent over the network, while still letting it have an effect
when called asynchronously or on a document that is itself being
spoon-fed using these APIs.
Release the storage mutex.
Set the Document's salvageable state to
false.
Prompt to
unload the Document object. If the user
refused to allow the document to be unloaded, then
these steps must be aborted.
Unload the
Document object, with the recycle
parameter set to true.
Abort the
Document.
Unregister all event listeners registered on the
Document node and its descendants.
Remove any tasks
associated with the Document in any task
source.
Remove all child nodes of the document, without firing any mutation events.
Replace the Document's singleton objects with
new instances of those objects. (This includes in particular the
Window, Location, History,
ApplicationCache, and Navigator, objects,
the various BarProp objects, the two
Storage objects, the various
HTMLCollection objects, and objects defined by other
specifications, like Selection and the document's
UndoManager. It also includes all the Web IDL
prototypes in the JavaScript binding, including the
Document object's prototype.)
Change the document's character encoding to UTF-8.
Set the Document object's reload override
flag and set the Document's reload
override buffer to the empty string.
Set the Document's salvageable state back
to true.
Change the document's address to the entry script's document's address.
Create a new HTML parser and associate it with
the document. This is a script-created parser (meaning
that it can be closed by the document.open() and document.close() methods, and
that the tokenizer will wait for an explicit call to document.close() before emitting
an end-of-file token). The encoding confidence is
irrelevant.
Set the current document readiness of the
document to "loading".
If the type string contains a U+003B SEMICOLON character (;), remove the first such character and all characters from it up to the end of the string.
Strip leading and trailing whitespace from type.
If type is not now an ASCII
case-insensitive match for the string
"text/html", then act as if the tokenizer had emitted
a start tag token with the tag name "pre" followed by a single
U+000A LINE FEED (LF) character, then
switch the HTML parser's tokenizer to the
PLAINTEXT state.
Remove all the entries in the browsing context's session history after the current entry. If the current entry is the last entry in the session history, then no entries are removed.
This doesn't necessarily have to affect the user agent's user interface.
Remove any tasks queued by the history traversal task source.
Document.If replace is false, then add a new
entry, just before the last entry, and associate with the new entry
the text that was parsed by the previous parser associated with the
Document object, as well as the state of the document
at the start of these steps. This allows the user to step backwards
in the session history to see the page before it was blown away by
the document.open() call.
This new entry does not have a Document object, so a
new one will be created if the session history is traversed to that
entry.
Finally, set the insertion point to point at just before the end of the input stream (which at this point will be empty).
Return the Document on which the method was
invoked.
The document.open() method does not
affect whether a Document is ready for post-load
tasks or completely loaded.
When called with three or more arguments, the open() method on the
Document object must call the open() method on the Window
object of the Document object, with the same
arguments as the original call to the open() method, and return whatever
that method returned. If the Document object has no
Window object, then the method must throw an
InvalidAccessError exception.
close()Closes the input stream that was opened by the document.open() method.
Throws an InvalidStateError exception if the
Document is an XML
document.
The close()
method must run the following steps:
If the Document object is not flagged as an
HTML document, throw an
InvalidStateError exception and abort these
steps.
If there is no script-created parser associated with the document, then abort these steps.
Insert an explicit "EOF" character at the end of the parser's input stream.
If there is a pending parsing-blocking script, then abort these steps.
Run the tokenizer, processing resulting tokens as they are emitted, and stopping when the tokenizer reaches the explicit "EOF" character or spins the event loop.
document.write()write(text...)In general, adds the given string(s) to the
Document's input stream.
This method has very idiosyncratic behavior. In
some cases, this method can affect the state of the HTML
parser while the parser is running, resulting in a DOM that
does not correspond to the source of the document (e.g. if the
string written is the string "<plaintext>" or "<!--"). In other cases, the call can clear the
current page first, as if document.open() had been called.
In yet more cases, the method is simply ignored, or throws an
exception. To make matters worse, the exact behavior of this
method can in some cases be dependent on network latency, which can lead to failures that are very hard to debug.
For all these reasons, use of this method is strongly
discouraged.
This method throws an InvalidStateError exception
when invoked on XML documents.
Document objects have an
ignore-destructive-writes counter, which is used in
conjunction with the processing of script elements to
prevent external scripts from being able to use document.write() to blow away the
document by implicitly calling document.open(). Initially, the
counter must be set to zero.
The document.write(...)
method must act as follows:
If the method was invoked on an XML
document, throw an InvalidStateError
exception and abort these steps.
If the insertion point is undefined and the
Document's ignore-destructive-writes
counter is greater than zero, then abort these steps.
If the insertion point is undefined, call the
open() method on the document object (with no arguments). If
the user refused to allow the document to be
unloaded, then abort these steps. Otherwise, the
insertion point will point at just before the end of
the (empty) input stream.
Insert the string consisting of the concatenation of all the arguments to the method into the input stream just before the insertion point.
If the Document object's reload override
flag is set, then append the string consisting of the
concatenation of all the arguments to the method to the
Document's reload override buffer.
If there is no pending parsing-blocking script,
have the tokenizer process the characters that were inserted, one
at a time, processing resulting tokens as they are emitted, and
stopping when the tokenizer reaches the insertion point or when
the processing of the tokenizer is aborted by the tree
construction stage (this can happen if a script end
tag token is emitted by the tokenizer).
If the document.write() method was
called from script executing inline (i.e. executing because the
parser parsed a set of script tags), then this is a
reentrant invocation of the
parser.
Finally, return from the method.
document.writeln()writeln(text...)Adds the given string(s) to the Document's input
stream, followed by a newline character. If necessary, calls the
open() method implicitly
first.
This method throws an InvalidStateError exception
when invoked on XML documents.
The document.writeln(...)
method, when invoked, must act as if the document.write() method had been
invoked with the same argument(s), plus an extra argument consisting
of a string containing a single line feed character (U+000A).
html elementhead element followed by a body element.manifestinterface HTMLHtmlElement : HTMLElement {};
The html element represents the root of
an HTML document.
The manifest
attribute gives the address of the document's application
cache manifest, if there is
one. If the attribute is present, the attribute's value must be a
valid non-empty URL potentially surrounded by
spaces.
The manifest attribute
only has an effect during
the early stages of document load. Changing the attribute
dynamically thus has no effect (and thus, no DOM API is provided for
this attribute).
For the purposes of application cache selection,
later base elements cannot affect the resolving of relative URLs in manifest attributes, as the
attributes are processed before those elements are seen.
The window.applicationCache IDL
attribute provides scripted access to the offline application
cache mechanism.
The html element in the following example declares
that the document's language is English.
<!DOCTYPE html> <html lang="en"> <head> <title>Swapping Songs</title> </head> <body> <h1>Swapping Songs</h1> <p>Tonight I swapped some of the songs I wrote with some friends, who gave me some of the songs they wrote. I love sharing my music.</p> </body> </html>
head elementhtml element.iframe srcdoc document or if title information is available from a higher-level protocol: Zero or more elements of metadata content.title element.interface HTMLHeadElement : HTMLElement {};
The head element represents a
collection of metadata for the Document.
The collection of metadata in a head element can be
large or small. Here is an example of a very short one:
<!doctype html> <html> <head> <title>A document with a short head</title> </head> <body> ...
Here is an example of a longer one:
<!DOCTYPE HTML> <HTML> <HEAD> <META CHARSET="UTF-8"> <BASE HREF="http://www.example.com/"> <TITLE>An application with a long head</TITLE> <LINK REL="STYLESHEET" HREF="default.css"> <LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text"> <SCRIPT SRC="support.js"></SCRIPT> <META NAME="APPLICATION-NAME" CONTENT="Long headed application"> </HEAD> <BODY> ...
The title element is a required child
in most situations, but when a higher-level protocol provides title
information, e.g. in the Subject line of an e-mail when HTML is used
as an e-mail authoring format, the title element can be
omitted.
title elementhead element containing no other title elements.interface HTMLTitleElement : HTMLElement { attribute DOMString text; };
The title element represents the
document's title or name. Authors should use titles that identify
their documents even when they are used out of context, for example
in a user's history or bookmarks, or in search results. The
document's title is often different from its first heading, since the
first heading does not have to stand alone when taken out of
context.
There must be no more than one title element per
document.
text [ = value ]Returns the contents of the element, ignoring child nodes that
aren't Text nodes.
Can be set, to replace the element's children with the given value.
The IDL attribute text must return a
concatenation of the contents of all the Text nodes
that are children of the title element (ignoring any
other nodes such as comments or elements), in tree order. On
setting, it must act the same way as the textContent
IDL attribute.
Here are some examples of appropriate titles, contrasted with the top-level headings that might be used on those same pages.
<title>Introduction to The Mating Rituals of Bees</title>
...
<h1>Introduction</h1>
<p>This companion guide to the highly successful
<cite>Introduction to Medieval Bee-Keeping</cite> book is...
The next page might be a part of the same site. Note how the title describes the subject matter unambiguously, while the first heading assumes the reader knows what the context is and therefore won't wonder if the dances are Salsa or Waltz:
<title>Dances used during bee mating rituals</title>
...
<h1>The Dances</h1>
The string to use as the document's title is given by the document.title IDL attribute.
User agents should use the document's title when referring to the
document in their user interface. When the contents of a
title element are used in this way, the
directionality of that title element should be
used to set the directionality of the document's title in the user
interface.
base elementhead element containing no other base elements.hreftargetinterface HTMLBaseElement : HTMLElement { attribute DOMString href; attribute DOMString target; };
The base element allows authors to specify the
document base URL for the purposes of resolving relative URLs, and the name
of the default browsing context for the purposes of
following hyperlinks. The element does not represent any content beyond this
information.
There must be no more than one base element per
document.
A base element must have either an href attribute, a target attribute, or both.
The href content
attribute, if specified, must contain a valid URL potentially
surrounded by spaces.
A base element, if it has an href attribute, must come before any
other elements in the tree that have attributes defined as taking
URLs, except the html element
(its manifest attribute
isn't affected by base elements).
If there are multiple base elements
with href attributes, all but the
first are ignored.
The target
attribute, if specified, must contain a valid browsing context
name or keyword, which specifies which browsing
context is to be used as the default when hyperlinks and forms in the Document cause navigation.
A base element, if it has a target attribute, must come before
any elements in the tree that represent hyperlinks.
If there are multiple base elements
with target attributes, all but
the first are ignored.
The href and target IDL attributes
must reflect the respective content attributes of the
same name.
In this example, a base element is used to set the
document base URL:
<!DOCTYPE html>
<html>
<head>
<title>This is an example for the <base> element</title>
<base href="http://www.example.com/news/index.html">
</head>
<body>
<p>Visit the <a href="archives.html">archives</a>.</p>
</body>
</html>
The link in the above example would be a link to "http://www.example.com/news/archives.html".
link elementitemprop attribute is present: flow content.itemprop attribute is present: phrasing content.noscript element that is a child of a head element.itemprop attribute is present: where phrasing content is expected.hrefrelmediahreflangtypesizestitle attribute has special semantics on this element.interface HTMLLinkElement : HTMLElement { attribute boolean disabled; attribute DOMString href; attribute DOMString rel; readonly attribute DOMTokenList relList; attribute DOMString media; attribute DOMString hreflang; attribute DOMString type; [PutForwards=value] readonly attribute DOMSettableTokenList sizes; }; HTMLLinkElement implements LinkStyle;
The link element allows authors to link their
document to other resources.
The destination of the link(s) is given by the href attribute, which must
be present and must contain a valid non-empty URL potentially
surrounded by spaces. If the href attribute is absent, then the
element does not define a link.
A link element must have either a rel attribute or an itemprop attribute, but not both.
If the rel
attribute is used, the element is restricted to the
head element. When used with the itemprop attribute, the element can be
used both in the head element and in the
body of the page, subject to the constraints of the
microdata model.
A link element must have rel attribute.
The types of link indicated (the relationships) are given by the
value of the rel
attribute, which, if present, must have a value that is a set
of space-separated tokens. The allowed
keywords and their meanings are defined in a later
section. If the rel attribute is absent, has no
keywords, or if none of the keywords used are allowed according to
the definitions in this specification, then the element does not
create any links.
Two categories of links can be created using the
link element: Links to external resources and hyperlinks. The link
types section defines whether a particular link type is an
external resource or a hyperlink. One link element can
create multiple links (of which some might be external resource
links and some might be hyperlinks); exactly which and how many
links are created depends on the keywords given in the rel attribute. User agents must process
the links on a per-link basis, not a per-element basis.
Each link created for a link element is
handled separately. For instance, if there are two link
elements with rel="stylesheet", they each
count as a separate external resource, and each is affected by its
own attributes independently. Similarly, if a single
link element has a rel attribute with the value next stylesheet, it creates both a
hyperlink (for the next
keyword) and an external resource link (for the stylesheet keyword), and they are
affected by other attributes (such as media or title) differently.
For example, the following link element creates two
hyperlinks (to the same page):
<link rel="author license" href="/about">
The two links created by this element are one whose semantic is that the target page has information about the current page's author, and one whose semantic is that the target page has information regarding the license under which the current page is provided.
The exact behavior for links to external resources depends on the exact relationship, as defined for the relevant link type. Some of the attributes control whether or not the external resource is to be applied (as defined below).
For external resources that are represented in the DOM (for example, style sheets), the DOM representation must be made available even if the resource is not applied. To obtain the resource, the user agent must run the following steps:
If the href attribute's
value is the empty string, then abort these steps.
Resolve the
URL given by the href attribute, relative to the
element.
If the previous step fails, then abort these steps.
Fetch the resulting absolute URL.
User agents may opt to only try to obtain such resources when they are needed, instead of pro-actively fetching all the external resources that are not applied.
The semantics of the protocol used (e.g. HTTP) must be followed when fetching external resources. (For example, redirects will be followed and 404 responses will cause the external resource to not be applied.)
Once the attempts to obtain the resource and its critical
subresources are complete, the user agent must, if the loads
were successful, queue a task to fire a simple
event named load at the
link element, or, if the resource or one of its
critical subresources failed to completely load for any
reason (e.g. DNS error, HTTP 404 response, a connection being
prematurely closed, unsupported Content-Type), queue a
task to fire a simple event named error at the link
element. Non-network errors in processing the resource or its
subresources (e.g. CSS parse errors, PNG decoding errors) are not
failures for the purposes of this paragraph.
The task source for these tasks is the DOM manipulation task source.
The element must delay the load event of the element's document until all the attempts to obtain the resource and its critical subresources are complete. (Resources that the user agent has not yet attempted to obtain, e.g. because it is waiting for the resource to be needed, do not delay the load event.)
Interactive user agents may provide users with a
means to follow the
hyperlinks created using the link element,
somewhere within their user interface. The exact interface is not
defined by this specification, but it could include the following
information (obtained from the element's attributes, again as
defined below), in some form or another (possibly simplified), for
each hyperlink created with each link element in the
document:
rel attribute)title attribute).href attribute).hreflang attribute).media attribute).User agents could also include other information, such as the
type of the resource (as given by the type attribute).
Hyperlinks created with the link
element and its rel attribute
apply to the whole page. This contrasts with the rel attribute of a
and area elements, which indicates the type of a link
whose context is given by the link's location within the
document.
The media
attribute says which media the resource applies to. The value must
be a valid media query.
If the link is a hyperlink then the media attribute is purely advisory,
and describes for which media the document in question was
designed.
However, if the link is an external resource link,
then the media attribute is
prescriptive. The user agent must apply the external resource when
the media attribute's value
matches the environment and the other relevant
conditions apply, and must not apply it otherwise.
The external resource might have further
restrictions defined within that limit its applicability. For
example, a CSS style sheet might have some @media blocks. This specification does not override
such further restrictions or requirements.
The default, if the media attribute is omitted, is "all", meaning that by default links apply to all
media.
The hreflang
attribute on the link element has the same semantics as
the hreflang
attribute on a and area
elements.
The type attribute
gives the MIME type of the linked resource. It is
purely advisory. The value must be a valid MIME
type.
For external resource
links, the type attribute
is used as a hint to user agents so that they can avoid fetching
resources they do not support. If the attribute
is present, then the user agent must assume that the resource is of
the given type (even if that is not a valid MIME type,
e.g. the empty string). If the attribute is omitted, but the
external resource link type has a default type defined, then the
user agent must assume that the resource is of that type. If the UA
does not support the given MIME type for the given link
relationship, then the UA should not obtain the resource; if the UA
does support the given MIME type for the given link
relationship, then the UA should obtain the resource at the
appropriate time as specified for the external resource
link's particular type. If the attribute is omitted, and the
external resource link type does not have a default type defined,
but the user agent would obtain the resource if the type
was known and supported, then the user agent should obtain the resource under the
assumption that it will be supported.
User agents must not consider the type attribute authoritative —
upon fetching the resource, user agents must not use the type attribute to determine its actual
type. Only the actual type (as defined in the next paragraph) is
used to determine whether to apply the resource, not the
aforementioned assumed type.
If the external resource link type defines rules for processing the resource's Content-Type metadata, then those rules apply. Otherwise, if the resource is expected to be an image, user agents may apply the image sniffing rules, with the official type being the type determined from the resource's Content-Type metadata, and use the resulting sniffed type of the resource as if it was the actual type. Otherwise, if neither of these conditions apply or if the user agent opts not to apply the image sniffing rules, then the user agent must use the resource's Content-Type metadata to determine the type of the resource. If there is no type metadata, but the external resource link type has a default type defined, then the user agent must assume that the resource is of that type.
The stylesheet
link type defines rules for processing the resource's Content-Type metadata.
Once the user agent has established the type of the resource, the user agent must apply the resource if it is of a supported type and the other relevant conditions apply, and must ignore the resource otherwise.
If a document contains style sheet links labeled as follows:
<link rel="stylesheet" href="A" type="text/plain"> <link rel="stylesheet" href="B" type="text/css"> <link rel="stylesheet" href="C">
...then a compliant UA that supported only CSS style sheets
would fetch the B and C files, and skip the A file (since
text/plain is not the MIME type for CSS style
sheets).
For files B and C, it would then check the actual types returned
by the server. For those that are sent as text/css, it
would apply the styles, but for those labeled as
text/plain, or any other type, it would not.
If one of the two files was returned without a
Content-Type metadata, or with a syntactically
incorrect type like Content-Type: "null", then the default type
for stylesheet links would kick
in. Since that default type is text/css, the
style sheet would nonetheless be applied.
The title
attribute gives the title of the link. With one exception, it is
purely advisory. The value is text. The exception is for style sheet
links, where the title
attribute defines alternative style sheet sets.
The title
attribute on link elements differs from the global
title attribute of most other
elements in that a link without a title does not inherit the title
of the parent element: it merely has no title.
The sizes attribute is used
with the icon link type. The attribute
must not be specified on link elements that do not have
a rel attribute that specifies
the icon keyword.
HTTP Link: header fields, if
supported, must be assumed to come before any links in the document,
in the order that they were given in the HTTP message. These header
fields are to be processed according to the rules given in the
relevant specifications. [HTTP] [WEBLINK]
Registration of relation types in HTTP Link: header fields is distinct from HTML link types, and thus their semantics can be different from same-named HTML types.
The IDL attributes href, rel, media, hreflang, type, and sizes each must
reflect the respective content attributes of the same
name.
The IDL attribute relList must reflect the rel content attribute.
The IDL attribute disabled only applies
to style sheet links. When the link element defines a
style sheet link, then the disabled attribute behaves as
defined for the alternative
style sheets DOM. For all other link elements it
always return false and does nothing on setting.
The LinkStyle interface is also implemented by
this element; the styling processing model defines
how. [CSSOM]
Here, a set of link elements provide some style
sheets:
<!-- a persistent style sheet --> <link rel="stylesheet" href="default.css"> <!-- the preferred alternate style sheet --> <link rel="stylesheet" href="green.css" title="Green styles"> <!-- some alternate style sheets --> <link rel="alternate stylesheet" href="contrast.css" title="High contrast"> <link rel="alternate stylesheet" href="big.css" title="Big fonts"> <link rel="alternate stylesheet" href="wide.css" title="Wide screen">
The following example shows how you can specify versions of the page that use alternative formats, are aimed at other languages, and that are intended for other media:
<link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML"> <link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML"> <link rel=alternate href="/en/html/print" hreflang=en type=text/html media=print title="English HTML (for printing)"> <link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)"> <link rel=alternate href="/en/pdf" hreflang=en type=application/pdf title="English PDF"> <link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF">
meta elementitemprop attribute is present: flow content.itemprop attribute is present: phrasing content.charset attribute is present, or if the element's http-equiv attribute is in the Encoding declaration state: in a head element.http-equiv attribute is present but not in the Encoding declaration state: in a head element.http-equiv attribute is present but not in the Encoding declaration state: in a noscript element that is a child of a head element.name attribute is present: where metadata content is expected.itemprop attribute is present: where metadata content is expected.itemprop attribute is present: where phrasing content is expected.namehttp-equivcontentcharsetinterface HTMLMetaElement : HTMLElement { attribute DOMString name; attribute DOMString httpEquiv; attribute DOMString content; };
The meta element represents various
kinds of metadata that cannot be expressed using the
title, base, link,
style, and script elements.
The meta element can represent document-level
metadata with the name
attribute, pragma directives with the http-equiv attribute, and the
file's character encoding declaration when an HTML
document is serialized to string form (e.g. for transmission over
the network or for disk storage) with the charset attribute.
Exactly one of the name,
http-equiv, charset, and itemprop attributes must be
specified.
If either name, http-equiv, or itemprop is specified, then the content attribute must also be
specified. Otherwise, it must be omitted.
Exactly one of the name,
http-equiv, and charset attributes must be
specified.
If either name or http-equiv is specified, then
the content attribute must
also be specified. Otherwise, it must be omitted.
The charset
attribute specifies the character encoding used by the
document. This is a character encoding declaration. If
the attribute is present in an XML
document, its value must be an ASCII
case-insensitive match for the string "UTF-8" (and the document is therefore forced to use
UTF-8 as its encoding).
The charset
attribute on the meta element has no effect in XML
documents, and is only allowed in order to facilitate migration to
and from XHTML.
There must not be more than one meta element with a
charset attribute per
document.
The content
attribute gives the value of the document metadata or pragma
directive when the element is used for those purposes. The allowed
values depend on the exact context, as described in subsequent
sections of this specification.
If a meta element has a name attribute, it sets
document metadata. Document metadata is expressed in terms of
name-value pairs, the name
attribute on the meta element giving the name, and the
content attribute on the same
element giving the value. The name specifies what aspect of metadata
is being set; valid names and the meaning of their values are
described in the following sections. If a meta element
has no content attribute,
then the value part of the metadata name-value pair is the empty
string.
The name and content IDL attributes
must reflect the respective content attributes of the
same name. The IDL attribute httpEquiv must
reflect the content attribute http-equiv.
This specification defines a few names for the name attribute of the
meta element.
Names are case-insensitive, and must be compared in an ASCII case-insensitive manner.
application-nameThe value must be a short free-form string giving the name
of the Web application that the page represents. If the page is not
a Web application, the application-name metadata name
must not be used. There must not be more than one meta
element with its name attribute
set to the value application-name per
document. User agents may use the application
name in UI in preference to the page's title, since
the title might include status messages and the like relevant to
the status of the page at a particular moment in time instead of
just being the name of the application.
authorThe value must be a free-form string giving the name of one of the page's authors.
descriptionThe value must be a free-form string that describes the
page. The value must be appropriate for use in a directory of
pages, e.g. in a search engine. There must not be more than one
meta element with its name attribute set to the value description per document.
generatorThe value must be a free-form string that identifies one of the software packages used to generate the document. This value must not be used on hand-authored pages.
Here is what a tool called "Frontweaver" could include in its
output, in the page's head element, to identify
itself as the tool used to generate the page:
<meta name=generator content="Frontweaver 8.2">
keywordsThe value must be a set of comma-separated tokens, each of which is a keyword relevant to the page.
This page about typefaces on British motorways uses a
meta element to specify some keywords that users
might use to look for the page:
<!DOCTYPE HTML> <html> <head> <title>Typefaces on UK motorways</title> <meta name="keywords" content="british,type face,font,fonts,highway,highways"> </head> <body> ...
Many search engines do not consider such keywords, because this feature has historically been used unreliably and even misleadingly as a way to spam search engine results in a way that is not helpful for users.
To obtain the list of keywords that the author has specified as applicable to the page, the user agent must run the following steps:
Let keywords be an empty list.
For each meta element with a name attribute and a content attribute and whose
name attribute's value is
keywords, run the following
substeps:
Split the value
of the element's content
attribute on commas.
Add the resulting tokens, if any, to keywords.
Remove any duplicates from keywords.
Return keywords. This is the list of keywords that the author has specified as applicable to the page.
User agents should not use this information when there is insufficient confidence in the reliability of the value.
For instance, it would be reasonable for a content management system to use the keyword information of pages within the system to populate the index of a site-specific search engine, but a large-scale content aggregator that used this information would likely find that certain users would try to game its ranking mechanism through the use of inappropriate keywords.
Extensions to the predefined set of metadata names may be registered in the WHATWG Wiki MetaExtensions page. [WHATWGWIKI]
Anyone is free to edit the WHATWG Wiki MetaExtensions page at any time to add a type. These new names must be specified with the following information:
The actual name being defined. The name should not be confusingly similar to any other defined name (e.g. differing only in case).
A short non-normative description of what the metadata name's meaning is, including the format the value is required to be in.
A list of other names that have exactly the same processing requirements. Authors should not use the names defined to be synonyms, they are only intended to allow user agents to support legacy content. Anyone may remove synonyms that are not used in practice; only names that need to be processed as synonyms for compatibility with legacy content are to be registered in this way.
One of the following:
If a metadata name is found to be redundant with existing values, it should be removed and listed as a synonym for the existing value.
If a metadata name is registered in the "proposed" state for a period of a month or more without being used or specified, then it may be removed from the registry.
If a metadata name is added with the "proposed" status and found to be redundant with existing values, it should be removed and listed as a synonym for the existing value. If a metadata name is added with the "proposed" status and found to be harmful, then it should be changed to "discontinued" status.
Anyone can change the status at any time, but should only do so in accordance with the definitions above.
Conformance checkers must use the information given on the WHATWG Wiki MetaExtensions page to establish if a value is allowed or not: values defined in this specification or marked as "proposed" or "ratified" must be accepted, whereas values marked as "discontinued" or not listed in either this specification or on the aforementioned page must be rejected as invalid. Conformance checkers may cache this information (e.g. for performance reasons or to avoid the use of unreliable network connectivity).
When an author uses a new metadata name not defined by either this specification or the Wiki page, conformance checkers should offer to add the value to the Wiki, with the details described above, with the "proposed" status.
Metadata names whose values are to be URLs must not be proposed or accepted. Links must
be represented using the link element, not the
meta element.
When the http-equiv attribute
is specified on a meta element, the element is a pragma
directive.
The http-equiv
attribute is an enumerated attribute. The following
table lists the keywords defined for this attribute. The states
given in the first cell of the rows with keywords give the states to
which those keywords map. Some of the keywords
are non-conforming, as noted in the last column.
| State | Keyword | Notes |
|---|---|---|
| Content Language | content-language
| Non-conforming |
| Encoding declaration | content-type
| |
| Default style | default-style
| |
| Refresh | refresh
| |
| Cookie setter | set-cookie
| Non-conforming |
When a meta element is inserted into the document, if its
http-equiv attribute is
present and represents one of the above states, then the user agent
must run the algorithm appropriate for that state, as described in
the following list:
http-equiv="content-language")
This feature is non-conforming. Authors are
encouraged to use the lang
attribute instead.
This pragma sets the pragma-set default language. Until the pragma is successfully processed, there is no pragma-set default language.
If another meta element with an http-equiv attribute in the
Content
Language state has already been successfully processed
(i.e. when it was inserted the user agent processed it and
reached the last step of this list of steps), then abort these
steps.
If the meta element has no content attribute, or if that
attribute's value is the empty string, then abort these
steps.
If the element's content attribute contains a
U+002C COMMA character (,) then abort these steps.
Let input be the value of the
element's content
attribute.
Let position point at the first character of input.
Skip whitespace.
Collect a sequence of characters that are not space characters.
Let the pragma-set default language be the string that resulted from the previous step.
This pragma is not exactly equivalent to the HTTP
Content-Language header. [HTTP]
http-equiv="content-type")
The Encoding
declaration state is just an alternative form of setting
the charset attribute: it is a
character encoding declaration. This state's user agent requirements are all handled
by the parsing section of the specification.
For meta elements with an http-equiv attribute in the
Encoding
declaration state, the content attribute must have a
value that is an ASCII case-insensitive match for a
string that consists of: the literal string "text/html;", optionally followed by any number of
space characters, followed by
the literal string "charset=", followed by
the character encoding name of the character encoding
declaration.
A document must not contain both a meta element
with an http-equiv
attribute in the Encoding declaration
state and a meta element with the charset attribute present.
The Encoding
declaration state may be used in HTML
documents, but elements with an http-equiv attribute in that
state must not be used in XML documents.
http-equiv="default-style")
This pragma sets the name of the default alternative style sheet set.
If the meta element has no content attribute, or if that
attribute's value is the empty string, then abort these
steps.
Set the preferred style sheet set to the
value of the element's content attribute. [CSSOM]
http-equiv="refresh")
This pragma acts as timed redirect.
If another meta element with an http-equiv attribute in the
Refresh state
has already been successfully processed (i.e. when it was
inserted the user agent processed it and reached the last step of
this list of steps), then abort these steps.
If the meta element has no content attribute, or if that
attribute's value is the empty string, then abort these
steps.
Let input be the value of the
element's content
attribute.
Let position point at the first character of input.
Skip whitespace.
Collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and parse the resulting string using the rules for parsing non-negative integers. If the sequence of characters collected is the empty string, then no number will have been parsed; abort these steps. Otherwise, let time be the parsed number.
Collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9) and U+002E FULL STOP (.). Ignore any collected characters.
Skip whitespace.
Let url be the address of the current page.
If the character in input pointed to by position is a U+003B SEMICOLON (;), then advance position to the next character. Otherwise, jump to the last step.
Skip whitespace.
If the character in input pointed to by position is a U+0055 LATIN CAPITAL LETTER U character (U) or a U+0075 LATIN SMALL LETTER U character (u), then advance position to the next character. Otherwise, jump to the last step.
If the character in input pointed to by position is a U+0052 LATIN CAPITAL LETTER R character (R) or a U+0072 LATIN SMALL LETTER R character (r), then advance position to the next character. Otherwise, jump to the last step.
If the character in input pointed to by position is s U+004C LATIN CAPITAL LETTER L character (L) or a U+006C LATIN SMALL LETTER L character (l), then advance position to the next character. Otherwise, jump to the last step.
Skip whitespace.
If the character in input pointed to by position is a U+003D EQUALS SIGN (=), then advance position to the next character. Otherwise, jump to the last step.
Skip whitespace.
If the character in input pointed to by position is either a U+0027 APOSTROPHE character (') or U+0022 QUOTATION MARK character ("), then let quote be that character, and advance position to the next character. Otherwise, let quote be the empty string.
Let url be equal to the substring of input from the character at position to the end of the string.
If quote is not the empty string, and there is a character in url equal to quote, then truncate url at that character, so that it and all subsequent characters are removed.
Strip any trailing space characters from the end of url.
Strip any U+0009 CHARACTER TABULATION (tab), U+000A LINE FEED (LF), and U+000D CARRIAGE RETURN (CR) characters from url.
Resolve the url value to an absolute URL,
relative to the meta element. If this fails, abort
these steps.
Perform one or more of the following steps:
After the refresh has come due (as defined below), if the
user has not canceled the redirect and if the
meta element's Document's
browsing context did not have the sandboxed
automatic features browsing context flag set when the
Document was created, navigate the
Document's browsing context to url, with replacement enabled, and
with the Document's browsing context
as the source browsing context.
For the purposes of the previous paragraph, a refresh is said to have come due as soon as the later of the following two conditions occurs:
meta element was inserted into the
Document, adjusted to take into account
user or user agent preferences.Provide the user with an interface that, when selected, navigates a browsing context to url, with the document's browsing context as the source browsing context.
Do nothing.
In addition, the user agent may, as with anything, inform the user of any and all aspects of its operation, including the state of any timers, the destinations of any timed redirects, and so forth.
For meta elements with an http-equiv attribute in the
Refresh state,
the content attribute must
have a value consisting either of:
URL", followed by a U+003D
EQUALS SIGN character (=), followed by a valid URL
that does not start with a literal U+0027 APOSTROPHE (') or
U+0022 QUOTATION MARK (") character.In the former case, the integer represents a number of seconds before the page is to be reloaded; in the latter case the integer represents a number of seconds before the page is to be replaced by the page at the given URL.
A news organization's front page could include the following
markup in the page's head element, to ensure that
the page automatically reloads from the server every five
minutes:
<meta http-equiv="Refresh" content="300">
A sequence of pages could be used as an automated slide show by making each page refresh to the next page in the sequence, using markup such as the following:
<meta http-equiv="Refresh" content="20; URL=page4.html">
http-equiv="set-cookie")
This pragma sets an HTTP cookie. [COOKIES]
It is non-conforming. Real HTTP headers should be used instead.
If the meta element has no content attribute, or if that
attribute's value is the empty string, then abort these
steps.
Obtain the storage mutex.
Act as if receiving a set-cookie-string for
the document's address via a "non-HTTP" API,
consisting of the value of the element's content attribute encoded as
UTF-8. [COOKIES] [RFC3629]
There must not be more than one meta element with
any particular state in the document at a time.
Extensions to the predefined set of pragma directives may, under certain conditions, be registered in the WHATWG Wiki PragmaExtensions page. [WHATWGWIKI]
Such extensions must use a name that is identical to an HTTP header registered in the Permanent Message Header Field Registry, and must have behavior identical to that described for the HTTP header. [IANAPERMHEADERS]
Pragma directives corresponding to headers describing metadata, or not requiring specific user agent processing, must not be registered; instead, use metadata names. Pragma directives corresponding to headers that affect the HTTP processing model (e.g. caching) must not be registered, as they would result in HTTP-level behavior being different for user agents that implement HTML than for user agents that do not.
Anyone is free to edit the WHATWG Wiki PragmaExtensions page at any time to add a pragma directive satisfying these conditions. Such registrations must specify the following information:
The actual name being defined. The name must match a previously-registered HTTP name with the same requirements.
A short non-normative description of the purpose of the pragma directive.
Conformance checkers must use the information given on the WHATWG Wiki PragmaExtensions page to establish if a value is allowed or not: values defined in this specification or listed on the aforementioned page must be accepted, whereas values not listed in either this specification or on the aforementioned page must be rejected as invalid. Conformance checkers may cache this information (e.g. for performance reasons or to avoid the use of unreliable network connectivity).
A character encoding declaration is a mechanism by which the character encoding used to store or transmit a document is specified.
The following restrictions apply to character encoding declarations:
In addition, due to a number of restrictions on meta
elements, there can only be one meta-based character
encoding declaration per document.
If an HTML document does not
start with a BOM, and if its encoding is not explicitly given by
Content-Type metadata, and the
document is not an iframe srcdoc document, then the
character encoding used must be an ASCII-compatible character
encoding, and, in addition, if that encoding isn't US-ASCII
itself, then the encoding must be specified using a
meta element with a charset attribute or a
meta element with an http-equiv attribute in the
Encoding declaration
state.
If the document is an iframe srcdoc document, the
document must not have a character encoding
declaration. (In this case, the source is already decoded,
since it is part of the document that contained the
iframe.)
If an HTML document contains
a meta element with a charset attribute or a
meta element with an http-equiv attribute in the
Encoding declaration
state, then the character encoding used must be an
ASCII-compatible character encoding.
Authors are encouraged to use UTF-8. Conformance checkers may advise authors against using legacy encodings. [RFC3629]
Authoring tools should default to using UTF-8 for newly-created documents. [RFC3629]
Encodings in which a series of bytes in the range 0x20 to 0x7E
can encode characters other than the corresponding characters in the
range U+0020 to U+007E represent a potential security vulnerability:
a user agent that does not support the encoding (or does not support
the label used to declare the encoding, or does not use the same
mechanism to detect the encoding of unlabelled content as another
user agent) might end up interpreting technically benign plain text
content as HTML tags and JavaScript. For example, this applies to
encodings in which the bytes corresponding to "<script>" in ASCII can encode a different
string. Authors should not use such encodings, which are known to
include JIS_C6226-1983,
JIS_X0212-1990, HZ-GB-2312, JOHAB (Windows code
page 1361), encodings based on ISO-2022, and encodings based on EBCDIC. Furthermore, authors must not
use the CESU-8, UTF-7, BOCU-1 and SCSU encodings, which also fall
into this category, because these encodings were never intended for
use for Web content.
[RFC1345]
[RFC1842]
[RFC1468]
[RFC2237]
[RFC1554]
[CP50220]
[RFC1922]
[RFC1557]
[CESU8]
[UTF7]
[BOCU1]
[SCSU]
Authors should not use UTF-32, as the encoding detection algorithms described in this specification intentionally do not distinguish it from UTF-16. [UNICODE]
Using non-UTF-8 encodings can have unexpected results on form submission and URL encodings, which use the document's character encoding by default.
In XHTML, the XML declaration should be used for inline character encoding information, if necessary.
In HTML, to declare that the character encoding is UTF-8, the
author could include the following markup near the top of the
document (in the head element):
<meta charset="utf-8">
In XML, the XML declaration would be used instead, at the very top of the markup:
<?xml version="1.0" encoding="utf-8"?>
style elementscoped attribute is present: flow content.scoped attribute is absent: where metadata content is expected.scoped attribute is absent: in a noscript element that is a child of a head element.scoped attribute is present: where flow content is expected, but before any other flow content other than inter-element whitespace, and not as the child of an element whose content model is transparent.type attribute, but must match requirements described in prose below.mediatypescopedtitle attribute has special semantics on this element.interface HTMLStyleElement : HTMLElement { attribute boolean disabled; attribute DOMString media; attribute DOMString type; attribute boolean scoped; }; HTMLStyleElement implements LinkStyle;
The style element allows authors to embed style
information in their documents. The style element is
one of several inputs to the styling processing
model. The element does not represent content for the user.
The type
attribute gives the styling language. If the attribute is present,
its value must be a valid MIME type that designates a
styling language. The charset parameter must
not be specified. The default value for the type attribute, which is used if the
attribute is absent, is "text/css". [RFC2318]
When examining types to determine if they support the language,
user agents must not ignore unknown MIME parameters — types
with unknown parameters must be assumed to be unsupported. The charset parameter must be treated as an unknown
parameter for the purpose of comparing MIME
types here.
The media
attribute says which media the styles apply to. The value must be a
valid media query. The user agent
must apply the styles when the media attribute's value
matches the environment and the other relevant
conditions apply, and must not apply them otherwise.
The styles might be further limited in scope,
e.g. in CSS with the use of @media
blocks. This specification does not override such further
restrictions or requirements.
The default, if the media attribute is omitted, is
"all", meaning that by default styles apply to
all media.
The scoped
attribute is a boolean attribute. If present, it
indicates that the styles are intended just for the subtree rooted
at the style element's parent element, as opposed to
the whole Document.
If the scoped attribute is
present and the element has a parent element, then the
style element must be the first node of flow
content in its parent element other than inter-element
whitespace, and the parent element's content model must not
have a transparent component.
This implies that only one scoped style
element is allowed at a time, and that such elements cannot be
children of, e.g., a or ins elements, even
when those are used as flow content containers.
If the scoped attribute is
present, then the user agent must apply the specified style
information only to the style element's parent element
(if any), and that element's descendants. Otherwise, the specified
styles must, if applied, be applied to the entire document.
The following will eventually be moved to a CSS specification; it is specified here only on an interim basis until an editor can be found to own this.
Within scoped CSS resources, authors may use an @global @-rule. The syntax of this rule is defined
as follows.
The following production is added to the grammar:
global : GLOBAL_SYM S* ruleset ;
The following rules are added to the Flex tokenizer:
B b|\\0{0,4}(42|62)(\r\n|[ \t\r\n\f])?
@{G}{L}{O}{B}{A}{L} {return GLOBAL_SYM;}
Simple selectors in rule sets prefixed by the @global @-rule in scoped CSS resources must be
processed in the same way as normal rule sets in non-scoped CSS
resources.
Simple selectors in scoped CSS resources that are not prefixed by
an @global @-rule must only match the
style element's parent element (if any), and that
element's descendants.
For scoped CSS resources, the effect of other @-rules must be
scoped to the scoped sheet and its subresources, even if the @-rule
in question would ordinarily apply to all style sheets that affect
the Document. Any '@page' rules in scoped CSS resources
must be ignored.
For example, an '@font-face' rule defined in a scoped style sheet would only define the font for the purposes of font rules in the scoped section; style sheets outside the scoped section using the same font name would not end up using that embedded font.
The title attribute on
style elements defines alternative style sheet
sets. If the style element has no title attribute, then it has no
title; the title attribute of
ancestors does not apply to the style element. [CSSOM]
The title
attribute on style elements, like the title attribute on link
elements, differs from the global title attribute in that a
style block without a title does not inherit the title
of the parent element: it merely has no title.
The textContent of a style element must
match the style production in the following
ABNF, the character set for which is Unicode. [ABNF]
style = no-c-start *( c-start no-c-end c-end no-c-start ) no-c-start = <any string that doesn't contain a substring that matches c-start > c-start = "<!--" no-c-end = <any string that doesn't contain a substring that matches c-end > c-end = "-->"
All descendant elements must be processed, according to their
semantics, before the style element itself is
evaluated. For styling languages that consist of pure text (as
opposed to XML), user agents must evaluate style
elements by passing the concatenation of the contents of all the
Text nodes that are children of the
style element (not any other nodes such as comments or
elements), in tree order, to the style system. For
XML-based styling languages, user agents must pass all the child
nodes of the style element to the style system.
All URLs found by the styling language's processor must be resolved, relative to the element (or as defined by the styling language), when the processor is invoked.
Once the attempts to obtain the style sheet's critical
subresources, if any, are complete, or, if the style sheet
has no critical subresources, once the style sheet has
been parsed and processed, the user agent must, if the loads were
successful or there were none, queue a task to
fire a simple event named load at the style element,
or, if one of the style sheet's critical subresources
failed to completely load for any reason (e.g. DNS error, HTTP 404
response, a connection being prematurely closed, unsupported
Content-Type), queue a task to fire a simple
event named error at the
style element. Non-network errors in processing the
style sheet or its subresources (e.g. CSS parse errors, PNG decoding
errors) are not failures for the purposes of this paragraph.
The task source for these tasks is the DOM manipulation task source.
The element must delay the load event of the element's document until all the attempts to obtain the style sheet's critical subresources, if any, are complete.
This specification does not specify a style system, but CSS is expected to be supported by most Web browsers. [CSS]
The media, type and scoped IDL attributes
must reflect the respective content attributes of the
same name.
The disabled
IDL attribute behaves as defined for the alternative style sheets
DOM.
The LinkStyle interface is also implemented by
this element; the styling processing model defines
how. [CSSOM]
The following document has its emphasis styled as bright red text rather than italics text, while leaving titles of works and Latin words in their default italics. It shows how using appropriate elements enables easier restyling of documents.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My favorite book</title>
<style>
body { color: black; background: white; }
em { font-style: normal; color: red; }
</style>
</head>
<body>
<p>My <em>favorite</em> book of all time has <em>got</em> to be
<cite>A Cat's Life</cite>. It is a book by P. Rahmel that talks
about the <i lang="la">Felis Catus</i> in modern human society.</p>
</body>
</html>
The link and style elements can provide
styling information for the user agent to use when rendering the
document. The CSS and CSSOM specifications specify what styling
information is to be used by the user agent and how it is to be
used. [CSS] [CSSOM]
The style and link elements implement
the LinkStyle interface. [CSSOM]
For style elements, if the user agent does not
support the specified styling language, then the sheet attribute of the element's
LinkStyle interface must return null. Similarly,
link elements that do not represent external resource links that contribute to
the styling processing model (i.e. that do not have a stylesheet keyword in their rel attribute), or for which the
link is an alternative stylesheet but whose title content attribute is absent or empty,
must have their LinkStyle interface's sheet attribute return null.
Otherwise, the LinkStyle interface's sheet attribute must return a
StyleSheet object with the following properties: [CSSOM]
The style sheet type must be the same as the style's specified
type. For style elements, this is the same as the
type content attribute's
value, or text/css if that is omitted. For
link elements, this is the Content-Type metadata of the specified
resource.
For link elements, the location must be the
result of resolving the
URL given by the element's href content attribute, relative to
the element, or the empty string if that fails. For
style elements, there is no location.
The media must be the same as the value of the element's
media content attribute, or the empty string,
if the attribute is omitted.
The title must be the same as the value of the element's
title content attribute, if the
attribute is present and has a non-empty value. If the attribute is
absent or its value is the empty string, then the style sheet does
not have a title (it is the empty string). The title is used for
defining alternative style sheet sets.
For link elements, true if the link is an
alternative stylesheet. In all other cases, false.
The same object must be returned each time.
The disabled IDL
attribute on link and style elements must
return false and do nothing on setting, if the sheet attribute of their
LinkStyle interface is null. Otherwise, it must return
the value of the StyleSheet interface's disabled attribute on
getting, and forward the new value to that same attribute on
setting.
The rules for handling alternative style sheets are defined in the CSS object model specification. [CSSOM]
Style sheets, whether added by a link element, a
style element, an <?xml-stylesheet> PI,
an HTTP Link: header, or some other
mechanism, have a style sheet ready flag, which is
initially unset.
When a style sheet is ready to be applied, its style sheet
ready flag must be set. If the style sheet referenced no
other resources (e.g. it was an internal style sheet given by a
style element with no @import
rules), then the style rules must be synchronously made available to
script; otherwise, the style rules must only be made available to
script once the event loop reaches its "update the
rendering" step.
A style sheet in the context of the Document of an
HTML parser or XML parser is said to be
a style sheet that is blocking scripts if the element was
created by that Document's parser, and the element is
either a style element or a link element
that was an external resource link that
contributes to the styling processing model when the element
was created by the parser, and the element's style sheet was enabled
when the element was created by the parser, and the element's
style sheet ready flag is not yet set, and, the last
time the event loop reached step 1, the element was
in that Document,
and the user agent hasn't given up on that particular style sheet
yet. A user agent may give up on a style sheet at any time.
Giving up on a style sheet before the style sheet loads, if the style sheet eventually does still load, means that the script might end up operating with incorrect information. For example, if a style sheet sets the color of an element to green, but a script that inspects the resulting style is executed before the sheet is loaded, the script will find that the element is black (or whatever the default color is), and might thus make poor choices (e.g. deciding to use black as the color elsewhere on the page, instead of green). Implementors have to balance the likelihood of a script using incorrect information with the performance impact of doing nothing while waiting for a slow network request to finish.
A Document has a style sheet that is blocking
scripts if there is either a style sheet that is
blocking scripts in the context of that
Document, or if that Document is in a
browsing context that has a parent browsing
context, and the active document of that
parent browsing context itself has a style sheet
that is blocking scripts.
A Document has no style sheet that is blocking
scripts if it does not have a style sheet that is blocking scripts
as defined in the previous paragraph.
Scripts allow authors to add interactivity to their documents.
Authors are encouraged to use declarative alternatives to scripting where possible, as declarative mechanisms are often more maintainable, and many users disable scripting.
For example, instead of using script to show or hide a section
to show more details, the details element could be
used.
Authors are also encouraged to make their applications degrade gracefully in the absence of scripting support.
For example, if an author provides a link in a table header to dynamically resort the table, the link could also be made to function without scripts by requesting the sorted table from the server.
script elementsrc
attribute, depends on the value of the type attribute, but must match
script content restrictions.src
attribute, the element must be either empty or contain only
script documentation that also matches script
content restrictions.srcasyncdefertypecharsetinterface HTMLScriptElement : HTMLElement { attribute DOMString src; attribute boolean async; attribute boolean defer; attribute DOMString type; attribute DOMString charset; attribute DOMString text; };
The script element allows authors to include dynamic
script and data blocks in their documents. The element does not
represent content for the user.
When used to include dynamic scripts, the scripts may either be
embedded inline or may be imported from an external file using the
src attribute. If the language
is not that described by "text/javascript",
then the type attribute must
be present, as described below. Whatever language is used, the
contents of the script element must conform with the
requirements of that language's specification.
When used to include data blocks (as opposed to scripts), the
data must be embedded inline, the format of the data must be given
using the type attribute, the
src attribute must not be
specified, and the contents of the script element must
conform to the requirements defined for the format used.
The type
attribute gives the language of the script or format of the data. If
the attribute is present, its value must be a valid MIME
type. The charset parameter must not be
specified. The default, which is used if the attribute is absent,
is "text/javascript".
The src
attribute, if specified, gives the address of the external script
resource to use. The value of the attribute must be a valid
non-empty URL potentially surrounded by spaces identifying a
script resource of the type given by the type attribute, if the attribute is
present, or of the type "text/javascript", if
the attribute is absent. A resource is a script resource of a given
type if that type identifies a scripting language and the resource
conforms with the requirements of that language's specification.
The charset
attribute gives the character encoding of the external script
resource. The attribute must not be specified if the src attribute is not present. If the
attribute is set, its value must be a valid character encoding name,
must be an ASCII case-insensitive match for the
preferred MIME name for that encoding, and must match
the encoding given in the charset parameter of
the Content-Type metadata of the
external file, if any. [IANACHARSET]
The async and
defer attributes
are boolean attributes that
indicate how the script should be executed. The defer and async attributes must not be
specified if the src attribute
is not present.
There are three possible modes that can be selected using these
attributes. If the async
attribute is present, then the script will be executed
asynchronously, as soon as it is available. If the async attribute is not present but
the defer attribute is
present, then the script is executed when the page has finished
parsing. If neither attribute is present, then the script is
fetched and executed immediately, before the user agent continues
parsing the page.
The exact processing details for these attributes
are, for mostly historical reasons, somewhat non-trivial, involving
a number of aspects of HTML. The implementation requirements are
therefore by necessity scattered throughout the specification. The
algorithms below (in this section) describe the core of this
processing, but these algorithms reference and are referenced by the
parsing rules for script start
and end tags in HTML, in foreign content, and in XML, the rules for the document.write() method, the
handling of scripting, etc.
The defer attribute may be
specified even if the async
attribute is specified, to cause legacy Web browsers that only
support defer (and not async) to fall back to the defer behavior instead of the
synchronous blocking behavior that is the default.
Changing the src, type, charset, async, and defer attributes dynamically has no
direct effect; these attribute are only used at specific times
described below.
A script element has several associated pieces of
state.
The first is a flag indicating whether or not the script block
has been "already started". Initially,
script elements must have this flag unset (script
blocks, when created, are not "already started"). The cloning steps for
script elements must set the "already started" flag on
the copy if it is set on the element being cloned.
The second is a flag indicating whether the element was
"parser-inserted". Initially, script
elements must have this flag unset. It is set by the HTML
parser and the XML parser on script
elements they insert and affects the processing of those
elements.
The third is a flag indicating whether the element will
"force-async". Initially, script elements
must have this flag set. It is unset by the HTML parser
and the XML parser on script elements they
insert. In addition, whenever a script element whose
"force-async" flag is set has a async content attribute added, the
element's "force-async" flag must be unset.
The fourth is a flag indicating whether or not the script block is
"ready to be parser-executed". Initially,
script elements must have this flag unset (script
blocks, when created, are not "ready to be parser-executed"). This
flag is used only for elements that are also
"parser-inserted", to let the parser know when to
execute the script.
The last few pieces of state are the script block's
type, the script block's character
encoding, and the script block's fallback
character encoding. They are determined when the script
is prepared, based on the attributes on the element at that time,
and the Document of the script
element.
When a script element that is not marked as being
"parser-inserted" experiences one of the events listed
in the following list, the user agent must synchronously prepare the script
element:
script element gets inserted into a document.script element is in a
Document and its child nodes are changed.script element is in a
Document and has a src attribute set where previously
the element had no such attribute.To prepare a script, the user agent must act as follows:
If the script element is marked as having
"already started", then the user agent must abort
these steps at this point. The script is not executed.
If the element has its "parser-inserted" flag set, then set was-parser-inserted to true and unset the element's "parser-inserted" flag. Otherwise, set was-parser-inserted to false.
This is done so that if parser-inserted
script elements fail to run when the parser tries to
run them, e.g. because they are empty or specify an unsupported
scripting language, another script can later mutate them and cause
them to run again.
If was-parser-inserted is true and the
element does not have an async attribute, then set the
element's "force-async" flag to true.
This is done so that if a parser-inserted
script element fails to run when the parser tries to
run it, but it is later executed after a script dynamically
updates it, it will execute asynchronously even if the
async attribute isn't
set.
If the element has no src
attribute, and its child nodes, if any, consist only of comment
nodes and empty Text nodes, then the user agent must
abort these steps at this point. The script is not executed.
If the element is not in a Document,
then the user agent must abort these steps at this point. The
script is not executed.
If either:
script element has a type attribute and its value is
the empty string, orscript element has no type attribute but it has a language attribute and
that attribute's value is the empty string, orscript element has neither a type attribute nor a language attribute, then...let the script block's type for this
script element be "text/javascript".
Otherwise, if the script element has a type attribute, let the
script block's type for this script element be
the value of that attribute with any leading or trailing sequences
of space characters
removed.
Otherwise, the element has a non-empty language attribute; let
the script block's type for this script
element be the concatenation of the string "text/" followed by the value of the language attribute.
The language attribute is never
conforming, and is always ignored if there is a type attribute present.
If the user agent does not support the scripting
language given by the script block's type for
this script element, then the user agent must abort
these steps at this point. The script is not executed.
If was-parser-inserted is true, then flag the element as "parser-inserted" again, and set the element's "force-async" flag to false.
The user agent must set the element's "already started" flag.
The state of the element at this moment is later used to determine the script source.
If the element is flagged as "parser-inserted",
but the element's Document is not the
Document of the parser that created the element, then
abort these steps.
If scripting is
disabled for the script element, then the user
agent must abort these steps at this point. The script is not
executed.
The definition of scripting is disabled means
that, amongst others, the following scripts will not execute:
scripts in XMLHttpRequest's responseXML
documents, scripts in DOMParser-created documents,
scripts in documents created by XSLTProcessor's transformToDocument
feature, and scripts that are first inserted by a script into a
Document that was created using the createDocument()
API. [XHR] [DOMPARSING] [DOMCORE]
If the script element has an event attribute and a for attribute, then run these
substeps:
Let for be the value of the for attribute.
Let event be the value of the event attribute.
Strip leading and trailing whitespace from event and for.
If for is not an ASCII
case-insensitive match for the string "window", then the user agent must abort these
steps at this point. The script is not executed.
If event is not an ASCII
case-insensitive match for either the string "onload" or the string "onload()", then the user agent must abort these
steps at this point. The script is not executed.
If the script element has a charset attribute, then let
the script block's character encoding for this
script element be the encoding given by the charset attribute.
Otherwise, let the script block's fallback character
encoding for this script element be the same as
the encoding of the
document itself.
Only one of these two pieces of state is set.
If the element has a src
attribute whose value is not the empty string, then the value of
that attribute must be resolved
relative to the element, and if that is successful, the specified
resource must then be fetched, from the
origin of the element's Document.
If the src attribute's
value is the empty string or if it could not be resolved, then the
user agent must queue a task to fire a simple
event named error at the
element, and abort these steps.
For historical reasons, if the URL is a javascript:
URL, then the user agent must not, despite the requirements
in the definition of the fetching
algorithm, actually execute the script in the URL; instead the
user agent must act as if it had received an empty HTTP 400
response.
For performance reasons, user agents may start fetching the
script as soon as the attribute is set, instead, in the hope that
the element will be inserted into the document. Either way, once
the element is inserted into the document, the load must have
started. If the UA performs such prefetching, but the element is
never inserted in the document, or the src attribute is dynamically
changed, then the
user agent will not execute the script, and the fetching process
will have been effectively wasted.
Then, the first of the following options that describes the situation must be followed:
src attribute, and the element has
a defer attribute, and the
element has been flagged as "parser-inserted", and
the element does not have an async attributeThe element must be added to the end of the list of
scripts that will execute when the document has finished
parsing associated with the Document of the
parser that created the element.
The task that the networking task source places on the task queue once the fetching algorithm has completed must set the element's "ready to be parser-executed" flag. The parser will handle executing the script.
src attribute, and the
element has been flagged as "parser-inserted", and
the element does not have an async attributeThe element is the pending parsing-blocking
script of the Document of the parser that
created the element. (There can only be one such script per
Document at a time.)
The task that the networking task source places on the task queue once the fetching algorithm has completed must set the element's "ready to be parser-executed" flag. The parser will handle executing the script.
src attribute, and
the element has been flagged as "parser-inserted",
and the Document of the HTML parser or
XML parser that created the script
element has a style sheet that is blocking
scriptsThe element is the pending parsing-blocking
script of the Document of the parser that
created the element. (There can only be one such script per
Document at a time.)
Set the element's "ready to be parser-executed" flag. The parser will handle executing the script.
src attribute, does not have an
async attribute, and does
not have the "force-async" flag setThe element must be added to the end of the list of
scripts that will execute in order as soon as possible
associated with the Document of the
script element at the time the prepare a
script algorithm started.
The task that the networking task source places on the task queue once the fetching algorithm has completed must run the following steps:
If the element is not now the first element in the list of scripts that will execute in order as soon as possible to which it was added above, then mark the element as ready but abort these steps without executing the script yet.
Execution: Execute the script block corresponding to the first script element in this list of scripts that will execute in order as soon as possible.
Remove the first element from this list of scripts that will execute in order as soon as possible.
If this list of scripts that will execute in order as soon as possible is still not empty and the first entry has already been marked as ready, then jump back to the step labeled execution.
src attributeThe element must be added to the set of scripts that
will execute as soon as possible of the
Document of the script element at the
time the prepare a script algorithm started.
The task that the networking task source places on the task queue once the fetching algorithm has completed must execute the script block and then remove the element from the set of scripts that will execute as soon as possible.
Fetching an external script must delay the load event of the element's document until the task that is queued by the networking task source once the resource has been fetched (defined above) has been run.
The pending parsing-blocking script of a
Document is used by the Document's
parser(s).
If a script element that blocks a
parser gets moved to another Document before it would
normally have stopped blocking that parser, it nonetheless continues
blocking that parser until the condition that causes it to be
blocking the parser no longer applies (e.g. if the script is a
pending parsing-blocking script because there was
a style sheet that is blocking scripts when it was
parsed, but then the script is moved to another
Document before the style sheet loads, the script still
blocks the parser until the style sheets are all loaded, at which
time the script executes and the parser is unblocked).
When the user agent is required to execute a script block, it must run the following steps:
If the element is flagged as "parser-inserted",
but the element's Document is not the
Document of the parser that created the element, then
abort these steps.
Jump to the appropriate set of steps from the list below:
Executing the script block must just consist of firing a simple event named
error at the element.
Executing the script block must consist of running the
following steps. For the purposes of these steps, the script is
considered to be from an external file if, while the
prepare a script algorithm above was running for
this script, the script element had a src attribute specified.
Initialize the script block's source as follows:
The contents of that file, interpreted as a Unicode string, are the script source.
To obtain the Unicode string, the user agent run the following steps:
If the resource's Content Type metadata, if any, specifies a character encoding, and the user agent supports that encoding, then let character encoding be that encoding, and jump to the bottom step in this series of steps.
If the algorithm above set the script block's character encoding, then let character encoding be that encoding, and jump to the bottom step in this series of steps.
For each of the rows in the following table, starting with the first one and going down, if the file has as many or more bytes available than the number of bytes in the first column, and the first bytes of the file match the bytes given in the first column, then set character encoding to the encoding given in the cell in the second column of that row, and jump to the bottom step in this series of steps:
| Bytes in Hexadecimal | Encoding |
|---|---|
| FE FF | Big-endian UTF-16 |
| FF FE | Little-endian UTF-16 |
| EF BB BF | UTF-8 |
This step looks for Unicode Byte Order Marks (BOMs).
Let character encoding be the script block's fallback character encoding.
Convert the file to Unicode using character encoding, following the rules for doing so given by the specification for the script block's type.
The external file is the script source. When it is later executed, it must be interpreted in a manner consistent with the specification defining the language given by the script block's type.
The value of the text IDL attribute at the
time the element's "already started" flag was
last set is the script source.
The child nodes of the script element at the
time the element's "already started" flag was
last set are the script source.
Fire a simple event named beforescriptexecute
that bubbles and is cancelable at the script
element.
If the event is canceled, then abort these steps.
If the script is from an external file, then increment the
ignore-destructive-writes counter of the
script element's Document. Let neutralized doc be that
Document.
Create a
script from the script element node, using
the script block's source, the URL
from which the script was obtained, and the script
block's type.
This is where the script is compiled and actually executed.
Decrement the ignore-destructive-writes counter of neutralized doc, if it was incremented in the earlier step.
Fire a simple event named afterscriptexecute
that bubbles (but is not cancelable) at the
script element.
If the script is from an external file, fire a simple
event named load at the
script element.
Otherwise, the script is internal; queue a
task to fire a simple event named load at the script
element.
The IDL attributes src, type, charset, and defer, each must
reflect the respective content attributes of the same
name.
The async IDL
attribute controls whether the element will execute asynchronously
or not. If the element's "force-async" flag is set,
then, on getting, the async
IDL attribute must return true, and on setting, the
"force-async" flag must first be unset, and then the
content attribute must be removed if the IDL attribute's new value
is false, and must be set to the empty string if the IDL attribute's
new value is true. If the element's "force-async" flag
is not set, the IDL attribute must reflect the
async content attribute.
text [ = value ]Returns the contents of the element, ignoring child nodes that
aren't Text nodes.
Can be set, to replace the element's children with the given value.
The IDL attribute text must return a
concatenation of the contents of all the Text nodes
that are children of the script element (ignoring any
other nodes such as comments or elements), in tree order. On
setting, it must act the same way as the textContent
IDL attribute.
When inserted using the document.write() method,
script elements execute (typically synchronously), but
when inserted using innerHTML and outerHTML attributes, they do not
execute at all.
In this example, two script elements are used. One
embeds an external script, and the other includes some data.
<script src="game-engine.js"></script> <script type="text/x-game-map"> ........U.........e o............A....e .....A.....AAA....e .A..AAA...AAAAA...e </script>
The data in this case might be used by the script to generate the map of a video game. The data doesn't have to be used that way, though; maybe the map data is actually embedded in other parts of the page's markup, and the data block here is just used by the site's search engine to help users who are looking for particular features in their game maps.
The following sample shows how a script element can be used to
define a function that is then used by other parts of the
document. It also shows how a script element can be
used to invoke script while the document is being parsed, in this
case to initialize the form's output.
<script>
function calculate(form) {
var price = 52000;
if (form.elements.brakes.checked)
price += 1000;
if (form.elements.radio.checked)
price += 2500;
if (form.elements.turbo.checked)
price += 5000;
if (form.elements.sticker.checked)
price += 250;
form.elements.result.value = price;
}
</script>
<form name="pricecalc" onsubmit="return false" onchange="calculate(this)">
<fieldset>
<legend>Work out the price of your car</legend>
<p>Base cost: £52000.</p>
<p>Select additional options:</p>
<ul>
<li><label><input type=checkbox name=brakes> Ceramic brakes (£1000)</label></li>
<li><label><input type=checkbox name=radio> Satellite radio (£2500)</label></li>
<li><label><input type=checkbox name=turbo> Turbo charger (£5000)</label></li>
<li><label><input type=checkbox name=sticker> "XZ" sticker (£250)</label></li>
</ul>
<p>Total: £<output name=result></output></p>
</fieldset>
<script>
calculate(document.forms.pricecalc);
</script>
</form>
A user agent is said to support the scripting language if the script block's type is an ASCII case-insensitive match for the MIME type string of a scripting language that the user agent implements.
The following lists some MIME type strings and the languages to which they refer:
application/ecmascript"application/javascript"application/x-ecmascript"application/x-javascript"text/ecmascript"text/javascript"text/javascript1.0"text/javascript1.1"text/javascript1.2"text/javascript1.3"text/javascript1.4"text/javascript1.5"text/jscript"text/livescript"text/x-ecmascript"text/x-javascript"text/javascript;e4x=1"User agents may support other MIME types and other languages.
The following MIME types must not be interpreted as scripting languages:
text/plain"
text/xml"
application/octet-stream"
application/xml"
These types are explicitly listed here because they are poorly-defined types that are nonetheless likely to be used as formats for data blocks, and it would be problematic if they were suddenly to be interpreted as script by a user agent.
When examining types to determine if they support the language,
user agents must not ignore unknown MIME parameters — types
with unknown parameters must be assumed to be unsupported. The charset parameter must be treated as an unknown
parameter for the purpose of comparing MIME
types here.
script elementsThe textContent of a script element
must match the script production in the
following ABNF, the character set for which is Unicode. [ABNF]
script = data1 *( escape [ script-start data3 ] "-->" data1 ) [ escape ] escape = "<!--" data2 *( script-start data3 script-end data2 ) data1 = <any string that doesn't contain a substring that matches not-data1> not-data1 = "<!--" data2 = <any string that doesn't contain a substring that matches not-data2> not-data2 = script-start / "-->" data3 = <any string that doesn't contain a substring that matches not-data3> not-data3 = script-end / "-->" script-start = lt s c r i p t tag-end script-end = lt slash s c r i p t tag-end lt = %x003C ; U+003C LESS-THAN SIGN character (<) slash = %x002F ; U+002F SOLIDUS character (/) s = %x0053 ; U+0053 LATIN CAPITAL LETTER S s =/ %x0073 ; U+0073 LATIN SMALL LETTER S c = %x0043 ; U+0043 LATIN CAPITAL LETTER C c =/ %x0063 ; U+0063 LATIN SMALL LETTER C r = %x0052 ; U+0052 LATIN CAPITAL LETTER R r =/ %x0072 ; U+0072 LATIN SMALL LETTER R i = %x0049 ; U+0049 LATIN CAPITAL LETTER I i =/ %x0069 ; U+0069 LATIN SMALL LETTER I p = %x0050 ; U+0050 LATIN CAPITAL LETTER P p =/ %x0070 ; U+0070 LATIN SMALL LETTER P t = %x0054 ; U+0054 LATIN CAPITAL LETTER T t =/ %x0074 ; U+0074 LATIN SMALL LETTER T tag-end = %x0009 ; U+0009 CHARACTER TABULATION (tab) tag-end =/ %x000A ; U+000A LINE FEED (LF) tag-end =/ %x000C ; U+000C FORM FEED (FF) tag-end =/ %x0020 ; U+0020 SPACE tag-end =/ %x002F ; U+002F SOLIDUS (/) tag-end =/ %x003E ; U+003E GREATER-THAN SIGN (>)
When a script element contains script
documentation, there are further restrictions on the contents
of the element, as described in the section below.
If a script element's src attribute is specified, then the
contents of the script element, if any, must be such
that the value of the text IDL
attribute, which is derived from the element's contents, matches the
documentation production in the following
ABNF, the character set for which is Unicode. [ABNF]
documentation = *( *( space / tab / comment ) [ line-comment ] newline )
comment = slash star *( not-star / star not-slash ) 1*star slash
line-comment = slash slash *not-newline
; characters
tab = %x0009 ; U+0009 CHARACTER TABULATION (tab)
newline = %x000A ; U+000A LINE FEED (LF)
space = %x0020 ; U+0020 SPACE
star = %x002A ; U+002A ASTERISK (*)
slash = %x002F ; U+002F SOLIDUS (/)
not-newline = %x0000-0009 / %x000B-10FFFF
; a Unicode character other than U+000A LINE FEED (LF)
not-star = %x0000-0029 / %x002B-10FFFF
; a Unicode character other than U+002A ASTERISK (*)
not-slash = %x0000-002E / %x0030-10FFFF
; a Unicode character other than U+002F SOLIDUS (/)
This corresponds to putting the contents of the element in JavaScript comments.
This requirement is in addition to the earlier
restrictions on the syntax of contents of script
elements.
This allows authors to include documentation, such as license
information or API information, inside their documents while still
referring to external script files. The syntax is constrained so
that authors don't accidentally include what looks like valid
script while also providing a src attribute.
<script src="cool-effects.js"> // create new instances using: // var e = new Effect(); // start the effect using .play, stop using .stop: // e.play(); // e.stop(); </script>
script elements and XSLTThis section is non-normative.
This specification does not define how XSLT interacts with the
script element (or, indeed, how XSLT processing
triggers the stop parsing steps, how it interacts with
the navigation algorithm, or how it
fits in with the event loop). However, in the absence
of another specification actually defining this, here are some
guidelines for implementors, based on existing implementations:
When an XSLT transformation program is triggered by an <?xml-stylesheet?> processing instruction and
the browser implements a direct-to-DOM transformation,
script elements created by the XSLT processor need to
be marked "parser-inserted" and run in document order
(modulo scripts marked defer
or async), asynchronously
while the transformation is occurring.
The XSLTProcessor.transformToDocument()
method adds elements to a Document that is not in a
browsing context, and, accordingly, any
script elements they create need to have their
"already started" flag set in the prepare a
script algorithm and never get executed (scripting is disabled). Such
script elements still need to be marked
"parser-inserted", though, such that their async IDL attribute will return
false in the absence of an async content attribute.
The XSLTProcessor.transformToFragment()
method needs to create a fragment that is equivalent to one built
manually by creating the elements using document.createElementNS().
For instance, it needs to create script elements that
aren't "parser-inserted" and that don't have their
"already started" flag set, so that they will execute
when the fragment is inserted into a document.
The main distinction between the first two cases and the last
case is that the first two operate on Documents and the
last operates on a fragment.
noscript elementhead element of an HTML document, if there are no ancestor noscript elements.noscript elements.head element: in any order, zero or more link elements, zero or more style elements, and zero or more meta elements.head element: transparent, but there must be no noscript element descendants.HTMLElement.The noscript element represents nothing
if scripting is enabled, and
represents its children if scripting is disabled. It is used
to present different markup to user agents that support scripting
and those that don't support scripting, by affecting how the
document is parsed.
When used in HTML documents, the allowed content model is as follows:
head element, if scripting is disabled for the
noscript elementThe noscript element must contain only
link, style, and meta
elements.
head element, if scripting is enabled for the
noscript elementThe noscript element must contain only text,
except that invoking the HTML fragment parsing
algorithm with
the noscript element as the context element and the
text contents as the input must result in a
list of nodes that consists only of link,
style, and meta elements that would be
conforming if they were children of the noscript
element, and no parse
errors.
head elements, if scripting is disabled for the
noscript elementThe noscript element's content model is
transparent, with the additional restriction that a
noscript element must not have a noscript
element as an ancestor (that is, noscript can't be
nested).
head elements, if scripting is enabled for the
noscript elementThe noscript element must contain only text,
except that the text must be such that running the following
algorithm results in a conforming document with no
noscript elements and no script
elements, and such that no step in the algorithm causes an
HTML parser to flag a parse error:
script element from the
document.noscript element in the
document. For every noscript element in that list,
perform the following steps:
noscript element.noscript element, and call these
elements the before children.noscript element, and
call these elements the after children.Text node children of the noscript
element.innerHTML
attribute of the parent element to the value
of s. (This, as a side-effect, causes the
noscript element to be removed from the
document.)All these contortions are required because, for
historical reasons, the noscript element is handled
differently by the HTML parser based on whether scripting was enabled or not when the
parser was invoked.
The noscript element must not be used in XML
documents.
The noscript element is only effective
in the HTML syntax, it has no effect in the XHTML
syntax. This is because the way it works is by essentially
"turning off" the parser when scripts are enabled, so that the
contents of the element are treated as pure text and not as real
elements. XML does not define a mechanism by which to do this.
The noscript element has no other requirements. In
particular, children of the noscript element are not
exempt from form submission, scripting, and so forth,
even when scripting is enabled
for the element.
In the following example, a noscript element is
used to provide fallback for a script.
<form action="calcSquare.php">
<p>
<label for=x>Number</label>:
<input id="x" name="x" type="number">
</p>
<script>
var x = document.getElementById('x');
var output = document.createElement('p');
output.textContent = 'Type a number; it will be squared right then!';
x.form.appendChild(output);
x.form.onsubmit = function () { return false; }
x.oninput = function () {
var v = x.valueAsNumber;
output.textContent = v + ' squared is ' + v * v;
};
</script>
<noscript>
<input type=submit value="Calculate Square">
</noscript>
</form>
When script is disabled, a button appears to do the calculation on the server side. When script is enabled, the value is computed on-the-fly instead.
The noscript element is a blunt
instrument. Sometimes, scripts might be enabled, but for some
reason the page's script might fail. For this reason, it's
generally better to avoid using noscript, and to
instead design the script to change the page from being a
scriptless page to a scripted page on the fly, as in the next
example:
<form action="calcSquare.php">
<p>
<label for=x>Number</label>:
<input id="x" name="x" type="number">
</p>
<input id="submit" type=submit value="Calculate Square">
<script>
var x = document.getElementById('x');
var output = document.createElement('p');
output.textContent = 'Type a number; it will be squared right then!';
x.form.appendChild(output);
x.form.onsubmit = function () { return false; }
x.oninput = function () {
var v = x.valueAsNumber;
output.textContent = v + ' squared is ' + v * v;
};
var submit = document.getElementById('submit');
submit.parentNode.removeChild(submit);
</script>
</form>
The above technique is also useful in XHTML, since
noscript is not supported in the XHTML
syntax.
body elementhtml element.onafterprintonbeforeprintonbeforeunloadonbluronerroronfocusonhashchangeonloadonmessageonofflineononlineonpagehideonpageshowonpopstateonresizeonscrollonstorageonunloadinterface HTMLBodyElement : HTMLElement { [TreatNonCallableAsNull] attribute Function? onafterprint; [TreatNonCallableAsNull] attribute Function? onbeforeprint; [TreatNonCallableAsNull] attribute Function? onbeforeunload; [TreatNonCallableAsNull] attribute Function? onblur; [TreatNonCallableAsNull] attribute Function? onerror; [TreatNonCallableAsNull] attribute Function? onfocus; [TreatNonCallableAsNull] attribute Function? onhashchange; [TreatNonCallableAsNull] attribute Function? onload; [TreatNonCallableAsNull] attribute Function? onmessage; [TreatNonCallableAsNull] attribute Function? onoffline; [TreatNonCallableAsNull] attribute Function? ononline; [TreatNonCallableAsNull] attribute Function? onpopstate; [TreatNonCallableAsNull] attribute Function? onpagehide; [TreatNonCallableAsNull] attribute Function? onpageshow; [TreatNonCallableAsNull] attribute Function? onresize; [TreatNonCallableAsNull] attribute Function? onscroll; [TreatNonCallableAsNull] attribute Function? onstorage; [TreatNonCallableAsNull] attribute Function? onunload; };
The body element represents the main
content of the document.
In conforming documents, there is only one body
element. The document.body
IDL attribute provides scripts with easy access to a document's
body element.
Some DOM operations (for example, parts of the
drag and drop model) are defined in terms of "the
body element". This refers to a particular element in the
DOM, as per the definition of the term, and not any arbitrary
body element.
The body element exposes as event handler
content attributes a number of the event
handlers of the Window object. It also mirrors
their event handler IDL attributes.
The onblur, onerror, onfocus, onload, and onscroll event
handlers of the Window object, exposed on the
body element, shadow the generic event
handlers with the same names normally supported by HTML
elements.
Thus, for example, a bubbling error event dispatched on a child of
the body element of a Document would first
trigger the onerror event
handler content attributes of that element, then that of the
root html element, and only then would it
trigger the onerror
event handler content
attribute on the body element. This is because
the event would bubble from the target, to the body, to
the html, to the Document, to the
Window, and the event
handler on the body is watching the
Window not the body. A regular event
listener attached to the body using addEventListener(), however, would be run when the
event bubbled through the body and not when it reaches
the Window object.
This page updates an indicator to show whether or not the user is online:
<!DOCTYPE HTML>
<html>
<head>
<title>Online or offline?</title>
<script>
function update(online) {
document.getElementById('status').textContent =
online ? 'Online' : 'Offline';
}
</script>
</head>
<body ononline="update(true)"
onoffline="update(false)"
onload="update(navigator.onLine)">
<p>You are: <span id="status">(Unknown)</span></p>
</body>
</html>
section elementHTMLElement.The section element represents a
generic section of a document or application. A section, in this
context, is a thematic grouping of content, typically with a
heading.
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.
Authors are encouraged to use the
article element instead of the section
element when it would make sense to syndicate the contents of the
element.
The section
element is not a generic container element. When an element is
needed only for styling purposes or as a convenience for scripting,
authors are encouraged to use the div element instead.
A general rule is that the section element is
appropriate only if the element's contents would be listed
explicitly in the document's outline.
In the following example, we see an article (part of a larger Web page) about apples, containing two short sections.
<article> <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup> <p>The apple is the pomaceous fruit of the apple tree.</p> <section> <h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p> </section> <section> <h1>Granny Smith</h1> <p>These juicy, green apples make a great filling for apple pies.</p> </section> </article>
Notice how the use of section means that the author
can use h1 elements throughout, without having to
worry about whether a particular section is at the top level, the
second level, the third level, and so on.
Here is a graduation programme with two sections, one for the list of people graduating, and one for the description of the ceremony.
<!DOCTYPE Html>
<Html
><Head
><Title
>Graduation Ceremony Summer 2022</Title
></Head
><Body
><H1
>Graduation</H1
><Section
><H1
>Ceremony</H1
><P
>Opening Procession</P
><P
>Speech by Validactorian</P
><P
>Speech by Class President</P
><P
>Presentation of Diplomas</P
><P
>Closing Speech by Headmaster</P
></Section
><Section
><H1
>Graduates</H1
><Ul
><Li
>Molly Carpenter</Li
><Li
>Anastasia Luccio</Li
><Li
>Ebenezar McCoy</Li
><Li
>Karrin Murphy</Li
><Li
>Thomas Raith</Li
><Li
>Susan Rodriguez</Li
></Ul
></Section
></Body
></Html>
In this example, a book author has marked up some sections as
chapters and some as appendices, and uses CSS to style the headers
in these two classes of section differently. The whole book is
wrapped in an article element as part of an even
larger document containing other books.
<article class="book">
<style>
section { border: double medium; margin: 2em; }
section.chapter h1 { font: 2em Roboto, Helvetica Neue, sans-serif; }
section.appendix h1 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
</style>
<header>
<hgroup>
<h1>My Book</h1>
<h2>A sample with not much content</h2>
</hgroup>
<p><small>Published by Dummy Publicorp Ltd.</small></p>
</header>
<section class="chapter">
<h1>My First Chapter</h1>
<p>This is the first of my chapters. It doesn't say much.</p>
<p>But it has two paragraphs!</p>
</section>
<section class="chapter">
<h1>It Continutes: The Second Chapter</h1>
<p>Bla dee bla, dee bla dee bla. Boom.</p>
</section>
<section class="chapter">
<h1>Chapter Three: A Further Example</h1>
<p>It's not like a battle between brightness and earthtones would go
unnoticed.</p>
<p>But it might ruin my story.</p>
</section>
<section class="appendix">
<h1>Appendix A: Overview of Examples</h1>
<p>These are demonstrations.</p>
</section>
<section class="appendix">
<h1>Appendix B: Some Closing Remarks</h1>
<p>Hopefully this long example shows that you <em>can</em> style
sections, so long as they are used to indicate actual sections.</p>
</section>
</article>
nav elementHTMLElement.The nav element represents a section of
a page that links to other pages or to parts within the page: a
section with navigation links.
Not all groups of links on a page need to be in a
nav element — the element is primarily intended
for sections that consist of major navigation blocks. In particular,
it is common for footers to have a short list of links to various
pages of a site, such as the terms of service, the home page, and a
copyright page. The footer element alone is sufficient
for such cases; while a nav element can be used in such
cases, it is usually unnecessary.
User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip and/or provide on request.
In the following example, the page has several places where links are present, but only one of those places is considered a navigation section.
<body itemscope itemtype="http://schema.org/Blog">
<header>
<h1>Wake up sheeple!</h1>
<p><a href="news.html">News</a> -
<a href="blog.html">Blog</a> -
<a href="forums.html">Forums</a></p>
<p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="articles.html">Index of all articles</a></li>
<li><a href="today.html">Things sheeple need to wake up for today</a></li>
<li><a href="successes.html">Sheeple we have managed to wake</a></li>
</ul>
</nav>
</header>
<div>
<article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">My Day at the Beach</h1>
</header>
<div itemprop="articleBody">
<p>Today I went to the beach and had a lot of fun.</p>
...more content...
</div>
<footer>
<p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
</footer>
</article>
...more blog posts...
</div>
<footer>
<p>Copyright ©
<span itemprop="copyrightYear">2010</span>
<span itemprop="copyrightHolder">The Example Company</span>
</p>
<p><a href="about.html">About</a> -
<a href="policy.html">Privacy Policy</a> -
<a href="contact.html">Contact Us</a></p>
</footer>
</body>
Notice the div elements being used to wrap all the
contents of the page other than the header and footer, and all the
contents of the blog entry other than its header and footer.
You can also see microdata annotations in the above example that use the schema.org vocabulary to provide the publication date and other metadata about the blog post.
In the following example, there are two nav
elements, one for primary navigation around the site, and one for
secondary navigation around the page itself.
<body>
<h1>The Wiki Center Of Exampland</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/events">Current Events</a></li>
...more...
</ul>
</nav>
<article>
<header>
<h1>Demos in Exampland</h1>
<p>Written by A. N. Other.</p>
</header>
<nav>
<ul>
<li><a href="#public">Public demonstrations</a></li>
<li><a href="#destroy">Demolitions</a></li>
...more...
</ul>
</nav>
<div>
<section id="public">
<h1>Public demonstrations</h1>
<p>...more...</p>
</section>
<section id="destroy">
<h1>Demolitions</h1>
<p>...more...</p>
</section>
...more...
</div>
<footer>
<p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
</footer>
</article>
<footer>
<p><small>© copyright 1998 Exampland Emperor</small></p>
</footer>
</body>
A nav element doesn't have to contain a list, it
can contain other kinds of content as well. In this navigation
block, links are provided in prose:
<nav> <h1>Navigation</h1> <p>You are on my home page. To the north lies <a href="/blog">my blog</a>, from whence the sounds of battle can be heard. To the east you can see a large mountain, upon which many <a href="/school">school papers</a> are littered. Far up thus mountain you can spy a little figure who appears to be me, desperately scribbling a <a href="/school/thesis">thesis</a>.</p> <p>To the west are several exits. One fun-looking exit is labeled <a href="http://games.example.com/">"games"</a>. Another more boring-looking exit is labeled <a href="http://isp.example.net/">ISP™</a>.</p> <p>To the south lies a dark and dank <a href="/about">contacts page</a>. Cobwebs cover its disused entrance, and at one point you see a rat run quickly out of the page.</p> </nav>
article elementHTMLElement.The article element represents a
self-contained composition in a document, page, application, or site
and that is, in principle, independently distributable or reusable,
e.g. in syndication. This could be a forum post, a magazine or
newspaper article, a blog entry, a user-submitted comment, an
interactive widget or gadget, or any other independent item of
content.
When article elements are nested, the inner
article elements represent articles that are in
principle related to the contents of the outer article. For
instance, a blog entry on a site that accepts user-submitted
comments could represent the comments as article
elements nested within the article element for the blog
entry.
Author information associated with an article
element (q.v. the address element) does not apply to
nested article elements.
When used specifically with content to be
redistributed in syndication, the article element is
similar in purpose to the entry element in
Atom. [ATOM]
The schema.org microdata vocabulary can be used to
provide the publication date for an article
element, using one of the CreativeWork subtypes.
This example shows a blog post using the article
element, with some schema.org annotations:
<article itemscope itemtype="http://schema.org/BlogPosting"> <header> <h1 itemprop="headline">The Very First Rule of Life</h1> <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p> <link itemprop="url" href="?comments=0"> </header>[ <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p> <p>...</p> <footer> <a itemprop="discussionUrl" href="?comments=1">Show comments...</a> </footer> </article>
Here is that same blog post, but showing some of the comments:
<article itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">The Very First Rule of Life</h1>
<p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
<link itemprop="url" href="?comments=0">
</header>
<p>If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</p>
<p>...</p>
<section>
<h1>Comments</h1>
<article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1">
<link itemprop="url" href="#c1">
<footer>
<p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">George Washington</span>
</span></p>
<p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p>
</footer>
<p>Yeah! Especially when talking about your lobbyist friends!</p>
</article>
<article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c2">
<link itemprop="url" href="#c2">
<footer>
<p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">George Hammond</span>
</span></p>
<p><time itemprop="commentTime" datetime="2009-10-10">5 minutes ago</time></p>
</footer>
<p>Hey, you have the same first name as me.</p>
</article>
</section>
</article>
Notice the use of footer to give the information
for each comment (such as who wrote it and when): the
footer element can appear at the start of its
section when appropriate, such as in this case. (Using
header in this case wouldn't be wrong either; it's
mostly a matter of authoring preference.)
aside elementHTMLElement.The aside element represents a section
of a page that consists of content that is tangentially related to
the content around the aside element, and which could
be considered separate from that content. Such sections are often
represented as sidebars in printed typography.
The element can be used for typographical effects like pull
quotes or sidebars, for advertising, for groups of nav
elements, and for other content that is considered separate from the
main content of the page.
It's not appropriate to use the aside
element just for parentheticals, since those are part of the main
flow of the document.
The following example shows how an aside is used to mark up background material on Switzerland in a much longer news story on Europe.
<aside> <h1>Switzerland</h1> <p>Switzerland, a land-locked country in the middle of geographic Europe, has not joined the geopolitical European Union, though it is a signatory to a number of European treaties.</p> </aside>
The following example shows how an aside is used to mark up a pull quote in a longer article.
... <p>He later joined a large company, continuing on the same work. <q>I love my job. People ask me what I do for fun when I'm not at work. But I'm paid to do my hobby, so I never know what to answer. Some people wonder what they would do if they didn't have to work... but I know what I would do, because I was unemployed for a year, and I filled that time doing exactly what I do now.</q></p> <aside> <q> People ask me what I do for fun when I'm not at work. But I'm paid to do my hobby, so I never know what to answer. </q> </aside> <p>Of course his work — or should that be hobby? — isn't his only passion. He also enjoys other pleasures.</p> ...
The following extract shows how aside can be used
for blogrolls and other side content on a blog:
<body>
<header>
<h1>My wonderful blog</h1>
<p>My tagline</p>
</header>
<aside>
<!-- this aside contains two sections that are tangentially related
to the page, namely, links to other blogs, and links to blog posts
from this blog -->
<nav>
<h1>My blogroll</h1>
<ul>
<li><a href="http://blog.example.com/">Example Blog</a>
</ul>
</nav>
<nav>
<h1>Archives</h1>
<ol reversed>
<li><a href="/last-post">My last post</a>
<li><a href="/first-post">My first post</a>
</ol>
</nav>
</aside>
<aside>
<!-- this aside is tangentially related to the page also, it
contains twitter messages from the blog author -->
<h1>Twitter Feed</h1>
<blockquote cite="http://twitter.example.net/t31351234">
I'm on vacation, writing my blog.
</blockquote>
<blockquote cite="http://twitter.example.net/t31219752">
I'm going to go on vacation soon.
</blockquote>
</aside>
<article>
<!-- this is a blog post -->
<h1>My last post</h1>
<p>This is my last post.</p>
<footer>
<p><a href="/last-post" rel=bookmark>Permalink</a>
</footer>
</article>
<article>
<!-- this is also a blog post -->
<h1>My first post</h1>
<p>This is my first post.</p>
<aside>
<!-- this aside is about the blog post, since it's inside the
<article> element; it would be wrong, for instance, to put the
blogroll here, since the blogroll isn't really related to this post
specifically, only to the page as a whole -->
<h1>Posting</h1>
<p>While I'm thinking about it, I wanted to say something about
posting. Posting is fun!</p>
</aside>
<footer>
<p><a href="/first-post" rel=bookmark>Permalink</a>
</footer>
</article>
<footer>
<nav>
<a href="/archives">Archives</a> —
<a href="/about">About me</a> —
<a href="/copyright">Copyright</a>
</nav>
</footer>
</body>
h1, h2, h3, h4, h5, and h6 elementshgroup element.interface HTMLHeadingElement : HTMLElement {};
These elements represent headings for their sections.
The semantics and meaning of these elements are defined in the section on headings and sections.
These elements have a rank given by the number in
their name. The h1 element is said to have the highest
rank, the h6 element has the lowest rank, and two
elements with the same name have equal rank.
As far as their respective document outlines (their heading and section structures) are concerned, these two snippets are semantically equivalent:
<body> <h1>Let's call it a draw(ing surface)</h1> <h2>Diving in</h2> <h2>Simple shapes</h2> <h2>Canvas coordinates</h2> <h3>Canvas coordinates diagram</h3> <h2>Paths</h2> </body>
<body> <h1>Let's call it a draw(ing surface)</h1> <section> <h1>Diving in</h1> </section> <section> <h1>Simple shapes</h1> </section> <section> <h1>Canvas coordinates</h1> <section> <h1>Canvas coordinates diagram</h1> </section> </section> <section> <h1>Paths</h1> </section> </body>
Authors might prefer the former style for its terseness, or the latter style for its convenience in the face of heavy editing; which is besty is purely an issue of preferred authoring style.
hgroup elementh1, h2, h3, h4, h5, and/or h6 elements.HTMLElement.The hgroup element represents the
heading of a section. The element is used to group a set of
h1–h6 elements when the heading has
multiple levels, such as subheadings, alternative titles, or
taglines.
For the purposes of document summaries, outlines, and the like,
the text of hgroup elements is defined to be the text
of the highest ranked
h1–h6 element descendant of the
hgroup element, if there are any such elements, and the
first such element if there are multiple elements with that
rank. If there are no such elements, then the text of
the hgroup element is the empty string.
Other elements of heading content in the
hgroup element indicate subheadings or subtitles.
The rank of an hgroup element is the
rank of the highest-ranked h1–h6
element descendant of the hgroup element, if there are
any such elements, or otherwise the same as for an h1
element (the highest rank).
The section on headings and sections
defines how hgroup elements are assigned to individual
sections.
Here are some examples of valid headings. In each case, the emphasized text represents the text that would be used as the heading in an application extracting heading data and ignoring subheadings.
<hgroup> <h1>The reality dysfunction</h1> <h2>Space is not the only void</h2> </hgroup>
<hgroup> <h1>Dr. Strangelove</h1> <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2> </hgroup>
The point of using hgroup in these examples is to
mask the h2 element (which acts as a secondary title)
from the outline algorithm.
header elementheader or
footer element descendants.HTMLElement.The header element represents a group
of introductory or navigational aids.
A header element is intended to usually
contain the section's heading (an
h1–h6 element or an
hgroup element), but this is not required. The
header element can also be used to wrap a section's
table of contents, a search form, or any relevant logos.
Here are some sample headers. This first one is for a game:
<header> <p>Welcome to...</p> <h1>Voidwars!</h1> </header>
The following snippet shows how the element can be used to mark up a specification's header:
<header> <hgroup> <h1>Scalable Vector Graphics (SVG) 1.2</h1> <h2>W3C Working Draft 27 October 2004</h2> </hgroup> <dl> <dt>This version:</dt> <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20041027/">http://www.w3.org/TR/2004/WD-SVG12-20041027/</a></dd> <dt>Previous version:</dt> <dd><a href="http://www.w3.org/TR/2004/WD-SVG12-20040510/">http://www.w3.org/TR/2004/WD-SVG12-20040510/</a></dd> <dt>Latest version of SVG 1.2:</dt> <dd><a href="http://www.w3.org/TR/SVG12/">http://www.w3.org/TR/SVG12/</a></dd> <dt>Latest SVG Recommendation:</dt> <dd><a href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG/</a></dd> <dt>Editor:</dt> <dd>Dean Jackson, W3C, <a href="mailto:dean@w3.org">dean@w3.org</a></dd> <dt>Authors:</dt> <dd>See <a href="#authors">Author List</a></dd> </dl> <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notic ... </header>
The header element is not
sectioning content; it doesn't introduce a new
section.
In this example, the page has a page heading given by the
h1 element, and two subsections whose headings are
given by h2 elements. The content after the
header element is still part of the last subsection
started in the header element, because the
header element doesn't take part in the
outline algorithm.
<body>
<header>
<h1>Little Green Guys With Guns</h1>
<nav>
<ul>
<li><a href="/games">Games</a>
<li><a href="/forum">Forum</a>
<li><a href="/download">Download</a>
</ul>
</nav>
<h2>Important News</h2> <!-- this starts a second subsection -->
<!-- this is part of the subsection entitled "Important News" -->
<p>To play today's games you will need to update your client.</p>
<h2>Games</h2> <!-- this starts a third subsection -->
</header>
<p>You have three active games:</p>
<!-- this is still part of the subsection entitled "Games" -->
...
footer elementheader or
footer element descendants.HTMLElement.The footer element represents a footer
for its nearest ancestor sectioning content or
sectioning root element. A footer typically contains
information about its section such as who wrote it, links to related
documents, copyright data, and the like.
When the footer element contains entire sections,
they represent appendices, indexes,
long colophons, verbose license agreements, and other such
content.
Contact information for the author or editor of a
section belongs in an address element, possibly itself
inside a footer.
Footers don't necessarily have to appear at the end of a section, though they usually do.
When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.
The footer element is not
sectioning content; it doesn't introduce a new
section.
Here is a page with two footers, one at the top and one at the bottom, with the same content:
<body> <footer><a href="../">Back to index...</a></footer> <hgroup> <h1>Lorem ipsum</h1> <h2>The ipsum of all lorems</h2> </hgroup> <p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <footer><a href="../">Back to index...</a></footer> </body>
Here is an example which shows the footer element
being used both for a site-wide footer and for a section
footer.
<!DOCTYPE HTML>
<HTML><HEAD>
<TITLE>The Ramblings of a Scientist</TITLE>
<BODY>
<H1>The Ramblings of a Scientist</H1>
<ARTICLE>
<H1>Episode 15</H1>
<VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD>
<P><A HREF="/fm/015.ogv">Download video</A>.</P>
</VIDEO>
<FOOTER> <!-- footer for article -->
<P>Published <TIME DATETIME="2009-10-21T18:26-07:00">on 2009/10/21 at 6:26pm</TIME></P>
</FOOTER>
</ARTICLE>
<ARTICLE>
<H1>My Favorite Trains</H1>
<P>I love my trains. My favorite train of all time is a Köf.</P>
<P>It is fun to see them pull some coal cars because they look so
dwarfed in comparison.</P>
<FOOTER> <!-- footer for article -->
<P>Published <TIME DATETIME="2009-09-15T14:54-07:00">on 2009/09/15 at 2:54pm</TIME></P>
</FOOTER>
</ARTICLE>
<FOOTER> <!-- site wide footer -->
<NAV>
<P><A HREF="/credits.html">Credits</A> —
<A HREF="/tos.html">Terms of Service</A> —
<A HREF="/index.html">Blog Index</A></P>
</NAV>
<P>Copyright © 2009 Gordon Freeman</P>
</FOOTER>
</BODY>
</HTML>
Some site designs have what is sometimes referred to as "fat footers" — footers that contain a lot of material, including images, links to other articles, links to pages for sending feedback, special offers... in some ways, a whole "front page" in the footer.
This fragment shows the bottom of a page on a site with a "fat footer":
...
<footer>
<nav>
<section>
<h1>Articles</h1>
<p><img src="images/somersaults.jpeg" alt=""> Go to the gym with
our somersaults class! Our teacher Jim takes you through the paces
in this two-part article. <a href="articles/somersaults/1">Part
1</a> · <a href="articles/somersaults/1">Part 2</a></p>
<p><img src="images/kindplus.jpeg"> Tired of walking on the edge of
a clif<!-- sic -->? Our guest writer Lara shows you how to bumble
your way through the bars. <a href="articles/kindplus/1">Read
more...</a></p>
<p><img src="images/crisps.jpeg"> The chips are down, now all
that's left is a potato. What can you do with it? <a
href="articles/crisps/1">Read more...</a></p>
</section>
<ul>
<li> <a href="/about">About us...</a>
<li> <a href="/feedback">Send feedback!</a>
<li> <a href="/sitemap">Sitemap</a>
</ul>
</nav>
<p><small>Copyright © 2015 The Snacker —
<a href="/tos">Terms of Service</a></small></p>
</footer>
</body>
address elementheader, footer, or
address element descendants.HTMLElement.The address element represents the
contact information for its nearest article or
body element ancestor. If that is the body
element, then the contact information applies to the document
as a whole.
For example, a page at the W3C Web site related to HTML might include the following contact information:
<ADDRESS> <A href="../People/Raggett/">Dave Raggett</A>, <A href="../People/Arnaud/">Arnaud Le Hors</A>, contact persons for the <A href="Activity">W3C HTML Activity</A> </ADDRESS>
The address element must not be used to represent
arbitrary addresses (e.g. postal addresses), unless those addresses
are in fact the relevant contact information. (The p
element is the appropriate element for marking up postal addresses
in general.)
The address element must not contain information
other than contact information.
For example, the following is non-conforming use of the
address element:
<ADDRESS>Last Modified: 1999/12/24 23:37:50</ADDRESS>
Typically, the address element would be included
along with other information in a footer element.
The contact information for a node node is a
collection of address elements defined by the first
applicable entry from the following list:
article elementbody elementThe contact information consists of all the
address elements that have node
as an ancestor and do not have another body or
article element ancestor that is a descendant of node.
article elementbody elementThe contact information of node is the same
as the contact information of the nearest article or
body element ancestor, whichever is nearest.
Document has a body elementThe contact information of node is the same
as the contact information of the body element of the
Document.
There is no contact information for node.
User agents may expose the contact information of a node to the user, or use it for other purposes, such as indexing sections based on the sections' contact information.
In this example the footer contains contact information and a copyright notice.
<footer> <address> For more details, contact <a href="mailto:js@example.com">John Smith</a>. </address> <p><small>© copyright 2038 Example Corp.</small></p> </footer>
The h1–h6 elements and the
hgroup element are headings.
The first element of heading content in an element of sectioning content represents the heading for that section. Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section.
Certain elements are said to be sectioning roots, including blockquote and
td elements. These elements can have their own
outlines, but the sections and headings inside these elements do not
contribute to the outlines of their ancestors.
blockquotebodydetailsfieldsetfiguretdSectioning content elements are always considered subsections of their nearest ancestor sectioning root or their nearest ancestor element of sectioning content, whichever is nearest, regardless of what implied sections other headings may have created.
For the following fragment:
<body> <h1>Foo</h1> <h2>Bar</h2> <blockquote> <h3>Bla</h3> </blockquote> <p>Baz</p> <h2>Quux</h2> <section> <h3>Thud</h3> </section> <p>Grunt</p> </body>
...the structure would be:
body section, containing the "Grunt" paragraph)
section section)
Notice how the section ends the earlier implicit
section so that a later paragraph ("Grunt") is back at the top
level.
Sections may contain headings of any rank, but
authors are strongly encouraged to either use only h1
elements, or to use elements of the appropriate rank
for the section's nesting level.
Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.
For example, the following is correct:
<body> <h4>Apples</h4> <p>Apples are fruit.</p> <section> <h2>Taste</h2> <p>They taste lovely.</p> <h6>Sweet</h6> <p>Red apples are sweeter than green ones.</p> <h1>Color</h1> <p>Apples come in various colors.</p> </section> </body>
However, the same document would be more clearly expressed as:
<body> <h1>Apples</h1> <p>Apples are fruit.</p> <section> <h2>Taste</h2> <p>They taste lovely.</p> <section> <h3>Sweet</h3> <p>Red apples are sweeter than green ones.</p> </section> </section> <section> <h2>Color</h2> <p>Apples come in various colors.</p> </section> </body>
Both of the documents above are semantically identical and would produce the same outline in compliant user agents.
This third example is also semantically identical, and might be easier to maintain (e.g. if sections are often moved around in editing):
<body> <h1>Apples</h1> <p>Apples are fruit.</p> <section> <h1>Taste</h1> <p>They taste lovely.</p> <section> <h1>Sweet</h1> <p>Red apples are sweeter than green ones.</p> </section> </section> <section> <h1>Color</h1> <p>Apples come in various colors.</p> </section> </body>
This final example would need explicit style rules to be rendered well in legacy browsers. Legacy browsers without CSS support would render all the headings as top-level headings.
This section defines an algorithm for creating an outline for a sectioning content element or a sectioning root element. It is defined in terms of a walk over the nodes of a DOM tree, in tree order, with each node being visited when it is entered and when it is exited during the walk.
The outline for a sectioning content
element or a sectioning root element consists of a list
of one or more potentially nested sections. A section is a container that
corresponds to some nodes in the original DOM tree. Each section can
have one heading associated with it, and can contain any number of
further nested sections. The algorithm for the
outline also associates each node in the DOM tree with a particular
section and potentially a heading. (The sections in the
outline aren't section elements, though some may
correspond to such elements — they are merely conceptual
sections.)
The following markup fragment:
<body> <h1>A</h1> <p>B</p> <h2>C</h2> <p>D</p> <h2>E</h2> <p>F</p> </body>
...results in the following outline being created for the
body node (and thus the entire document):
Section created for body node.
Associated with heading "A".
Also associated with paragraph "B".
Nested sections:
Section implied for first h2 element.
Associated with heading "C".
Also associated with paragraph "D".
No nested sections.
Section implied for second h2 element.
Associated with heading "E".
Also associated with paragraph "F".
No nested sections.
The algorithm that must be followed during a walk of a DOM subtree rooted at a sectioning content element or a sectioning root element to determine that element's outline is as follows:
Let current outlinee be null. (It holds the element whose outline is being created.)
Let current section be null. (It holds a pointer to a section, so that elements in the DOM can all be associated with a section.)
Create a stack to hold elements, which is used to handle nesting. Initialize this stack to empty.
As you walk over the DOM in tree order, starting with the sectioning content element or sectioning root element at the root of the subtree for which an outline is to be created, trigger the first relevant step below for each element as you enter and exit it.
The element being exited is a heading content element.
Pop that element from the stack.
Do nothing.
If current outlinee is not null, and the current section has no heading, create an implied heading and let that be the heading for the current section.
If current outlinee is not null, push current outlinee onto the stack.
Let current outlinee be the element that is being entered.
Let current section be a newly created section for the current outlinee element.
Associate current outlinee with current section.
Let there be a new outline for the new current outlinee, initialized with just the new current section as the only section in the outline.
Pop the top element from the stack, and let the current outlinee be that element.
Let current section be the last section in the outline of the current outlinee element.
Append the outline of the sectioning content element being exited to the current section. (This does not change which section is the last section in the outline.)
Run these steps:
Pop the top element from the stack, and let the current outlinee be that element.
Let current section be the last section in the outline of the current outlinee element.
Finding the deepest child: If current section has no child sections, stop these steps.
Let current section be the last child section of the current current section.
Go back to the substep labeled finding the deepest child.
The current outlinee is the element being exited, and it is the sectioning content element or a sectioning root element at the root of the subtree for which an outline is being generated.
Let current section be the first section in the outline of the current outlinee element.
Skip to the next step in the overall set of steps. (The walk is over.)
If the current section has no heading, let the element being entered be the heading for the current section.
Otherwise, if the element being entered has a rank equal to or greater than the heading of the last section of the outline of the current outlinee, then create a new section and append it to the outline of the current outlinee element, so that this new section is the new last section of that outline. Let current section be that new section. Let the element being entered be the new heading for the current section.
Otherwise, run these substeps:
Let candidate section be current section.
If the element being entered has a rank lower than the rank of the heading of the candidate section, then create a new section, and append it to candidate section. (This does not change which section is the last section in the outline.) Let current section be this new section. Let the element being entered be the new heading for the current section. Abort these substeps.
Let new candidate section be the section that contains candidate section in the outline of current outlinee.
Let candidate section be new candidate section.
Return to step 2.
Push the element being entered onto the stack. (This causes the algorithm to skip any descendants of the element.)
Recall that h1 has the
highest rank, and h6 has the lowest
rank.
Do nothing.
In addition, whenever you exit a node, after doing the steps above, if the node is not associated with a section yet, associate the node with the section current section.
Associate all nodes with the heading of the section with which they are associated, if any.
The tree of sections created by the algorithm above, or a proper subset thereof, must be used when generating document outlines, for example when generating tables of contents.
The outline created for the body element of a
Document is the outline of the entire
document.
When creating an interactive table of contents, entries should jump the user to the relevant sectioning content element, if the section was created for a real element in the original document, or to the relevant heading content element, if the section in the tree was generated for a heading in the above process.
Selecting the first section of the document therefore
always takes the user to the top of the document, regardless of
where the first heading in the body is to be found.
The outline depth of a heading content
element associated with a section section
is the number of sections that
are ancestors of section in the
outline that section finds itself
in when the outlines of its
Document's elements are created, plus 1. The
outline depth of a heading content element
not associated with a section
is 1.
User agents should provide default headings for sections that do not have explicit section headings.
Consider the following snippet:
<body> <nav> <p><a href="/">Home</a></p> </nav> <p>Hello world.</p> <aside> <p>My cat is cute.</p> </aside> </body>
Although it contains no headings, this snippet has three
sections: a document (the body) with two subsections
(a nav and an aside). A user agent could
present the outline as follows:
These default headings ("Untitled document", "Navigation", "Sidebar") are not specified by this specification, and might vary with the user's language, the page's language, the user's preferences, the user agent implementor's preferences, etc.
The following JavaScript function shows how the tree walk could be implemented. The root argument is the root of the tree to walk (either a sectioning content element or a sectioning root element), and the enter and exit arguments are callbacks that are called with the nodes as they are entered and exited. [ECMA262]
function (root, enter, exit) {
var node = root;
start: while (node) {
enter(node);
if (node.firstChild) {
node = node.firstChild;
continue start;
}
while (node) {
exit(node);
if (node == root) {
node = null;
} else if (node.nextSibling) {
node = node.nextSibling;
continue start;
} else {
node = node.parentNode;
}
}
}
}
p elementinterface HTMLParagraphElement : HTMLElement {};
The p element represents a
paragraph.
While paragraphs are usually represented in visual media by blocks of text that are physically separated from adjacent blocks through blank lines, a style sheet or user agent would be equally justified in presenting paragraph breaks in a different manner, for instance using inline pilcrows (¶).
The following examples are conforming HTML fragments:
<p>The little kitten gently seated himself on a piece of carpet. Later in his life, this would be referred to as the time the cat sat on the mat.</p>
<fieldset> <legend>Personal information</legend> <p> <label>Name: <input name="n"></label> <label><input name="anon" type="checkbox"> Hide from other users</label> </p> <p><label>Address: <textarea name="a"></textarea></label></p> </fieldset>
<p>There was once an example from Femley,<br> Whose markup was of dubious quality.<br> The validator complained,<br> So the author was pained,<br> To move the error from the markup to the rhyming.</p>
The p element should not be used when a more
specific element is more appropriate.
The following example is technically correct:
<section> <!-- ... --> <p>Last modified: 2001-04-23</p> <p>Author: fred@example.com</p> </section>
However, it would be better marked-up as:
<section> <!-- ... --> <footer>Last modified: 2001-04-23</footer> <address>Author: fred@example.com</address> </section>
Or:
<section> <!-- ... --> <footer> <p>Last modified: 2001-04-23</p> <address>Author: fred@example.com</address> </footer> </section>
List elements (in particular, ol and
ul elements) cannot be children of p
elements. When a sentence contains a bulleted list, therefore, one
might wonder how it should be marked up.
For instance, this fantastic sentence has bullets relating to
and is further discussed below.
The solution is to realise that a paragraph, in HTML terms, is not a logical concept, but a structural one. In the fantastic example above, there are actually five paragraphs as defined by this speciication: one before the list, one for each bullet, and one after the list.
The markup for the above example could therefore be:
<p>For instance, this fantastic sentence has bullets relating to</p> <ul> <li>wizards, <li>faster-than-light travel, and <li>telepathy, </ul> <p>and is further discussed below.</p>
Authors wishing to conveniently style such "logical" paragraphs
consisting of multiple "structural" paragraphs can use the
div element instead of the p element.
Thus for instance the above example could become the following:
<div>For instance, this fantastic sentence has bullets relating to <ul> <li>wizards, <li>faster-than-light travel, and <li>telepathy, </ul> and is further discussed below.</div>
This example still has five structural paragraphs, but now the
author can style just the div instead of having to
consider each part of the example separately.
hr elementinterface HTMLHRElement : HTMLElement {};
The hr element represents a
paragraph-level thematic break, e.g. a scene change in
a story, or a transition to another topic within a section of a
reference book.
The following fictional extract from a project manual shows two
sections that use the hr element to separate topics
within the section.
<section> <h1>Communication</h1> <p>There are various methods of communication. This section covers a few of the important ones used by the project.</p> <hr> <p>Communication stones seem to come in pairs and have mysterious properties:</p> <ul> <li>They can transfer thoughts in two directions once activated if used alone.</li> <li>If used with another device, they can transfer one's consciousness to another body.</li> <li>If both stones are used with another device, the consciousnesses switch bodies.</li> </ul> <hr> <p>Radios use the electromagnetic spectrum in the meter range and longer.</p> <hr> <p>Signal flares use the electromagnetic spectrum in the nanometer range.</p> </section> <section> <h1>Food</h1> <p>All food at the project is rationed:</p> <dl> <dt>Potatoes</dt> <dd>Two per day</dd> <dt>Soup</dt> <dd>One bowl per day</dd> </dl> <hr> <p>Cooking is done by the chefs on a set rotation.</p> </section>
There is no need for an hr element between the
sections themselves, since the section elements and
the h1 elements imply thematic changes themselves.
The following extract from Pandora's Star by Peter
F. Hamilton shows two paragraphs that precede a scene change and
the paragraph that follows it. The scene change, represented in the
printed book by a gap containing a solitary centered star between
the second and third paragraphs, is here represented using the
hr element.
<p>Dudley was ninety-two, in his second life, and fast approaching
time for another rejuvenation. Despite his body having the physical
age of a standard fifty-year-old, the prospect of a long degrading
campaign within academia was one he regarded with dread. For a
supposedly advanced civilization, the Intersolar Commonwealth could be
appallingly backward at times, not to mention cruel.</p>
<p><i>Maybe it won't be that bad</i>, he told himself. The lie was
comforting enough to get him through the rest of the night's
shift.</p>
<hr>
<p>The Carlton AllLander drove Dudley home just after dawn. Like the
astronomer, the vehicle was old and worn, but perfectly capable of
doing its job. It had a cheap diesel engine, common enough on a
semi-frontier world like Gralmond, although its drive array was a
thoroughly modern photoneural processor. With its high suspension and
deep-tread tyres it could plough along the dirt track to the
observatory in all weather and seasons, including the metre-deep snow
of Gralmond's winters.</p>
The hr element does not affect the
document's outline.
pre elementinterface HTMLPreElement : HTMLElement {};
The pre element represents a block of
preformatted text, in which structure is represented by typographic
conventions rather than by elements.
In the HTML syntax, a leading
newline character immediately following the pre element
start tag is stripped.
Some examples of cases where the pre element could
be used:
Authors are encouraged to consider how preformatted text will be experienced when the formatting is lost, as will be the case for users of speech synthesizers, braille displays, and the like. For cases like ASCII art, it is likely that an alternative presentation, such as a textual description, would be more universally accessible to the readers of the document.
To represent a block of computer code, the pre
element can be used with a code element; to represent a
block of computer output the pre element can be used
with a samp element. Similarly, the kbd
element can be used within a pre element to indicate
text that the user is to enter.
A newline in a pre element should separate
paragraphs for the purposes of the Unicode bidirectional algorithm.
This requirement may be implemented indirectly through the style
layer. For example, an HTML+CSS user agent could implement these
requirements by implementing the CSS 'unicode-bidi' property. [BIDI] [CSS]
In the following snippet, a sample of computer code is presented.
<p>This is the <code>Panel</code> constructor:</p>
<pre><code>function Panel(element, canClose, closeHandler) {
this.element = element;
this.canClose = canClose;
this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>
In the following snippet, samp and kbd
elements are mixed in the contents of a pre element to
show a session of Zork I.
<pre><samp>You are in an open field west of a big white house with a boarded front door. There is a small mailbox here. ></samp> <kbd>open mailbox</kbd> <samp>Opening the mailbox reveals: A leaflet. ></samp></pre>
The following shows a contemporary poem that uses the
pre element to preserve its unusual formatting, which
forms an intrinsic part of the poem itself.
<pre> maxling
it is with a heart
heavy
that i admit loss of a feline
so loved
a friend lost to the
unknown
(night)
~cdr 11dec07</pre>
blockquote elementciteinterface HTMLQuoteElement : HTMLElement { attribute DOMString cite; };
The HTMLQuoteElement interface is
also used by the q element.
The blockquote element represents a
section that is quoted from another source.
Content inside a blockquote must be quoted from
another source, whose address, if it has one, may be cited in the
cite
attribute.
If the cite attribute
is present, it must be a valid URL potentially surrounded by
spaces. To obtain the corresponding
citation link, the value of the attribute must be resolved relative to the element. User
agents should allow users to follow such citation links.
The cite IDL
attribute must reflect the element's cite content attribute.
Here a blockquote element is used in conjunction
with a figure element and its figcaption
to clearly relate a quote to its attribution (which is not part of
the quote and therefore doesn't belong inside the
blockquote itself):
<figure> <blockquote> <p>The truth may be puzzling. It may take some work to grapple with. It may be counterintuitive. It may contradict deeply held prejudices. It may not be consonant with what we desperately want to be true. But our preferences do not determine what's true. We have a method, and that method helps us to reach not absolute truth, only asymptotic approaches to the truth — never there, just closer and closer, always finding vast new oceans of undiscovered possibilities. Cleverly designed experiments are the key.</p> </blockquote> <figcaption>Carl Sagan, in "<cite>Wonder and Skepticism</cite>", from the <cite>Skeptical Enquirer</cite> Volume 19, Issue 1 (January-February 1995)</cite></figcaption> </figure>
This next example shows the use of cite alongside
blockquote:
<p>His next piece was the aptly named <cite>Sonnet 130</cite>:</p> <blockquote cite="http://quotes.example.org/s/sonnet130.html"> <p>My mistress' eyes are nothing like the sun,<br> Coral is far more red, than her lips red,<br> ...
This example shows how a forum post could use
blockquote to show what post a user is replying
to. The article element is used for each post, to mark
up the threading.
<article>
<h1><a href="http://bacon.example.com/?blog=109431">Bacon on a crowbar</a></h1>
<article>
<header><strong>t3yw</strong> 12 points 1 hour ago</header>
<p>I bet a narwhal would love that.</p>
<footer><a href="?pid=29578">permalink</a></footer>
<article>
<header><strong>greg</strong> 8 points 1 hour ago</header>
<blockquote><p>I bet a narwhal would love that.</p></blockquote>
<p>Dude narwhals don't eat bacon.</p>
<footer><a href="?pid=29579">permalink</a></footer>
<article>
<header><strong>t3yw</strong> 15 points 1 hour ago</header>
<blockquote>
<blockquote><p>I bet a narwhal would love that.</p></blockquote>
<p>Dude narwhals don't eat bacon.</p>
</blockquote>
<p>Next thing you'll be saying they don't get capes and wizard
hats either!</p>
<footer><a href="?pid=29580">permalink</a></footer>
<article>
<article>
<header><strong>boing</strong> -5 points 1 hour ago</header>
<p>narwhals are worse than ceiling cat</p>
<footer><a href="?pid=29581">permalink</a></footer>
</article>
</article>
</article>
</article>
<article>
<header><strong>fred</strong> 1 points 23 minutes ago</header>
<blockquote><p>I bet a narwhal would love that.</p></blockquote>
<p>I bet they'd love to peel a banana too.</p>
<footer><a href="?pid=29582">permalink</a></footer>
</article>
</article>
</article>
This example shows the use of a blockquote for
short snippets, demonstrating that one does not have to use
p elements inside blockquote
elements:
<p>He began his list of "lessons" with the following:</p> <blockquote>One should never assume that his side of the issue will be recognized, let alone that it will be conceded to have merits.</blockquote> <p>He continued with a number of similar points, ending with:</p> <blockquote>Finally, one should be prepared for the threat of breakdown in negotiations at any given moment and not be cowed by the possiblity.</blockquote> <p>We shall now discuss these points...
Examples of how to
represent a conversation are shown in a later section; it is not
appropriate to use the cite and blockquote
elements for this purpose.
ol elementli element: Palpable content.li elements.reversedstarttypeinterface HTMLOListElement : HTMLElement { attribute boolean reversed; attribute long start; attribute DOMString type; };
The ol element represents a list of
items, where the items have been intentionally ordered, such that
changing the order would change the meaning of the document.
The items of the list are the li element child nodes
of the ol element, in tree order.
The reversed
attribute is a boolean attribute. If present, it
indicates that the list is a descending list (..., 3, 2, 1). If the
attribute is omitted, the list is an ascending list (1, 2, 3,
...).
The start
attribute, if present, must be a valid integer giving
the ordinal value of the first list item.
If the start attribute is
present, user agents must parse it as an integer, in order to determine the
attribute's value. The default value, used if the attribute is
missing or if the value cannot be converted to a number according to
the referenced algorithm, is 1 if the element has no reversed attribute, and is the
number of child li elements otherwise.
The first item in the list has the ordinal value
given by the ol element's start attribute, unless that
li element has a value attribute with a value that can
be successfully parsed, in which case it has the ordinal
value given by that value
attribute.
Each subsequent item in the list has the ordinal
value given by its value
attribute, if it has one, or, if it doesn't, the ordinal
value of the previous item, plus one if the reversed is absent, or minus one if
it is present.
The type attribute
can be used to specify the kind of marker to use in the list, in the
cases where that matters (e.g. because items are to be referenced by
their number/letter). The attribute, if specified, must have a value
that is a case-sensitive match for one of the
characters given in the first cell of one of the rows of the
following table. The type attribute represents the state
given in the cell in the second column of the row whose first cell
matches the attribute's value; if none of the cells match, or if the
attribute is omitted, then the attribute represents the decimal state.
| Keyword | State | Description | Examples for values 1-3 and 3999-4001 | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
1 (U+0031)
| decimal | Decimal numbers | 1. | 2. | 3. | ... | 3999. | 4000. | 4001. | ... |
a (U+0061)
| lower-alpha | Lowercase latin alphabet | a. | b. | c. | ... | ewu. | ewv. | eww. | ... |
A (U+0041)
| upper-alpha | Uppercase latin alphabet | A. | B. | C. | ... | EWU. | EWV. | EWW. | ... |
i (U+0069)
| lower-roman | Lowercase roman numerals | i. | ii. | iii. | ... | mmmcmxcix. | i̅v̅. | i̅v̅i. | ... |
I (U+0049)
| upper-roman | Uppercase roman numerals | I. | II. | III. | ... | MMMCMXCIX. | I̅V̅. | I̅V̅I. | ... |
User agents should render the items of the list in a manner
consistent with the state of the type attribute of the ol
element. Numbers less than or equal to zero should always use the
decimal system regardless of the type attribute.
For CSS user agents, a mapping for this attribute to the 'list-style-type' CSS property is given in the rendering section (the mapping is straightforward: the states above have the same names as their corresponding CSS values).
The reversed,
start, and type IDL attributes must
reflect the respective content attributes of the same
name. The start IDL attribute has
the same default as its content attribute.
The following markup shows a list where the order matters, and
where the ol element is therefore appropriate. Compare
this list to the equivalent list in the ul section to
see an example of the same items using the ul
element.
<p>I have lived in the following countries (given in the order of when I first lived there):</p> <ol> <li>Switzerland <li>United Kingdom <li>United States <li>Norway </ol>
Note how changing the order of the list changes the meaning of the document. In the following example, changing the relative order of the first two items has changed the birthplace of the author:
<p>I have lived in the following countries (given in the order of when I first lived there):</p> <ol> <li>United Kingdom <li>Switzerland <li>United States <li>Norway </ol>
ul elementli element: Palpable content.li elements.interface HTMLUListElement : HTMLElement {};
The ul element represents a list of
items, where the order of the items is not important — that
is, where changing the order would not materially change the meaning
of the document.
The items of the list are the li element child nodes
of the ul element.
The following markup shows a list where the order does not
matter, and where the ul element is therefore
appropriate. Compare this list to the equivalent list in the
ol section to see an example of the same items using
the ol element.
<p>I have lived in the following countries:</p> <ul> <li>Norway <li>Switzerland <li>United Kingdom <li>United States </ul>
Note that changing the order of the list does not change the meaning of the document. The items in the snippet above are given in alphabetical order, but in the snippet below they are given in order of the size of their current account balance in 2007, without changing the meaning of the document whatsoever:
<p>I have lived in the following countries:</p> <ul> <li>Switzerland <li>Norway <li>United Kingdom <li>United States </ul>
li elementol elements.ul elements.menu elements.ol element: valueinterface HTMLLIElement : HTMLElement { attribute long value; };
The li element represents a list
item. If its parent element is an ol, ul,
or menu element, then the element is an item of the
parent element's list, as defined for those elements. Otherwise, the
list item has no defined list-related relationship to any other
li element.
If the parent element is an ol element, then the
li element has an ordinal value.
The value
attribute, if present, must be a valid integer giving
the ordinal value of the list item.
If the value attribute is
present, user agents must parse it as an integer, in order to determine the
attribute's value. If the attribute's value cannot be converted to a
number, the attribute must be treated as if it was absent. The
attribute has no default value.
The value attribute is
processed relative to the element's parent ol element
(q.v.), if there is one. If there is not, the attribute has no
effect.
The value IDL
attribute must reflect the value of the value content attribute.
The following example, the top ten movies are listed (in reverse
order). Note the way the list is given a title by using a
figure element and its figcaption
element.
<figure> <figcaption>The top 10 movies of all time</figcaption> <ol> <li value="10"><cite>Josie and the Pussycats</cite>, 2001</li> <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li> <li value="8"><cite>A Bug's Life</cite>, 1998</li> <li value="7"><cite>Toy Story</cite>, 1995</li> <li value="6"><cite>Monsters, Inc</cite>, 2001</li> <li value="5"><cite>Cars</cite>, 2006</li> <li value="4"><cite>Toy Story 2</cite>, 1999</li> <li value="3"><cite>Finding Nemo</cite>, 2003</li> <li value="2"><cite>The Incredibles</cite>, 2004</li> <li value="1"><cite>Ratatouille</cite>, 2007</li> </ol> </figure>
The markup could also be written as follows, using the reversed attribute on the
ol element:
<figure> <figcaption>The top 10 movies of all time</figcaption> <ol reversed> <li><cite>Josie and the Pussycats</cite>, 2001</li> <li><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li> <li><cite>A Bug's Life</cite>, 1998</li> <li><cite>Toy Story</cite>, 1995</li> <li><cite>Monsters, Inc</cite>, 2001</li> <li><cite>Cars</cite>, 2006</li> <li><cite>Toy Story 2</cite>, 1999</li> <li><cite>Finding Nemo</cite>, 2003</li> <li><cite>The Incredibles</cite>, 2004</li> <li><cite>Ratatouille</cite>, 2007</li> </ol> </figure>
If the li element is the child of a
menu element and itself has a child that defines a
command, then the
li element will match the :enabled and :disabled pseudo-classes in the
same way as the first such child element does.
While it is conforming to include heading elements
(e.g. h1) inside li elements, it likely
does not convey the semantics that the author intended. A heading
starts a new section, so a heading in a list implicitly splits the
list into spanning multiple sections.
dl elementdt elements followed by one or more dd
elements.interface HTMLDListElement : HTMLElement {};
The dl element represents an
association list consisting of zero or more name-value groups (a
description list). Each group must consist of one or more names
(dt elements) followed by one or more values
(dd elements). Within a single dl element,
there should not be more than one dt element for each
name.
Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.
The values within a group are alternatives; multiple paragraphs
forming part of the same value must all be given within the same
dd element.
The order of the list of groups, and of the names and values within each group, may be significant.
If a dl element is empty, it contains no groups.
If a dl element has one or more non-whitespace Text
node children, or has child elements that are neither
dt nor dd elements, all such
Text nodes and elements, as well as their descendants
(including any dt or dd elements), do not
form part of any groups in that dl.
If a dl element has one or more dt
element children but no dd element children, then it
consists of one group with names but no values.
If a dl element has one or more dd
element children but no dt element children, then it
consists of one group with values but no names.
If a dl element's first dt or
dd element child is a dd element, then the
first group has no associated name.
If a dl element's last dt or
dd element child is a dt element, then the
last group has no associated value.
When a dl element doesn't match its
content model, it is often due to accidentally using dd
elements in the place of dt elements and vice
versa. Conformance checkers can spot such mistakes and might be able
to advise authors how to correctly use the markup.
In the following example, one entry ("Authors") is linked to two values ("John" and "Luke").
<dl> <dt> Authors <dd> John <dd> Luke <dt> Editor <dd> Frank </dl>
In the following example, one definition is linked to two terms.
<dl> <dt lang="en-US"> <dfn>color</dfn> </dt> <dt lang="en-GB"> <dfn>colour</dfn> </dt> <dd> A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view. </dd> </dl>
The following example illustrates the use of the dl
element to mark up metadata of sorts. At the end of the example,
one group has two metadata labels ("Authors" and "Editors") and two
values ("Robert Rothman" and "Daniel Jackson").
<dl> <dt> Last modified time </dt> <dd> 2004-12-23T23:33Z </dd> <dt> Recommended update interval </dt> <dd> 60s </dd> <dt> Authors </dt> <dt> Editors </dt> <dd> Robert Rothman </dd> <dd> Daniel Jackson </dd> </dl>
The following example shows the dl element used to
give a set of instructions. The order of the instructions here is
important (in the other examples, the order of the blocks was not
important).
<p>Determine the victory points as follows (use the first matching case):</p> <dl> <dt> If you have exactly five gold coins </dt> <dd> You get five victory points </dd> <dt> If you have one or more gold coins, and you have one or more silver coins </dt> <dd> You get two victory points </dd> <dt> If you have one or more silver coins </dt> <dd> You get one victory point </dd> <dt> Otherwise </dt> <dd> You get no victory points </dd> </dl>
The following snippet shows a dl element being used
as a glossary. Note the use of dfn to indicate the
word being defined.
<dl> <dt><dfn>Apartment</dfn>, n.</dt> <dd>An execution context grouping one or more threads with one or more COM objects.</dd> <dt><dfn>Flat</dfn>, n.</dt> <dd>A deflated tire.</dd> <dt><dfn>Home</dfn>, n.</dt> <dd>The user's login directory.</dd> </dl>
The dl element is inappropriate for
marking up dialogue. Examples of how to
mark up dialogue are shown below.
dt elementdd or dt elements inside dl elements.header, footer, sectioning content, or heading content descendants.HTMLElement.The dt element represents the term, or
name, part of a term-description group in a description list
(dl element).
The dt element itself, when used in a
dl element, does not indicate that its contents are a
term being defined, but this can be indicated using the
dfn element.
This example shows a list of frequently asked questions (a FAQ)
marked up using the dt element for questions and the
dd element for answers.
<article> <h1>FAQ</h1> <dl> <dt>What do we want?</dt> <dd>Our data.</dd> <dt>When do we want it?</dt> <dd>Now.</dd> <dt>Where is it?</dt> <dd>We are not sure.</dd> </dl> </article>
dd elementdt or dd elements inside dl elements.HTMLElement.The dd element represents the
description, definition, or value, part of a term-description group
in a description list (dl element).
A dl can be used to define a vocabulary list, like
in a dictionary. In the following example, each entry, given by a
dt with a dfn, has several
dds, showing the various parts of the definition.
<dl> <dt><dfn>happiness</dfn></dt> <dd class="pronunciation">/'hæ p. nes/</dd> <dd class="part-of-speech"><i><abbr>n.</abbr></i></dd> <dd>The state of being happy.</dd> <dd>Good fortune; success. <q>Oh <b>happiness</b>! It worked!</q></dd> <dt><dfn>rejoice</dfn></dt> <dd class="pronunciation">/ri jois'/</dd> <dd><i class="part-of-speech"><abbr>v.intr.</abbr></i> To be delighted oneself.</dd> <dd><i class="part-of-speech"><abbr>v.tr.</abbr></i> To cause one to be delighted.</dd> </dl>
figure elementfigcaption element followed by flow content.figcaption element.HTMLElement.The figure element represents some
flow content, optionally with a caption, that is
self-contained and is typically referenced as a single unit from the
main flow of the document.
The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc, that are referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.
The first figcaption
element child of the element, if any, represents the caption of the
figure element's contents. If there is no child
figcaption element, then there is no caption.
This example shows the figure element to mark up a
code listing.
<p>In <a href="#l4">listing 4</a> we see the primary core interface
API declaration.</p>
<figure id="l4">
<figcaption>Listing 4. The primary core interface API declaration.</figcaption>
<pre><code>interface PrimaryCore {
boolean verifyDataLine();
void sendData(in sequence<byte> data);
void initSelfDestruct();
}</code></pre>
</figure>
<p>The API is designed to use UTF-8.</p>
Here we see a figure element to mark up a
photo.
<figure>
<img src="bubbles-work.jpeg"
alt="Bubbles, sitting in his office chair, works on his
latest project intently.">
<figcaption>Bubbles at work</figcaption>
</figure>
In this example, we see an image that is not a figure, as well as an image and a video that are.
<h2>Malinko's comics</h2> <p>This case centered on some sort of "intellectual property" infringement related to a comic (see Exhibit A). The suit started after a trailer ending with these words: <blockquote> <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!"> </blockquote> <p>...was aired. A lawyer, armed with a Bigger Notebook, launched a preemptive strike using snowballs. A complete copy of the trailer is included with Exhibit B. <figure> <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper."> <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption> </figure> <figure> <video src="ex-b.mov"></video> <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption> </figure> <p>The case was resolved out of court.
Here, a part of a poem is marked up using
figure.
<figure> <p>'Twas brillig, and the slithy toves<br> Did gyre and gimble in the wabe;<br> All mimsy were the borogoves,<br> And the mome raths outgrabe.</p> <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption> </figure>
In this example, which could be part of a much larger work discussing a castle, the figure has three images in it.
<figure>
<img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
alt="The castle has one tower, and a tall wall around it.">
<img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
alt="The castle now has two towers and two walls.">
<img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
alt="The castle lies in ruins, the original tower all that remains in one piece.">
<figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
</figure>
figcaption elementfigure element.HTMLElement.The figcaption element represents a
caption or legend for the rest of the contents of the
figcaption element's parent figure
element, if any.
div elementinterface HTMLDivElement : HTMLElement {};
The div element has no special meaning at all. It
represents its children. It can be used with the class, lang, and title attributes to mark up semantics
common to a group of consecutive elements.
Authors are strongly encouraged to view the
div element as an element of last resort, for when no
other element is suitable. Use of more appropriate elements instead
of the div element leads to better accessibility for
readers and easier maintainability for authors.
For example, a blog post would be marked up using
article, a chapter using section, a
page's navigation aids using nav, and a group of form
controls using fieldset.
On the other hand, div elements can be useful for
stylistic purposes or to wrap multiple paragraphs within a section
that are all to be annotated in a similar way. In the following
example, we see div elements used as a way to set the
language of two paragraphs at once, instead of setting the language
on the two paragraph elements separately:
<article lang="en-US"> <h1>My use of language and my cats</h1> <p>My cat's behavior hasn't changed much since her absence, except that she plays her new physique to the neighbors regularly, in an attempt to get pets.</p> <div lang="en-GB"> <p>My other cat, coloured black and white, is a sweetie. He followed us to the pool today, walking down the pavement with us. Yesterday he apparently visited our neighbours. I wonder if he recognises that their flat is a mirror image of ours.</p> <p>Hm, I just noticed that in the last paragraph I used British English. But I'm supposed to write in American English. So I shouldn't say "pavement" or "flat" or "colour"...</p> </div> <p>I should say "sidewalk" and "apartment" and "color"!</p> </article>
a elementhreftargetdownloadpingrelmediahreflangtypeinterface HTMLAnchorElement : HTMLElement { stringifier attribute DOMString href; attribute DOMString target; attribute DOMString download; attribute DOMString ping; attribute DOMString rel; readonly attribute DOMTokenList relList; attribute DOMString media; attribute DOMString hreflang; attribute DOMString type; attribute DOMString text; // URL decomposition IDL attributes attribute DOMString protocol; attribute DOMString host; attribute DOMString hostname; attribute DOMString port; attribute DOMString pathname; attribute DOMString search; attribute DOMString hash; };
If the a element has an href attribute, then it
represents a hyperlink (a hypertext
anchor).
If the a element has no href attribute, then the element
represents a placeholder for where a link might
otherwise have been placed, if it had been relevant.
The target,
download,
ping,
rel, media, hreflang, and type attributes must be omitted
if the href attribute is
not present.
If the itemprop is specified
on an a element, then the href attribute must also be
specified.
If a site uses a consistent navigation toolbar on every page,
then the link that would normally link to the page itself could be
marked up using an a element:
<nav> <ul> <li> <a href="/">Home</a> </li> <li> <a href="/news">News</a> </li> <li> <a>Examples</a> </li> <li> <a href="/legal">Legal</a> </li> </ul> </nav>
The href,
target,
download, and
ping
attributes affect what happens when users follow hyperlinks
or download hyperlinks
created using the a element. The
rel, media, hreflang, and type attributes may be used to
indicate to the user the likely nature of the target resource before
the user follows the link.
The activation behavior of a elements
that create hyperlinks is to run the
following steps:
If the algorithm is not allowed to show a
pop-up and either the a
element has a download attribute or the
element's target
attribute is present and applying the rules for choosing a
browsing context given a browsing context name, using the
value of the target
attribute as the browsing context name, would result in there not
being a chosen browsing context, then throw an
InvalidAccessError exception and abort these
steps.
If the target of the click
event is an img element with an ismap attribute specified, then
server-side image map processing must be performed, as follows:
click event was a
real pointing-device-triggered click event on the img
element, then let x be the distance in CSS
pixels from the left edge of the image's left border, if it has
one, or the left edge of the image otherwise, to the location of
the click, and let y be the distance in CSS
pixels from the top edge of the image's top border, if it has
one, or the top edge of the image otherwise, to the location of
the click. Otherwise, let x and y be zero.Finally, the user agent must follow the hyperlink
or download the hyperlink
created by the a element, as determined by
the download attribute and
any expressed user preference. If the steps above defined a
hyperlink suffix, then take that into account when
following or downloading the hyperlink.
textSame as textContent.
The IDL attributes
href,
download,
ping,
target, rel, media, hreflang, and type, must
reflect the respective content attributes of the same
name.
The IDL attribute relList must
reflect the rel
content attribute.
The text IDL
attribute, on getting, must return the same value as the
textContent IDL attribute on the element, and on
setting, must act as if the textContent IDL attribute
on the element had been set to the new value.
The a element also supports the complement of
URL decomposition IDL attributes, protocol, host, port, hostname, pathname, search, and hash. These must follow the
rules given for URL decomposition IDL attributes, with
the input being the result of
resolving the element's href attribute relative to the
element, if there is such an attribute and resolving it is
successful, or the empty string otherwise; and the common setter action being the
same as setting the element's href attribute to the new output
value.
The a element may be wrapped around entire
paragraphs, lists, tables, and so forth, even entire sections, so
long as there is no interactive content within (e.g. buttons or
other links). This example shows how this can be used to make an
entire advertising block into a link:
<aside class="advertising"> <h1>Advertising</h1> <a href="http://ad.example.com/?adid=1929&pubid=1422"> <section> <h1>Mellblomatic 9000!</h1> <p>Turn all your widgets into mellbloms!</p> <p>Only $9.99 plus shipping and handling.</p> </section> </a> <a href="http://ad.example.com/?adid=375&pubid=1422"> <section> <h1>The Mellblom Browser</h1> <p>Web browsing at the speed of light.</p> <p>No other browser goes faster!</p> </section> </a> </aside>
em elementHTMLElement.The em element represents stress
emphasis of its contents.
The level of emphasis that a particular piece of content has is
given by its number of ancestor em elements.
The placement of emphasis changes the meaning of the sentence. The element thus forms an integral part of the content. The precise way in which emphasis is used in this way depends on the language.
These examples show how changing the emphasis changes the meaning. First, a general statement of fact, with no emphasis:
<p>Cats are cute animals.</p>
By emphasizing the first word, the statement implies that the kind of animal under discussion is in question (maybe someone is asserting that dogs are cute):
<p><em>Cats</em> are cute animals.</p>
Moving the emphasis to the verb, one highlights that the truth of the entire sentence is in question (maybe someone is saying cats are not cute):
<p>Cats <em>are</em> cute animals.</p>
By moving it to the adjective, the exact nature of the cats is reasserted (maybe someone suggested cats were mean animals):
<p>Cats are <em>cute</em> animals.</p>
Similarly, if someone asserted that cats were vegetables, someone correcting this might emphasize the last word:
<p>Cats are cute <em>animals</em>.</p>
By emphasizing the entire sentence, it becomes clear that the speaker is fighting hard to get the point across. This kind of emphasis also typically affects the punctuation, hence the exclamation mark here.
<p><em>Cats are cute animals!</em></p>
Anger mixed with emphasizing the cuteness could lead to markup such as:
<p><em>Cats are <em>cute</em> animals!</em></p>
The em element isn't a generic "italics"
element. Sometimes, text is intended to stand out from the rest of
the paragraph, as if it was in a different mood or voice. For this,
the i element is more appropriate.
The em element also isn't intended to convey
importance; for that purpose, the strong element is
more appropriate.
strong elementHTMLElement.The strong element represents strong
importance for its contents.
The relative level of importance of a piece of content is given
by its number of ancestor strong elements; each
strong element increases the importance of its
contents.
Changing the importance of a piece of text with the
strong element does not change the meaning of the
sentence.
Here is an example of a warning notice in a game, with the various parts marked up according to how important they are:
<p><strong>Warning.</strong> This dungeon is dangerous. <strong>Avoid the ducks.</strong> Take any gold you find. <strong><strong>Do not take any of the diamonds</strong>, they are explosive and <strong>will destroy anything within ten meters.</strong></strong> You have been warned.</p>
small elementHTMLElement.The small element represents side
comments such as small print.
Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.
The small element does not
"de-emphasize" or lower the importance of text emphasized by the
em element or marked as important with the
strong element. To mark text as not emphasized or
important, simply do not mark it up with the em or
strong elements respectively.
The small element should not be used for extended
spans of text, such as multiple paragraphs, lists, or sections of
text. It is only intended for short runs of text. The text of a page
listing terms of use, for instance, would not be a suitable
candidate for the small element: in such a case, the
text is not a side comment, it is the main content of the page.
In this example, the small element is used to
indicate that value-added tax is not included in a price of a hotel
room:
<dl> <dt>Single room <dd>199 € <small>breakfast included, VAT not included</small> <dt>Double room <dd>239 € <small>breakfast included, VAT not included</small> </dl>
In this second example, the small element is used
for a side comment in an article.
<p>Example Corp today announced record profits for the second quarter <small>(Full Disclosure: Foo News is a subsidiary of Example Corp)</small>, leading to speculation about a third quarter merger with Demo Group.</p>
This is distinct from a sidebar, which might be multiple paragraphs long and is removed from the main flow of text. In the following example, we see a sidebar from the same article. This sidebar also has small print, indicating the source of the information in the sidebar.
<aside> <h1>Example Corp</h1> <p>This company mostly creates small software and Web sites.</p> <p>The Example Corp company mission is "To provide entertainment and news on a sample basis".</p> <p><small>Information obtained from <a href="http://example.com/about.html">example.com</a> home page.</small></p> </aside>
In this last example, the small element is marked
as being important small print.
<p><strong><small>Continued use of this service will result in a kiss.</small></strong></p>
s elementHTMLElement.The s element represents contents that
are no longer accurate or no longer relevant.
The s element is not appropriate when
indicating document edits; to mark a span of text as having been
removed from a document, use the del element.
In this example a recommended retail price has been marked as no longer relevant as the product in question has a new sale price.
<p>Buy our Iced Tea and Lemonade!</p> <p><s>Recommended retail price: $3.99 per bottle</s></p> <p><strong>Now selling for just $2.99 a bottle!</strong></p>
cite elementHTMLElement.The cite element represents the title
of a work (e.g.
a book,
a paper,
an essay,
a poem,
a score,
a song,
a script,
a film,
a TV show,
a game,
a sculpture,
a painting,
a theatre production,
a play,
an opera,
a musical,
an exhibition,
a legal case report,
etc). This can be a work that is being quoted or
referenced in detail (i.e. a citation), or it can just be a work
that is mentioned in passing.
A person's name is not the title of a work — even if people
call that person a piece of work — and the element must
therefore not be used to mark up people's names. (In some cases, the
b element might be appropriate for names; e.g. in a
gossip article where the names of famous people are keywords
rendered with a different style to draw attention to them. In other
cases, if an element is really needed, the
span element can be used.)
This next example shows a typical use of the cite
element:
<p>My favorite book is <cite>The Reality Dysfunction</cite> by Peter F. Hamilton. My favorite comic is <cite>Pearls Before Swine</cite> by Stephan Pastis. My favorite track is <cite>Jive Samba</cite> by the Cannonball Adderley Sextet.</p>
This is correct usage:
<p>According to the Wikipedia article <cite>HTML</cite>, as it stood in mid-February 2008, leaving attribute values unquoted is unsafe. This is obviously an over-simplification.</p>
The following, however, is incorrect usage, as the
cite element here is containing far more than the
title of the work:
<!-- do not copy this example, it is an example of bad usage! --> <p>According to <cite>the Wikipedia article on HTML</cite>, as it stood in mid-February 2008, leaving attribute values unquoted is unsafe. This is obviously an over-simplification.</p>
The cite element is obviously a key part of any
citation in a bibliography, but it is only used to mark the
title:
<p><cite>Universal Declaration of Human Rights</cite>, United Nations, December 1948. Adopted by General Assembly resolution 217 A (III).</p>
A citation is not a quote (for
which the q element is appropriate).
This is incorrect usage, because cite is not for
quotes:
<p><cite>This is wrong!</cite>, said Ian.</p>
This is also incorrect usage, because a person is not a work:
<p><q>This is still wrong!</q>, said <cite>Ian</cite>.</p>
The correct usage does not use a cite element:
<p><q>This is correct</q>, said Ian.</p>
As mentioned above, the b element might be relevant
for marking names as being keywords in certain kinds of
documents:
<p>And then <b>Ian</b> said <q>this might be right, in a gossip column, maybe!</q>.</p>
q elementciteHTMLQuoteElement.The q element represents some phrasing content quoted from another
source.
Quotation punctuation (such as quotation marks) that is quoting
the contents of the element must not appear immediately before,
after, or inside q elements; they will be inserted into
the rendering by the user agent.
Content inside a q element must be quoted from
another source, whose address, if it has one, may be cited in the
cite attribute. The
source may be fictional, as when quoting characters in a novel or
screenplay.
If the cite attribute is
present, it must be a valid URL potentially surrounded by
spaces. To obtain the corresponding
citation link, the value of the attribute must be resolved relative to the element. User
agents should allow users to follow such citation links.
The q element must not be used in place of quotation
marks that do not represent quotes; for example, it is inappropriate
to use the q element for marking up sarcastic
statements.
The use of q elements to mark up quotations is
entirely optional; using explicit quotation punctuation without
q elements is just as correct.
Here is a simple example of the use of the q
element:
<p>The man said <q>Things that are impossible just take longer</q>. I disagreed with him.</p>
Here is an example with both an explicit citation link in the
q element, and an explicit citation outside:
<p>The W3C page <cite>About W3C</cite> says the W3C's mission is <q cite="http://www.w3.org/Consortium/">To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web</q>. I disagree with this mission.</p>
In the following example, the quotation itself contains a quotation:
<p>In <cite>Example One</cite>, he writes <q>The man said <q>Things that are impossible just take longer</q>. I disagreed with him</q>. Well, I disagree even more!</p>
In the following example, quotation marks are used instead of
the q element:
<p>His best argument was ❝I disagree❞, which I thought was laughable.</p>
In the following example, there is no quote — the
quotation marks are used to name a word. Use of the q
element in this case would be inappropriate.
<p>The word "ineffable" could have been used to describe the disaster resulting from the campaign's mismanagement.</p>
dfn elementdfn element descendants.title attribute has special semantics on this element.HTMLElement.The dfn element represents the defining
instance of a term. The paragraph,
description list group, or section that is the nearest
ancestor of the dfn element must also contain the
definition(s) for the term given
by the dfn element.
Defining term: If the dfn element has a
title attribute, then
the exact value of that attribute is the term being defined.
Otherwise, if it contains exactly one element child node and no
child Text nodes, and that child
element is an abbr element with a title attribute, then the exact value
of that attribute is the term being defined. Otherwise, it
is the exact textContent of the dfn
element that gives the term being defined.
If the title attribute of the
dfn element is present, then it must contain only the
term being defined.
The title attribute
of ancestor elements does not affect dfn elements.
An a element that links to a dfn
element represents an instance of the term defined by the
dfn element.
In the following fragment, the term "Garage Door Opener" is first defined in the first paragraph, then used in the second. In both cases, its abbreviation is what is actually displayed.
<p>The <dfn><abbr title="Garage Door Opener">GDO</abbr></dfn> is a device that allows off-world teams to open the iris.</p> <!-- ... later in the document: --> <p>Teal'c activated his <abbr title="Garage Door Opener">GDO</abbr> and so Hammond ordered the iris to be opened.</p>
With the addition of an a element, the reference
can be made explicit:
<p>The <dfn id=gdo><abbr title="Garage Door Opener">GDO</abbr></dfn> is a device that allows off-world teams to open the iris.</p> <!-- ... later in the document: --> <p>Teal'c activated his <a href=#gdo><abbr title="Garage Door Opener">GDO</abbr></a> and so Hammond ordered the iris to be opened.</p>
abbr elementtitle attribute has special semantics on this element.HTMLElement.The abbr element represents an
abbreviation or acronym, optionally with its expansion. The title attribute may be
used to provide an expansion of the abbreviation. The attribute, if
specified, must contain an expansion of the abbreviation, and
nothing else.
The paragraph below contains an abbreviation marked up with the
abbr element. This paragraph defines the term "Web Hypertext Application Technology
Working Group".
<p>The <dfn id=whatwg><abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr></dfn> is a loose unofficial collaboration of Web browser manufacturers and interested parties who wish to develop new technologies designed to allow authors to write and deploy Applications over the World Wide Web.</p>
An alternative way to write this would be:
<p>The <dfn id=whatwg>Web Hypertext Application Technology Working Group</dfn> (<abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>) is a loose unofficial collaboration of Web browser manufacturers and interested parties who wish to develop new technologies designed to allow authors to write and deploy Applications over the World Wide Web.</p>
This paragraph has two abbreviations. Notice how only one is
defined; the other, with no expansion associated with it, does not
use the abbr element.
<p>The <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr> started working on HTML5 in 2004.</p>
This paragraph links an abbreviation to its definition.
<p>The <a href="#whatwg"><abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a> community does not have much representation from Asia.</p>
This paragraph marks up an abbreviation without giving an expansion, possibly as a hook to apply styles for abbreviations (e.g. smallcaps).
<p>Philip` and Dashiva both denied that they were going to get the issue counts from past revisions of the specification to backfill the <abbr>WHATWG</abbr> issue graph.</p>
If an abbreviation is pluralized, the expansion's grammatical number (plural vs singular) must match the grammatical number of the contents of the element.
Here the plural is outside the element, so the expansion is in the singular:
<p>Two <abbr title="Working Group">WG</abbr>s worked on this specification: the <abbr>WHATWG</abbr> and the <abbr>HTMLWG</abbr>.</p>
Here the plural is inside the element, so the expansion is in the plural:
<p>Two <abbr title="Working Groups">WGs</abbr> worked on this specification: the <abbr>WHATWG</abbr> and the <abbr>HTMLWG</abbr>.</p>
Abbreviations do not have to be marked up using this element. It is expected to be useful in the following cases:
abbr element with a title attribute is an alternative to
including the expansion inline (e.g. in parentheses).abbr element with a title attribute or include the expansion
inline in the text the first time the abbreviation is used.abbr element
can be used without a title
attribute.Providing an expansion in a title attribute once will not necessarily
cause other abbr elements in the same document with the
same contents but without a title
attribute to behave as if they had the same expansion. Every
abbr element is independent.
data elementvalueinterface HTMLDataElement : HTMLElement { attribute DOMString value; };
The data element represents its
contents, along with a machine-readable form of those contents in
the value attribute.
The value
attribute must be present. Its value must be a representation of the
element's contents in a machine-readable format.
When the value is date- or time-related, the more
specific time element can be used instead.
The element can be used for several purposes.
When combined with microformats or the microdata attributes defined in this
specification, the element serves to provide both a machine-readable
value for the purposes of data processors, and a human-readable value
for the purposes of rendering in a Web browser. In this case, the
format to be used in the value
attribute is determined by the microformats or microdata
vocabulary in use.
The element can also, however, be used in conjunction with
scripts in the page, for when a script has a literal value to store
alongside a human-readable value. In such cases, the format to be
used depends only on the needs of the script. (The data-* attributes can also be useful in
such situations.)
The value IDL
attribute must reflect the content attribute of the
same name.
Here, a short table has its numeric values encoded using
data so that a script can provide a sorting mechanism
on each column, despite the numbers being presented in textual
form in one column and in a decomposed form in another.
<table class="sortable"> <!-- class used by script to find tables to which to add sorting controls --> <thead> <tr> <th> Game <th> Corporations <th> Map Size <tbody> <tr> <td> 1830 <td> <data value="8">Eight</data> <td> <data value="93">19+74 hexes (93 total)</data> <tr> <td> 1856 <td> <data value="11">Eleven</data> <td> <data value="99">12+87 hexes (99 total)</data> <tr> <td> 1870 <td> <data value="10">Ten</data> <td> <data value="149">4+145 hexes (149 total)</data> </table>
time elementdatetimepubdateinterface HTMLTimeElement : HTMLElement { attribute DOMString datetime; };
The time element represents its
contents, along with a machine-readable form of those contents in
the datetime attribute. The
kind of content is limited to various kinds of dates, times,
time-zone offsets, and durations, as described below.
The datetime
attribute may be present. If present, its value must be a
representation of the element's contents in a machine-readable
format.
A time element that does not have a datetime content attribute must
not have any element descendants.
The pubdate
attribute is a boolean attribute. If specified, it
indicates that the date and time given by the element is the
publication date and time of the nearest ancestor
article element, or, if the element has no ancestor
article element, of the document as a whole. If the
element has a pubdate
attribute specified, then the element needs a date. For
each article element, there must no more than one
time element with a pubdate attribute whose nearest
ancestor is that article element. Furthermore, for each
Document, there must be no more than one
time element with a pubdate attribute that does not
have an ancestor article element.
The datetime value of a time element is
the value of the element's datetime content attribute, if
it has one, or the element's textContent, if it does
not.
The datetime value of a time element
must match one of the following syntaxes.
<time>2011-11</time>
<time>2011-11-12</time>
<time>11-12</time>
<time>14:54</time>
<time>14:54:39</time>
<time>14:54:39.92922</time>
<time>2011-11-12T14:54</time>
<time>2011-11-12T14:54:39</time>
<time>2011-11-12T14:54:39.92922</time>
<time>2011-11-12 14:54</time>
<time>2011-11-12 14:54:39</time>
<time>2011-11-12 14:54:39.92922</time>
<time>Z</time>
<time>+0000</time>
<time>+00:00</time>
<time>-0800</time>
<time>-08:00</time>
<time>2011-11-12T14:54Z</time>
<time>2011-11-12T14:54:39Z</time>
<time>2011-11-12T14:54:39.92922Z</time>
<time>2011-11-12T14:54+0000</time>
<time>2011-11-12T14:54:39+0000</time>
<time>2011-11-12T14:54:39.92922+0000</time>
<time>2011-11-12T14:54+00:00</time>
<time>2011-11-12T14:54:39+00:00</time>
<time>2011-11-12T14:54:39.92922+00:00</time>
<time>2011-11-12T06:54-0800</time>
<time>2011-11-12T06:54:39-0800</time>
<time>2011-11-12T06:54:39.92922-0800</time>
<time>2011-11-12T06:54-08:00</time>
<time>2011-11-12T06:54:39-08:00</time>
<time>2011-11-12T06:54:39.92922-08:00</time>
<time>2011-11-12 14:54Z</time>
<time>2011-11-12 14:54:39Z</time>
<time>2011-11-12 14:54:39.92922Z</time>
<time>2011-11-12 14:54+0000</time>
<time>2011-11-12 14:54:39+0000</time>
<time>2011-11-12 14:54:39.92922+0000</time>
<time>2011-11-12 14:54+00:00</time>
<time>2011-11-12 14:54:39+00:00</time>
<time>2011-11-12 14:54:39.92922+00:00</time>
<time>2011-11-12 06:54-0800</time>
<time>2011-11-12 06:54:39-0800</time>
<time>2011-11-12 06:54:39.92922-0800</time>
<time>2011-11-12 06:54-08:00</time>
<time>2011-11-12 06:54:39-08:00</time>
<time>2011-11-12 06:54:39.92922-08:00</time>
<time>2011-W46</time>
<time>2011</time>
<time>PT4H18M3S</time>
<time>4h 18m 3s</time>
The machine-readable equivalent of the element's contents must be obtained from the element's datetime value by using the following algorithm:
If parsing a month string from the element's datetime value returns a month, that is the machine-readable equivalent; abort these steps.
If parsing a date string from the element's datetime value returns a date, that is the machine-readable equivalent; abort these steps.
If parsing a yearless date string from the element's datetime value returns a yearless date, that is the machine-readable equivalent; abort these steps.
If parsing a time string from the element's datetime value returns a time, that is the machine-readable equivalent; abort these steps.
If parsing a local date and time string from the element's datetime value returns a local date and time, that is the machine-readable equivalent; abort these steps.
If parsing a time-zone offset string from the element's datetime value returns a time-zone offset, that is the machine-readable equivalent; abort these steps.
If parsing a global date and time string from the element's datetime value returns a global date and time, that is the machine-readable equivalent; abort these steps.
If parsing a week string from the element's datetime value returns a week, that is the machine-readable equivalent; abort these steps.
If the element's datetime value consists of only characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then the machine-readable equivalent is the base-ten interpretation of those digits, representing a year; abort these steps.
If parsing a duration string from the element's datetime value returns a duration, that is the machine-readable equivalent; abort these steps.
There is no machine-readable equivalent.
The algorithms referenced above are intended to be designed such that for any arbitrary string s, only one of the algorithms returns a value. A more efficient approach might be to create a single algorithm that parses all these data types in one pass; developing such an algorithm is left as an exercise to the reader.
The datetime
IDL attribute must reflect the content attribute of the
same name.
The time element can be used to encode dates, for
example in microformats. The following shows a hypothetical way of
encoding an event using a variant on hCalendar that uses the
time element:
<div class="vevent"> <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a> <span class="summary">Web 2.0 Conference</span>: <time class="dtstart" datetime="2005-10-05">October 5</time> - <time class="dtend" datetime="2005-10-07">7</time>, at the <span class="location">Argent Hotel, San Francisco, CA</span> </div>
Here, a fictional microdata vocabulary based on the Atom
vocabulary is used with the time element to mark up a
blog post's publication date.
<article itemscope itemtype="http://n.example.org/rfc4287"> <h1 itemprop="title">Big tasks</h1> <footer>Published <time itemprop="published" datetime="2009-08-29">two days ago</time>.</footer> <p itemprop="content">Today, I went out and bought a bike for my kid.</p> </article>
In this example, another article's publication date is marked up
using time, this time using the schema.org microdata
vocabulary:
<article itemscope itemtype="http://schema.org/BlogPosting"> <h1 itemprop="headline">Small tasks</h1> <footer>Published <time itemprop="datePublished" datetime="2009-08-30">yesterday</time>.</footer> <p itemprop="articleBody">I put a bike bell on his bike.</p> </article>
In the following snippet, the time element is used
to encode a date in the ISO8601 format, for later processing by a
script:
<p>Our first date was <time datetime="2006-09-23">a Saturday</time>.</p>
In this second snippet, the value includes a time:
<p>We stopped talking at <time datetime="2006-09-24T05:00-07:00">5am the next morning</time>.</p>
A script loaded by the page (and thus privy to the page's
internal convention of marking up dates and times using the
time element) could scan through the page and look at
all the time elements therein to create an index of
dates and times.
For example, this element conveys the string "Tuesday" with the additional semantic that the 12th of November 2011 is the meaning that corresponds to "Tuesday":
Today is <time datetime="2011-11-12">Tuesday</time>.
In this example, a specific time in the Pacific Standard Time timezone is specified:
Your next meeting is at <time datetime="2011-11-12T15:00-08:00">3pm</time>.
code elementHTMLElement.The code element represents a fragment
of computer code. This could be an XML element name, a filename, a
computer program, or any other string that a computer would
recognize.
Although there is no formal way to indicate the language of
computer code being marked up, authors who wish to mark
code elements with the language used, e.g. so that
syntax highlighting scripts can use the right rules, may do so by
adding a class prefixed with "language-" to
the element.
The following example shows how the element can be used in a paragraph to mark up element names and computer code, including punctuation.
<p>The <code>code</code> element represents a fragment of computer code.</p> <p>When you call the <code>activate()</code> method on the <code>robotSnowman</code> object, the eyes glow.</p> <p>The example below uses the <code>begin</code> keyword to indicate the start of a statement block. It is paired with an <code>end</code> keyword, which is followed by the <code>.</code> punctuation character (full stop) to indicate the end of the program.</p>
The following example shows how a block of code could be marked
up using the pre and code elements.
<pre><code class="language-pascal">var i: Integer; begin i := 1; end.</code></pre>
A class is used in that example to indicate the language used.
See the pre element for more details.
var elementHTMLElement.The var element represents a variable.
This could be an actual variable in a mathematical expression or
programming context, an identifier representing a constant, a
function parameter, or just be a term used as a placeholder in
prose.
In the paragraph below, the letter "n" is being used as a variable in prose:
<p>If there are <var>n</var> pipes leading to the ice cream factory then I expect at <em>least</em> <var>n</var> flavors of ice cream to be available for purchase!</p>
For mathematics, in particular for anything beyond the simplest
of expressions, MathML is more appropriate. However, the
var element can still be used to refer to specific
variables that are then mentioned in MathML expressions.
In this example, an equation is shown, with a legend that
references the variables in the equation. The expression itself is
marked up with MathML, but the variables are mentioned in the
figure's legend using var.
<figure> <math> <mi>a</mi> <mo>=</mo> <msqrt> <msup><mi>b</mi><mn>2</mn></msup> <mi>+</mi> <msup><mi>c</mi><mn>2</mn></msup> </msqrt> </math> <figcaption> Using Pythagoras' theorem to solve for the hypotenuse <var>a</var> of a triangle with sides <var>b</var> and <var>c</var> </figcaption> </figure>
Here, the equation describing mass-energy equivalence is used in
a sentence, and the var element is used to mark the
variables and constants in that equation:
<p>Then he turned to the blackboard and picked up the chalk. After a few moment's thought, he wrote <var>E</var> = <var>m</var> <var>c</var><sup>2</sup>. The teacher looked pleased.</p>
samp elementHTMLElement.The samp element represents (sample)
output from a program or computing system.
See the pre and kbd
elements for more details.
This example shows the samp element being used
inline:
<p>The computer said <samp>Too much cheese in tray two</samp> but I didn't know what that meant.</p>
This second example shows a block of sample output. Nested
samp and kbd elements allow for the
styling of specific elements of the sample output using a
style sheet.
<pre><samp><span class="prompt">jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd> Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1 Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown <span class="prompt">jdoe@demo:~$</span> <span class="cursor">_</span></samp></pre>
kbd elementHTMLElement.The kbd element represents user input
(typically keyboard input, although it may also be used to represent
other input, such as voice commands).
When the kbd element is nested inside a
samp element, it represents the input as it was echoed
by the system.
When the kbd element contains a
samp element, it represents input based on system
output, for example invoking a menu item.
When the kbd element is nested inside another
kbd element, it represents an actual key or other
single unit of input as appropriate for the input mechanism.
Here the kbd element is used to indicate keys to press:
<p>To make George eat an apple, press <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></p>
In this second example, the user is told to pick a particular
menu item. The outer kbd element marks up a block of
input, with the inner kbd elements representing each
individual step of the input, and the samp elements
inside them indicating that the steps are input based on something
being displayed by the system, in this case menu labels:
<p>To make George eat an apple, select
<kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd>
</p>
Such precision isn't necessary; the following is equally fine:
<p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p>
sub and sup elementsHTMLElement.The sup element represents a
superscript and the sub element represents
a subscript.
These elements must be used only to mark up typographical
conventions with specific meanings, not for typographical
presentation for presentation's sake. For example, it would be
inappropriate for the sub and sup elements
to be used in the name of the LaTeX document preparation system. In
general, authors should use these elements only if the
absence of those elements would change the meaning of the
content.
In certain languages, superscripts are part of the typographical conventions for some abbreviations.
<p>The most beautiful women are <span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span> and <span lang="fr"><abbr>M<sup>me</sup></abbr> Denise</span>.</p>
The sub element can be used inside a
var element, for variables that have subscripts.
Here, the sub element is used to represents the
subscript that identifies the variable in a family of
variables:
<p>The coordinate of the <var>i</var>th point is (<var>x<sub><var>i</var></sub></var>, <var>y<sub><var>i</var></sub></var>). For example, the 10th point has coordinate (<var>x<sub>10</sub></var>, <var>y<sub>10</sub></var>).</p>
Mathematical expressions often use subscripts and superscripts.
Authors are encouraged to use MathML for marking up mathematics, but
authors may opt to use sub and sup if
detailed mathematical markup is not desired. [MATHML]
<var>E</var>=<var>m</var><var>c</var><sup>2</sup>
f(<var>x</var>, <var>n</var>) = log<sub>4</sub><var>x</var><sup><var>n</var></sup>
i elementHTMLElement.The i element represents a span of text
in an alternate voice or mood, or otherwise offset from the normal
prose in a manner indicating a different quality of text, such as a
taxonomic designation, a technical term, an idiomatic phrase from
another language, a thought, or a ship name in Western texts.
Terms in languages different from the main text should be
annotated with lang attributes (or,
in XML, lang
attributes in the XML namespace).
The examples below show uses of the i element:
<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p> <p>The term <i>prose content</i> is defined above.</p> <p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>
In the following example, a dream sequence is marked up using
i elements.
<p>Raymond tried to sleep.</p> <p><i>The ship sailed away on Thursday</i>, he dreamt. <i>The ship had many people aboard, including a beautiful princess called Carey. He watched her, day-in, day-out, hoping she would notice him, but she never did.</i></p> <p><i>Finally one night he picked up the courage to speak with her—</i></p> <p>Raymond woke with a start as the fire alarm rang out.</p>
Authors can use the class
attribute on the i element to identify why the element
is being used, so that if the style of a particular use (e.g. dream
sequences as opposed to taxonomic terms) is to be changed at a later
date, the author doesn't have to go through the entire document (or
series of related documents) annotating each use.
Authors are encouraged to consider whether other elements might
be more applicable than the i element, for instance the
em element for marking up stress emphasis, or the
dfn element to mark up the defining instance of a
term.
Style sheets can be used to format i
elements, just like any other element can be restyled. Thus, it is
not the case that content in i elements will
necessarily be italicized.
b elementHTMLElement.The b element represents a span of text
to which attention is being drawn for utilitarian purposes without
conveying any extra importance and with no implication of an
alternate voice or mood, such as key words in a document abstract,
product names in a review, actionable words in interactive
text-driven software, or an article lede.
The following example shows a use of the b element
to highlight key words without marking them up as important:
<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>
In the following example, objects in a text adventure are
highlighted as being special by use of the b
element.
<p>You enter a small room. Your <b>sword</b> glows brighter. A <b>rat</b> scurries past the corner wall.</p>
Another case where the b element is appropriate is
in marking up the lede (or lead) sentence or paragraph. The
following example shows how a BBC
article about kittens adopting a rabbit as their own could be
marked up:
<article> <h2>Kittens 'adopted' by pet rabbit</h2> <p><b class="lede">Six abandoned kittens have found an unexpected new mother figure — a pet rabbit.</b></p> <p>Veterinary nurse Melanie Humble took the three-week-old kittens to her Aberdeen home.</p> [...]
As with the i element, authors can use the class attribute on the b
element to identify why the element is being used, so that if the
style of a particular use is to be changed at a later date, the
author doesn't have to go through annotating each use.
The b element should be used as a last resort when
no other element is more appropriate. In particular, headings should
use the h1 to h6 elements, stress emphasis
should use the em element, importance should be denoted
with the strong element, and text marked or highlighted
should use the mark element.
The following would be incorrect usage:
<p><b>WARNING!</b> Do not frob the barbinator!</p>
In the previous example, the correct element to use would have
been strong, not b.
Style sheets can be used to format b
elements, just like any other element can be restyled. Thus, it is
not the case that content in b elements will
necessarily be boldened.
u elementHTMLElement.The u element represents a span of text
with an unarticulated, though explicitly rendered, non-textual
annotation, such as labeling the text as being a proper name in
Chinese text (a Chinese proper name mark), or labeling the text as
being misspelt.
In most cases, another element is likely to be more appropriate:
for marking stress emphasis, the em element should be
used; for marking key words or phrases either the b
element or the mark element should be used, depending
on the context; for marking book titles, the cite
element should be used; for labeling text with explicit textual
annotations, the ruby element should be used; for
labeling ship names in Western texts, the i element
should be used.
The default rendering of the u element
in visual presentations clashes with the conventional rendering of
hyperlinks (underlining). Authors are encouraged to avoid using the
u element where it could be confused for a
hyperlink.
mark elementHTMLElement.The mark element represents a run of
text in one document marked or highlighted for reference purposes,
due to its relevance in another context. When used in a quotation or
other block of text referred to from the prose, it indicates a
highlight that was not originally present but which has been added
to bring the reader's attention to a part of the text that might not
have been considered important by the original author when the block
was originally written, but which is now under previously unexpected
scrutiny. When used in the main prose of a document, it indicates a
part of the document that has been highlighted due to its likely
relevance to the user's current activity.
This example shows how the mark element can be used
to bring attention to a particular part of a quotation:
<p lang="en-US">Consider the following quote:</p> <blockquote lang="en-GB"> <p>Look around and you will find, no-one's really <mark>colour</mark> blind.</p> </blockquote> <p lang="en-US">As we can tell from the <em>spelling</em> of the word, the person writing this quote is clearly not American.</p>
(If the goal was to mark the element as misspelt, however, the
u element, possibly with a class, would be more
appropriate.)
Another example of the mark element is highlighting
parts of a document that are matching some search string. If
someone looked at a document, and the server knew that the user was
searching for the word "kitten", then the server might return the
document with one paragraph modified as follows:
<p>I also have some <mark>kitten</mark>s who are visiting me these days. They're really cute. I think they like my garden! Maybe I should adopt a <mark>kitten</mark>.</p>
In the following snippet, a paragraph of text refers to a specific part of a code fragment.
<p>The highlighted part below is where the error lies:</p> <pre><code>var i: Integer; begin i := <mark>1.1</mark>; end.</code></pre>
This is separate from syntax highlighting, for which
span is more appropriate. Combining both, one would
get:
<p>The highlighted part below is where the error lies:</p> <pre><code><span class=keyword>var</span> <span class=ident>i</span>: <span class=type>Integer</span>; <span class=keyword>begin</span> <span class=ident>i</span> := <span class=literal><mark>1.1</mark></span>; <span class=keyword>end</span>.</code></pre>
This is another example showing the use of mark to
highlight a part of quoted text that was originally not
emphasized. In this example, common typographic conventions have
led the author to explicitly style mark elements in
quotes to render in italics.
<article>
<style scoped>
blockquote mark, q mark {
font: inherit; font-style: italic;
text-decoration: none;
background: transparent; color: inherit;
}
.bubble em {
font: inherit; font-size: larger;
text-decoration: underline;
}
</style>
<h1>She knew</h1>
<p>Did you notice the subtle joke in the joke on panel 4?</p>
<blockquote>
<p class="bubble">I didn't <em>want</em> to believe. <mark>Of course
on some level I realized it was a known-plaintext attack.</mark> But I
couldn't admit it until I saw for myself.</p>
</blockquote>
<p>(Emphasis mine.) I thought that was great. It's so pedantic, yet it
explains everything neatly.</p>
</article>
Note, incidentally, the distinction between the em
element in this example, which is part of the original text being
quoted, and the mark element, which is highlighting a
part for comment.
The following example shows the difference between denoting the
importance of a span of text (strong) as
opposed to denoting the relevance of a span of text
(mark). It is an extract from a textbook, where the
extract has had the parts relevant to the exam highlighted. The
safety warnings, important though they may be, are apparently not
relevant to the exam.
<h3>Wormhole Physics Introduction</h3> <p><mark>A wormhole in normal conditions can be held open for a maximum of just under 39 minutes.</mark> Conditions that can increase the time include a powerful energy source coupled to one or both of the gates connecting the wormhole, and a large gravity well (such as a black hole).</p> <p><mark>Momentum is preserved across the wormhole. Electromagnetic radiation can travel in both directions through a wormhole, but matter cannot.</mark></p> <p>When a wormhole is created, a vortex normally forms. <strong>Warning: The vortex caused by the wormhole opening will annihilate anything in its path.</strong> Vortexes can be avoided when using sufficiently advanced dialing technology.</p> <p><mark>An obstruction in a gate will prevent it from accepting a wormhole connection.</mark></p>
ruby elementrt element, or an rp element, an rt element, and another rp element.HTMLElement.The ruby element allows one or more spans of
phrasing content to be marked with ruby annotations. Ruby
annotations are short runs of text presented alongside base text,
primarily used in East Asian typography as a guide for
pronunciation or to include other annotations. In Japanese, this
form of typography is also known as furigana.
A ruby element represents the spans of
phrasing content it contains, ignoring all the child rt
and rp elements and their descendants. Those spans of
phrasing content have associated annotations created using the
rt element.
In this example, each ideograph in the Japanese text 漢字 is annotated with its reading in hiragana.
...
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
...
This might be rendered as:

In this example, each ideograph in the traditional Chinese text 漢字 is annotated with its bopomofo reading.
<ruby>漢<rt>ㄏㄢˋ</rt>字<rt>ㄗˋ</rt></ruby>
This might be rendered as:

In this example, each ideograph in the simplified Chinese text 汉字 is annotated with its pinyin reading.
...<ruby>汉<rt>hàn</rt>字<rt>zì</rt></ruby>...
This might be rendered as:

rt elementruby element.HTMLElement.The rt element marks the ruby text component of a
ruby annotation.
An rt element that is a child of
a ruby element represents an
annotation (given by its children) for the zero or more nodes of
phrasing content that immediately precedes it in the
ruby element, ignoring rp elements.
An rt element that is not a child of a
ruby element represents the same thing as its
children.
rp elementruby element, either immediately before or immediately after an rt element.HTMLElement.The rp element can be used to provide parentheses
around a ruby text component of a ruby annotation, to be shown by
user agents that don't support ruby annotations.
An rp element that is a child of
a ruby element represents
nothing and its contents must be
ignored. An rp element whose
parent element is not a ruby element
represents its children.
The example above, in which each ideograph in the text 漢字 is annotated with its
phonetic reading, could be expanded to use rp so that in
legacy user agents the readings are in parentheses:
...
<ruby>漢<rp> (</rp><rt>かん</rt><rp>) </rp>字<rp> (</rp><rt>じ</rt><rp>) </rp></ruby>
...
In conforming user agents the rendering would be as above, but in user agents that do not support ruby, the rendering would be:
... 漢 (かん) 字 (じ) ...
bdi elementdir global attribute has special semantics on this element.HTMLElement.The bdi element represents a span of
text that is to be isolated from its surroundings for the purposes
of bidirectional text formatting. [BIDI]
The dir global
attribute defaults to auto on
this element (it never inherits from the parent element like with
other elements).
For the purposes of applying the bidirectional algorithm to the
contents of a bdi element, user agents must treat the
element as a paragraph-level container.
For the purposes of applying the bidirectional algorithm to the
paragraph-level container that a bdi element finds
itself within, the bdi element must be treated like a
U+FFFC OBJECT REPLACEMENT CHARACTER (in the same manner that an
image or other inline object is handled).
The requirements on handling the bdi element for the
bidirectional algorithm may be implemented indirectly through the
style layer. For example, an HTML+CSS user agent could implement
these requirements by implementing the CSS 'unicode-bidi' property.
[CSS]
This element is especially useful when embedding user-generated content with an unknown directionality.
In this example, usernames are shown along with the number of
posts that the user has submitted. If the bdi element
were not used, the username of the Arabic user would end up
confusing the text (the bidirectional algorithm would put the colon
and the number "3" next to the word "User" rather than next to the
word "posts").
<ul> <li>User <bdi>jcranmer</bdi>: 12 posts. <li>User <bdi>hober</bdi>: 5 posts. <li>User <bdi>إيان</bdi>: 3 posts. </ul>
bdo elementdir global attribute has special semantics on this element.HTMLElement.The bdo element represents explicit
text directionality formatting control for its children. It allows
authors to override the Unicode bidirectional algorithm by
explicitly specifying a direction override. [BIDI]
Authors must specify the dir
attribute on this element, with the value ltr to
specify a left-to-right override and with the value rtl
to specify a right-to-left override.
If the element's dir attribute is
in the rtl state, then for the
purposes of the bidirectional algorithm, the user agent must act as
if there was a U+202D LEFT-TO-RIGHT OVERRIDE character at the start
of the element, and a U+202C POP DIRECTIONAL FORMATTING at the end
of the element.
If the element's dir attribute is
in the ltr, then for the purposes
of the bidirectional algorithm, the user agent must act as if there
was a U+202E RIGHT-TO-LEFT OVERRIDE character at the start of the
element, and a U+202C POP DIRECTIONAL FORMATTING at the end of the
element.
The requirements on handling the bdo element for the
bidirectional algorithm may be implemented indirectly through the
style layer. For example, an HTML+CSS user agent could implement
these requirements by implementing the CSS 'unicode-bidi' property.
[CSS]
span elementinterface HTMLSpanElement : HTMLElement {};
The span element doesn't mean anything on its own,
but can be useful when used together with the global
attributes, e.g. class, lang, or dir.
It represents its children.
In this example, a code fragment is marked up using
span elements and class attributes so that its keywords and
identifiers can be color-coded from CSS:
<pre><code class="lang-c"><span class="keyword">for</span> (<span class="ident">j</span> = 0; <span class="ident">j</span> < 256; <span class="ident">j</span>++) {
<span class="ident">i_t3</span> = (<span class="ident">i_t3</span> & 0x1ffff) | (<span class="ident">j</span> << 17);
<span class="ident">i_t6</span> = (((((((<span class="ident">i_t3</span> >> 3) ^ <span class="ident">i_t3</span>) >> 1) ^ <span class="ident">i_t3</span>) >> 8) ^ <span class="ident">i_t3</span>) >> 5) & 0xff;
<span class="keyword">if</span> (<span class="ident">i_t6</span> == <span class="ident">i_t1</span>)
<span class="keyword">break</span>;
}</code></pre>
br elementinterface HTMLBRElement : HTMLElement {};
The br element represents a line
break.
While line breaks are usually represented in visual media by physically moving subsequent text to a new line, a style sheet or user agent would be equally justified in causing line breaks to be rendered in a different manner, for instance as green dots, or as extra spacing.
br elements must be used only for line breaks that
are actually part of the content, as in poems or addresses.
The following example is correct usage of the br
element:
<p>P. Sherman<br> 42 Wallaby Way<br> Sydney</p>
br elements must not be used for separating thematic
groups in a paragraph.
The following examples are non-conforming, as they abuse the
br element:
<p><a ...>34 comments.</a><br> <a ...>Add a comment.</a></p>
<p><label>Name: <input name="name"></label><br> <label>Address: <input name="address"></label></p>
Here are alternatives to the above, which are correct:
<p><a ...>34 comments.</a></p> <p><a ...>Add a comment.</a></p>
<p><label>Name: <input name="name"></label></p> <p><label>Address: <input name="address"></label></p>
If a paragraph consists of nothing but a single
br element, it represents a placeholder blank line
(e.g. as in a template). Such blank lines must not be used for
presentation purposes.
Any content inside br elements must not be
considered part of the surrounding text.
A br element should separate paragraphs for the
purposes of the Unicode bidirectional algorithm. This requirement
may be implemented indirectly through the style layer. For example,
an HTML+CSS user agent could implement these requirements by
implementing the CSS 'unicode-bidi' property. [BIDI] [CSS]
wbr elementHTMLElement.The wbr element represents a line break
opportunity.
In the following example, someone is quoted as saying something
which, for effect, is written as one long word. However, to ensure
that the text can be wrapped in a readable fashion, the individual
words in the quote are separated using a wbr
element.
<p>So then he pointed at the tiger and screamed "there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<wbr>me"!</p>
Here, especially long lines of code in a program listing have
suggested wrapping points given using wbr
elements.
<pre>... Heading heading = Helm.HeadingFactory(HeadingCoordinates[1], <wbr>HeadingCoordinates[2], <wbr>HeadingCoordinates[3], <wbr>HeadingCoordinates[4]); Course course = Helm.CourseFactory(Heading, <wbr>Maps.MapFactoryFromHeading(heading), <wbr>Speeds.GetMaximumSpeed().ConvertToWarp()); ...</pre>
Any content inside wbr elements must not be
considered part of the surrounding text.
This section is non-normative.
| Element | Purpose | Example |
|---|---|---|
a
| Hyperlinks | Visit my <a href="drinks.html">drinks</a> page. |
em
| Stress emphasis | I must say I <em>adore</em> lemonade. |
strong
| Importance | This tea is <strong>very hot</strong>. |
small
| Side comments | These grapes are made into wine. <small>Alcohol is addictive.</small> |
s
| Inaccurate text | Price: <s>£4.50</s> £2.00! |
cite
| Titles of works | The case <cite>Hugo v. Danielle</cite> is relevant here. |
q
| Quotations | The judge said <q>You can drink water from the fish tank</q> but advised against it. |
dfn
| Defining instance | The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals. |
abbr
| Abbreviations | Organic food in Ireland is certified by the <abbr title="Irish Organic Farmers and Growers Association">IOFGA</abbr>. |
data
| Machine-readable equivalent | Available starting today! <data value="UPC:022014640201">North Coast Organic Apple Cider</data> |
time
| Machine-readable equivalent of date- or time-related data | Available starting on <time datetime="2011-11-12">November 12th</time>! |
code
| Computer code | The <code>fruitdb</code> program can be used for tracking fruit production. |
var
| Variables | If there are <var>n</var> fruit in the bowl, at least <var>n</var>÷2 will be ripe. |
samp
| Computer output | The computer said <samp>Unknown error -3</samp>. |
kbd
| User input | Hit <kbd>F1</kbd> to continue. |
sub
| Subscripts | Water is H<sub>2</sub>O. |
sup
| Superscripts | The Hydrogen in heavy water is usually <sup>2</sup>H. |
i
| Alternative voice | Lemonade consists primarily of <i>Citrus limon</i>. |
b
| Keywords | Take a <b>lemon</b> and squeeze it with a <b>juicer</b>. |
u
| Annotations | The mixture of apple juice and <u class="spelling">eldeflower</u> juice is very pleasant. |
mark
| Highlight | Elderflower cordial, with one <mark>part</mark> cordial to ten <mark>part</mark>s water, stands a<mark>part</mark> from the rest. |
ruby, rt, rp
| Ruby annotations | <ruby> OJ <rp>(<rt>Orange Juice<rp>)</ruby> |
bdi
| Text directionality isolation | The recommended restaurant is <bdi lang="">My Juice Café (At The Beach)</bdi>. |
bdo
| Text directionality formatting | The proposal is to write English, but in reverse order. "Juice" would become "<bdo dir=rtl>Juice</bdo>" |
span
| Other | In French we call it <span lang="fr">sirop de sureau</span>. |
br
| Line break | Simply Orange Juice Company<br>Apopka, FL 32703<br>U.S.A. |
wbr
| Line breaking opportunity | www.simply<wbr>orange<wbr>juice.com |
The ins and del elements represent
edits to the document.
ins elementcitedatetimeHTMLModElement interface.The ins element represents an addition
to the document.
The following represents the addition of a single paragraph:
<aside> <ins> <p> I like fruit. </p> </ins> </aside>
As does this, because everything in the aside
element here counts as phrasing content and therefore
there is just one paragraph:
<aside> <ins> Apples are <em>tasty</em>. </ins> <ins> So are pears. </ins> </aside>
ins elements should not cross implied paragraph boundaries.
The following example represents the addition of two paragraphs,
the second of which was inserted in two parts. The first
ins element in this example thus crosses a paragraph
boundary, which is considered poor form.
<aside> <!-- don't do this --> <ins datetime="2005-03-16 00:00Z"> <p> I like fruit. </p> Apples are <em>tasty</em>. </ins> <ins datetime="2007-12-19 00:00Z"> So are pears. </ins> </aside>
Here is a better way of marking this up. It uses more elements, but none of the elements cross implied paragraph boundaries.
<aside> <ins datetime="2005-03-16 00:00Z"> <p> I like fruit. </p> </ins> <ins datetime="2005-03-16 00:00Z"> Apples are <em>tasty</em>. </ins> <ins datetime="2007-12-19 00:00Z"> So are pears. </ins> </aside>
del elementcitedatetimeHTMLModElement interface.The del element represents a removal
from the document.
del elements should not cross implied paragraph boundaries.
The following shows a "to do" list where items that have been done are crossed-off with the date and time of their completion.
<h1>To Do</h1> <ul> <li>Empty the dishwasher</li> <li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li> <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li> <li>Buy a printer</li> </ul>
ins and del elementsThe cite attribute
may be used to specify the address of a document that explains the
change. When that document is long, for instance the minutes of a
meeting, authors are encouraged to include a fragment identifier
pointing to the specific part of that document that discusses the
change.
If the cite attribute is
present, it must be a valid URL potentially surrounded by
spaces that explains the change. To obtain
the corresponding citation link, the value of the attribute must be
resolved relative to the
element. User agents should allow users to follow such citation
links.
The datetime
attribute may be used to specify the time and date of the change.
If present, the datetime
attribute's value must be a valid date string with optional
time.
User agents must parse the datetime attribute according to the
parse a date or time string algorithm. If that doesn't
return a date or a global date and time, then the
modification has no associated timestamp (the value is
non-conforming; it is not a valid date string with optional
time). Otherwise, the modification is marked as having been
made at the given date or global date and time. If the given
value is a global date and
time then user agents should use the associated time-zone
offset information to determine which time zone to present the given
datetime in.
The ins and del elements must implement the HTMLModElement
interface:
interface HTMLModElement : HTMLElement { attribute DOMString cite; attribute DOMString dateTime; };
The cite IDL
attribute must reflect the element's cite content attribute. The dateTime IDL attribute
must reflect the element's datetime content attribute.
This section is non-normative.
Since the ins and del elements do not
affect paragraphing, it is possible,
in some cases where paragraphs are implied (without explicit p
elements), for an ins or del element to
span both an entire paragraph or other non-phrasing
content elements and part of another paragraph. For
example:
<section> <ins> <p> This is a paragraph that was inserted. </p> This is another paragraph whose first sentence was inserted at the same time as the paragraph above. </ins> This is a second sentence, which was there all along. </section>
By only wrapping some paragraphs in p elements, one
can even get the end of one paragraph, a whole second paragraph,
and the start of a third paragraph to be covered by the same
ins or del element (though this is very
confusing, and not considered good practice):
<section> This is the first paragraph. <ins>This sentence was inserted. <p>This second paragraph was inserted.</p> This sentence was inserted too.</ins> This is the third paragraph in this example. <!-- (don't do this) --> </section>
However, due to the way implied
paragraphs are defined, it is not possible to mark up the
end of one paragraph and the start of the very next one using the
same ins or del element. You instead have
to use one (or two) p element(s) and two
ins or del elements, as for example:
<section> <p>This is the first paragraph. <del>This sentence was deleted.</del></p> <p><del>This sentence was deleted too.</del> That sentence needed a separate <del> element.</p> </section>
Partly because of the confusion described above, authors are
strongly encouraged to always mark up all paragraphs with the
p element, instead of having ins or
del elements that cross implied
paragraphs boundaries.
This section is non-normative.
The content models of the ol and ul
elements do not allow ins and del elements
as children. Lists always represent all their items, including items
that would otherwise have been marked as deleted.
To indicate that an item is inserted or deleted, an
ins or del element can be wrapped around
the contents of the li element. To indicate that an
item has been replaced by another, a single li element
can have one or more del elements followed by one or
more ins elements.
In the following example, a list that started empty had items added and removed from it over time. The bits in the example that have been emphasized show the parts that are the "current" state of the list. The list item numbers don't take into account the edits, though.
<h1>Stop-ship bugs</h1> <ol> <li><ins datetime="2008-02-12T15:20Z">Bug 225: Rain detector doesn't work in snow</ins></li> <li><del datetime="2008-03-01T20:22Z"><ins datetime="2008-02-14T12:02Z">Bug 228: Water buffer overflows in April</ins></del></li> <li><ins datetime="2008-02-16T13:50Z">Bug 230: Water heater doesn't use renewable fuels</ins></li> <li><del datetime="2008-02-20T21:15Z"><ins datetime="2008-02-16T14:25Z">Bug 232: Carbon dioxide emissions detected after startup</ins></del></li> </ol>
In the following example, a list that started with just fruit was replaced by a list with just colors.
<h1>List of <del>fruits</del><ins>colors</ins></h1> <ul> <li><del>Lime</del><ins>Green</ins></li> <li><del>Apple</del></li> <li>Orange</li> <li><del>Pear</del></li> <li><ins>Teal</ins></li> <li><del>Lemon</del><ins>Yellow</ins></li> <li>Olive</li> <li><ins>Purple</ins></li> </ul>
This section is non-normative.
The elements that form part of the table model have complicated
content model requirements that do not allow for the
ins and del elements, so indicating edits
to a table can be difficult.
To indicate that an entire row or an entire column has been added
or removed, the entire contents of each cell in that row or column
can be wrapped in ins or del elements
(respectively).
Here, a table's row has been added:
<table> <thead> <tr> <th> Game name <th> Game publisher <th> Verdict <tbody> <tr> <td> Diablo 2 <td> Blizzard <td> 8/10 <tr> <td> Portal <td> Valve <td> 10/10 <tr> <td> <ins>Portal 2</ins> <td> <ins>Valve</ins> <td> <ins>10/10</ins> </table>
Here, a column has been removed (the time at which it was removed is given also, as is a link to the page explaining why):
<table> <thead> <tr> <th> Game name <th> Game publisher <th> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">Verdict</del> <tbody> <tr> <td> Diablo 2 <td> Blizzard <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">8/10</del> <tr> <td> Portal <td> Valve <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del> <tr> <td> Portal 2 <td> Valve <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del> </table>
Generally speaking, there is no good way to indicate more complicated edits (e.g. that a cell was removed, moving all subsequent cells up or to the left).
img elementusemap attribute: Interactive content.altsrccrossoriginusemapismapwidthheight[NamedConstructor=Image(), NamedConstructor=Image(unsigned long width), NamedConstructor=Image(unsigned long width, unsigned long height)] interface HTMLImageElement : HTMLElement { attribute DOMString alt; attribute DOMString src; attribute DOMString crossOrigin; attribute DOMString useMap; attribute boolean isMap; attribute unsigned long width; attribute unsigned long height; readonly attribute unsigned long naturalWidth; readonly attribute unsigned long naturalHeight; readonly attribute boolean complete; };
An img element represents an image.
The image given by the src attribute is the
embedded content; the value of the alt attribute provides
equivalent content for those who cannot process images or who have
image loading disabled (i.e. it is the img element's fallback
content).
The src attribute must be
present, and must contain a valid non-empty URL potentially
surrounded by spaces referencing a non-interactive,
optionally animated, image resource that is neither paged nor
scripted.
Images can thus be static bitmaps (e.g. PNGs, GIFs, JPEGs), single-page vector documents (single-page PDFs, XML files with an SVG root element), animated bitmaps (APNGs, animated GIFs), animated vector graphics (XML files with an SVG root element that use declarative SMIL animation), and so forth. However, this also precludes SVG files with script, multipage PDF files, interactive MNG files, HTML documents, plain text documents, and so forth.
The requirements on the alt
attribute's value are described in the next
section.
The img element must not be used as a layout tool.
In particular, img elements should not be used to
display transparent images, as they rarely convey meaning and rarely
add anything useful to the document.
The crossorigin
attribute is a CORS settings attribute. Its purpose is
to allow images from third-party sites that allow cross-origin
access to be used with canvas.
An img is always in one of the following states:
When an img element is either in the partially available state or in the completely available state, it is said to be
available.
An img element is initially unavailable.
When an img element is available, it provides a paint
source whose width is the image's intrinsic width, whose
height is the image's intrinsic height, and whose appearance is the
intrinsic appearance of the image.
User agents may obtain images immediately or on demand.
A user agent that obtains images immediately must synchronously
update the image data of an img element
whenever that element is either created with a src attribute, or has its src attribute set, changed, or removed,
or has its crossorigin
attribute set, changed, or removed.
A user agent that obtains images on demand must update the
image data of an img element whenever it needs
the image data (i.e. on demand), but only if the img
element has a src attribute, and
only if the img element is in the unavailable state. When an img
element's src attribute is changed
or removed, and whenever the element's crossorigin attribute is set,
changed, or removed, if the user agent only obtains images on
demand, the img element must return to the unavailable state.
When the user agent is to update the image data of an
img element, it must run the following steps:
Return the img element to the unavailable state.
If an instance of the fetching algorithm is still running for this element, then abort that algorithm, discarding any pending tasks generated by that algorithm.
Forget the img element's current image data, if
any.
If the user agent cannot support images, or its support for images has been disabled, then abort these steps.
Asynchronously await a stable state, allowing the task that invoked this algorithm to continue. The synchronous section consists of all the remaining steps of this algorithm until the algorithm says the synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)
⌛ If another instance of this algorithm for this
img element was started after this instance, then
abort these steps. Only the last instance takes effect, to avoid
multiple requests when the src
attribute is set multiple times in a row, or when the src and crossorigin attributes are
both set in succession.
⌛ If the element's src
attribute is missing or its value is the empty string, then set
the element to the broken state,
queue a task to fire a simple event
named error at the
img element, and abort these steps.
⌛ Resolve the value
of the element's src attribute,
relative to the element.
If that is not successful, abort these steps.
Otherwise, do a potentially CORS-enabled fetch of
the resulting absolute URL, with the mode
being the state of the element's crossorigin content attribute,
the origin being the origin of the
img element's Document, and the
default origin behaviour set to taint.
The resource obtained in this fashion, if any, is the
img element's image data. It can be either
CORS-same-origin or CORS-cross-origin;
this affects the origin of the image itself (e.g.
when used on a canvas).
Fetching the image must delay the load event of the element's document until the task that is queued by the networking task source once the resource has been fetched (defined below) has been run.
This, unfortunately, can be used to perform a rudimentary port scan of the user's local network (especially in conjunction with scripting, though scripting isn't actually necessary to carry out such an attack). User agents may implement cross-origin access control policies that are stricter than those described above to mitigate this attack, but unfortunately such policies are typically not compatible with existing Web content.
The first task that is queued by the networking task
source while the image is being fetched must set the img element's
state to partially available.
If the resource is in a supported image format, then each task that is queued by the networking task source while the image is being fetched must update the presentation of the image appropriately (e.g. if the image is a progressive JPEG, each packet can improve the resolution of the image); furthermore, the last task that is queued by the networking task source once the resource has been fetched must act as appropriate given the following alternatives:
img element to the completely available state, update the
presentation of the image appropriately, and fire a simple
event named load at the
img element.img element to the broken state, and fire a simple
event named error at the
img element.On the other hand, if the resource type is
multipart/x-mixed-replace, then each task that is queued by the networking task source
while the image is being fetched must
also update the presentation of the image, but as each new body
part comes in, it must replace the previous image. Once one body
part has been completely decoded, the user agent must set the
img element to the completely
available state and queue a task to fire
a simple event named load
at the img element.
If at any point the user agent discovers that the image data is
corrupted in some fatal way, or that the image data is not in a
supported file format, then the user agent must set the
img element to the broken state. If the fetching algorithm is still running for this
element, then the user agent must also abort that algorithm,
discarding any pending tasks
generated by that algorithm, and then queue a task to
fire a simple event named error at the img
element.
While a user agent is running the above algorithm for an element
x, there must be a strong reference from the
element's Document to the element x, even if that element is not in its Document.
When an img element is in the completely available state and the
user agent can decode the media data without errors, then the
img element is said to be fully
decodable.
Whether the image is fetched successfully or not (e.g. whether the response code was a 2xx code or equivalent) must be ignored when determining the image's type and whether it is a valid image.
This allows servers to return images with error responses, and have them displayed.
The user agents should apply the image sniffing rules to determine the type of the image, with the image's associated Content-Type headers giving the official type. If these rules are not applied, then the type of the image must be the type given by the image's associated Content-Type headers.
User agents must not support non-image resources with the
img element (e.g. XML files whose root element is an
HTML element). User agents must not run executable code
(e.g. scripts) embedded in the image resource. User agents must only
display the first page of a multipage resource (e.g. a PDF
file). User agents must not allow the resource to act in an
interactive fashion, but should honor any animation in the
resource.
This specification does not specify which image types are to be supported.
The task source for the tasks queued by algorithms in this section is the DOM manipulation task source.
What an img element represents depends on the src attribute and the alt attribute.
src attribute is set
and the alt attribute is set to
the empty stringThe image is either decorative or supplemental to the rest of the content, redundant with some other information in the document.
If the image is available and the user agent is configured to display that image, then the element represents the element's image data.
Otherwise, the element represents nothing, and may be omitted completely from the rendering. User agents may provide the user with a notification that an image is present but has been omitted from the rendering.
src attribute is set
and the alt attribute is set to a
value that isn't emptyThe image is a key part of the content; the alt attribute gives a textual
equivalent or replacement for the image.
If the image is available and the user agent is configured to display that image, then the element represents the element's image data.
Otherwise, the element represents the text given
by the alt attribute. User
agents may provide the user with a notification that an image is
present but has been omitted from the rendering.
src attribute is set
and the alt attribute is notThe image might be a key part of the content, and there is no textual equivalent of the image available.
In a conforming document, the absence of the alt attribute indicates that the image
is a key part of the content but that a textual replacement for
the image was not available when the image was generated.
If the image is available and the user agent is configured to display that image, then the element represents the element's image data.
Otherwise, the user agent should display some sort of indicator that there is an image that is not being rendered, and may, if requested by the user, or if so configured, or when required to provide contextual information in response to navigation, provide caption information for the image, derived as follows:
If the image has a title
attribute whose value is not the empty string, then the value of
that attribute is the caption information; abort these
steps.
If the image is a descendant of a figure
element that has a child figcaption element, and,
ignoring the figcaption element and its descendants,
the figure element has no Text node
descendants other than inter-element whitespace, and
no embedded content descendant other than the
img element, then the contents of the first such
figcaption element are the caption information;
abort these steps.
src attribute is not
set and either the alt attribute
is set to the empty string or the alt attribute is not set at allThe element represents nothing.
The element represents the text given by the alt attribute.
The alt attribute does not
represent advisory information. User agents must not present the
contents of the alt attribute in
the same way as content of the title
attribute.
User agents may always provide the user with the option to display any image, or to prevent any image from being displayed. User agents may also apply heuristics to help the user make use of the image when the user is unable to see it, e.g. due to a visual disability or because they are using a text terminal with no graphics capabilities. Such heuristics could include, for instance, optical character recognition (OCR) of text found within the image.
While user agents are encouraged to repair cases
of missing alt attributes, authors
must not rely on such behavior. Requirements for
providing text to act as an alternative for images are described
in detail below.
The contents of img elements, if any, are
ignored for the purposes of rendering.
The usemap attribute,
if present, can indicate that the image has an associated
image map.
The ismap
attribute, when used on an element that is a descendant of an
a element with an href attribute, indicates by its
presence that the element provides access to a server-side image
map. This affects how events are handled on the corresponding
a element.
The ismap attribute is a
boolean attribute. The attribute must not be specified
on an element that does not have an ancestor a element
with an href attribute.
The img element supports dimension
attributes.
The alt and src IDL attributes must
reflect the respective content attributes of the same
name.
The crossOrigin IDL
attribute must reflect the crossorigin content
attribute.
The useMap IDL
attribute must reflect the usemap content attribute.
The isMap IDL
attribute must reflect the ismap content attribute.
width [ = value ]height [ = value ]These attributes return the actual rendered dimensions of the image, or zero if the dimensions are not known.
They can be set, to change the corresponding content attributes.
naturalWidthnaturalHeightThese attributes return the intrinsic dimensions of the image, or zero if the dimensions are not known.
completeReturns true if the image has been completely downloaded or if no image is specified; otherwise, returns false.
Image( [ width [, height ] ] )Returns a new img element, with the width and height attributes set to the values
passed in the relevant arguments, if applicable.
The IDL attributes width and height must return the
rendered width and height of the image, in CSS pixels, if the image
is being rendered, and is being rendered to a visual
medium; or else the intrinsic width and height of the image, in CSS
pixels, if the image is available but
not being rendered to a visual medium; or else 0, if the image is
not available. [CSS]
On setting, they must act as if they reflected the respective content attributes of the same name.
The IDL attributes naturalWidth and
naturalHeight
must return the intrinsic width and height of the image, in CSS
pixels, if the image is available, or
else 0. [CSS]
The IDL attribute complete must return
true if any of the following conditions is true:
src attribute is omitted.
src attribute's value is the empty string.
img element is not in the broken state.
img element is completely available.
Otherwise, the attribute must return false.
The value of complete can thus change while a
script is executing.
Three constructors are provided for creating
HTMLImageElement objects (in addition to the factory
methods from DOM Core such as createElement()): Image(), Image(width), and Image(width, height). When invoked as constructors,
these must return a new HTMLImageElement object (a new
img element). If the width argument
is present, the new object's width content attribute must be set to
width. If the height
argument is also present, the new object's height content attribute must be set
to height. The element's document must be the
active document of the browsing context of
the Window object on which the interface object of the
invoked constructor is found.
A single image can have different appropriate alternative text depending on the context.
In each of the following cases, the same image is used, yet the
alt text is different each
time. The image is the coat of arms of the Carouge municipality in
the canton Geneva in Switzerland.
Here it is used as a supplementary icon:
<p>I lived in <img src="carouge.svg" alt=""> Carouge.</p>
Here it is used as an icon representing the town:
<p>Home town: <img src="carouge.svg" alt="Carouge"></p>
Here it is used as part of a text on the town:
<p>Carouge has a coat of arms.</p> <p><img src="carouge.svg" alt="The coat of arms depicts a lion, sitting in front of a tree."></p> <p>It is used as decoration all over the town.</p>
Here it is used as a way to support a similar text where the description is given as well as, instead of as an alternative to, the image:
<p>Carouge has a coat of arms.</p> <p><img src="carouge.svg" alt=""></p> <p>The coat of arms depicts a lion, sitting in front of a tree. It is used as decoration all over the town.</p>
Here it is used as part of a story:
<p>He picked up the folder and a piece of paper fell out.</p> <p><img src="carouge.svg" alt="Shaped like a shield, the paper had a red background, a green tree, and a yellow lion with its tongue hanging out and whose tail was shaped like an S."></p> <p>He stared at the folder. S! The answer he had been looking for all this time was simply the letter S! How had he not seen that before? It all came together now. The phone call where Hector had referred to a lion's tail, the time Marco had stuck his tongue out...</p>
Here it is not known at the time of publication what the image
will be, only that it will be a coat of arms of some kind, and thus
no replacement text can be provided, and instead only a brief
caption for the image is provided, in the title attribute:
<p>The last user to have uploaded a coat of arms uploaded this one:</p> <p><img src="last-uploaded-coat-of-arms.cgi" title="User-uploaded coat of arms."></p>
Ideally, the author would find a way to provide real replacement text even in this case, e.g. by asking the previous user. Not providing replacement text makes the document more difficult to use for people who are unable to view images, e.g. blind users, or users or very low-bandwidth connections or who pay by the byte, or users who are forced to use a text-only Web browser.
Here are some more examples showing the same picture used in different contexts, with different appropriate alternate texts each time.
<article> <h1>My cats</h1> <h2>Fluffy</h2> <p>Fluffy is my favorite.</p> <img src="fluffy.jpg" alt="She likes playing with a ball of yarn."> <p>She's just too cute.</p> <h2>Miles</h2> <p>My other cat, Miles just eats and sleeps.</p> </article>
<article> <h1>Photography</h1> <h2>Shooting moving targets indoors</h2> <p>The trick here is to know how to anticipate; to know at what speed and what distance the subject will pass by.</p> <img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be photographed quite nicely using this technique."> <h2>Nature by night</h2> <p>To achieve this, you'll need either an extremely sensitive film, or immense flash lights.</p> </article>
<article> <h1>About me</h1> <h2>My pets</h2> <p>I've got a cat named Fluffy and a dog named Miles.</p> <img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy."> <p>My dog Miles and I like go on long walks together.</p> <h2>music</h2> <p>After our walks, having emptied my mind, I like listening to Bach.</p> </article>
<article> <h1>Fluffy and the Yarn</h1> <p>Fluffy was a cat who liked to play with yarn. He also liked to jump.</p> <aside><img src="fluffy.jpg" alt="" title="Fluffy"></aside> <p>He would play in the morning, he would play in the evening.</p> </article>
Except where otherwise specified, the alt attribute must be specified and its
value must not be empty; the value must be an appropriate
replacement for the image. The specific requirements for the alt attribute depend on what the image
is intended to represent, as described in the following
sections.
The most general rule to consider when writing alternative text
is the following: the intent is that replacing every image
with the text of its alt attribute
not change the meaning of the page.
So, in general, alternative text can be written by considering what one would have written had one not been able to include the image.
A corollary to this is that the alt attribute's value should never
contain text that could be considered the image's caption,
title, or legend. It is supposed to contain
replacement text that could be used by users instead of the
image; it is not meant to supplement the image. The title attribute can be used for
supplemental information.
Another corollary is that the alt attribute's value should not repeat
information that is already provided in the prose next to the
image.
One way to think of alternative text is to think about how you would read the page containing the image to someone over the phone, without mentioning that there is an image present. Whatever you say instead of the image is typically a good start for writing the alternative text.
When an a element that creates a
hyperlink, or a button element, has no
textual content but contains one or more images, the alt attributes must contain text that
together convey the purpose of the link or button.
In this example, a user is asked to pick his preferred color from a list of three. Each color is given by an image, but for users who have configured their user agent not to display images, the color names are used instead:
<h1>Pick your color</h1> <ul> <li><a href="green.html"><img src="green.jpeg" alt="Green"></a></li> <li><a href="blue.html"><img src="blue.jpeg" alt="Blue"></a></li> <li><a href="red.html"><img src="red.jpeg" alt="Red"></a></li> </ul>
In this example, each button has a set of images to indicate the kind of color output desired by the user. The first image is used in each case to give the alternative text.
<button name="rgb"><img src="red" alt="RGB"><img src="green" alt=""><img src="blue" alt=""></button> <button name="cmyk"><img src="cyan" alt="CMYK"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>
Since each image represents one part of the text, it could also be written like this:
<button name="rgb"><img src="red" alt="R"><img src="green" alt="G"><img src="blue" alt="B"></button> <button name="cmyk"><img src="cyan" alt="C"><img src="magenta" alt="M"><img src="yellow" alt="Y"><img src="black" alt="K"></button>
However, with other alternative text, this might not work, and putting all the alternative text into one image in each case might make more sense:
<button name="rgb"><img src="red" alt="sRGB profile"><img src="green" alt=""><img src="blue" alt=""></button> <button name="cmyk"><img src="cyan" alt="CMYK profile"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>
Sometimes something can be more clearly stated in graphical
form, for example as a flowchart, a diagram, a graph, or a simple
map showing directions. In such cases, an image can be given using
the img element, but the lesser textual version must
still be given, so that users who are unable to view the image
(e.g. because they have a very slow connection, or because they
are using a text-only browser, or because they are listening to
the page being read out by a hands-free automobile voice Web
browser, or simply because they are blind) are still able to
understand the message being conveyed.
The text must be given in the alt attribute, and must convey the
same message as the image specified in the src attribute.
It is important to realize that the alternative text is a replacement for the image, not a description of the image.
In the following example we have a flowchart in image
form, with text in the alt
attribute rephrasing the flowchart in prose form:
<p>In the common case, the data handled by the tokenization stage comes from the network, but it can also come from script.</p> <p><img src="images/parsing-model-overview.png" alt="The Network passes data to the Input Stream Preprocessor, which passes it to the Tokenizer, which passes it to the Tree Construction stage. From there, data goes to both the DOM and to Script Execution. Script Execution is linked to the DOM, and, using document.write(), passes data to the Tokenizer."></p>
Here's another example, showing a good solution and a bad solution to the problem of including an image in a description.
First, here's the good solution. This sample shows how the alternative text should just be what you would have put in the prose if the image had never existed.
<!-- This is the correct way to do things. --> <p> You are standing in an open field west of a house. <img src="house.jpeg" alt="The house is white, with a boarded front door."> There is a small mailbox here. </p>
Second, here's the bad solution. In this incorrect way of doing things, the alternative text is simply a description of the image, instead of a textual replacement for the image. It's bad because when the image isn't shown, the text doesn't flow as well as in the first example.
<!-- This is the wrong way to do things. --> <p> You are standing in an open field west of a house. <img src="house.jpeg" alt="A white house, with a boarded front door."> There is a small mailbox here. </p>
Text such as "Photo of white house with boarded door" would be
equally bad alternative text (though it could be suitable for the
title attribute or in the
figcaption element of a figure with this
image).
A document can contain information in iconic form. The icon is intended to help users of visual browsers to recognize features at a glance.
In some cases, the icon is supplemental to a text label
conveying the same meaning. In those cases, the alt attribute must be present but must
be empty.
Here the icons are next to text that conveys the same meaning,
so they have an empty alt
attribute:
<nav> <p><a href="/help/"><img src="/icons/help.png" alt=""> Help</a></p> <p><a href="/configure/"><img src="/icons/configuration.png" alt=""> Configuration Tools</a></p> </nav>
In other cases, the icon has no text next to it describing what
it means; the icon is supposed to be self-explanatory. In those
cases, an equivalent textual label must be given in the alt attribute.
Here, posts on a news site are labeled with an icon indicating their topic.
<body> <article> <header> <h1>Ratatouille wins <i>Best Movie of the Year</i> award</h1> <p><img src="movies.png" alt="Movies"></p> </header> <p>Pixar has won yet another <i>Best Movie of the Year</i> award, making this its 8th win in the last 12 years.</p> </article> <article> <header> <h1>Latest TWiT episode is online</h1> <p><img src="podcasts.png" alt="Podcasts"></p> </header> <p>The latest TWiT episode has been posted, in which we hear several tech news stories as well as learning much more about the iPhone. This week, the panelists compare how reflective their iPhones' Apple logos are.</p> </article> </body>
Many pages include logos, insignia, flags, or emblems, which stand for a particular entity such as a company, organization, project, band, software package, country, or some such.
If the logo is being used to represent the entity, e.g. as a page
heading, the alt attribute must
contain the name of the entity being represented by the logo. The
alt attribute must not
contain text like the word "logo", as it is not the fact that it is
a logo that is being conveyed, it's the entity itself.
If the logo is being used next to the name of the entity that
it represents, then the logo is supplemental, and its alt attribute must instead be
empty.
If the logo is merely used as decorative material (as branding, or, for example, as a side image in an article that mentions the entity to which the logo belongs), then the entry below on purely decorative images applies. If the logo is actually being discussed, then it is being used as a phrase or paragraph (the description of the logo) with an alternative graphical representation (the logo itself), and the first entry above applies.
In the following snippets, all four of the above cases are present. First, we see a logo used to represent a company:
<h1><img src="XYZ.gif" alt="The XYZ company"></h1>
Next, we see a paragraph which uses a logo right next to the company name, and so doesn't have any alternative text:
<article> <h2>News</h2> <p>We have recently been looking at buying the <img src="alpha.gif" alt=""> ΑΒΓ company, a small Greek company specializing in our type of product.</p>
In this third snippet, we have a logo being used in an aside, as part of the larger article discussing the acquisition:
<aside><p><img src="alpha-large.gif" alt=""></p></aside> <p>The ΑΒΓ company has had a good quarter, and our pie chart studies of their accounts suggest a much bigger blue slice than its green and orange slices, which is always a good sign.</p> </article>
Finally, we have an opinion piece talking about a logo, and the logo is therefore described in detail in the alternative text.
<p>Consider for a moment their logo:</p> <p><img src="/images/logo" alt="It consists of a green circle with a green question mark centered inside it."></p> <p>How unoriginal can you get? I mean, oooooh, a question mark, how <em>revolutionary</em>, how utterly <em>ground-breaking</em>, I'm sure everyone will rush to adopt those specifications now! They could at least have tried for some sort of, I don't know, sequence of rounded squares with varying shades of green and bold white outlines, at least that would look good on the cover of a blue book.</p>
This example shows how the alternative text should be written such that if the image isn't available, and the text is used instead, the text flows seamlessly into the surrounding text, as if the image had never been there in the first place.
Sometimes, an image just consists of text, and the purpose of the image is not to highlight the actual typographic effects used to render the text, but just to convey the text itself.
In such cases, the alt
attribute must be present but must consist of the same text as
written in the image itself.
Consider a graphic containing the text "Earth Day", but with the letters all decorated with flowers and plants. If the text is merely being used as a heading, to spice up the page for graphical users, then the correct alternative text is just the same text "Earth Day", and no mention need be made of the decorations:
<h1><img src="earthdayheading.png" alt="Earth Day"></h1>
In many cases, the image is actually just supplementary, and
its presence merely reinforces the surrounding text. In these
cases, the alt attribute must be
present but its value must be the empty string.
In general, an image falls into this category if removing the image doesn't make the page any less useful, but including the image makes it a lot easier for users of visual browsers to understand the concept.
A flowchart that repeats the previous paragraph in graphical form:
<p>The Network passes data to the Input Stream Preprocessor, which passes it to the Tokenizer, which passes it to the Tree Construction stage. From there, data goes to both the DOM and to Script Execution. Script Execution is linked to the DOM, and, using document.write(), passes data to the Tokenizer.</p> <p><img src="images/parsing-model-overview.png" alt=""></p>
In these cases, it would be wrong to include alternative text
that consists of just a caption. If a caption is to be included,
then either the title attribute can
be used, or the figure and figcaption
elements can be used. In the latter case, the image would in fact
be a phrase or paragraph with an alternative graphical
representation, and would thus require alternative text.
<!-- Using the title="" attribute -->
<p>The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</p>
<p><img src="images/parsing-model-overview.png" alt=""
title="Flowchart representation of the parsing model."></p>
<!-- Using <figure> and <figcaption> --> <p>The Network passes data to the Input Stream Preprocessor, which passes it to the Tokenizer, which passes it to the Tree Construction stage. From there, data goes to both the DOM and to Script Execution. Script Execution is linked to the DOM, and, using document.write(), passes data to the Tokenizer.</p> <figure> <img src="images/parsing-model-overview.png" alt="The Network leads to the Input Stream Preprocessor, which leads to the Tokenizer, which leads to the Tree Construction stage. The Tree Construction stage leads to two items. The first is Script Execution, which leads via document.write() back to the Tokenizer. The second item from which Tree Construction leads is the DOM. The DOM is related to the Script Execution."> <figcaption>Flowchart representation of the parsing model.</figcaption> </figure>
<!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
<p>The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</p>
<p><img src="images/parsing-model-overview.png"
alt="Flowchart representation of the parsing model."></p>
<!-- Never put the image's caption in the alt="" attribute! -->
A graph that repeats the previous paragraph in graphical form:
<p>According to a study covering several billion pages, about 62% of documents on the Web in 2007 triggered the Quirks rendering mode of Web browsers, about 30% triggered the Almost Standards mode, and about 9% triggered the Standards mode.</p> <p><img src="rendering-mode-pie-chart.png" alt=""></p>
If an image is decorative but isn't especially page-specific — for example an image that forms part of a site-wide design scheme — the image should be specified in the site's CSS, not in the markup of the document.
Exceptions to this rule, in cases where CSS cannot be used to display an entirely decorative image, are covered by the HTML5: Techniques for providing useful text alternatives. [HTMLALTTECHS] Authors are also encouraged to consult the Web Content Accessibility Guidelines 2.0 for more detailed information and acceptable techniques. [WCAG]
However, a decorative image that isn't discussed by the
surrounding text but still has some relevance can be included in a page
using the img element. Such images are decorative, but
still form part of the content. In these cases, the alt attribute must be present but its
value must be the empty string.
Examples where the image is purely decorative despite being relevant would include things like a photo of the Black Rock City landscape in a blog post about an event at Burning Man, or an image of a painting inspired by a poem, on a page reciting that poem. The following snippet shows an example of the latter case (only the first verse is included in this snippet):
<h1>The Lady of Shalott</h1> <p><img src="shalott.jpeg" alt=""></p> <p>On either side the river lie<br> Long fields of barley and of rye,<br> That clothe the wold and meet the sky;<br> And through the field the road run by<br> To many-tower'd Camelot;<br> And up and down the people go,<br> Gazing where the lilies blow<br> Round an island there below,<br> The island of Shalott.</p>
When a picture has been sliced into smaller image files that are
then displayed together to form the complete picture again, one of
the images must have its alt
attribute set as per the relevant rules that would be appropriate
for the picture as a whole, and then all the remaining images must
have their alt attribute set to
the empty string.
In the following example, a picture representing a company logo for XYZ Corp has been split into two pieces, the first containing the letters "XYZ" and the second with the word "Corp". The alternative text ("XYZ Corp") is all in the first image.
<h1><img src="logo1.png" alt="XYZ Corp"><img src="logo2.png" alt=""></h1>
In the following example, a rating is shown as three filled stars and two empty stars. While the alternative text could have been "★★★☆☆", the author has instead decided to more helpfully give the rating in the form "3 out of 5". That is the alternative text of the first image, and the rest have blank alternative text.
<p>Rating: <meter max=5 value=3><img src="1" alt="3 out of 5" ><img src="1" alt=""><img src="1" alt=""><img src="0" alt="" ><img src="0" alt=""></meter></p>
Generally, image maps should be used instead of slicing an image for links.
However, if an image is indeed sliced and any of the components
of the sliced picture are the sole contents of links, then one image
per link must have alternative text in its alt attribute representing the purpose
of the link.
In the following example, a picture representing the flying spaghetti monster emblem, with each of the left noodly appendages and the right noodly appendages in different images, so that the user can pick the left side or the right side in an adventure.
<h1>The Church</h1> <p>You come across a flying spaghetti monster. Which side of His Noodliness do you wish to reach out for?</p> <p><a href="?go=left" ><img src="fsm-left.png" alt="Left side. "></a ><img src="fsm-middle.png" alt="" ><a href="?go=right"><img src="fsm-right.png" alt="Right side."></a></p>
In some cases, the image is a critical part of the content. This could be the case, for instance, on a page that is part of a photo gallery. The image is the whole point of the page containing it.
How to provide alternative text for an image that is a key part of the content depends on the image's provenance.
When it is possible for detailed alternative text to be
provided, for example if the image is part of a series of
screenshots in a magazine review, or part of a comic strip, or is
a photograph in a blog entry about that photograph, text that can
serve as a substitute for the image must be given as the contents
of the alt attribute.
A screenshot in a gallery of screenshots for a new OS, with some alternative text:
<figure>
<img src="KDE%20Light%20desktop.png"
alt="The desktop is blue, with icons along the left hand side in
two columns, reading System, Home, K-Mail, etc. A window is
open showing that menus wrap to a second line if they
cannot fit in the window. The window has a list of icons
along the top, with an address bar below it, a list of
icons for tabs along the left edge, a status bar on the
bottom, and two panes in the middle. The desktop has a bar
at the bottom of the screen with a few buttons, a pager, a
list of open applications, and a clock.">
<figcaption>Screenshot of a KDE desktop.</figcaption>
</figure>
A graph in a financial report:
<img src="sales.gif"
title="Sales graph"
alt="From 1998 to 2005, sales increased by the following percentages
with each year: 624%, 75%, 138%, 40%, 35%, 9%, 21%">
Note that "sales graph" would be inadequate alternative text for a sales graph. Text that would be a good caption is not generally suitable as replacement text.
In certain cases, the nature of the image might be such that providing thorough alternative text is impractical. For example, the image could be indistinct, or could be a complex fractal, or could be a detailed topographical map.
In these cases, the alt
attribute must contain some suitable alternative text, but it may
be somewhat brief.
Sometimes there simply is no text that can do justice to an image. For example, there is little that can be said to usefully describe a Rorschach inkblot test. However, a description, even if brief, is still better than nothing:
<figure> <img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right symmetry with indistinct edges, with a small gap in the center, two larger gaps offset slightly from the center, with two similar gaps under them. The outline is wider in the top half than the bottom half, with the sides extending upwards higher than the center, and the center extending below the sides."> <figcaption>A black outline of the first of the ten cards in the Rorschach inkblot test.</figcaption> </figure>
Note that the following would be a very bad use of alternative text:
<!-- This example is wrong. Do not copy it. --> <figure> <img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline of the first of the ten cards in the Rorschach inkblot test."> <figcaption>A black outline of the first of the ten cards in the Rorschach inkblot test.</figcaption> </figure>
Including the caption in the alternative text like this isn't useful because it effectively duplicates the caption for users who don't have images, taunting them twice yet not helping them any more than if they had only read or heard the caption once.
Another example of an image that defies full description is a fractal, which, by definition, is infinite in detail.
The following example shows one possible way of providing alternative text for the full view of an image of the Mandelbrot set.
<img src="ms1.jpeg" alt="The Mandelbrot set appears as a cardioid with its cusp on the real axis in the positive direction, with a smaller bulb aligned along the same center line, touching it in the negative direction, and with these two shapes being surrounded by smaller bulbs of various sizes.">
In some unfortunate cases, there might be no alternative text available at all, either because the image is obtained in some automated fashion without any associated alternative text (e.g. a Webcam), or because the page is being generated by a script using user-provided images where the user did not provide suitable or usable alternative text (e.g. photograph sharing sites), or because the author does not himself know what the images represent (e.g. a blind photographer sharing an image on his blog).
In such cases, the alt
attribute may be omitted, but one of the following conditions must
be met as well:
title attribute is
present and has a non-empty value.img element
is in a figure element that contains a
figcaption element that contains content other than
inter-element whitespace, and, ignoring the
figcaption element and its descendants, the
figure element has no Text node
descendants other than inter-element whitespace, and
no embedded content descendant other than the
img element.Such cases are to be kept to an absolute
minimum. If there is even the slightest possibility of the author
having the ability to provide real alternative text, then it would
not be acceptable to omit the alt
attribute.
A photo on a photo-sharing site, if the site received the image with no metadata other than the caption, could be marked up as follows:
<figure> <img src="1100670787_6a7c664aef.jpg"> <figcaption>Bubbles traveled everywhere with us.</figcaption> </figure>
It would be better, however, if a detailed description of the important parts of the image obtained from the user and included on the page.
A blind user's blog in which a photo taken by the user is shown. Initially, the user might not have any idea what the photo he took shows:
<article> <h1>I took a photo</h1> <p>I went out today and took a photo!</p> <figure> <img src="photo2.jpeg"> <figcaption>A photograph taken blindly from my front porch.</figcaption> </figure> </article>
Eventually though, the user might obtain a description of the image from his friends and could then include alternative text:
<article> <h1>I took a photo</h1> <p>I went out today and took a photo!</p> <figure> <img src="photo2.jpeg" alt="The photograph shows my squirrel feeder hanging from the edge of my roof. It is half full, but there are no squirrels around. In the background, out-of-focus trees fill the shot. The feeder is made of wood with a metal grate, and it contains peanuts. The edge of the roof is wooden too, and is painted white with light blue streaks."> <figcaption>A photograph taken blindly from my front porch.</figcaption> </figure> </article>
Sometimes the entire point of the image is that a textual
description is not available, and the user is to provide the
description. For instance, the point of a CAPTCHA image is to see
if the user can literally read the graphic. Here is one way to
mark up a CAPTCHA (note the title
attribute):
<p><label>What does this image say? <img src="captcha.cgi?id=8934" title="CAPTCHA"> <input type=text name=captcha></label> (If you cannot see the image, you can use an <a href="?audio">audio</a> test instead.)</p>
Another example would be software that displays images and asks for alternative text precisely for the purpose of then writing a page with correct alternative text. Such a page could have a table of images, like this:
<table> <thead> <tr> <th> Image <th> Description <tbody> <tr> <td> <img src="2421.png" title="Image 640 by 100, filename 'banner.gif'"> <td> <input name="alt2421"> <tr> <td> <img src="2422.png" title="Image 200 by 480, filename 'ad3.gif'"> <td> <input name="alt2422"> </table>
Notice that even in this example, as much useful information
as possible is still included in the title attribute.
Since some users cannot use images at all
(e.g. because they have a very slow connection, or because they
are using a text-only browser, or because they are listening to
the page being read out by a hands-free automobile voice Web
browser, or simply because they are blind), the alt attribute is only allowed to be
omitted rather than being provided with replacement text when no
alternative text is available and none can be made available, as
in the above examples. Lack of effort from the part of the author
is not an acceptable reason for omitting the alt attribute.
Generally authors should avoid using img elements
for purposes other than showing images.
If an img element is being used for purposes other
than showing an image, e.g. as part of a service to count page
views, then the alt attribute must
be the empty string.
In such cases, the width and
height attributes should both
be set to zero.
This section does not apply to documents that are publicly accessible, or whose target audience is not necessarily personally known to the author, such as documents on a Web site, e-mails sent to public mailing lists, or software documentation.
When an image is included in a private communication (such as an
HTML e-mail) aimed at a specific person who is known to be able to
view images, the alt attribute may
be omitted. However, even in such cases it is strongly recommended
that alternative text be included (as appropriate according to the
kind of image involved, as described in the above entries), so that
the e-mail is still usable should the user use a mail client that
does not support images, or should the document be forwarded on to
other users whose abilities might not include easily seeing
images.
Markup generators (such as WYSIWYG authoring tools) should, wherever possible, obtain alternative text from their users. However, it is recognized that in many cases, this will not be possible.
For images that are the sole contents of links, markup generators should examine the link target to determine the title of the target, or the URL of the target, and use information obtained in this manner as the alternative text.
As a last resort, implementors should either set the alt attribute to the empty string, under
the assumption that the image is a purely decorative image that
doesn't add any information but is still specific to the surrounding
content, or omit the alt attribute
altogether, under the assumption that the image is a key part of the
content.
Markup generators should generally avoid using the image's own file name as the alternative text. Similarly, markup generators should avoid generating alternative text from any content that will be equally available to presentation user agents (e.g. Web browsers).
This is because once a page is generated, it will typically not be updated, whereas the browsers that later read the page can be updated by the user, therefore the browser is likely to have more up-to-date and finely-tuned heuristics than the markup generator did when generating the page.
A conformance checker must report the lack of an alt attribute as an error unless one of
the conditions listed below applies:
title attribute is present
and has a non-empty value (as described
above).img element is in a figure
element that satisfies the
conditions described above.meta element with a name attribute whose value is an
ASCII case-insensitive match for the string "generator". (This case does not
represent a case where the document is conforming, only that the
generator could not determine appropriate alternative text —
validators are required to not show an error in this case to
discourage markup generators from including bogus alternative text
purely in an attempt to silence validators.)iframe elementsrcsrcdocnamesandboxseamlesswidthheightinterface HTMLIFrameElement : HTMLElement { attribute DOMString src; attribute DOMString srcdoc; attribute DOMString name; [PutForwards=value] readonly attribute DOMSettableTokenList sandbox; attribute boolean seamless; attribute DOMString width; attribute DOMString height; readonly attribute Document? contentDocument; readonly attribute WindowProxy? contentWindow; };
The iframe element represents a
nested browsing context.
The src attribute
gives the address of a page that the nested browsing
context is to contain. The attribute, if present, must be a
valid non-empty URL potentially surrounded by
spaces.
If the itemprop is specified
on an iframe element, then the src attribute must also be
specified.
The srcdoc
attribute gives the content of the page that the nested
browsing context is to contain. The value of the attribute is
the source of an iframe srcdoc document.
For iframe elements in HTML documents,
the attribute, if present, must have a value using the HTML
syntax that consists of the following syntactic components,
in the given order:
html element.For iframe elements in XML documents,
the attribute, if present, must have a value that matches the
production labeled document in the XML
specification. [XML]
If the src attribute and the
srcdoc attribute are both
specified together, the srcdoc
attribute takes priority. This allows authors to provide a fallback
URL for legacy user agents that do not support the
srcdoc attribute.
When an iframe element is first inserted into a document, the
user agent must create a nested browsing context, and
then process the iframe attributes for the
first time.
Whenever an iframe element with a nested
browsing context has its srcdoc attribute set, changed, or
removed, the user agent must process the iframe
attributes.
Similarly, whenever an iframe element with a
nested browsing context but with no srcdoc attribute specified has its
src attribute set, changed, or
removed, the user agent must process the iframe
attributes.
When the user agent is to process the iframe
attributes, it must run the first appropriate steps from the
following list:
srcdoc attribute
is specifiedNavigate the element's
browsing context to a resource whose
Content-Type is text/html, whose
URL is about:srcdoc, and whose data
consists of the value of the attribute. The resulting
Document must be considered an
iframe srcdoc
document.
src
attribute is specified but the srcdoc attribute is notIf the value of the src attribute is the empty string,
jump to the empty step below.
Resolve the value of
the src attribute, relative
to the iframe element.
If that is not successful, then jump to the empty step below.
If the resulting absolute URL is an
ASCII case-insensitive match for the string
"about:blank", and the user agent is processing this
iframe's attributes for the first time, then jump to
the empty step below. (In cases other than the
first time, about:blank is loaded
normally.)
Navigate the element's browsing context to the resulting absolute URL.
Empty: When the steps above require the user agent to
jump to the empty step, if the user agent is
processing this iframe's attributes for the first
time, then the user agent must queue a task to
fire a simple event named load at the iframe element.
(After jumping to this step, the above steps are not resumed.)
No load event
is fired at the about:blank document
itself.
Queue a task to fire a simple event
named load at the
iframe element.
Any navigation required of the user
agent in the process the iframe attributes
algorithm must be completed with the iframe element's
document's browsing context as the source
browsing context.
Furthermore, if the browsing context's session
history contained only one Document when the
process the iframe attributes algorithm
was invoked, and that was the about:blank
Document created when the browsing context
was created, then any navigation
required of the user agent in that algorithm must be completed with
replacement enabled.
If, when the element is created, the srcdoc attribute is not set, and
the src attribute is either
also not set or set but its value cannot be resolved, the browsing context will remain at the
initial about:blank page.
If the user navigates
away from this page, the iframe's corresponding
WindowProxy object will proxy new Window
objects for new Document objects, but the src attribute will not change.
Removing
an iframe from a Document does not cause
its browsing context to be discarded. Indeed, an
iframe's browsing context can survive its
original parent Document if its iframe is
moved to another Document.
On the other hand, if an iframe is removed from a
Document and is then subsequently garbage collected,
this will likely mean (in the absence of other references) that the
child browsing context's WindowProxy
object will become eligble for garbage collection, which will then
lead to that browsing context being discarded, which will then
lead to its Document being discarded also. This happens without notice to any
scripts running in that Document; for example, no
unload events are fired (the
"unload a document" steps are not run).
Here a blog uses the srcdoc attribute in conjunction
with the sandbox and seamless attributes described
below to provide users of user agents that support this feature
with an extra layer of protection from script injection in the blog
post comments:
<article> <h1>I got my own magazine!</h1> <p>After much effort, I've finally found a publisher, and so now I have my own magazine! Isn't that awesome?! The first issue will come out in September, and we have articles about getting food, and about getting in boxes, it's going to be great!</p> <footer> <p>Written by <a href="/users/cap">cap</a>, 1 hour ago. </footer> <article> <footer> Thirteen minutes ago, <a href="/users/ch">ch</a> wrote: </footer> <iframe seamless sandbox srcdoc="<p>did you get a cover picture yet?"></iframe> </article> <article> <footer> Nine minutes ago, <a href="/users/cap">cap</a> wrote: </footer> <iframe seamless sandbox srcdoc="<p>Yeah, you can see it <a href="/gallery?mode=cover&amp;page=1">in my gallery</a>."></iframe> </article> <article> <footer> Five minutes ago, <a href="/users/ch">ch</a> wrote: </footer> <iframe seamless sandbox srcdoc="<p>hey that's earl's table. <p>you should get earl&amp;me on the next cover."></iframe> </article>
Notice the way that quotes have to be escaped (otherwise the
srcdoc attribute would end
prematurely), and the way raw ampersands (e.g. in URLs or in prose)
mentioned in the sandboxed content have to be doubly
escaped — once so that the ampersand is preserved when
originally parsing the srcdoc attribute, and once more
to prevent the ampersand from being misinterpreted when parsing the
sandboxed content.
In the HTML syntax, authors need only
remember to use U+0022 QUOTATION MARK characters (") to wrap the
attribute contents and then to escape all U+0022 QUOTATION MARK (")
and U+0026 AMPERSAND (&) characters, and to specify the sandbox attribute, to ensure safe
embedding of content.
Due to restrictions of the XHTML syntax, in XML the U+003C LESS-THAN SIGN character (<) needs to be escaped as well. In order to prevent attribute-value normalization, some of XML's whitespace characters — specifically U+0009 CHARACTER TABULATION (tab), U+000A LINE FEED (LF), and U+000D CARRIAGE RETURN (CR) — also need to be escaped. [XML]
The name
attribute, if present, must be a valid browsing context
name. The given value is used to name the nested
browsing context. When the browsing
context is created, if the attribute is present, the browsing
context name must be set to the value of this attribute;
otherwise, the browsing context name must be set to the
empty string.
Whenever the name attribute
is set, the nested browsing context's name must be changed to the new
value. If the attribute is removed, the browsing context
name must be set to the empty string.
When content loads in an iframe, after any load events are fired within the content
itself, the user agent must queue a task to fire
a simple event named load at
the iframe element. When content whose URL
has the same origin as the iframe
element's Document fails to load (e.g. due to a DNS
error, network error, or if the server returned a 4xx or 5xx status
code or
equivalent), then the user agent must queue a
task to fire a simple event named error at the element instead. (This event
does not fire for parse errors,
script errors, or any errors for cross-origin resources.)
The task source for these tasks is the DOM manipulation task source.
A load event is also
fired at the iframe element when it is created if no
other data is loaded in it.
When there is an active parser in the
iframe, and when anything in the iframe is
delaying the load event of
the iframe's browsing context's
active document, the iframe must
delay the load event of its document.
If, during the handling of the load event, the browsing
context in the iframe is again navigated, that will further delay the
load event.
The sandbox
attribute, when specified, enables a set of extra restrictions on
any content hosted by the iframe. Its value must be an
unordered set of unique space-separated tokens that are
ASCII case-insensitive. The allowed values are
allow-forms,
allow-same-origin,
allow-scripts, and
allow-top-navigation.
When the attribute is set, the content is treated as being from a
unique origin, forms and scripts are disabled, links
are prevented from targeting other browsing contexts, and plugins are secured. The
allow-same-origin
keyword allows the content to be treated as being from the same
origin instead of forcing it into a unique origin, the allow-top-navigation
keyword allows the content to navigate its
top-level browsing context, and the allow-forms and allow-scripts
keywords re-enable forms and scripts respectively (though scripts
are still prevented from creating popups).
Setting both the
allow-scripts and
allow-same-origin
keywords together when the embedded page has the same
origin as the page containing the iframe allows
the embedded page to simply remove the sandbox attribute.
Sandboxing hostile content is of minimal help if
an attacker can convince the user to just visit the hostile content
directly, rather than in the iframe. To limit the
damage that can be caused by hostile HTML content, it should be
served from a separate dedicated domain.
While the sandbox
attribute is specified, the iframe element's
nested browsing context must have the flags given in
the following list set. In addition, any browsing contexts nested within an
iframe, either directly or indirectly, must have all
the flags set on them as were set on the iframe's
Document's browsing context when the
iframe's Document was created.
This flag prevents content from navigating browsing contexts other than the sandboxed browsing context itself (or browsing contexts further nested inside it), and the top-level browsing context (which is protected by the sandboxed top-level navigation browsing context flag defined next).
This flag also prevents content
from creating new auxiliary browsing contexts, e.g. using the
target attribute, the
window.open() method, or the showModalDialog() method.
sandbox attribute's value, when
split on spaces, is
found to have the allow-top-navigation
keyword setThis flag prevents content from navigating their top-level browsing context.
When the allow-top-navigation
is set, content can navigate its top-level browsing
context, but other browsing
contexts are still protected by the sandboxed
navigation browsing context flag defined above.
This flag prevents content from instantiating plugins, whether using the embed element, the object element,
the applet
element, or through navigation of a nested
browsing context, unless those plugins can be secured.
This flag prevents content from using the seamless attribute on
descendant iframe elements.
This prevents a page inserted using the allow-same-origin
keyword from using a CSS-selector-based method of probing the DOM
of other pages on the same site (in particular, pages that contain
user-sensitive information).
sandbox attribute's
value, when split on
spaces, is found to have the allow-same-origin
keyword setThis flag forces content into a unique origin, thus preventing it from accessing other content from the same origin.
This flag also prevents script from
reading from or writing to the document.cookie IDL
attribute, and blocks access to localStorage.
[WEBSTORAGE]
The allow-same-origin
attribute is intended for two cases.
First, it can be used to allow content from the same site to be sandboxed to disable scripting, while still allowing access to the DOM of the sandboxed content.
Second, it can be used to embed content from a third-party site, sandboxed to prevent that site from opening popup windows, etc, without preventing the embedded page from communicating back to its originating site, using the database APIs to store data, etc.
sandbox attribute's
value, when split on
spaces, is found to have the allow-forms
keyword setThis flag blocks form submission.
sandbox attribute's
value, when split on
spaces, is found to have the allow-scripts
keyword setThis flag blocks script execution.
sandbox attribute's value, when
split on spaces, is
found to have the allow-scripts
keyword (defined above) setThis flag blocks features that trigger automatically, such as automatically playing a video or automatically focusing a form control. It is relaxed by the same flag as scripts, because when scripts are enabled these features are trivially possible anyway, and it would be unfortunate to force authors to use script to do them when sandboxed rather than allowing them to use the declarative features.
These flags must not be set unless the conditions listed above define them as being set.
These flags only take effect when the
nested browsing context of the iframe is
navigated. Removing them, or removing
the entire sandbox
attribute, has no effect on an already-loaded page.
In this example, some completely-unknown, potentially hostile, user-provided HTML content is embedded in a page. Because it is served from a separate domain, it is affected by all the normal cross-site restrictions. In addition, the embedded page has scripting disabled, plugins disabled, forms disabled, and it cannot navigate any frames or windows other than itself (or any frames or windows it itself embeds).
<p>We're not scared of you! Here is your content, unedited:</p> <iframe sandbox src="http://usercontent.example.net/getusercontent.cgi?id=12193"></iframe>
It is important to use a separate domain so that if the attacker convinces the user to visit that page directly, the page doesn't run in the context of the site's origin, which would make the user vulnerable to any attack found in the page.
In this example, a gadget from another site is embedded. The gadget has scripting and forms enabled, and the origin sandbox restrictions are lifted, allowing the gadget to communicate with its originating server. The sandbox is still useful, however, as it disables plugins and popups, thus reducing the risk of the user being exposed to malware and other annoyances.
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
src="http://maps.example.com/embedded.html"></iframe>
Suppose a file A contained the following fragment:
<iframe sandbox="allow-same-origin allow-forms" src=B></iframe>
Suppose that file B contained an iframe also:
<iframe sandbox="allow-scripts" src=C></iframe>
Further, suppose that file C contained a link:
<a href=D>Link</a>
For this example, suppose all the files were served as
text/html.
Page C in this scenario has all the sandboxing flags
set. Scripts are disabled, because the iframe in A has
scripts disabled, and this overrides the allow-scripts
keyword set on the iframe in B. Forms are also
disabled, because the inner iframe (in B) does not
have the allow-forms keyword
set.
Suppose now that a script in A removes all the sandbox attributes in A
and B. This would change nothing
immediately. If the user clicked the link in C, loading page D into
the iframe in B, page D would now act as if the
iframe in B had the allow-same-origin
and allow-forms keywords
set, because that was the state of the nested browsing
context in the iframe in A when page B was
loaded.
Generally speaking, dynamically removing or changing the sandbox attribute is
ill-advised, because it can make it quite hard to reason about what
will be allowed and what will not.
Potentially hostile files should not be served from
the same server as the file containing the iframe
element. Using a different domain ensures that scripts in the files
are unable to attack the site, even if the user is tricked into
visiting those pages directly, without the protection of the sandbox attribute.
If the allow-scripts
keyword is set along with allow-same-origin
keyword, and the file is from the same origin as the
iframe's Document, then a script in the
"sandboxed" iframe could just reach out, remove the sandbox attribute, and then
reload itself, effectively breaking out of the sandbox
altogether.
The seamless
attribute is a boolean attribute. When specified, it
indicates that the iframe element's browsing
context is to be rendered in a manner that makes it appear to
be part of the containing document (seamlessly included in the
parent document). Specifically, when the
attribute is set on an iframe element whose owner
Document's browsing context did not have
the sandboxed seamless iframes flag set when that
Document was created, and while either the
browsing context's active document has the
same origin as the iframe element's
document, or the browsing context's active
document's address has the same origin as the
iframe element's document, or the browsing
context's active document is an
iframe srcdoc
document, the following requirements apply:
The user agent must set the seamless browsing context
flag to true for that browsing context. This
will cause links to open in the parent
browsing context unless an explicit self-navigation
override is used (target="_self").
In a CSS-supporting user agent: the user agent must add all
the style sheets that apply to the iframe element to
the cascade of the active document of the
iframe element's nested browsing context,
at the appropriate cascade levels, before any style sheets
specified by the document itself.
In a CSS-supporting user agent: the user agent must, for the
purpose of CSS property inheritance only, treat the root element of
the active document of the iframe
element's nested browsing context as being a child of
the iframe element. (Thus inherited properties on the
root element of the document in the iframe will
inherit the computed values of those properties on the
iframe element instead of taking their initial
values.)
In visual media, in a CSS-supporting user agent: the user agent
should set the intrinsic width of the iframe to the
width that the element would have if it was a non-replaced
block-level element with 'width: auto'.
In visual media, in a CSS-supporting user agent: the user
agent should set the intrinsic height of the iframe to
the height of the bounding box around the content rendered in the
iframe at its current width (as given in the previous
bullet point), as it would be if the scrolling position was such
that the top of the viewport for the content rendered in the
iframe was aligned with the origin of that content's
canvas.
In visual media, in a CSS-supporting user agent: the user agent
must force the height of the initial containing block of the
active document of the nested browsing
context of the iframe to zero.
This is intended to get around the otherwise circular dependency of percentage dimensions that depend on the height of the containing block, thus affecting the height of the document's bounding box, thus affecting the height of the viewport, thus affecting the size of the initial containing block.
In speech media, the user agent should render the nested browsing context without announcing that it is a separate document.
User agents should, in general, act as if the active
document of the iframe's nested browsing
context was part of the document that the
iframe is in, if any.
For example if the user agent supports listing all the links in a document, links in "seamlessly" nested documents would be included in that list without being significantly distinguished from links in the document itself.
If the attribute is not specified, or if the origin conditions listed above are not met, then the user agent should render the nested browsing context in a manner that is clearly distinguishable as a separate browsing context, and the seamless browsing context flag must be set to false for that browsing context.
It is important that user agents recheck the
above conditions whenever the active document of the
nested browsing context of the iframe
changes, such that the seamless browsing context flag
gets unset if the nested browsing context is navigated to another origin.
The attribute can be set or removed dynamically, with the rendering updating in tandem.
In this example, the site's navigation is embedded using a
client-side include using an iframe. Any links in the
iframe will, in new user agents, be automatically
opened in the iframe's parent browsing context; for
legacy user agents, the site could also include a base
element with a target
attribute with the value _parent. Similarly,
in new user agents the styles of the parent page will be
automatically applied to the contents of the frame, but to support
legacy user agents authors might wish to include the styles
explicitly.
<nav><iframe seamless src="nav.include.html"></iframe></nav>
The iframe element supports dimension
attributes for cases where the embedded content has specific
dimensions (e.g. ad units have well-defined dimensions).
An iframe element never has fallback
content, as it will always create a nested browsing
context, regardless of whether the specified initial contents
are successfully used.
Descendants of iframe elements represent
nothing. (In legacy user agents that do not support
iframe elements, the contents would be parsed as markup
that could act as fallback content.)
When used in HTML
documents, the allowed content model of iframe
elements is text, except that invoking the HTML fragment
parsing algorithm with the iframe element as the
context element and
the text contents as the input must result in a
list of nodes that are all phrasing content, with no
parse errors having occurred, with
no script elements being anywhere in the list or as
descendants of elements in the list, and with all the elements in
the list (including their descendants) being themselves
conforming.
The iframe element must be empty in XML
documents.
The HTML parser treats markup inside
iframe elements as text.
The IDL attributes src, srcdoc, name, sandbox, and seamless must
reflect the respective content attributes of the same
name.
The contentDocument
IDL attribute must return the Document object of the
active document of the iframe element's
nested browsing context, if any, or null otherwise.
The contentWindow
IDL attribute must return the WindowProxy object of the
iframe element's nested browsing
context, if any, or null otherwise.
Here is an example of a page using an iframe to
include advertising from an advertising broker:
<iframe src="http://ads.example.com/?customerid=923513721&format=banner"
width="468" height="60"></iframe>
embed elementsrctypewidthheightinterface HTMLEmbedElement : HTMLElement { attribute DOMString src; attribute DOMString type; attribute DOMString width; attribute DOMString height; legacycaller any (any... arguments); };
Depending on the type of content instantiated by the
embed element, the node may also support other
interfaces.
The embed element represents an
integration point for an external (typically non-HTML) application
or interactive content.
The src attribute
gives the address of the resource being embedded. The attribute, if
present, must contain a valid non-empty URL potentially
surrounded by spaces.
If the itemprop is specified
on an embed element, then the src attribute must also be
specified.
The type
attribute, if present, gives the MIME type by which the
plugin to instantiate is selected. The value must be a valid
MIME type. If both the type attribute and the src attribute are present, then the
type attribute must specify the
same type as the explicit Content-Type
metadata of the resource given by the src attribute.
When the element is created with neither a src attribute nor a type attribute, and when attributes
are removed such that neither attribute is present on the element
anymore, and when the element has a media element
ancestor, and when the element has an ancestor object
element that is not showing its fallback
content, any plugins instantiated for the element must be
removed, and the embed element represents nothing.
An embed element is said to be potentially active when the
following conditions are all met simultaneously:
Document.Document is fully active.src attribute set or a type attribute set (or both).src attribute is either absent or its value is the empty string.object element that is not showing its fallback content.Whenever an embed element that was not potentially active becomes potentially active, and whenever
a potentially active
embed element's src attribute is set, changed, or
removed, and whenever a potentially active
embed element's type attribute is set, changed, or
removed, the appropriate set of steps from the following is then
applied:
src
attribute setThe user agent must resolve
the value of the element's src
attribute, relative to the element. If that is successful, the
user agent should fetch the resulting absolute
URL, from the element's browsing context scope
origin if it has one. The task that is
queued by the networking
task source once the resource has been fetched must find and instantiate an
appropriate plugin based on the content's type, and hand that
plugin the content of the resource, replacing any
previously instantiated plugin for the element.
Fetching the resource must delay the load event of the element's document.
src
attribute setThe user agent should find and instantiate an appropriate
plugin based on the value of the type attribute.
Whenever an embed element that was potentially active stops being
potentially active, any
plugin that had been instantiated for that element must
be unloaded.
When a plugin is to be
instantiated but it cannot be secured and the sandboxed
plugins browsing context flag was set on the browsing
context for which the embed element's
Document is the active document when that
Document was created, then the user agent must not
instantiate the plugin, and must instead render the
embed element in a manner that conveys that the
plugin was disabled. The user agent may offer the user
the option to override the sandbox and instantiate the
plugin anyway; if the user invokes such an option, the
user agent must act as if the conditions above did not apply for the
purposes of this element.
Plugins that cannot be secured are disabled in sandboxed browsing contexts because they might not honor the restrictions imposed by the sandbox (e.g. they might allow scripting even when scripting in the sandbox is disabled). User agents should convey the danger of overriding the sandbox to the user if an option to do so is provided.
The embed element is unaffected by the
CSS 'display' property. The selected plugin is instantiated even if
the element is hidden with a 'display:none' CSS style.
The type of the content being embedded is defined as follows:
If the element has a type attribute, and that attribute's
value is a type that a plugin supports, then the value
of the type attribute is the
content's type.
Otherwise, if the <path> component of the URL of the specified resource (after any redirects) matches a pattern that a plugin supports, then the content's type is the type that that plugin can handle.
For example, a plugin might say that it can
handle resources with <path>
components that end with the four character string ".swf".
Otherwise, if the specified resource has explicit Content-Type metadata, then that is the content's type.
Otherwise, the content has no type and there can be no appropriate plugin for it.
The embed element has no fallback
content. If the user agent can't find a suitable plugin, then
the user agent must use a default plugin. (This default could be as
simple as saying "Unsupported Format".)
Whether the resource is fetched successfully or not (e.g. whether the response code was a 2xx code or equivalent) must be ignored when determining the resource's type and when handing the resource to the plugin.
This allows servers to return data for plugins even with error responses (e.g. HTTP 500 Internal Server Error codes can still contain plugin data).
Any namespace-less attribute other than name, align, hspace, and vspace may be specified on the embed element,
so long as its name is XML-compatible and contains no
characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to
LATIN CAPITAL LETTER Z). These attributes are then passed as
parameters to the plugin.
All attributes in HTML documents get lowercased automatically, so the restriction on uppercase letters doesn't affect such documents.
The four exceptions are to exclude legacy attributes that have side-effects beyond just sending parameters to the plugin.
The user agent should pass the names and values of all the
attributes of the embed element that have no namespace
to the plugin used, when it is instantiated.
The HTMLEmbedElement object representing the element
must expose the scriptable interface of the plugin
instantiated for the embed element. At a minimum, this
interface must implement the legacy
caller operation. (It is suggested that the default behavior
of this legacy caller operation, e.g. the behavior of the default
plugin's legacy caller operation, be to throw a
NotSupportedError exception.)
The embed element supports dimension
attributes.
The IDL attributes src and type each must
reflect the respective content attributes of the same
name.
Here's a way to embed a resource that requires a proprietary plugin, like Flash:
<embed src="catgame.swf">
If the user does not have the plugin (for example if the plugin vendor doesn't support the user's platform), then the user will be unable to use the resource.
To pass the plugin a parameter "quality" with the value "high", an attribute can be specified:
<embed src="catgame.swf" quality="high">
This would be equivalent to the following, when using an
object element instead:
<object data="catgame.swf"> <param name="quality" value="high"> </object>
object elementusemap attribute: Interactive content.param elements, then, transparent.datatypetypemustmatchnameusemapformwidthheightinterface HTMLObjectElement : HTMLElement { attribute DOMString data; attribute DOMString type; attribute boolean typeMustMatch; attribute DOMString name; attribute DOMString useMap; readonly attribute HTMLFormElement? form; attribute DOMString width; attribute DOMString height; readonly attribute Document? contentDocument; readonly attribute WindowProxy? contentWindow; readonly attribute boolean willValidate; readonly attribute ValidityState validity; readonly attribute DOMString validationMessage; boolean checkValidity(); void setCustomValidity(DOMString error); legacycaller any (any... arguments); };
Depending on the type of content instantiated by the
object element, the node also supports other
interfaces.
The object element can represent an external
resource, which, depending on the type of the resource, will either
be treated as an image, as a nested browsing context,
or as an external resource to be processed by a
plugin.
The data
attribute, if present, specifies the address of the resource. If
present, the attribute must be a valid non-empty
URL potentially surrounded by spaces.
Authors who reference resources from other origins that they do not trust are urged to
use the typemustmatch
attribute defined below. Without that attribute, it is possible in
certain cases for an attacker on the remote host to use the plugin
mechanism to run arbitrary scripts, even if the author has used
features such as the Flash "allowScriptAccess" parameter.
The type
attribute, if present, specifies the type of the resource. If
present, the attribute must be a valid MIME type.
At least one of either the data attribute or the type attribute must be present.
If the itemprop is specified
on an object element, then the data attribute must also be
specified.
The typemustmatch
attribute is a boolean attribute whose presence
indicates that the resource specified by the data attribute is only to be used if
the value of the type
attribute and the Content-Type of the aforementioned
resource match.
The typemustmatch
attribute must not be specified unless both the data attribute and the type attribute are present.
The name
attribute, if present, must be a valid browsing context
name. The given value is used to name the nested
browsing context, if applicable.
When the element is created, when it is popped off the
stack of open elements of an HTML parser
or XML parser, and subsequently whenever the element is
inserted into a
document or removed from a document; and whenever the element's
Document changes whether it is fully
active; and whenever an ancestor object element
changes to or from showing its fallback content; and
whenever the element's classid attribute is set,
changed, or removed; and, when its classid attribute is not present,
whenever its data attribute is
set, changed, or removed; and, when neither its classid attribute nor its data attribute are present, whenever
its type attribute is set,
changed, or removed: the user agent must queue a task
to run the following steps to (re)determine what the
object element represents. The task source
for this task is the DOM
manipulation task source.
If the user has indicated a preference that this
object element's fallback content be
shown instead of the element's usual behavior, then jump to the
last step in the overall set of steps (fallback).
For example, a user could ask for the element's fallback content to be shown because that content uses a format that the user finds more accessible.
If the element has an ancestor media element, or
has an ancestor object element that is not
showing its fallback content, or if the element is
not in a Document
with a browsing context, or if the element's
Document is not fully active, or if the
element is still in the stack of open elements of an
HTML parser or XML parser, then jump to
the last step in the overall set of steps (fallback).
If the classid
attribute is present, and has a value that isn't the empty string,
then: if the user agent can find a plugin suitable
according to the value of the classid attribute, and either
plugins aren't being sandboxed
or that plugin can be secured, then that
plugin should be used,
and the value of the data
attribute, if any, should be passed to the plugin. If
no suitable plugin can be found, or if the
plugin reports an error, jump to the last step in the
overall set of steps (fallback).
If the data attribute
is present and its value is not the empty string, then:
If the type
attribute is present and its value is not a type that the user
agent supports, and is not a type that the user agent can find a
plugin for, then the user agent may jump to the last
step in the overall set of steps (fallback) without fetching the
content to examine its real type.
Resolve the
URL specified by the data attribute, relative to the
element.
If that failed, fire a simple event named
error at the element, then jump
to the last step in the overall set of steps (fallback).
Fetch the resulting absolute URL, from the element's browsing context scope origin if it has one.
Fetching the resource must delay the load event of the element's document until the task that is queued by the networking task source once the resource has been fetched (defined next) has been run.
For the purposes of the application cache networking model, this fetch operation is not for a child browsing context (though it might end up being used for one after all, as defined below).
If the resource is not yet available (e.g. because the resource was not available in the cache, so that loading the resource required making a request over the network), then jump to the last step in the overall set of steps (fallback). The task that is queued by the networking task source once the resource is available must restart this algorithm from this step. Resources can load incrementally; user agents may opt to consider a resource "available" whenever enough data has been obtained to begin processing the resource.
If the load failed (e.g. there was an HTTP 404 error,
there was a DNS error), fire a simple event named
error at the element, then jump
to the last step in the overall set of steps (fallback).
Determine the resource type, as follows:
Let the resource type be unknown.
If the object element has a type attribute and a typemustmatch
attribute, and the resource has associated Content-Type metadata,
and the type specified in the
resource's Content-Type metadata is an ASCII
case-insensitive match for the value of the element's
type attribute, then let
resource type be that type and jump to the
step below labeled handler.
If the object element has a typemustmatch
attribute, jump to the step below labeled handler.
If the user agent is configured to strictly obey Content-Type headers for this resource, and the resource has associated Content-Type metadata, then let the resource type be the type specified in the resource's Content-Type metadata, and jump to the step below labeled handler.
This can introduce a vulnerability, wherein a site is trying to embed a resource that uses a particular plugin, but the remote site overrides that and instead furnishes the user agent with a resource that triggers a different plugin with different security characteristics.
If there is a type
attribute present on the object element, and that
attribute's value is not a type that the user agent supports,
but it is a type that a plugin supports,
then let the resource type be the type
specified in that type
attribute, and jump to the step below labeled
handler.
Run the approprate set of steps from the following list:
Let binary be false.
If the type specified in the
resource's Content-Type metadata is
"text/plain", and the result of applying the
rules
for distinguishing if a resource is text or binary
to the resource is that the resource is not
text/plain, then set binary to true.
If the type specified in the
resource's Content-Type metadata is
"application/octet-stream", then set binary to true.
If binary is false, then let the resource type be the type specified in the resource's Content-Type metadata, and jump to the step below labeled handler.
If there is a type attribute present on
the object element, and its value is not
application/octet-stream, then run the
following steps:
If the attribute's value is a type that a plugin supports, or
the attribute's value is a type that starts with "image/" that is not also an XML MIME type,
then let the resource type be the type specified in that type attribute.
Jump to the step below labeled handler.
If there is a type attribute present on
the object element, then let the tentative type be the type specified in that
type attribute.
Otherwise, let tentative type be the sniffed type of the resource.
If tentative type is not
application/octet-stream, then let resource type be tentative
type and jump to the step below labeled
handler.
If the <path> component of the URL of the specified resource (after any redirects) matches a pattern that a plugin supports, then let resource type be the type that that plugin can handle.
For example, a plugin might say that it can
handle resources with <path> components that end with
the four character string ".swf".
It is possible for this step to finish, or for one of the substeps above to jump straight to the next step, with resource type still being unknown. In both cases, the next step will trigger fallback.
Handler: Handle the content as given by the first of the following cases that matches:
If plugins are being sandboxed and the plugin that supports resource type cannot be secured, jump to the last step in the overall set of steps (fallback).
Otherwise, the user agent should use the plugin that supports resource type and pass the content of the resource to that plugin. If the plugin reports an error, then jump to the last step in the overall set of steps (fallback).
image/"The object element must be associated with a
newly created nested browsing context, if it does
not already have one.
If the URL of the given resource is not
about:blank, the element's nested browsing
context must then be navigated to that
resource, with replacement enabled, and with the
object element's document's browsing
context as the source browsing context.
(The data attribute of
the object element doesn't get updated if the
browsing context gets further navigated to other
locations.)
If the URL of the given resource is
about:blank, then, instead, the user agent must
queue a task to fire a simple event
named load at the
object element. No load event is fired at the
about:blank document itself.
The object element represents the
nested browsing context.
If the name attribute
is present, the browsing context name must be set
to the value of this attribute; otherwise, the browsing
context name must be set to the empty string.
In certain situations, e.g. if the resource
was fetched from an
application cache but it is an HTML file with a
manifest attribute
that points to a different application cache
manifest, the navigation
of the browsing context will be restarted so as
to load the resource afresh from the network or a different
application cache. Even if the resource is then
found to have a different type, it is still used as part of a
nested browsing context: only the
navigate algorithm is restarted, not this
object algorithm.
image/", and support for images has not been
disabledApply the image sniffing rules to determine the type of the image.
The object element represents the
specified image. The image is not a nested browsing
context.
If the image cannot be rendered, e.g. because it is malformed or in an unsupported format, jump to the last step in the overall set of steps (fallback).
The given resource type is not supported. Jump to the last step in the overall set of steps (fallback).
If the previous step ended with the resource type being unknown, this is the case that is triggered.
The element's contents are not part of what the
object element represents.
Once the resource is completely loaded, queue a
task to fire a simple event named load at the element.
The task source for this task is the DOM manipulation task source.
If the data attribute
is absent but the type
attribute is present, and the user agent can find a
plugin suitable according to the value of the type attribute, and either plugins aren't being sandboxed or
the plugin can be secured, then that
plugin should be used. If
these conditions cannot be met, or if the plugin
reports an error, jump to the next step (fallback).
(Fallback.) The object element
represents the element's children, ignoring any
leading param element children. This is the element's
fallback content. If the element has an instantiated
plugin, then unload it.
When the algorithm above instantiates a
plugin, the user agent should pass to the
plugin used the names and values of all the attributes
on the element, in the order they were added to the element, with
the attributes added by the parser being ordered in source order,
followed by a parameter named "PARAM" whose value is null,
followed by all the names and values of parameters given by
param elements that are children of the
object element, in tree order. If the
plugin supports a scriptable interface, the
HTMLObjectElement object representing the element
should expose that interface. The object element
represents the plugin. The
plugin is not a nested browsing
context.
Plugins are considered sandboxed for the
purpose of an object element if the sandboxed
plugins browsing context flag was set on the
object element's Document's browsing
context when the Document was created.
The above algorithm is independent of CSS properties (including 'display', 'overflow', and 'visibility'). For example, it runs even if the element is hidden with a 'display:none' CSS style, and does not run again if the element's visibility changes.
Due to the algorithm above, the contents of object
elements act as fallback content, used only when
referenced resources can't be shown (e.g. because it returned a 404
error). This allows multiple object elements to be
nested inside each other, targeting multiple user agents with
different capabilities, with the user agent picking the first one it
supports.
Whenever the name attribute
is set, if the object element has a nested
browsing context, its name must be changed to the new value. If the attribute
is removed, if the object element has a browsing
context, the browsing context name must be set
to the empty string.
The usemap attribute,
if present while the object element represents an
image, can indicate that the object has an associated image
map. The attribute must be ignored if the
object element doesn't represent an image.
The form attribute is used to
explicitly associate the object element with its
form owner.
Constraint validation: object
elements are always barred from constraint
validation.
The object element supports dimension
attributes.
The IDL attributes data, type and name each must
reflect the respective content attributes of the same
name. The typeMustMatch
IDL attribute must reflect the typemustmatch content
attribute. The useMap IDL attribute
must reflect the usemap content attribute.
The contentDocument
IDL attribute must return the Document object of the
active document of the object element's
nested browsing context, if it has one; otherwise, it
must return null.
The contentWindow
IDL attribute must return the WindowProxy object of the
object element's nested browsing context,
if it has one; otherwise, it must return null.
The willValidate, validity, and validationMessage
attributes, and the checkValidity() and setCustomValidity()
methods, are part of the constraint validation API. The
form IDL attribute is part of the
element's forms API.
All object elements have a legacy caller operation. If the
object element has an instantiated plugin
that supports a scriptable interface that defines a legacy caller
operation, then that must be the behavior of the object's legacy
caller operation. Otherwise, the object's legacy caller operation
must be to throw a NotSupportedError exception.
In the following example, a Java applet is embedded in a page
using the object element. (Generally speaking, it is
better to avoid using applets like these and instead use native
JavaScript and HTML to provide the functionality, since that way
the application will work on all Web browsers without requiring a
third-party plugin. Many devices, especially embedded devices, do
not support third-party technologies like Java.)
<figure> <object type="application/x-java-applet"> <param name="code" value="MyJavaClass"> <p>You do not have Java available, or it is disabled.</p> </object> <figcaption>My Java Clock</figcaption> </figure>
In this example, an HTML page is embedded in another using the
object element.
<figure> <object data="clock.html"></object> <figcaption>My HTML Clock</figcaption> </figure>
The following example shows how a plugin can be used in HTML (in
this case the Flash plugin, to show a video file). Fallback is
provided for users who do not have Flash enabled, in this case
using the video element to show the video for those
using user agents that support video, and finally
providing a link to the video for those who have neither Flash nor
a video-capable browser.
<p>Look at my video: <object type="application/x-shockwave-flash"> <param name=movie value="http://video.example.com/library/watch.swf"> <param name=allowfullscreen value=true> <param name=flashvars value="http://video.example.com/vids/315981"> <video controls src="http://video.example.com/vids/315981"> <a href="http://video.example.com/vids/315981">View video</a>. </video> </object> </p>
param elementobject element, before any flow content.namevalueinterface HTMLParamElement : HTMLElement { attribute DOMString name; attribute DOMString value; };
The param element defines parameters for plugins
invoked by object elements. It does not represent anything on its own.
The name
attribute gives the name of the parameter.
The value
attribute gives the value of the parameter.
Both attributes must be present. They may have any value.
If both attributes are present, and if the parent element of the
param is an object element, then the
element defines a parameter with the given
name-value pair.
If either the name or value of a parameter defined by a
param element that is the child of an
object element that represents an
instantiated plugin changes, and if that
plugin is communicating with the user agent using an
API that features the ability to update the plugin when
the name or value of a parameter so changes, then
the user agent must appropriately exercise that ability to notify
the plugin of the change.
The IDL attributes name and value must both
reflect the respective content attributes of the same
name.
The following example shows how the param element
can be used to pass a parameter to a plugin, in this case the O3D
plugin.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>O3D Utah Teapot</title>
</head>
<body>
<p>
<object type="application/vnd.o3d.auto">
<param name="o3d_features" value="FloatingPointTextures">
<img src="o3d-teapot.png"
title="3D Utah Teapot illustration rendered using O3D."
alt="When O3D renders the Utah Teapot, it appears as a squat
teapot with a shiny metallic finish on which the
surroundings are reflected, with a faint shadow caused by
the lighting.">
<p>To see the teapot actually rendered by O3D on your
computer, please download and install the <a
href="http://code.google.com/apis/o3d/docs/gettingstarted.html#install">O3D plugin</a>.</p>
</object>
<script src="o3d-teapot.js"></script>
</p>
</body>
</html>
video elementcontrols attribute: Interactive content.src attribute:
zero or more track elements, then
transparent, but with no media element descendants.src attribute: zero or more source elements, then
zero or more track elements, then
transparent, but with no media element descendants.srccrossoriginposterpreloadautoplaymediagrouploopmutedcontrolswidthheightinterface HTMLVideoElement : HTMLMediaElement { attribute unsigned long width; attribute unsigned long height; readonly attribute unsigned long videoWidth; readonly attribute unsigned long videoHeight; attribute DOMString poster; };
A video element is used for playing videos or
movies, and audio files with captions.
Content may be provided inside the video
element. User agents should not show this content
to the user; it is intended for older Web browsers which do
not support video, so that legacy video plugins can be
tried, or to show text to the users of these older browsers informing
them of how to access the video contents.
In particular, this content is not intended to
address accessibility concerns. To make video content accessible to
the partially sighted, the blind, the hard-of-hearing, the deaf, and
those with other physical or cognitive disabilities, a variety of
features are available. Captions can be provided, either embedded in
the video stream or as external files using the track
element. Sign-language tracks can be provided, again either embedded
in the video stream or by synchronizing multiple video
elements using the mediagroup attribute or a
MediaController object. Audio descriptions can be
provided, either as a separate track embedded in the video stream,
or a separate audio track in an audio element slaved to the same controller
as the video element(s), or in text form using a
WebVTT file referenced using the track
element and synthesized into speech by the user agent. WebVTT can
also be used to provide chapter titles. For users who would rather
not use a media element at all, transcripts or other textual
alternatives can be provided by simply linking to them in the prose
near the video element. [WEBVTT]
The video element is a media element
whose media data is ostensibly video data, possibly
with associated audio data.
The src, preload, autoplay,
mediagroup,
loop,
muted, and controls attributes are the attributes common to all media
elements.
The poster
attribute gives the address of an image file that the user agent can
show while no video data is available. The attribute, if present,
must contain a valid non-empty URL potentially surrounded by
spaces.
If the specified resource is to be used, then, when the element
is created or when the poster
attribute is set, changed, or removed, the user agent must run the
following steps to determine the element's poster
frame:
If there is an existing instance of this algorithm running
for this video element, abort that instance of this
algorithm without changing the poster frame.
If the poster
attribute's value is the empty string or if the attribute is
absent, then there is no poster frame; abort these
steps.
Resolve the poster attribute's value relative
to the element. If this fails, then there is no poster
frame; abort these steps.
Fetch the resulting absolute URL,
from the element's Document's origin.
This must delay the load event of the element's
document.
If an image is thus obtained, the poster frame is that image. Otherwise, there is no poster frame.
The image given by the poster attribute, the poster
frame, is intended to be a representative frame of the video
(typically one of the first non-blank frames) that gives the user an
idea of what the video is like.
When no video data is available (the element's readyState attribute is either
HAVE_NOTHING, or HAVE_METADATA but no video
data has yet been obtained at all, or the element's readyState attribute is any
subsequent value but the media resource does not have a
video channel), the video element
represents the poster frame.
When a video element is paused and the current playback position is the first
frame of video, the element represents the poster
frame, unless a frame of video has already been shown, in
which case the element represents the frame of video
corresponding to the current
playback position.
When a video element is paused at any other position, and
the media resource has a video channel, the element
represents the frame of video corresponding to the
current playback
position, or, if that is not yet available (e.g. because the
video is seeking or buffering), the last frame of the video to have
been rendered.
When a video element whose media
resource has a video channel is potentially
playing, it represents the frame of video at the
continuously increasing "current" position. When the current playback
position changes such that the last frame rendered is no
longer the frame corresponding to the current playback
position in the video, the new frame must be rendered.
Similarly, any audio associated with the media resource
must, if played, be played synchronized with the current
playback position, at the element's effective media
volume.
When a video element whose media
resource has a video channel is neither potentially
playing nor paused
(e.g. when seeking or stalled), the element represents
the last frame of the video to have been rendered.
Which frame in a video stream corresponds to a particular playback position is defined by the video stream's format.
The video element also represents any
text track cues whose
text track cue active flag is set and whose
text track is in the showing or showing by default modes.
In addition to the above, the user agent may provide messages to the user (such as "buffering", "no video loaded", "error", or more detailed information) by overlaying text or icons on the video or other areas of the element's playback area, or in another appropriate manner.
User agents that cannot render the video may instead make the element represent a link to an external video playback utility or to the video data itself.
When a video element's media resource
has a video channel, the element provides a paint
source whose width is the media resource's intrinsic width, whose
height is the media resource's intrinsic height, and
whose appearance is the frame of video corresponding to the current playback position,
if that is available, or else (e.g. when the video is seeking or
buffering) its previous appearance, if any, or else (e.g. because
the video is still loading the first frame) blackness.
videoWidthvideoHeightThese attributes return the intrinsic dimensions of the video, or zero if the dimensions are not known.
The intrinsic width and intrinsic height of the media resource are the dimensions of the resource in CSS pixels after taking into account the resource's dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used by the resource. If an anamorphic format does not define how to apply the aspect ratio to the video data's dimensions to obtain the "correct" dimensions, then the user agent must apply the ratio by increasing one dimension and leaving the other unchanged.
The videoWidth IDL
attribute must return the intrinsic width of the
video in CSS pixels. The videoHeight IDL
attribute must return the intrinsic height of
the video in CSS pixels. If the element's readyState attribute is HAVE_NOTHING, then the
attributes must return 0.
The video element supports dimension
attributes.
In the absence of style rules to the contrary, video content should be rendered inside the element's playback area such that the video content is shown centered in the playback area at the largest possible size that fits completely within it, with the video content's aspect ratio being preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the video, the video will be shown letterboxed or pillarboxed. Areas of the element's playback area that do not contain the video represent nothing.
In user agents that implement CSS, the above requirement can be implemented by using the style rule suggested in the rendering section.
The intrinsic width of a video element's playback
area is the intrinsic
width of the video resource, if that is available; otherwise
it is the intrinsic width of the poster frame, if that
is available; otherwise it is 300 CSS pixels.
The intrinsic height of a video element's playback
area is the intrinsic
height of the video resource, if that is available; otherwise
it is the intrinsic height of the poster frame, if that
is available; otherwise it is 150 CSS pixels.
User agents should provide controls to enable or disable the display of closed captions, audio description tracks, and other additional data associated with the video stream, though such features should, again, not interfere with the page's normal rendering.
User agents may allow users to view the video content in manners
more suitable to the user (e.g. full-screen or in an independent
resizable window). As for the other user interface features,
controls to enable this should not interfere with the page's normal
rendering unless the user agent is exposing a user interface. In such an
independent context, however, user agents may make full user
interfaces visible, with, e.g., play, pause, seeking, and volume
controls, even if the controls attribute is absent.
User agents may allow video playback to affect system features that could interfere with the user's experience; for example, user agents could disable screensavers while video playback is in progress.
The poster IDL
attribute must reflect the poster content attribute.
This example shows how to detect when a video has failed to play correctly:
<script>
function failed(e) {
// video playback failed - show a message saying why
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
alert('You aborted the video playback.');
break;
case e.target.error.MEDIA_ERR_NETWORK:
alert('A network error caused the video download to fail part-way.');
break;
case e.target.error.MEDIA_ERR_DECODE:
alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
break;
default:
alert('An unknown error occurred.');
break;
}
}
</script>
<p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>
<p><a href="tgif.vid">Download the video file</a>.</p>
audio elementcontrols attribute: Interactive content.controls attribute: Palpable content.src attribute:
zero or more track elements, then
transparent, but with no media element descendants.src attribute: zero or more source elements, then
zero or more track elements, then
transparent, but with no media element descendants.srccrossoriginpreloadautoplaymediagrouploopmutedcontrols[NamedConstructor=Audio(), NamedConstructor=Audio(DOMString src)] interface HTMLAudioElement : HTMLMediaElement {};
An audio element represents a sound or
audio stream.
Content may be provided inside the audio
element. User agents should not show this content
to the user; it is intended for older Web browsers which do
not support audio, so that legacy audio plugins can be
tried, or to show text to the users of these older browsers informing
them of how to access the audio contents.
In particular, this content is not intended to
address accessibility concerns. To make audio content accessible to
the deaf or to those with other physical or cognitive disabilities,
a variety of features are available. If captions or a sign language
video are available, the video element can be used
instead of the audio element to play the audio,
allowing users to enable the visual alternatives. Chapter titles can
be provided to aid navigation, using the track element
and a WebVTT file. And, naturally, transcripts or other textual
alternatives can be provided by simply linking to them in the prose
near the audio element. [WEBVTT]
The audio element is a media element
whose media data is ostensibly audio data.
The src, preload, autoplay,
mediagroup,
loop,
muted, and controls attributes are the attributes common to all media
elements.
When an audio element is potentially
playing, it must have its audio data played synchronized with
the current playback position, at the element's
effective media volume.
When an audio element is not potentially
playing, audio must not play for the element.
Audio( [ url ] )Returns a new audio element, with the src attribute set to the value
passed in the argument, if applicable.
Two constructors are provided for creating
HTMLAudioElement objects (in addition to the factory
methods from DOM Core such as createElement()): Audio() and Audio(src). When invoked as constructors,
these must return a new HTMLAudioElement object (a new
audio element). The element must have its preload attribute set to the
literal value "auto". If the src argument is present, the object created must have
its src content attribute set to
the provided value, and the user agent must invoke the object's
resource selection
algorithm before returning. The element's document must be
the active document of the browsing
context of the Window object on which the
interface object of the invoked constructor is found.
source elementtrack elements.srctypemediainterface HTMLSourceElement : HTMLElement { attribute DOMString src; attribute DOMString type; attribute DOMString media; };
The source element allows authors to specify
multiple alternative media
resources for media
elements. It does not represent anything on its own.
The src attribute
gives the address of the media resource. The value must
be a valid non-empty URL potentially surrounded by
spaces. This attribute must be present.
Dynamically modifying a source element
and its attribute when the element is already inserted in a
video or audio element will have no
effect. To change what is playing, just use the src attribute on the media
element directly, possibly making use of the canPlayType() method to
pick from amongst available resources. Generally, manipulating
source elements manually after the document has been
parsed is an unncessarily complicated approach.
The type
attribute gives the type of the media resource, to help
the user agent determine if it can play this media
resource before fetching it. If specified, its value must be
a valid MIME type. The codecs
parameter, which certain MIME types define, might be necessary to
specify exactly how the resource is encoded. [RFC4281]
The following list shows some examples of how to use the codecs= MIME parameter in the type attribute.
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
<source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>
<source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
<source src='video.ogv' type='video/ogg; codecs="theora, speex"'>
<source src='audio.ogg' type='audio/ogg; codecs=vorbis'>
<source src='audio.spx' type='audio/ogg; codecs=speex'>
<source src='audio.oga' type='audio/ogg; codecs=flac'>
<source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>
The media
attribute gives the intended media type of the media
resource, to help the user agent determine if this
media resource is useful to the user before fetching
it. Its value must be a valid media query.
The default, if the media attribute is omitted, is
"all", meaning that by default the media
resource is suitable for all media.
If a source element is inserted as a child of a
media element that has no src attribute and whose networkState has the value
NETWORK_EMPTY, the user
agent must invoke the media element's resource selection
algorithm.
The IDL attributes src, type, and media must
reflect the respective content attributes of the same
name.
If the author isn't sure if the user agents will all be able to
render the media resources provided, the author can listen to the
error event on the last
source element and trigger fallback behavior:
<script>
function fallback(video) {
// replace <video> with its contents
while (video.hasChildNodes()) {
if (video.firstChild instanceof HTMLSourceElement)
video.removeChild(video.firstChild);
else
video.parentNode.insertBefore(video.firstChild, video);
}
video.parentNode.removeChild(video);
}
</script>
<video controls autoplay>
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
onerror="fallback(parentNode)">
...
</video>
track elementkindsrcsrclanglabeldefaultinterface HTMLTrackElement : HTMLElement { attribute DOMString kind; attribute DOMString src; attribute DOMString srclang; attribute DOMString label; attribute boolean default; const unsigned short NONE = 0; const unsigned short LOADING = 1; const unsigned short LOADED = 2; const unsigned short ERROR = 3; readonly attribute unsigned short readyState; readonly attribute TextTrack track; };
The track element allows authors to specify explicit
external timed text tracks for media elements. It does not represent anything on its own.
The kind
attribute is an enumerated attribute. The following
table lists the keywords defined for this attribute. The keyword
given in the first cell of each row maps to the state given in the
second cell.
| Keyword | State | Brief description |
|---|---|---|
subtitles
| Subtitles | Transcription or translation of the dialogue, suitable for when the sound is available but not understood (e.g. because the user does not understand the language of the media resource's audio track). Overlaid on the video. |
captions
| Captions | Transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible (e.g. because it is muted, drowned-out by ambient noise, or because the user is deaf). Overlaid on the video; labeled as appropriate for the hard-of-hearing. |
descriptions
| Descriptions | Textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is obscured, unavailable, or not usable (e.g. because the user is interacting with the application without a screen while driving, or because the user is blind). Synthesized as audio. |
chapters
| Chapters | Chapter titles, intended to be used for navigating the media resource. Displayed as an interactive (potentially nested) list in the user agent's interface. |
metadata
| Metadata | Tracks intended for use from script. Not displayed by the user agent. |
The attribute may be omitted. The missing value default is the subtitles state.
The src attribute
gives the address of the text track data. The value must be a
valid non-empty URL potentially surrounded by
spaces. This attribute must be present.
If the element has a src
attribute whose value is not the empty string and whose value, when
the attribute was set, could be successfully resolved relative to the element, then the element's
track URL is the resulting absolute
URL. Otherwise, the element's track URL is the
empty string.
If the element's track URL identifies a
WebVTT resource, and the element's kind attribute is not in the metadata state, then the
WebVTT file must be a WebVTT file using cue
text. [WEBVTT]
Furthermore, if the element's track URL identifies a
WebVTT resource, and the element's kind attribute is in the chapters state, then the
WebVTT file must be both a WebVTT file using
chapter title text and a WebVTT file using only nested
cues. [WEBVTT]
The srclang
attribute gives the language of the text track data. The value must
be a valid BCP 47 language tag. This attribute must be present if
the element's kind attribute is
in the subtitles
state. [BCP47]
If the element has a srclang attribute whose value is
not the empty string, then the element's track language
is the value of the attribute. Otherwise, the element has no
track language.
The label
attribute gives a user-readable title for the track. This title is
used by user agents when listing subtitle, caption, and audio description tracks
in their user interface.
The value of the label
attribute, if the attribute is present, must not be the empty
string. Furthermore, there must not be two track
element children of the same media element whose kind attributes are in the same
state, whose srclang
attributes are both missing or have values that represent the same
language, and whose label
attributes are again both missing or both have the same value.
If the element has a label
attribute whose value is not the empty string, then the element's
track label is the value of the attribute. Otherwise, the
element's track label is a user-agent defined string
(e.g. the string "untitled" in the user's locale, or a value
automatically generated from the other attributes).
The default
attribute, if specified, indicates that the track is to be enabled
if the user's preferences do not indicate that another track would
be more appropriate. There must not be more than one
track element with the same parent node with the default attribute specified.
readyStateReturns the text track readiness state, represented by a number from the following list:
NONE (0)The text track not loaded state.
LOADING (1)The text track loading state.
LOADED (2)The text track loaded state.
ERROR (3)The text track failed to load state.
trackReturns the TextTrack object corresponding to the text track of the track element.
The readyState attribute
must return the numeric value corresponding to the text track
readiness state of the track element's
text track, as defined by the following list:
NONE (numeric value 0)LOADING (numeric value 1)LOADED (numeric value 2)ERROR (numeric value 3)The track IDL
attribute must, on getting, return the track element's
text track's corresponding TextTrack
object.
The src, srclang, label, and default IDL attributes
must reflect the respective content attributes of the
same name. The kind
IDL attribute must reflect the content attribute of the
same name, limited to only known values.
This video has subtitles in several languages:
<video src="brave.webm"> <track kind=subtitles src=brave.en.vtt srclang=en label="English"> <track kind=captions src=brave.en.hoh.vtt srclang=en label="English for the Hard of Hearing"> <track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français"> <track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch"> </video>
Media elements
(audio and video, in this specification)
implement the following interface:
interface HTMLMediaElement : HTMLElement { // error state readonly attribute MediaError? error; // network state attribute DOMString src; readonly attribute DOMString currentSrc; attribute DOMString crossOrigin; const unsigned short NETWORK_EMPTY = 0; const unsigned short NETWORK_IDLE = 1; const unsigned short NETWORK_LOADING = 2; const unsigned short NETWORK_NO_SOURCE = 3; readonly attribute unsigned short networkState; attribute DOMString preload; readonly attribute TimeRanges buffered; void load(); DOMString canPlayType(DOMString type); // ready state const unsigned short HAVE_NOTHING = 0; const unsigned short HAVE_METADATA = 1; const unsigned short HAVE_CURRENT_DATA = 2; const unsigned short HAVE_FUTURE_DATA = 3; const unsigned short HAVE_ENOUGH_DATA = 4; readonly attribute unsigned short readyState; readonly attribute boolean seeking; // playback state attribute double currentTime; readonly attribute double initialTime; readonly attribute double duration; readonly attribute Date startOffsetTime; readonly attribute boolean paused; attribute double defaultPlaybackRate; attribute double playbackRate; readonly attribute TimeRanges played; readonly attribute TimeRanges seekable; readonly attribute boolean ended; attribute boolean autoplay; attribute boolean loop; void play(); void pause(); // media controller attribute DOMString mediaGroup; attribute MediaController? controller; // controls attribute boolean controls; attribute double volume; attribute boolean muted; attribute boolean defaultMuted; // tracks readonly attribute AudioTrackList audioTracks; readonly attribute VideoTrackList videoTracks; readonly attribute TextTrackList textTracks; TextTrack addTextTrack(DOMString kind, optional DOMString label, optional DOMString language); };
The media element attributes, src, crossorigin, preload, autoplay,
mediagroup,
loop,
muted, and controls, apply to all media elements. They are defined in
this section.
Media elements are used to present audio data, or video and audio data, to the user. This is referred to as media data in this section, since this section applies equally to media elements for audio or for video. The term media resource is used to refer to the complete set of media data, e.g. the complete video file, or complete audio file.
A media resource can have multiple audio and video
tracks. For the purposes of a media element, the video
data of the media resource is only that of the
currently selected track (if any) given by the element's videoTracks attribute, and the
audio data of the media resource is the result of
mixing all the currently enabled tracks (if any) given by the
element's audioTracks
attribute.
Both audio and video
elements can be used for both audio and video. The main difference
between the two is simply that the audio element has no
playback area for visual content (such as video or captions),
whereas the video element does.
Except where otherwise specified, the task source for all the tasks queued in this section and its subsections is the media element event task source.
errorReturns a MediaError object representing the
current error state of the element.
Returns null if there is no error.
All media elements have an
associated error status, which records the last error the element
encountered since its resource selection
algorithm was last invoked. The error attribute, on
getting, must return the MediaError object created for
this last error, or null if there has not been an error.
interface MediaError {
const unsigned short MEDIA_ERR_ABORTED = 1;
const unsigned short MEDIA_ERR_NETWORK = 2;
const unsigned short MEDIA_ERR_DECODE = 3;
const unsigned short MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
readonly attribute unsigned short code;
};
error . codeReturns the current error's error code, from the list below.
The code
attribute of a MediaError object must return the code
for the error, which must be one of the following:
MEDIA_ERR_ABORTED (numeric value 1)MEDIA_ERR_NETWORK (numeric value 2)MEDIA_ERR_DECODE (numeric value 3)MEDIA_ERR_SRC_NOT_SUPPORTED (numeric value 4)src attribute was not suitable.The src content
attribute on media elements gives
the address of the media resource (video, audio) to show. The
attribute, if present, must contain a valid non-empty
URL potentially surrounded by spaces.
If the itemprop is specified
on the media element, then the src attribute must also be
specified.
The crossorigin
content attribute on media
elements is a CORS settings attribute.
If a src attribute of a
media element is set or changed, the user agent must
invoke the media element's media element load
algorithm. (Removing the src attribute does not do this, even
if there are source elements present.)
The src IDL
attribute on media elements must
reflect the content attribute of the same name.
The crossOrigin IDL
attribute must reflect the crossorigin content
attribute.
currentSrcReturns the address of the current media resource.
Returns the empty string when there is no media resource.
The currentSrc IDL
attribute is initially the empty string. Its value is changed by the
resource selection
algorithm defined below.
There are two ways to specify a media
resource, the src
attribute, or source elements. The attribute overrides
the elements.
A media resource can be described in terms of its
type, specifically a MIME type, in some cases
with a codecs parameter. (Whether the codecs parameter is allowed or not depends on the
MIME type.) [RFC4281]
Types are usually somewhat incomplete descriptions; for example
"video/mpeg" doesn't say anything except what
the container type is, and even a type like "video/mp4; codecs="avc1.42E01E,
mp4a.40.2"" doesn't include information like the actual
bitrate (only the maximum bitrate). Thus, given a type, a user agent
can often only know whether it might be able to play
media of that type (with varying levels of confidence), or whether
it definitely cannot play media of that type.
A type that the user agent knows it cannot render is one that describes a resource that the user agent definitely does not support, for example because it doesn't recognize the container type, or it doesn't support the listed codecs.
The MIME type
"application/octet-stream" with no parameters is never
a type that the user agent knows it cannot render. User
agents must treat that type as equivalent to the lack of any
explicit Content-Type metadata
when it is used to label a potential media
resource.
Only the MIME type
"application/octet-stream"
with no parameters
is special-cased here; if any parameter appears with it, it
will
should
be treated just like any other MIME type.
This is a deviation from the rule that unknown MIME type parameters
should be ignored.
canPlayType(type)Returns the empty string (a negative response), "maybe", or "probably" based on how confident the user agent is that it can play media resources of the given type.
The canPlayType(type) method must return the empty
string if type is a type that the user
agent knows it cannot render or is the type
"application/octet-stream"; it must return "probably" if the user agent is confident that the
type represents a media resource that it can render if
used in with this audio or video element;
and it must return "maybe" otherwise.
Implementors are encouraged to return "maybe"
unless the type can be confidently established as being supported or
not. Generally, a user agent should never return "probably" for a type that allows the codecs parameter if that parameter is not
present.
This script tests to see if the user agent supports a
(fictional) new format to dynamically decide whether to use a
video element or a plugin:
<section id="video">
<p><a href="playing-cats.nfv">Download video</a></p>
</section>
<script>
var videoSection = document.getElementById('video');
var videoElement = document.createElement('video');
var support = videoElement.canPlayType('video/x-new-fictional-format;codecs="kittens,bunnies"');
if (support != "probably" && "New Fictional Video Plugin" in navigator.plugins) {
// not confident of browser support
// but we have a plugin
// so use plugin instead
videoElement = document.createElement("embed");
} else if (support == "") {
// no support from browser and no plugin
// do nothing
videoElement = null;
}
if (videoElement) {
while (videoSection.hasChildNodes())
videoSection.removeChild(videoSection.firstChild);
videoElement.setAttribute("src", "playing-cats.nfv");
videoSection.appendChild(videoElement);
}
</script>
The type
attribute of the source element allows the user agent
to avoid downloading resources that use formats it cannot
render.
networkStateReturns the current state of network activity for the element, from the codes in the list below.
As media elements interact
with the network, their current network activity is represented by
the networkState
attribute. On getting, it must return the current network state of
the element, which must be one of the following values:
NETWORK_EMPTY (numeric value 0)NETWORK_IDLE (numeric value 1)NETWORK_LOADING (numeric value 2)NETWORK_NO_SOURCE (numeric value 3)The resource selection
algorithm defined below describes exactly when the networkState attribute changes
value and what events fire to indicate changes in this state.
load()Causes the element to reset and start selecting and loading a new media resource from scratch.
All media elements have an autoplaying flag, which must begin in the true state, and a delaying-the-load-event flag, which must begin in the false state. While the delaying-the-load-event flag is true, the element must delay the load event of its document.
When the load()
method on a media element is invoked, the user agent
must run the media element load algorithm.
The media element load algorithm consists of the following steps.
Abort any already-running instance of the resource selection algorithm for this element.
If there are any tasks from the media element's media element event task source in one of the task queues, then remove those tasks.
Basically, pending events and callbacks for the media element are discarded when the media element starts loading a new resource.
If the media element's networkState is set to NETWORK_LOADING or NETWORK_IDLE, queue a
task to fire a simple event named abort at the media
element.
If the media element's networkState is not set to
NETWORK_EMPTY, then
run these substeps:
Queue a task to fire a simple
event named emptied at the media
element.
If a fetching process is in progress for the media element, the user agent should stop it.
Set the networkState attribute to
NETWORK_EMPTY.
Forget the media element's media-resource-specific text tracks.
If readyState is
not set to HAVE_NOTHING, then set it
to that state.
If the paused
attribute is false, then set it to true.
If seeking is true,
set it to false.
Set the current playback position to 0.
Set the official playback position to 0.
If this changed the official playback position,
then queue a task to fire a simple
event named timeupdate at the
media element.
Set the initial playback position to 0.
Set the timeline offset to Not-a-Number (NaN).
Update the duration
attribute to Not-a-Number (NaN).
The user agent will
not fire a durationchange event
for this particular change of the duration.
Set the playbackRate attribute to the
value of the defaultPlaybackRate
attribute.
Set the error attribute
to null and the autoplaying flag to true.
Invoke the media element's resource selection algorithm.
Playback of any previously playing media resource for this element stops.
The resource selection algorithm for a media element is as follows. This algorithm is always invoked synchronously, but one of the first steps in the algorithm is to return and continue running the remaining steps asynchronously, meaning that it runs in the background with scripts and other tasks running in parallel. In addition, this algorithm interacts closely with the event loop mechanism; in particular, it has synchronous sections (which are triggered as part of the event loop algorithm). Steps in such sections are marked with ⌛.
Set the networkState to NETWORK_NO_SOURCE.
Asynchronously await a stable state, allowing the task that invoked this algorithm to continue. The synchronous section consists of all the remaining steps of this algorithm until the algorithm says the synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)
⌛ If the media element has a src attribute, then let mode be attribute.
⌛ Otherwise, if the media element does not
have a src attribute but has a
source element child, then let mode be children and let candidate be the first such source
element child in tree order.
⌛ Otherwise the media element has neither a
src attribute nor a
source element child: set the networkState to NETWORK_EMPTY, and abort
these steps; the synchronous section ends.
⌛ Set the media element's
delaying-the-load-event flag to true (this delays the load event), and set
its networkState to
NETWORK_LOADING.
⌛ Queue a task to fire a simple
event named loadstart at the media
element.
If mode is attribute, then run these substeps:
⌛ Process candidate: If the src attribute's value is the empty
string, then end the synchronous section, and jump
down to the failed step below.
⌛ Let absolute URL be the
absolute URL that would have resulted from resolving the URL
specified by the src
attribute's value relative to the media element when
the src attribute was last
changed.
⌛ If absolute URL was obtained
successfully, set the currentSrc attribute to absolute URL.
End the synchronous section, continuing the remaining steps asynchronously.
If absolute URL was obtained successfully, run the resource fetch algorithm with absolute URL. If that algorithm returns without aborting this one, then the load failed.
Failed: Reaching this step indicates that the media resource failed to load or that the given URL could not be resolved. In one atomic operation, run the following steps:
Set the error
attribute to a new MediaError object whose code attribute is set to
MEDIA_ERR_SRC_NOT_SUPPORTED.
Forget the media element's media-resource-specific text tracks.
Set the element's networkState attribute to
the NETWORK_NO_SOURCE
value.
Queue a task to fire a simple
event named error
at the media element.
Set the element's delaying-the-load-event flag to false. This stops delaying the load event.
Abort these steps. Until the load() method is invoked or the
src attribute is changed, the
element won't attempt to load another resource.
Otherwise, the source elements will be used; run
these substeps:
⌛ Let pointer be a position defined by two adjacent nodes in the media element's child list, treating the start of the list (before the first child in the list, if any) and end of the list (after the last child in the list, if any) as nodes in their own right. One node is the node before pointer, and the other node is the node after pointer. Initially, let pointer be the position between the candidate node and the next node, if there are any, or the end of the list, if it is the last node.
As nodes are inserted and removed into the media element, pointer must be updated as follows:
Other changes don't affect pointer.
⌛ Process candidate: If candidate does not have a src attribute, or if its src attribute's value is the empty
string, then end the synchronous section, and jump
down to the failed step below.
⌛ Let absolute URL be the
absolute URL that would have resulted from resolving the URL
specified by candidate's src attribute's value relative to
the candidate when the src attribute was last
changed.
⌛ If absolute URL was not obtained successfully, then end the synchronous section, and jump down to the failed step below.
⌛ If candidate has a type attribute whose value, when
parsed as a MIME type (including any codecs
described by the codecs parameter, for
types that define that parameter), represents a type that
the user agent knows it cannot render, then end the
synchronous section, and jump down to the failed step below.
⌛ If candidate has a media attribute whose value does
not match the
environment, then end the synchronous
section, and jump down to the failed step
below.
⌛ Set the currentSrc attribute to absolute URL.
End the synchronous section, continuing the remaining steps asynchronously.
Run the resource fetch algorithm with absolute URL. If that algorithm returns without aborting this one, then the load failed.
Failed: Queue a task to
fire a simple event named error at the candidate element, in the context of the fetching process that was used to try to
obtain candidate's corresponding media
resource in the resource fetch
algorithm.
Asynchronously await a stable state. The synchronous section consists of all the remaining steps of this algorithm until the algorithm says the synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)
⌛ Forget the media element's media-resource-specific text tracks.
⌛ Find next candidate: Let candidate be null.
⌛ Search loop: If the node after pointer is the end of the list, then jump to the waiting step below.
⌛ If the node after pointer is
a source element, let candidate
be that element.
⌛ Advance pointer so that the node before pointer is now the node that was after pointer, and the node after pointer is the node after the node that used to be after pointer, if any.
⌛ If candidate is null, jump back to the search loop step. Otherwise, jump back to the process candidate step.
⌛ Waiting: Set the element's networkState attribute to
the NETWORK_NO_SOURCE
value.
⌛ Set the element's delaying-the-load-event flag to false. This stops delaying the load event.
End the synchronous section, continuing the remaining steps asynchronously.
Wait until the node after pointer is a node other than the end of the list. (This step might wait forever.)
Asynchronously await a stable state. The synchronous section consists of all the remaining steps of this algorithm until the algorithm says the synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)
⌛ Set the element's delaying-the-load-event flag back to true (this delays the load event again, in case it hasn't been fired yet).
⌛ Set the networkState back to NETWORK_LOADING.
⌛ Jump back to the find next candidate step above.
The resource fetch algorithm for a media element and a given absolute URL is as follows:
Let the current media resource be the resource given by the absolute URL passed to this algorithm. This is now the element's media resource.
Optionally, run the following substeps. This is the expected
behavior if the user agent intends to not attempt to fetch the
resource until the use requests it explicitly (e.g. as a way to
implement the preload
attribute's none
keyword).
Set the networkState to NETWORK_IDLE.
Queue a task to fire a simple
event named suspend at the
element.
Wait for the task to be run.
Wait for an implementation-defined event (e.g. the user requesting that the media element begin playback).
Set the networkState to NETWORK_LOADING.
Perform a potentially CORS-enabled fetch of the
current media resource's absolute
URL, with the mode being the state of the
media element's crossorigin content
attribute, the origin being the origin of the
media element's Document, and the
default origin behaviour set to taint.
The resource obtained in this fashion, if any, contains the
media data. It can be CORS-same-origin
or CORS-cross-origin; this affects whether subtitles
referenced in the media data are exposed in the API
and, for video elements, whether a
canvas gets tainted when the video is drawn on
it.
While the load is not suspended (see below), every 350ms
(±200ms) or for every byte received, whichever is
least frequent, queue a task to fire a
simple event named progress at the element.
The stall timeout is a user-agent defined length of
time, which should be about three seconds. When a media
element that is actively attempting to obtain media
data has failed to receive any data for a duration equal to
the stall timeout, the user agent must queue a
task to fire a simple event named stalled at the element.
User agents may allow users to selectively block or slow media data downloads. When a media element's download has been blocked altogether, the user agent must act as if it was stalled (as opposed to acting as if the connection was closed). The rate of the download may also be throttled automatically by the user agent, e.g. to balance the download with other connections sharing the same bandwidth.
User agents may decide to not download
more content at any time, e.g. after buffering five minutes of a
one hour media resource, while waiting for the user to decide
whether to play the resource or not, or while waiting for user
input in an interactive resource. When a media
element's download has been suspended, the user agent must
queue a task to set the networkState to NETWORK_IDLE and fire
a simple event named suspend at the element. If and
when downloading of the resource resumes, the user agent must
queue a task to set the networkState to NETWORK_LOADING. Between
the queuing of these tasks, the load is suspended (so progress events don't fire, as
described above).
The preload attribute provides a
hint regarding how much buffering the author thinks is advisable,
even in the absence of the autoplay attribute.
When a user agent decides to completely stall a download, e.g. if it is waiting until the user starts playback before downloading any further content, the element's delaying-the-load-event flag must be set to false. This stops delaying the load event.
The user agent may use whatever means necessary to fetch the resource (within the constraints put forward by this and other specifications); for example, reconnecting to the server in the face of network errors, using HTTP range retrieval requests, or switching to a streaming protocol. The user agent must consider a resource erroneous only if it has given up trying to fetch it.
This specification does not currently say whether or how to check the MIME types of the media resources, or whether or how to perform file type sniffing using the actual file data. Implementors differ in their intentions on this matter and it is therefore unclear what the right solution is. In the absence of any requirement here, the HTTP specification's strict requirement to follow the Content-Type header prevails ("Content-Type specifies the media type of the underlying data." ... "If and only if the media type is not given by a Content-Type field, the recipient MAY attempt to guess the media type via inspection of its content and/or the name extension(s) of the URI used to identify the resource.").
The networking task source tasks to process the data as it is being fetched must, when appropriate, include the relevant substeps from the following list:
DNS errors, HTTP 4xx and 5xx errors (and equivalents in other protocols), and other fatal network errors that occur before the user agent has established whether the current media resource is usable, as well as the file using an unsupported container format, or using unsupported codecs for all the data, must cause the user agent to execute the following steps:
The user agent should cancel the fetching process.
Abort this subalgorithm, returning to the resource selection algorithm.
Create an AudioTrack object to represent the
audio track.
Update the media element's audioTracks attribute's
AudioTrackList object with the new
AudioTrack object.
Fire an event with the name addtrack, that does not bubble and
is not cancelable, and that uses the TrackEvent
interface, with the track attribute initialized
to the new AudioTrack object, at this
AudioTrackList object.
Create a VideoTrack object to represent the
video track.
Update the media element's videoTracks attribute's
VideoTrackList object with the new
VideoTrack object.
Fire an event with the name addtrack, that does not bubble and
is not cancelable, and that uses the TrackEvent
interface, with the track attribute initialized
to the new VideoTrack object, at this
VideoTrackList object.
This indicates that the resource is usable. The user agent must follow these substeps:
Establish the media timeline for the purposes of the current playback position, the earliest possible position, and the initial playback position, based on the media data.
Update the timeline offset to the date and time that corresponds to the zero time in the media timeline established in the previous step, if any. If no explicit time and date is given by the media resource, the timeline offset must be set to Not-a-Number (NaN).
Set the current playback position and the official playback position to the earliest possible position.
Update the duration
attribute with the time of the last frame of the resource, if
known, on the media timeline established above.
If it is not known (e.g. a stream that is in principle
infinite), update the duration attribute to the
value positive Infinity.
The user agent will queue a task to
fire a simple event named durationchange at the
element at this point.
For video elements, set the videoWidth and videoHeight
attributes.
Set the readyState attribute to
HAVE_METADATA.
A loadedmetadata DOM
event will be fired as part
of setting the readyState attribute to a
new value.
Let jumped be false.
If the media element's default playback start position is greater than zero, then seek to that time, and let jumped be true.
Let the media element's default playback start position be zero.
If either the media resource or the address of the current media resource indicate a particular start time, then set the initial playback position to that time and, if jumped is still false, seek to that time and let jumped be true.
For example, with media formats that support the Media Fragments URI fragment identifier syntax, the fragment identifier can be used to indicate a start position. [MEDIAFRAG]
If either the media resource or the address of
the current media resource indicate a
particular set of audio or video tracks to enable, then the
selected audio tracks must be enabled in the element's audioTracks object, and,
of the selected video tracks, the one that is listed first in
the element's videoTracks object must
be selected.
If the media element has a current media controller, then: if jumped is true and the initial playback position, relative to the current media controller's timeline, is greater than the current media controller's media controller position, then seek the media controller to the media element's initial playback position, relative to the current media controller's timeline; otherwise, seek the media element to the media controller position, relative to the media element's timeline.
Once the readyState attribute
reaches HAVE_CURRENT_DATA,
after the loadeddata event has been
fired, set the element's delaying-the-load-event
flag to false. This stops delaying the load event.
A user agent that is attempting to reduce
network usage while still fetching the metadata for each
media resource would also stop buffering at this
point, following the rules
described previously, which involve the networkState attribute
switching to the NETWORK_IDLE value and a
suspend event firing.
The user agent is required to determine the duration of the media resource and go through this step before playing.
Fire a simple event named progress at the media
element.
Set the networkState to NETWORK_IDLE and
fire a simple event named suspend at the media
element.
If the user agent ever discards any media data
and then needs to resume the network activity to obtain it
again, then it must queue a task to set the networkState to NETWORK_LOADING.
If the user agent can keep the media resource loaded, then the algorithm will continue to its final step below, which aborts the algorithm.
Fatal network errors that occur after the user agent has
established whether the current media
resource is usable (i.e. once the media
element's readyState attribute is no
longer HAVE_NOTHING)
must cause the user agent to execute the following steps:
The user agent should cancel the fetching process.
Set the error
attribute to a new MediaError object whose code attribute is set to
MEDIA_ERR_NETWORK.
Fire a simple event named error at the media
element.
Set the element's networkState attribute to
the NETWORK_IDLE
value.
Set the element's delaying-the-load-event flag to false. This stops delaying the load event.
Abort the overall resource selection algorithm.
Fatal errors in decoding the media data that occur after the user agent has established whether the current media resource is usable must cause the user agent to execute the following steps:
The user agent should cancel the fetching process.
Set the error
attribute to a new MediaError object whose code attribute is set to
MEDIA_ERR_DECODE.
Fire a simple event named error at the media
element.
If the media element's readyState attribute has a
value equal to HAVE_NOTHING, set the
element's networkState attribute to
the NETWORK_EMPTY
value and fire a simple event named emptied at the element.
Otherwise, set the element's networkState attribute to
the NETWORK_IDLE
value.
Set the element's delaying-the-load-event flag to false. This stops delaying the load event.
Abort the overall resource selection algorithm.
The fetching process is aborted by the user, e.g. because the
user navigated the browsing context to another page, the user
agent must execute the following steps. These steps are not
followed if the load()
method itself is invoked while these steps are running, as the
steps above handle that particular kind of abort.
The user agent should cancel the fetching process.
Set the error
attribute to a new MediaError object whose code attribute is set to
MEDIA_ERR_ABORTED.
Fire a simple event named abort at the media
element.
If the media element's readyState attribute has a
value equal to HAVE_NOTHING, set the
element's networkState attribute to
the NETWORK_EMPTY
value and fire a simple event named emptied at the element.
Otherwise, set the element's networkState attribute to
the NETWORK_IDLE
value.
Set the element's delaying-the-load-event flag to false. This stops delaying the load event.
Abort the overall resource selection algorithm.
The server returning data that is partially usable but cannot be optimally rendered must cause the user agent to render just the bits it can handle, and ignore the rest.
If the media data is CORS-same-origin, run the steps to expose a media-resource-specific text track with the relevant data.
Cross-origin videos do not expose their subtitles, since that would allow attacks such as hostile sites reading subtitles from confidential videos on a user's intranet.
When the networking task source has queued the last task as part of fetching the media resource (i.e. once the download has completed), if the fetching process completes without errors, including decoding the media data, and if all of the data is available to the user agent without network access, then, the user agent must move on to the next step. This might never happen, e.g. when streaming an infinite resource such as Web radio, or if the resource is longer than the user agent's ability to cache data.
While the user agent might still need network access to obtain parts of the media resource, the user agent must remain on this step.
For example, if the user agent has discarded
the first half of a video, the user agent will remain at this step
even once the playback has
ended, because there is always the chance the user will
seek back to the start. In fact, in this situation, once playback has ended, the user agent
will end up firing a suspend event, as described
earlier.
If the user agent ever reaches this step (which can only happen if the entire resource gets loaded and kept available): abort the overall resource selection algorithm.
The preload
attribute is an enumerated attribute. The following
table lists the keywords and states for the attribute — the
keywords in the left column map to the states in the cell in the
second column on the same row as the keyword. The attribute can be
changed even once the media resource is being buffered
or played; the descriptions in the table below are to be interpreted
with that in mind.
| Keyword | State | Brief description |
|---|---|---|
none
| None | Hints to the user agent that either the author does not expect the user to need the media resource, or that the server wants to minimise unnecessary traffic. This state does not provide a hint regarding how aggressively to actually download the media resource if buffering starts anyway (e.g. once the user hits "play"). |
metadata
| Metadata | Hints to the user agent that the author does not expect the user to need the media resource, but that fetching the resource metadata (dimensions, first frame, track list, duration, etc) is reasonable. If the user agent precisely fetches no more than the metadata, then the media element will end up with its readyState attribute set to HAVE_METADATA; typically though, some frames will be obtained as well and it will probably be HAVE_CURRENT_DATA or HAVE_FUTURE_DATA.
When the media resource is playing, hints to the user agent that bandwidth is to be considered scarce, e.g. suggesting throttling the download so that the media data is obtained at the slowest possible rate that still maintains consistent playback.
|
auto
| Automatic | Hints to the user agent that the user agent can put the user's needs first without risk to the server, up to and including optimistically downloading the entire resource. |
The empty string is also a valid keyword, and maps to the Automatic state. The attribute's missing value default is user-agent defined, though the Metadata state is suggested as a compromise between reducing server load and providing an optimal user experience.
Authors might switch the attribute from "none" or "metadata" to "auto" dynamically once the
user begins playback. For example, on a page with many videos this
might be used to indicate that the many videos are not to be
downloaded unless requested, but that once one is requested
it is to be downloaded aggressively.
The preload attribute is
intended to provide a hint to the user agent about what the author
thinks will lead to the best user experience. The attribute may be
ignored altogether, for example based on explicit user preferences
or based on the available connectivity.
The preload IDL
attribute must reflect the content attribute of the
same name, limited to only known values.
The autoplay attribute can override
the preload attribute (since
if the media plays, it naturally has to buffer first, regardless of
the hint given by the preload attribute). Including
both is not an error, however.
bufferedReturns a TimeRanges object that represents the
ranges of the media resource that the user agent has
buffered.
The buffered
attribute must return a new static normalized
TimeRanges object that represents the ranges of
the media resource, if any, that the user agent has
buffered, at the time the attribute is evaluated. Users agents must
accurately determine the ranges available, even for media streams
where this can only be determined by tedious inspection.
Typically this will be a single range anchored at the zero point, but if, e.g. the user agent uses HTTP range requests in response to seeking, then there could be multiple ranges.
User agents may discard previously buffered data.
Thus, a time position included within a range of the
objects return by the buffered attribute at one time can
end up being not included in the range(s) of objects returned by the
same attribute at later times.
durationReturns the length of the media resource, in seconds, assuming that the start of the media resource is at time zero.
Returns NaN if the duration isn't available.
Returns Infinity for unbounded streams.
currentTime [ = value ]Returns the official playback position, in seconds.
Can be set, to seek to the given time.
Will throw an InvalidStateError exception if there
is no selected media resource
or if there is a current media controller.
initialTimeReturns the initial playback position, that is, time to which the media resource was automatically seeked when it was loaded. Returns zero if the initial playback position is still unknown.
A media resource has a media timeline that maps times (in seconds) to positions in the media resource. The origin of a timeline is its earliest defined position. The duration of a timeline is its last defined position.
Establishing the media timeline: If the media
resource somehow specifies an explicit timeline whose origin
is not negative, then the media timeline should be that
timeline. (Whether the media resource can specify a
timeline or not depends on the media
resource's format.) If the media resource
specifies an explicit start time and date, then that time
and date should be considered the zero point in the media
timeline; the timeline offset will be the time
and date, exposed using the startOffsetTime
attribute.
If the media resource has a discontinuous timeline, the user agent must extend the timeline used at the start of the resource across the entire resource, so that the media timeline of the media resource increases linearly starting from the earliest possible position (as defined below), even if the underlying media data has out-of-order or even overlapping time codes.
For example, if two clips have been concatenated into one video file, but the video format exposes the original times for the two clips, the video data might expose a timeline that goes, say, 00:15..00:29 and then 00:05..00:38. However, the user agent would not expose those times; it would instead expose the times as 00:15..00:29 and 00:29..01:02, as a single video.
In the absence of an explicit timeline, the zero time on the media timeline should correspond to the first frame of the media resource. For static audio and video files this is generally trivial. For streaming resources, if the user agent will be able to seek to an earlier point than the first frame originally provided by the server, then the zero time should correspond to the earliest seekable time of the media resource; otherwise, it should correspond to the first frame received from the server (the point in the media resource at which the user agent began receiving the stream).
Another example would be a stream that carries a
video with several concatenated fragments, broadcast by a server
that does not allow user agents to request specific times but
instead just streams the video data in a predetermined order. If a
user agent connects to this stream and receives fragments defined as
covering timestamps 2010-03-20 23:15:00 UTC to 2010-03-21 00:05:00
UTC and 2010-02-12 14:25:00 UTC to 2010-02-12 14:35:00 UTC, it would
expose this with a media timeline starting at 0s and
extending to 3,600s (one hour). Assuming the streaming server
disconnected at the end of the second clip, the duration attribute would then
return 3,600. The startOffsetTime attribute
would return a Date object with a time corresponding to
2010-03-20 23:15:00 UTC. However, if a different user agent
connected five minutes later, it would (presumably) receive
fragments covering timestamps 2010-03-20 23:20:00 UTC to 2010-03-21
00:05:00 UTC and 2010-02-12 14:25:00 UTC to 2010-02-12 14:35:00 UTC,
and would expose this with a media timeline starting at
0s and extending to 3,300s (fifty five minutes). In this case, the
startOffsetTime
attribute would return a Date object with a time
corresponding to 2010-03-20 23:20:00 UTC.
In any case, the user agent must ensure that the earliest possible position (as defined below) using the established media timeline, is greater than or equal to zero.
The media timeline also has an associated clock. Which clock is used is user-agent defined, and may be media resource-dependent, but it should approximate the user's wall clock.
All the media elements that share current media controller use the same clock for their media timeline.
Media elements have a current playback position, which must initially (i.e. in the absence of media data) be zero seconds. The current playback position is a time on the media timeline.
Media elements also have an official playback position, which must initially be set to zero seconds. The official playback position is an approximation of the current playback position that is kept stable while scripts are running.
Media elements also have a default playback start position, which must initially be set to zero seconds. This time is used to allow the element to be seeked even before the media is loaded.
The currentTime
attribute must, on getting, return the media element's
default playback start position, unless that is zero,
in which case it must return the element's official playback
position. The returned value must be expressed in seconds. On
setting, if the media element has a current media
controller, then the user agent must throw an
InvalidStateError exception; otherwise, if the
media element's readyState is HAVE_NOTHING, then it must set
the media element's default playback start
position to the new value; otherwise, it must set the
official playback position to the new value and then
seek to the new value. The new
value must be interpreted as being in seconds.
Media elements have an initial playback position, which must initially (i.e. in the absence of media data) be zero seconds. The initial playback position is updated when a media resource is loaded. The initial playback position is a time on the media timeline.
The initialTime
attribute must, on getting, return the initial playback
position, expressed in seconds.
If the media resource is a streaming resource, then the user agent might be unable to obtain certain parts of the resource after it has expired from its buffer. Similarly, some media resources might have a media timeline that doesn't start at zero. The earliest possible position is the earliest position in the stream or resource that the user agent can ever obtain again. It is also a time on the media timeline.
The earliest possible position is not
explicitly exposed in the API; it corresponds to the start time of
the first range in the seekable attribute's
TimeRanges object, if any, or the current
playback position otherwise.
When the earliest possible position changes, then:
if the current playback position is before the
earliest possible position, the user agent must seek to the earliest possible
position; otherwise, if the user agent has not fired a timeupdate event at the
element in the past 15 to 250ms and is not still running event
handlers for such an event, then the user agent must queue a
task to fire a simple event named timeupdate at the element.
Because of the above requirement and the requirement in the resource fetch algorithm that kicks in when the metadata of the clip becomes known, the current playback position can never be less than the earliest possible position.
The duration
attribute must return the time of the end of the media
resource, in seconds, on the media timeline. If
no media data is available, then the attributes must
return the Not-a-Number (NaN) value. If the media
resource is not known to be bounded (e.g. streaming radio, or
a live event with no announced end time), then the attribute must
return the positive Infinity value.
The user agent must determine the duration of the media
resource before playing any part of the media
data and before setting readyState to a value equal to
or greater than HAVE_METADATA, even if doing
so requires fetching multiple parts of the resource.
When the length of the media
resource changes to a known value (e.g. from being unknown to
known, or from a previously established length to a new length) the
user agent must queue a task to fire a simple
event named durationchange at the
media element. (The event is not fired when the
duration is reset as part of loading a new media resource.) If the
duration is changed such that the current playback
position ends up being greater than the time of the end of
the media resource, then the user agent must also seek the to the time of the end of the
media resource.
If an "infinite" stream ends for some reason,
then the duration would change from positive Infinity to the time of
the last frame or sample in the stream, and the durationchange event would
be fired. Similarly, if the user agent initially estimated the
media resource's duration instead of determining it
precisely, and later revises the estimate based on new information,
then the duration would change and the durationchange event would
be fired.
Some video files also have an explicit date and time corresponding to the zero time in the media timeline, known as the timeline offset. Initially, the timeline offset must be set to Not-a-Number (NaN).
The startOffsetTime
attribute must return a new
Date object representing the current
timeline offset.
The loop
attribute is a boolean attribute that, if specified,
indicates that the media element is to seek back to the
start of the media resource upon reaching the end.
The loop attribute has no
effect while the element has a current media
controller.
The loop IDL
attribute must reflect the content attribute of the
same name.
readyStateReturns a value that expresses the current state of the element with respect to rendering the current playback position, from the codes in the list below.
Media elements have a ready state, which describes to what degree they are ready to be rendered at the current playback position. The possible values are as follows; the ready state of a media element at any particular time is the greatest value describing the state of the element:
HAVE_NOTHING (numeric value 0)networkState
attribute are set to NETWORK_EMPTY are always in
the HAVE_NOTHING
state.HAVE_METADATA (numeric value 1)video
element, the dimensions of the video are also available. The API
will no longer throw an exception when seeking. No media
data is available for the immediate current playback
position.HAVE_CURRENT_DATA (numeric value 2)HAVE_METADATA state, or
there is no more data to obtain in the direction of
playback. For example, in video this corresponds to the user
agent having data from the current frame, but not the next frame,
when the current playback position is at the end of
the current frame; and to when playback has ended.HAVE_FUTURE_DATA (numeric value 3)HAVE_METADATA
state, and the text tracks are ready. For example, in
video this corresponds to the user agent having data for at least
the current frame and the next frame when the current
playback position is at the instant in time between the two
frames, or to the user agent having the video data for the current
frame and audio data to keep playing at least a little when the
current playback position is in the middle of a frame.
The user agent cannot be in this state if playback has ended, as the current playback
position can never advance in this case.HAVE_ENOUGH_DATA (numeric value 4)HAVE_FUTURE_DATA state
are met, and, in addition, the user agent estimates that data is
being fetched at a rate where the current playback
position, if it were to advance at the effective
playback rate, would not overtake the available data before
playback reaches the end of the media resource.In practice, the difference between HAVE_METADATA and HAVE_CURRENT_DATA is
negligible. Really the only time the difference is relevant is when
painting a video element onto a canvas,
where it distinguishes the case where something will be drawn (HAVE_CURRENT_DATA or
greater) from the case where nothing is drawn (HAVE_METADATA or less).
Similarly, the difference between HAVE_CURRENT_DATA (only
the current frame) and HAVE_FUTURE_DATA (at least
this frame and the next) can be negligible (in the extreme, only one
frame). The only time that distinction really matters is when a page
provides an interface for "frame-by-frame" navigation.
When the ready state of a media element whose networkState is not NETWORK_EMPTY changes, the
user agent must follow the steps given below:
Apply the first applicable set of substeps from the following list:
HAVE_NOTHING, and the new
ready state is HAVE_METADATAQueue a task to fire a simple event
named loadedmetadata at the
element.
Before this task is run, as part of the event
loop mechanism, the rendering will have been updated to resize
the video element if appropriate.
HAVE_METADATA and
the new ready state is HAVE_CURRENT_DATA or
greaterIf this is the first time this occurs for
this media element since the load() algorithm was last invoked,
the user agent must queue a task to fire a
simple event named loadeddata at the element.
If the new ready state is HAVE_FUTURE_DATA or
HAVE_ENOUGH_DATA,
then the relevant steps below must then be run also.
HAVE_FUTURE_DATA or more,
and the new ready state is HAVE_CURRENT_DATA or
lessIf the media
element was potentially playing before its
readyState attribute
changed to a value lower than HAVE_FUTURE_DATA, and
the element has not ended playback, and playback
has not stopped due to errors, paused for
user interaction, or paused for in-band
content, the user agent must queue a task to
fire a simple event named timeupdate at the element,
and queue a task to fire a simple
event named waiting at the element.
HAVE_CURRENT_DATA or
less, and the new ready state is HAVE_FUTURE_DATAThe user agent must queue a task to fire a
simple event named canplay.
If the element's paused
attribute is false, the user agent must queue a task
to fire a simple event named playing.
HAVE_ENOUGH_DATAIf the previous ready state was HAVE_CURRENT_DATA or
less, the user agent must queue a task to fire
a simple event named canplay, and, if the element's
paused attribute is false,
queue a task to fire a simple event
named playing.
If the autoplaying flag is true, and the paused attribute is true, and the
media element has an autoplay attribute specified,
and the media element's Document's
browsing context did not have the sandboxed
automatic features browsing context flag set when the
Document was created, then the user agent may also
set the paused attribute to
false, queue a task to fire a simple
event named play, and
queue a task to fire a simple event
named playing.
User agents do not need to support autoplay,
and it is suggested that user agents honor user preferences on the
matter. Authors are urged to use the autoplay attribute rather than
using script to force the video to play, so as to allow the user
to override the behavior if so desired.
In any case, the user agent must finally queue a
task to fire a simple event named canplaythrough.
If the media element has a current media controller, then report the controller state for the media element's current media controller.
It is possible for the ready state of a media
element to jump between these states discontinuously. For example,
the state of a media element can jump straight from HAVE_METADATA to HAVE_ENOUGH_DATA without
passing through the HAVE_CURRENT_DATA and
HAVE_FUTURE_DATA
states.
The readyState IDL
attribute must, on getting, return the value described above that
describes the current ready state of the media
element.
The autoplay
attribute is a boolean attribute. When present, the
user agent (as described in the algorithm
described herein) will automatically begin playback of the
media resource as soon as it can do so without
stopping.
Authors are urged to use the autoplay attribute rather than
using script to trigger automatic playback, as this allows the user
to override the automatic playback when it is not desired, e.g. when
using a screen reader. Authors are also encouraged to consider not
using the automatic playback behavior at all, and instead to let the
user agent wait for the user to start playback explicitly.
The autoplay
IDL attribute must reflect the content attribute of the
same name.
pausedReturns true if playback is paused; false otherwise.
endedReturns true if playback has reached the end of the media resource.
defaultPlaybackRate [ = value ]Returns the default rate of playback, for when the user is not fast-forwarding or reversing through the media resource.
Can be set, to change the default rate of playback.
The default rate has no direct effect on playback, but if the user switches to a fast-forward mode, when they return to the normal playback mode, it is expected that the rate of playback will be returned to the default rate of playback.
When the element has a current media controller,
the defaultPlaybackRate
attribute is ignored and the current media
controller's defaultPlaybackRate
is used instead.
playbackRate [ = value ]Returns the current rate playback, where 1.0 is normal speed.
Can be set, to change the rate of playback.
When the element has a current media controller,
the playbackRate
attribute is ignored and the current media
controller's playbackRate is
used instead.
playedReturns a TimeRanges object that represents the
ranges of the media resource that the user agent has
played.
play()Sets the paused attribute
to false, loading the media resource and beginning
playback if necessary. If the playback had ended, will restart it
from the start.
pause()Sets the paused attribute
to true, loading the media resource if necessary.
The paused
attribute represents whether the media element is
paused or not. The attribute must initially be true.
A media element is a blocked media
element if its readyState attribute is in the
HAVE_NOTHING state, the
HAVE_METADATA state, or
the HAVE_CURRENT_DATA state,
or if the element has paused for user interaction or
paused for in-band content.
A media element is said to be potentially
playing when its paused
attribute is false, the element has not ended playback,
playback has not stopped due to errors,
the element either has no current media controller or
has a current media controller but is not blocked
on its media controller,
and the element is not a blocked media element.
A waiting
DOM event can be fired as a
result of an element that is potentially playing
stopping playback due to its readyState attribute changing to
a value lower than HAVE_FUTURE_DATA.
A media element is said to have ended playback when:
readyState attribute is HAVE_METADATA or greater,
and
Either:
loop attribute specified,
or the media element has a current media
controller.
Or:
The ended
attribute must return true if, the last time the event
loop reached step 1, the media element had
ended playback and the direction of
playback was forwards, and false otherwise.
A media element is said to have stopped due to
errors when the element's readyState attribute is HAVE_METADATA or greater, and
the user agent encounters a
non-fatal error during the processing of the media
data, and due to that error, is not able to play the content
at the current playback position.
A media element is said to have paused for user
interaction when its paused attribute is false, the readyState attribute is either
HAVE_FUTURE_DATA or
HAVE_ENOUGH_DATA and
the user agent has reached a point in the media
resource where the user has to make a selection for the
resource to continue.
If the media element has a current media
controller when this happens, then the user agent must
report the controller state for the media
element's current media controller. If the
media element has a current media
controller when the user makes a selection, allowing playback
to resume, the user agent must similarly report the controller
state for the media element's current
media controller.
It is possible for a media element to have both ended playback and paused for user interaction at the same time.
When a media element that is potentially
playing stops playing because it has paused for user
interaction, the user agent must queue a task to
fire a simple event named timeupdate at the element.
A media element is said to have paused for
in-band content when its paused attribute is false, the readyState attribute is either
HAVE_FUTURE_DATA or
HAVE_ENOUGH_DATA and
the user agent has suspended playback of the media
resource in order to play content that is temporally anchored
to the media resource and has a non-zero length, or to
play content that is temporally anchored to a segment of the
media resource but has a length longer than that
segment. If the media element has a current media
controller when this happens, then the user agent must
report the controller state for the media
element's current media controller. If the
media element has a current media
controller when the user agent unsuspends playback, the user
agent must similarly report the controller state for
the media element's current media
controller.
One example of when a media element would be paused for in-band content is when the user agent is playing audio descriptions from an external WebVTT file, and the synthesized speech generated for a cue is longer than the time between the text track cue start time and the text track cue end time.
When the current playback position reaches the end of the media resource when the direction of playback is forwards, then the user agent must follow these steps:
If the media element has a loop attribute specified
and does not have a current media controller,
then seek to the earliest
possible position of the media resource and
abort these steps.
As defined above, the ended IDL attribute starts returning
true once the event loop's current task ends.
Queue a task to fire a simple
event named timeupdate at the media
element.
Queue a task that, if the media
element does not have a current media
controller, and the media element has still
ended playback, and the direction of
playback is still forwards, and paused is false, changes paused to true and fires a simple event named pause at the media
element.
Queue a task to fire a simple
event named ended at
the media element.
If the media element has a current media controller, then report the controller state for the media element's current media controller.
When the current playback position reaches the
earliest possible position of the media
resource when the direction of playback is
backwards, then the user agent must only queue a task
to fire a simple event named timeupdate at the element.
The defaultPlaybackRate
attribute gives the desired speed at which the media
resource is to play, as a multiple of its intrinsic
speed. The attribute is mutable: on getting it must return the last
value it was set to, or 1.0 if it hasn't yet been set; on setting
the attribute must be set to the new value.
The defaultPlaybackRate is
used by the user agent when it exposes a user interface to the user.
The playbackRate
attribute gives the effective playback rate
(assuming there is no current media controller overriding it),
which is the speed at which the media resource plays,
as a multiple of its intrinsic speed. If it is not equal to the
defaultPlaybackRate,
then the implication is that the user is using a feature such as
fast forward or slow motion playback. The attribute is mutable: on
getting it must return the last value it was set to, or 1.0 if it
hasn't yet been set; on setting the attribute must be set to the new
value, and the playback will change speed
(if the element is potentially playing and there is no
current media controller).
When the defaultPlaybackRate or
playbackRate attributes
change value (either by being set by script or by being changed
directly by the user agent, e.g. in response to user control) the
user agent must queue a task to fire a simple
event named ratechange at the media
element.
The defaultPlaybackRate and
playbackRate attributes
have no effect when the media element has a
current media controller; the namesake attributes on
the MediaController object are used instead in that
situation.
The played
attribute must return a new static normalized
TimeRanges object that represents the ranges of
the media resource, if any, that the user agent has so
far rendered, at the time the attribute is evaluated.
When the play()
method on a media element is invoked, the user agent
must run the following steps.
If the media element's networkState attribute has
the value NETWORK_EMPTY, invoke the
media element's resource selection
algorithm.
If the playback has ended and the direction of playback is forwards, and the media element does not have a current media controller, seek to the earliest possible position of the media resource.
This will cause the user
agent to queue a task to fire a simple
event named timeupdate at the
media element.
If the media element has a current media controller, then bring the media element up to speed with its new media controller.
If the media element's paused attribute is true, run
the following substeps:
Change the value of paused to false.
Queue a task to fire a simple event
named play at the element.
If the media element's readyState attribute has the
value HAVE_NOTHING,
HAVE_METADATA, or
HAVE_CURRENT_DATA,
queue a task to fire a simple event
named waiting at the
element.
Otherwise, the media element's readyState attribute has the
value HAVE_FUTURE_DATA or
HAVE_ENOUGH_DATA:
queue a task to fire a simple event
named playing at the
element.
Set the media element's autoplaying flag to false.
If the media element has a current media controller, then report the controller state for the media element's current media controller.
When the pause()
method is invoked, and when the user agent is required to pause the
media element, the user agent must run the following
steps:
If the media element's networkState attribute has
the value NETWORK_EMPTY, invoke the
media element's resource selection
algorithm.
Set the media element's autoplaying flag to false.
If the media element's paused attribute is false, run the
following steps:
Change the value of paused to true.
Queue a task to fire a simple
event named timeupdate at the
element.
Queue a task to fire a simple
event named pause
at the element.
Set the official playback position to the current playback position.
If the media element has a current media controller, then report the controller state for the media element's current media controller.
The
effective playback rate is not necessarily the element's
playbackRate. When a
media element has a current media
controller, its effective playback rate is the
MediaController's media controller playback
rate. Otherwise, the
effective playback rate is just the element's playbackRate.
Thus, the current media controller overrides the
media element.
If the effective playback rate is positive or zero, then the direction of playback is forwards. Otherwise, it is backwards.
When a media element is
potentially playing and its Document is a
fully active Document, its current
playback position must increase monotonically at
effective playback rate units of media time per unit time
of the media timeline's clock.
The effective playback rate can be 0.0,
in which case the current playback position doesn't
move, despite playback not being paused (paused doesn't become true, and the
pause event doesn't
fire).
This specification doesn't define how the user agent achieves the appropriate playback rate — depending on the protocol and media available, it is plausible that the user agent could negotiate with the server to have the server provide the media data at the appropriate rate, so that (except for the period between when the rate is changed and when the server updates the stream's playback rate) the client doesn't actually have to drop or interpolate any frames.
Any time the user agent provides a stable state, the official playback position must be set to the current playback position.
When the direction of playback is backwards, any corresponding audio must be muted. When the effective playback rate is so low or so high that the user agent cannot play audio usefully, the corresponding audio must also be muted. If the effective playback rate is not 1.0, the user agent may apply pitch adjustments to the audio as necessary to render it faithfully.
Media elements that are
potentially playing while not in a
Document must not play any video, but should
play any audio component. Media elements must not stop playing just
because all references to them have been removed; only once a media
element is in a state where no further audio could ever be played by
that element may the element be garbage collected.
It is possible for an element to which no explicit references exist to play audio, even if such an element is not still actively playing: for instance, it could have a current media controller that still has references and can still be unpaused, or it could be unpaused but stalled waiting for content to buffer.
When the current playback position of a media element changes (e.g. due to playback or seeking), the user agent must run the following steps. If the current playback position changes while the steps are running, then the user agent must wait for the steps to complete, and then must immediately rerun the steps. (These steps are thus run as often as possible or needed — if one iteration takes a long time, this can cause certain cues to be skipped over as the user agent rushes ahead to "catch up".)
Let current cues be a list of cues, initialized to contain all the cues of all the hidden, showing, or showing by default text tracks of the media element (not the disabled ones) whose start times are less than or equal to the current playback position and whose end times are greater than the current playback position.
Let other cues be a list of cues, initialized to contain all the cues of hidden, showing, and showing by default text tracks of the media element that are not present in current cues.
Let last time be the current playback position at the time this algorithm was last run for this media element, if this is not the first time it has run.
If the current playback position has, since the last time this algorithm was run, only changed through its usual monotonic increase during normal playback, then let missed cues be the list of cues in other cues whose start times are greater than or equal to last time and whose end times are less than or equal to the current playback position. Otherwise, let missed cues be an empty list.
If the time was reached through the usual monotonic increase
of the current playback position during normal
playback, and if the user agent has not fired a timeupdate event at the
element in the past 15 to 250ms and is not still running event
handlers for such an event, then the user agent must queue a
task to fire a simple event named timeupdate at the element.
(In the other cases, such as explicit seeks, relevant events get
fired as part of the overall process of changing the current
playback position.)
The event thus is not to be fired faster than about 66Hz or slower than 4Hz (assuming the event handlers don't take longer than 250ms to run). User agents are encouraged to vary the frequency of the event based on the system load and the average cost of processing the event each time, so that the UI updates are not any more frequent than the user agent can comfortably handle while decoding the video.
If all of the cues in current cues have their text track cue active flag set, none of the cues in other cues have their text track cue active flag set, and missed cues is empty, then abort these steps.
If the time was reached through the usual monotonic increase of the current playback position during normal playback, and there are cues in other cues that have their text track cue pause-on-exit flag set and that either have their text track cue active flag set or are also in missed cues, then immediately pause the media element.
In the other cases, such as explicit seeks, playback is not paused by going past the end time of a cue, even if that cue has its text track cue pause-on-exit flag set.
Let events be a list of tasks, initially empty. Each task in this list will be associated with a text track, a text track cue, and a time, which are used to sort the list before the tasks are queued.
Let affected tracks be a list of text tracks, initially empty.
When the steps below say to prepare an event named event for a text track cue target with a time time, the user agent must run these substeps:
Let track be the text track with which the text track cue target is associated.
Create a task to fire a simple event named event at target.
Add to the newly create task to events, associated with the time time, the text track track, and the text track cue target.
Add track to affected tracks.
For each text track cue
in missed cues, prepare an event
named enter for the
TextTrackCue object with the text track cue
start time.
For each text track cue
in other cues that either has its text
track cue active flag set or is in missed
cues, prepare an event named exit for the TextTrackCue
object with the text track cue end time.
For each text track cue
in current cues that does not have its
text track cue active flag set, prepare an
event named enter for the
TextTrackCue object with the text track cue
start time.
Sort the tasks in events in ascending time order (tasks with earlier times first).
Further sort tasks in events that have the same time by the relative text track cue order of the text track cues associated with these tasks.
Queue each task in events, in list order.
Sort affected tracks in the same order as the text tracks appear in the media element's list of text tracks, and remove duplicates.
For each text track in affected
tracks, in the list order, queue a task to
fire a simple event named cuechange at the
TextTrack object, and, if the text track
has a corresponding track element, to then fire
a simple event named cuechange at the track
element as well.
Set the text track cue active flag of all the cues in the current cues, and unset the text track cue active flag of all the cues in the other cues.
Run the rules for updating the text track rendering of each of the text tracks in affected tracks that are showing or showing by default. For example, for text tracks based on WebVTT, the rules for updating the display of WebVTT text tracks. [WEBVTT]
For the purposes of the algorithm above, a text track cue is considered to be part of a text track only if it is listed in the text track list of cues, not merely if it is associated with the text track.
If the media element's
Document stops being a fully active
document, then the playback will stop
until the document is active again.
When a media element is removed from a
Document, the user agent must run
the following steps:
Asynchronously await a stable state, allowing
the task that removed the
media element from the Document to
continue. The synchronous section consists of all the
remaining steps of this algorithm. (Steps in the synchronous
section are marked with ⌛.)
⌛ If the media element is in a
Document, abort these steps.
⌛ If the media element's networkState attribute has
the value NETWORK_EMPTY, abort these
steps.
⌛ Pause the media element.
seekingReturns true if the user agent is currently seeking.
seekableReturns a TimeRanges object that represents the
ranges of the media resource to which it is possible
for the user agent to seek.
The seeking
attribute must initially have the value false.
When the user agent is required to seek to a particular new playback position in the media resource, it means that the user agent must run the following steps. This algorithm interacts closely with the event loop mechanism; in particular, it has a synchronous section (which is triggered as part of the event loop algorithm). Steps in that section are marked with ⌛.
If the media element's readyState is HAVE_NOTHING, abort these
steps.
If the element's seeking IDL attribute is true,
then another instance of this algorithm is already running. Abort
that other instance of the algorithm without waiting for the step
that it is running to complete.
Set the seeking IDL
attribute to true.
If the seek was in response to a DOM method call or setting of an IDL attribute, then continue the script. The remainder of these steps must be run asynchronously. With the exception of the steps marked with ⌛, they could be aborted at any time by another instance of this algorithm being invoked.
If the new playback position is later than the end of the media resource, then let it be the end of the media resource instead.
If the new playback position is less than the earliest possible position, let it be that position instead.
If the (possibly now changed) new playback
position is not in one of the ranges given in the seekable attribute, then let it
be the position in one of the ranges given in the seekable attribute that is the
nearest to the new playback position. If two
positions both satisfy that constraint (i.e. the new
playback position is exactly in the middle between two ranges
in the seekable attribute)
then use the position that is closest to the current playback
position. If there are no ranges given in the seekable attribute then set the
seeking IDL attribute to
false and abort these steps.
Queue a task to fire a simple
event named seeking
at the element.
Set the current playback position to the given new playback position.
If the media element was
potentially playing immediately before it started
seeking, but seeking caused its readyState attribute to change
to a value lower than HAVE_FUTURE_DATA, then a
waiting will be fired at the
element.
The currentTime attribute does
not get updated asynchronously, as it returns the official
playback position, not the current playback
position.
Wait until the user agent has established whether or not the media data for the new playback position is available, and, if it is, until it has decoded enough data to play back that position.
Await a stable state. The synchronous section consists of all the remaining steps of this algorithm. (Steps in the synchronous section are marked with ⌛.)
⌛ Set the seeking IDL attribute to
false.
⌛ Queue a task to
fire a simple event named timeupdate at the
element.
⌛ Queue a task to fire a simple
event named seeked
at the element.
The seekable
attribute must return a new static normalized
TimeRanges object that represents the ranges of
the media resource, if any, that the user agent is able
to seek to, at the time the attribute is evaluated.
If the user agent can seek to anywhere in the
media resource, e.g. because it is a simple movie file
and the user agent and the server support HTTP Range requests, then
the attribute would return an object with one range, whose start is
the time of the first frame (the earliest possible
position, typically zero), and whose end is the same as the
time of the first frame plus the duration attribute's value (which
would equal the time of the last frame, and might be positive
Infinity).
The range might be continuously changing, e.g. if the user agent is buffering a sliding window on an infinite stream. This is the behavior seen with DVRs viewing live TV, for instance.
Media resources might be internally scripted or interactive. Thus, a media element could play in a non-linear fashion. If this happens, the user agent must act as if the algorithm for seeking was used whenever the current playback position changes in a discontinuous fashion (so that the relevant events fire). If the media element has a current media controller, then the user agent must seek the media controller appropriately instead.
A media resource can have multiple embedded audio and video tracks. For example, in addition to the primary video and audio tracks, a media resource could have foreign-language dubbed dialogues, director's commentaries, audio descriptions, alternative angles, or sign-language overlays.
audioTracksReturns an AudioTrackList object representing
the audio tracks available in the media resource.
videoTracksReturns a VideoTrackList object representing
the video tracks available in the media resource.
The audioTracks
attribute of a media element must return a
live AudioTrackList object representing
the audio tracks available in the media element's
media resource. The same object must be returned each
time.
The videoTracks
attribute of a media element must return a
live VideoTrackList object
representing the video tracks available in the media
element's media resource. The same object must
be returned each time.
There are only ever one AudioTrackList
object and one VideoTrackList object per media
element, even if another media resource is
loaded into the element: the objects are reused. (The
AudioTrack and VideoTrack objects are
not, though.)
In this example, a script defines a function that takes a URL to a video and a reference to an element where the video is to be placed. That function then tries to load the video, and, once it is loaded, checks to see if there is a sign-language track available. If there is, it also displays that track. Both tracks are just placed in the given container; it's assumed that styles have been applied to make this work in a pretty way!
<script>
function loadVideo(url, container) {
var controller = new MediaController();
var video = document.createElement('video');
video.src = url;
video.autoplay = true;
video.controls = true;
video.controller = controller;
container.appendChild(video);
video.onloadedmetadata = function (event) {
for (var i = 0; i < video.videoTracks.length; i += 1) {
if (video.videoTracks[i].kind == 'sign') {
var sign = document.createElement('video');
sign.src = url + '#track=' + video.videoTracks[i].id;
sign.autoplay = true;
sign.controller = controller;
container.appendChild(sign);
return;
}
}
};
}
</script>
AudioTrackList and VideoTrackList objectsThe AudioTrackList and VideoTrackList
interfaces are used by attributes defined in the previous
section.
interface AudioTrackList : EventTarget { readonly attribute unsigned long length; getter AudioTrack (unsigned long index); AudioTrack? getTrackById(DOMString id); [TreatNonCallableAsNull] attribute Function? onchange; [TreatNonCallableAsNull] attribute Function? onaddtrack; }; interface AudioTrack { readonly attribute DOMString id; readonly attribute DOMString kind; readonly attribute DOMString label; readonly attribute DOMString language; attribute boolean enabled; }; interface VideoTrackList : EventTarget { readonly attribute unsigned long length; getter VideoTrack (unsigned long index); VideoTrack? getTrackById(DOMString id); readonly attribute long selectedIndex; [TreatNonCallableAsNull] attribute Function? onchange; [TreatNonCallableAsNull] attribute Function? onaddtrack; }; interface VideoTrack { readonly attribute DOMString id; readonly attribute DOMString kind; readonly attribute DOMString label; readonly attribute DOMString language; attribute boolean selected; };
audioTracks . lengthvideoTracks . lengthReturns the number of tracks in the list.
audioTracks[index]videoTracks[index]Returns the specified AudioTrack or VideoTrack object.
audioTracks . getTrackById( id )videoTracks . getTrackById( id )Returns the AudioTrack or VideoTrack object with the given identifier, or null if no track has that identifier.
ididReturns the ID of the given track. This is the ID that can be
used with a fragment identifier if the format supports the
Media Fragments URI syntax, and that can be used with
the getTrackById() method. [MEDIAFRAG]
kindkindReturns the category the given track falls into. The possible track categories are given below.
labellabelReturns the label of the given track, if known, or the empty string otherwise.
languagelanguageReturns the language of the given track, if known, or the empty string otherwise.
enabled [ = value ]Returns true if the given track is active, and false otherwise.
Can be set, to change whether the track is enabled or not. If multiple audio tracks are enabled simultaneously, they are mixed.
videoTracks . selectedIndexReturns the index of the currently selected track, if any, or −1 otherwise.
selected [ = value ]Returns true if the given track is active, and false otherwise.
Can be set, to change whether the track is selected or not. Either zero or one video track is selected; selecting a new track while a previous one is selected will unselect the previous one.
An AudioTrackList object represents a dynamic list
of zero or more audio tracks, of which zero or more can be enabled
at a time. Each audio track is represented by an
AudioTrack object.
A VideoTrackList object represents a dynamic list of
zero or more video tracks, of which zero or one can be selected at a
time. Each video track is represented by a VideoTrack
object.
Tracks in AudioTrackList and
VideoTrackList objects must be consistently ordered. If
the media resource is in a format that defines an
order, then that order must be used; otherwise, the order must be
the relative order in which the tracks are declared in the
media resource. The order used is called the natural
order of the list.
Each track in a TrackList thus has an
index; the first has the index 0, and each subsequent track is
numbered one higher than the previous one. If a media
resource dynamically adds or removes audio or video tracks,
then the indices of the tracks will change dynamically. If the
media resource changes entirely, then all the previous
tracks will be removed and replaced with new tracks.
The AudioTrackList.length
and VideoTrackList.length
attributes must return the number of tracks represented by their
objects at the time of getting.
The supported property indices of
AudioTrackList and VideoTrackList objects
at any instant are the numbers from zero to the number of tracks
represented by the respective object minus one, if any tracks are
represented. If an AudioTrackList or
VideoTrackList object represents no tracks, it has no
supported property indices.
To determine the value of an indexed property for a
given index index in an
AudioTrackList or VideoTrackList object
list, the user agent must return the
AudioTrack or VideoTrack object that
represents the indexth track in list.
The AudioTrackList.getTrackById(id) and VideoTrackList.getTrackById(id) methods must return the first
AudioTrack or VideoTrack object
(respectively) in the AudioTrack or
VideoTrack object (respectively) whose identifier is
equal to the value of the id argument (in the
natural order of the list, as defined above). When no tracks match
the given argument, the methods must return null.
The AudioTrack and VideoTrack objects
represent specific tracks of a media resource. Each
track can have an identifier, category, label, and language. These
aspects of a track are permanent for the lifetime of the track; even
if a track is removed from a media resource's
AudioTrackList or VideoTrackList objects,
those aspects do not change.
In addition, AudioTrack objects can each be enabled
or disabled; this is the audio track's enabled state. When an
AudioTrack is created, its enabled state must be
set to false (disabled). The resource fetch algorithm
can override this.
Similarly, a single VideoTrack object per
VideoTrackList object can be selected, this is the
video track's selection state. When a
VideoTrack is created, its selection state must
be set to false (not selected). The resource fetch algorithm
can override this.
The AudioTrack.id and VideTrack.id
attributes must return the identifier of the track, if it has one,
or the empty string otherwise. If the media resource is
in a format that supports the Media Fragments URI
fragment identifier syntax, the identifier returned for a particular
track must be the same identifier that would enable the track if
used as the name of a track in the track dimension of such a
fragment identifier. [MEDIAFRAG]
The AudioTrack.kind and
VideoTrack.kind
attributes must return the category of the track, if it has one, or
the empty string otherwise.
The category of a track is the string given in the first column
of the table below that is the most appropriate for the track based
on the definitions in the table's second and third columns, as
determined by the metadata included in the track in the media
resource. For Ogg files, the Role header of the track gives
the relevant metadata. The cell in the third column of a row says
what the category given in the cell in the first column of that row
applies to; a category is only appropriate for an audio track if it
applies to audio tracks, and a category is only appropriate for
video tracks if it applies to video tracks. Categories must only be
returned for AudioTrack objects if they are appropriate
for audio, and must only be returned for VideoTrack
objects if they are appropriate for video.
| Category | Definition | Applies to... | Examples |
|---|---|---|---|
"alternative"
| A possible alternative to the main track, e.g. a different take of a song (audio), or a different angle (video). | Audio and video. | Ogg: "audio/alternate" or "video/alternate". |
"description"
| An audio description of a video track. | Audio only. | Ogg: "audio/audiodesc". |
"main"
| The primary audio or video track. | Audio and video. | Ogg: "audio/main" or "video/main"; WebM: the "FlagDefault" element is set. |
"sign"
| A sign-language interpretation of an audio track. | Video only. | Ogg: "video/sign". |
"translation"
| A translated version of the main track. | Audio only. | Ogg: "audio/dub". |
"commentary"
| Commentary on the primary audio or video track, e.g. a director's commentary. | Audio and video. | No known formats expose this category at this time. |
"" (empty string)
| No explicit kind, or the kind given by the track's metadata is not recognised by the user agent. | Audio and video. | Any other track type or track role. |
The AudioTrack.label and
VideoTrack.label
attributes must return the label of the track, if it has one, or the
empty string otherwise.
The AudioTrack.language
and VideoTrack.language
attributes must return the BCP 47 language tag of the language of
the track, if it has one, or the empty string otherwise. If the user
agent is not able to express that language as a BCP 47 language tag
(for example because the language information in the media
resource's format is a free-form string without a defined
interpretation), then the method must return the empty string, as if
the track had no language.
The AudioTrack.enabled
attribute, on getting, must return true if the track is currently
enabled, and false otherwise. On setting, it must enable the track
if the new value is true, and disable it otherwise. (If the track is
no longer in an AudioTrackList object, then the track
being enabled or disabled has no effect beyond changing the value of
the attribute on the AudioTrack object.)
Whenever an audio track in an AudioTrackList is
enabled or disabled, the user agent must queue a task
to fire a simple event named change at the
AudioTrackList object.
The VideoTrackList.selectedIndex
attribute must return the index of the currently selected track, if
any. If the VideoTrackList object does not currently
represent any tracks, or if none of the tracks are selected, it must
instead return −1.
The VideoTrack.selected
attribute, on getting, must return true if the track is currently
selected, and false otherwise. On setting, it must select the track
if the new value is true, and unselect it otherwise. If the track is
in a VideoTrackList, then all the other
VideoTrack objects in that list must be unselected. (If
the track is no longer in a VideoTrackList object, then
the track being selected or unselected has no effect beyond changing
the value of the attribute on the VideoTrack
object.)
Whenever a track in a VideoTrackList that was
previously not selected is selected, the user agent must queue
a task to fire a simple event named change at the
VideoTrackList object.
The following are the event handlers (and their
corresponding event handler
event types) that must be supported, as IDL attributes, by
all objects implementing the AudioTrackList and
VideoTrackList interfaces:
| Event handler | Event handler event type |
|---|---|
onchange | change
|
onaddtrack | addtrack
|
The task source for the tasks listed in this section is the DOM manipulation task source.
The audioTracks and
videoTracks attributes
allow scripts to select which track should play, but it is also
possible to select specific tracks declaratively, by specifying
particular tracks in the fragment identifier of the URL
of the media resource. The format of the fragment
identifier depends on the MIME type of the media
resource. [RFC2046] [RFC3986]
In this example, a video that uses a format that supports the Media Fragments URI fragment identifier syntax is embedded in such a way that the alternative angles labeled "Alternative" are enabled instead of the default video track. [MEDIAFRAG]
<video src="myvideo#track=Alternative"></video>
Each media element can have a
MediaController. A MediaController is an
object that coordinates the playback of multiple media elements, for instance so that a sign-language
interpreter track can be overlaid on a video track, with the two
being kept in sync.
By default, a media element has no
MediaController. An implicit
MediaController can be assigned using the mediagroup content attribute.
An explicit MediaController can be assigned directly
using the controller IDL
attribute.
Media elements with a
MediaController are said to be slaved to their
controller. The MediaController modifies the playback
rate and the playback volume of each of the media elements slaved to it, and ensures that when
any of its slaved media elements
unexpectedly stall, the others are stopped at the same time.
When a media element is slaved to a
MediaController, its playback rate is fixed to that of
the other tracks in the same MediaController, and any
looping is disabled.
[Constructor] interface MediaController { readonly attribute TimeRanges buffered; readonly attribute TimeRanges seekable; readonly attribute double duration; attribute double currentTime; readonly attribute boolean paused; readonly attribute TimeRanges played; void play(); void pause(); attribute double defaultPlaybackRate; attribute double playbackRate; attribute double volume; attribute boolean muted; [TreatNonCallableAsNull] attribute Function? onemptied; [TreatNonCallableAsNull] attribute Function? onloadedmetadata; [TreatNonCallableAsNull] attribute Function? onloadeddata; [TreatNonCallableAsNull] attribute Function? oncanplay; [TreatNonCallableAsNull] attribute Function? oncanplaythrough; [TreatNonCallableAsNull] attribute Function? onplaying; [TreatNonCallableAsNull] attribute Function? onended; [TreatNonCallableAsNull] attribute Function? onwaiting; [TreatNonCallableAsNull] attribute Function? ondurationchange; [TreatNonCallableAsNull] attribute Function? ontimeupdate; [TreatNonCallableAsNull] attribute Function? onplay; [TreatNonCallableAsNull] attribute Function? onpause; [TreatNonCallableAsNull] attribute Function? onratechange; [TreatNonCallableAsNull] attribute Function? onvolumechange; };
MediaController()Returns a new MediaController object.
controller [ = controller ]Returns the current MediaController for the media element, if any; returns null otherwise.
Can be set, to set an explicit MediaController.
Doing so removes the mediagroup attribute, if
any.
bufferedReturns a TimeRanges object that represents the
intersection of the time ranges for which the user agent has all
relevant media data for all the slaved media elements.
seekableReturns a TimeRanges object that represents the
intersection of the time ranges into which the user agent can seek
for all the slaved media
elements.
durationReturns the difference between the earliest playable moment and the latest playable moment (not considering whether the data in question is actually buffered or directly seekable, but not including time in the future for infinite streams). Will return zero if there is no media.
currentTime [ = value ]Returns the current playback position, in seconds,
as a position between zero time and the current duration.
Can be set, to seek to the given time.
pausedReturns true if playback is paused; false otherwise. When this attribute is true, any media element slaved to this controller will be stopped.
play()Sets the paused
attribute to false.
pause()Sets the paused
attribute to true.
playedReturns a TimeRanges object that represents the
union of the time ranges in all the slaved media elements that have been played.
defaultPlaybackRate [ = value ]Returns the default rate of playback.
Can be set, to change the default rate of playback.
This default rate has no direct effect on playback, but if the
user switches to a fast-forward mode, when they return to the
normal playback mode, it is expected that rate of playback (playbackRate) will
be returned to this default rate.
playbackRate [ = value ]Returns the current rate of playback.
Can be set, to change the rate of playback.
volume [ = value ]Returns the current playback volume multiplier, as a number in the range 0.0 to 1.0, where 0.0 is the quietest and 1.0 the loudest.
Can be set, to change the volume multiplier.
Throws an IndexSizeError if the new value is not
in the range 0.0 .. 1.0.
muted [ = value ]Returns true if all audio is muted (regardless of other attributes either on the controller or on any media elements slaved to this controller), and false otherwise.
Can be set, to change whether the audio is muted or not.
A media element can have a current media
controller, which is a MediaController object.
When a media element is created without a mediagroup attribute, it does
not have a current media controller. (If it is created
with such an attribute, then that attribute initializes the
current media controller, as defined below.)
The slaved media elements of a
MediaController are the media elements whose current media
controller is that MediaController. All the
slaved media elements of a MediaController
must use the same clock for their definition of their media
timeline's unit time.
The controller attribute
on a media element, on getting, must return the
element's current media controller, if any, or null
otherwise. On setting, it must first remove the element's mediagroup attribute, if any,
and then set the current media controller to the given
value. If the given value is null, the element no longer has a
current media controller; if it is not null, then the
user agent must bring the media element up to speed with its
new media controller.
The MediaController()
constructor, when invoked, must return a newly created
MediaController object.
The seekable
attribute must return a new static normalized
TimeRanges object that represents the
intersection of the ranges of the media
resources of the slaved media elements that the
user agent is able to seek to, at the time the attribute is
evaluated.
The buffered
attribute must return a new static normalized
TimeRanges object that represents the
intersection of the ranges of the media
resources of the slaved media elements that the
user agent has buffered, at the time the attribute is evaluated.
Users agents must accurately determine the ranges available, even
for media streams where this can only be determined by tedious
inspection.
The duration
attribute must return the media controller
duration.
Every 15 to 250ms, or whenever the MediaController's
media controller duration changes, whichever happens
least often, the user agent must queue a task to
fire a simple event named durationchange
at the MediaController. If the
MediaController's media controller
duration decreases such that the media controller
position is greater than the media controller
duration, the user agent must immediately seek the
media controller to media controller
duration.
The currentTime
attribute must return the media controller position on
getting, and on setting must seek the media controller
to the new value.
Every 15 to 250ms, or whenever the MediaController's
media controller position changes, whichever happens
least often, the user agent must queue a task to
fire a simple event named timeupdate at the
MediaController.
When a MediaController is created it is a
playing media controller. It can be changed into a
paused media controller and back either via the user
agent's user interface (when the element is exposing a user interface to the
user) or by script using the APIs defined in this section
(see below).
The paused
attribute must return true if the MediaController
object is a paused media controller, and false
otherwise.
When the pause() method
is invoked, if the MediaController is a playing
media controller then the user agent must change the
MediaController into a paused media
controller, queue a task to fire a simple
event named pause at the
MediaController, and then report the controller
state of the MediaController.
When the play() method is
invoked, if the MediaController is a paused media
controller, the user agent must change the
MediaController into a playing media
controller, queue a task to fire a simple
event named play at the
MediaController, and then report the controller
state of the MediaController.
The played
attribute must return a new static normalized
TimeRanges object that represents the union of
the ranges of the media
resources of the slaved media elements that the
user agent has so far rendered, at the time the attribute is
evaluated.
A MediaController has a media controller
default playback rate and a media controller playback
rate, which must both be set to 1.0 when the
MediaController object is created.
The defaultPlaybackRate
attribute, on getting, must return the
MediaController's media controller default
playback rate, and on setting, must set the
MediaController's media controller default
playback rate to the new value, then queue a
task to fire a simple event named ratechange at the
MediaController.
The playbackRate
attribute, on getting, must return the
MediaController's media controller playback
rate, and on setting, must set the
MediaController's media controller playback
rate to the new value, then queue a task to
fire a simple event named ratechange at the
MediaController.
A MediaController has a media controller volume
multiplier, which must be set to 1.0 when the
MediaController object is created, and a media
controller mute override, much must initially be false.
The volume
attribute, on getting, must return the
MediaController's media controller volume
multiplier, and on setting, if the new value is in the range
0.0 to 1.0 inclusive, must set the MediaController's
media controller volume multiplier to the new value and
queue a task to fire a simple event named
volumechange
at the MediaController. If the new value is outside the
range 0.0 to 1.0 inclusive, then, on setting, an
IndexSizeError exception must be thrown instead.
The muted
attribute, on getting, must return the
MediaController's media controller mute
override, and on setting, must set the
MediaController's media controller mute
override to the new value and queue a task to
fire a simple event named volumechange at
the MediaController.
The media resources of all
the slaved media elements of a
MediaController have a defined temporal relationship
which provides relative offsets between the zero time of each such
media resource: for media
resources with a timeline offset, their relative
offsets are the difference between their timeline
offset; the zero times of all the media resources without a timeline
offset are not offset from each other (i.e. the origins of
their timelines are cotemporal); and finally, the zero time of the
media resource with the earliest timeline
offset (if any) is not offset from the zero times of the
media resources without a
timeline offset (i.e. the origins of media resources without a timeline
offset are further cotemporal with the earliest defined point
on the timeline of the media resource with the earliest
timeline offset).
The media resource end position of a media resource in a media element is defined as follows: if the media resource has a finite and known duration, the media resource end position is the duration of the media resource's timeline (the last defined position on that timeline); otherwise, the media resource's duration is infinite or unknown, and the media resource end position is the time of the last frame of media data currently available for that media resource.
Each MediaController also has its own defined
timeline. On this timeline, all the media resources of all the slaved media
elements of the MediaController are temporally
aligned according to their defined offsets. The media
controller duration of that MediaController is
the time from the earliest earliest possible position,
relative to this MediaController timeline, of any of
the media resources of the
slaved media elements of the
MediaController, to the time of the latest media
resource end position of the media resources of the slaved media
elements of the MediaController, again relative
to this MediaController timeline.
Each MediaController has a media controller
position. This is the time on the
MediaController's timeline at which the user agent is
trying to play the slaved media elements. When a
MediaController is created, its media controller
position is initially zero.
When the user agent is to bring a media element up to
speed with its new media controller, it must seek that media element
to the MediaController's media controller
position relative to the media element's
timeline.
When the user agent is to seek the media controller to a particular new playback position, it must follow these steps:
If the new playback position is less than zero, then set it to zero.
If the new playback position is greater than the media controller duration, then set it to the media controller duration.
Set the media controller position to the new playback position.
Seek each slaved media element to the new playback position relative to the media element timeline.
A MediaController is a blocked media
controller if the MediaController is a
paused media controller, or if any of its slaved
media elements are blocked media elements, or if any of its
slaved media elements whose autoplaying
flag is true still have their paused attribute set to true, or if
all of its slaved media elements have their paused attribute set to true.
A media element is blocked on its media
controller if the MediaController is a
blocked media controller, or if its media
controller position is either before the media
resource's earliest possible position relative
to the MediaController's timeline or after the end of
the media resource relative to the
MediaController's timeline.
When a MediaController is
not a blocked media controller and it has at least one
slaved media element
whose Document is a fully active
Document, the MediaController's
media controller position must increase monotonically
at media controller playback rate units of time on the
MediaController's timeline per unit time of the clock
used by its slaved media elements.
When the zero point on the timeline of a
MediaController moves relative to the timelines of the
slaved media elements by a time difference ΔT, the MediaController's
media controller position must be decremented by ΔT.
In some situations, e.g. when playing back a live stream without buffering anything, the media controller position would increase monotonically as described above at the same rate as the ΔT described in the previous paragraph decreases it, with the end result that for all intents and purposes, the media controller position would appear to remain constant (probably with the value 0).
A MediaController has a most recently reported
readiness state, which is a number from 0 to 4 derived from
the numbers used for the media element readyState attribute, and a
most recently reported playback state, which is either
playing, waiting, or ended.
When a MediaController is created, its most
recently reported readiness state must be set to 0, and its
most recently reported playback state must be set to
waiting.
When a user agent is required to report the controller
state for a MediaController, the user agent must
run the following steps:
If the MediaController has no slaved media
elements, let new readiness state be
0.
Otherwise, let it have the lowest value of the readyState IDL attributes of
all of its slaved media elements.
If the MediaController's most recently
reported readiness state is less than the new
readiness state, then run these substeps:
Let next state be the
MediaController's most recently reported
readiness state.
Loop: Increment next state by one.
Queue a task to fire a simple
event at the MediaController object, whose
name is the event name corresponding to the value of next state given in the table below.
If next state is less than new readiness state, then return to the step labeled loop.
Otherwise, if the MediaController's most
recently reported readiness state is greater than new readiness state then queue a task
to fire a simple event at the
MediaController object, whose name is the event name
corresponding to the value of new readiness
state given in the table below.
| Value of new readiness state | Event name |
|---|---|
| 0 | emptied
|
| 1 | loadedmetadata
|
| 2 | loadeddata
|
| 3 | canplay
|
| 4 | canplaythrough
|
Let the MediaController's most recently
reported readiness state be new readiness
state.
Initialize new playback state by setting it to the state given for the first matching condition from the following list:
MediaController has no slaved
media elementsMediaController's slaved
media elements have ended playback and the
media controller playback rate is positive or
zeroMediaController is a blocked media
controllerIf the MediaController's most recently
reported playback state is not equal to new
playback state and the new playback state
is ended, then queue a task that, if the
MediaController object is a playing media
controller, and all of the MediaController's
slaved media elements have still ended
playback, and the media controller playback
rate is still positive or zero, changes the
MediaController object to a paused media
controller and then fires
a simple event named pause at the
MediaController object.
If the MediaController's most recently
reported playback state is not equal to new
playback state then queue a task to fire a
simple event at the MediaController object,
whose name is playing if new playback state is playing, ended if new playback state is ended, and waiting
otherwise.
Let the MediaController's most recently
reported playback state be new playback
state.
The following are the event handlers (and their
corresponding event handler
event types) that must be supported, as IDL attributes, by
all objects implementing the MediaController
interface:
| Event handler | Event handler event type |
|---|---|
onemptied | emptied
|
onloadedmetadata | loadedmetadata
|
onloadeddata | loadeddata
|
oncanplay | canplay
|
oncanplaythrough | canplaythrough
|
onplaying | playing
|
onended | ended
|
onwaiting | waiting
|
ondurationchange | durationchange
|
ontimeupdate | timeupdate
|
onplay | play
|
onpause | pause
|
onratechange | ratechange
|
onvolumechange | volumechange
|
The task source for the tasks listed in this section is the DOM manipulation task source.
The mediagroup content
attribute on media elements can
be used to link multiple media
elements together by implicitly creating a
MediaController. The value is text; media elements with the same value are automatically
linked by the user agent.
When a media element is created with a mediagroup attribute, and when
a media element's mediagroup attribute is set,
changed, or removed, the user agent must run the following
steps:
Let m be the media element in question.
Let m have no current media controller, if it currently has one.
If m's mediagroup attribute is being
removed, then abort these steps.
If there is another media element whose
Document is the same as m's
Document (even if one or both of these elements are
not actually in the
Document), and which also has a mediagroup attribute, and
whose mediagroup
attribute has the same value as the new value of m's mediagroup attribute, then
let controller be that media
element's current media controller.
Otherwise, let controller be a newly created
MediaController.
Let m's current media controller be controller.
Bring the media element up to speed with its new media controller.
The mediaGroup IDL
attribute on media elements must
reflect the mediagroup content
attribute.
Multiple media elements
referencing the same media resource will share a
single network request. This can be used to efficiently play two
(video) tracks from the same media resource in two
different places on the screen. Used with the mediagroup attribute, these
elements can also be kept synchronised.
In this example, a sign-languge interpreter track from a movie
file is overlaid on the primary video track of that same video file
using two video elements, some CSS, and an implicit
MediaController:
<article>
<style scoped>
div { margin: 1em auto; position: relative; width: 400px; height: 300px; }
video { position; absolute; bottom: 0; right: 0; }
video:first-child { width: 100%; height: 100%; }
video:last-child { width: 30%; }
</style>
<div>
<video src="movie.vid#track=Video&track=English" autoplay controls mediagroup=movie></video>
<video src="movie.vid#track=sign" autoplay mediagroup=movie></video>
</div>
</article>
A media element can have a group of associated text tracks, known as the media element's list of text tracks. The text tracks are sorted as follows:
track element children of the media
element, in tree order.addTextTrack() method, in
the order they were added, oldest first.A text track consists of:
This decides how the track is handled by the user agent. The kind is represented by a string. The possible strings are:
subtitles
captions
descriptions
chapters
metadata
The kind of track can
change dynamically, in the case of a text track
corresponding to a track element.
This is a human-readable string intended to identify the track for the user. In certain cases, the label might be generated automatically.
The label of a track can
change dynamically, in the case of a text track
corresponding to a track element or in the case of an
automatically-generated label whose value depends on variable
factors such as the user's preferred user interface language.
This is a string (a BCP 47 language tag) representing the language of the text track's cues. [BCP47]
The language of a text
track can change dynamically, in the case of a text
track corresponding to a track element.
One of the following:
Indicates that the text track's cues have not been obtained.
Indicates that the text track is loading and there have been no fatal errors encountered so far. Further cues might still be added to the track by the parser.
Indicates that the text track has been loaded with no fatal errors.
Indicates that the text track was enabled, but when the user agent attempted to obtain it, this failed in some way (e.g. URL could not be resolved, network error, unknown text track format). Some or all of the cues are likely missing and will not be obtained.
The readiness state of a text track changes dynamically as the track is obtained.
One of the following:
Indicates that the text track is not active. Other than for the purposes of exposing the track in the DOM, the user agent is ignoring the text track. No cues are active, no events are fired, and the user agent will not attempt to obtain the track's cues.
Indicates that the text track is active, but that the user agent is not actively displaying the cues. If no attempt has yet been made to obtain the track's cues, the user agent will perform such an attempt momentarily. The user agent is maintaining a list of which cues are active, and events are being fired accordingly.
Indicates that the text track is active. If no attempt has
yet been made to obtain the track's cues, the user agent will
perform such an attempt momentarily. The user agent is
maintaining a list of which cues are active, and events are
being fired accordingly. In addition, for text tracks whose
kind is subtitles or captions, the cues
are being overlaid on the video as appropriate; for text tracks
whose kind is descriptions,
the user agent is making the cues available to the user in a
non-visual fashion; and for text tracks whose kind is chapters, the user
agent is making available to the user a mechanism by which the
user can navigate to any point in the media
resource by selecting a cue.
The showing by
default state is used in conjunction with the default attribute on
track elements to indicate that the text track was
enabled due to that attribute. This allows the user agent to
override the state if a later track is discovered that is more
appropriate per the user's preferences.
A list of text track cues, along with rules for updating the text track rendering. For example, for WebVTT, the rules for updating the display of WebVTT text tracks. [WEBVTT]
The list of cues of a text track can change dynamically, either because the text track has not yet been loaded or is still loading, or due to DOM manipulation.
Each text track has a corresponding
TextTrack object.
The text tracks of a media element are ready if all the text tracks whose mode was not in the disabled state when the element's resource selection algorithm last started now have a text track readiness state of loaded or failed to load.
A text track cue is the unit of time-sensitive data in a text track, corresponding for instance for subtitles and captions to the text that appears at a particular time and disappears at another time.
Each text track cue consists of:
An arbitrary string.
The time, in seconds and fractions of a second, that describes the beginning of the range of the media data to which the cue applies.
The time, in seconds and fractions of a second, that describes the end of the range of the media data to which the cue applies.
A boolean indicating whether playback of the media resource is to pause when the end of the range to which the cue applies is reached.
A writing direction, either horizontal (a line extends horizontally and is positioned vertically, with consecutive lines displayed below each other), vertical growing left (a line extends vertically and is positioned horizontally, with consecutive lines displayed to the left of each other), or vertical growing right (a line extends vertically and is positioned horizontally, with consecutive lines displayed to the right of each other).
If the writing direction is horizontal, then line position percentages are relative to the height of the video, and text position and size percentages are relative to the width of the video.
Otherwise, line position percentages are relative to the width of the video, and text position and size percentages are relative to the height of the video.
A boolean indicating whether the line's position is a line position (positioned to a multiple of the line dimensions of the first line of the cue), or whether it is a percentage of the dimension of the video.
Either a number giving the position of the lines of the cue, to be interpreted as defined by the writing direction and snap-to-lines flag of the cue, or the special value auto, which means the position is to depend on the other active tracks.
A text track cue has a text track cue computed line position whose value is defined in terms of the other aspects of the cue. If the text track cue line position is numeric, then that is the text track cue computed line position. Otherwise, the text track cue line position is the special value auto; if the text track cue snap-to-lines flag of the text track cue is not set, the text track cue computed line position is the value 100; otherwise, it is the value returned by the following algorithm:
Let cue be the text track cue.
If cue is not associated with a text track, return −1 and abort these steps.
Let track be the text track that the cue is associated with.
Let n be the number of text tracks whose text track mode is showing or showing by default and that are in the media element's list of text tracks before track.
Increment n by one.
Negate n.
Return n.
A number giving the position of the text of the cue within each line, to be interpreted as a percentage of the video, as defined by the writing direction.
A number giving the size of the box within which the text of each line of the cue is to be aligned, to be interpreted as a percentage of the video, as defined by the writing direction.
An alignment for the text of each line of the cue, either start alignment (the text is aligned towards its start side), middle alignment (the text is aligned centered between its start and end sides), end alignment (the text is aligned towards its end side). Which sides are the start and end sides depends on the Unicode bidirectional algorithm and the writing direction. [BIDI]
The raw text of the cue, and rules for its interpretation, allowing the text to be rendered and converted to a DOM fragment.
Each text track cue has a corresponding
TextTrackCue object, and can be associated with a
particular text track. Once a text track
cue is associated with a particular text track,
the association is permanent. A text track cue's
in-memory representation can be dynamically changed through this
TextTrackCue API.
In addition, each text track cue has two pieces of dynamic information:
This flag must be initially unset. The flag is used to ensure events are fired appropriately when the cue becomes active or inactive, and to make sure the right cues are rendered.
The user agent must synchronously unset this flag whenever the
text track cue is removed from its text
track's text track list of cues; whenever the
text track itself is removed from its media
element's list of text tracks or has its
text track mode changed to disabled; and whenever the media
element's readyState is changed back to
HAVE_NOTHING. When the
flag is unset in this way for one or more cues in text tracks that were showing or showing by default prior to the
relevant incident, the user agent must, after having unset the
flag for all the affected cues, apply the rules for updating
the text track rendering of those text tracks.
For example, for text tracks
based on WebVTT, the rules for updating the
display of WebVTT text tracks. [WEBVTT]
This is used as part of the rendering model, to keep cues in a consistent position. It must initially be empty. Whenever the text track cue active flag is unset, the user agent must empty the text track cue display state.
The text track cues of a media element's text tracks are ordered relative to each other in the text track cue order, which is determined as follows: first group the cues by their text track, with the groups being sorted in the same order as their text tracks appear in the media element's list of text tracks; then, within each group, cues must be sorted by their start time, earliest first; then, any cues with the same start time must be sorted by their end time, latest first; and finally, any cues with identical end times must be sorted in the order they were created (so e.g. for cues from a WebVTT file, that would be the order in which the cues were listed in the file). [WEBVTT]
A media-resource-specific text track is a text track that corresponds to data found in the media resource.
Rules for processing and rendering such data are defined by the relevant specifications, e.g. the specification of the video format if the media resource is a video.
When a media resource contains data that the user agent recognises and supports as being equivalent to a text track, the user agent runs the steps to expose a media-resource-specific text track with the relevant data, as follows.
Associate the relevant data with a new text
track and its corresponding new TextTrack
object. The text track is a
media-resource-specific text track.
Set the new text track's kind, label, and language based on the semantics of the relevant data, as defined by the relevant specification.
Populate the new text track's list of cues with the cues parsed so far, folllowing the guidelines for exposing cues, and begin updating it dynamically as necessary.
Set the new text track's readiness state to loaded.
Set the new text track's mode to the mode consistent with the user's preferences and the requirements of the relevant specification for the data.
Leave the text track list of cues empty, and associate with it the rules for updating the text track rendering appropriate for the format in question.
Add the new text track to the media element's list of text tracks.
Fire an event with the name addtrack, that does not bubble and is
not cancelable, and that uses the TrackEvent
interface, with the track
attribute initialized to the text track's
TextTrack object, at the media element's
textTracks attribute's
TextTrackList object.
When a media element is to forget the media element's media-resource-specific text tracks, the user agent must remove from the media element's list of text tracks all the media-resource-specific text tracks.
When a track element is created, it must be
associated with a new text track (with its value set
as defined below) and its corresponding new TextTrack
object.
The text track kind is determined from the state of
the element's kind attribute
according to the following table; for a state given in a cell of the
first column, the kind is the
string given in the second column:
| State | String |
|---|---|
| Subtitles | subtitles
|
| Captions | captions
|
| Descriptions | descriptions
|
| Chapters | chapters
|
| Metadata | metadata
|
The text track label is the element's track label.
The text track language is the element's track language, if any, or the empty string otherwise.
As the kind, label, and srclang attributes are set,
changed, or removed, the text track must update
accordingly, as per the definitions above.
Changes to the track URL are handled in the algorithm below.
The text track list of cues is initially empty. It is dynamically modified when the referenced file is parsed. Associated with the list are the rules for updating the text track rendering appropriate for the format in question; for WebVTT, this is the rules for updating the display of WebVTT text tracks. [WEBVTT]
When a track element's parent element changes and
the new parent is a media element, then the user agent
must add the track element's corresponding text
track to the media element's list of text
tracks, and then queue a task to fire an event
with the name addtrack, that
does not bubble and is not cancelable, and that uses the
TrackEvent interface, with the track attribute initialized to
the text track's TextTrack object, at the
media element's textTracks attribute's
TextTrackList object.
When a track element's parent element changes and
the old parent was a media element, then the user agent
must remove the track element's corresponding
text track from the media element's
list of text tracks.
When a text track corresponding to a
track element is added to a media
element's list of text tracks, the user agent
must set the text track mode appropriately, as
determined by the following conditions:
subtitles or captions and the user
has indicated an interest in having a track with this text
track kind, text track language, and
text track label enabled, and there is no other
text track in the media element's
list of text tracks with a text track
kind of either subtitles or captions whose
text track mode is showingdescriptions and
the user has indicated an interest in having text descriptions with
this text track language and text track
label enabled, and there is no other text
track in the media element's list of
text tracks with a text track kind of descriptions whose
text track mode is showingLet the text track mode be showing.
If there is a text track in the media element's list of text tracks whose text track mode is showing by default, the user agent must furthermore change that text track's text track mode to hidden.
chapters and the
text track language is one that the user agent has
reason to believe is appropriate for the user, and there is no
other text track in the media element's
list of text tracks with a text track
kind of chapters whose
text track mode is showingLet the text track mode be showing.
track element has a default attribute specified, and
there is no other text track in the media
element's list of text tracks whose
text track mode is showing or showing by defaultLet the text track mode be showing by default.
Let the text track mode be disabled.
When a text track corresponding to a
track element is created with text track
mode set to hidden,
showing, or showing by default,
and when a text track corresponding to a
track element is created with text track
mode set to disabled and subsequently changes its text
track mode to hidden,
showing, or showing by default for
the first time, the user agent must immediately and synchronously
run the following algorithm. This algorithm interacts closely with
the event loop mechanism; in particular, it has a
synchronous section (which is triggered as part of the
event loop algorithm). The step in that section is
marked with ⌛.
Set the text track readiness state to loading.
Let URL be the track URL of
the track element.
Asynchronously run the remaining steps, while continuing with whatever task was responsible for creating the text track or changing the text track mode.
Download: At this point, the text track is downloaded.
If URL is not the empty string, perform a
potentially CORS-enabled fetch of URL, with the mode being the state of the
media element's crossorigin content
attribute, the origin being the
origin of the media element's
Document, and the default origin behaviour set
to fail.
The resource obtained in this fashion, if any, contains the text track data. If any data is obtained, it is by definition CORS-same-origin (cross-origin resources that are not suitably CORS-enabled do not get this far).
The tasks queued by the fetching algorithm on the networking task source to process the data as it is being fetched must determine the type of a the resource. If the type of the resource is not a supported text track format, the load will fail, as described below. Otherwise, the resource's data must be passed to the appropriate parser (e.g. the WebVTT parser) as it is received, with the text track list of cues being used for that parser's output. [WEBVTT]
This specification does not currently say whether or how to check the MIME types of text tracks, or whether or how to perform file type sniffing using the actual file data. Implementors differ in their intentions on this matter and it is therefore unclear what the right solution is. In the absence of any requirement here, the HTTP specification's strict requirement to follow the Content-Type header prevails ("Content-Type specifies the media type of the underlying data." ... "If and only if the media type is not given by a Content-Type field, the recipient MAY attempt to guess the media type via inspection of its content and/or the name extension(s) of the URI used to identify the resource.").
If the fetching algorithm fails for
any reason (network error, the server returns an error code, a
cross-origin check fails, etc), if URL is the
empty string, or if the sniffed type of the resource is not a
supported text track format, then queue a task to
first change the text track readiness state to failed to load and then
fire a simple event named error at the track
element; and then, once that task is queued, move on to the step below labeled
monitoring.
If the fetching algorithm does not fail, then the final task that is queued by the networking task source must run the following steps:
Change the text track readiness state to loaded.
If the file was successfully processed, fire a simple
event named load at the
track element.
If the file was not successfully processed, e.g. the format
in question is an XML format and the file contained a
well-formedness error that the XML specification requires be
detected and reported to the application, then fire a
simple event named error
at the track element.
Jump to the step below labeled monitoring.
If, while the fetching algorithm is active, either:
...then the user agent must run the following steps:
Abort the fetching algorithm, discarding any pending tasks generated by that algorithm.
Let URL be the new track URL.
Jump back to the top of the step labeled download.
Until one of the above circumstances occurs, the user agent must remain on this step.
Monitoring: Wait until the track URL is no longer equal to URL, at the same time as the text track mode is set to hidden, showing, or showing by default.
Wait until the text track readiness state is no longer set to loading.
Await a stable state. The synchronous section consists of the following step. (The step in the synchronous section is marked with ⌛.)
⌛ Set the text track readiness state to loading.
End the synchronous section, continuing the remaining steps asynchronously.
Jump to the step labeled download.
How a specific format's text track cues are to be interpreted for the purposes of processing by an HTML user agent is defined by that format. In the absence of such a specification, this section provides some constraints within which implementations can attempt to consistently expose such formats.
To support the text track model of HTML, each unit of timed data is converted to a text track cue. Where the mapping of the format's features to the aspects of a text track cue as defined in this specification are not defined, implementations must ensure that the mapping is consistent with the definitions of the aspects of a text track cue as defined above, as well as with the following constraints:
Should be set to the empty string if the format has no obvious analogue to a per-cue identifier.
Should be set to false.
Should be set to horizontal if the concept of writing direction doesn't really apply (e.g. the cue consists of a bitmap image).
Should be set to false unless the format uses a rendering and positioning model for cues that is largely consistent with the WebVTT cue text rendering rules.
If the format uses a rendering and positioning model for cues that can be largely simulated using the WebVTT cue text rendering rules, then these should be set to the values that would give the same effect for WebVTT cues. Otherwise, they should be set to zero.
interface TextTrackList : EventTarget { readonly attribute unsigned long length; getter TextTrack (unsigned long index); [TreatNonCallableAsNull] attribute Function? onaddtrack; };
textTracks . lengthReturns the number of text tracks associated with the media element (e.g. from track elements). This is the number of text tracks in the media element's list of text tracks.
textTracks[ n ]Returns the TextTrack object representing the nth text track in the media element's list of text tracks.
trackReturns the TextTrack object representing the track element's text track.
A TextTrackList object represents a dynamically
updating list of text tracks in a
given order.
The textTracks attribute
of media elements must return a
TextTrackList object representing the
TextTrack objects of the text
tracks in the media element's list of text
tracks, in the same order as in the list of text
tracks. The same object must be returned each time the
attribute is accessed. [WEBIDL]
The length attribute
of a TextTrackList object must return the number of
text tracks in the list represented
by the TextTrackList object.
The supported property indices of a
TextTrackList object at any instant are the numbers
from zero to the number of text
tracks in the list represented by the
TextTrackList object minus one, if any. If there are no
text tracks in the list, there are
no supported property indices.
To determine the value of an indexed property of a
TextTrackList object for a given index index, the user agent must return the indexth text track in the list
represented by the TextTrackList object.
interface TextTrack : EventTarget { readonly attribute DOMString kind; readonly attribute DOMString label; readonly attribute DOMString language; const unsigned short DISABLED = 0; const unsigned short HIDDEN = 1; const unsigned short SHOWING = 2; attribute unsigned short mode; readonly attribute TextTrackCueList? cues; readonly attribute TextTrackCueList? activeCues; void addCue(TextTrackCue cue); void removeCue(TextTrackCue cue); [TreatNonCallableAsNull] attribute Function? oncuechange; };
kindReturns the text track kind string.
labelReturns the text track label.
languageReturns the text track language string.
mode [ = value ]Returns the text track mode, represented by a number from the following list:
TextTrack . DISABLED (0)The text track disabled mode.
TextTrack . HIDDEN (1)The text track hidden mode.
TextTrack . SHOWING (2)The text track showing and showing by default modes.
Can be set, to change the mode.
cuesReturns the text track list of cues, as a TextTrackCueList object.
activeCuesReturns the text track cues from the text track list of cues that are currently active (i.e. that start before the current playback position and end after it), as a TextTrackCueList object.
addCue( cue )Adds the given cue to textTrack's text track list of cues.
Throws an exception if the argument is associated with another text track or already in the list of cues.
removeCue( cue )Removes the given cue from textTrack's text track list of cues.
Throws an exception if the argument is associated with another text track or not in the list of cues.
addTextTrack( kind [, label [, language ] ] )Creates and returns a new TextTrack object, which is also added to the media element's list of text tracks.
The kind
attribute must return the text track kind of the
text track that the TextTrack object
represents.
The label
attribute must return the text track label of the
text track that the TextTrack object
represents.
The language
attribute must return the text track language of the
text track that the TextTrack object
represents.
The mode
attribute, on getting, must return the numeric value corresponding
to the text track mode of the text track
that the TextTrack object represents, as defined by
the following list:
DISABLED (numeric value 0)HIDDEN (numeric value 1)SHOWING (numeric value 2)On setting, if the new value is not either 0, 1, or 2, the user
agent must throw an InvalidAccessError
exception. Otherwise, if the new value isn't equal to what the
attribute would currently return, the new value must be processed as
follows:
Set the text track mode of the text
track that the TextTrack object represents to
the text track disabled mode.
Set the text track mode of the text
track that the TextTrack object represents to
the text track hidden mode.
Set the text track mode of the text
track that the TextTrack object represents to
the text track showing mode.
If the mode had been showing by default, this will change it
to showing, even though
the value of mode would
appear not to change.
If the text track mode of the text
track that the TextTrack object represents is
not the text track disabled mode, then the cues attribute must
return a live TextTrackCueList object that
represents the subset of the text track list of cues of
the text track that the TextTrack object
represents whose start
times occur at or after the earliest possible position
when the script started, in text track cue
order. Otherwise, it must return null. When an object is
returned, the same object must be returned each time.
The earliest possible position when the script started is whatever the earliest possible position was the last time the event loop reached step 1.
If the text track mode of the text
track that the TextTrack object represents is
not the text track disabled mode, then the activeCues
attribute must return a live
TextTrackCueList object that represents the subset of
the text track list of cues of the text
track that the TextTrack object represents
whose active flag was set when the script started, in
text track cue order. Otherwise, it must return
null. When an object is returned, the same object must be returned
each time.
A text track cue's active flag was set when the script started if its text track cue active flag was set the last time the event loop reached step 1.
The addCue(cue) method of TextTrack
objects, when invoked, must run the following steps:
If the given cue is already associated
with a text track other than the method's
TextTrack object's text track, then throw
an InvalidStateError exception and abort these
steps.
Associate cue with the method's
TextTrack object's text track, if it is
not currently associated with a text track.
If the given cue is already listed in
the method's TextTrack object's text
track's text track list of cues, then throw an
InvalidStateError exception.
Add cue to the method's
TextTrack object's text track's
text track list of cues.
The removeCue(cue) method of
TextTrack objects, when invoked, must run the
following steps:
If the given cue is not associated with
the method's TextTrack object's text
track, then throw an InvalidStateError
exception.
If the given cue is not currently listed
in the method's TextTrack object's text
track's text track list of cues, then throw a
NotFoundError exception.
Remove cue from the method's
TextTrack object's text track's
text track list of cues.
The addTextTrack(kind, label, language) method of media elements, when invoked, must run the following
steps:
If kind is not one of the following
strings, then throw a SyntaxError exception and abort
these steps:
subtitles
captions
descriptions
chapters
metadata
If the label argument was omitted, let label be the empty string.
If the language argument was omitted, let language be the empty string.
Create a new TextTrack object.
Create a new text track corresponding to the new object, and set its text track kind to kind, its text track label to label, its text track language to language, its text track readiness state to the text track loaded state, its text track mode to the text track hidden mode, and its text track list of cues to an empty list. Associate the text track list of cues with the rules for updating the display of WebVTT text tracks as its rules for updating the text track rendering. [WEBVTT]
Add the new text track to the media element's list of text tracks.
Queue a task to fire an event with the name addtrack, that does not bubble and
is not cancelable, and that uses the TrackEvent
interface, with the track attribute initialized to
the new text track's TextTrack object,
at the media element's textTracks attribute's
TextTrackList object.
Return the new TextTrack object.
In this example, an audio element is used to play a
specific sound-effect from a sound file containing many sound
effects. A cue is used to pause the audio, so that it ends exactly
at the end of the clip, even if the browser is busy running some
script. If the page had relied on script to pause the audio, then
the start of the next clip might be heard if the browser was not
able to run the script at the exact time specified.
var sfx = new Audio('sfx.wav');
var sounds = a.addTextTrack('metadata');
// add sounds we care about
sounds.addCue(new TextTrackCue('dog bark', 12.783, 13.612, '', '', '', true));
sounds.addCue(new TextTrackCue('kitten mew', 13.612, 15.091, '', '', '', true));
function playSound(id) {
sfx.currentTime = sounds.getCueById(id).startTime;
sfx.play();
}
sfx.oncanplaythrough = function () {
playSound('dog bark');
}
window.onbeforeunload = function () {
playSound('kitten mew');
return 'Are you sure you want to leave this awesome page?';
}
interface TextTrackCueList {
readonly attribute unsigned long length;
getter TextTrackCue (unsigned long index);
TextTrackCue? getCueById(DOMString id);
};
lengthReturns the number of cues in the list.
Returns the text track cue with index index in the list. The cues are sorted in text track cue order.
getCueById( id )Returns the first text track cue (in text track cue order) with text track cue identifier id.
Returns null if none of the cues have the given identifier or if the argument is the empty string.
A TextTrackCueList object represents a dynamically
updating list of text track
cues in a given order.
The length
attribute must return the number of cues in the list represented by the
TextTrackCueList object.
The supported property indices of a
TextTrackCueList object at any instant are the numbers
from zero to the number of cues
in the list represented by the TextTrackCueList object
minus one, if any. If there are no cues in the list, there are no supported property
indices.
To determine the value of an indexed property for a
given index index, the user agent must return
the indexth text track cue in the
list represented by the TextTrackCueList object.
The getCueById(id) method, when called with an argument
other than the empty string, must return the first text track
cue in the list represented by the
TextTrackCueList object whose text track cue
identifier is id, if any, or null
otherwise. If the argument is the empty string, then the method must
return null.
[Constructor(DOMString id, double startTime, double endTime, DOMString text, optional DOMString settings, optional boolean pauseOnExit)] interface TextTrackCue : EventTarget { readonly attribute TextTrack? track; attribute DOMString id; attribute double startTime; attribute double endTime; attribute boolean pauseOnExit; attribute DOMString direction; attribute boolean snapToLines; attribute long linePosition; attribute long textPosition; attribute long size; attribute DOMString alignment; attribute DOMString text; DocumentFragment getCueAsHTML(); [TreatNonCallableAsNull] attribute Function? onenter; [TreatNonCallableAsNull] attribute Function? onexit; };
TextTrackCue( id, startTime, endTime, text [, settings [, pauseOnExit ] ] )Returns a new TextTrackCue object, for use with the addCue() method.
The id argument sets the text track cue identifier.
The startTime argument sets the text track cue start time.
The endTime argument sets the text track cue end time.
The text argument sets the text track cue text.
The settings argument is a string in the format of WebVTT cue settings. If omitted, the empty string is assumed.
The pauseOnExit argument sets the text track cue pause-on-exit flag. If omitted, false is assumed.
Returns the TextTrack object to which this
text track cue belongs, if any, or null
otherwise.
Returns the text track cue identifier.
Can be set.
Returns the text track cue start time, in seconds.
Can be set.
Returns the text track cue end time, in seconds.
Can be set.
Returns true if the text track cue pause-on-exit flag is set, false otherwise.
Can be set.
Returns a string representing the text track cue writing direction, as follows:
The string "horizontal".
The string "vertical".
The string "vertical-lr".
Can be set.
Returns true if the text track cue snap-to-lines flag is set, false otherwise.
Can be set.
Returns the text track cue line position. In the case of the value being auto, the appropriate default is returned.
Can be set.
Returns the text track cue text position.
Can be set.
Returns the text track cue size.
Can be set.
Returns a string representing the text track cue alignment, as follows:
The string "start".
The string "middle".
The string "end".
Can be set.
Returns the text track cue text in raw unparsed form.
Can be set.
Returns the text track cue text as a DocumentFragment of HTML elements and other DOM nodes.
The TextTrackCue(id, startTime, endTime, text, settings, pauseOnExit) constructor, when invoked,
must run the following steps:
Create a new text track cue that is not associated with any text track. Let cue be that text track cue.
Let cue's text track cue identifier be the value of the id argument.
Let cue's text track cue start time be the value of the startTime argument, interpreted as a time in seconds.
Let cue's text track cue end time be the value of the endTime argument, interpreted as a time in seconds.
Let cue's text track cue pause-on-exit flag be true if the pauseOnExit is present and true. Otherwise, let it be false.
Let cue's text track cue text be the value of the text argument, and let the rules for its interpretation be the WebVTT cue text parsing rules, the WebVTT cue text rendering rules, and the WebVTT cue text DOM construction rules. [WEBVTT]
Let cue's text track cue writing direction be horizontal.
Let cue's text track cue snap-to-lines flag be true.
Let cue's text track cue line position be auto.
Let cue's text track cue text position be 50.
Let cue's text track cue size be 100.
Let cue's text track cue alignment be middle alignment.
Parse the WebVTT settings given by the settings argument for cue. [WEBVTT]
Return the TextTrackCue object representing
cue.
The track
attribute, on getting, must return the TextTrack object
of the text track with which the text track
cue that the TextTrackCue object represents is
associated, if any; or null otherwise.
The id
attribute, on getting, must return the text track cue
identifier of the text track cue that the
TextTrackCue object represents. On setting, the text track cue
identifier must be set to the new value.
The startTime
attribute, on getting, must return the text track cue start
time of the text track cue that the
TextTrackCue object represents, in seconds. On setting, the text track cue start
time must be set to the new value, interpreted in seconds.
The endTime
attribute, on getting, must return the text track cue end
time of the text track cue that the
TextTrackCue object represents, in seconds. On setting, the text track cue end
time must be set to the new value, interpreted in seconds.
The pauseOnExit
attribute, on getting, must return true if the text track cue
pause-on-exit flag of the text track cue that
the TextTrackCue object represents is set; or false
otherwise. On setting, the text track cue pause-on-exit
flag must be set if the new value is true, and must be unset
otherwise.
The direction
attribute, on getting, must return the string from the second cell
of the row in the table below whose first cell is the text
track cue writing direction of the text track
cue that the TextTrackCue object represents:
| Text track cue writing direction | direction value
|
|---|---|
| Horizontal | "horizontal"
|
| Vertical growing left | "vertical"
|
| Vertical growing right | "vertical-lr"
|
On setting, the text track cue writing direction
must be set to the value given in the first cell of the row in the
table above whose second cell is a case-sensitive match
for the new value, if any. If none of the values match, then the
user agent must instead throw a SyntaxError
exception.
The snapToLines
attribute, on getting, must return true if the text track cue
snap-to-lines flag of the text track cue that
the TextTrackCue object represents is set; or false
otherwise. On setting, the text track cue snap-to-lines
flag must be set if the new value is true, and must be unset
otherwise.
The linePosition
attribute, on getting, must return the text track cue computed
line position of the text track cue that the
TextTrackCue object represents. On setting, if the
text track cue snap-to-lines flag is not set, and the
new value is negative or greater than 100, then throw an
IndexSizeError exception. Otherwise, set the text
track cue line position to the new value.
There is no way to explicitly set the text track cue line position to the special default auto value.
The textPosition
attribute, on getting, must return the text track cue text
position of the text track cue that the
TextTrackCue object represents. On setting, if the new
value is negative or greater than 100, then throw an
IndexSizeError exception. Otherwise, set the text
track cue text position to the new value.
The size
attribute, on getting, must return the text track cue
size of the text track cue that the
TextTrackCue object represents. On setting, if the new
value is negative or greater than 100, then throw an
IndexSizeError exception. Otherwise, set the text
track cue size to the new value.
The alignment
attribute, on getting, must return the string from the second cell
of the row in the table below whose first cell is the text
track cue alignment of the text track cue that
the TextTrackCue object represents:
| Text track cue alignment | alignment value
|
|---|---|
| Start alignment | "start"
|
| Middle alignment | "middle"
|
| End alignment | "end"
|
On setting, the text track cue alignment must be set
to the value given in the first cell of the row in the table above
whose second cell is a case-sensitive match for the new
value, if any. If none of the values match, then the user agent must
instead throw a SyntaxError exception.
The text
attribute, on getting, must return the raw text track cue
text of the text track cue that the
TextTrackCue object represents. On setting, the
text track cue text must be set to the new value.
The getCueAsHTML()
method must convert the text track cue text to a
DocumentFragment for the media element's
Document, using the appropriate rules for doing
so.
For example, for WebVTT, those rules are the
WebVTT cue text parsing rules and the WebVTT cue
text DOM construction rules. [WEBVTT]
Chapters are segments of a media resource with a given title. Chapters can be nested, in the same way that sections in a document outline can have subsections.
Each text track cue in a text track being used for describing chapters has three key features: the text track cue start time, giving the start time of the chapter, the text track cue end time, giving the end time of the chapter, and the text track cue text giving the chapter title.
The rules for constructing the chapter tree from a text track are as follows. They produce a potentially nested list of chapters, each of which have a start time, end time, title, and a list of nested chapters. This algorithm discards cues that do not correctly nest within each other, or that are out of order.
Let list be a copy of the list of cues of the text track being processed.
Let output be an empty list of chapters, where a chapter is a record consisting of a start time, an end time, a title, and a (potentially empty) list of nested chapters. For the purpose of this algorithm, each chapter also has a parent chapter.
Let current chapter be a stand-in chapter whose start time is negative infinity, whose end time is positive infinity, and whose list of nested chapters is output. (This is just used to make the algorithm easier to describe.)
Loop: If list is empty, jump to the step labeled end.
Let current cue be the first cue in list, and then remove it from list.
If current cue's text track cue start time is less than the start time of current chapter, then return to the step labeled loop.
While current cue's text track cue start time is greater than or equal to current chapter's end time, let current chapter be current chapter's parent chapter.
If current cue's text track cue end time is greater than the end time of current chapter, then return to the step labeled loop.
Create a new chapter new chapter, whose start time is current cue's text track cue start time, whose end time is current cue's text track cue end time, whose title is current cue's text track cue text interpreted according to its rules for interpretation, and whose list of nested chapters is empty.
Append new chapter to current chapter's list of nested chapters, and let current chapter be new chapter's parent.
Let current chapter be new chapter.
Return to the step labeled loop.
End: Return output.
The following snippet of a WebVTT file shows how nested chapters can be marked up. The file describes three 50-minute chapters, "Astrophysics", "Computational Physics", and "General Relativity". The first has three subchapters, the second has four, and the third has two. [WEBVTT]
WEBVTT 00:00:00.000 --> 00:50:00.000 Astrophysics 00:00:00.000 --> 00:10:00.000 Introduction to Astrophysics 00:10:00.000 --> 00:45:00.000 The Solar System 00:00:00.000 --> 00:10:00.000 Coursework Description 00:50:00.000 --> 01:40:00.000 Computational Physics 00:50:00.000 --> 00:55:00.000 Introduction to Programming 00:55:00.000 --> 01:30:00.000 Data Structures 01:30:00.000 --> 01:35:00.000 Answers to Last Exam 01:35:00.000 --> 01:40:00.000 Coursework Description 01:40:00.000 --> 02:30:00.000 General Relativity 01:40:00.000 --> 02:00:00.000 Tensor Algebra 02:00:00.000 --> 02:30:00.000 The General Relativistic Field Equations
The following are the event handlers that (and their
corresponding event handler
event types) must be
supported, as IDL attributes, by all objects implementing the
TextTrackList interface:
| Event handler | Event handler event type |
|---|---|
onaddtrack | addtrack
|
The following are the event handlers that (and their
corresponding event handler
event types) must be supported, as IDL attributes, by all
objects implementing the TextTrack interface:
| Event handler | Event handler event type |
|---|---|
oncuechange | cuechange
|
The following are the event handlers that (and their
corresponding event handler
event types) must be supported, as IDL attributes, by all
objects implementing the TextTrackCue interface:
| Event handler | Event handler event type |
|---|---|
onenter | enter
|
onexit | exit
|
The WebVTT format (Web Video Text Tracks) is a format intended for marking up external text track resources.
The main use for WebVTT files is captioning video content. Here is a sample file that captions an interview:
WEBVTT 00:11.000 --> 00:13.000 <v Roger Bingham>We are in New York City 00:13.000 --> 00:16.000 <v Roger Bingham>We're actually at the Lucern Hotel, just down the street 00:16.000 --> 00:18.000 <v Roger Bingham>from the American Museum of Natural History 00:18.000 --> 00:20.000 <v Roger Bingham>And with me is Neil deGrasse Tyson 00:20.000 --> 00:22.000 <v Roger Bingham>Astrophysicist, Director of the Hayden Planetarium 00:22.000 --> 00:24.000 <v Roger Bingham>at the AMNH. 00:24.000 --> 00:26.000 <v Roger Bingham>Thank you for walking down here. 00:27.000 --> 00:30.000 <v Roger Bingham>And I want to do a follow-up on the last conversation we did. 00:30.000 --> 00:31.500 align:end size:50% <v Roger Bingham>When we e-mailed— 00:30.500 --> 00:32.500 align:start size:50% <v Neil deGrasse Tyson>Didn't we talk about enough in that conversation? 00:32.000 --> 00:35.500 align:end size:50% <v Roger Bingham>No! No no no no; 'cos 'cos obviously 'cos 00:32.500 --> 00:33.500 align:start size:50% <v Neil deGrasse Tyson><i>Laughs</i> 00:35.500 --> 00:38.000 <v Roger Bingham>You know I'm so excited my glasses are falling off here.
This section remains to be written. In the meantime, please see the HTML standard. [HTML]
This specification relies upon the following terms defined in the HTML standard. [HTML]
A WebVTT file must consist of a WebVTT file
body encoded as UTF-8 and labeled with the MIME
type text/vtt. [RFC3629]
A WebVTT file body consists of the following components, in the following order:
WEBVTT".A WebVTT cue consists of the following components, in the given order:
A WebVTT cue corresponds to one piece of time-aligned text or data in the WebVTT file, for example one subtitle. The cue payload is the text or data associated with the cue.
WebVTT chapter title text is syntactically a subset
of WebVTT cue text, and WebVTT cue text is
syntactically a subset of WebVTT metadata text.
Conformance checkers, when validating WebVTT files, may
offer to restrict all cues to only having WebVTT chapter title
text or WebVTT cue text as their cue
payload; WebVTT metadata text cues are only
useful for scripted applications (using the metadata text
track kind).
A WebVTT file whose cues all have a cue payload that is WebVTT chapter title text is said to be a WebVTT file using chapter title text.
A WebVTT file whose cues all have a cue payload that is WebVTT cue text is said to be a WebVTT file using cue text. By definition, any file that is a WebVTT file using chapter title text is also a WebVTT file using cue text.
A WebVTT line terminator consists of one of the following:
A WebVTT cue identifier is any sequence of one or more
characters not containing the substring "-->"
(U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, U+003E GREATER-THAN
SIGN), nor containing any U+000A LINE FEED (LF) characters or U+000D
CARRIAGE RETURN (CR) characters.
A WebVTT cue identifier can be used to reference a specific cue, for example from script or CSS.
The WebVTT cue timings part of a WebVTT cue consists of the following components, in the given order:
-->" (U+002D HYPHEN-MINUS,
U+002D HYPHEN-MINUS, U+003E GREATER-THAN SIGN).The WebVTT cue timings give the start and end offsets of the WebVTT cue. Different cues can overlap. Cues are always listed ordered by their start time.
A WebVTT file whose cues all have an end time offset x greater than or equal to the end time offsets of all the cues whose start time offsets are less than x is said to be a WebVTT file using only nested cues.
A WebVTT timestamp representing a time in seconds and fractions of a second is a WebVTT timestamp representing hours hours, minutes minutes, seconds seconds, and thousandths of a second seconds-frac, calculated as follows:
Let seconds be the integer part of the time.
Let seconds-frac be the fractional component of the time, expressed as the digits of the decimal fraction given to three decimal digits.
If seconds is greater than 59, then let minutes be the integer component of seconds divided by sixty, and then let seconds be the remainder of dividing seconds divided by sixty. Otherwise, let minutes be zero.
If minutes is greater than 59, then let hours be the integer component of minutes divided by sixty, and then let minutes be the remainder of dividing minutes divided by sixty. Otherwise, let hours be zero.
A WebVTT timestamp representing hours hours, minutes minutes, seconds seconds, and thousandths of a second seconds-frac, consists of the following components, in the given order:
The WebVTT cue settings part of a WebVTT cue consists of zero or more of the following components, in any order, separated from each other by one or more U+0020 SPACE characters or U+0009 CHARACTER TABULATION (tab) characters. Each component must not be included more than once per WebVTT cue settings string.
WebVTT cue settings give configuration options regarding the position and alignment of the cue. For example, it allows a cue to be aligned to the left or positioned at the top right.
A WebVTT vertical text cue setting consists of the following components, in the order given:
vertical".rl", "lr".A WebVTT vertical text cue setting configures the cue to use vertical text layout rather than horizontal text layout. Vertical text layout is sometimes used in Japanese, for example. The default is horiontal layout.
A WebVTT line position cue setting consists of the following components, in the order given:
The string "line".
A U+003A COLON character (:).
A WebVTT line position cue setting configures the position of the cue. For horizontal cues, this is the vertical position. The position can be given either as a percentage, which gives the distance from the top of the frame, or as a line number. Line numbers are based on the size of the first line of the cue. Positive line numbers count from the top of the frame (the top line is numbered 0), negative line numbers from the bottom of the frame (the bottom line is numbered −1).
A WebVTT text position cue setting consists of the following components, in the order given:
The string "position".
A WebVTT text position cue setting configures the position of the text in the direction orthogonal to the WebVTT line position cue setting. For horizontal cues, this is the horizontal position. The WebVTT text position cue setting is given as a percentage, calculated from the edge of the frame that the text begins (so for left-to-right English text, the left edge).
A WebVTT size cue setting consists of the following components, in the order given:
The string "size".
A WebVTT size cue setting configures the size of the cue in the same direction as the WebVTT text position cue setting. For horizontal cues, this is the width of the cue. It is given as a percentage of the width of the frame.
A WebVTT alignment cue setting consists of the following components, in the order given:
The string "align".
start", "middle", "end"A WebVTT alignment cue setting
configures the alignment of the text within the cue. The keywords
are relative to the text direction; for left-to-right English text,
"start" means left-aligned.
WebVTT metadata text consists of any sequence of zero or more characters other than U+000A LINE FEED (LF) characters and U+000D CARRIAGE RETURN (CR) characters, each optionally separated from the next by a WebVTT line terminator. (In other words, any text that does not have two consecutive WebVTT line terminators and does not start or end with a WebVTT line terminator.)
WebVTT chapter title text consists of zero or more of the following, each optionally separated from the next by a WebVTT line terminator:
WebVTT cue text consists of zero or more WebVTT cue components, in any order, each optionally separated from the next by a WebVTT line terminator.
The WebVTT cue components are:
WebVTT cue internal text consists of an optional WebVTT line terminator, followed by zero or more WebVTT cue components, in any order, each optionally followed by a WebVTT line terminator.
A WebVTT cue class span consists of a WebVTT cue
span start tag "c" that disallows an
annotation, WebVTT cue internal text representing cue
text, and a WebVTT cue span end tag "c".
A WebVTT cue italics span consists of a WebVTT
cue span start tag "i" that disallows
an annotation, WebVTT cue internal text representing
the italicized text, and a WebVTT cue span end tag
"i".
A WebVTT cue bold span consists of a WebVTT cue
span start tag "b" that disallows an
annotation, WebVTT cue internal text representing the
boldened text, and a WebVTT cue span end tag "b".
A WebVTT cue underline span consists of a WebVTT
cue span start tag "u" that disallows
an annotation, WebVTT cue internal text representing
the underlined text, and a WebVTT cue span end tag
"u".
A WebVTT cue ruby span consists of the following components, in the order given:
ruby" that disallows an annotation.rt" that disallows an annotation.rt".
If this is the last occurance of this group of components in the
WebVTT cue ruby span, then this last end tag string
may be omitted.ruby".A WebVTT cue voice span consists of the following components, in the order given:
v" that requires an annotation; the annotation represents the name of the voice.v". If this WebVTT cue voice span is the only component of its WebVTT cue text sequence, then the end tag may be omitted for brevity.A WebVTT cue span start tag has a tag name and either requires or disallows an annotation, and consists of the following components, in the order given:
A WebVTT cue span end tag has a tag name and consists of the following components, in the order given:
A WebVTT cue timestamp consists of a U+003C LESS-THAN SIGN character (<), followed by a WebVTT timestamp representing the time that the given point in the cue becomes active, followed by a U+003E GREATER-THAN SIGN character (>). The time represented by the WebVTT timestamp must be greater than the times represented by any previous WebVTT cue timestamps in the cue, as well as greater than the cue's start time offset, and less than the cue's end time offset.
A WebVTT cue text span consists of one or more characters other than U+000A LINE FEED (LF) characters, U+000D CARRIAGE RETURN (CR) characters, U+0026 AMPERSAND characters (&), and U+003C LESS-THAN SIGN characters (<).
WebVTT cue span start tag annotation text consists of one or more characters other than U+000A LINE FEED (LF) characters, U+000D CARRIAGE RETURN (CR) characters, U+0026 AMPERSAND characters (&), and U+003E GREATER-THAN SIGN characters (>).
A WebVTT cue amp escape is the five character string
"&".
A WebVTT cue lt escape is the four character string
"<".
A WebVTT cue gt escape is the four character string
">".
A WebVTT parser, given an input byte stream and a text track list of cues output, must decode the byte stream as UTF-8, with error handling, and then must parse the resulting string according to the WebVTT parser algorithm below. This results in text track cues being added to output. [RFC3629]
A WebVTT parser, specifically its conversion and parsing steps, is typically run asynchronously, with the input byte stream being updated incrementally as the resource is downloaded; this is called an incremental WebVTT parser.
A WebVTT parser verifies a file signature before parsing the provided byte stream. If the stream lacks this WebVTT file signature, then the parser aborts.
The WebVTT parser algorithm is as follows:
Let input be the string being parsed, after conversion to Unicode, and with the following transformations applied:
Replace all U+0000 NULL characters by U+FFFD REPLACEMENT CHARACTERs.
Replace each U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pair by a single U+000A LINE FEED (LF) character.
Replace all remaining U+000D CARRIAGE RETURN characters by U+000A LINE FEED (LF) characters.
Let position be a pointer into input, initially pointing at the start of the string. In an incremental WebVTT parser, when this algorithm (or further algorithms that it uses) moves the position pointer, the user agent must wait until appropriate further characters from the byte stream have been added to input before moving the pointer, so that the algorithm never reads past the end of the input string. Once the byte stream has ended, and all characters have been added to input, then the position pointer may, when so instructed by the algorithms, be moved past the end of input.
If the character indicated by position is a U+FEFF BYTE ORDER MARK (BOM) character, advance position to the next character in input.
Collect a sequence of characters that are not U+000A LINE FEED (LF) characters. Let line be those characters, if any.
If line is less than six characters long, then abort these steps. The file does not start with the correct WebVTT file signature and was therefore not successfully processed.
If line is exactly six characters long
but does not exactly equal "WEBVTT", then
abort these steps. The file does not start with the correct
WebVTT file signature and was therefore not
successfully processed.
If line is more than six characters long
but the first six characters do not exactly equal "WEBVTT", or the seventh character is neither a
U+0020 SPACE character nor a U+0009 CHARACTER TABULATION (tab)
character, then abort these steps. The file does not start with the
correct WebVTT file signature and was therefore not
successfully processed.
If position is past the end of input, then abort these steps. The file does not start with the correct WebVTT file signature and was therefore not successfully processed.
The character indicated by position is a U+000A LINE FEED (LF) character. Advance position to the next character in input.
Header: Collect a sequence of characters that are not U+000A LINE FEED (LF) characters. Let line be those characters, if any.
If position is past the end of input, then jump to the step labeled end.
The character indicated by position is a U+000A LINE FEED (LF) character. Advance position to the next character in input.
If line contains the three-character
substring "-->" (U+002D HYPHEN-MINUS, U+002D
HYPHEN-MINUS, U+003E GREATER-THAN SIGN), then set the already collected line flag and jump to the step
labeled cue loop.
If line is not the empty string, then jump back to the step labeled header.
Cue loop: If the already collected line flag is set, then jump to the step labeled cue creation.
Collect a sequence of characters that are U+000A LINE FEED (LF) characters.
Collect a sequence of characters that are not U+000A LINE FEED (LF) characters. Let line be those characters, if any.
If line is the empty string, then jump to the step labeled end. (In such a case, position is also forcibly past the end of input.)
Cue creation: Let cue be a new text track cue associated with output's text track.
Let cue's text track cue identifier be the empty string.
Let cue's text track cue pause-on-exit flag be false.
Let cue's text track cue writing direction be horizontal.
Let cue's text track cue snap-to-lines flag be true.
Let cue's text track cue line position be auto.
Let cue's text track cue text position be 50.
Let cue's text track cue size be 100.
Let cue's text track cue alignment be middle alignment.
Let cue's text track cue text be the empty string.
If line contains the three-character
substring "-->" (U+002D HYPHEN-MINUS, U+002D
HYPHEN-MINUS, U+003E GREATER-THAN SIGN), then jump to the step
labeled timings below.
Let cue's text track cue identifier be line.
If position is past the end of input, then discard cue and jump to the step labeled end.
If the character indicated by position is a U+000A LINE FEED (LF) character, advance position to the next character in input.
Collect a sequence of characters that are not U+000A LINE FEED (LF) characters. Let line be those characters, if any.
If line is the empty string, then discard cue and jump to the step labeled cue loop.
Timings: Unset the already collected line flag.
Collect WebVTT cue timings and settings from line, using cue for the results. If that fails, jump to the step labeled bad cue.
Let cue text be the empty string.
Cue text loop: If position is past the end of input, then jump to the step labeled cue text processing.
If the character indicated by position is a U+000A LINE FEED (LF) character, advance position to the next character in input.
Collect a sequence of characters that are not U+000A LINE FEED (LF) characters. Let line be those characters, if any.
If line is the empty string, then jump to the step labeled cue text processing.
If line contains the three-character
substring "-->" (U+002D HYPHEN-MINUS, U+002D
HYPHEN-MINUS, U+003E GREATER-THAN SIGN), then set the already collected line flag and jump to the step
labeled cue text processing.
If cue text is not empty, append a U+000A LINE FEED (LF) character to cue text.
Let cue text be the concatenation of cue text and line.
Return to the step labeled cue text loop.
Cue text processing: Let the text track cue text of cue be cue text, and let the rules for its interpretation be the WebVTT cue text parsing rules, the WebVTT cue text rendering rules, and the WebVTT cue text DOM construction rules.
Add cue to the text track list of cues output.
Jump to the step labeled cue loop.
Bad cue: Discard cue.
Bad cue loop: If position is past the end of input, then jump to the step labeled end.
If the character indicated by position is a U+000A LINE FEED (LF) character, advance position to the next character in input.
Collect a sequence of characters that are not U+000A LINE FEED (LF) characters. Let line be those characters, if any.
If line contains the three-character
substring "-->" (U+002D HYPHEN-MINUS, U+002D
HYPHEN-MINUS, U+003E GREATER-THAN SIGN), then set the already collected line flag and jump to the step
labeled cue loop.
If line is the empty string, then jump to the step labeled cue loop.
Otherwise, jump to the step labeled bad cue loop.
End: The file has ended. Abort these steps. The WebVTT parser has finished.
When the algorithm above requires that the user agent collect WebVTT cue timings and settings from a string input for a text track cue cue, the user agent must run the following algorithm.
Let input be the string being parsed.
Let position be a pointer into input, initially pointing at the start of the string.
Skip whitespace.
Collect a WebVTT timestamp. If that algorithm fails, then abort these steps and return failure. Otherwise, let cue's text track cue start time be the collected time.
Skip whitespace.
If the character at position is not a U+002D HYPHEN-MINUS character (-) then abort these steps and return failure. Otherwise, move position forwards one character.
If the character at position is not a U+002D HYPHEN-MINUS character (-) then abort these steps and return failure. Otherwise, move position forwards one character.
If the character at position is not a U+003E GREATER-THAN SIGN character (>) then abort these steps and return failure. Otherwise, move position forwards one character.
Skip whitespace.
Collect a WebVTT timestamp. If that algorithm fails, then abort these steps and return failure. Otherwise, let cue's text track cue end time be the collected time.
Let remainder be the trailing substring of input starting at position.
Parse the WebVTT settings given by remainder for cue.
When the user agent is to parse the WebVTT settings given by a string input for a text track cue cue, the user agent must run the following steps:
Let settings be the result of splitting input on spaces.
For each token setting in the list settings, run the following substeps:
If setting does not contain a U+003A COLON character (:), or if the first U+003A COLON character (:) in setting is either the first or last character of setting, then jump to the step labeled next setting.
Let name be the leading substring of setting up to and excluding the first U+003A COLON character (:) in that string.
Let value be the trailing substring of setting starting from the character immediately after the first U+003A COLON character (:) in that string.
Run the appropriate substeps that apply for the value of name, as follows:
vertical"If value is a
case-sensitive match for the string "rl", then let cue's
text track cue writing direction be vertical growing left.
Otherwise, if value is a
case-sensitive match for the string "lr", then let cue's
text track cue writing direction be vertical growing right.
line"If value contains any characters other than U+002D HYPHEN-MINUS characters (-), U+0025 PERCENT SIGN characters (%), and characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then jump to the step labeled next setting.
If value does not contain at least one character in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then jump to the step labeled next setting.
If any character in value other than the first character is a U+002D HYPHEN-MINUS character (-), then jump to the step labeled next setting.
If any character in value other than the last character is a U+0025 PERCENT SIGN character (%), then jump to the step labeled next setting.
If the first character in value is a U+002D HYPHEN-MINUS character (-) and the last character in value is a U+0025 PERCENT SIGN character (%), then jump to the step labeled next setting.
Ignoring the trailing percent sign, if any, interpret value as a (potentially signed) integer, and let number be that number.
If the last character in value is a U+0025 PERCENT SIGN character (%), but number is not in the range 0 ≤ number ≤ 100, then jump to the step labeled next setting.
Let cue's text track cue line position be number.
If the last character in value is a U+0025 PERCENT SIGN character (%), then let cue's text track cue snap-to-lines flag be false. Otherwise, let it be true.
position"If value contains any characters other than U+0025 PERCENT SIGN characters (%) and characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then jump to the step labeled next setting.
If value does not contain at least one character in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then jump to the step labeled next setting.
If any character in value other than the last character is a U+0025 PERCENT SIGN character (%), then jump to the step labeled next setting.
If the last character in value is not a U+0025 PERCENT SIGN character (%), then jump to the step labeled next setting.
Ignoring the trailing percent sign, interpret value as an integer, and let number be that number.
If number is not in the range 0 ≤ number ≤ 100, then jump to the step labeled next setting.
Let cue's text track cue text position be number.
size"If value contains any characters other than U+0025 PERCENT SIGN characters (%) and characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then jump to the step labeled next setting.
If value does not contain at least one character in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then jump to the step labeled next setting.
If any character in value other than the last character is a U+0025 PERCENT SIGN character (%), then jump to the step labeled next setting.
If the last character in value is not a U+0025 PERCENT SIGN character (%), then jump to the step labeled next setting.
Ignoring the trailing percent sign, interpret value as an integer, and let number be that number.
If number is not in the range 0 ≤ number ≤ 100, then jump to the step labeled next setting.
Let cue's text track cue size be number.
align"If value is a
case-sensitive match for the string "start", then let cue's
text track cue alignment be start alignment.
If value is a
case-sensitive match for the string "middle", then let cue's
text track cue alignment be middle alignment.
If value is a
case-sensitive match for the string "end", then let cue's
text track cue alignment be end alignment.
Next setting: Continue to the next token, if any.
When this specification says that a user agent is to collect a WebVTT timestamp, the user agent must run the following steps:
Let input and position be the same variables as those of the same name in the algorithm that invoked these steps.
Let most significant units be minutes.
If position is past the end of input, return an error and abort these steps.
If the character indicated by position is not one of U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), then return an error and abort these steps.
Collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and let string be the collected substring.
Interpret string as a base-ten integer. Let value1 be that integer.
If string is not exactly two characters in length, or if value1 is greater than 59, let most significant units be hours.
If position is beyond the end of input or if the character at position is not a U+003A COLON character (:), then return an error and abort these steps. Otherwise, move position forwards one character.
Collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and let string be the collected substring.
If string is not exactly two characters in length, return an error and abort these steps.
Interpret string as a base-ten integer. Let value2 be that integer.
If most significant units is hours, or if position is not beyond the end of input and the character at position is a U+003A COLON character (:), run these substeps:
If position is beyond the end of input or if the character at position is not a U+003A COLON character (:), then return an error and abort these steps. Otherwise, move position forwards one character.
Collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and let string be the collected substring.
If string is not exactly two characters in length, return an error and abort these steps.
Interpret string as a base-ten integer. Let value3 be that integer.
Otherwise (if most significant units is not hours, and either position is beyond the end of input, or the character at position is not a U+003A COLON character (:)), let value3 have the value of value2, then value2 have the value of value1, then let value1 equal zero.
If position is beyond the end of input or if the character at position is not a U+002E FULL STOP character (.), then return an error and abort these steps. Otherwise, move position forwards one character.
Collect a sequence of characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), and let string be the collected substring.
If string is not exactly three characters in length, return an error and abort these steps.
Interpret string as a base-ten integer. Let value4 be that integer.
If value2 is greater than 59 or if value3 is greater than 59, return an error and abort these steps.
Let result be value1×60×60 + value2×60 + value3 + value4∕1000.
Return result.
A WebVTT Node Object is a conceptual construct used to represent components of WebVTT cue text so that its processing can be described without reference to the underlying syntax.
There are two broad classes of WebVTT Node Objects: WebVTT Internal Node Objects and WebVTT Leaf Node Objects.
WebVTT Internal Node Objects are those that can contain further WebVTT Node Objects. They are conceptually similar to elements in HTML or the DOM. WebVTT Internal Node Objects have an ordered list of child WebVTT Node Objects. The WebVTT Internal Node Object is said to be the parent of the children. Cycles do not occur; the parent-child relationships so constructed form a tree structure. WebVTT Internal Node Objects also have an ordered list of class names, know as their applicable classes.
There are several concrete classes of WebVTT Internal Node Objects:
These are used as root nodes for trees of WebVTT Node Objects.
These represent spans of text (a WebVTT cue class span) in WebVTT cue text, and are used to annotate parts of the cue with applicable classes without implying further meaning (such as italics or bold).
These represent spans of italic text (a WebVTT cue italics span) in WebVTT cue text.
These represent spans of bold text (a WebVTT cue bold span) in WebVTT cue text.
These represent spans of underline text (a WebVTT cue underline span) in WebVTT cue text.
These represent spans of ruby (a WebVTT cue ruby span) in WebVTT cue text.
These represent spans of ruby text (a WebVTT cue ruby text span) in WebVTT cue text.
These represent spans of text associated with a specific voice (a WebVTT cue voice span) in WebVTT cue text. A WebVTT Voice Object has a value, which is the name of the voice.
WebVTT Leaf Node Objects are those that contain data, such as text, and cannot contain child WebVTT Node Objects.
There are two concrete classes of WebVTT Leaf Node Objects:
A fragment of text. A WebVTT Text Object has a value, which is the text it represents.
A timestamp. A WebVTT Timestamp Object has a value, in seconds and fractions of a second, which is the time represented by the timestamp.
To parse a string input supposedly containing WebVTT cue text, user agents must use the following algorithm. This algorithm returns a list of WebVTT Node Objects.
Let input be the string being parsed.
Let position be a pointer into input, initially pointing at the start of the string.
Let result be a List of WebVTT Node Objects, initially empty.
Let current be the WebVTT Internal Node Object result.
Loop: If position is past the end of input, return result and abort these steps.
Let token be the result of invoking the WebVTT cue text tokenizer.
Run the appropriate steps given the type of token:
Create a WebVTT Text Object whose value is the value of the string token token.
Append the newly created WebVTT Text Object to current.
How the start tag token token is processed depends on its tag name, as follows:
c"Attach a WebVTT Class Object.
i"Attach a WebVTT Italic Object.
b"Attach a WebVTT Bold Object.
u"Attach a WebVTT Underline Object.
ruby"Attach a WebVTT Ruby Object.
rt"If current is a WebVTT Ruby Object, then attach a WebVTT Ruby Text Object.
v"Attach a WebVTT Voice Object, and set its value to the token's annotation string, or the empty string if there is no annotation string.
Ignore the token.
When the steps above say to attach a WebVTT Internal Node Object of a particular concrete class, the user agent must run the following steps:
Create a new WebVTT Internal Node Object of the specified concrete class.
Set the new object's list of applicable classes to the list of classes in the token, excluding any classes that are the empty string.
Append the newly created node object to current.
Let current be the newly created node object.
If any of the following conditions is true, then let current be the parent node of current.
c" and current is
a WebVTT Class Object.i" and current is
a WebVTT Italic Object.b" and current is
a WebVTT Bold Object.u" and current is
a WebVTT Underline Object.ruby" and current is
a WebVTT Ruby Object.rt" and current is
a WebVTT Ruby Text Object.v" and current is
a WebVTT Voice Object.Otherwise, if the tag name of the end tag token token is "ruby" and current is a WebVTT Ruby Text
Object, then let current be the
parent node of the parent node of current.
Otherwise, ignore the token.
Let input be the tag value.
Let position be a pointer into input, initially pointing at the start of the string.
Collect a WebVTT timestamp.
If that algorithm does not fail, and if position now points at the end of input (i.e. there are no trailing characters after the timestamp), then create a WebVTT Timestamp Object whose value is the collected time, then append it to current.
Otherwise, ignore the token.
Jump to the step labeled loop.
The WebVTT cue text tokenizer is as follows. It emits a token, which is either a string (whose value is a sequence of characters), a start tag (with a tag name, a list of classes, and optionally an annotation), an end tag (with a tag name), or a timestamp tag (with a tag value).
Let input and position be the same variables as those of the same name in the algorithm that invoked these steps.
Let tokenizer state be WebVTT data state.
Let result be the empty string.
Let buffer be the empty string.
Let classes be an empty list.
Loop: If position is past the end of input, let c be an end-of-file marker. Otherwise, let c be the character in input pointed to by position.
An end-of-file marker is not a Unicode character, it is used to end the tokenizer.
Jump to the state given by tokenizer state:
Jump to the entry that matches the value of c:
Set buffer to c, set tokenizer state to the WebVTT escape state, and jump to the step labeled next.
If result is the empty string, then set tokenizer state to the WebVTT tag state and jump to the step labeled next.
Otherwise, return a string token whose value is result and abort these steps.
Return a string token whose value is result and abort these steps.
Append c to result and jump to the step labeled next.
Jump to the entry that matches the value of c:
Append buffer to result, set buffer to c, and jump to the step labeled next.
Append c to buffer and jump to the step labeled next.
First, examine the value of buffer:
If buffer is the string "&", then append a U+0026 AMPERSAND
character (&) to result.
If buffer is the string "<", then append a U+003C LESS-THAN SIGN
character (<) to result.
If buffer is the string ">", then append a U+003E GREATER-THAN SIGN
character (>) to result.
Otherwise, append buffer followed by a U+003B SEMICOLON character (;) to result.
Then, in any case, set tokenizer state to the WebVTT data state, and jump to the step labeled next.
Append buffer to result, return a string token whose value is result, and abort these steps.
Append buffer to result, append c to result, set tokenizer state to the WebVTT data state, and jump to the step labeled next.
Jump to the entry that matches the value of c:
Set tokenizer state to the WebVTT start tag annotation state, and jump to the step labeled next.
Set tokenizer state to the WebVTT start tag class state, and jump to the step labeled next.
Set tokenizer state to the WebVTT end tag state, and jump to the step labeled next.
Set result to c, set tokenizer state to the WebVTT timestamp tag state, and jump to the step labeled next.
Advance position to the next character in input, then jump to the next "end-of-file marker" entry below.
Return a start tag whose tag name is the empty string, with no classes and no annotation, and abort these steps.
Set result to c, set tokenizer state to the WebVTT start tag state, and jump to the step labeled next.
Jump to the entry that matches the value of c:
Set tokenizer state to the WebVTT start tag annotation state, and jump to the step labeled next.
Set buffer to c, set tokenizer state to the WebVTT start tag annotation state, and jump to the step labeled next.
Set tokenizer state to the WebVTT start tag class state, and jump to the step labeled next.
Advance position to the next character in input, then jump to the next "end-of-file marker" entry below.
Return a start tag whose tag name is result, with no classes and no annotation, and abort these steps.
Append c to result and jump to the step labeled next.
Jump to the entry that matches the value of c:
Append to classes an entry whose value is buffer, set buffer to the empty string, set tokenizer state to the WebVTT start tag annotation state, and jump to the step labeled next.
Append to classes an entry whose value is buffer, set buffer to c, set tokenizer state to the WebVTT start tag annotation state, and jump to the step labeled next.
Append to classes an entry whose value is buffer, set buffer to the empty string, and jump to the step labeled next.
Advance position to the next character in input, then jump to the next "end-of-file marker" entry below.
Append to classes an entry whose value is buffer, then return a start tag whose tag name is result, with the classes given in classes but no annotation, and abort these steps.
Append c to buffer and jump to the step labeled next.
Jump to the entry that matches the value of c:
Advance position to the next character in input, then jump to the next "end-of-file marker" entry below.
Remove any leading or trailing space characters from buffer, and replace any sequence of one or more consecutive space characters in buffer with a single U+0020 SPACE character; then, return a start tag whose tag name is result, with the classes given in classes, and with buffer as the annotation, and abort these steps.
Append c to buffer and jump to the step labeled next.
Jump to the entry that matches the value of c:
Advance position to the next character in input, then jump to the next "end-of-file marker" entry below.
Return an end tag whose tag name is result and abort these steps.
Append c to result and jump to the step labeled next.
Jump to the entry that matches the value of c:
Advance position to the next character in input, then jump to the next "end-of-file marker" entry below.
Return a timestamp tag whose tag name is result and abort these steps.
Append c to result and jump to the step labeled next.
Next: Advance position to the next character in input.
Jump to the step labeled loop.
To convert a List of WebVTT Node Objects to a DOM
tree for Document owner, user
agents must create a tree of DOM nodes that is isomorphous to the
tree of WebVTT Node Objects,
with the following mapping of WebVTT Node Objects to DOM nodes:
| WebVTT Node Object | DOM node |
|---|---|
| List of WebVTT Node Objects | DocumentFragment node
|
| WebVTT Class Object | HTMLElement element node with localName "span".
|
| WebVTT Italic Object | HTMLElement element node with localName "i".
|
| WebVTT Bold Object | HTMLElement element node with localName "b".
|
| WebVTT Underline Object | HTMLElement element node with localName "u".
|
| WebVTT Ruby Object | HTMLElement element node with localName "ruby".
|
| WebVTT Ruby Text Object | HTMLElement element node with localName "rt".
|
| WebVTT Voice Object | HTMLElement element node with localName "span", a title attribute set to the WebVTT Voice Object's value.
|
| WebVTT Text Object | Text node whose character data is the value of the WebVTT Text Object.
|
| WebVTT Timestamp Object | ProcessingInstruction node whose target is "timestamp" and whose data is a WebVTT timestamp representing the value of the WebVTT Timestamp Object, with all optional components included.
|
HTMLElement nodes created as part of the mapping
described above must have their namespaceURI set to the
HTML namespace, and must have a class attribute set to the string obtained
by concatenating all the classes that apply to the corresponding
WebVTT Internal Node Object, each separated from the
next by a single U+0020 SPACE character.
The ownerDocument
attribute of all nodes in the DOM tree must be set to the given
document owner.
All characteristics of the DOM nodes that are not described above or dependent on characteristics defined above must be left at their initial values.
The controls
attribute is a boolean attribute. If present, it
indicates that the author has not provided a scripted controller and
would like the user agent to provide its own set of controls.
If the attribute is present, or if scripting is disabled for the media element, then the user agent should expose a user interface to the user. This user interface should include features to begin playback, pause playback, seek to an arbitrary position in the content (if the content supports arbitrary seeking), change the volume, change the display of closed captions or embedded sign-language tracks, select different audio tracks or turn on audio descriptions, and show the media content in manners more suitable to the user (e.g. full-screen video or in an independent resizable window). Other controls may also be made available.
If the media element has a current media
controller, then the user agent should expose audio tracks
from all the slaved media elements (although avoiding
duplicates if the same media resource is being used
several times). If a media resource's audio track
exposed in this way has no known name, and it is the only audio
track for a particular media element, the user agent
should use the element's title
attribute, if any, as the name (or as part of the name) of that
track.
Even when the attribute is absent, however, user agents may provide controls to affect playback of the media resource (e.g. play, pause, seeking, and volume controls), but such features should not interfere with the page's normal rendering. For example, such features could be exposed in the media element's context menu.
Where possible (specifically, for starting, stopping, pausing, and unpausing playback, for seeking, for changing the rate of playback, for fast-forwarding or rewinding, for listing, enabling, and disabling text tracks, and for muting or changing the volume of the audio), user interface features exposed by the user agent must be implemented in terms of the DOM API described above, so that, e.g., all the same events fire.
When a media element has a current media
controller, the user agent's user interface for pausing and
unpausing playback, for seeking, for changing the rate of playback,
for fast-forwarding or rewinding, and for muting or changing the
volume of audio of the entire group must be implemented in terms of
the MediaController API exposed on that current
media controller.
The "play" function in the user agent's interface must set the
playbackRate attribute to the value of the
defaultPlaybackRate attribute before invoking
the play() method.
When a media element has a current media
controller, the attributes and method with those names on
that MediaController object must be used. Otherwise,
the attributes and method with those names on the media
element itself must be used.
Features such as fast-forward or rewind must be implemented by
only changing the playbackRate attribute (and
not the defaultPlaybackRate attribute).
Again, when a media element has a current media
controller, the attributes with those names on that
MediaController object must be used; otherwise, the
attributes with those names on the media element itself
must be used.
When a media element has a current media
controller, and all the slaved media elements of
that MediaController are paused, the user agent should
unpause all the slaved media elements when the user
invokes a user agent interface control for beginning playback.
When a media element has a current media
controller, seeking must be implemented in terms of the currentTime attribute
on that MediaController object. Otherwise, the user
agent must directly seek to the
requested position in the media element's media
timeline.
When a media element has a current media
controller, user agents may additionally provide the user
with controls that directly manipulate an individual media
element without affecting the MediaController,
but such features are considered relatively advanced and unlikely to
be useful to most users.
For the purposes of listing chapters in the media
resource, only text tracks in
the media element's list of text tracks
showing or showing by default and whose
text track kind is chapters should be used.
Such tracks must be interpreted according to the rules for
constructing the chapter tree from a text track.
The controls
IDL attribute must reflect the content attribute of the
same name.
volume [ = value ]Returns the current playback volume, as a number in the range 0.0 to 1.0, where 0.0 is the quietest and 1.0 the loudest.
Can be set, to change the volume.
Throws an IndexSizeError if the new value is not
in the range 0.0 .. 1.0.
muted [ = value ]Returns true if audio is muted, overriding the volume attribute, and false if the
volume attribute is being
honored.
Can be set, to change whether the audio is muted or not.
The volume
attribute must return the playback volume of any audio portions of
the media element, in the range 0.0 (silent) to 1.0
(loudest). Initially, the volume should be 1.0, but user agents may
remember the last set value across sessions, on a per-site basis or
otherwise, so the volume may start at other values. On setting, if
the new value is in the range 0.0 to 1.0 inclusive, the playback
volume of any audio portions of the media element must
be set to the new value. If the new value is outside the range 0.0
to 1.0 inclusive, then, on setting, an IndexSizeError
exception must be thrown instead.
The muted
attribute must return true if the audio output is muted and false
otherwise. Initially, the audio output should not be muted (false),
but user agents may remember the last set value across sessions, on
a per-site basis or otherwise, so the muted state may start as muted
(true). On setting, if the new value is true then the audio output
should be muted and if the new value is false it should be
unmuted.
Whenever either of the values that would be returned by the volume and muted attributes change, the user
agent must queue a task to fire a simple
event named volumechange at the
media element.
An element's effective media volume is determined as follows:
If the user has indicated that the user agent is to override the volume of the element, then the element's effective media volume is the volume desired by the user. Abort these steps.
If the element's audio output is muted, the element's effective media volume is zero. Abort these steps.
If the element has a current media controller
and that MediaController object's media
controller mute override is true, the element's
effective media volume is zero. Abort these
steps.
Let volume be the playback volume of the audio portions of the media element, in range 0.0 (silent) to 1.0 (loudest).
If the element has a current media controller,
multiply volume by that
MediaController object's media controller volume
multiplier.
The element's effective media volume is volume, interpreted relative to the range 0.0 to 1.0, with 0.0 being silent, and 1.0 being the loudest setting, values in between increasing in loudness. The range need not be linear. The loudest setting may be lower than the system's loudest possible setting; for example the user could have set a maximum volume.
The muted
attribute on media elements is a
boolean attribute that controls the default state of
the audio output of the media resource, potentially
overriding user preferences.
When a media element is created, if it has a muted attribute specified, the user
agent must mute the media element's audio output,
overriding any user preference.
The defaultMuted IDL
attribute must reflect the muted content attribute.
This attribute has no dynamic effect (it only controls the default state of the element).
This video (an advertisment) autoplays, but to avoid annoying users, it does so without sound, and allows the user to turn the sound on.
<video src="adverts.cgi?kind=video" controls autoplay loop muted></video>
Objects implementing the TimeRanges interface
represent a list of ranges (periods) of time.
interface TimeRanges {
readonly attribute unsigned long length;
double start(unsigned long index);
double end(unsigned long index);
};
lengthReturns the number of ranges in the object.
start(index)Returns the time for the start of the range with the given index.
Throws an IndexSizeError if the index is out of range.
end(index)Returns the time for the end of the range with the given index.
Throws an IndexSizeError if the index is out of range.
The length
IDL attribute must return the number of ranges represented by the object.
The start(index) method must return the position
of the start of the indexth range represented by
the object, in seconds measured from the start of the timeline that
the object covers.
The end(index) method must return the position
of the end of the indexth range represented by
the object, in seconds measured from the start of the timeline that
the object covers.
These methods must throw IndexSizeError exceptions
if called with an index argument greater than or
equal to the number of ranges represented by the object.
When a TimeRanges object is said to be a
normalized TimeRanges object, the ranges it
represents must obey the following criteria:
In other words, the ranges in such an object are ordered, don't overlap, aren't empty, and don't touch (adjacent ranges are folded into one bigger range).
Ranges in a TimeRanges object must be inclusive.
Thus, the end of a range would be equal to the start of a following adjacent (touching but not overlapping) range. Similarly, a range covering a whole timeline anchored at zero would have a start equal to zero and an end equal to the duration of the timeline.
The timelines used by the objects returned by the buffered, seekable and played IDL attributes of media elements must be that element's
media timeline.
[Constructor(DOMString type, optional TrackEventInit eventInitDict)] interface TrackEvent : Event { readonly attribute object? track; }; dictionary TrackEventInit : EventInit { object? track; };
trackReturns the track object (TextTrack,
AudioTrack, or VideoTrack) to which the
event relates.
The track
attribute must return the value it was initialized to. When the
object is created, this attribute must be initialized to null. It
represents the context information for the event.
This section is non-normative.
The following events fire on media elements as part of the processing model described above:
| Event name | Interface | Fired when... | Preconditions |
|---|---|---|---|
loadstart
| Event
| The user agent begins looking for media data, as part of the resource selection algorithm. | networkState equals NETWORK_LOADING
|
progress
| Event
| The user agent is fetching media data. | networkState equals NETWORK_LOADING
|
suspend
| Event
| The user agent is intentionally not currently fetching media data. | networkState equals NETWORK_IDLE
|
abort
| Event
| The user agent stops fetching the media data before it is completely downloaded, but not due to an error. | error is an object with the code MEDIA_ERR_ABORTED.
networkState equals either NETWORK_EMPTY or NETWORK_IDLE, depending on when the download was aborted.
|
error
| Event
| An error occurs while fetching the media data. | error is an object with the code MEDIA_ERR_NETWORK or higher.
networkState equals either NETWORK_EMPTY or NETWORK_IDLE, depending on when the download was aborted.
|
emptied
| Event
| A media element whose networkState was previously not in the NETWORK_EMPTY state has just switched to that state (either because of a fatal error during load that's about to be reported, or because the load() method was invoked while the resource selection algorithm was already running).
| networkState is NETWORK_EMPTY; all the IDL attributes are in their initial states.
|
stalled
| Event
| The user agent is trying to fetch media data, but data is unexpectedly not forthcoming. | networkState is NETWORK_LOADING.
|
loadedmetadata
| Event
| The user agent has just determined the duration and dimensions of the media resource and the text tracks are ready. | readyState is newly equal to HAVE_METADATA or greater for the first time.
|
loadeddata
| Event
| The user agent can render the media data at the current playback position for the first time. | readyState newly increased to HAVE_CURRENT_DATA or greater for the first time.
|
canplay
| Event
| The user agent can resume playback of the media data, but estimates that if playback were to be started now, the media resource could not be rendered at the current playback rate up to its end without having to stop for further buffering of content. | readyState newly increased to HAVE_FUTURE_DATA or greater.
|
canplaythrough
| Event
| The user agent estimates that if playback were to be started now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering. | readyState is newly equal to HAVE_ENOUGH_DATA.
|
playing
| Event
| Playback is ready to start after having been paused or delayed due to lack of media data. | readyState is newly equal to or greater than HAVE_FUTURE_DATA and paused is false, or paused is newly false and readyState is equal to or greater than HAVE_FUTURE_DATA. Even if this event fires, the element might still not be potentially playing, e.g. if
the element is blocked on its media controller (e.g. because the current media controller is paused, or another slaved media element is stalled somehow, or because the media resource has no data corresponding to the media controller position), or
the element is paused for user interaction or paused for in-band content.
|
waiting
| Event
| Playback has stopped because the next frame is not available, but the user agent expects that frame to become available in due course. | readyState is equal to or less than HAVE_CURRENT_DATA, and paused is false. Either seeking is true, or the current playback position is not contained in any of the ranges in buffered. It is possible for playback to stop for other reasons without paused being false, but those reasons do not fire this event (and when those situations resolve, a separate playing event is not fired either): e.g.
the element is newly blocked on its media controller, or
playback ended, or playback stopped due to errors, or the element has paused for user interaction or paused for in-band content.
|
seeking
| Event
| The seeking IDL attribute changed to true.
| |
seeked
| Event
| The seeking IDL attribute changed to false.
| |
ended
| Event
| Playback has stopped because the end of the media resource was reached. | currentTime equals the end of the media resource; ended is true.
|
durationchange
| Event
| The duration attribute has just been updated.
| |
timeupdate
| Event
| The current playback position changed as part of normal playback or in an especially interesting way, for example discontinuously. | |
play
| Event
| The element is no longer paused. Fired after the play() method has returned, or when the autoplay attribute has caused playback to begin.
| paused is newly false.
|
pause
| Event
| The element has been paused. Fired after the pause() method has returned.
| paused is newly true.
|
ratechange
| Event
| Either the defaultPlaybackRate or the playbackRate attribute has just been updated.
| |
volumechange
| Event
| Either the volume attribute or the muted attribute has changed. Fired after the relevant attribute's setter has returned.
|
The following events fire on MediaController objects:
| Event name | Interface | Fired when... |
|---|---|---|
emptied
| Event
| All the slaved media elements newly have readyState set to HAVE_NOTHING or greater, or there are no longer any slaved media elements.
|
loadedmetadata
| Event
| All the slaved media elements newly have readyState set to HAVE_METADATA or greater.
|
loadeddata
| Event
| All the slaved media elements newly have readyState set to HAVE_CURRENT_DATA or greater.
|
canplay
| Event
| All the slaved media elements newly have readyState set to HAVE_FUTURE_DATA or greater.
|
canplaythrough
| Event
| All the slaved media elements newly have readyState set to HAVE_ENOUGH_DATA or greater.
|
playing
| Event
| The MediaController is no longer a blocked media controller.
|
ended
| Event
| The MediaController has reached the end of all the slaved media elements.
|
waiting
| Event
| The MediaController is now a blocked media controller.
|
ended
| Event
| All the slaved media elements have newly ended playback. |
durationchange
| Event
| The duration attribute has just been updated.
|
timeupdate
| Event
| The media controller position changed. |
play
| Event
| The paused attribute is newly false.
|
pause
| Event
| The paused attribute is newly true.
|
ratechange
| Event
| Either the defaultPlaybackRate attribute or the playbackRate attribute has just been updated.
|
volumechange
| Event
| Either the volume attribute or the muted attribute has just been updated.
|
The main security and privacy implications of the
video and audio elements come from the
ability to embed media cross-origin. There are two directions that
threats can flow: from hostile content to a victim page, and from a
hostile page to victim content.
If a victim page embeds hostile content, the threat is that the
content might contain scripted code that attempts to interact with
the Document that embeds the content. To avoid this,
user agents must ensure that there is no access from the content to
the embedding page. In the case of media content that uses DOM
concepts, the embedded content must be treated as if it was in its
own unrelated top-level browsing context.
For instance, if an SVG animation was embedded in
a video element, the user agent would not give it
access to the DOM of the outer page. From the perspective of scripts
in the SVG resource, the SVG file would appear to be in a lone
top-level browsing context with no parent.
If a hostile page embeds victim content, the threat is that the
embedding page could obtain information from the content that it
would not otherwise have access to. The API does expose some
information: the existence of the media, its type, its duration, its
size, and the performance characteristics of its host. Such
information is already potentially problematic, but in practice the
same information can more or less be obtained using the
img element, and so it has been deemed acceptable.
However, significantly more sensitive information could be
obtained if the user agent further exposes metadata within the
content such as subtitles or chapter titles. Such information is
therefore only exposed if the video resource passes a CORS
resource sharing check. The crossorigin attribute allows
authors to control how this check is performed. [CORS]
Without this restriction, an attacker could trick a user running within a corporate network into visiting a site that attempts to load a video from a previously leaked location on the corporation's intranet. If such a video included confidential plans for a new product, then being able to read the subtitles would present a serious confidentiality breach.
This section is non-normative.
Playing audio and video resources on small devices such as
set-top boxes or mobile phones is often constrained by limited
hardware resources in the device. For example, a device might only
support three simultaneous videos. For this reason, it is a good
practice to release resources held by media elements when they are done playing, either by
being very careful about removing all references to the element and
allowing it to be garbage collected, or, even better, by removing
the element's src attribute and
any source element descendants, and invoking the
element's load() method.
Similarly, when the playback rate is not exactly 1.0, hardware, software, or format limitations can cause video frames to be dropped and audio to be choppy or muted.
This section is non-normative.
How accurately various aspects of the media element API are implemented is considered a quality-of-implementation issue.
For example, when implementing the buffered attribute, how precise
an implementation reports the ranges that have been buffered depends
on how carefully the user agent inspects the data. Since the API
reports ranges as times, but the data is obtained in byte streams, a
user agent receiving a variable-bit-rate stream might only be able
to determine precise times by actually decoding all of the data.
User agents aren't required to do this, however; they can instead
return estimates (e.g. based on the average bit rate seen so far)
which get revised as more information becomes available.
As a general rule, user agents are urged to be conservative rather than optimistic. For example, it would be bad to report that everything had been buffered when it had not.
Another quality-of-implementation issue would be playing a video backwards when the codec is designed only for forward playback (e.g. there aren't many key frames, and they are far apart, and the intervening frames only have deltas from the previous frame). User agents could do a poor job, e.g. only showing key frames; however, better implementations would do more work and thus do a better job, e.g. actually decoding parts of the video forwards, storing the complete frames, and then playing the frames backwards.
Similarly, while implementations are allowed to drop buffered data at any time (there is no requirement that a user agent keep all the media data obtained for the lifetime of the media element), it is again a quality of implementation issue: user agents with sufficient resources to keep all the data around are encouraged to do so, as this allows for a better user experience. For example, if the user is watching a live stream, a user agent could allow the user only to view the live video; however, a better user agent would buffer everything and allow the user to seek through the earlier material, pause it, play it forwards and backwards, etc.
When multiple tracks are synchronised with a
MediaController, it is possible for scripts to add and
remove media elements from the MediaController's list
of slaved media elements, even while these tracks are
playing. How smoothly the media plays back in such situations is
another quality-of-implementation issue.
When a media element that is paused is removed from a document and not reinserted before the next time the event loop spins, implementations that are resource constrained are encouraged to take that opportunity to release all hardware resources (like video planes, networking resources, and data buffers) used by the media element. (User agents still have to keep track of the playback position and so forth, though, in case playback is later restarted.)
canvas elementa elements, button elements, input elements whose type attribute are in the Checkbox or Radio Button states, and input elements that are buttons.widthheightinterface HTMLCanvasElement : HTMLElement { attribute unsigned long width; attribute unsigned long height; DOMString toDataURL(optional DOMString type, any... args); void toBlob(FileCallback? callback, optional DOMString type, any... args); object? getContext(DOMString contextId, any... args); };
The canvas element provides scripts with a
resolution-dependent bitmap canvas, which can be used for rendering
graphs, game graphics, or other visual images on the fly.
Authors should not use the canvas element in a
document when a more suitable element is available. For example, it
is inappropriate to use a canvas element to render a
page heading: if the desired presentation of the heading is
graphically intense, it should be marked up using appropriate
elements (typically h1) and then styled using CSS and
supporting technologies such as XBL.
When authors use the canvas element, they must also
provide content that, when presented to the user, conveys
essentially the same function or purpose as the bitmap canvas. This
content may be placed as content of the canvas
element. The contents of the canvas element, if any,
are the element's fallback content.
In interactive visual media, if scripting is enabled for the
canvas element, and if support for canvas
elements has been enabled, the canvas element
represents embedded content consisting of
a dynamically created image.
In non-interactive, static, visual media, if the
canvas element has been previously painted on (e.g. if
the page was viewed in an interactive visual medium and is now being
printed, or if some script that ran during the page layout process
painted on the element), then the canvas element
represents embedded content with the
current image and size. Otherwise, the element represents its
fallback content instead.
In non-visual media, and in visual media if scripting is disabled for the
canvas element or if support for canvas
elements has been disabled, the canvas element
represents its fallback content
instead.
When a canvas element represents
embedded content, the user can still focus descendants
of the canvas element (in the fallback
content). When an element is focused, it is the target of
keyboard interaction events (even though the element itself is not
visible). This allows authors to make an interactive canvas
keyboard-accessible: authors should have a one-to-one mapping of
interactive regions to focusable elements in the fallback
content. (Focus has no effect on mouse interaction
events.) [DOMEVENTS]
The canvas element has two attributes to control the
size of the coordinate space: width and height. These
attributes, when specified, must have values that are valid non-negative
integers. The rules for parsing
non-negative integers must be used to obtain their numeric
values. If an attribute is missing, or if parsing its value returns
an error, then the default value must be used instead. The
width attribute defaults to
300, and the height
attribute defaults to 150.
The intrinsic dimensions of the canvas element equal
the size of the coordinate space, with the numbers interpreted in
CSS pixels. However, the element can be sized arbitrarily by a
style sheet. During rendering, the image is scaled to fit this layout
size.
The size of the coordinate space does not necessarily represent the size of the actual bitmap that the user agent will use internally or during rendering. On high-definition displays, for instance, the user agent may internally use a bitmap with two device pixels per unit in the coordinate space, so that the rendering remains at high quality throughout.
When the canvas element is created, and subsequently
whenever the width and height attributes are set (whether
to a new value or to the previous value), the bitmap and any
associated contexts must be cleared back to their initial state and
reinitialized with the newly specified coordinate space
dimensions.
When the canvas is initialized, its bitmap must be cleared to transparent black.
When a canvas element does not represent its
fallback content, it provides a paint
source whose width is the element's intrinsic width, whose
height is the element's intrinsic height, and whose appearance is
the element's bitmap.
The width and
height IDL
attributes must reflect the respective content
attributes of the same name, with the same defaults.
Only one square appears to be drawn in the following example:
// canvas is a reference to a <canvas> element
var context = canvas.getContext('2d');
context.fillRect(0,0,50,50);
canvas.setAttribute('width', '300'); // clears the canvas
context.fillRect(0,100,50,50);
canvas.width = canvas.width; // clears the canvas
context.fillRect(100,0,50,50); // only this square remains
getContext(contextId [, ... ])Returns an object that exposes an API for drawing on the canvas. The first argument specifies the desired API. Subsequent arguments are handled by that API.
This specification defines the "2d" context below. There is also
a specification that defines a "webgl" context. [WEBGL]
The list of defined contexts is given on the WHATWG Wiki CanvasContexts page. [WHATWGWIKI]
Returns null if the given context ID is not supported or if the
canvas has already been initialized with some other (incompatible)
context type (e.g. trying to get a "2d" context after getting a
"webgl" context).
A canvas element can have a primary
context, which is the first context to have been obtained for
that element. When created, a canvas element must not
have a primary context.
The most commonly used primary context is the HTML Canvas 2D Context.
The getContext(contextId, args...)
method of the canvas element, when invoked, must run
the following steps:
Let contextId be the first argument to the method.
If contextId is not the name of a context supported by the user agent, return null and abort these steps.
An example of this would be a user agent that
theoretically supports the "webgl" 3D context, in the case
where the platform does not have hardware support for OpenGL and
the user agent does not have a software OpenGL implementation.
Despite the user agent recognising the "webgl" name, it would return
null at this step because that context is not, in practice,
supported at the time of the call.
If the element has a primary context and that context's entry in the WHATWG Wiki CanvasContexts page does not list contextId as a context with which it is compatible, return null and abort these steps. [WHATWGWIKI]
If the element does not have a primary context, let the element's primary context be contextId.
If the getContext() method has
already been invoked on this element for the same contextId, return the same object as was returned
that time, and abort these steps. The additional arguments are
ignored.
Return a new object for contextId, as defined by the specification given for contextId's entry in the WHATWG Wiki CanvasContexts page. [WHATWGWIKI]
New context types may be registered in the WHATWG Wiki CanvasContexts page. [WHATWGWIKI]
Anyone is free to edit the WHATWG Wiki CanvasContexts page at any time to add a new context type. These new context types must be specified with the following information:
The value of contextID that will return the object for the new API.
A link to a formal specification of the context type's API. It could be another page on the Wiki, or a link to an external page. If the type does not have a formal specification, an informal description can be substituted until such time as a formal specification is available.
The list of context types that are compatible with this one (i.e. that operate on the same underlying bitmap). This list must be transitive and symmetric; if one context type is defined as compatible with another, then all types it is compatible with must be compatible with all types the other is compatible with.
Vendors may also define experimental contexts using the syntax
vendorname-context, for example,
moz-3d. Such contexts should be registered in the
WHATWG Wiki CanvasContexts page.
toDataURL( [ type, ... ])Returns a data: URL for the image in the canvas.
The first argument, if provided, controls the type of the image
to be returned (e.g. PNG or JPEG). The default is image/png; that type is also used if the given
type isn't supported. The other arguments are specific to the
type, and control the way that the image is generated, as given in
the table below.
When trying to use types other than "image/png",
authors can check if the image was really returned in the
requested format by checking to see if the returned string starts
with one of the exact strings "data:image/png," or "data:image/png;". If it does, the image is PNG,
and thus the requested type was not supported. (The one exception
to this is if the canvas has either no height or no width, in
which case the result might simply be "data:,".)
toBlob(callback [, type, ... ])Creates a Blob object representing a file
containing the image in the canvas, and invokes a callback with a
handle to that object.
The second argument, if provided, controls the type of the
image to be returned (e.g. PNG or JPEG). The default is image/png; that type is also used if the given
type isn't supported. The other arguments are specific to the
type, and control the way that the image is generated, as given in
the table below.
The toDataURL() method
must run the following steps:
If the canvas element's origin-clean
flag is set to false, throw a SecurityError exception
and abort these steps.
If the canvas has no pixels (i.e. either its horizontal
dimension or its vertical dimension is zero) then return the string
"data:," and abort these steps. (This is the
shortest data:
URL; it represents the empty string in a text/plain resource.)
Let file be a serialization of the image as a file, using the method's arguments (if any) as the arguments.
Return a data: URL representing file. [RFC2397]
The toBlob() method
must run the following steps:
If the canvas element's origin-clean
flag is set to false, throw a SecurityError exception
and abort these steps.
Let callback be the first argument.
Let arguments be the second and subsequent arguments to the method, if any.
If the canvas has no pixels (i.e. either its horizontal dimension or its vertical dimension is zero) then let result be null.
Otherwise, let result be a
Blob object representing a serialization of the
image as a file, using arguments. [FILEAPI]
Return, but continue running these steps asynchronously.
If callback is null, abort these steps.
Queue a task to invoke the
FileCallback callback with result as its argument. The task source
for this task is the canvas blob serialization task
source. [FILESYSTEMAPI]
When a user agent is to create a serialization of the image as a file, optionally with some given arguments, it must create an image file in the format given by the first value of arguments, or, if there are no arguments, in the PNG format. [PNG]
If arguments is not empty, the first value must be interpreted as a MIME type giving the format to use. If the type has any parameters, it must be treated as not supported.
For example, the value "image/png" would
mean to generate a PNG image, the value "image/jpeg"
would mean to generate a JPEG image, and the value
"image/svg+xml" would mean to generate an SVG image
(which would probably require that the implementation actually keep
enough information to reliably render an SVG image from the canvas).
User agents must support PNG ("image/png"). User
agents may support other types. If the user agent does not support
the requested type, it must create the file using the PNG format. [PNG]
User agents must convert the provided type to ASCII lowercase before establishing if they support that type.
For image types that do not support an alpha channel, the serialized image must be the canvas image composited onto a solid black background using the source-over operator.
If the first argument in arguments gives a type corresponding to one of the types given in the first column of the following table, and the user agent supports that type, then the subsequent arguments, if any, must be treated as described in the second cell of that row.
| Type | Other arguments | Reference |
|---|---|---|
image/jpeg
| The second argument, if it is a number in the range 0.0 to 1.0 inclusive, must be treated as the desired quality level. If it is not a number or is outside that range, the user agent must use its default value, as if the argument had been omitted. | [JPEG] |
For the purposes of these rules, an argument is considered to be
a number if it is converted to an IDL double value by the rules for
handling arguments of type any in the Web IDL
specification. [WEBIDL]
Other arguments must be ignored and must not cause the user agent to throw an exception. A future version of this specification will probably define other parameters to be passed to these methods to allow authors to more carefully control compression settings, image metadata, etc.
This specification defines the 2d context type, whose
API is implemented using the CanvasRenderingContext2D
interface.
When the getContext()
method of a canvas element is to return a new object for the contextId 2d, the user agent must return a
new CanvasRenderingContext2D object. Any additional
arguments are ignored.
The 2D context represents a flat Cartesian surface whose origin (0,0) is at the top left corner, with the coordinate space having x values increasing when going right, and y values increasing when going down.
interface CanvasRenderingContext2D {
// back-reference to the canvas
readonly attribute HTMLCanvasElement canvas;
// state
void save(); // push state on state stack
void restore(); // pop state stack and restore state
// transformations (default transform is the identity matrix)
void scale(double x, double y);
void rotate(double angle);
void translate(double x, double y);
void transform(double a, double b, double c, double d, double e, double f);
void setTransform(double a, double b, double c, double d, double e, double f);
// compositing
attribute double globalAlpha; // (default 1.0)
attribute DOMString globalCompositeOperation; // (default source-over)
// colors and styles
attribute any strokeStyle; // (default black)
attribute any fillStyle; // (default black)
CanvasGradient createLinearGradient(double x0, double y0, double x1, double y1);
CanvasGradient createRadialGradient(double x0, double y0, double r0, double x1, double y1, double r1);
CanvasPattern createPattern(HTMLImageElement image, DOMString repetition);
CanvasPattern createPattern(HTMLCanvasElement image, DOMString repetition);
CanvasPattern createPattern(HTMLVideoElement image, DOMString repetition);
// line caps/joins
attribute double lineWidth; // (default 1)
attribute DOMString lineCap; // "butt", "round", "square" (default "butt")
attribute DOMString lineJoin; // "round", "bevel", "miter" (default "miter")
attribute double miterLimit; // (default 10)
// shadows
attribute double shadowOffsetX; // (default 0)
attribute double shadowOffsetY; // (default 0)
attribute double shadowBlur; // (default 0)
attribute DOMString shadowColor; // (default transparent black)
// rects
void clearRect(double x, double y, double w, double h);
void fillRect(double x, double y, double w, double h);
void strokeRect(double x, double y, double w, double h);
// path API
void beginPath();
void closePath();
void moveTo(double x, double y);
void lineTo(double x, double y);
void quadraticCurveTo(double cpx, double cpy, double x, double y);
void bezierCurveTo(double cp1x, double cp1y, double cp2x, double cp2y, double x, double y);
void arcTo(double x1, double y1, double x2, double y2, double radius);
void rect(double x, double y, double w, double h);
void arc(double x, double y, double radius, double startAngle, double endAngle, optional boolean anticlockwise);
void fill();
void stroke();
void drawSystemFocusRing(Element element);
boolean drawCustomFocusRing(Element element);
void scrollPathIntoView();
void clip();
boolean isPointInPath(double x, double y);
// text
attribute DOMString font; // (default 10px sans-serif)
attribute DOMString textAlign; // "start", "end", "left", "right", "center" (default: "start")
attribute DOMString textBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
void fillText(DOMString text, double x, double y, optional double maxWidth);
void strokeText(DOMString text, double x, double y, optional double maxWidth);
TextMetrics measureText(DOMString text);
// drawing images
void drawImage(HTMLImageElement image, double dx, double dy);
void drawImage(HTMLImageElement image, double dx, double dy, double dw, double dh);
void drawImage(HTMLImageElement image, double sx, double sy, double sw, double sh, double dx, double dy, double dw, double dh);
void drawImage(HTMLCanvasElement image, double dx, double dy);
void drawImage(HTMLCanvasElement image, double dx, double dy, double dw, double dh);
void drawImage(HTMLCanvasElement image, double sx, double sy, double sw, double sh, double dx, double dy, double dw, double dh);
void drawImage(HTMLVideoElement image, double dx, double dy);
void drawImage(HTMLVideoElement image, double dx, double dy, double dw, double dh);
void drawImage(HTMLVideoElement image, double sx, double sy, double sw, double sh, double dx, double dy, double dw, double dh);
// pixel manipulation
ImageData createImageData(double sw, double sh);
ImageData createImageData(ImageData imagedata);
ImageData getImageData(double sx, double sy, double sw, double sh);
void putImageData(ImageData imagedata, double dx, double dy);
void putImageData(ImageData imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
};
interface CanvasGradient {
// opaque object
void addColorStop(double offset, DOMString color);
};
interface CanvasPattern {
// opaque object
};
interface TextMetrics {
readonly attribute double width;
};
interface ImageData {
readonly attribute unsigned long width;
readonly attribute unsigned long height;
readonly attribute Uint8ClampedArray data;
};
canvasReturns the canvas element.
The canvas
attribute must return the canvas element that the
context paints on.
Except where otherwise specified, for the 2D context interface, any method call with a numeric argument whose value is infinite or a NaN value must be ignored.
Whenever the CSS value currentColor is used
as a color in this API, the "computed value of the 'color' property"
for the purposes of determining the computed value of the currentColor keyword is the computed value of the
'color' property on the element in question at the time that the
color is specified (e.g. when the appropriate attribute is set, or
when the method is called; not when the color is rendered or
otherwise used). If the computed value of the 'color' property is
undefined for a particular case (e.g. because the element is not
in a Document), then the "computed value
of the 'color' property" for the purposes of determining the
computed value of the currentColor keyword is
fully opaque black. [CSSCOLOR]
In the case of addColorStop() on
CanvasGradient, the "computed value of the 'color'
property" for the purposes of determining the computed value of the
currentColor keyword is always fully opaque
black (there is no associated element). [CSSCOLOR]
This is because CanvasGradient objects
are canvas-neutral — a
CanvasGradient object created by one
canvas can be used by another, and there is therefore
no way to know which is the "element in question" at the time that
the color is specified.
Each context maintains a stack of drawing states. Drawing states consist of:
strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline.The current path and the current bitmap are not part
of the drawing state. The current path is persistent, and can only
be reset using the beginPath() method. The
current bitmap is a property of the canvas, not the context.
save()Pushes the current state onto the stack.
restore()Pops the top state on the stack, restoring the context to that state.
The save()
method must push a copy of the current drawing state onto the
drawing state stack.
The restore() method
must pop the top entry in the drawing state stack, and reset the
drawing state it describes. If there is no saved state, the method
must do nothing.
The transformation matrix is applied to coordinates when creating shapes and paths.
When the context is created, the transformation matrix must initially be the identity transform. It may then be adjusted using the transformation methods.
The transformations must be performed in reverse order. For instance, if a scale transformation that doubles the width is applied, followed by a rotation transformation that rotates drawing operations by a quarter turn, and a rectangle twice as wide as it is tall is then drawn on the canvas, the actual result will be a square.
scale(x, y)Changes the transformation matrix to apply a scaling transformation with the given characteristics.
rotate(angle)Changes the transformation matrix to apply a rotation transformation with the given characteristics. The angle is in radians.
translate(x, y)Changes the transformation matrix to apply a translation transformation with the given characteristics.
transform(a, b, c, d, e, f)Changes the transformation matrix to apply the matrix given by the arguments as described below.
setTransform(a, b, c, d, e, f)Changes the transformation matrix to the matrix given by the arguments as described below.
The scale(x, y) method must
add the scaling transformation described by the arguments to the
transformation matrix. The x argument represents
the scale factor in the horizontal direction and the y argument represents the scale factor in the
vertical direction. The factors are multiples.
The rotate(angle) method must add the rotation
transformation described by the argument to the transformation
matrix. The angle argument represents a
clockwise rotation angle expressed in radians.
The translate(x, y) method must
add the translation transformation described by the arguments to the
transformation matrix. The x argument represents
the translation distance in the horizontal direction and the y argument represents the translation distance in the
vertical direction. The arguments are in coordinate space units.
The transform(a, b, c, d, e, f) method must replace the current
transformation matrix with the result of multiplying the current
transformation matrix with the matrix described by:
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
The arguments a, b, c, d, e, and f are sometimes called m11, m12, m21, m22, dx, and dy or m11, m21, m12, m22, dx, and dy. Care should be taken in particular with the order of the second and third arguments (b and c) as their order varies from API to API and APIs sometimes use the notation m12/m21 and sometimes m21/m12 for those positions.
The setTransform(a, b, c, d, e,
f) method must reset the current
transform to the identity matrix, and then invoke the transform(a, b, c, d, e,
f) method with the same arguments.
globalAlpha [ = value ]Returns the current alpha value applied to rendering operations.
Can be set, to change the alpha value. Values outside of the range 0.0 .. 1.0 are ignored.
globalCompositeOperation [ = value ]Returns the current composition operation, from the list below.
Can be set, to change the composition operation. Unknown values are ignored.
All drawing operations are affected by the global compositing
attributes, globalAlpha and globalCompositeOperation.
The globalAlpha
attribute gives an alpha value that is applied to shapes and images
before they are composited onto the canvas. The value must be in the
range from 0.0 (fully transparent) to 1.0 (no additional
transparency). If an attempt is made to set the attribute to a value
outside this range, including Infinity and Not-a-Number (NaN)
values, the attribute must retain its previous value. When the
context is created, the globalAlpha attribute must
initially have the value 1.0.
The globalCompositeOperation
attribute sets how shapes and images are drawn onto the existing
bitmap, once they have had globalAlpha and the
current transformation matrix applied. It must be set to a value
from the following list. In the descriptions below, the source
image, A, is the shape or image being rendered,
and the destination image, B, is the current
state of the bitmap.
source-atopsource-insource-outsource-over (default)destination-atopsource-atop but using the
destination image instead of the source image and vice versa.destination-insource-in but using the destination
image instead of the source image and vice versa.destination-outsource-out but using the destination
image instead of the source image and vice versa.destination-oversource-over but using the
destination image instead of the source image and vice versa.lightercopyxorvendorName-operationNameThe operators in the above list must be treated as described by the Porter-Duff operator given at the start of their description (e.g. A over B). They are to be applied as part of the drawing model, at which point the clipping region is also applied. (Without a clipping region, these operators act on the whole bitmap with every operation.) [PORTERDUFF]
These values are all case-sensitive — they must be used exactly as shown. User agents must not recognize values that are not a case-sensitive match for one of the values given above.
On setting, if the user agent does not recognize the specified
value, it must be ignored, leaving the value of globalCompositeOperation
unaffected.
When the context is created, the globalCompositeOperation
attribute must initially have the value
source-over.
strokeStyle [ = value ]Returns the current style used for stroking shapes.
Can be set, to change the stroke style.
The style can be either a string containing a CSS color, or a
CanvasGradient or CanvasPattern
object. Invalid values are ignored.
fillStyle [ = value ]Returns the current style used for filling shapes.
Can be set, to change the fill style.
The style can be either a string containing a CSS color, or a
CanvasGradient or CanvasPattern
object. Invalid values are ignored.
The strokeStyle
attribute represents the color or style to use for the lines around
shapes, and the fillStyle
attribute represents the color or style to use inside the
shapes.
Both attributes can be either strings,
CanvasGradients, or CanvasPatterns. On
setting, strings must be parsed as CSS <color> values and the color
assigned, and CanvasGradient and
CanvasPattern objects must be assigned themselves. [CSSCOLOR] If the value is a string but
cannot be parsed as a CSS <color> value, or is
neither a string, a CanvasGradient, nor a
CanvasPattern, then it must be ignored, and the
attribute must retain its previous value.
When set to a CanvasPattern or
CanvasGradient object, the assignment is
live, meaning that changes made to the object after the
assignment do affect subsequent stroking or filling of shapes.
On getting, if the value is a color, then the serialization of the color
must be returned. Otherwise, if it is not a color but a
CanvasGradient or CanvasPattern, then the
respective object must be returned. (Such objects are opaque and
therefore only useful for assigning to other attributes or for
comparison to other gradients or patterns.)
The serialization of a color for a color value is a
string, computed as follows: if it has alpha equal to 1.0, then the
string is a lowercase six-digit hex value, prefixed with a "#"
character (U+0023 NUMBER SIGN), with the first two digits
representing the red component, the next two digits representing the
green component, and the last two digits representing the blue
component, the digits being in the range 0-9 a-f (U+0030 to U+0039
and U+0061 to U+0066). Otherwise, the color value has alpha less
than 1.0, and the string is the color value in the CSS rgba() functional-notation format: the literal
string rgba (U+0072 U+0067 U+0062 U+0061)
followed by a U+0028 LEFT PARENTHESIS, a base-ten integer in the
range 0-255 representing the red component (using digits 0-9, U+0030
to U+0039, in the shortest form possible), a literal U+002C COMMA
and U+0020 SPACE, an integer for the green component, a comma and a
space, an integer for the blue component, another comma and space, a
U+0030 DIGIT ZERO, if the alpha value is greater than zero then a
U+002E FULL STOP (representing the decimal point), if the alpha
value is greater than zero then one or more digits in the range 0-9
(U+0030 to U+0039) representing the fractional part of the alpha, and
finally a U+0029 RIGHT PARENTHESIS. User agents must express the
fractional part of the alpha value, if any, with the level of
precision necessary for the alpha value, when reparsed, to be
interpreted as the same alpha value.
When the context is created, the strokeStyle and fillStyle attributes must
initially have the string value #000000.
When the value is a color, it must not be affected by the transformation matrix when used to draw on the canvas.
There are two types of gradients, linear gradients and radial
gradients, both represented by objects implementing the opaque
CanvasGradient interface.
Once a gradient has been created (see below), stops are placed along it to define how the colors are distributed along the gradient. The color of the gradient at each stop is the color specified for that stop. Between each such stop, the colors and the alpha component must be linearly interpolated over the RGBA space without premultiplying the alpha value to find the color to use at that offset. Before the first stop, the color must be the color of the first stop. After the last stop, the color must be the color of the last stop. When there are no stops, the gradient is transparent black.
addColorStop(offset, color)Adds a color stop with the given color to the gradient at the given offset. 0.0 is the offset at one end of the gradient, 1.0 is the offset at the other end.
Throws an IndexSizeError exception if the offset
is out of range. Throws a SyntaxError exception if the
color cannot be parsed.
createLinearGradient(x0, y0, x1, y1)Returns a CanvasGradient object that represents a
linear gradient that paints along the line given by the
coordinates represented by the arguments.
If any of the arguments are not finite numbers, throws a
NotSupportedError exception.
createRadialGradient(x0, y0, r0, x1, y1, r1)Returns a CanvasGradient object that represents a
radial gradient that paints along the cone given by the circles
represented by the arguments.
If any of the arguments are not finite numbers, throws a
NotSupportedError exception. If either of the radii
are negative, throws an IndexSizeError exception.
The addColorStop(offset, color)
method on the CanvasGradient interface adds a new stop
to a gradient. If the offset is less than 0,
greater than 1, infinite, or NaN, then an
IndexSizeError exception must be thrown. If the color cannot be parsed as a CSS <color>
value, then a SyntaxError exception must be
thrown. Otherwise, the gradient must have a new stop placed, at
offset offset relative to the whole gradient,
and with the color obtained by parsing color as
a CSS <color> value. If multiple stops are added at the same
offset on a gradient, they must be placed in the order added, with
the first one closest to the start of the gradient, and each
subsequent one infinitesimally further along towards the end point
(in effect causing all but the first and last stop added at each
point to be ignored).
The createLinearGradient(x0, y0, x1,
y1) method takes four arguments
that represent the start point (x0, y0) and end point (x1, y1) of the gradient. If any of the arguments to createLinearGradient()
are infinite or NaN, the method must throw a
NotSupportedError exception. Otherwise, the method must
return a linear CanvasGradient initialized with the
specified line.
Linear gradients must be rendered such that all points on a line perpendicular to the line that crosses the start and end points have the color at the point where those two lines cross (with the colors coming from the interpolation and extrapolation described above). The points in the linear gradient must be transformed as described by the current transformation matrix when rendering.
If x0 = x1 and y0 = y1, then the linear gradient must paint nothing.
The createRadialGradient(x0, y0, r0,
x1, y1, r1) method takes six arguments, the
first three representing the start circle with origin (x0, y0) and radius r0, and the last three representing the end circle
with origin (x1, y1) and
radius r1. The values are in coordinate space
units. If any of the arguments are infinite or NaN, a
NotSupportedError exception must be thrown. If either
of r0 or r1 are negative, an
IndexSizeError exception must be thrown. Otherwise,
the method must return a radial CanvasGradient
initialized with the two specified circles.
Radial gradients must be rendered by following these steps:
If x0 = x1 and y0 = y1 and r0 = r1, then the radial gradient must paint nothing. Abort these steps.
Let x(ω) = (x1-x0)ω + x0
Let y(ω) = (y1-y0)ω + y0
Let r(ω) = (r1-r0)ω + r0
Let the color at ω be the color at that position on the gradient (with the colors coming from the interpolation and extrapolation described above).
For all values of ω where r(ω) > 0, starting with the value of ω nearest to positive infinity and ending with the value of ω nearest to negative infinity, draw the circumference of the circle with radius r(ω) at position (x(ω), y(ω)), with the color at ω, but only painting on the parts of the canvas that have not yet been painted on by earlier circles in this step for this rendering of the gradient.
This effectively creates a cone, touched by the two circles defined in the creation of the gradient, with the part of the cone before the start circle (0.0) using the color of the first offset, the part of the cone after the end circle (1.0) using the color of the last offset, and areas outside the cone untouched by the gradient (transparent black).
The resulting radial gradient must then be transformed as described by the current transformation matrix when rendering.
Gradients must be painted only where the relevant stroking or filling effects requires that they be drawn.
Patterns are represented by objects implementing the opaque
CanvasPattern interface.
createPattern(image, repetition)Returns a CanvasPattern object that uses the given image
and repeats in the direction(s) given by the repetition argument.
The allowed values for repetition are repeat (both directions), repeat-x (horizontal only), repeat-y (vertical only), and no-repeat (neither). If the repetition argument is empty, the value repeat is used.
If the image has no image data, throws an
InvalidStateError exception. If the second argument
isn't one of the allowed values, throws a SyntaxError
exception. If the image isn't yet fully decoded, then the method
returns null.
To create objects of this type, the createPattern(image, repetition)
method is used. The first argument gives the image to use as the
pattern (either an HTMLImageElement,
HTMLCanvasElement, or HTMLVideoElement
object). Modifying this image after calling the createPattern() method
must not affect the pattern. The second argument must be a string
with one of the following values: repeat,
repeat-x, repeat-y,
no-repeat. If the empty string is specified,
repeat must be assumed. If an unrecognized value
is given, then the user agent must throw a SyntaxError
exception. User agents must recognize the four values described above
exactly (e.g. they must not do case folding). Except as specified
below, the method must return a CanvasPattern object
suitably initialized.
The image argument is an instance of either
HTMLImageElement, HTMLCanvasElement, or
HTMLVideoElement.
If the image argument is an
HTMLImageElement object that is not fully decodable, or if the image argument is an HTMLVideoElement
object whose readyState
attribute is either HAVE_NOTHING or HAVE_METADATA, then the
implementation must return null.
If the image argument is an
HTMLCanvasElement object with either a horizontal
dimension or a vertical dimension equal to zero, then the
implementation must throw an InvalidStateError
exception.
Patterns must be painted so that the top left of the first image
is anchored at the origin of the coordinate space, and images are
then repeated horizontally to the left and right, if the
repeat-x string was specified, or vertically up and
down, if the repeat-y string was specified, or in all
four directions all over the canvas, if the repeat
string was specified, to create the repeated pattern that is used
for rendering. The images are not scaled by this process; one CSS
pixel of the image must be painted on one coordinate space unit in
generating the repeated pattern. When rendered, however, patterns
must actually be painted only where the stroking or filling effect
requires that they be drawn, and the repeated pattern must be
affected by the current transformation matrix. Pixels not covered by
the repeating pattern (if the repeat string was not
specified) must be transparent black.
If the original image data is a bitmap image, the value painted at a point in the area of the repetitions is computed by filtering the original image data. The user agent may use any filtering algorithm (for example bilinear interpolation or nearest-neighbor). When the filtering algorithm requires a pixel value from outside the original image data, it must instead use the value from wrapping the pixel's coordinates to the original image's dimensions. (That is, the filter uses 'repeat' behavior, regardless of the value of repetition.)
When the createPattern() method
is passed an animated image as its image
argument, the user agent must use the poster frame of the animation,
or, if there is no poster frame, the first frame of the
animation.
When the image argument is an
HTMLVideoElement, then the frame at the current
playback position must be used as the source image, and the
source image's dimensions must be the intrinsic width and
intrinsic height
of the media resource (i.e. after any aspect-ratio
correction has been applied).
If a radial gradient or repeated pattern is used when the transformation matrix is singular, the resulting style must be transparent black (otherwise the gradient or pattern would be collapsed to a point or line, leaving the other pixels undefined). Linear gradients and solid colors always define all points even with singular tranformation matrices.
lineWidth [ = value ]Returns the current line width.
Can be set, to change the line width. Values that are not finite values greater than zero are ignored.
lineCap [ = value ]Returns the current line cap style.
Can be set, to change the line cap style.
The possible line cap styles are butt,
round, and square. Other values are
ignored.
lineJoin [ = value ]Returns the current line join style.
Can be set, to change the line join style.
The possible line join styles are bevel,
round, and miter. Other values are
ignored.
miterLimit [ = value ]Returns the current miter limit ratio.
Can be set, to change the miter limit ratio. Values that are not finite values greater than zero are ignored.
The lineWidth
attribute gives the width of lines, in coordinate space units. On
getting, it must return the current value. On setting, zero,
negative, infinite, and NaN values must be ignored, leaving the
value unchanged; other values must change the current value to the
new value.
When the context is created, the lineWidth attribute must
initially have the value 1.0.
The lineCap attribute
defines the type of endings that UAs will place on the end of
lines. The three valid values are butt,
round, and square. The butt
value means that the end of each line has a flat edge perpendicular
to the direction of the line (and that no additional line cap is
added). The round value means that a semi-circle with
the diameter equal to the width of the line must then be added on to
the end of the line. The square value means that a
rectangle with the length of the line width and the width of half
the line width, placed flat against the edge perpendicular to the
direction of the line, must be added at the end of each line.
On getting, it must return the current value. On setting, if the
new value is one of the literal strings butt,
round, and square, then the current value
must be changed to the new value; other values must ignored, leaving
the value unchanged.
When the context is created, the lineCap attribute must
initially have the value butt.
The lineJoin
attribute defines the type of corners that UAs will place where two
lines meet. The three valid values are bevel,
round, and miter.
On getting, it must return the current value. On setting, if the
new value is one of the literal strings bevel,
round, and miter, then the current value
must be changed to the new value; other values must be ignored,
leaving the value unchanged.
When the context is created, the lineJoin attribute must
initially have the value miter.
A join exists at any point in a subpath shared by two consecutive lines. When a subpath is closed, then a join also exists at its first point (equivalent to its last point) connecting the first and last lines in the subpath.
In addition to the point where the join occurs, two additional points are relevant to each join, one for each line: the two corners found half the line width away from the join point, one perpendicular to each line, each on the side furthest from the other line.
A filled triangle connecting these two opposite corners with a
straight line, with the third point of the triangle being the join
point, must be rendered at all joins. The lineJoin attribute controls
whether anything else is rendered. The three aforementioned values
have the following meanings:
The bevel value means that this is all that is
rendered at joins.
The round value means that a filled arc connecting
the two aforementioned corners of the join, abutting (and not
overlapping) the aforementioned triangle, with the diameter equal to
the line width and the origin at the point of the join, must be
rendered at joins.
The miter value means that a second filled triangle
must (if it can given the miter length) be rendered at the join,
with one line being the line between the two aforementioned corners,
abutting the first triangle, and the other two being continuations of
the outside edges of the two joining lines, as long as required to
intersect without going over the miter length.
The miter length is the distance from the point where the join occurs to the intersection of the line edges on the outside of the join. The miter limit ratio is the maximum allowed ratio of the miter length to half the line width. If the miter length would cause the miter limit ratio to be exceeded, this second triangle must not be rendered.
The miter limit ratio can be explicitly set using the miterLimit
attribute. On getting, it must return the current value. On setting,
zero, negative, infinite, and NaN values must be ignored, leaving
the value unchanged; other values must change the current value to
the new value.
When the context is created, the miterLimit attribute must
initially have the value 10.0.
All drawing operations are affected by the four global shadow attributes.
shadowColor [ = value ]Returns the current shadow color.
Can be set, to change the shadow color. Values that cannot be parsed as CSS colors are ignored.
shadowOffsetX [ = value ]shadowOffsetY [ = value ]Returns the current shadow offset.
Can be set, to change the shadow offset. Values that are not finite numbers are ignored.
shadowBlur [ = value ]Returns the current level of blur applied to shadows.
Can be set, to change the blur level. Values that are not finite numbers greater than or equal to zero are ignored.
The shadowColor
attribute sets the color of the shadow.
When the context is created, the shadowColor attribute
initially must be fully-transparent black.
On getting, the serialization of the color must be returned.
On setting, the new value must be parsed as a CSS <color> value and the color assigned. If the value cannot be parsed as a CSS <color> value then it must be ignored, and the attribute must retain its previous value. [CSSCOLOR]
The shadowOffsetX
and shadowOffsetY
attributes specify the distance that the shadow will be offset in
the positive horizontal and positive vertical distance
respectively. Their values are in coordinate space units. They are
not affected by the current transformation matrix.
When the context is created, the shadow offset attributes must
initially have the value 0.
On getting, they must return their current value. On setting, the attribute being set must be set to the new value, except if the value is infinite or NaN, in which case the new value must be ignored.
The shadowBlur
attribute specifies the level of the blurring effect. (The units do
not map to coordinate space units, and are not affected by the
current transformation matrix.)
When the context is created, the shadowBlur attribute must
initially have the value 0.
On getting, the attribute must return its current value. On setting the attribute must be set to the new value, except if the value is negative, infinite or NaN, in which case the new value must be ignored.
Shadows are only drawn
if the opacity component of the alpha component of the color
of shadowColor is
non-zero and either the shadowBlur is non-zero, or
the shadowOffsetX
is non-zero, or the shadowOffsetY is
non-zero.
It is likely that this will change: browser vendors have indicated an interest in changing the processing model for shadows such that they only draw when the composition operator is "source-over" (the default). Read more...
When shadows are drawn, they must be rendered as follows:
Let A be an infinite transparent black bitmap on which the source image for which a shadow is being created has been rendered.
Let B be an infinite transparent black bitmap, with a coordinate space and an origin identical to A.
Copy the alpha channel of A to B, offset by shadowOffsetX in the
positive x direction, and shadowOffsetY in the
positive y direction.
If shadowBlur is greater than
0:
Let σ be half the value of
shadowBlur.
Perform a 2D Gaussian Blur on B, using σ as the standard deviation.
User agents may limit values of σ to an implementation-specific maximum value to avoid exceeding hardware limitations during the Gaussian blur operation.
Set the red, green, and blue components of every pixel in
B to the red, green, and blue components
(respectively) of the color of shadowColor.
Multiply the alpha component of every pixel in B by the alpha component of the color of shadowColor.
The shadow is in the bitmap B, and is rendered as part of the drawing model described below.
If the current composition operation is copy, shadows effectively won't render
(since the shape will overwrite the shadow).
There are three methods that immediately draw rectangles to the bitmap. They each take four arguments; the first two give the x and y coordinates of the top left of the rectangle, and the second two give the width w and height h of the rectangle, respectively.
The current transformation matrix must be applied to the following four coordinates, which form the path that must then be closed to get the specified rectangle: (x, y), (x+w, y), (x+w, y+h), (x, y+h).
Shapes are painted without affecting the current path, and are
subject to the clipping region,
and, with the exception of clearRect(), also shadow effects, global alpha, and global composition
operators.
clearRect(x, y, w, h)Clears all pixels on the canvas in the given rectangle to transparent black.
fillRect(x, y, w, h)Paints the given rectangle onto the canvas, using the current fill style.
strokeRect(x, y, w, h)Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.
The clearRect(x, y, w, h) method must clear the pixels in the
specified rectangle that also intersect the current clipping region
to a fully transparent black, erasing any previous image. If either
height or width are zero, this method has no effect.
The fillRect(x, y, w, h) method must paint the specified
rectangular area using the fillStyle. If either height
or width are zero, this method has no effect.
The strokeRect(x, y, w, h) method must stroke the specified
rectangle's path using the strokeStyle, lineWidth, lineJoin, and (if
appropriate) miterLimit attributes. If
both height and width are zero, this method has no effect, since
there is no path to stroke (it's a point). If only one of the two is
zero, then the method will draw a line instead (the path for the
outline is just a straight line along the non-zero dimension).
The context always has a current path. There is only one current path, it is not part of the drawing state.
A path has a list of zero or more subpaths. Each subpath consists of a list of one or more points, connected by straight or curved lines, and a flag indicating whether the subpath is closed or not. A closed subpath is one where the last point of the subpath is connected to the first point of the subpath by a straight line. Subpaths with fewer than two points are ignored when painting the path.
beginPath()Resets the current path.
moveTo(x, y)Creates a new subpath with the given point.
closePath()Marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath.
lineTo(x, y)Adds the given point to the current subpath, connected to the previous one by a straight line.
quadraticCurveTo(cpx, cpy, x, y)Adds the given point to the current subpath, connected to the previous one by a quadratic Bézier curve with the given control point.
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)Adds the given point to the current subpath, connected to the previous one by a cubic Bézier curve with the given control points.
arcTo(x1, y1, x2, y2, radius)Adds an arc with the given control points and radius to the current subpath, connected to the previous point by a straight line.
Throws an IndexSizeError exception if the given
radius is negative.
arc(x, y, radius, startAngle, endAngle [, anticlockwise ] )Adds points to the subpath such that the arc described by the circumference of the circle described by the arguments, starting at the given start angle and ending at the given end angle, going in the given direction (defaulting to clockwise), is added to the path, connected to the previous point by a straight line.
Throws an IndexSizeError exception if the given
radius is negative.
rect(x, y, w, h)Adds a new closed subpath to the path, representing the given rectangle.
fill()Fills the subpaths with the current fill style.
stroke()Strokes the subpaths with the current stroke style.
drawSystemFocusRing(element)If the given element is focused, draws a focus ring around the current path, following the platform conventions for focus rings.
drawCustomFocusRing(element)If the given element is focused, and the user has configured his system to draw focus rings in a particular manner (for example, high contrast focus rings), draws a focus ring around the current path and returns false.
Otherwise, returns true if the given element is focused, and false otherwise. This can thus be used to determine when to draw a focus ring (see the example below).
scrollPathIntoView()Scrolls the current path into view. This is especially useful on devices with small screens, where the whole canvas might not be visible at once.
clip()Further constrains the clipping region to the given path.
isPointInPath(x, y)Returns true if the given point is in the current path.
Initially, the context's path must have zero subpaths.
The points and lines added to the path by these methods must be transformed according to the current transformation matrix as they are added.
The beginPath()
method must empty the list of subpaths so that the context once
again has zero subpaths.
The moveTo(x, y) method must
create a new subpath with the specified point as its first (and
only) point.
When the user agent is to ensure there is a subpath
for a coordinate (x, y), the
user agent must check to see if the context has any subpaths, and if
it does not, then the user agent must create a new subpath with the
point (x, y) as its first
(and only) point, as if the moveTo() method had been
called.
The closePath()
method must do nothing if the context has no subpaths. Otherwise, it
must mark the last subpath as closed, create a new subpath whose
first point is the same as the previous subpath's first point, and
finally add this new subpath to the path.
If the last subpath had more than one point in its
list of points, then this is equivalent to adding a straight line
connecting the last point back to the first point, thus "closing"
the shape, and then repeating the last (possibly implied) moveTo() call.
New points and the lines connecting them are added to subpaths using the methods described below. In all cases, the methods only modify the last subpath in the context's paths.
The lineTo(x, y) method must
ensure there is a subpath for (x, y) if the context has
no subpaths. Otherwise, it must connect the last point in the
subpath to the given point (x, y) using a straight line, and must then add the given
point (x, y) to the
subpath.
The quadraticCurveTo(cpx, cpy, x,
y) method must ensure there
is a subpath for (cpx,
cpy), and then must connect the last
point in the subpath to the given point (x, y) using a quadratic Bézier curve with control
point (cpx, cpy), and must
then add the given point (x, y) to the subpath. [BEZIER]
The bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) method must
ensure there is a subpath for (cp1x, cp1y), and then must
connect the last point in the subpath to the given point (x, y) using a cubic Bézier
curve with control points (cp1x, cp1y) and (cp2x, cp2y). Then, it must add the point (x, y) to the subpath. [BEZIER]
The arcTo(x1, y1, x2,
y2, radius)
method must first ensure there is a subpath for (x1, y1). Then, the behavior depends on the
arguments and the last point in the subpath, as described below.
Negative values for radius must cause the
implementation to throw an IndexSizeError
exception.
Let the point (x0, y0) be the last point in the subpath.
If the point (x0, y0) is equal to the point (x1, y1), or if the point (x1, y1) is equal to the point (x2, y2), or if the radius radius is zero, then the method must add the point (x1, y1) to the subpath, and connect that point to the previous point (x0, y0) by a straight line.
Otherwise, if the points (x0, y0), (x1, y1), and (x2, y2) all lie on a single straight line, then the method must add the point (x1, y1) to the subpath, and connect that point to the previous point (x0, y0) by a straight line.
Otherwise, let The Arc be the shortest arc given by circumference of the circle that has radius radius, and that has one point tangent to the half-infinite line that crosses the point (x0, y0) and ends at the point (x1, y1), and that has a different point tangent to the half-infinite line that ends at the point (x1, y1) and crosses the point (x2, y2). The points at which this circle touches these two lines are called the start and end tangent points respectively. The method must connect the point (x0, y0) to the start tangent point by a straight line, adding the start tangent point to the subpath, and then must connect the start tangent point to the end tangent point by The Arc, adding the end tangent point to the subpath.
The arc(x, y, radius,
startAngle, endAngle, anticlockwise) method draws an arc. If
the context has any subpaths, then the method must add a straight
line from the last point in the subpath to the start point of the
arc. In any case, it must draw the arc between the start point of
the arc and the end point of the arc, and add the start and end
points of the arc to the subpath. The arc and its start and end
points are defined as follows:
Consider a circle that has its origin at (x, y) and that has radius radius. The points at startAngle and endAngle along this circle's circumference, measured in radians clockwise from the positive x-axis, are the start and end points respectively.
If the anticlockwise argument is omitted or false and endAngle-startAngle is equal to or greater than 2π, or, if the anticlockwise argument is true and startAngle-endAngle is equal to or greater than 2π, then the arc is the whole circumference of this circle.
Otherwise, the arc is the path along the circumference of this circle from the start point to the end point, going anti-clockwise if the anticlockwise argument is true, and clockwise otherwise. Since the points are on the circle, as opposed to being simply angles from zero, the arc can never cover an angle greater than 2π radians. If the two points are the same, or if the radius is zero, then the arc is defined as being of zero length in both directions.
Negative values for radius must cause the
implementation to throw an IndexSizeError
exception.
The rect(x, y, w, h) method must create a new subpath
containing just the four points (x, y), (x+w,
y), (x+w, y+h),
(x, y+h), with those four points connected by straight
lines, and must then mark the subpath as closed. It must then create
a new subpath with the point (x, y) as the only point in the subpath.
The fill()
method must fill all the subpaths of the current path, using
fillStyle, and using
the non-zero winding number rule. Open subpaths must be implicitly
closed when being filled (without affecting the actual
subpaths).
Thus, if two overlapping but otherwise independent subpaths have opposite windings, they cancel out and result in no fill. If they have the same winding, that area just gets painted once.
The stroke() method
must calculate the strokes of all the subpaths of the current path,
using the lineWidth,
lineCap, lineJoin, and (if
appropriate) miterLimit attributes, and
then fill the combined stroke area using the strokeStyle
attribute.
Since the subpaths are all stroked as one, overlapping parts of the paths in one stroke operation are treated as if their union was what was painted.
Paths, when filled or stroked, must be painted without affecting the current path, and must be subject to shadow effects, global alpha, the clipping region, and global composition operators. (Transformations affect the path when the path is created, not when it is painted, though the stroke style is still affected by the transformation during painting.)
Zero-length line segments must be pruned before stroking a path. Empty subpaths must be ignored.
The drawSystemFocusRing(element) method, when invoked, must run
the following steps:
If element is not focused or is not a descendant of the element with whose context the method is associated, then abort these steps.
If the user has requested the use of particular focus rings (e.g. high-contrast focus rings), or if the element would have a focus ring drawn around it, then draw a focus ring of the appropriate style along the path, following platform conventions, and abort these steps.
Some platforms only draw focus rings around
elements that have been focused from the keyboard, and not those
focused from the mouse. Other platforms simply don't draw focus
rings around some elements at all unless relevant accessibility
features are enabled. This API is intended to follow these
conventions. User agents that implement distinctions based on the
manner in which the element was focused are encouraged to classify
focus driven by the focus() method
based on the kind of user interaction event from which the call
was triggered (if any).
The focus ring should not be subject to the shadow effects, the global alpha, or the global composition operators, but should be subject to the clipping region.
Optionally, inform the user that the focus is at the location given by the path. User agents may wait until the next time the event loop reaches its "update the rendering" step to optionally inform the user.
The drawCustomFocusRing(element) method, when invoked, must run
the following steps:
If element is not focused or is not a descendant of the element with whose context the method is associated, then return false and abort these steps.
If the user has requested the use of particular focus rings (e.g. high-contrast focus rings), then draw a focus ring of the appropriate style along the path, return false, and abort these steps.
The focus ring should not be subject to the shadow effects, the global alpha, or the global composition operators, but should be subject to the clipping region.
Optionally, inform the user that the focus is at the location given by the path. User agents may wait until the next time the event loop reaches its "update the rendering" step to optionally inform the user.
Return true.
The scrollPathIntoView()
method, when invoked, must run the following steps:
Let notional child be a hypothetical
element that is a rendered child of the canvas element
whose dimensions are exactly the rectangle of the bounding box of
the current path.
Scroll notional child into view with the align to top flag set.
Optionally, inform the user that the caret and/or selection cover the specified rectangle of the canvas. User agents may wait until the next time the event loop reaches its "update the rendering" step to optionally inform the user.
"Inform the user", as used in this section, could mean calling a system accessibility API, which would notify assistive technologies such as magnification tools. To properly drive magnification based on a focus change, a system accessibility API driving a screen magnifier needs the bounds for the newly focused object. The methods above are intended to enable this by allowing the user agent to report the bounding box of the path used to render the focus ring as the bounds of the element element passed as an argument, if that element is focused, and the bounding box of the area to which the user agent is scrolling as the bounding box of the current selection.
The clip()
method must create a new clipping region by calculating
the intersection of the current clipping region and the area
described by the current path, using the non-zero winding number
rule. Open subpaths must be implicitly closed when computing the
clipping region, without affecting the actual subpaths. The new
clipping region replaces the current clipping region.
When the context is initialized, the clipping region must be set to the rectangle with the top left corner at (0,0) and the width and height of the coordinate space.
The isPointInPath(x, y) method must
return true if the point given by the x and y coordinates passed to the method, when treated as
coordinates in the canvas coordinate space unaffected by the current
transformation, is inside the current path as determined by the
non-zero winding number rule; and must return false
otherwise. Points on the path itself are considered to be inside the
path. If either of the arguments is infinite or NaN, then the method
must return false.
This canvas element has a couple of checkboxes. The
path-related commands are highlighted:
<canvas height=400 width=750>
<label><input type=checkbox id=showA> Show As</label>
<label><input type=checkbox id=showB> Show Bs</label>
<!-- ... -->
</canvas>
<script>
function drawCheckbox(context, element, x, y, paint) {
context.save();
context.font = '10px sans-serif';
context.textAlign = 'left';
context.textBaseline = 'middle';
var metrics = context.measureText(element.labels[0].textContent);
if (paint) {
context.beginPath();
context.strokeStyle = 'black';
context.rect(x-5, y-5, 10, 10);
context.stroke();
if (element.checked) {
context.fillStyle = 'black';
context.fill();
}
context.fillText(element.labels[0].textContent, x+5, y);
}
context.beginPath();
context.rect(x-7, y-7, 12 + metrics.width+2, 14);
if (paint && context.drawCustomFocusRing(element)) {
context.strokeStyle = 'silver';
context.stroke();
}
context.restore();
}
function drawBase() { /* ... */ }
function drawAs() { /* ... */ }
function drawBs() { /* ... */ }
function redraw() {
var canvas = document.getElementsByTagName('canvas')[0];
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
drawCheckbox(context, document.getElementById('showA'), 20, 40, true);
drawCheckbox(context, document.getElementById('showB'), 20, 60, true);
drawBase();
if (document.getElementById('showA').checked)
drawAs();
if (document.getElementById('showB').checked)
drawBs();
}
function processClick(event) {
var canvas = document.getElementsByTagName('canvas')[0];
var context = canvas.getContext('2d');
var x = event.clientX;
var y = event.clientY;
var node = event.target;
while (node) {
x -= node.offsetLeft - node.scrollLeft;
y -= node.offsetTop - node.scrollTop;
node = node.offsetParent;
}
drawCheckbox(context, document.getElementById('showA'), 20, 40, false);
if (context.isPointInPath(x, y))
document.getElementById('showA').checked = !(document.getElementById('showA').checked);
drawCheckbox(context, document.getElementById('showB'), 20, 60, false);
if (context.isPointInPath(x, y))
document.getElementById('showB').checked = !(document.getElementById('showB').checked);
redraw();
}
document.getElementsByTagName('canvas')[0].addEventListener('focus', redraw, true);
document.getElementsByTagName('canvas')[0].addEventListener('blur', redraw, true);
document.getElementsByTagName('canvas')[0].addEventListener('change', redraw, true);
document.getElementsByTagName('canvas')[0].addEventListener('click', processClick, false);
redraw();
</script>
font [ = value ]Returns the current font settings.
Can be set, to change the font. The syntax is the same as for the CSS 'font' property; values that cannot be parsed as CSS font values are ignored.
Relative keywords and lengths are computed relative to the font
of the canvas element.
textAlign [ = value ]Returns the current text alignment settings.
Can be set, to change the alignment. The possible values are
start, end, left, right, and center. Other values are ignored. The default is
start.
textBaseline [ = value ]Returns the current baseline alignment settings.
Can be set, to change the baseline alignment. The possible
values and their meanings are given below. Other values are
ignored. The default is alphabetic.
fillText(text, x, y [, maxWidth ] )strokeText(text, x, y [, maxWidth ] )Fills or strokes (respectively) the given text at the given position. If a maximum width is provided, the text will be scaled to fit that width if necessary.
measureText(text)Returns a TextMetrics object with the metrics of the given text in the current font.
widthReturns the advance width of the text that was passed to the
measureText()
method.
The font IDL
attribute, on setting, must be parsed the same way as the 'font'
property of CSS (but without supporting property-independent style
sheet syntax like 'inherit'), and the resulting font must be
assigned to the context, with the 'line-height' component forced to
'normal', with the 'font-size' component converted to CSS pixels,
and with system fonts being computed to explicit values. If the new
value is syntactically incorrect (including using
property-independent style sheet syntax like 'inherit' or
'initial'), then it must be ignored, without assigning a new font
value. [CSS]
Font names must be interpreted in the context of the
canvas element's stylesheets; any fonts embedded using
@font-face must therefore be available once
they are loaded. (If a font is referenced before it is fully loaded,
then it must be treated as if it was an unknown font, falling back
to another as described by the relevant CSS specifications.) [CSSFONTS]
Only vector fonts should be used by the user agent; if a user agent were to use bitmap fonts then transformations would likely make the font look very ugly.
On getting, the font
attribute must return the serialized form of the current font of the context
(with no 'line-height' component). [CSSOM]
For example, after the following statement:
context.font = 'italic 400 12px/2 Unknown Font, sans-serif';
...the expression context.font would
evaluate to the string "italic 12px "Unknown Font", sans-serif". The
"400" font-weight doesn't appear because that is the default
value. The line-height doesn't appear because it is forced to
"normal", the default value.
When the context is created, the font of the context must be set
to 10px sans-serif. When the 'font-size' component is set to lengths
using percentages, 'em' or 'ex' units, or the 'larger' or 'smaller'
keywords, these must be interpreted relative to the computed value
of the 'font-size' property of the corresponding canvas
element at the time that the attribute is set. When the
'font-weight' component is set to the relative values 'bolder' and
'lighter', these must be interpreted relative to the computed value
of the 'font-weight' property of the corresponding
canvas element at the time that the attribute is
set. If the computed values are undefined for a particular case
(e.g. because the canvas element is not in a
Document), then the relative keywords must be
interpreted relative to the normal-weight 10px sans-serif
default.
The textAlign IDL
attribute, on getting, must return the current value. On setting, if
the value is one of start, end, left, right, or center, then the
value must be changed to the new value. Otherwise, the new value
must be ignored. When the context is created, the textAlign attribute must
initially have the value start.
The textBaseline
IDL attribute, on getting, must return the current value. On
setting, if the value is one of top, hanging, middle, alphabetic,
ideographic,
or bottom,
then the value must be changed to the new value. Otherwise, the new
value must be ignored. When the context is created, the textBaseline attribute
must initially have the value alphabetic.
The textBaseline
attribute's allowed keywords correspond to alignment points in the
font:

The keywords map to these alignment points as follows:
top
hanging
middle
alphabetic
ideographic
bottom
The fillText() and
strokeText()
methods take three or four arguments, text, x, y, and optionally maxWidth, and render the given text at the given (x, y) coordinates ensuring that the text isn't wider
than maxWidth if specified, using the current
font, textAlign, and textBaseline
values. Specifically, when the methods are called, the user agent
must run the following steps:
If maxWidth is present but less than or equal to zero, return without doing anything; abort these steps.
Let font be the current font of the
context, as given by the font attribute.
Replace all the space characters in text with U+0020 SPACE characters.
Form a hypothetical infinitely wide CSS line box containing
a single inline box containing the text text,
with all the properties at their initial values except the 'font'
property of the inline box set to font, the
'direction' property of the inline box set to the
directionality of the canvas element, and the
'white-space' property set to 'pre'. [CSS]
If the maxWidth argument was specified and the hypothetical width of the inline box in the hypothetical line box is greater than maxWidth CSS pixels, then change font to have a more condensed font (if one is available or if a reasonably readable one can be synthesized by applying a horizontal scale factor to the font) or a smaller font, and return to the previous step.
Let the anchor point be a point on the
inline box, determined by the textAlign and textBaseline values, as
follows:
Horizontal position:
textAlign is lefttextAlign is start and the directionality of the
canvas element is 'ltr'textAlign is end and the directionality of the
canvas element is 'rtl'textAlign is righttextAlign is end and the directionality of the
canvas element is 'ltr'textAlign is start and the directionality of the
canvas element is 'rtl'textAlign is centerVertical position:
textBaseline is toptextBaseline is hangingtextBaseline is middletextBaseline is alphabetictextBaseline is ideographictextBaseline is bottomPaint the hypothetical inline box as the shape given by the text's glyphs, as transformed by the current transformation matrix, and anchored and sized so that before applying the current transformation matrix, the anchor point is at (x, y) and each CSS pixel is mapped to one coordinate space unit.
For fillText()
fillStyle must be
applied to the glyphs and strokeStyle must be
ignored. For strokeText() the reverse
holds and strokeStyle must be
applied to the glyph outlines and fillStyle must be
ignored.
Text is painted without affecting the current path, and is subject to shadow effects, global alpha, the clipping region, and global composition operators.
The measureText()
method takes one argument, text. When the method
is invoked, the user agent must replace all the space characters in text with
U+0020 SPACE characters, and then must form a hypothetical
infinitely wide CSS line box containing a single inline box
containing the text text, with all the
properties at their initial values except the 'white-space' property
of the inline element set to 'pre' and the 'font' property of the
inline element set to the current font of the context as given by
the font attribute, and
must then create a new TextMetrics object with its
width attribute set to
the width of that inline box, in CSS pixels.
If doing these measurements requires using a font that has an
origin that is not the same as that of the Document object that
owns the canvas element (even if "using a font" means
just checking if that font has a particular glyph in it before
falling back to another font), then the method must throw a
SecurityError exception.
Otherwise, it must return the new TextMetrics object.
[CSS]
The TextMetrics interface is used for the objects
returned from measureText(). It has one
attribute, width, which is set
by the measureText()
method.
Glyphs rendered using fillText() and strokeText() can spill out
of the box given by the font size (the em square size) and the width
returned by measureText() (the text
width). This version of the specification does not provide a way to
obtain the bounding box dimensions of the text. If the text is to be
rendered and removed, care needs to be taken to replace the entire
area of the canvas that the clipping region covers, not just the box
given by the em square height and measured text width.
A future version of the 2D context API may provide a way to render fragments of documents, rendered using CSS, straight to the canvas. This would be provided in preference to a dedicated way of doing multiline layout.
To draw images onto the canvas, the drawImage method
can be used.
This method can be invoked with three different sets of arguments:
drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
Each of those three can take either an
HTMLImageElement, an HTMLCanvasElement, or
an HTMLVideoElement for the image
argument.
drawImage(image, dx, dy)drawImage(image, dx, dy, dw, dh)drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)Draws the given image onto the canvas. The arguments are interpreted as follows:

If the first argument isn't an img,
canvas, or video element, throws a
TypeMismatchError exception. If the image has no
image data, throws an InvalidStateError exception. If
the one of the source rectangle dimensions is zero, throws an
IndexSizeError exception. If the image isn't yet
fully decoded, then nothing is drawn.
If not specified, the dw and dh arguments must default to the values of sw and sh, interpreted such that
one CSS pixel in the image is treated as one unit in the canvas
coordinate space. If the sx, sy, sw, and sh arguments are omitted, they must default to 0, 0,
the image's intrinsic width in image pixels, and the image's
intrinsic height in image pixels, respectively. If the image has no
intrinsic dimensions, the concrete object size must be used
instead, as determined using the CSS "Concrete
Object Size Resolution" algorithm, with the specified
size having neither a definite width nor height, nor any
additional contraints, the object's intrinsic properties being those
of the image argument, and the default object
size being the size of the canvas element. [CSSIMAGES]
The image argument is an instance of either
HTMLImageElement, HTMLCanvasElement, or
HTMLVideoElement.
If the image argument is an
HTMLImageElement object that is not fully decodable, or if the image argument is an HTMLVideoElement
object whose readyState
attribute is either HAVE_NOTHING or HAVE_METADATA, then the
implementation must return without drawing anything.
If the image argument is an
HTMLCanvasElement object with either a horizontal
dimension or a vertical dimension equal to zero, then the
implementation must throw an InvalidStateError
exception.
The source rectangle is the rectangle whose corners are the four points (sx, sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh).
If one of the sw or sh
arguments is zero, the implementation must throw an
IndexSizeError exception.
The destination rectangle is the rectangle whose corners are the four points (dx, dy), (dx+dw, dy), (dx+dw, dy+dh), (dx, dy+dh).
When the source rectangle is outside the source image, it must be clipped to the source image, and the destination rectangle must be clipped in the same proportion.
When drawImage() is
invoked, the region of the image specified by the source rectangle
must be painted on the region of the canvas specified by the
destination rectangle, after applying the current transformation
matrix to the points of the destination rectangle.
The original image data of the source image must be used, not the
image as it is rendered (e.g. width and height attributes on the source
element have no effect). The image data must be processed in the
original direction, even if the dimensions given are negative.
This specification does not define the algorithm to use when scaling the image, if necessary.
When a canvas is drawn onto itself, the drawing model requires the source to be copied before the image is drawn back onto the canvas, so it is possible to copy parts of a canvas onto overlapping parts of itself.
If the original image data is a bitmap image, the value painted at a point in the destination rectangle is computed by filtering the original image data. The user agent may use any filtering algorithm (for example bilinear interpolation or nearest-neighbor). When the filtering algorithm requires a pixel value from outside the original image data, it must instead use the value from the nearest edge pixel. (That is, the filter uses 'clamp-to-edge' behavior.)
When the drawImage() method
is passed an animated image as its image
argument, the user agent must use the poster frame of the animation,
or, if there is no poster frame, the first frame of the
animation.
When the image argument is an
HTMLVideoElement, then the frame at the current
playback position must be used as the source image, and the
source image's dimensions must be the intrinsic width and
intrinsic height
of the media resource (i.e. after any aspect-ratio
correction has been applied).
Images are painted without affecting the current path, and are subject to shadow effects, global alpha, the clipping region, and global composition operators.
createImageData(sw, sh)Returns an ImageData object with the given
dimensions in CSS pixels (which might map to a different number of
actual device pixels exposed by the object itself). All the pixels
in the returned object are transparent black.
createImageData(imagedata)Returns an ImageData object with the same
dimensions as the argument. All the pixels in the returned object
are transparent black.
getImageData(sx, sy, sw, sh)Returns an ImageData object containing the image
data for the given rectangle of the canvas.
Throws a NotSupportedError exception if any of the
arguments are not finite. Throws an IndexSizeError
exception if the either of the width or height arguments are
zero.
widthheightReturns the actual dimensions of the data in the ImageData object, in device pixels.
dataReturns the one-dimensional array containing the data in RGBA order, as integers in the range 0 to 255.
putImageData(imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight ])Paints the data from the given ImageData object
onto the canvas. If a dirty rectangle is provided, only the pixels
from that rectangle are painted.
The globalAlpha
and globalCompositeOperation
attributes, as well as the shadow attributes, are ignored for the
purposes of this method call; pixels in the canvas are replaced
wholesale, with no composition, alpha blending, no shadows,
etc.
Throws a NotSupportedError exception if any of the
arguments are not finite.
The createImageData()
method is used to instantiate new blank ImageData
objects. When the method is invoked with two arguments sw and sh, it must return an
ImageData object representing a rectangle with a width
in CSS pixels equal to the absolute magnitude of sw and a height in CSS pixels equal to the absolute
magnitude of sh. When invoked with a single imagedata argument, it must return an
ImageData object representing a rectangle with the same
dimensions as the ImageData object passed as the
argument. The ImageData object returned must be filled
with transparent black.
The getImageData(sx, sy, sw,
sh) method must,
if the canvas element's origin-clean flag is set
to false, throw a SecurityError exception; otherwise, it
must return an ImageData object representing the
underlying pixel data for the area of the canvas denoted by the
rectangle whose corners are the four points (sx,
sy), (sx+sw, sy), (sx+sw, sy+sh),
(sx, sy+sh), in canvas coordinate space units. Pixels
outside the canvas must be returned as transparent black. Pixels
must be returned as non-premultiplied alpha values.
If any of the arguments to createImageData() or
getImageData()
are infinite or NaN, the method must instead throw a
NotSupportedError exception. If either the sw or sh arguments are zero,
the method must instead throw an IndexSizeError
exception.
ImageData objects must be initialized so that their
width attribute
is set to w, the number of physical device
pixels per row in the image data, their height attribute is
set to h, the number of rows in the image data,
and their data
attribute is initialized to a Uint8ClampedArray object.
The Uint8ClampedArray object must use a Canvas
Pixel ArrayBuffer for its storage, and must have
a zero start offset and a length equal to the length of its storage,
in bytes. The Canvas Pixel ArrayBuffer
must contain the image data. At least one pixel's worth of image
data must be returned. [TYPEDARRAY]
A Canvas Pixel ArrayBuffer is an
ArrayBuffer that whose data is represented in
left-to-right order, row by row top to bottom, starting with the top
left, with each pixel's red, green, blue, and alpha components being
given in that order for each pixel. Each component of each device
pixel represented in this array must be in the range 0..255,
representing the 8 bit value for that component. The components must
be assigned consecutive indices starting with 0 for the top left
pixel's red component. [TYPEDARRAY]
The putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight) method writes data from
ImageData structures back to the canvas.
If any of the arguments to the method are infinite or NaN, the
method must throw a NotSupportedError exception.
When the last four arguments are omitted, they must be assumed to
have the values 0, 0, the width member of the imagedata structure, and the height member of the imagedata structure, respectively.
When invoked with arguments that do not, per the last few
paragraphs, cause an exception to be thrown, the putImageData() method
must act as follows:
Let dxdevice be the x-coordinate of the device pixel in the underlying pixel data of the canvas corresponding to the dx coordinate in the canvas coordinate space.
Let dydevice be the y-coordinate of the device pixel in the underlying pixel data of the canvas corresponding to the dy coordinate in the canvas coordinate space.
If dirtyWidth is negative, let dirtyX be dirtyX+dirtyWidth, and let dirtyWidth be equal to the absolute magnitude of dirtyWidth.
If dirtyHeight is negative, let dirtyY be dirtyY+dirtyHeight, and let dirtyHeight be equal to the absolute magnitude of dirtyHeight.
If dirtyX is negative, let dirtyWidth be dirtyWidth+dirtyX, and let dirtyX be zero.
If dirtyY is negative, let dirtyHeight be dirtyHeight+dirtyY, and let dirtyY be zero.
If dirtyX+dirtyWidth is greater than the width attribute of the imagedata argument, let dirtyWidth be the value of that width attribute, minus the
value of dirtyX.
If dirtyY+dirtyHeight is greater than the height attribute of the imagedata argument, let dirtyHeight be the value of that height attribute, minus the
value of dirtyY.
If, after those changes, either dirtyWidth or dirtyHeight is negative or zero, stop these steps without affecting the canvas.
Otherwise, for all integer values of x and y where dirtyX ≤ x < dirtyX+dirtyWidth and dirtyY ≤ y < dirtyY+dirtyHeight, copy the four channels of the pixel with coordinate (x, y) in the imagedata data structure to the pixel with coordinate (dxdevice+x, dydevice+y) in the underlying pixel data of the canvas.
The handling of pixel rounding when the specified coordinates do not exactly map to the device coordinate space is not defined by this specification, except that the following must result in no visible changes to the rendering:
context.putImageData(context.getImageData(x, y, w, h), p, q);
...for any value of x, y, w, and h and where p is the smaller of x and the sum of x and w, and q is the smaller of y and the sum of y and h; and except that the following two calls:
context.createImageData(w, h); context.getImageData(0, 0, w, h);
...must return ImageData objects with the same
dimensions, for any value of w and h. In other words, while user agents may round the
arguments of these methods so that they map to device pixel
boundaries, any rounding performed must be performed consistently
for all of the createImageData(), getImageData() and putImageData()
operations.
This implies that the data returned by getImageData() is at the
resolution of the canvas backing store. This is likely to not be one
device pixel to each CSS pixel if the display used is a high
resolution display.
Due to the lossy nature of converting to and from
premultiplied alpha color values, pixels that have just been set
using putImageData() might be
returned to an equivalent getImageData() as
different values.
The current path, transformation matrix,
shadow attributes, global alpha, the clipping region, and global composition
operator must not affect the getImageData() and putImageData()
methods.
In the following example, the script generates an
ImageData object so that it can draw onto it.
// canvas is a reference to a <canvas> element
var context = canvas.getContext('2d');
// create a blank slate
var data = context.createImageData(canvas.width, canvas.height);
// create some plasma
FillPlasma(data, 'green'); // green plasma
// add a cloud to the plasma
AddCloud(data, data.width/2, data.height/2); // put a cloud in the middle
// paint the plasma+cloud on the canvas
context.putImageData(data, 0, 0);
// support methods
function FillPlasma(data, color) { ... }
function AddCloud(data, x, y) { ... }
Here is an example of using getImageData() and putImageData() to
implement an edge detection filter.
<!DOCTYPE HTML>
<html>
<head>
<title>Edge detection demo</title>
<script>
var image = new Image();
function init() {
image.onload = demo;
image.src = "image.jpeg";
}
function demo() {
var canvas = document.getElementsByTagName('canvas')[0];
var context = canvas.getContext('2d');
// draw the image onto the canvas
context.drawImage(image, 0, 0);
// get the image data to manipulate
var input = context.getImageData(0, 0, canvas.width, canvas.height);
// get an empty slate to put the data into
var output = context.createImageData(canvas.width, canvas.height);
// alias some variables for convenience
// notice that we are using input.width and input.height here
// as they might not be the same as canvas.width and canvas.height
// (in particular, they might be different on high-res displays)
var w = input.width, h = input.height;
var inputData = input.data;
var outputData = output.data;
// edge detection
for (var y = 1; y < h-1; y += 1) {
for (var x = 1; x < w-1; x += 1) {
for (var c = 0; c < 3; c += 1) {
var i = (y*w + x)*4 + c;
outputData[i] = 127 + -inputData[i - w*4 - 4] - inputData[i - w*4] - inputData[i - w*4 + 4] +
-inputData[i - 4] + 8*inputData[i] - inputData[i + 4] +
-inputData[i + w*4 - 4] - inputData[i + w*4] - inputData[i + w*4 + 4];
}
outputData[(y*w + x)*4 + 3] = 255; // alpha
}
}
// put the image data back after manipulation
context.putImageData(output, 0, 0);
}
</script>
</head>
<body onload="init()">
<canvas></canvas>
</body>
</html>
When a shape or image is painted, user agents must follow these steps, in the order given (or act as if they do):
Render the shape or image onto an infinite transparent black bitmap, creating image A, as described in the previous sections. For shapes, the current fill, stroke, and line styles must be honored, and the stroke must itself also be subjected to the current transformation matrix.
When shadows are drawn, render the shadow from image A, using the current shadow styles, creating image B.
When shadows are drawn, multiply the alpha
component of every pixel in B by globalAlpha.
When shadows are drawn, composite B within the clipping region over the current canvas bitmap using the current composition operator.
Multiply the alpha component of every pixel in A by globalAlpha.
Composite A within the clipping region over the current canvas bitmap using the current composition operator.
This section is non-normative.
When a canvas is interactive, authors should include focusable elements in the element's fallback content corresponding to each focusable part of the canvas, as in the example above.
To indicate which focusable part of the canvas is currently
focused, authors should use the drawSystemFocusRing()
method, passing it the element for which a ring is being drawn. This
method only draws the focus ring if the element is focused, so that
it can simply be called whenever drawing the element, without
checking whether the element is focused or not first.
Authors should avoid implementing text editing controls using the
canvas element. Doing so has a large number of
disadvantages:
This is a huge amount of work, and authors are most strongly
encouraged to avoid doing any of it by instead using the
input element, the textarea element, or
the contenteditable
attribute.
This section is non-normative.
Here is an example of a script that uses canvas to draw pretty glowing lines.
<canvas width="800" height="450"></canvas>
<script>
var context = document.getElementsByTagName('canvas')[0].getContext('2d');
var lastX = context.canvas.width * Math.random();
var lastY = context.canvas.height * Math.random();
var hue = 0;
function line() {
context.save();
context.translate(context.canvas.width/2, context.canvas.height/2);
context.scale(0.9, 0.9);
context.translate(-context.canvas.width/2, -context.canvas.height/2);
context.beginPath();
context.lineWidth = 5 + Math.random() * 10;
context.moveTo(lastX, lastY);
lastX = context.canvas.width * Math.random();
lastY = context.canvas.height * Math.random();
context.bezierCurveTo(context.canvas.width * Math.random(),
context.canvas.height * Math.random(),
context.canvas.width * Math.random(),
context.canvas.height * Math.random(),
lastX, lastY);
hue = hue + 10 * Math.random();
context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
context.shadowColor = 'white';
context.shadowBlur = 10;
context.stroke();
context.restore();
}
setInterval(line, 50);
function blank() {
context.fillStyle = 'rgba(0,0,0,0.1)';
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
}
setInterval(blank, 40);
</script>
The canvas APIs must perform color correction at
only two points: when rendering images with their own gamma
correction and color space information onto the canvas, to convert
the image to the color space used by the canvas (e.g. using the 2D
Context's drawImage()
method with an HTMLImageElement object), and when
rendering the actual canvas bitmap to the output device.
Thus, in the 2D context, colors used to draw shapes
onto the canvas will exactly match colors obtained through the getImageData()
method.
The toDataURL() method
must not include color space information in the resource
returned. Where the output format allows it, the color of pixels in
resources created by toDataURL() must match those
returned by the getImageData()
method.
In user agents that support CSS, the color space used by a
canvas element must match the color space used for
processing any colors for that element in CSS.
The gamma correction and color space information of images must
be handled in such a way that an image rendered directly using an
img element would use the same colors as one painted on
a canvas element that is then itself
rendered. Furthermore, the rendering of images that have no color
correction information (such as those returned by the toDataURL() method) must be
rendered with no color correction.
Thus, in the 2D context, calling the drawImage() method to render
the output of the toDataURL() method to the
canvas, given the appropriate dimensions, has no visible effect.
canvas elementsInformation leakage can occur if scripts from one origin can access information (e.g. read pixels) from images from another origin (one that isn't the same).
To mitigate this, canvas elements are defined to
have a flag indicating whether they are origin-clean. All
canvas elements must start with their
origin-clean set to true. The flag must be set to false if
any of the following actions occur:
The element's 2D context's drawImage() method is
called with an HTMLImageElement or an
HTMLVideoElement whose origin is not the
same as that of the
Document object that owns the canvas
element.
The element's 2D context's drawImage() method is
called with an HTMLCanvasElement whose
origin-clean flag is false.
The element's 2D context's fillStyle attribute is set
to a CanvasPattern object that was created from an
HTMLImageElement or an HTMLVideoElement
whose origin was not the same as that of the Document object
that owns the canvas element when the pattern was
created.
The element's 2D context's fillStyle attribute is set
to a CanvasPattern object that was created from an
HTMLCanvasElement whose origin-clean flag was
false when the pattern was created.
The element's 2D context's strokeStyle attribute is
set to a CanvasPattern object that was created from an
HTMLImageElement or an HTMLVideoElement
whose origin was not the same as that of the Document object
that owns the canvas element when the pattern was
created.
The element's 2D context's strokeStyle attribute is
set to a CanvasPattern object that was created from an
HTMLCanvasElement whose origin-clean flag was
false when the pattern was created.
The element's 2D context's fillText() or strokeText() methods are
invoked and consider using a font that has an origin
that is not the same as that of
the Document object that owns the canvas
element. (The font doesn't even have to be used; all that matters
is whether the font was considered for any of the glyphs
drawn.)
The toDataURL(), toBlob(), and getImageData() methods
check the flag and will throw a SecurityError exception
rather than leak cross-origin data.
Even resetting the canvas state by changing its
width or height attributes doesn't reset
the origin-clean flag.
map elementnameinterface HTMLMapElement : HTMLElement { attribute DOMString name; readonly attribute HTMLCollection areas; readonly attribute HTMLCollection images; };
The map element, in conjunction with any
area element descendants, defines an image
map. The element represents its children.
The name attribute
gives the map a name so that it can be referenced. The attribute
must be present and must have a non-empty value with no space characters. The value of the
name attribute must not be a
compatibility-caseless
match for the value of the name
attribute of another map element in the same
document. If the id attribute is also
specified, both attributes must have the same value.
areasReturns an HTMLCollection of the area elements in the map.
imagesReturns an HTMLCollection of the img and object elements that use the map.
The areas attribute
must return an HTMLCollection rooted at the
map element, whose filter matches only
area elements.
The images
attribute must return an HTMLCollection rooted at the
Document node, whose filter matches only
img and object elements that are
associated with this map element according to the
image map processing model.
The IDL attribute name must
reflect the content attribute of the same name.
Image maps can be defined in conjunction with other content on the page, to ease maintenance. This example is of a page with an image map at the top of the page and a corresponding set of text links at the bottom.
<!DOCTYPE HTML>
<TITLE>Babies™: Toys</TITLE>
<HEADER>
<H1>Toys</H1>
<IMG SRC="/images/menu.gif"
ALT="Babies™ navigation menu. Select a department to go to its page."
USEMAP="#NAV">
</HEADER>
...
<FOOTER>
<MAP NAME="NAV">
<P>
<A HREF="/clothes/">Clothes</A>
<AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"> |
<A HREF="/toys/">Toys</A>
<AREA ALT="Toys" COORDS="0,0,100,50" HREF="/toys/"> |
<A HREF="/food/">Food</A>
<AREA ALT="Food" COORDS="0,0,100,50" HREF="/food/"> |
<A HREF="/books/">Books</A>
<AREA ALT="Books" COORDS="0,0,100,50" HREF="/books/">
</MAP>
</FOOTER>
area elementmap element ancestor.altcoordsshapehreftargetdownloadpingrelmediahreflangtypeinterface HTMLAreaElement : HTMLElement { attribute DOMString alt; attribute DOMString coords; attribute DOMString shape; stringifier attribute DOMString href; attribute DOMString target; attribute DOMString download; attribute DOMString ping; attribute DOMString rel; readonly attribute DOMTokenList relList; attribute DOMString media; attribute DOMString hreflang; attribute DOMString type; // URL decomposition IDL attributes attribute DOMString protocol; attribute DOMString host; attribute DOMString hostname; attribute DOMString port; attribute DOMString pathname; attribute DOMString search; attribute DOMString hash; };
The area element represents either a
hyperlink with some text and a corresponding area on an image
map, or a dead area on an image map.
If the area element has an href attribute, then the
area element represents a hyperlink. In
this case, the alt
attribute must be present. It specifies the text of the
hyperlink. Its value must be text that, when presented with the
texts specified for the other hyperlinks of the image
map, and with the alternative text of the image, but without
the image itself, provides the user with the same kind of choice as
the hyperlink would when used without its text but with its shape
applied to the image. The alt
attribute may be left blank if there is another area
element in the same image map that points to the same
resource and has a non-blank alt
attribute.
If the area element has no href attribute, then the area
represented by the element cannot be selected, and the alt attribute must be omitted.
In both cases, the shape and
coords attributes specify the
area.
The shape
attribute is an enumerated attribute. The following
table lists the keywords defined for this attribute. The states
given in the first cell of the rows with keywords give the states to
which those keywords map. Some of the keywords
are non-conforming, as noted in the last column.
| State | Keywords | Notes |
|---|---|---|
| Circle state | circle
| |
circ
| Non-conforming | |
| Default state | default
| |
| Polygon state | poly
| |
polygon
| Non-conforming | |
| Rectangle state | rect
| |
rectangle
| Non-conforming |
The attribute may be omitted. The missing value default is the rectangle state.
The coords
attribute must, if specified, contain a valid list of
integers. This attribute gives the coordinates for the shape
described by the shape
attribute. The processing for this attribute is
described as part of the image map processing
model.
In the circle state,
area elements must have a coords attribute present, with three
integers, the last of which must be non-negative. The first integer
must be the distance in CSS pixels from the left edge of the image
to the center of the circle, the second integer must be the distance
in CSS pixels from the top edge of the image to the center of the
circle, and the third integer must be the radius of the circle,
again in CSS pixels.
In the default state
state, area elements must not have a coords attribute. (The area is the
whole image.)
In the polygon state,
area elements must have a coords attribute with at least six
integers, and the number of integers must be even. Each pair of
integers must represent a coordinate given as the distances from the
left and the top of the image in CSS pixels respectively, and all
the coordinates together must represent the points of the polygon,
in order.
In the rectangle state,
area elements must have a coords attribute with exactly four
integers, the first of which must be less than the third, and the
second of which must be less than the fourth. The four points must
represent, respectively, the distance from the left edge of the
image to the left side of the rectangle, the distance from the
top edge to the top side, the distance from the left edge to the
right side, and the distance from the top edge to the bottom side,
all in CSS pixels.
When user agents allow users to follow hyperlinks
or download hyperlinks
created using the area element, as described in the
next section, the
href,
target,
download, and
ping
attributes decide how the link is followed.
The rel,
media, hreflang, and type attributes may be used to
indicate to the user the likely nature of the target resource before
the user follows the link.
The target,
download,
ping,
rel, media, hreflang, and type attributes must be omitted
if the href attribute is
not present.
If the itemprop is specified
on an area element, then the href attribute must also be
specified.
The activation behavior of area
elements is to run the following steps:
If the click event in
question is not trusted
(i.e. a click() method call was the
reason for the event being dispatched), and the area
element has a download attribute or the
element's target
attribute is present and applying the rules for choosing a
browsing context given a browsing context name, using the
value of the target
attribute as the browsing context name, would result in there not
being a chosen browsing context, then throw an
InvalidAccessError exception and abort these
steps.
Otherwise, the user agent must follow the hyperlink
or download the hyperlink
created by the area element, if any, and as determined by
the download attribute and
any expressed user preference.
The IDL attributes alt, coords, href, target,
download,
ping,
rel, media, hreflang, and type, each must
reflect the respective content attributes of the same
name.
The IDL attribute shape must
reflect the shape
content attribute.
The IDL attribute relList must
reflect the rel
content attribute.
The area element also supports the complement of
URL decomposition IDL attributes, protocol, host, port, hostname, pathname, search, and hash. These must follow the
rules given for URL decomposition IDL attributes, with
the input being the result of
resolving the element's href attribute relative to the
element, if there is such an attribute and resolving it is
successful, or the empty string otherwise; and the common setter action being the
same as setting the element's href attribute to the new output
value.
An image map allows geometric areas on an image to be associated with hyperlinks.
An image, in the form of an img element or an
object element representing an image, may be associated
with an image map (in the form of a map element) by
specifying a usemap attribute on
the img or object element. The usemap attribute, if specified,
must be a valid hash-name reference to a
map element.
Consider an image that looks as follows:

If we wanted just the colored areas to be clickable, we could do it as follows:
<p>
Please select a shape:
<img src="shapes.png" usemap="#shapes"
alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
<map name="shapes">
<area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
<area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
<area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
<area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
<area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
href="yellow.html" alt="Yellow star.">
</map>
</p>
If an img element or an object element
representing an image has a usemap attribute specified,
user agents must process it as follows:
First, rules for parsing a hash-name reference
to a map element must be followed. This will return
either an element (the map) or null.
If that returned null, then abort these steps. The image is not associated with an image map after all.
Otherwise, the user agent must collect all the
area elements that are descendants of the map. Let those be the areas.
Having obtained the list of area elements that form
the image map (the areas), interactive user
agents must process the list in one of two ways.
If the user agent intends to show the text that the
img element represents, then it must use the following
steps.
In user agents that do not support images, or that
have images disabled, object elements cannot represent
images, and thus this section never applies (the fallback
content is shown instead). The following steps therefore only
apply to img elements.
Remove all the area elements in areas that have no href attribute.
Remove all the area elements in areas that have no alt attribute, or whose alt attribute's value is the empty
string, if there is another area element in
areas with the same value in the href attribute and with a
non-empty alt attribute.
Each remaining area element in areas represents a hyperlink. Those
hyperlinks should all be made available to the user in a manner
associated with the text of the img.
In this context, user agents may represent area and
img elements with no specified alt attributes, or whose alt
attributes are the empty string or some other non-visible text, in
a user-agent-defined fashion intended to indicate the lack of
suitable author-provided text.
If the user agent intends to show the image and allow interaction
with the image to select hyperlinks, then the image must be
associated with a set of layered shapes, taken from the
area elements in areas, in reverse
tree order (so the last specified area element in the
map is the bottom-most shape, and the first
element in the map, in tree order, is the
top-most shape).
Each area element in areas must
be processed as follows to obtain a shape to layer onto the
image:
Find the state that the element's shape attribute represents.
Use the rules for parsing a list of integers to
parse the element's coords
attribute, if it is present, and let the result be the coords list. If the attribute is absent, let the
coords list be the empty list.
If the number of items in the coords
list is less than the minimum number given for the
area element's current state, as per the following
table, then the shape is empty; abort these steps.
| State | Minimum number of items |
|---|---|
| Circle state | 3 |
| Default state | 0 |
| Polygon state | 6 |
| Rectangle state | 4 |
Check for excess items in the coords
list as per the entry in the following list corresponding to the
shape attribute's state:
If the shape attribute
represents the rectangle
state, and the first number in the list is numerically less
than the third number in the list, then swap those two numbers
around.
If the shape attribute
represents the rectangle
state, and the second number in the list is numerically less
than the fourth number in the list, then swap those two numbers
around.
If the shape attribute
represents the circle
state, and the third number in the list is less than or
equal to zero, then the shape is empty; abort these steps.
Now, the shape represented by the element is the one
described for the entry in the list below corresponding to the
state of the shape
attribute:
Let x be the first number in coords, y be the second number, and r be the third number.
The shape is a circle whose center is x CSS pixels from the left edge of the image and y CSS pixels from the top edge of the image, and whose radius is r pixels.
The shape is a rectangle that exactly covers the entire image.
Let xi be the (2i)th entry in coords, and yi be the (2i+1)th entry in coords (the first entry in coords being the one with index 0).
Let the coordinates be (xi, yi), interpreted in CSS pixels measured from the top left of the image, for all integer values of i from 0 to (N/2)-1, where N is the number of items in coords.
The shape is a polygon whose vertices are given by the coordinates, and whose interior is established using the even-odd rule. [GRAPHICS]
Let x1 be the first number in coords, y1 be the second number, x2 be the third number, and y2 be the fourth number.
The shape is a rectangle whose top-left corner is given by the coordinate (x1, y1) and whose bottom right corner is given by the coordinate (x2, y2), those coordinates being interpreted as CSS pixels from the top left corner of the image.
For historical reasons, the coordinates must be interpreted
relative to the displayed image after any stretching
caused by the CSS 'width' and 'height' properties (or, for non-CSS
browsers, the image element's width and
height attributes — CSS browsers map
those attributes to the aforementioned CSS properties).
Browser zoom features and transforms applied using CSS or SVG do not affect the coordinates.
Pointing device interaction with an image associated with a set
of layered shapes per the above algorithm must result in the
relevant user interaction events being first fired to the top-most
shape covering the point that the pointing device indicated, if any,
or to the image element itself, if there is no shape covering that
point. User agents may also allow individual area
elements representing hyperlinks to
be selected and activated (e.g. using a keyboard).
Because a map element (and its
area elements) can be associated with multiple
img and object elements, it is possible
for an area element to correspond to multiple focusable
areas of the document.
Image maps are live; if the DOM is mutated, then the user agent must act as if it had rerun the algorithms for image maps.
The math element from the MathML
namespace falls into the embedded content,
phrasing content, and flow content
categories for the purposes of the content models in this
specification.
User agents must handle text other than inter-element
whitespace found in MathML elements whose content models do
not allow straight text by pretending for the purposes of MathML
content models, layout, and rendering that that text is actually
wrapped in an mtext element in the
MathML namespace. (Such text is not, however,
conforming.)
User agents must act as if any MathML element whose contents does
not match the element's content model was replaced, for the purposes
of MathML layout and rendering, by an merror
element in the MathML namespace containing some
appropriate error message.
To enable authors to use MathML tools that only accept MathML in its XML form, interactive HTML user agents are encouraged to provide a way to export any MathML fragment as an XML namespace-well-formed XML fragment.
The semantics of MathML elements are defined by the MathML specification and other applicable specifications. [MATHML]
Here is an example of the use of MathML in an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>The quadratic formula</title>
</head>
<body>
<h1>The quadratic formula</h1>
<p>
<math>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo form="prefix">−</mo> <mi>b</mi>
<mo>±</mo>
<msqrt>
<msup> <mi>b</mi> <mn>2</mn> </msup>
<mo>−</mo>
<mn>4</mn> <mo></mo> <mi>a</mi> <mo></mo> <mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn> <mo></mo> <mi>a</mi>
</mrow>
</mfrac>
</math>
</p>
</body>
</html>
The svg element from the SVG
namespace falls into the embedded content,
phrasing content, and flow content
categories for the purposes of the content models in this
specification.
To enable authors to use SVG tools that only accept SVG in its XML form, interactive HTML user agents are encouraged to provide a way to export any SVG fragment as an XML namespace-well-formed XML fragment.
When the SVG foreignObject element contains
elements from the HTML namespace, such elements must
all be flow content. [SVG]
The content model for title elements in the
SVG namespace inside HTML documents is
phrasing content. (This further constrains the
requirements given in the SVG specification.)
The semantics of SVG elements are defined by the SVG specification and other applicable specifications. [SVG]
The SVG specification includes requirements regarding the
handling of elements in the DOM that are not in the SVG namespace,
that are in SVG fragments, and that are not included in a
foreignObject element. This
specification does not define any processing for elements in SVG
fragments that are not in the HTML namespace; they are considered
neither conforming nor non-conforming from the perspective of this
specification.
Author requirements:
The width and height attributes on
img, iframe, embed,
object, video, and, when their type attribute is in the Image Button state,
input elements may be specified to give the dimensions
of the visual content of the element (the width and height
respectively, relative to the nominal direction of the output
medium), in CSS pixels. The attributes, if specified, must have
values that are valid
non-negative integers.
The specified dimensions given may differ from the dimensions specified in the resource itself, since the resource may have a resolution that differs from the CSS pixel resolution. (On screens, CSS pixels have a resolution of 96ppi, but in general the CSS pixel resolution depends on the reading distance.) If both attributes are specified, then one of the following statements must be true:
The target ratio is the ratio of the
intrinsic width to the intrinsic height in the resource. The specified width and specified
height are the values of the width and height attributes respectively.
The two attributes must be omitted if the resource in question does not have both an intrinsic width and an intrinsic height.
If the two attributes are both zero, it indicates that the element is not intended for the user (e.g. it might be a part of a service to count page views).
The dimension attributes are not intended to be used to stretch the image.
User agent requirements: User agents are expected to use these attributes as hints for the rendering.
The width and height IDL attributes on
the iframe, embed, object,
and video elements must reflect the
respective content attributes of the same name.
For iframe, embed, and
object the IDL attributes are DOMString;
for video the IDL attributes are unsigned
long.
The corresponding IDL attributes for img and input elements are defined in those
respective elements' sections, as they are slightly more specific to
those elements' other behaviors.
table elementcaption element,
followed by zero or more colgroup elements, followed
optionally by a thead element, followed optionally by
a tfoot element, followed by either zero or more
tbody elements or one or more tr
elements, followed optionally by a tfoot element (but
there can only be one tfoot element child in
total).borderinterface HTMLTableElement : HTMLElement { attribute HTMLTableCaptionElement? caption; HTMLElement createCaption(); void deleteCaption(); attribute HTMLTableSectionElement? tHead; HTMLElement createTHead(); void deleteTHead(); attribute HTMLTableSectionElement? tFoot; HTMLElement createTFoot(); void deleteTFoot(); readonly attribute HTMLCollection tBodies; HTMLElement createTBody(); readonly attribute HTMLCollection rows; HTMLElement insertRow(optional long index); void deleteRow(long index); attribute DOMString border; };
The table element represents data with
more than one dimension, in the form of a table.
The table element takes part in
the table model. Tables have rows, columns, and
cells given by their descendants. The rows and columns form a grid;
a table's cells must completely cover that grid without overlap.
Precise rules for determining whether this conformance requirement is met are described in the description of the table model.
Authors are encouraged to provide information describing how to interpret complex tables. Guidance on how provide such information is given below.
If a table element has a (non-conforming) summary attribute, and the user
agent has not classified the table as a layout table, the user agent
may report the contents of that attribute to the user.
Tables must not be used as layout aids. Historically, some Web authors have misused tables in HTML as a way to control their page layout. This usage is non-conforming, because tools attempting to extract tabular data from such documents would obtain very confusing results. In particular, users of accessibility tools like screen readers are likely to find it very difficult to navigate pages with tables used for layout.
Tables should not be used as layout aids. Historically, many Web authors have tables in HTML as a way to control their page layout making it difficult to extract tabular data from such documents. In particular, users of accessibility tools, like screen readers, are likely to find it very difficult to navigate pages with tables used for layout. If a table is to be used for layout it must be marked with the attribute role="presentation" for a user agent to properly represent the table to an assistive technology and to properly convey the intent of the author to tools that wish to extract tabular data from the document.
There are a variety of alternatives to using HTML tables for layout, primarily using CSS positioning and the CSS table model.
The border
attribute may be specified on a table element to
explicitly indicate that the table element is not being
used for layout purposes. If specified, the attribute's value must
either be the empty string or the value "1".
The attribute is used by certain user agents as an indication that
borders should be drawn around cells of the table.
Tables can be complicated to understand and navigate. To help users with this, user agents should clearly delineate cells in a table from each other, unless the user agent has classified the table as a (non-conforming) layout table.
Authors and implementors are encouraged to consider using some of the table layout techniques described below to make tables easier to navigate for users.
User agents, especially those that do table analysis on arbitrary content, are encouraged to find heuristics to determine which tables actually contain data and which are merely being used for layout. This specification does not define a precise heuristic, but the following are suggested as possible indicators:
| Feature | Indication |
|---|---|
The use of the role attribute with the value presentation
| Probably a layout table |
The use of the border attribute with the non-conforming value 0
| Probably a layout table |
The use of the non-conforming cellspacing and cellpadding attributes with the value 0
| Probably a layout table |
The use of caption, thead, or th elements
| Probably a non-layout table |
The use of the headers and scope attributes
| Probably a non-layout table |
The use of the border attribute with a value other than 0
| Probably a non-layout table |
| Explicit visible borders set using CSS | Probably a non-layout table |
The use of the summary attribute
| Not a good indicator (both layout and non-layout tables have historically been given this attribute) |
It is quite possible that the above suggestions are wrong. Implementors are urged to provide feedback elaborating on their experiences with trying to create a layout table detection heuristic.
caption [ = value ]Returns the table's caption element.
Can be set, to replace the caption element. If the
new value is not a caption element, throws a
HierarchyRequestError exception.
createCaption()Ensures the table has a caption element, and returns it.
deleteCaption()Ensures the table does not have a caption element.
tHead [ = value ]Returns the table's thead element.
Can be set, to replace the thead element. If the
new value is not a thead element, throws a
HierarchyRequestError exception.
createTHead()Ensures the table has a thead element, and returns it.
deleteTHead()Ensures the table does not have a thead element.
tFoot [ = value ]Returns the table's tfoot element.
Can be set, to replace the tfoot element. If the
new value is not a tfoot element, throws a
HierarchyRequestError exception.
createTFoot()Ensures the table has a tfoot element, and returns it.
deleteTFoot()Ensures the table does not have a tfoot element.
tBodiesReturns an HTMLCollection of the tbody elements of the table.
createTBody()Creates a tbody element, inserts it into the table, and returns it.
rowsReturns an HTMLCollection of the tr elements of the table.
insertRow(index)Creates a tr element, along with a tbody if required, inserts them into the table at the position given by the argument, and returns the tr.
The position is relative to the rows in the table. The index −1 is equivalent to inserting at the end of the table.
If the given position is less than −1 or greater than the number of rows, throws an IndexSizeError exception.
deleteRow(index)Removes the tr element with the given position in the table.
The position is relative to the rows in the table. The index −1 is equivalent to deleting the last row of the table.
If the given position is less than −1 or greater than the index of the last row, or if there are no rows, throws an IndexSizeError exception.
The caption IDL
attribute must return, on getting, the first caption
element child of the table element, if any, or null
otherwise. On setting, if the new value is a caption
element, the first caption element child of the
table element, if any, must be removed, and the new
value must be inserted as the first node of the table
element. If the new value is not a caption element,
then a HierarchyRequestError DOM exception must be
thrown instead.
The createCaption()
method must return the first caption element child of
the table element, if any; otherwise a new
caption element must be created, inserted as the first
node of the table element, and then returned.
The deleteCaption()
method must remove the first caption element child of
the table element, if any.
The tHead IDL
attribute must return, on getting, the first thead
element child of the table element, if any, or null
otherwise. On setting, if the new value is a thead
element, the first thead element child of the
table element, if any, must be removed, and the new
value must be inserted immediately before the first element in the
table element that is neither a caption
element nor a colgroup element, if any, or at the end
of the table if there are no such elements. If the new value is not
a thead element, then a
HierarchyRequestError DOM exception must be thrown
instead.
The createTHead()
method must return the first thead element child of the
table element, if any; otherwise a new
thead element must be created and inserted immediately
before the first element in the table element that is
neither a caption element nor a colgroup
element, if any, or at the end of the table if there are no such
elements, and then that new element must be returned.
The deleteTHead()
method must remove the first thead element child of the
table element, if any.
The tFoot IDL
attribute must return, on getting, the first tfoot
element child of the table element, if any, or null
otherwise. On setting, if the new value is a tfoot
element, the first tfoot element child of the
table element, if any, must be removed, and the new
value must be inserted immediately before the first element in the
table element that is neither a caption
element, a colgroup element, nor a thead
element, if any, or at the end of the table if there are no such
elements. If the new value is not a tfoot element, then
a HierarchyRequestError DOM exception must be thrown
instead.
The createTFoot()
method must return the first tfoot element child of the
table element, if any; otherwise a new
tfoot element must be created and inserted immediately
before the first element in the table element that is
neither a caption element, a colgroup
element, nor a thead element, if any, or at the end of
the table if there are no such elements, and then that new element
must be returned.
The deleteTFoot()
method must remove the first tfoot element child of the
table element, if any.
The tBodies
attribute must return an HTMLCollection rooted at the
table node, whose filter matches only
tbody elements that are children of the
table element.
The createTBody()
method must create a new tbody element, insert it
immediately after the last tbody element in the
table element, if any, or at the end of the
table element if the table element has no
tbody element children, and then must return the new
tbody element.
The rows attribute
must return an HTMLCollection rooted at the
table node, whose filter matches only tr
elements that are either children of the table element,
or children of thead, tbody, or
tfoot elements that are themselves children of the
table element. The elements in the collection must be
ordered such that those elements whose parent is a
thead are included first, in tree order, followed by
those elements whose parent is either a table or
tbody element, again in tree order, followed finally by
those elements whose parent is a tfoot element, still
in tree order.
The behavior of the insertRow(index) method depends on the state of
the table. When it is called, the method must act as required by the
first item in the following list of conditions that describes the
state of the table and the index argument:
rows
collection:IndexSizeError
exception.rows collection has
zero elements in it, and the table has no
tbody elements in it:tbody element, then
create a tr element, then append the tr
element to the tbody element, then append the
tbody element to the table element, and
finally return the tr element.rows collection has
zero elements in it:tr element, append it to
the last tbody element in the table, and return the
tr element.rows collection:tr element, and append it
to the parent of the last tr element in the rows collection. Then, the newly
created tr element must be returned.tr element, insert it
immediately before the indexth tr
element in the rows collection,
in the same parent, and finally must return the newly created
tr element.When the deleteRow(index) method is called, the user agent
must run the following steps:
If index is equal to −1, then
index must be set to the number if items in the
rows collection, minus
one.
Now, if index is less than zero, or
greater than or equal to the number of elements in the rows collection, the method must
instead throw an IndexSizeError exception, and these
steps must be aborted.
Otherwise, the method must remove the indexth element in the rows collection from its parent.
The border IDL
attribute must reflect the content attribute of the
same name.
Here is an example of a table being used to mark up a Sudoku puzzle. Observe the lack of headers, which are not necessary in such a table.
<section>
<style scoped>
table { border-collapse: collapse; border: solid thick; }
colgroup, tbody { border: solid medium; }
td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; padding: 0; }
</style>
<h1>Today's Sudoku</h1>
<table>
<colgroup><col><col><col>
<colgroup><col><col><col>
<colgroup><col><col><col>
<tbody>
<tr> <td> 1 <td> <td> 3 <td> 6 <td> <td> 4 <td> 7 <td> <td> 9
<tr> <td> <td> 2 <td> <td> <td> 9 <td> <td> <td> 1 <td>
<tr> <td> 7 <td> <td> <td> <td> <td> <td> <td> <td> 6
<tbody>
<tr> <td> 2 <td> <td> 4 <td> <td> 3 <td> <td> 9 <td> <td> 8
<tr> <td> <td> <td> <td> <td> <td> <td> <td> <td>
<tr> <td> 5 <td> <td> <td> 9 <td> <td> 7 <td> <td> <td> 1
<tbody>
<tr> <td> 6 <td> <td> <td> <td> 5 <td> <td> <td> <td> 2
<tr> <td> <td> <td> <td> <td> 7 <td> <td> <td> <td>
<tr> <td> 9 <td> <td> <td> 8 <td> <td> 2 <td> <td> <td> 5
</table>
</section>
For tables that consist of more than just a grid of cells with headers in the first row and headers in the first column, and for any table in general where the reader might have difficulty understanding the content, authors should include explanatory information introducing the table. This information is useful for all users, but is especially useful for users who cannot see the table, e.g. users of screen readers.
Such explanatory information should introduce the purpose of the table, outline its basic cell structure, highlight any trends or patterns, and generally teach the user how to use the table.
For instance, the following table:
| Negative | Characteristic | Positive |
|---|---|---|
| Sad | Mood | Happy |
| Failing | Grade | Passing |
...might benefit from a description explaining the way the table is laid out, something like "Characteristics are given in the second column, with the negative side in the left column and the positive side in the right column".
There are a variety of ways to include this information, such as:
<p>In the following table, characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.</p> <table> <caption>Characteristics with positive and negative sides</caption> <thead> <tr> <th id="n"> Negative <th> Characteristic <th> Positive <tbody> <tr> <td headers="n r1"> Sad <th id="r1"> Mood <td> Happy <tr> <td headers="n r2"> Failing <th id="r2"> Grade <td> Passing </table>
caption<table> <caption> <strong>Characteristics with positive and negative sides.</strong> <p>Characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.</p> </caption> <thead> <tr> <th id="n"> Negative <th> Characteristic <th> Positive <tbody> <tr> <td headers="n r1"> Sad <th id="r1"> Mood <td> Happy <tr> <td headers="n r2"> Failing <th id="r2"> Grade <td> Passing </table>
caption, in a details element<table> <caption> <strong>Characteristics with positive and negative sides.</strong> <details> <summary>Help</summary> <p>Characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.</p> </details> </caption> <thead> <tr> <th id="n"> Negative <th> Characteristic <th> Positive <tbody> <tr> <td headers="n r1"> Sad <th id="r1"> Mood <td> Happy <tr> <td headers="n r2"> Failing <th id="r2"> Grade <td> Passing </table>
figure<figure>
<figcaption>Characteristics with positive and negative sides</figcaption>
<p>Characteristics are given in the second column, with the
negative side in the left column and the positive side in the right
column.</p>
<table>
<thead>
<tr>
<th id="n"> Negative
<th> Characteristic
<th> Positive
<tbody>
<tr>
<td headers="n r1"> Sad
<th id="r1"> Mood
<td> Happy
<tr>
<td headers="n r2"> Failing
<th id="r2"> Grade
<td> Passing
</table>
</figure>figure's figcaption<figure>
<figcaption>
<strong>Characteristics with positive and negative sides</strong>
<p>Characteristics are given in the second column, with the
negative side in the left column and the positive side in the right
column.</p>
</figcaption>
<table>
<thead>
<tr>
<th id="n"> Negative
<th> Characteristic
<th> Positive
<tbody>
<tr>
<td headers="n r1"> Sad
<th id="r1"> Mood
<td> Happy
<tr>
<td headers="n r2"> Failing
<th id="r2"> Grade
<td> Passing
</table>
</figure>Authors may also use other techniques, or combinations of the above techniques, as appropriate.
The best option, of course, rather than writing a description explaining the way the table is laid out, is to adjust the table such that no explanation is needed.
In the case of the table used in the examples above, a simple
rearrangement of the table so that the headers are on the top and
left sides removes the need for an explanation as well as removing
the need for the use of headers attributes:
<table> <caption>Characteristics with positive and negative sides</caption> <thead> <tr> <th> Characteristic <th> Negative <th> Positive <tbody> <tr> <th> Mood <td> Sad <td> Happy <tr> <th> Grade <td> Failing <td> Passing </table>
Good table layout is key to making tables more readable and usable.
In visual media, providing column and row borders and alternating row backgrounds can be very effective to make complicated tables more readable.
For tables with large volumes of numeric content, using monospaced fonts can help users see patterns, especially in situations where a user agent does not render the borders. (Unfortunately, for historical reasons, not rendering borders on tables is a common default.)
In speech media, table cells can be distinguished by reporting the corresponding headers before reading the cell's contents, and by allowing users to navigate the table in a grid fashion, rather than serializing the entire contents of the table in source order.
Authors are encouraged to use CSS to achieve these effects.
User agents are encouraged to render tables using these techniques whenever the page does not use CSS and the table is not classified as a layout table.
caption elementtable element.table elements.interface HTMLTableCaptionElement : HTMLElement {};
The caption element represents the title of the
table that is its parent, if it has a parent and that
is a table element.
The caption element takes part in the table
model.
When a table element is the only content in a
figure element other than the figcaption,
the caption element should be omitted in favor of the
figcaption.
A caption can introduce context for a table, making it significantly easier to understand.
Consider, for instance, the following table:
| 1 | 2 | 3 | 4 | 5 | 6 | |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
In the abstract, this table is not clear. However, with a caption giving the table's number (for reference in the main prose) and explaining its use, it makes more sense:
<caption> <p>Table 1. <p>This table shows the total score obtained from rolling two six-sided dice. The first row represents the value of the first die, the first column the value of the second die. The total is given in the cell that corresponds to the values of the two dice. </caption>
This provides the user with more context:
| 1 | 2 | 3 | 4 | 5 | 6 | |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
colgroup elementtable element, after any
caption elements and before any thead,
tbody, tfoot, and tr
elements.span attribute is present: Empty.span attribute is absent: Zero or more col elements.spaninterface HTMLTableColElement : HTMLElement { attribute unsigned long span; };
The colgroup element represents a group of one or more columns in the table that
is its parent, if it has a parent and that is a table
element.
If the colgroup element contains no col
elements, then the element may have a span content attribute
specified, whose value must be a valid non-negative
integer greater than zero.
The colgroup element and its span attribute take part in the
table model.
The span IDL
attribute must reflect the content attribute of the
same name. The value must be limited to only non-negative
numbers greater than zero.
col elementcolgroup element that doesn't have
a span attribute.spanHTMLTableColElement, same as for
colgroup elements. This interface defines one member,
span.
If a col element has a parent and that is a
colgroup element that itself has a parent that is a
table element, then the col element
represents one or more columns in the column group represented by that
colgroup.
The element may have a span content attribute
specified, whose value must be a valid non-negative
integer greater than zero.
The col element and its span attribute take part in the
table model.
The span IDL
attribute must reflect the content attribute of the
same name. The value must be limited to only non-negative
numbers greater than zero.
tbody elementtable element, after any
caption, colgroup, and
thead elements, but only if there are no
tr elements that are children of the
table element.tr elementsinterface HTMLTableSectionElement : HTMLElement { readonly attribute HTMLCollection rows; HTMLElement insertRow(optional long index); void deleteRow(long index); };
The HTMLTableSectionElement interface is also
used for thead and tfoot elements.
The tbody element represents a block of rows that consist of a body of data for
the parent table element, if the tbody
element has a parent and it is a table.
The tbody element takes part in the table
model.
rowsReturns an HTMLCollection of the tr elements of the table section.
insertRow( [ index ] )Creates a tr element, inserts it into the table section at the position given by the argument, and returns the tr.
The position is relative to the rows in the table section. The index −1, which is the default if the argument is omitted, is equivalent to inserting at the end of the table section.
If the given position is less than −1 or greater than the number of rows, throws an IndexSizeError exception.
deleteRow(index)Removes the tr element with the given position in the table section.
The position is relative to the rows in the table section. The index −1 is equivalent to deleting the last row of the table section.
If the given position is less than −1 or greater than the index of the last row, or if there are no rows, throws an IndexSizeError exception.
The rows attribute
must return an HTMLCollection rooted at the element,
whose filter matches only tr elements that are children
of the element.
The insertRow(index) method must, when invoked on an
element table section, act as follows:
If index is less than −1 or greater than the
number of elements in the rows
collection, the method must throw an IndexSizeError
exception.
If index is missing, equal to −1, or
equal to the number of items in the rows collection, the method must
create a tr element, append it to the element table section, and return the newly created
tr element.
Otherwise, the method must create a tr element,
insert it as a child of the table section
element, immediately before the indexth
tr element in the rows collection, and finally must
return the newly created tr element.
The deleteRow(index) method must remove the indexth element in the rows collection from its parent. If
index is less than zero or greater than or equal
to the number of elements in the rows collection, the method must
instead throw an IndexSizeError exception.
thead elementtable element, after any
caption, and colgroup
elements and before any tbody, tfoot, and
tr elements, but only if there are no other
thead elements that are children of the
table element.tr elementsHTMLTableSectionElement, as defined for
tbody elements.The thead element represents the block of rows that consist of the column labels
(headers) for the parent table element, if the
thead element has a parent and it is a
table.
The thead element takes part in the table
model.
This example shows a thead element being used.
Notice the use of both th and td elements
in the thead element: the first row is the headers,
and the second row is an explanation of how to fill in the
table.
<table> <caption> School auction sign-up sheet </caption> <thead> <tr> <th><label for=e1>Name</label> <th><label for=e2>Product</label> <th><label for=e3>Picture</label> <th><label for=e4>Price</label> <tr> <td>Your name here <td>What are you selling? <td>Link to a picture <td>Your reserve price <tbody> <tr> <td>Ms Danus <td>Doughnuts <td><img src="http://example.com/mydoughnuts.png" title="Doughnuts from Ms Danus"> <td>$45 <tr> <td><input id=e1 type=text name=who required form=f> <td><input id=e2 type=text name=what required form=f> <td><input id=e3 type=url name=pic form=f> <td><input id=e4 type=number step=0.01 min=0 value=0 required form=f> </table> <form id=f action="/auction.cgi"> <input type=button name=add value="Submit"> </form>
tfoot elementtable element, after any
caption, colgroup, and thead
elements and before any tbody and tr
elements, but only if there are no other tfoot
elements that are children of the table element.table element, after any
caption, colgroup, thead,
tbody, and tr elements, but only if there
are no other tfoot elements that are children of the
table element.tr elementsHTMLTableSectionElement, as defined for
tbody elements.The tfoot element represents the block of rows that consist of the column summaries
(footers) for the parent table element, if the
tfoot element has a parent and it is a
table.
The tfoot element takes part in the table
model.
tr elementthead element.tbody element.tfoot element.table element, after any
caption, colgroup, and thead
elements, but only if there are no tbody elements that
are children of the table element.td or th elementsinterface HTMLTableRowElement : HTMLElement { readonly attribute long rowIndex; readonly attribute long sectionRowIndex; readonly attribute HTMLCollection cells; HTMLElement insertCell(optional long index); void deleteCell(long index); };
The tr element represents a row of cells in a table.
The tr element takes part in the table
model.
rowIndexReturns the position of the row in the table's rows list.
Returns −1 if the element isn't in a table.
sectionRowIndexReturns the position of the row in the table section's rows list.
Returns −1 if the element isn't in a table section.
cellsReturns an HTMLCollection of the td and th elements of the row.
insertCell( [ index ] )Creates a td element, inserts it into the table
row at the position given by the argument, and returns the
td.
The position is relative to the cells in the row. The index −1, which is the default if the argument is omitted, is equivalent to inserting at the end of the row.
If the given position is less than −1 or greater than
the number of cells, throws an IndexSizeError
exception.
deleteCell(index)Removes the td or th element with the
given position in the row.
The position is relative to the cells in the row. The index −1 is equivalent to deleting the last cell of the row.
If the given position is less than −1 or greater than
the index of the last cell, or if there are no cells, throws an
IndexSizeError exception.
The rowIndex
attribute must, if the element has a parent table
element, or a parent tbody, thead, or
tfoot element and a grandparent
table element, return the index of the tr
element in that table element's rows collection. If there is no such
table element, then the attribute must return
−1.
The sectionRowIndex
attribute must, if the element has a parent table,
tbody, thead, or tfoot
element, return the index of the tr element in the
parent element's rows collection (for tables,
that's the HTMLTableElement.rows
collection; for table sections, that's the HTMLTableRowElement.rows
collection). If there is no such parent element, then the attribute
must return −1.
The cells attribute
must return an HTMLCollection rooted at the
tr element, whose filter matches only td
and th elements that are children of the
tr element.
The insertCell(index) method must act as follows:
If index is less than −1 or greater than the
number of elements in the cells
collection, the method must throw an IndexSizeError
exception.
If index is missing, equal to −1, or
equal to the number of items in cells collection, the method must create
a td element, append it to the tr element,
and return the newly created td element.
Otherwise, the method must create a td element,
insert it as a child of the tr element, immediately
before the indexth td or
th element in the cells collection, and finally must
return the newly created td element.
The deleteCell(index) method must remove the indexth element in the cells collection from its parent. If
index is less than zero or greater than or equal
to the number of elements in the cells collection, the method must
instead throw an IndexSizeError exception.
td elementtr element.colspanrowspanheadersinterface HTMLTableDataCellElement : HTMLTableCellElement {};
The td element represents a data cell in a table.
The td element and its colspan, rowspan, and headers attributes take part in the
table model.
th elementtr element.header, footer, sectioning content, or heading content descendants.colspanrowspanheadersscopeinterface HTMLTableHeaderCellElement : HTMLTableCellElement { attribute DOMString scope; };
The th element represents a header cell in a table.
The th element may have a scope content attribute
specified. The scope attribute is
an enumerated attribute with five states, four of which
have explicit keywords:
row
keyword, which maps to the row statecol
keyword, which maps to the column staterowgroup keyword,
which maps to the row group stateth element's
scope attribute must not be in
the row group state if
the element is not anchored in a row group.colgroup keyword,
which maps to the column group stateth
element's scope attribute must
not be in the column
group state if the element is not anchored in a column group.The scope attribute's
missing value default is the auto state.
The th element and its colspan, rowspan, headers, and scope attributes take part in the
table model.
The scope IDL
attribute must reflect the content attribute of the
same name, limited to only known values.
The following example shows how the scope attribute's rowgroup value affects which
data cells a header cell applies to.
Here is a markup fragment showing a table:
<table> <thead> <tr> <th> ID <th> Measurement <th> Average <th> Maximum <tbody> <tr> <td> <th scope=rowgroup> Cats <td> <td> <tr> <td> 93 <th scope=row> Legs <td> 3.5 <td> 4 <tr> <td> 10 <th scope=row> Tails <td> 1 <td> 1 <tbody> <tr> <td> <th scope=rowgroup> English speakers <td> <td> <tr> <td> 32 <th scope=row> Legs <td> 2.67 <td> 4 <tr> <td> 35 <th scope=row> Tails <td> 0.33 <td> 1 </table>
This would result in the following table:
| ID | Measurement | Average | Maximum |
|---|---|---|---|
| Cats | |||
| 93 | Legs | 3.5 | 4 |
| 10 | Tails | 1 | 1 |
| English speakers | |||
| 32 | Legs | 2.67 | 4 |
| 35 | Tails | 0.33 | 1 |
The headers in the first row all apply directly down to the rows in their column.
The headers with the explicit scope attributes apply to all the
cells in their row group other than the cells in the first column.
The remaining headers apply just to the cells to the right of them.
td and th elementsThe td and th elements may have a colspan content
attribute specified, whose value must be a valid non-negative
integer greater than zero.
The td and th elements may also have a
rowspan content
attribute specified, whose value must be a valid non-negative
integer.
These attributes give the number of columns and rows respectively that the cell is to span. These attributes must not be used to overlap cells, as described in the description of the table model.
The td and th element may have a headers content
attribute specified. The headers attribute, if specified,
must contain a string consisting of an unordered set of unique
space-separated tokens that are case-sensitive,
each of which must have the value of an ID of a th element taking
part in the same table as the
td or th element (as
defined by the table model).
A th element with ID id is said
to be directly targeted by all td and
th elements in the same table that have headers attributes whose values
include as one of their tokens the ID id. A
th element A is said to be
targeted by a th or td element
B if either A is directly
targeted by B or if there exists an element
C that is itself targeted by the element
B and A is directly
targeted by C.
A th element must not be targeted by
itself.
The colspan, rowspan, and headers attributes take part in the
table model.
The td and th elements implement
interfaces that inherit from the HTMLTableCellElement
interface:
interface HTMLTableCellElement : HTMLElement { attribute unsigned long colSpan; attribute unsigned long rowSpan; [PutForwards=value] readonly attribute DOMSettableTokenList headers; readonly attribute long cellIndex; };
cellIndexReturns the position of the cell in the row's cells list. This does not necessarily
correspond to the x-position of the cell in
the table, since earlier cells might cover multiple rows or
columns.
Returns 0 if the element isn't in a row.
The colSpan IDL
attribute must reflect the colspan content attribute. The
value must be limited to only non-negative numbers greater
than zero.
The rowSpan IDL
attribute must reflect the rowspan content attribute. Its
default value, which must be used if parsing the attribute as a non-negative
integer returns an error, is 1.
The headers IDL
attribute must reflect the content attribute of the
same name.
The cellIndex
IDL attribute must, if the element has a parent tr
element, return the index of the cell's element in the parent
element's cells collection. If
there is no such parent element, then the attribute must return
0.
The various table elements and their content attributes together define the table model.
A table consists of cells
aligned on a two-dimensional grid of slots with coordinates (x, y). The grid is finite, and is
either empty or has one or more slots. If the grid has one or more
slots, then the x coordinates are always in the
range 0 ≤ x < xwidth, and the y
coordinates are always in the range 0 ≤ y < yheight. If one or both of xwidth and yheight are zero, then the table is empty (has
no slots). Tables correspond to table elements.
A cell is a set of slots anchored
at a slot (cellx, celly), and with a particular
width and height such that
the cell covers all the slots with coordinates (x, y) where cellx ≤ x < cellx+width and
celly ≤ y < celly+height. Cells can
either be data cells or header cells. Data cells
correspond to td elements, and header cells correspond
to th elements. Cells of both types can have zero or
more associated header cells.
It is possible, in certain error cases, for two cells to occupy the same slot.
A row is a complete set of slots
from x=0 to x=xwidth-1, for a particular value of y. Rows correspond to tr elements.
A column is a complete set of
slots from y=0 to y=yheight-1, for a particular value of x. Columns can correspond to col
elements. In the absence of col elements, columns are
implied.
A row group is a set of
rows anchored at a slot (0, groupy) with a particular height such that the row group covers all the slots
with coordinates (x, y)
where 0 ≤ x < xwidth and groupy ≤ y < groupy+height. Row groups
correspond to tbody, thead, and
tfoot elements. Not every row is necessarily in a row
group.
A column group is a set
of columns anchored at a slot
(groupx, 0) with a
particular width such that the column group
covers all the slots with coordinates (x, y) where groupx ≤ x < groupx+width and
0 ≤ y < yheight. Column groups
correspond to colgroup elements. Not every column is
necessarily in a column group.
Row groups cannot overlap each other. Similarly, column groups cannot overlap each other.
A cell cannot cover slots that are from two or more row groups. It is, however, possible for a cell to be in multiple column groups. All the slots that form part of one cell are part of zero or one row groups and zero or more column groups.
In addition to cells, columns, rows, row
groups, and column
groups, tables can have a
caption element associated with them. This gives the
table a heading, or legend.
A table model error is an error with the data
represented by table elements and their
descendants. Documents must not have table model errors.
To determine which elements correspond to which slots in a table associated with a
table element, to determine the dimensions of the table
(xwidth and yheight), and to determine if
there are any table model
errors, user agents must use the following algorithm:
Let xwidth be zero.
Let yheight be zero.
Let pending tfoot elements be
a list of tfoot elements, initially empty.
Let the table be the table represented by the
table element. The xwidth and yheight variables give the
table's dimensions. The table is
initially empty.
If the table element has no children elements,
then return the table (which will be empty),
and abort these steps.
Associate the first caption element child of the
table element with the table. If
there are no such children, then it has no associated
caption element.
Let the current element be the first
element child of the table element.
If a step in this algorithm ever requires the current element to be advanced to the next child of the
table when there is no such next child, then
the user agent must jump to the step labeled end, near the
end of this algorithm.
While the current element is not one of the
following elements, advance the current element to the next child of the
table:
colgrouptheadtbodytfoottrIf the current element is a
colgroup, follow these substeps:
Column groups: Process the current element according to the appropriate case below:
col element childrenFollow these steps:
Let xstart have the value of xwidth.
Let the current column be the first
col element child of the colgroup
element.
Columns: If the current column
col element has a span attribute, then parse its
value using the rules for parsing non-negative
integers.
If the result of parsing the value is not an error or zero, then let span be that value.
Otherwise, if the col element has no span attribute, or if trying to
parse the attribute's value resulted in an error or zero,
then let span be 1.
Increase xwidth by span.
Let the last span columns in the
table correspond to the current
column col element.
If current column is not the last
col element child of the colgroup
element, then let the current column be
the next col element child of the
colgroup element, and return to the step
labeled columns.
Let all the last columns in the
table from x=xstart to x=xwidth-1 form a
new column group,
anchored at the slot (xstart, 0), with width xwidth-xstart,
corresponding to the colgroup element.
col element childrenIf the colgroup element has a span attribute, then parse
its value using the rules for parsing non-negative
integers.
If the result of parsing the value is not an error or zero, then let span be that value.
Otherwise, if the colgroup element has no
span attribute, or
if trying to parse the attribute's value resulted in an
error or zero, then let span be 1.
Increase xwidth by span.
Let the last span columns in the
table form a new column group, anchored
at the slot (xwidth-span,
0), with width span, corresponding to
the colgroup element.
Advance the current element to the next child of the
table.
While the current element is not one of
the following elements, advance the current element to the next child of the
table:
colgrouptheadtbodytfoottrIf the current element is a
colgroup element, jump to the step labeled
column groups above.
Let ycurrent be zero.
Let the list of downward-growing cells be an empty list.
Rows: While the current element is
not one of the following elements, advance the current element to the next child of the
table:
theadtbodytfoottrIf the current element is a
tr, then run the algorithm for processing
rows, advance
the current element to the next child of the
table, and return to the step labeled
rows.
Run the algorithm for ending a row group.
If the current element is a
tfoot, then add that element to the list of pending tfoot elements, advance the current element to the next child of the
table, and return to the step labeled
rows.
The current element is either a
thead or a tbody.
Run the algorithm for processing row groups.
Advance the current element to the next child of the
table.
Return to the step labeled rows.
End: For each tfoot element in the list of
pending tfoot elements, in tree
order, run the algorithm for processing row
groups.
If there exists a row or column in the table containing only slots that do not have a cell anchored to them, then this is a table model error.
Return the table.
The algorithm for processing row groups, which is
invoked by the set of steps above for processing
thead, tbody, and tfoot
elements, is:
Let ystart have the value of yheight.
For each tr element that is a child of the element
being processed, in tree order, run the algorithm for
processing rows.
If yheight > ystart, then let all the last rows in the table from y=ystart to y=yheight-1 form a new row group, anchored at the slot with coordinate (0, ystart), with height yheight-ystart, corresponding to the element being processed.
Run the algorithm for ending a row group.
The algorithm for ending a row group, which is invoked by the set of steps above when starting and ending a block of rows, is:
While ycurrent is less than yheight, follow these steps:
Run the algorithm for growing downward-growing cells.
Increase ycurrent by 1.
Empty the list of downward-growing cells.
The algorithm for processing rows, which is invoked by
the set of steps above for processing tr elements,
is:
If yheight is equal to ycurrent, then increase yheight by 1. (ycurrent is never greater than yheight.)
Let xcurrent be 0.
Run the algorithm for growing downward-growing cells.
If the tr element being processed has no
td or th element children, then increase
ycurrent by 1, abort this
set of steps, and return to the algorithm above.
Let current cell be the first
td or th element in the tr
element being processed.
Cells: While xcurrent is less than xwidth and the slot with coordinate (xcurrent, ycurrent) already has a cell assigned to it, increase xcurrent by 1.
If xcurrent is equal to xwidth, increase xwidth by 1. (xcurrent is never greater than xwidth.)
If the current cell has a colspan attribute, then parse that
attribute's value, and let colspan be
the result.
If parsing that value failed, or returned zero, or if the attribute is absent, then let colspan be 1, instead.
If the current cell has a rowspan attribute, then parse that attribute's
value, and let rowspan be the
result.
If parsing that value failed or if the attribute is absent, then let rowspan be 1, instead.
If rowspan is zero, then let cell grows downward be true, and set rowspan to 1. Otherwise, let cell grows downward be false.
If xwidth < xcurrent+colspan, then let xwidth be xcurrent+colspan.
If yheight < ycurrent+rowspan, then let yheight be ycurrent+rowspan.
Let the slots with coordinates (x, y) such that xcurrent ≤ x < xcurrent+colspan and ycurrent ≤ y < ycurrent+rowspan be covered by a new cell c, anchored at (xcurrent, ycurrent), which has width colspan and height rowspan, corresponding to the current cell element.
If the current cell element is a
th element, let this new cell c
be a header cell; otherwise, let it be a data cell.
To establish which header cells apply to the current cell element, use the algorithm for assigning header cells described in the next section.
If any of the slots involved already had a cell covering them, then this is a table model error. Those slots now have two cells overlapping.
If cell grows downward is true, then add the tuple {c, xcurrent, colspan} to the list of downward-growing cells.
Increase xcurrent by colspan.
If current cell is the last td
or th element in the tr element being
processed, then increase ycurrent by 1, abort this set of steps, and
return to the algorithm above.
Let current cell be the next
td or th element in the tr
element being processed.
Return to the step labelled cells.
When the algorithms above require the user agent to run the algorithm for growing downward-growing cells, the user agent must, for each {cell, cellx, width} tuple in the list of downward-growing cells, if any, extend the cell cell so that it also covers the slots with coordinates (x, ycurrent), where cellx ≤ x < cellx+width.
Each cell can be assigned zero or more header cells. The algorithm for assigning header cells to a cell principal cell is as follows.
Let header list be an empty list of cells.
Let (principalx, principaly) be the coordinate of the slot to which the principal cell is anchored.
headers attribute specifiedTake the value of the principal cell's
headers attribute and
split it on
spaces, letting id list be the list
of tokens obtained.
For each token in the id list, if the
first element in the Document with an ID equal to
the token is a cell in the same table, and that cell is not the
principal cell, then add that cell to header list.
headers attribute specifiedLet principalwidth be the width of the principal cell.
Let principalheight be the height of the principal cell.
For each value of y from principaly to principaly+principalheight-1, run the internal algorithm for scanning and assigning header cells, with the principal cell, the header list, the initial coordinate (principalx,y), and the increments Δx=−1 and Δy=0.
For each value of x from principalx to principalx+principalwidth-1, run the internal algorithm for scanning and assigning header cells, with the principal cell, the header list, the initial coordinate (x,principaly), and the increments Δx=0 and Δy=−1.
If the principal cell is anchored in a row group, then add all header cells that are row group headers and are anchored in the same row group with an x-coordinate less than or equal to principalx+principalwidth-1 and a y-coordinate less than or equal to principaly+principalheight-1 to header list.
If the principal cell is anchored in a column group, then add all header cells that are column group headers and are anchored in the same column group with an x-coordinate less than or equal to principalx+principalwidth-1 and a y-coordinate less than or equal to principaly+principalheight-1 to header list.
Remove all the empty cells from the header list.
Remove any duplicates from the header list.
Remove principal cell from the header list if it is there.
Assign the headers in the header list to the principal cell.
The internal algorithm for scanning and assigning header cells, given a principal cell, a header list, an initial coordinate (initialx, initialy), and Δx and Δy increments, is as follows:
Let x equal initialx.
Let y equal initialy.
Let opaque headers be an empty list of cells.
Let in header block be true, and let headers from current header block be a list of cells containing just the principal cell.
Let in header block be false and let headers from current header block be an empty list of cells.
Loop: Increment x by Δx; increment y by Δy.
For each invocation of this algorithm, one of Δx and Δy will be −1, and the other will be 0.
If either x or y is less than 0, then abort this internal algorithm.
If there is no cell covering slot (x, y), or if there is more than one cell covering slot (x, y), return to the substep labeled loop.
Let current cell be the cell covering slot (x, y).
Set in header block to true.
Add current cell to headers from current header block.
Let blocked be false.
If there are any cells in the opaque headers list anchored with the same x-coordinate as the current cell, and with the same width as current cell, then let blocked be true.
If the current cell is not a column header, then let blocked be true.
If there are any cells in the opaque headers list anchored with the same y-coordinate as the current cell, and with the same height as current cell, then let blocked be true.
If the current cell is not a row header, then let blocked be true.
If blocked is false, then add the current cell to the headers list.
Set in header block to false. Add all the cells in headers from current header block to the opaque headers list, and empty the headers from current header block list.
Return to the step labeled loop.
A header cell anchored at the slot with coordinate (x, y) with width width and height height is said to be a column header if any of the following conditions are true:
scope attribute
is in the column state, orscope attribute
is in the auto state, and
there are no data cells in any of the cells covering slots with
y-coordinates y
.. y+height-1.A header cell anchored at the slot with coordinate (x, y) with width width and height height is said to be a row header if any of the following conditions are true:
scope attribute
is in the row state, orscope attribute
is in the auto state, the
cell is not a column header, and there are no data
cells in any of the cells covering slots with x-coordinates x .. x+width-1.A header cell is said to be a column group header if
its scope attribute is in the
column group state.
A header cell is said to be a row group header if
its scope attribute is in the
row group state.
A cell is said to be an empty cell if it contains no elements and its text content, if any, consists only of White_Space characters.
This section is non-normative.
The following shows how might one mark up the bottom part of table 45 of the Smithsonian physical tables, Volume 71:
<table> <caption>Specification values: <b>Steel</b>, <b>Castings</b>, Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption> <thead> <tr> <th rowspan=2>Grade.</th> <th rowspan=2>Yield Point.</th> <th colspan=2>Ultimate tensile strength</th> <th rowspan=2>Per cent elong. 50.8mm or 2 in.</th> <th rowspan=2>Per cent reduct. area.</th> </tr> <tr> <th>kg/mm<sup>2</sup></th> <th>lb/in<sup>2</sup></th> </tr> </thead> <tbody> <tr> <td>Hard</td> <td>0.45 ultimate</td> <td>56.2</td> <td>80,000</td> <td>15</td> <td>20</td> </tr> <tr> <td>Medium</td> <td>0.45 ultimate</td> <td>49.2</td> <td>70,000</td> <td>18</td> <td>25</td> </tr> <tr> <td>Soft</td> <td>0.45 ultimate</td> <td>42.2</td> <td>60,000</td> <td>22</td> <td>30</td> </tr> </tbody> </table>
This table could look like this:
| Grade. | Yield Point. | Ultimate tensile strength | Per cent elong. 50.8 mm or 2 in. | Per cent reduct. area. | |
|---|---|---|---|---|---|
| kg/mm2 | lb/in2 | ||||
| Hard | 0.45 ultimate | 56.2 | 80,000 | 15 | 20 |
| Medium | 0.45 ultimate | 49.2 | 70,000 | 18 | 25 |
| Soft | 0.45 ultimate | 42.2 | 60,000 | 22 | 30 |
The following shows how one might mark up the gross margin table on page 46 of Apple, Inc's 10-K filing for fiscal year 2008:
<table> <thead> <tr> <th> <th>2008 <th>2007 <th>2006 <tbody> <tr> <th>Net sales <td>$ 32,479 <td>$ 24,006 <td>$ 19,315 <tr> <th>Cost of sales <td> 21,334 <td> 15,852 <td> 13,717 <tbody> <tr> <th>Gross margin <td>$ 11,145 <td>$ 8,154 <td>$ 5,598 <tfoot> <tr> <th>Gross margin percentage <td>34.3% <td>34.0% <td>29.0% </table>
This table could look like this:
| 2008 | 2007 | 2006 | |
|---|---|---|---|
| Net sales | $ 32,479 | $ 24,006 | $ 19,315 |
| Cost of sales | 21,334 | 15,852 | 13,717 |
| Gross margin | $ 11,145 | $ 8,154 | $ 5,598 |
| Gross margin percentage | 34.3% | 34.0% | 29.0% |
The following shows how one might mark up the operating expenses table from lower on the same page of that document:
<table>
<colgroup> <col>
<colgroup> <col> <col> <col>
<thead>
<tr> <th> <th>2008 <th>2007 <th>2006
<tbody>
<tr> <th scope=rowgroup> Research and development
<td> $ 1,109 <td> $ 782 <td> $ 712
<tr> <th scope=row> Percentage of net sales
<td> 3.4% <td> 3.3% <td> 3.7%
<tbody>
<tr> <th scope=rowgroup> Selling, general, and administrative
<td> $ 3,761 <td> $ 2,963 <td> $ 2,433
<tr> <th scope=row> Percentage of net sales
<td> 11.6% <td> 12.3% <td> 12.6%
</table>
This table could look like this:
| 2008 | 2007 | 2006 | |
|---|---|---|---|
| Research and development | $ 1,109 | $ 782 | $ 712 |
| Percentage of net sales | 3.4% | 3.3% | 3.7% |
| Selling, general, and administrative | $ 3,761 | $ 2,963 | $ 2,433 |
| Percentage of net sales | 11.6% | 12.3% | 12.6% |
This section is non-normative.
A form is a component of a Web page that has form controls, such as text fields, buttons, checkboxes, range controls, or color pickers. A user can interact with such a form, providing data that can then be sent to the server for further processing (e.g. returning the results of a search or calculation). No client-side scripting is needed in many cases, though an API is available so that scripts can augment the user experience or use forms for purposes other than submitting data to a server.
Writing a form consists of several steps, which can be performed in any order: writing the user interface, implementing the server-side processing, and configuring the user interface to communicate with the server.
This section is non-normative.
For the purposes of this brief introduction, we will create a pizza ordering form.
Any form starts with a form element, inside which
are placed the controls. Most controls are represented by the
input element, which by default provides a one-line
text field. To label a control, the label element is
used; the label text and the control itself go inside the
label element. Each part of a form is considered a
paragraph, and is typically separated from other parts
using p elements. Putting this together, here is how
one might ask for the customer's name:
<form> <p><label>Customer name: <input></label></p> </form>
To let the user select the size of the pizza, we can use a set of
radio buttons. Radio buttons also use the input
element, this time with a type
attribute with the value radio. To make the radio
buttons work as a group, they are given a common name using the
name attribute. To group a batch
of controls together, such as, in this case, the radio buttons, one
can use the fieldset element. The title of such a group
of controls is given by the first element in the
fieldset, which has to be a legend
element.
<form> <p><label>Customer name: <input></label></p> <fieldset> <legend> Pizza Size </legend> <p><label> <input type=radio name=size> Small </label></p> <p><label> <input type=radio name=size> Medium </label></p> <p><label> <input type=radio name=size> Large </label></p> </fieldset> </form>
Changes from the previous step are highlighted.
To pick toppings, we can use checkboxes. These use the
input element with a type attribute with the value checkbox:
<form> <p><label>Customer name: <input></label></p> <fieldset> <legend> Pizza Size </legend> <p><label> <input type=radio name=size> Small </label></p> <p><label> <input type=radio name=size> Medium </label></p> <p><label> <input type=radio name=size> Large </label></p> </fieldset> <fieldset> <legend> Pizza Toppings </legend> <p><label> <input type=checkbox> Bacon </label></p> <p><label> <input type=checkbox> Extra Cheese </label></p> <p><label> <input type=checkbox> Onion </label></p> <p><label> <input type=checkbox> Mushroom </label></p> </fieldset> </form>
The pizzeria for which this form is being written is always
making mistakes, so it needs a way to contact the customer. For this
purpose, we can use form controls specifically for telephone numbers
(input elements with their type attribute set to tel) and e-mail addresses
(input elements with their type attribute set to email):
<form> <p><label>Customer name: <input></label></p> <p><label>Telephone: <input type=tel></label></p> <p><label>E-mail address: <input type=email></label></p> <fieldset> <legend> Pizza Size </legend> <p><label> <input type=radio name=size> Small </label></p> <p><label> <input type=radio name=size> Medium </label></p> <p><label> <input type=radio name=size> Large </label></p> </fieldset> <fieldset> <legend> Pizza Toppings </legend> <p><label> <input type=checkbox> Bacon </label></p> <p><label> <input type=checkbox> Extra Cheese </label></p> <p><label> <input type=checkbox> Onion </label></p> <p><label> <input type=checkbox> Mushroom </label></p> </fieldset> </form>
We can use an input element with its type attribute set to time to ask for a delivery
time. Many of these form controls have attributes to control exactly
what values can be specified; in this case, three attributes of
particular interest are min,
max, and step. These set the minimum time, the
maximum time, and the interval between allowed values (in
seconds). This pizzeria only delivers between 11am and 9pm, and
doesn't promise anything better than 15 minute increments, which we
can mark up as follows:
<form> <p><label>Customer name: <input></label></p> <p><label>Telephone: <input type=tel></label></p> <p><label>E-mail address: <input type=email></label></p> <fieldset> <legend> Pizza Size </legend> <p><label> <input type=radio name=size> Small </label></p> <p><label> <input type=radio name=size> Medium </label></p> <p><label> <input type=radio name=size> Large </label></p> </fieldset> <fieldset> <legend> Pizza Toppings </legend> <p><label> <input type=checkbox> Bacon </label></p> <p><label> <input type=checkbox> Extra Cheese </label></p> <p><label> <input type=checkbox> Onion </label></p> <p><label> <input type=checkbox> Mushroom </label></p> </fieldset> <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p> </form>
The textarea element can be used to provide a
free-form text field. In this instance, we are going to use it to
provide a space for the customer to give delivery instructions:
<form> <p><label>Customer name: <input></label></p> <p><label>Telephone: <input type=tel></label></p> <p><label>E-mail address: <input type=email></label></p> <fieldset> <legend> Pizza Size </legend> <p><label> <input type=radio name=size> Small </label></p> <p><label> <input type=radio name=size> Medium </label></p> <p><label> <input type=radio name=size> Large </label></p> </fieldset> <fieldset> <legend> Pizza Toppings </legend> <p><label> <input type=checkbox> Bacon </label></p> <p><label> <input type=checkbox> Extra Cheese </label></p> <p><label> <input type=checkbox> Onion </label></p> <p><label> <input type=checkbox> Mushroom </label></p> </fieldset> <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p> <p><label>Delivery instructions: <textarea></textarea></label></p> </form>
Finally, to make the form submittable we use the
button element:
<form> <p><label>Customer name: <input></label></p> <p><label>Telephone: <input type=tel></label></p> <p><label>E-mail address: <input type=email></label></p> <fieldset> <legend> Pizza Size </legend> <p><label> <input type=radio name=size> Small </label></p> <p><label> <input type=radio name=size> Medium </label></p> <p><label> <input type=radio name=size> Large </label></p> </fieldset> <fieldset> <legend> Pizza Toppings </legend> <p><label> <input type=checkbox> Bacon </label></p> <p><label> <input type=checkbox> Extra Cheese </label></p> <p><label> <input type=checkbox> Onion </label></p> <p><label> <input type=checkbox> Mushroom </label></p> </fieldset> <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p> <p><label>Delivery instructions: <textarea></textarea></label></p> <p><button>Submit order</button></p> </form>
This section is non-normative.
The exact details for writing a server-side processor are out of
scope for this specification. For the purposes of this introduction,
we will assume that the script at https://pizza.example.com/order.cgi is configured to
accept submissions using the application/x-www-form-urlencoded
format, expecting the following parameters sent in an HTTP POST
body:
custnamecusttelcustemailsizesmall, medium, or largetoppingsbacon, cheese, onion, and mushroomdeliverycommentsThis section is non-normative.
Form submissions are exposed to servers in a variety of ways,
most commonly as HTTP GET or POST requests. To specify the exact
method used, the method
attribute is specified on the form element. This
doesn't specify how the form data is encoded, though; to specify
that, you use the enctype
attribute. You also have to specify the URL of the
service that will handle the submitted data, using the action attribute.
For each form control you want submitted, you then have to give a
name that will be used to refer to the data in the submission. We
already specified the name for the group of radio buttons; the same
attribute (name) also specifies
the submission name. Radio buttons can be distinguished from each
other in the submission by giving them different values, using the
value attribute.
Multiple controls can have the same name; for example, here we
give all the checkboxes the same name, and the server distinguishes
which checkbox was checked by seeing which values are submitted with
that name — like the radio buttons, they are also given unique
values with the value
attribute.
Given the settings in the previous section, this all becomes:
<form method="post"
enctype="application/x-www-form-urlencoded"
action="https://pizza.example.com/order.cgi">
<p><label>Customer name: <input name="custname"></label></p>
<p><label>Telephone: <input type=tel name="custtel"></label></p>
<p><label>E-mail address: <input type=email name="custemail"></label></p>
<fieldset>
<legend> Pizza Size </legend>
<p><label> <input type=radio name=size value="small"> Small </label></p>
<p><label> <input type=radio name=size value="medium"> Medium </label></p>
<p><label> <input type=radio name=size value="large"> Large </label></p>
</fieldset>
<fieldset>
<legend> Pizza Toppings </legend>
<p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
<p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
<p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
<p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
</fieldset>
<p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery"></label></p>
<p><label>Delivery instructions: <textarea name="comments"></textarea></label></p>
<p><button>Submit order</button></p>
</form>
For example, if the customer entered "Denise Lawrence" as their name, "555-321-8642" as their telephone number, did not specify an e-mail address, asked for a medium-sized pizza, selected the Extra Cheese and Mushroom toppings, entered a delivery time of 7pm, and left the delivery instructions text field blank, the user agent would submit the following to the online Web service:
custname=Denise+Lawrence&custtel=555-321-8624&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00&comments=
This section is non-normative.
Forms can be annotated in such a way that the user agent will check the user's input before the form is submitted. The server still has to verify the input is valid (since hostile users can easily bypass the form validation), but it allows the user to avoid the wait incurred by having the server be the sole checker of the user's input.
The simplest annotation is the required attribute, which can be
specified on input elements to indicate that the form
is not to be submitted until a value is given. By adding this
attribute to the customer name and delivery time fields, we allow
the user agent to notify the user when the user submits the form
without filling in those fields:
<form method="post"
enctype="application/x-www-form-urlencoded"
action="https://pizza.example.com/order.cgi">
<p><label>Customer name: <input name="custname" required></label></p>
<p><label>Telephone: <input type=tel name="custtel"></label></p>
<p><label>E-mail address: <input type=email name="custemail"></label></p>
<fieldset>
<legend> Pizza Size </legend>
<p><label> <input type=radio name=size value="small"> Small </label></p>
<p><label> <input type=radio name=size value="medium"> Medium </label></p>
<p><label> <input type=radio name=size value="large"> Large </label></p>
</fieldset>
<fieldset>
<legend> Pizza Toppings </legend>
<p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
<p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
<p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
<p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
</fieldset>
<p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
<p><label>Delivery instructions: <textarea name="comments"></textarea></label></p>
<p><button>Submit order</button></p>
</form>
It is also possible to limit the length of the input, using the
maxlength attribute. By
adding this to the textarea element, we can limit users
to 1000 characters, preventing them from writing huge essays to the
busy delivery drivers instead of staying focused and to the
point:
<form method="post"
enctype="application/x-www-form-urlencoded"
action="https://pizza.example.com/order.cgi">
<p><label>Customer name: <input name="custname" required></label></p>
<p><label>Telephone: <input type=tel name="custtel"></label></p>
<p><label>E-mail address: <input type=email name="custemail"></label></p>
<fieldset>
<legend> Pizza Size </legend>
<p><label> <input type=radio name=size value="small"> Small </label></p>
<p><label> <input type=radio name=size value="medium"> Medium </label></p>
<p><label> <input type=radio name=size value="large"> Large </label></p>
</fieldset>
<fieldset>
<legend> Pizza Toppings </legend>
<p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
<p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
<p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
<p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
</fieldset>
<p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
<p><label>Delivery instructions: <textarea name="comments" maxlength=1000></textarea></label></p>
<p><button>Submit order</button></p>
</form>
This section is non-normative.
In this pizze delivery example, the times are specified in the format "HH:MM": two digits for the hour, in 24-hour format, and two digits for the time. (Seconds could also be specified, though they are not necessary in this example.)
In some locales, however, times are often expressed differently when presented to users. For example, in the United States, it is still common to use the 12-hour clock with an am/pm indicator, as in "2pm". In France, it is common to separate the hours from the minutes using an "h" character, as in "14h00".
Similar issues exist with dates, with the added complication that even the order of the components is not always consistent — for example, in Cyprus the first of February 2003 would typically be written "1/2/03", while that same date in Japan would typically be written as "2003年02月01日" — and even with numbers, where locales differ, for example, in what punctuation is used as the decimal separator and the thousands separator.
It therefore is important to distinguish the time, date, and number formats used in HTML and in form submissions, which are always the formats defined in this specification (and based on the well-established ISO 8601 standard for computer-readable date and time formats), from the time, date, and number formats presented to the user by the browser and accepted as input from the user by the browser.
The format used "on the wire", i.e. in HTML markup and in form submissions, is intended to be computer-readable and consistent irrespective of the user's locale. Dates, for instance, are always written in the format "YYYY-MM-DD", as in "2003-02-01". Users are not expected to ever see this format.
The time, date, or number given by the page in the wire format is then translated to the user's preferred presentation (based on user preferences or on the locale of the page itself), before being displayed to the user. Similarly, after the user inputs a time, date, or number using their preferred format, the user agent converts it back to the wire format before putting it in the DOM or submitting it.
This allows scripts in pages and on servers to process times, dates, and numbers in a consistent manner without needing to support dozens of different formats, while still supporting the users' needs.
See also the implementation notes regarding localization of form controls.
Mostly for historical reasons, elements in this section fall into several overlapping (but subtly different) categories in addition to the usual ones like flow content, phrasing content, and interactive content.
A number of the elements are form-associated elements, which means they can have a
form owner and, to expose this, have a form content attribute with a matching
form IDL attribute.
buttonfieldsetinputkeygenlabelobjectoutputselecttextareaThe form-associated elements fall into several subcategories:
Denotes elements that are listed in the form.elements
and fieldset.elements APIs.
buttonfieldsetinputkeygenobjectoutputselecttextareaDenotes elements that can be used for constructing the form data
set when a form element is submitted.
buttoninputkeygenobjectselecttextareaSome submittable elements can be, depending on their attributes, buttons. The prose below defines when an element is a button. Some buttons are specifically submit buttons.
Denotes elements that can be affected when a form
element is reset.
inputkeygenoutputselecttextareaSome elements, not all of them form-associated, are categorized as labelable elements. These are elements
that can be associated with a label element.
buttoninput (if the type attribute is not in the Hidden state)keygenmeteroutputprogressselecttextareaform elementform element descendants.accept-charsetactionautocompleteenctypemethodnamenovalidatetarget[OverrideBuiltins] interface HTMLFormElement : HTMLElement { attribute DOMString acceptCharset; attribute DOMString action; attribute DOMString autocomplete; attribute DOMString enctype; attribute DOMString encoding; attribute DOMString method; attribute DOMString name; attribute boolean noValidate; attribute DOMString target; readonly attribute HTMLFormControlsCollection elements; readonly attribute long length; getter Element (unsigned long index); getter object (DOMString name); void submit(); void reset(); boolean checkValidity(); };
The form element represents a
collection of form-associated
elements, some of which can represent editable values that
can be submitted to a server for processing.
The accept-charset
attribute gives the character encodings that are to be used for the
submission. If specified, the value must be an ordered set of
unique space-separated tokens that are ASCII
case-insensitive, and each token must be an ASCII
case-insensitive match for the preferred MIME
name of an ASCII-compatible character encoding.
[IANACHARSET]
The name attribute
represents the form's name within the forms collection. The value must
not be the empty string, and the value must be unique amongst the
form elements in the forms collection that it is in, if
any.
The autocomplete
attribute is an enumerated attribute. The attribute has
two states. The on
keyword maps to the on state, and the
off keyword maps to
the off
state. The attribute may also be omitted. The missing value
default is the on state. The off state indicates
that by default, input elements in the form will have
their resulting autocompletion state set to off; the on state indicates
that by default, input elements in the form will have
their resulting autocompletion state set to on.
The action, enctype, method, novalidate, and target attributes are attributes
for form submission.
elementsReturns an HTMLCollection of the form controls in
the form (excluding image buttons for historical reasons).
lengthReturns the number of form controls in the form (excluding image buttons for historical reasons).
Returns the indexth element in the form (excluding image buttons for historical reasons).
Returns the form control (or, if there are several, a
NodeList of the form controls) in the form with the
given ID or name (excluding image buttons for
historical reasons); or, if there are none, returns the
img element with the given ID.
Once an element has been referenced using a particular name,
that name will continue being available as a way to reference that
element in this method, even if the element's actual ID or name changes, for as long as the
element remains in the Document.
If there are multiple matching items, then a
NodeList object containing all those elements is
returned.
submit()Submits the form.
reset()Resets the form.
checkValidity()Returns true if the form's controls are all valid; otherwise, returns false.
The autocomplete IDL
attribute must reflect the content attribute of the
same name, limited to only known values.
The name IDL
attribute must reflect the content attribute of the
same name.
The acceptCharset IDL
attribute must reflect the accept-charset content
attribute.
The elements
IDL attribute must return an HTMLFormControlsCollection
rooted at the Document node, whose filter matches listed elements whose form
owner is the form element, with the exception of
input elements whose type attribute is in the Image Button state, which must,
for historical reasons, be excluded from this particular
collection.
The length IDL
attribute must return the number of nodes represented by the elements collection.
The supported property indices at any instant are
the indices supported by the object returned by the elements attribute at that
instant.
When a form element is indexed for indexed property retrieval,
the user agent must return the value returned by the item method on
the elements collection, when
invoked with the given index as its argument.
Each form element has a mapping of names to elements
called the past names map. It is used to persist names of
controls even when they change names.
The supported property names consist of the values
of all the id and name attributes of all the listed elements and img
elements that are descendants of the form element, and
all the names currently in the past names map.
When a form element is indexed for named property
retrieval, the user agent must run the following steps:
Let candidates be a live
NodeList object containing all the listed elements that are descendants
of the form element and that have either an id attribute or a name attribute equal to name, in tree order.
If candidates is empty, let candidates be a live
NodeList object containing all the img
elements that are descendants of the form element and
that have either an id attribute or a
name attribute equal to name, in tree order.
If candidates is empty, name is the name of one of the entries in the
form element's past names map: return the
object associated with name in that
map.
If candidates contains more than one node, return candidates and abort these steps.
Otherwise, candidates contains exactly
one node. Add a mapping from name to the node
in candidates in the form element's
past names map, replacing the previous entry with the
same name, if any.
Return the node in candidates.
If an element listed in the form element's past
names map is removed from the Document, then its
entries must be removed from the map.
The submit()
method, when invoked, must submit the form
element from the form element itself, with the submitted from submit() method flag set.
The reset()
method, when invoked, must run the following steps:
If the form element is marked as locked for
reset, then abort these steps.
Mark the form element as locked for
reset.
Reset the
form element.
Unmark the form element as locked for
reset.
If the checkValidity()
method is invoked, the user agent must statically validate the
constraints of the form element, and return true
if the constraint validation return a positive result, and
false if it returned a negative result.
This example shows two search forms:
<form action="http://www.google.com/search" method="get"> <label>Google: <input type="search" name="q"></label> <input type="submit" value="Search..."> </form> <form action="http://www.bing.com/search" method="get"> <label>Bing: <input type="search" name="q"></label> <input type="submit" value="Search..."> </form>
fieldset elementlegend element, followed by flow content.disabledformnameinterface HTMLFieldSetElement : HTMLElement { attribute boolean disabled; readonly attribute HTMLFormElement? form; attribute DOMString name; readonly attribute DOMString type; readonly attribute HTMLFormControlsCollection elements; readonly attribute boolean willValidate; readonly attribute ValidityState validity; readonly attribute DOMString validationMessage; boolean checkValidity(); void setCustomValidity(DOMString error); };
The fieldset element represents a set
of form controls optionally grouped under a common name.
The name of the group is given by the first legend
element that is a child of the fieldset element, if
any. The remainder of the descendants form the group.
The disabled
attribute, when specified, causes all the form control descendants
of the fieldset element, excluding those that are
descendants of the fieldset element's first
legend element child, if any, to be disabled.
The form attribute is used to
explicitly associate the fieldset element with its
form owner. The name
attribute represents the element's name.
typeReturns the string "fieldset".
elementsReturns an HTMLFormControlsCollection of the form
controls in the element.
The disabled IDL
attribute must reflect the content attribute of the
same name.
The type IDL
attribute must return the string "fieldset".
The elements IDL
attribute must return an HTMLFormControlsCollection
rooted at the fieldset element, whose filter matches
listed elements.
The willValidate, validity, and validationMessage
attributes, and the checkValidity() and setCustomValidity()
methods, are part of the constraint validation API. The
form and name IDL attributes are part of the
element's forms API.
This example shows a fieldset element being used to
group a set of related controls:
<fieldset> <legend>Display</legend> <p><label><input type=radio name=c value=0 checked> Black on White</label> <p><label><input type=radio name=c value=1> White on Black</label> <p><label><input type=checkbox name=g> Use grayscale</label> <p><label>Enhance contrast <input type=range name=e list=contrast min=0 max=100 value=0 step=1></label> <datalist id=contrast> <option label=Normal value=0> <option label=Maximum value=100> </datalist> </fieldset>
The following snippet shows a fieldset with a checkbox in the legend that controls whether or not the fieldset is enabled. The contents of the fieldset consist of two required text fields and an optional year/month control.
<fieldset name="clubfields" disabled> <legend> <label> <input type=checkbox name=club onchange="form.clubfields.disabled = !checked"> Use Club Card </label> </legend> <p><label>Name on card: <input name=clubname required></label></p> <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p> <p><label>Expiry date: <input name=clubexp type=month></label></p> </fieldset>
You can also nest fieldset elements. Here is an
example expanding on the previous one that does so:
<fieldset name="clubfields" disabled> <legend> <label> <input type=checkbox name=club onchange="form.clubfields.disabled = !checked"> Use Club Card </label> </legend> <p><label>Name on card: <input name=clubname required></label></p> <fieldset name="numfields"> <legend> <label> <input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked"> My card has numbers on it </label> </legend> <p><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></p> </fieldset> <fieldset name="letfields" disabled> <legend> <label> <input type=radio name=clubtype onchange="form.letfields.disabled = !checked"> My card has letters on it </label> </legend> <p><label>Card code: <input name=clublet required pattern="[A-Za-z]+"></label></p> </fieldset> </fieldset>
In this example, if the outer "Use Club Card" checkbox is not
checked, everything inside the outer fieldset,
including the two radio buttons in the legends of the two nested
fieldsets, will be disabled. However, if the checkbox
is checked, then the radio buttons will both be enabled and will
let you select which of the two inner fieldsets is to
be enabled.
legend elementfieldset element.interface HTMLLegendElement : HTMLElement { readonly attribute HTMLFormElement? form; };
The legend element represents a caption
for the rest of the contents of the legend element's
parent fieldset element, if
any.
formReturns the element's form element, if any, or
null otherwise.
The form IDL
attribute's behavior depends on whether the legend
element is in a fieldset element or not. If the
legend has a fieldset element as its
parent, then the form IDL
attribute must return the same value as the form IDL attribute on that
fieldset element. Otherwise, it must return null.
label elementlabel elements.formforinterface HTMLLabelElement : HTMLElement { readonly attribute HTMLFormElement? form; attribute DOMString htmlFor; readonly attribute HTMLElement? control; };
The label represents a caption in a
user interface. The caption can be associated with a specific form
control, known as the label
element's labeled control, either using for attribute, or by putting the form
control inside the label element itself.
Except where otherwise specified by the following rules, a
label element has no labeled control.
The for attribute
may be specified to indicate a form control with which the caption
is to be associated. If the attribute is specified, the attribute's
value must be the ID of a labelable element in the same
Document as the label element. If the attribute is specified and there is an element
in the Document whose ID is equal to the value of the for attribute, and the first such
element is a labelable element,
then that element is the label element's labeled
control.
If the for attribute is not
specified, but the label element has a labelable element descendant, then the
first such descendant in tree order is the
label element's labeled control.
The label element's exact default presentation and
behavior, in particular what its activation behavior
might be, if anything, should match the platform's label behavior.
The activation behavior of a label element
for events targetted at interactive content descendants
of a label element, and any descendants of those
interactive content descendants, must be to do
nothing.
For example, on platforms where clicking a checkbox label checks
the checkbox, clicking the label in the following
snippet could trigger the user agent to run synthetic click
activation steps on the input element, as if
the element itself had been triggered by the user:
<label><input type=checkbox name=lost> Lost</label>
On other platforms, the behavior might be just to focus the control, or do nothing.
The form attribute is used to
explicitly associate the label element with its
form owner.
The following example shows three form controls each with a label, two of which have small text showing the right format for users to use.
<p><label>Full name: <input name=fn> <small>Format: First Last</small></label></p> <p><label>Age: <input name=age type=number min=0></label></p> <p><label>Post code: <input name=pc> <small>Format: AB12 3CD</small></label></p>
controlReturns the form control that is associated with this element.
The htmlFor IDL
attribute must reflect the for content attribute.
The control IDL
attribute must return the label element's labeled
control, if any, or null if there isn't one.
The form IDL attribute is part
of the element's forms API.
labelsReturns a NodeList of all the label
elements that the form control is associated with.
Labelable elements have a
NodeList object associated with them that represents
the list of label elements, in tree order,
whose labeled control is the element in question. The
labels IDL attribute
of labelable elements, on
getting, must return that NodeList object.
input elementtype attribute is not in the Hidden state: Interactive content.type attribute is not in the Hidden state: Listed, labelable, submittable, and resettable form-associated element.type attribute is in the Hidden state: Listed, submittable, and resettable form-associated element.type attribute is not in the Hidden state: Palpable content.acceptaltautocompleteautofocuscheckeddirnamedisabledformformactionformenctypeformmethodformnovalidateformtargetheightlistmaxmaxlengthminmultiplenamepatternplaceholderreadonlyrequiredsizesrcsteptypevaluewidthinterface HTMLInputElement : HTMLElement { attribute DOMString accept; attribute DOMString alt; attribute DOMString autocomplete; attribute boolean autofocus; attribute boolean defaultChecked; attribute boolean checked; attribute DOMString dirName; attribute boolean disabled; readonly attribute HTMLFormElement? form; readonly attribute FileList? files; attribute DOMString formAction; attribute DOMString formEnctype; attribute DOMString formMethod; attribute boolean formNoValidate; attribute DOMString formTarget; attribute unsigned long height; attribute boolean indeterminate; readonly attribute HTMLElement? list; attribute DOMString max; attribute long maxLength; attribute DOMString min; attribute boolean multiple; attribute DOMString name; attribute DOMString pattern; attribute DOMString placeholder; attribute boolean readOnly; attribute boolean required; attribute unsigned long size; attribute DOMString src; attribute DOMString step; attribute DOMString type; attribute DOMString defaultValue; attribute DOMString value; attribute Date? valueAsDate; attribute double valueAsNumber; attribute unsigned long width; void stepUp(optional long n); void stepDown(optional long n); readonly attribute boolean willValidate; readonly attribute ValidityState validity; readonly attribute DOMString validationMessage; boolean checkValidity(); void setCustomValidity(DOMString error); readonly attribute NodeList labels; void select(); attribute unsigned long selectionStart; attribute unsigned long selectionEnd; attribute DOMString selectionDirection; void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction); };
The input element represents a typed data field,
usually with a form control to allow the user to edit the data.
The type
attribute controls the data type (and associated control) of the
element. It is an enumerated attribute. The following
table lists the keywords and states for the attribute — the
keywords in the left column map to the states in the cell in the
second column on the same row as the keyword.
| Keyword | State | Data type | Control type |
|---|---|---|---|
hidden
| Hidden | An arbitrary string | n/a |
text
| Text | Text with no line breaks | A text field |
search
| Search | Text with no line breaks | Search field |
tel
| Telephone | Text with no line breaks | A text field |
url
| URL | An absolute URL | A text field |
email
| An e-mail address or list of e-mail addresses | A text field | |
password
| Password | Text with no line breaks (sensitive information) | A text field that obscures data entry |
datetime
| Date and Time | A date and time (year, month, day, hour, minute, second, fraction of a second) with the time zone set to UTC | A date and time control |
date
| Date | A date (year, month, day) with no time zone | A date control |
month
| Month | A date consisting of a year and a month with no time zone | A month control |
week
| Week | A date consisting of a week-year number and a week number with no time zone | A week control |
time
| Time | A time (hour, minute, seconds, fractional seconds) with no time zone | A time control |
datetime-local
| Local Date and Time | A date and time (year, month, day, hour, minute, second, fraction of a second) with no time zone | A date and time control |
number
| Number | A numerical value | A text field or spinner control |
range
| Range | A numerical value, with the extra semantic that the exact value is not important | A slider control or similar |
color
| Color | An sRGB color with 8-bit red, green, and blue components | A color well |
checkbox
| Checkbox | A set of zero or more values from a predefined list | A checkbox |
radio
| Radio Button | An enumerated value | A radio button |
file
| File Upload | Zero or more files each with a MIME type and optionally a file name | A label and a button |
submit
| Submit Button | An enumerated value, with the extra semantic that it must be the last value selected and initiates form submission | A button |
image
| Image Button | A coordinate, relative to a particular image's size, with the extra semantic that it must be the last value selected and initiates form submission | Either a clickable image, or a button |
reset
| Reset Button | n/a | A button |
button
| Button | n/a | A button |
The missing value default is the Text state.
Which of the accept, alt, autocomplete, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, pattern, placeholder, readonly, required, size, src, step, and width content attributes, the checked, files, valueAsDate, valueAsNumber, and list IDL
attributes, the select() method, the selectionStart,
selectionEnd, and
selectionDirection,
IDL attributes, the setSelectionRange()
method, the stepUp() and
stepDown() methods, and the
input and change events apply to an
input element depends on the state of its type attribute. The following table
is non-normative and summarizes which of
those content attributes, IDL attributes, methods, and events apply
to each state:
| Hidden | Text, Search | URL, Telephone | Password | Date and Time, Date, Month, Week, Time | Local Date and Time | Number | Range | Color | Checkbox, Radio Button | File Upload | Submit Button | Image Button | Reset Button, Button | ||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Content attributes | |||||||||||||||
accept
| · | · | · | · | · | · | · | · | · | · | · | Yes | · | · | · |
alt
| · | · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
autocomplete
| · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · |
checked
| · | · | · | · | · | · | · | · | · | · | Yes | · | · | · | · |
dirname
| · | Yes | · | · | · | · | · | · | · | · | · | · | · | · | · |
formaction
| · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
formenctype
| · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
formmethod
| · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
formnovalidate
| · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
formtarget
| · | · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
height
| · | · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
list
| · | Yes | Yes | Yes | · | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · |
max
| · | · | · | · | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · |
maxlength
| · | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · | · |
min
| · | · | · | · | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · |
multiple
| · | · | · | Yes | · | · | · | · | · | · | · | Yes | · | · | · |
pattern
| · | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · | · |
placeholder
| · | Yes | Yes | Yes | Yes | · | · | Yes | · | · | · | · | · | · | · |
readonly
| · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · |
required
| · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | Yes | Yes | · | · | · |
size
| · | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · | · |
src
| · | · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
step
| · | · | · | · | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · |
width
| · | · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
| IDL attributes and methods | |||||||||||||||
checked
| · | · | · | · | · | · | · | · | · | · | Yes | · | · | · | · |
files
| · | · | · | · | · | · | · | · | · | · | · | Yes | · | · | · |
value
| default | value | value | value | value | value | value | value | value | value | default/on | filename | default | default | default |
valueAsDate
| · | · | · | · | · | Yes | · | · | · | · | · | · | · | · | · |
valueAsNumber
| · | · | · | · | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · |
list
| · | Yes | Yes | Yes | · | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · |
select()
| · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · | · |
selectionStart
| · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · | · |
selectionEnd
| · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · | · |
selectionDirection
| · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · | · |
setSelectionRange()
| · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · | · |
stepDown()
| · | · | · | · | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · |
stepUp()
| · | · | · | · | · | Yes | Yes | Yes | Yes | · | · | · | · | · | · |
| Events | |||||||||||||||
input event
| · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · |
change event
| · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · |
Some states of the type
attribute define a value sanitization algorithm.
Each input element has a value, which is exposed by the value IDL attribute. Some states
define an algorithm
to convert a string to a number, an algorithm to convert a
number to a string, an algorithm to convert a
string to a Date object, and an algorithm to convert a
Date object to a string, which are used by
max,
min,
step,
valueAsDate,
valueAsNumber,
stepDown(), and
stepUp().
Each input element has a boolean dirty value flag. The
dirty value flag
must be initially set to false when the element is created, and must
be set to true whenever the user interacts with the control in a way
that changes the value. (It is
also set to true when the value is programmatically changed, as
described in the definition of the value IDL attribute.)
The value
content attribute gives the default value of the input
element. When the value content attribute is added,
set, or removed, if the control's dirty value flag is
false, the user agent must set the value of the element to the value of
the value content attribute,
if there is one, or the empty string otherwise, and then run the
current value sanitization algorithm, if one is
defined.
Each input element has a checkedness, which is exposed by
the checked IDL
attribute.
Each input element has a boolean dirty checkedness
flag. When it is true, the element is said to have a dirty
checkedness. The dirty checkedness
flag must be initially set to false when the element is
created, and must be set to true whenever the user interacts with
the control in a way that changes the checkedness.
The checked
content attribute is a boolean attribute that gives the
default checkedness of the
input element. When the checked content attribute is
added, if the control does not have dirty checkedness, the user
agent must set the checkedness of the element to
true; when the checked
content attribute is removed, if the control does not have dirty checkedness, the user
agent must set the checkedness of the element to
false.
The reset
algorithm for input elements is to set the dirty value flag and
dirty checkedness
flag back to false, set the value of the element to the value of
the value content attribute,
if there is one, or the empty string otherwise, set the checkedness of the element to true
if the element has a checked
content attribute and false if it does not, empty the list of selected files, and
then invoke the value sanitization algorithm, if the
type attribute's current state
defines one.
Each input element is either mutable or immutable. Except where
otherwise specified, an input element is always mutable. Similarly, except where
otherwise specified, the user agent should not allow the user to
modify the element's value or
checkedness.
When an input element is disabled, it is immutable.
When an input element does not have a
Document node as one of its ancestors (i.e. when it is
not in the document), it is immutable.
The readonly attribute can also in
some cases (e.g. for the Date state, but not the Checkbox state) make an
input element immutable.
The cloning steps for
input elements must propagate the value, dirty value flag,
checkedness, and dirty checkedness
flag from the node being cloned to the copy.
When an input element is first created, the
element's rendering and behavior must be set to the rendering and
behavior defined for the type
attribute's state, and the value sanitization
algorithm, if one is defined for the type attribute's state, must be
invoked.
When an input element's type attribute changes state, the
user agent must run the following steps:
If the previous state of the element's type attribute put the value IDL attribute in the value mode, and the element's
value is not the empty
string, and the new state of the element's type attribute puts the value IDL attribute in either the default mode or the default/on mode, then set
the element's value content
attribute to the element's value.
Otherwise, if the previous state of the element's type attribute put the value IDL attribute in any mode
other than the value mode, and
the new state of the element's type attribute puts the value IDL attribute in the value mode, then set the value of the element to the value
of the value content
attribute, if there is one, or the empty string otherwise, and
then set the control's dirty value flag to
false.
Update the element's rendering and behavior to the new state's.
Invoke the value sanitization algorithm, if one
is defined for the type
attribute's new state.
The form attribute is used to
explicitly associate the input element with its
form owner. The name
attribute represents the element's name. The disabled attribute is used to make
the control non-interactive and to prevent its value from being
submitted. The autofocus
attribute controls focus.
The indeterminate IDL
attribute must initially be set to false. On getting, it must return
the last value it was set to. On setting, it must be set to the new
value. It has no effect except for changing the appearance of checkbox controls.
The accept, alt, max, min, multiple, pattern, placeholder, required, size, src, and step IDL attributes must
reflect the respective content attributes of the same
name. The dirName IDL attribute
must reflect the dirname content attribute. The readOnly IDL attribute
must reflect the readonly content attribute. The
defaultChecked
IDL attribute must reflect the checked content attribute. The
defaultValue
IDL attribute must reflect the value content attribute.
The autocomplete and
type IDL attributes
must reflect the respective content attributes of the
same name, limited to only known values. The maxLength IDL
attribute must reflect the maxlength content attribute,
limited to only non-negative numbers.
The IDL attributes width and height must return the
rendered width and height of the image, in CSS pixels, if an image
is being rendered, and is being rendered to a visual
medium; or else the intrinsic width and height of the image, in CSS
pixels, if an image is available
but not being rendered to a visual medium; or else 0, if no image is
available. When the
input element's type attribute is not in the Image Button state, then no
image is available. [CSS]
On setting, they must act as if they reflected the respective content attributes of the same name.
The willValidate, validity, and validationMessage
attributes, and the checkValidity() and setCustomValidity()
methods, are part of the constraint validation API. The
labels attribute provides a list
of the element's labels. The select(), selectionStart,
selectionEnd,
selectionDirection,
and setSelectionRange()
methods and attributes expose the element's text selection. The
autofocus, disabled, form, and name IDL attributes are part of the
element's forms API.
type attributetype=hidden)When an input element's type attribute is in the Hidden state, the rules in
this section apply.
The input element represents a value
that is not intended to be examined or manipulated by the user.
Constraint validation: If an input
element's type attribute is in
the Hidden state, it is
barred from constraint validation.
If the name attribute is
present and has a value that is a case-sensitive match
for the string "_charset_", then the element's
value attribute must be
omitted.
The
value
IDL attribute applies to this element and is
in mode default.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
autocomplete,
checked,
dirname,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
list,
max,
maxlength,
min,
multiple,
pattern,
placeholder,
readonly,
required,
size,
src,
step, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
list,
selectionStart,
selectionEnd,
selectionDirection,
valueAsDate, and
valueAsNumber IDL attributes;
select(),
setSelectionRange(),
stepDown(), and
stepUp() methods.
The input and change events do not apply.
type=text) state and Search state (type=search)When an input element's type attribute is in the Text state or the Search state, the rules in
this section apply.
The input element represents a one line
plain text edit control for the element's value.
The difference between the Text state and the Search state is primarily stylistic: on platforms where search fields are distinguished from regular text fields, the Search state might result in an appearance consistent with the platform's search fields rather than appearing like a regular text field.
If the element is mutable, its value should be editable by the user. User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the element's value.
If the element is mutable, the user agent should allow the user to change the writing direction of the element, setting it either to a left-to-right writing direction or a right-to-left writing direction. If the user does so, the user agent must then run the following steps:
Set the element's dir
attribute to "ltr" if the user
selected a left-to-right writing direction, and "rtl" if the user selected a
right-to-left writing direction.
Queue a task to fire a simple
event that bubbles named input at the input
element.
The value attribute, if
specified, must have a value that contains no U+000A LINE FEED (LF)
or U+000D CARRIAGE RETURN (CR) characters.
The value sanitization algorithm is as follows: Strip line breaks from the value.
The following common input element content
attributes, IDL attributes, and methods apply to the element:
autocomplete,
dirname,
list,
maxlength,
pattern,
placeholder,
readonly,
required, and
size content attributes;
list,
selectionStart,
selectionEnd,
selectionDirection, and
value IDL attributes;
select() and
setSelectionRange() methods.
The value IDL attribute is
in mode value.
The input and change events apply.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
checked,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
max,
min,
multiple,
src,
step, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
valueAsDate, and
valueAsNumber IDL attributes;
stepDown() and
stepUp() methods.
type=tel)When an input element's type attribute is in the Telephone state, the rules in
this section apply.
The input element represents a control
for editing a telephone number given in the element's value.
If the element is mutable, its value should be editable by the user. User agents may change the spacing and, with care, the punctuation of values that the user enters. User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the element's value.
The value attribute, if
specified, must have a value that contains no U+000A LINE FEED (LF)
or U+000D CARRIAGE RETURN (CR) characters.
The value sanitization algorithm is as follows: Strip line breaks from the value.
Unlike the URL and E-mail types, the Telephone type does not enforce a
particular syntax. This is intentional; in practice, telephone
number fields tend to be free-form fields, because there are a wide
variety of valid phone numbers. Systems that need to enforce a
particular format are encouraged to use the pattern attribute or the setCustomValidity() method
to hook into the client-side validation mechanism.
The following common input element content
attributes, IDL attributes, and methods apply to the element:
autocomplete,
list,
maxlength,
pattern,
placeholder,
readonly,
required, and
size content attributes;
list,
selectionStart,
selectionEnd,
selectionDirection, and
value IDL attributes;
select() and
setSelectionRange() methods.
The value IDL attribute is
in mode value.
The input and change events apply.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
checked,
dirname,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
max,
min,
multiple,
src,
step, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
valueAsDate, and
valueAsNumber IDL attributes;
stepDown() and
stepUp() methods.
type=url)When an input element's type attribute is in the URL state, the rules in this
section apply.
The input element represents a control
for editing a single absolute URL given in the
element's value.
If the element is mutable, the user agent should allow the user to change the URL represented by its value. User agents may allow the user to set the value to a string that is not a valid absolute URL, but may also or instead automatically escape characters entered by the user so that the value is always a valid absolute URL (even if that isn't the actual value seen and edited by the user in the interface). User agents should allow the user to set the value to the empty string. User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the value.
The value attribute, if
specified and not empty, must have a value that is a valid URL
potentially surrounded by spaces that is also an
absolute URL.
The value sanitization algorithm is as follows: Strip line breaks from the value, then strip leading and trailing whitespace from the value.
Constraint validation: While the value of the element is neither the empty string nor a valid absolute URL, the element is suffering from a type mismatch.
The following common input element content
attributes, IDL attributes, and methods apply to the element:
autocomplete,
list,
maxlength,
pattern,
placeholder,
readonly,
required, and
size content attributes;
list,
selectionStart,
selectionEnd,
selectionDirection, and
value IDL attributes;
select() and
setSelectionRange() methods.
The value IDL attribute is
in mode value.
The input and change events apply.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
checked,
dirname,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
max,
min,
multiple,
src,
step, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
valueAsDate, and
valueAsNumber IDL attributes;
stepDown() and
stepUp() methods.
If a document contained the following markup:
<input type="url" name="location" list="urls"> <datalist id="urls"> <option label="MIME: Format of Internet Message Bodies" value="http://tools.ietf.org/html/rfc2045"> <option label="HTML 4.01 Specification" value="http://www.w3.org/TR/html4/"> <option label="Form Controls" value="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint"> <option label="Scalable Vector Graphics (SVG) 1.1 Specification" value="http://www.w3.org/TR/SVG/"> <option label="Feature Sets - SVG 1.1 - 20030114" value="http://www.w3.org/TR/SVG/feature.html"> <option label="The Single UNIX Specification, Version 3" value="http://www.unix-systems.org/version3/"> </datalist>
...and the user had typed "www.w3", and the user
agent had also found that the user had visited
http://www.w3.org/Consortium/#membership and
http://www.w3.org/TR/XForms/ in the recent past, then
the rendering might look like this:

The first four URLs in this sample consist of the four URLs in the author-specified list that match the text the user has entered, sorted in some UA-defined manner (maybe by how frequently the user refers to those URLs). Note how the UA is using the knowledge that the values are URLs to allow the user to omit the scheme part and perform intelligent matching on the domain name.
The last two URLs (and probably many more, given the scrollbar's indications of more values being available) are the matches from the user agent's session history data. This data is not made available to the page DOM. In this particular case, the UA has no titles to provide for those values.
type=email)When an input element's type attribute is in the E-mail state, the rules in this
section apply.
How the E-mail state
operates depends on whether the multiple attribute is specified
or not.
multiple
attribute is not specified on the elementThe input element represents a
control for editing an e-mail address given in the element's value.
If the element is mutable, the user agent should allow the user to change the e-mail address represented by its value. User agents may allow the user to set the value to a string that is not a valid e-mail address. The user agent should act in a manner consistent with expecting the user to provide a single e-mail address. User agents should allow the user to set the value to the empty string. User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the value. User agents may transform the value for display and editing; in particular, user agents should convert punycode in the value to IDN in the display and vice versa.
The value attribute, if
specified and not empty, must have a value that is a single
valid e-mail address.
The value sanitization algorithm is as follows: Strip line breaks from the value, then strip leading and trailing whitespace from the value.
When the multiple
attribute is removed, the user agent must run the value
sanitization algorithm.
Constraint validation: While the value of the element is neither the empty string nor a single valid e-mail address, the element is suffering from a type mismatch.
multiple
attribute is specified on the elementThe element's values are the result of splitting on commas the element's value.
The input element represents a
control for adding, removing, and editing the e-mail addresses
given in the element's values.
If the element is mutable, the user agent should allow the user to add, remove, and edit the e-mail addresses represented by its values. User agents may allow the user to set any individual value in the list of values to a string that is not a valid e-mail address, but must not allow users to set any individual value to a string containing U+002C COMMA (,), U+000A LINE FEED (LF), or U+000D CARRIAGE RETURN (CR) characters. User agents should allow the user to remove all the addresses in the element's values. User agents may transform the values for display and editing; in particular, user agents should convert punycode in the value to IDN in the display and vice versa.
Whenever the user changes the element's values, the user agent must run the following steps:
Let latest values be a copy of the element's values.
Strip leading and trailing whitespace from each value in latest values.
Let the element's value be the result of concatenating all the values in latest values, separating each value from the next by a single U+002C COMMA character (,), maintaining the list's order.
The value attribute, if
specified, must have a value that is a valid e-mail address
list.
The value sanitization algorithm is as follows:
Split on commas the element's value, strip leading and trailing whitespace from each resulting token, if any, and let the element's values be the (possibly empty) resulting list of (possibly empty) tokens, maintaining the original order.
Let the element's value be the result of concatenating the element's values, separating each value from the next by a single U+002C COMMA character (,), maintaining the list's order.
When the multiple
attribute is set, the user agent must run the value
sanitization algorithm.
Constraint validation: While the value of the element is not a valid e-mail address list, the element is suffering from a type mismatch.
A valid e-mail address is a string that matches the
ABNF production 1*( atext / "." ) "@" ldh-str *( "." ldh-str )
where atext is defined in RFC 5322
section 3.2.3, and ldh-str is defined in
RFC 1034
section 3.5. [ABNF] [RFC5322] [RFC1034]
This requirement is a willful violation of RFC 5322, which defines a syntax for e-mail addresses that is simultaneously too strict (before the "@" character), too vague (after the "@" character), and too lax (allowing comments, whitespace characters, and quoted strings in manners unfamiliar to most users) to be of practical use here.
The following JavaScript- and Perl-compatible regular expression is an implementation of the above definition.
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
A valid e-mail address list is a set of comma-separated tokens, where each token is itself a valid e-mail address. To obtain the list of tokens from a valid e-mail address list, and implementation must split the string on commas.
The following common input element content
attributes, IDL attributes, and methods apply to the element:
autocomplete,
list,
maxlength,
multiple,
pattern,
placeholder,
readonly,
required, and
size content attributes;
list and
value IDL attributes.
The value IDL attribute is
in mode value.
The input and change events apply.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
checked,
dirname,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
max,
min,
src,
step, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
selectionStart,
selectionEnd,
selectionDirection,
valueAsDate, and
valueAsNumber IDL attributes;
select(),
setSelectionRange(),
stepDown() and
stepUp() methods.
type=password)When an input element's type attribute is in the Password state, the rules in
this section apply.
The input element represents a one line
plain text edit control for the element's value. The user agent should obscure
the value so that people other than the user cannot see it.
If the element is mutable, its value should be editable by the user. User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the value.
The value attribute, if
specified, must have a value that contains no U+000A LINE FEED (LF)
or U+000D CARRIAGE RETURN (CR) characters.
The value sanitization algorithm is as follows: Strip line breaks from the value.
The following common input element content
attributes, IDL attributes, and methods apply to the element:
autocomplete,
maxlength,
pattern,
placeholder,
readonly,
required, and
size content attributes;
selectionStart,
selectionEnd,
selectionDirection, and
value IDL attributes;
select(), and
setSelectionRange() methods.
The value IDL attribute is
in mode value.
The input and change events apply.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
checked,
dirname,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
list,
max,
min,
multiple,
src,
step, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
list,
valueAsDate, and
valueAsNumber IDL attributes;
stepDown() and
stepUp() methods.
type=datetime)When an input element's type attribute is in the Date and Time state, the
rules in this section apply.
The input element represents a control
for setting the element's value to a string representing a
specific global date and
time. User agents may display the date and
time in whatever time zone is appropriate for the user.
If the element is mutable, the user agent should allow the user to change the global date and time represented by its value, as obtained by parsing a global date and time from it. User agents must not allow the user to set the value to a non-empty string that is not a valid normalized forced-UTC global date and time string, though user agents may allow the user to set and view the time in another time zone and silently translate the time to and from the UTC time zone in the value. If the user agent provides a user interface for selecting a global date and time, then the value must be set to a valid normalized forced-UTC global date and time string representing the user's selection. User agents should allow the user to set the value to the empty string.
See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls, and the implementation notes regarding localization of form controls.
The value attribute, if
specified and not empty, must have a value that is a valid
global date and time string.
The value sanitization algorithm is as follows: If the value of the element is a valid global date and time string, then adjust the time so that the value represents the same point in time but expressed in the UTC time zone as a valid normalized forced-UTC global date and time string, otherwise, set it to the empty string instead.
The min attribute, if
specified, must have a value that is a valid global date and
time string. The max
attribute, if specified, must have a value that is a valid
global date and time string.
The step attribute is
expressed in seconds. The step scale factor is 1000
(which converts the seconds to milliseconds, as used in the other
algorithms). The default step is 60
seconds.
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest global date and time for which the element would not suffer from a step mismatch.
The algorithm to convert a
string to a number, given a string input,
is as follows: If parsing a global date and time from input results in an error, then return an error;
otherwise, return the number of milliseconds elapsed from midnight
UTC on the morning of 1970-01-01 (the time represented by the value
"1970-01-01T00:00:00.0Z") to the parsed global date and time, ignoring leap
seconds.
The algorithm to convert a
number to a string, given a number input,
is as follows: Return a valid normalized forced-UTC
global date and time string that represents the global date and time that is input milliseconds after midnight UTC on the morning
of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0Z").
The algorithm to convert a
string to a Date object, given a string input, is as follows: If parsing a global date and time
from input results in an error, then return an
error; otherwise, return a new
Date object representing the parsed global date and time, expressed in
UTC.
The algorithm to convert a
Date object to a string, given a
Date object input, is as
follows: Return a valid normalized forced-UTC global
date and time string that represents the global date and time that is
represented by input.
The Date and Time state (and other date- and time-related states described in subsequent sections) is not intended for the entry of values for which a precise date and time relative to the contemporary calendar cannot be established. For example, it would be inappropriate for the entry of times like "one millisecond after the big bang", "the early part of the Jurassic period", or "a winter around 250 BCE".
For the input of dates before the introduction of the Gregorian
calendar, authors are encouraged to not use the Date and Time state (and
the other date- and time-related states described in subsequent
sections), as user agents are not required to support converting
dates and times from earlier periods to the Gregorian calendar, and
asking users to do so manually puts an undue burden on users. (This
is complicated by the manner in which the Gregorian calendar was
phased in, which occurred at different times in different
countries, ranging from partway through the 16th century all the
way to early in the 20th.) Instead, authors are encouraged to
provide fine-grained input controls using the select
element and input elements with the Number state.
The following common input element content
attributes, IDL attributes, and methods apply to the element:
autocomplete,
list,
max,
min,
readonly,
required, and
step content attributes;
list,
value,
valueAsDate, and
valueAsNumber IDL attributes;
stepDown() and
stepUp() methods.
The value IDL attribute is
in mode value.
The input and change events apply.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
checked,
dirname,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
maxlength,
multiple,
pattern,
placeholder,
size,
src, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
selectionStart,
selectionEnd, and
selectionDirection IDL attributes;
select() and
setSelectionRange() methods.
The following fragment shows part of a calendar application. A user can specify a date and time for a meeting (in his local time zone, probably, though the user agent can allow the user to change that), and since the submitted data includes the time-zone offset, the application can ensure that the meeting is shown at the correct time regardless of the time zones used by all the participants.
<fieldset> <legend>Add Meeting</legend> <p><label>Meeting name: <input type=text name="meeting.label"></label> <p><label>Meeting time: <input type=datetime name="meeting.start"></label> </fieldset>
Had the application used the datetime-local type
instead, the calendar application would have also had to explicitly
determine which time zone the user intended.
type=date)When an input element's type attribute is in the Date state, the rules in this
section apply.
The input element represents a control
for setting the element's value to a string representing a
specific date.
If the element is mutable, the user agent should allow the user to change the date represented by its value, as obtained by parsing a date from it. User agents must not allow the user to set the value to a non-empty string that is not a valid date string. If the user agent provides a user interface for selecting a date, then the value must be set to a valid date string representing the user's selection. User agents should allow the user to set the value to the empty string.
See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls, and the implementation notes regarding localization of form controls.
The value attribute, if
specified and not empty, must have a value that is a valid
date string.
The value sanitization algorithm is as follows: If the value of the element is not a valid date string, then set it to the empty string instead.
The min attribute, if
specified, must have a value that is a valid date
string. The max
attribute, if specified, must have a value that is a valid
date string.
The step attribute is
expressed in days. The step scale factor is
86,400,000 (which converts the days to milliseconds, as used in the
other algorithms). The default step is 1 day.
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest date for which the element would not suffer from a step mismatch.
The algorithm to convert a
string to a number, given a string input,
is as follows: If parsing
a date from input results in an error,
then return an error; otherwise, return the number of milliseconds
elapsed from midnight UTC on the morning of 1970-01-01 (the time
represented by the value "1970-01-01T00:00:00.0Z") to midnight UTC on the
morning of the parsed date,
ignoring leap seconds.
The algorithm to convert a
number to a string, given a number input,
is as follows: Return a valid date string that
represents the date that, in UTC,
is current input milliseconds after midnight UTC
on the morning of 1970-01-01 (the time represented by the value
"1970-01-01T00:00:00.0Z").
The algorithm to convert a
string to a Date object, given a string input, is as follows: If parsing a date from input
results in an error, then return an error; otherwise, return a new Date object
representing midnight UTC on the morning of the parsed date.
The algorithm to convert a
Date object to a string, given a
Date object input, is as
follows: Return a valid date string that
represents the date current at the
time represented by input in the UTC
time zone.
See the note on historical dates in the Date and Time state section.
The following common input element content
attributes, IDL attributes, and methods apply to the element:
autocomplete,
list,
max,
min,
readonly,
required, and
step content attributes;
list,
value,
valueAsDate, and
valueAsNumber IDL attributes;
stepDown() and
stepUp() methods.
The value IDL attribute is
in mode value.
The input and change events apply.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
checked,
dirname,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
maxlength,
multiple,
pattern,
placeholder,
size,
src, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
selectionStart,
selectionEnd, and
selectionDirection IDL attributes;
select() and
setSelectionRange() methods.
type=month)When an input element's type attribute is in the Month state, the rules in this
section apply.
The input element represents a control
for setting the element's value to a string representing a
specific month.
If the element is mutable, the user agent should allow the user to change the month represented by its value, as obtained by parsing a month from it. User agents must not allow the user to set the value to a non-empty string that is not a valid month string. If the user agent provides a user interface for selecting a month, then the value must be set to a valid month string representing the user's selection. User agents should allow the user to set the value to the empty string.
See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls, and the implementation notes regarding localization of form controls.
The value attribute, if
specified and not empty, must have a value that is a valid
month string.
The value sanitization algorithm is as follows: If the value of the element is not a valid month string, then set it to the empty string instead.
The min attribute, if
specified, must have a value that is a valid month
string. The max
attribute, if specified, must have a value that is a valid
month string.
The step attribute is
expressed in months. The step scale factor is 1
(there is no conversion needed as the algorithms use months).
The default step is
1 month.
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest month for which the element would not suffer from a step mismatch.
The algorithm to convert a string to a number, given a string input, is as follows: If parsing a month from input results in an error, then return an error; otherwise, return the number of months between January 1970 and the parsed month.
The algorithm to convert a number to a string, given a number input, is as follows: Return a valid month string that represents the month that has input months between it and January 1970.
The algorithm to convert a
string to a Date object, given a string input, is as follows: If parsing a month from input results in an error, then return an error;
otherwise, return a new
Date object representing midnight UTC on the
morning of the first day of the parsed month.
The algorithm to convert a
Date object to a string, given a
Date object input, is as
follows: Return a valid month string that
represents the month current at
the time represented by input in the UTC
time zone.
The following common input element content
attributes, IDL attributes, and methods apply to the element:
autocomplete,
list,
max,
min,
readonly,
required, and
step content attributes;
list,
value,
valueAsDate, and
valueAsNumber IDL attributes;
stepDown() and
stepUp() methods.
The value IDL attribute is
in mode value.
The input and change events apply.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
checked,
dirname,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
maxlength,
multiple,
pattern,
placeholder,
size,
src, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
selectionStart,
selectionEnd, and
selectionDirection IDL attributes;
select() and
setSelectionRange() methods.
type=week)When an input element's type attribute is in the Week state, the rules in this
section apply.
The input element represents a control
for setting the element's value to a string representing a
specific week.
If the element is mutable, the user agent should allow the user to change the week represented by its value, as obtained by parsing a week from it. User agents must not allow the user to set the value to a non-empty string that is not a valid week string. If the user agent provides a user interface for selecting a week, then the value must be set to a valid week string representing the user's selection. User agents should allow the user to set the value to the empty string.
See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls, and the implementation notes regarding localization of form controls.
The value attribute, if
specified and not empty, must have a value that is a valid
week string.
The value sanitization algorithm is as follows: If the value of the element is not a valid week string, then set it to the empty string instead.
The min attribute, if
specified, must have a value that is a valid week
string. The max
attribute, if specified, must have a value that is a valid
week string.
The step attribute is
expressed in weeks. The step scale factor is
604,800,000 (which converts the weeks to milliseconds, as used in
the other algorithms). The default step is 1
week. The default step base is
−259,200,000 (the start of week 1970-W01).
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest week for which the element would not suffer from a step mismatch.
The algorithm to convert a
string to a number, given a string input,
is as follows: If parsing
a week string from input results in an
error, then return an error; otherwise, return the number of
milliseconds elapsed from midnight UTC on the morning of 1970-01-01
(the time represented by the value "1970-01-01T00:00:00.0Z") to midnight UTC on the
morning of the Monday of the parsed week, ignoring leap seconds.
The algorithm to convert a
number to a string, given a number input,
is as follows: Return a valid week string that
represents the week that, in UTC,
is current input milliseconds after midnight UTC
on the morning of 1970-01-01 (the time represented by the value
"1970-01-01T00:00:00.0Z").
The algorithm to convert a
string to a Date object, given a string input, is as follows: If parsing a week from input
results in an error, then return an error; otherwise, return a new Date object
representing midnight UTC on the morning of the Monday of the parsed
week.
The algorithm to convert a
Date object to a string, given a
Date object input, is as
follows: Return a valid week string that
represents the week current at the
time represented by input in the UTC
time zone.
The following common input element content
attributes, IDL attributes, and methods apply to the element:
autocomplete,
list,
max,
min,
readonly,
required, and
step content attributes;
list,
value,
valueAsDate, and
valueAsNumber IDL attributes;
stepDown() and
stepUp() methods.
The value IDL attribute is
in mode value.
The input and change events apply.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
checked,
dirname,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
maxlength,
multiple,
pattern,
placeholder,
size,
src, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
selectionStart,
selectionEnd, and
selectionDirection IDL attributes;
select() and
setSelectionRange() methods.
type=time)When an input element's type attribute is in the Time state, the rules in this
section apply.
The input element represents a control
for setting the element's value to a string representing a
specific time.
If the element is mutable, the user agent should allow the user to change the time represented by its value, as obtained by parsing a time from it. User agents must not allow the user to set the value to a non-empty string that is not a valid time string. If the user agent provides a user interface for selecting a time, then the value must be set to a valid time string representing the user's selection. User agents should allow the user to set the value to the empty string.
See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls, and the implementation notes regarding localization of form controls.
The value attribute, if
specified and not empty, must have a value that is a valid
time string.
The value sanitization algorithm is as follows: If the value of the element is not a valid time string, then set it to the empty string instead.
The min attribute, if
specified, must have a value that is a valid time
string. The max
attribute, if specified, must have a value that is a valid
time string.
The step attribute is
expressed in seconds. The step scale factor is 1000
(which converts the seconds to milliseconds, as used in the other
algorithms). The default step is 60
seconds.
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest time for which the element would not suffer from a step mismatch.
The algorithm to convert a string to a number, given a string input, is as follows: If parsing a time from input results in an error, then return an error; otherwise, return the number of milliseconds elapsed from midnight to the parsed time on a day with no time changes.
The algorithm to convert a number to a string, given a number input, is as follows: Return a valid time string that represents the time that is input milliseconds after midnight on a day with no time changes.
The algorithm to convert a
string to a Date object, given a string input, is as follows: If parsing a time from input
results in an error, then return an error; otherwise, return a new Date object
representing the parsed time in
UTC on 1970-01-01.
The algorithm to convert a
Date object to a string, given a
Date object input, is as
follows: Return a valid time string that
represents the UTC time component
that is represented by input.
The following common input element content
attributes, IDL attributes, and methods apply to the element:
autocomplete,
list,
max,
min,
readonly,
required, and
step content attributes;
list,
value,
valueAsDate, and
valueAsNumber IDL attributes;
stepDown() and
stepUp() methods.
The value IDL attribute is
in mode value.
The input and change events apply.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
checked,
dirname,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
maxlength,
multiple,
pattern,
placeholder,
size,
src, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
selectionStart,
selectionEnd, and
selectionDirection IDL attributes;
select() and
setSelectionRange() methods.
type=datetime-local)When an input element's type attribute is in the Local Date and Time
state, the rules in this section apply.
The input element represents a control
for setting the element's value to a string representing a
local date and time,
with no time-zone offset information.
If the element is mutable, the user agent should allow the user to change the date and time represented by its value, as obtained by parsing a date and time from it. User agents must not allow the user to set the value to a non-empty string that is not a valid normalized local date and time string. If the user agent provides a user interface for selecting a local date and time, then the value must be set to a valid normalized local date and time string representing the user's selection. User agents should allow the user to set the value to the empty string.
See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls, and the implementation notes regarding localization of form controls.
The value attribute, if
specified and not empty, must have a value that is a valid
local date and time string.
The value sanitization algorithm is as follows: If the value of the element is a valid local date and time string, then set it to a valid normalized local date and time string representing the same date and time; otherwise, set it to the empty string instead.
The min attribute, if
specified, must have a value that is a valid local date and
time string. The max
attribute, if specified, must have a value that is a valid
local date and time string.
The step attribute is
expressed in seconds. The step scale factor is 1000
(which converts the seconds to milliseconds, as used in the other
algorithms). The default step is 60
seconds.
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest local date and time for which the element would not suffer from a step mismatch.
The algorithm to convert a
string to a number, given a string input,
is as follows: If parsing a date and time from input results in an error, then return an error;
otherwise, return the number of milliseconds elapsed from midnight
on the morning of 1970-01-01 (the time represented by the value
"1970-01-01T00:00:00.0") to the parsed local date and time, ignoring
leap seconds.
The algorithm to convert a
number to a string, given a number input,
is as follows: Return a valid normalized local date
and time string that represents the date and time that is
input milliseconds after midnight on the morning
of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0").
See the note on historical dates in the Date and Time state section.
The following common input element content
attributes, IDL attributes, and methods apply to the element:
autocomplete,
list,
max,
min,
readonly,
required, and
step content attributes;
list,
value, and
valueAsNumber IDL attributes;
stepDown() and
stepUp() methods.
The value IDL attribute is
in mode value.
The input and change events apply.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
checked,
dirname,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
maxlength,
multiple,
pattern,
placeholder,
size,
src, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
selectionStart,
selectionEnd,
selectionDirection, and
valueAsDate IDL attributes;
select() and
setSelectionRange() methods.
The following example shows part of a flight booking
application. The application uses an input element
with its type attribute set to
datetime-local,
and it then interprets the given date and time in the time zone of
the selected airport.
<fieldset> <legend>Destination</legend> <p><label>Airport: <input type=text name=to list=airports></label></p> <p><label>Departure time: <input type=datetime-local name=totime step=3600></label></p> </fieldset> <datalist id=airports> <option value=ATL label="Atlanta"> <option value=MEM label="Memphis"> <option value=LHR label="London Heathrow"> <option value=LAX label="Los Angeles"> <option value=FRA label="Frankfurt"> </datalist>
If the application instead used the datetime type, then the
user would have to work out the time-zone conversions himself,
which is clearly not a good user experience!
type=number)When an input element's type attribute is in the Number state, the rules in
this section apply.
The input element represents a control
for setting the element's value to a string representing a
number.
If the element is mutable, the user agent should allow the user to change the number represented by its value, as obtained from applying the rules for parsing floating point number values to it. User agents must not allow the user to set the value to a non-empty string that is not a valid floating point number. If the user agent provides a user interface for selecting a number, then the value must be set to the best representation of the number representing the user's selection as a floating point number. User agents should allow the user to set the value to the empty string.
This specification does not define what user interface user agents are to use; user agent vendors are encouraged to consider what would best serve their users' needs. For example, a user agent in Persian or Arabic markets might support Persian and Arabic numeric input (converting it to the format required for submission as described above).
The value attribute, if
specified and not empty, must have a value that is a valid
floating point number.
The value sanitization algorithm is as follows: If the value of the element is not a valid floating point number, then set it to the empty string instead.
The min attribute, if
specified, must have a value that is a valid floating point
number. The max
attribute, if specified, must have a value that is a valid
floating point number.
The step scale factor is
1. The default
step is 1 (allowing only integers, unless the min attribute has a non-integer
value).
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest number for which the element would not suffer from a step mismatch. If there are two such numbers, user agents are encouraged to pick the one nearest positive infinity.
The algorithm to convert a string to a number, given a string input, is as follows: If applying the rules for parsing floating point number values to input results in an error, then return an error; otherwise, return the resulting number.
The algorithm to convert a number to a string, given a number input, is as follows: Return a valid floating point number that represents input.
The following common input element content
attributes, IDL attributes, and methods apply to the element:
autocomplete,
list,
max,
min,
placeholder,
readonly,
required, and
step content attributes;
list,
value, and
valueAsNumber IDL attributes;
stepDown() and
stepUp() methods.
The value IDL attribute is
in mode value.
The input and change events apply.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
checked,
dirname,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
maxlength,
multiple,
pattern,
size,
src, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
selectionStart,
selectionEnd,
selectionDirection, and
valueAsDate IDL attributes;
select() and
setSelectionRange() methods.
type=range)When an input element's type attribute is in the Range state, the rules in this
section apply.
The input element represents a control
for setting the element's value to a string representing a
number, but with the caveat that the exact value is not important,
letting UAs provide a simpler interface than they do for the Number state.
In this state, the range and step constraints are enforced even during user input, and there is no way to set the value to the empty string.
If the element is mutable, the user agent should allow the user to change the number represented by its value, as obtained from applying the rules for parsing floating point number values to it. User agents must not allow the user to set the value to a string that is not a valid floating point number. If the user agent provides a user interface for selecting a number, then the value must be set to a best representation of the number representing the user's selection as a floating point number. User agents must not allow the user to set the value to the empty string.
The value attribute, if
specified, must have a value that is a valid floating point
number.
The value sanitization algorithm is as follows: If the value of the element is not a valid floating point number, then set it to a valid floating point number that represents the default value.
The min attribute, if
specified, must have a value that is a valid floating point
number. The default
minimum is 0. The max
attribute, if specified, must have a value that is a valid
floating point number. The default maximum is 100.
The default value is the minimum plus half the difference between the minimum and the maximum, unless the maximum is less than the minimum, in which case the default value is the minimum.
When the element is suffering from an underflow, the user agent must set the element's value to a valid floating point number that represents the minimum.
When the element is suffering from an overflow, if the maximum is not less than the minimum, the user agent must set the element's value to a valid floating point number that represents the maximum.
The step scale factor is
1. The default
step is 1 (allowing only integers, unless the min attribute has a non-integer
value).
When the element is suffering from a step mismatch, the user agent must round the element's value to the nearest number for which the element would not suffer from a step mismatch, and which is greater than or equal to the minimum, and, if the maximum is not less than the minimum, which is less than or equal to the maximum. If two numbers match these constraints, then user agents must use the one nearest to positive infinity.
For example, the markup
<input type="range" min=0 max=100 step=20 value=50>
results in a range control whose initial value is 60.
The algorithm to convert a string to a number, given a string input, is as follows: If applying the rules for parsing floating point number values to input results in an error, then return an error; otherwise, return the resulting number.
The algorithm to convert a number to a string, given a number input, is as follows: Return a valid floating point number that represents input.
The following common input element content
attributes, IDL attributes, and methods apply to the element:
autocomplete,
list,
max,
min, and
step content attributes;
list,
value, and
valueAsNumber IDL attributes;
stepDown() and
stepUp() methods.
The value IDL attribute is
in mode value.
The input and change events apply.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
checked,
dirname,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
maxlength,
multiple,
pattern,
placeholder,
readonly,
required,
size,
src, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
selectionStart,
selectionEnd,
selectionDirection, and
valueAsDate IDL attributes;
select() and
setSelectionRange() methods.
Here is an example of a range control using an autocomplete list
with the list attribute. This
could be useful if there are values along the full range of the
control that are especially important, such as preconfigured light
levels or typical speed limits in a range control used as a speed
control. The following markup fragment:
<input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers"> <datalist id="powers"> <option value="0"> <option value="-30"> <option value="30"> <option value="+50"> </datalist>
...with the following style sheet applied:
input { height: 75px; width: 49px; background: #D5CCBB; color: black; }
...might render as:
Note how the UA determined the orientation of the control from
the ratio of the style-sheet-specified height and width properties.
The colors were similiarly derived from the style sheet. The tick
marks, however, were derived from the markup. In particular, the
step attribute has not
affected the placement of tick marks, the UA deciding to only use
the author-specified completion values and then adding longer tick
marks at the extremes.
Note also how the invalid value +50 was
completely ignored.
For another example, consider the following markup fragment:
<input name=x type=range min=100 max=700 step=9.09090909 value=509.090909>
A user agent could display in a variety of ways, for instance:

Or, alternatively, for instance:

The user agent could pick which one to display based on the dimensions given in the style sheet. This would allow it to maintain the same resolution for the tick marks, despite the differences in width.
type=color)When an input element's type attribute is in the Color state, the rules in this
section apply.
The input element represents a color
well control, for setting the element's value to a string representing a
simple color.
In this state, there is always a color picked, and there is no way to set the value to the empty string.
If the element is mutable, the user agent should allow the user to change the color represented by its value, as obtained from applying the rules for parsing simple color values to it. User agents must not allow the user to set the value to a string that is not a valid lowercase simple color. If the user agent provides a user interface for selecting a color, then the value must be set to the result of using the rules for serializing simple color values to the user's selection. User agents must not allow the user to set the value to the empty string.
The value attribute, if
specified and not empty, must have a value that is a valid
simple color.
The value sanitization algorithm is as
follows: If the value
of the element is a valid simple color, then set it to
the value of the element
converted to ASCII lowercase; otherwise, set it to the string
"#000000".
The following common input element content
attributes, IDL attributes, and methods apply to the element:
autocomplete and
list content attributes;
list and
value IDL attributes.
The value IDL attribute is
in mode value.
The input and change events apply.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
checked,
dirname,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
max,
maxlength,
min,
multiple,
pattern,
placeholder,
readonly,
required,
size,
src,
step, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
selectionStart,
selectionEnd,
selectionDirection,
valueAsDate, and
valueAsNumber IDL attributes;
select(),
setSelectionRange(),
stepDown(), and
stepUp() methods.
type=checkbox)When an input element's type attribute is in the Checkbox state, the rules in
this section apply.
The input element represents a
two-state control that represents the element's checkedness state. If the
element's checkedness state
is true, the control represents a positive selection, and if it is
false, a negative selection. If the element's indeterminate IDL attribute
is set to true, then the control's selection should be obscured as
if the control was in a third, indeterminate, state.
The control is never a true tri-state control, even
if the element's indeterminate IDL attribute
is set to true. The indeterminate IDL attribute
only gives the appearance of a third state.
If the element is mutable,
then: The pre-click activation steps consist of setting
the element's checkedness to
its opposite value (i.e. true if it is false, false if it is true),
and of setting the element's indeterminate IDL attribute
to false. The canceled activation steps consist of
setting the checkedness and
the element's indeterminate IDL attribute
back to the values they had before the pre-click activation
steps were run. The activation behavior is to
fire a simple event that bubbles named change at the element.
Constraint validation: If the element is required and its checkedness is false, then the element is suffering from being missing.
indeterminate [ = value ]When set, overrides the rendering of checkbox controls so that the current value is not visible.
The following common input element content
attributes and IDL attributes apply to the element:
checked, and
required content attributes;
checked and
value IDL attributes.
The value IDL attribute is
in mode default/on.
The change event applies.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
autocomplete,
dirname,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
list,
max,
maxlength,
min,
multiple,
pattern,
placeholder,
readonly,
size,
src,
step, and
width.
The following IDL attributes and methods do not apply to the
element:
files,
list,
selectionStart,
selectionEnd,
selectionDirection,
valueAsDate, and
valueAsNumber IDL attributes;
select(),
setSelectionRange(),
stepDown(), and
stepUp() methods.
The input event does not apply.
type=radio)When an input element's type attribute is in the Radio Button state, the rules
in this section apply.
The input element represents a control
that, when used in conjunction with other input
elements, forms a radio button group in which only one
control can have its checkedness state set to true. If
the element's checkedness
state is true, the control represents the selected control in the
group, and if it is false, it indicates a control in the group that
is not selected.
The radio button group that contains an
input element a also contains all
the other input elements b that
fulfill all of the following conditions:
input element b's type attribute is in the Radio Button state.name
attribute, their name attributes
are not empty, and the value of a's name attribute is a compatibility
caseless match for the value of b's
name attribute.A document must not contain an input element whose
radio button group contains only that element.
When any of the following phenomena occur, if the element's checkedness state is true after the occurrence, the checkedness state of all the other elements in the same radio button group must be set to false:
name attribute
is set, changed, or removed.If the element is mutable,
then: The pre-click activation steps consist of setting
the element's checkedness to
true. The canceled activation steps consist of setting
the element's checkedness to
false. The activation behavior is to fire a
simple event that bubbles named change at the element. .
Constraint validation: If an element in the
radio button group is required, and all of the
input elements in the radio button group have a
checkedness that is false,
then the element is suffering from being missing.
If none of the radio buttons in a radio button group are checked when they are inserted into the document, then they will all be initially unchecked in the interface, until such time as one of them is checked (either by the user or by script).
The following common input element content
attributes and IDL attributes apply to the element:
checked and
required content attributes;
checked and
value IDL attributes.
The value IDL attribute is
in mode default/on.
The change event applies.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
autocomplete,
dirname,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
list,
max,
maxlength,
min,
multiple,
pattern,
placeholder,
readonly,
size,
src,
step, and
width.
The following IDL attributes and methods do not apply to the
element:
files,
list,
selectionStart,
selectionEnd,
selectionDirection,
valueAsDate, and
valueAsNumber IDL attributes;
select(),
setSelectionRange(),
stepDown(), and
stepUp() methods.
The input event does not apply.
type=file)When an input element's type attribute is in the File Upload state, the rules in this
section apply.
The input element represents a list of
selected files,
each file consisting of a file name, a file type, and a file body
(the contents of the file).
File names may contain partial paths, e.g. in the case that a user has selected an entire directory hierarchy. Path components should be separated from each other using U+005C REVERSE SOLIDUS character (\).
If the element is mutable, the user agent should allow the user to change the files on the list, e.g. adding or removing files. Files can be from the filesystem or created on the fly, e.g. a picture taken from a camera connected to the user's device.
File names must be exposed in Unicode normalization Form C (NFC),
whether in the DOM (e.g. in File objects) or in form
submission, regardless of the conventions of the user agent's
platform's file system.
Constraint validation: If the element is required and the list of selected files is empty, then the element is suffering from being missing.
Unless the multiple
attribute is set, there must be no more than one file in the list of
selected
files.
The accept
attribute may be specified to provide user agents with a hint of
what file types will be accepted.
If specified, the attribute must consist of a set of comma-separated tokens, each of which must be an ASCII case-insensitive match for one of the following:
audio/*video/*image/*The tokens must not be ASCII case-insensitive matches for any of the other tokens (i.e. duplicates are not allowed). To obtain the list of tokens from the attribute, the user agent must split the attribute value on commas.
User agents may use the value of this attribute to display a more
appropriate user interface than a generic file picker. For instance,
given the value image/*, a user agent could
offer the user the option of using a local camera or selecting a
photograph from their photo collection; given the value audio/*, a user agent could offer the user the
option of recording a clip using a headset microphone.
User agents should prevent the user from selecting files that are not accepted by one (or more) of these tokens.
For historical reasons, the value IDL attribute prefixes the
filename with the string "C:\fakepath\". Some
legacy user agents actually included the full path (which was a
security vulnerability). As a result of this, obtaining the
filename from the value IDL
attribute in a backwards-compatible way is non-trivial. The
following function extracts the filename in a suitably compatible
manner:
function extractFilename(path) {
if (path.substr(0, 12) == "C:\\fakepath\\")
return path.substr(12); // modern browser
var x;
x = path.lastIndexOf('/');
if (x >= 0) // Unix-based path
return path.substr(x+1);
x = path.lastIndexOf('\\');
if (x >= 0) // Windows-based path
return path.substr(x+1);
return path; // just the filename
}
This can be used as follows:
<p><input type=file name=image onchange="updateFilename(this.value)"></p>
<p>The name of the file you picked is: <span id="filename">(none)</span></p>
<script>
function updateFilename(path) {
var name = extractFilename(path);
document.getElementById('filename').textContent = name;
}
</script>
The following common input element content
attributes apply to the element:
The following common input element content
attributes and IDL attributes apply to the element:
accept,
multiple, and
required;
files and
value IDL attributes.
The value IDL attribute is
in mode filename.
The change event applies.
The following content attributes must not be specified and do not
apply to the element:
alt,
autocomplete,
checked,
dirname,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
list,
max,
maxlength,
min,
pattern,
placeholder,
readonly,
size,
src,
step, and
width.
The element's value
attribute must be omitted.
The following IDL attributes and methods do not apply to the
element:
checked,
list,
selectionStart,
selectionEnd,
selectionDirection,
valueAsDate, and
valueAsNumber IDL attributes;
select(),
setSelectionRange(),
stepDown(), and
stepUp() methods.
The input event does not apply.
type=submit)When an input element's type attribute is in the Submit Button state, the rules
in this section apply.
The input element represents a button
that, when activated, submits the form. If the
element has a value attribute,
the button's label must be the value of that attribute; otherwise,
it must be an implementation-defined string that means "Submit" or
some such. The element is a button, specifically a submit button.
If the element is mutable, the user agent should allow the user to activate the element.
The element's activation behavior, if the element
has a form owner, is to submit the form
owner from the input element; otherwise, it is
to do nothing.
The formaction, formenctype, formmethod, formnovalidate, and formtarget attributes are attributes
for form submission.
The formnovalidate attribute can
be used to make submit buttons that do not trigger the constraint
validation.
The following common input element content
attributes and IDL attributes apply to the element:
formaction,
formenctype,
formmethod,
formnovalidate, and
formtarget content attributes;
value IDL attribute.
The value IDL attribute is
in mode default.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
autocomplete,
checked,
dirname,
height,
list,
max,
maxlength,
min,
multiple,
pattern,
placeholder,
readonly,
required,
size,
src,
step, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
list,
selectionStart,
selectionEnd,
selectionDirection,
valueAsDate, and
valueAsNumber IDL attributes;
select(),
setSelectionRange(),
stepDown(), and
stepUp() methods.
The input and change events do not apply.
type=image)When an input element's type attribute is in the Image Button state, the rules
in this section apply.
The input element represents either an
image from which a user can select a coordinate and submit the form,
or alternatively a button from which the user can submit the
form. The element is a button,
specifically a submit
button.
The coordinate is sent to the server during form submission
by sending two entries for the element, derived from the name of the
control but with ".x" and ".y" appended to the name with the x and y components of the
coordinate respectively.
The image is given by the src attribute. The src attribute must be present, and
must contain a valid non-empty URL potentially surrounded by
spaces referencing a non-interactive, optionally animated,
image resource that is neither paged nor scripted.
When any of the following events occur, unless the user agent
cannot support images, or its support for images has been disabled,
or the user agent only fetches elements on demand, or the src attribute's value is the empty
string, the user agent must resolve the value of the src attribute, relative to the
element, and if that is successful, must fetch the
resulting absolute URL:
input element's type attribute is first set to the
Image Button state
(possibly when the element is first created), and the src attribute is present.input element's type attribute is changed back to
the Image Button state,
and the src attribute is
present, and its value has changed since the last time the type attribute was in the Image Button state.input element's type attribute is in the Image Button state, and the
src attribute is set or
changed.Fetching the image must delay the load event of the element's document until the task that is queued by the networking task source once the resource has been fetched (defined below) has been run.
If the image was successfully obtained, with no network errors, and the image's type is a supported image type, and the image is a valid image of that type, then the image is said to be available. If this is true before the image is completely downloaded, each task that is queued by the networking task source while the image is being fetched must update the presentation of the image appropriately.
The user agents should apply the image sniffing rules to determine the type of the image, with the image's associated Content-Type headers giving the official type. If these rules are not applied, then the type of the image must be the type given by the image's associated Content-Type headers.
User agents must not support non-image resources with the
input element. User agents must not run executable code
embedded in the image resource. User agents must only display the
first page of a multipage resource. User agents must not allow the
resource to act in an interactive fashion, but should honor any
animation in the resource.
The task that is queued by the networking task
source once the resource has been fetched, must, if the download was successful
and the image is available,
queue a task to fire a simple event named
load at the input
element; and otherwise, if the fetching process fails without a
response from the remote server, or completes but the image is not a
valid or supported image, queue a task to fire a
simple event named error on
the input element.
The alt attribute
provides the textual label for the button for users and user agents
who cannot use the image. The alt attribute must be present, and
must contain a non-empty string.
The input element supports dimension
attributes.
If the src attribute is set,
and the image is available and
the user agent is configured to display that image, then: The
element represents a control for selecting a coordinate from
the image specified by the src
attribute; if the element is mutable, the user agent should
allow the user to select this coordinate. The
activation behavior in this case consists of taking the
user's selected coordinate, and
then, if the element has a form owner, submitting the input
element's form owner from the input
element. If the user activates the control without explicitly
selecting a coordinate, then the coordinate (0,0) must be
assumed.
Otherwise, the element represents a submit button
whose label is given by the value of the alt attribute; if the element is mutable, the user agent should
allow the user to activate the button. The activation
behavior in this case consists of setting the selected
coordinate to (0,0), and then, if the element has a
form owner, submitting the input
element's form owner from the input
element.
The selected coordinate must consist of an x-component and a y-component. The coordinates represent the position relative to the edge of the image, with the coordinate space having the positive x direction to the right, and the positive y direction downwards.
The x-component must be a valid integer representing a number x in the range −(borderleft+paddingleft) ≤ x ≤ width+borderright+paddingright, where width is the rendered width of the image, borderleft is the width of the border on the left of the image, paddingleft is the width of the padding on the left of the image, borderright is the width of the border on the right of the image, and paddingright is the width of the padding on the right of the image, with all dimensions given in CSS pixels.
The y-component must be a valid integer representing a number y in the range −(bordertop+paddingtop) ≤ y ≤ height+borderbottom+paddingbottom, where height is the rendered height of the image, bordertop is the width of the border above the image, paddingtop is the width of the padding above the image, borderbottom is the width of the border below the image, and paddingbottom is the width of the padding below the image, with all dimensions given in CSS pixels.
Where a border or padding is missing, its width is zero CSS pixels.
The formaction, formenctype, formmethod, formnovalidate, and formtarget attributes are attributes
for form submission.
width [ = value ]height [ = value ]These attributes return the actual rendered dimensions of the image, or zero if the dimensions are not known.
They can be set, to change the corresponding content attributes.
The following common input element content
attributes and IDL attributes apply to the element:
alt,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
src, and
width content attributes;
value IDL attribute.
The value IDL attribute is
in mode default.
The following content attributes must not be specified and do not
apply to the element:
accept,
autocomplete,
checked,
dirname,
list,
max,
maxlength,
min,
multiple,
pattern,
placeholder,
readonly,
required,
size, and
step.
The element's value
attribute must be omitted.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
list,
selectionStart,
selectionEnd,
selectionDirection,
valueAsDate, and
valueAsNumber IDL attributes;
select(),
setSelectionRange(),
stepDown(), and
stepUp() methods.
The input and change events do not apply.
Many aspects of this state's behavior are similar to
the behavior of the img element. Readers are encouraged
to read that section, where many of the same requirements are
described in more detail.
Take the following form:
<form action="process.cgi"> <input type=image src=map.png name=where> </form>
If the user clicked on the image at coordinate (127,40) then the
URL used to submit the form would be "process.cgi?where.x=127&where.y=40".
type=reset)When an input element's type attribute is in the Reset Button state, the rules
in this section apply.
The input element represents a button
that, when activated, resets the form. If the
element has a value attribute,
the button's label must be the value of that attribute; otherwise,
it must be an implementation-defined string that means "Reset" or
some such. The element is a button.
If the element is mutable, the user agent should allow the user to activate the element.
The element's activation behavior, if the element has a form owner, is to reset the form owner; otherwise, it is to do nothing.
Constraint validation: The element is barred from constraint validation.
The value IDL attribute
applies to this element and is in mode default.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
autocomplete,
checked,
dirname,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
list,
max,
maxlength,
min,
multiple,
pattern,
placeholder,
readonly,
required,
size,
src,
step, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
list,
selectionStart,
selectionEnd,
selectionDirection,
valueAsDate, and
valueAsNumber IDL attributes;
select(),
setSelectionRange(),
stepDown(), and
stepUp() methods.
The input and change events do not apply.
type=button)When an input element's type attribute is in the Button state, the rules in
this section apply.
The input element represents a button
with no default behavior. A label for the button must be provided in
the value attribute, though it
may be the empty string. If the element has a
value attribute, the button's
label must be the value of that attribute; otherwise, it must be the
empty string. The element is a button.
If the element is mutable, the user agent should allow the user to activate the element. The element's activation behavior is to do nothing.
Constraint validation: The element is barred from constraint validation.
The value IDL attribute
applies to this element and is in mode default.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
autocomplete,
checked,
dirname,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
list,
max,
maxlength,
min,
multiple,
pattern,
placeholder,
readonly,
required,
size,
src,
step, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
list,
selectionStart,
selectionEnd,
selectionDirection,
valueAsDate, and
valueAsNumber IDL attributes;
select(),
setSelectionRange(),
stepDown(), and
stepUp() methods.
The input and change events do not apply.
This section is non-normative.
The formats shown to the user in date, time, and number controls is independent of the format used for form submission.
Browsers are encouraged to use user interfaces that present
dates, times, and numbers according to the conventions of either the
locale implied by the input element's
language or the user's preferred locale. Using the
page's locale will ensure consistency with page-provided data.
For example, it would be confusing to users if an American English page claimed that a Cirque De Soleil show was going to be showing on 02/03, but their browser, configured to use the British English locale, only showed the date 03/02 in the ticket purchase date picker. Using the page's locale would at least ensure that the date was presented in the same format everywhere. (There's still a risk that the user would end up arriving a month late, of course, but there's only so much that can be done about such cultural differences...)
input element attributesThese attributes only apply to an input element if
its type attribute is in a
state whose definition declares that the attribute applies. When an
attribute doesn't apply to an
input element, user agents must ignore the
attribute, regardless of the requirements and definitions
below.
autocomplete attributeUser agents sometimes have features for helping users fill forms in, for example prefilling the user's address based on earlier user input.
The autocomplete
attribute is an enumerated attribute. The attribute has
three states. The on
keyword maps to the on state, and the
off keyword maps to
the off
state. The attribute may also be omitted. The missing value
default is the default
state.
The off state indicates either that the control's input data is particularly sensitive (for example the activation code for a nuclear weapon); or that it is a value that will never be reused (for example a one-time-key for a bank login) and the user will therefore have to explicitly enter the data each time, instead of being able to rely on the UA to prefill the value for him; or that the document provides its own autocomplete mechanism and does not want the user agent to provide autocompletion values.
Conversely, the on state indicates that the value is not particularly sensitive and the user can expect to be able to rely on his user agent to remember values he has entered for that control.
The default state
indicates that the user agent is to use the autocomplete attribute on the
element's form owner instead. (By default, the autocomplete attribute of
form elements is in the on state.)
Each input element has a resulting
autocompletion state, which is either on or off.
When an input element is in one of the following
conditions, the input element's resulting
autocompletion state is on; otherwise, the
input element's resulting autocompletion
state is off:
autocomplete
attribute is in the on state.autocomplete
attribute is in the default state,
and the element has no form owner.autocomplete
attribute is in the default state,
and the element's form owner's autocomplete attribute is in
the on
state.When an input element's resulting
autocompletion state is on, the user agent
may store the value entered by the user so that if the user returns
to the page, the UA can prefill the form. Otherwise, the user agent
should not remember the control's value, and should not offer past
values to the user.
In addition, if the resulting autocompletion state is off, values are reset when traversing the history.
The autocompletion mechanism must be implemented by the user agent acting as if the user had modified the element's value, and must be done at a time where the element is mutable (e.g. just after the element has been inserted into the document, or when the user agent stops parsing).
Banks frequently do not want UAs to prefill login information:
<p><label>Account: <input type="text" name="ac" autocomplete="off"></label></p> <p><label>PIN: <input type="password" name="pin" autocomplete="off"></label></p>
A user agent may allow the user to override the resulting autocompletion state and set it to always on, always allowing values to be remembered and prefilled, or always off, never remembering values. However, user agents should not allow users to trivially override the resulting autocompletion state to on, as there are significant security implications for the user if all values are always remembered, regardless of the site's preferences.
dirname attributeThe dirname
attribute, when it applies, is a form control dirname attribute.
In this example, a form contains a text field and a submission button:
<form action="addcomment.cgi" method=post> <p><label>Comment: <input type=text name="comment" dirname="comment.dir" required></label></p> <p><button name="mode" type=submit value="add">Post Comment</button></p> </form>
When the user submits the form, the user agent includes three fields, one called "comment", one called "comment.dir", and one called "mode"; so if the user types "Hello", the submission body might be something like:
comment=Hello&comment.dir=ltr&mode=add
If the user manually switches to a right-to-left writing direction and enters "مرحبًا", the submission body might be something like:
comment=%D9%85%D8%B1%D8%AD%D8%A8%D9%8B%D8%A7&comment.dir=rtl&mode=add
list attributeThe list
attribute is used to identify an element that lists predefined
options suggested to the user.
If present, its value must be the ID of a datalist element in
the same document.
The suggestions source
element is the first element in the document in tree
order to have an ID equal to
the value of the list
attribute, if that element is a datalist element. If
there is no list attribute, or
if there is no element with that ID,
or if the first element with that ID
is not a datalist element, then there is no suggestions source element.
If there is a suggestions source
element, then, when the user agent is allowing the user to
edit the input element's value, the user agent should offer
the suggestions represented by the suggestions source element to the
user in a manner suitable for the type of control used. The user
agent may use the suggestion's label to identify the suggestion
if appropriate.
How user selections of suggestions are handled depends on whether the element is a control accepting a single value only, or whether it accepts multiple values:
multiple attribute specified or
if the multiple attribute
does not applyWhen the user selects a suggestion, the input
element's value must be set
to the selected suggestion's value, as if the user had
written that value himself.
multiple attribute specified,
and the multiple attribute
does applyWhen the user selects a suggestion, the user agent must either
add a new entry to the input element's values, whose value is
the selected suggestion's value, or change an existing
entry in the input element's values to have the value
given by the selected suggestion's value, as if the user had
himself added an entry with that value, or edited an existing
entry to be that value. Which behavior is to be applied depends on
the user interface in a user-agent-defined manner.
If the list attribute does
not apply, there is no suggestions
source element.
This URL field offers some suggestions.
<label>Homepage: <input name=hp type=url list=hpurls></label> <datalist id=hpurls> <option value="http://www.google.com/" label="Google"> <option value="http://www.reddit.com/" label="Reddit"> </datalist>
Other URLs from the user's history might show also; this is up to the user agent.
This example demonstrates how to design a form that uses the autocompletion list feature while still degrading usefully in legacy user agents.
If the autocompletion list is merely an aid, and is not
important to the content, then simply using a datalist
element with children option elements is enough. To
prevent the values from being rendered in legacy user agents, they
need to be placed inside the value attribute instead of
inline.
<p> <label> Enter a breed: <input type="text" name="breed" list="breeds"> <datalist id="breeds"> <option value="Abyssinian"> <option value="Alpaca"> <!-- ... --> </datalist> </label> </p>
However, if the values need to be shown in legacy UAs, then
fallback content can be placed inside the datalist
element, as follows:
<p>
<label>
Enter a breed:
<input type="text" name="breed" list="breeds">
</label>
<datalist id="breeds">
<label>
or select one from the list:
<select name="breed">
<option value=""> (none selected)
<option>Abyssinian
<option>Alpaca
<!-- ... -->
</select>
</label>
</datalist>
</p>
The fallback content will only be shown in UAs that don't
support datalist. The options, on the other hand, will
be detected by all UAs, even though they are not children of the
datalist element.
Note that if an option element used in a
datalist is selected, it will be selected
by default by legacy UAs (because it affects the
select), but it will not have any effect on the
input element in UAs that support
datalist.
readonly attributeThe readonly
attribute is a boolean attribute that controls whether
or not the user can edit the form control. When
specified, the element is immutable.
Constraint validation: If the readonly attribute is specified
on an input element, the element is barred from
constraint validation.
In the following example, the existing product identifiers cannot be modified, but they are still displayed as part of the form, for consistency with the row representing a new product (where the identifier is not yet filled in).
<form action="products.cgi" method=post enctype="multipart/form-data"> <table> <tr> <th> Product ID <th> Product name <th> Price <th> Action <tr> <td> <input readonly name="1.pid" value="H412"> <td> <input required name="1.pname" value="Floor lamp Ulke"> <td> $<input required type=number min=0 step=0.01 name="1.pprice" value="49.99"> <td> <button formnovalidate name="action" value="delete:1">Delete</button> <tr> <td> <input readonly name="2.pid" value="FG28"> <td> <input required name="2.pname" value="Table lamp Ulke"> <td> $<input required type=number min=0 step=0.01 name="2.pprice" value="24.99"> <td> <button formnovalidate name="action" value="delete:2">Delete</button> <tr> <td> <input required name="3.pid" value="" pattern="[A-Z0-9]+"> <td> <input required name="3.pname" value=""> <td> $<input required type=number min=0 step=0.01 name="3.pprice" value=""> <td> <button formnovalidate name="action" value="delete:3">Delete</button> </table> <p> <button formnovalidate name="action" value="add">Add</button> </p> <p> <button name="action" value="update">Save</button> </p> </form>
size attributeThe size
attribute gives the number of characters that, in a visual
rendering, the user agent is to allow the user to see while editing
the element's value.
The size attribute, if
specified, must have a value that is a valid non-negative
integer greater than zero.
If the attribute is present, then its value must be parsed using the rules for parsing non-negative integers, and if the result is a number greater than zero, then the user agent should ensure that at least that many characters are visible.
The size IDL attribute is
limited to only non-negative numbers greater than
zero and has a default value of 20.
required attributeThe required
attribute is a boolean attribute. When specified, the
element is required.
Constraint validation: If the element is required, and its value IDL attribute applies and is in
the mode value, and the
element is mutable, and the
element's value is the empty
string, then the element is suffering from being
missing.
The following form has two required fields, one for an e-mail address and one for a password. It also has a third field that is only considered valid if the user types the same password in the password field and this third field.
<h1>Create new account</h1>
<form action="/newaccount" method=post
oninput="up2.setCustomValidity(up2.value != up.value ? 'Passwords do not match.' : '')">
<p>
<label for="username">E-mail address:</label>
<input id="username" type=email required name=un>
<p>
<label for="password1">Password:</label>
<input id="password1" type=password required name=up>
<p>
<label for="password2">Confirm password:</label>
<input id="password2" type=password name=up2>
<p>
<input type=submit value="Create account">
</form>
multiple attributeThe multiple
attribute is a boolean attribute that indicates whether
the user is to be allowed to specify more than one value.
The following extract shows how an e-mail client's "Cc" field could accept multiple e-mail addresses.
<label>Cc: <input type=email multiple name=cc></label>
If the user had, amongst many friends in his user contacts database, two friends "Arthur Dent" (with address "art@example.net") and "Adam Josh" (with address "adamjosh@example.net"), then, after the user has typed "a", the user agent might suggest these two e-mail addresses to the user.

The page could also link in the user's contacts database from the site:
<label>Cc: <input type=email multiple name=cc list=contacts></label> ... <datalist id="contacts"> <option value="hedral@damowmow.com"> <option value="pillar@example.com"> <option value="astrophy@cute.example"> <option value="astronomy@science.example.org"> </datalist>
Suppose the user had entered "bob@example.net" into this text
field, and then started typing a second e-mail address starting
with "a". The user agent might show both the two friends mentioned
earlier, as well as the "astrophy" and "astronomy" values given in
the datalist element.

The following extract shows how an e-mail client's "Attachments" field could accept multiple files for upload.
<label>Attachments: <input type=file multiple name=att></label>
maxlength attributeThe maxlength
attribute, when it applies, is a form control maxlength attribute
controlled by the input element's dirty value
flag.
If the input element has a maximum allowed
value length, then the code-point length of the
value of the element's value
attribute must be equal to or less than the element's maximum
allowed value length.
The following extract shows how a messaging client's text entry could be arbitrarily restricted to a fixed number of characters, thus forcing any conversation through this medium to be terse and discouraging intelligent discourse.
<label>What are you doing? <input name=status maxlength=140></label>
pattern attributeThe pattern
attribute specifies a regular expression against which the control's
value, or, when the multiple attribute applies and is
set, the control's values, are to be
checked.
If specified, the attribute's value must match the JavaScript Pattern production. [ECMA262]
If an input element has a pattern attribute specified, and
the attribute's value, when compiled as a JavaScript regular
expression with the global, ignoreCase, and multiline
flags disabled (see ECMA262 Edition 5, sections 15.10.7.2
through 15.10.7.4), compiles successfully, then the resulting
regular expression is the element's compiled pattern regular
expression. If the element has no such attribute, or if the
value doesn't compile successfully, then the element has no
compiled pattern regular expression. [ECMA262]
Constraint validation: If the element's value is not the empty string, and
either the element's multiple attribute is not
specified or it does not apply to the input element
given its type attribute's
current state, and the element has a compiled pattern regular
expression but that regular expression does not match the
entirety of the element's value, then the element is
suffering from a pattern mismatch.
Constraint validation: If the element's value is not the empty string, and
the element's multiple
attribute is specified and applies to the input
element, and the element has a compiled pattern regular
expression but that regular expression does not match the
entirety of each of the element's values, then the element
is suffering from a pattern mismatch.
The compiled pattern regular expression, when matched against a string, must have its start anchored to the start of the string and its end anchored to the end of the string.
This implies that the regular expression language
used for this attribute is the same as that used in JavaScript,
except that the pattern
attribute is matched against the entire value, not just any subset
(somewhat as if it implied a ^(?: at the start
of the pattern and a )$ at the end).
When an input element has a pattern attribute specified,
authors should include a title
attribute to give a description of the pattern. User agents may use
the contents of this attribute, if it is present, when informing the
user that the pattern is not matched, or at any other suitable time,
such as in a tooltip or read out by assistive technology when the
control gains focus.
For example, the following snippet:
<label> Part number:
<input pattern="[0-9][A-Z]{3}" name="part"
title="A part number is a digit followed by three uppercase letters."/>
</label>
...could cause the UA to display an alert such as:
A part number is a digit followed by three uppercase letters. You cannot submit this form when the field is incorrect.
When a control has a pattern attribute, the title attribute, if used, must describe
the pattern. Additional information could also be included, so long
as it assists the user in filling in the control. Otherwise,
assistive technology would be impaired.
For instance, if the title attribute contained the caption of the control, assistive technology could end up saying something like The text you have entered does not match the required pattern. Birthday, which is not useful.
UAs may still show the title in
non-error situations (for example, as a tooltip when hovering over
the control), so authors should be careful not to word titles as if an error has necessarily
occurred.
min and max attributesThe min and max attributes indicate
the allowed range of values for the element.
Their syntax is defined by the section that defines the type attribute's current state.
If the element has a min
attribute, and the result of applying the algorithm to convert a
string to a number to the value of the min attribute is a number, then that
number is the element's minimum; otherwise, if the type attribute's current state
defines a default
minimum, then that is the minimum; otherwise, the element has
no minimum.
Constraint validation: When the element has a minimum, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and the number obtained from that algorithm is less than the minimum, the element is suffering from an underflow.
The min attribute also
defines the step
base.
If the element has a max
attribute, and the result of applying the algorithm to convert a
string to a number to the value of the max attribute is a number, then that
number is the element's maximum; otherwise, if the type attribute's current state
defines a default
maximum, then that is the maximum; otherwise, the element has
no maximum.
Constraint validation: When the element has a maximum, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and the number obtained from that algorithm is more than the maximum, the element is suffering from an overflow.
The max attribute's value
(the maximum) must not be
less than the min attribute's
value (its minimum).
If an element has a maximum that is less than its minimum, then so long as the element has a value, it will either be suffering from an underflow or suffering from an overflow.
An element has range limitations if it has a defined minimum or a defined maximum.
The following date control limits input to dates that are before the 1980s:
<input name=bday type=date max="1979-12-31">
The following number control limits input to whole numbers greater than zero:
<input name=quantity required type=number min=1 value=1>
step attributeThe step
attribute indicates the granularity that is expected (and required)
of the value, by limiting the
allowed values. The section that defines the
type attribute's current state
also defines the default
step, the step scale
factor, and in some cases the default step base,
which are used in processing the attribute as described
below.
The step attribute, if
specified, must either have a value that is a valid floating
point number that parses to a number that is greater than
zero, or must have a value that is an ASCII
case-insensitive match for the string "any".
The attribute provides the allowed value step for the element, as follows:
any", then there is no allowed value step.The step base is the
result of applying the algorithm to convert a
string to a number to the value of the min attribute, unless the element does
not have a min attribute
specified or the result of applying that algorithm is an error, in
which case the step base
is the default step
base, if one is defined, or zero, if not.
Constraint validation: When the element has an allowed value step, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and that number subtracted from the step base is not an integral multiple of the allowed value step, the element is suffering from a step mismatch.
The following range control only accepts values in the range 0..1, and allows 256 steps in that range:
<input name=opacity type=range min=0 max=1 step=0.00392156863>
The following control allows any time in the day to be selected, with any accuracy (e.g. thousandth-of-a-second accuracy or more):
<input name=favtime type=time step=any>
Normally, time controls are limited to an accuracy of one minute.
placeholder attributeThe placeholder
attribute represents a short hint (a word or short phrase)
intended to aid the user with data entry. A hint could be a sample
value or a brief description of the expected format. The attribute,
if specified, must have a value that contains no U+000A LINE FEED
(LF) or U+000D CARRIAGE RETURN (CR) characters.
For a longer hint or other advisory text, the title attribute is more appropriate.
The placeholder
attribute should not be used as an alternative to a
label.
User agents should present this hint to the user, after having stripped line breaks from it, when the element's value is the empty string and/or the control is not focused (e.g. by displaying it inside a blank unfocused control and hiding it otherwise).
Here is an example of a mail configuration user interface that
uses the placeholder
attribute:
<fieldset> <legend>Mail Account</legend> <p><label>Name: <input type="text" name="fullname" placeholder="John Ratzenberger"></label></p> <p><label>Address: <input type="email" name="address" placeholder="john@example.net"></label></p> <p><label>Password: <input type="password" name="password"></label></p> <p><label>Description: <input type="text" name="desc" placeholder="My Email Account"></label></p> </fieldset>
input element APIsvalue [ = value ]Returns the current value of the form control.
Can be set, to change the value.
Throws an InvalidStateError exception if it is
set to any value other than the empty string when the control is a
file upload control.
checked [ = value ]Returns the current checkedness of the form control.
Can be set, to change the checkedness.
filesReturns a FileList object listing the selected files of
the form control.
Returns null if the control isn't a file control.
valueAsDate [ = value ]Returns a Date object representing the form
control's value, if
applicable; otherwise, returns null.
Can be set, to change the value.
Throws an InvalidStateError exception if the
control isn't date- or time-based.
valueAsNumber [ = value ]Returns a number representing the form control's value, if applicable; otherwise, returns NaN.
Can be set, to change the value.
Throws an InvalidStateError exception if the
control is neither date- or time-based nor numeric.
stepUp( [ n ] )stepDown( [ n ] )Changes the form control's value by the value given in the
step attribute, multiplied by
n. The default value for n
is 1.
Throws InvalidStateError exception if the control
is neither date- or time-based nor numeric, if the step attribute's value is "any", if the current value could not be parsed, or if
stepping in the given direction by the given amount would take the
value out of range.
listReturns the datalist element indicated by the
list attribute.
The value IDL
attribute allows scripts to manipulate the value of an input
element. The attribute is in one of the following modes, which
define its behavior:
On getting, it must return the current value of the element. On setting,
it must set the element's value to the new value, set the
element's dirty value
flag to true, invoke the value sanitization
algorithm, if the element's type attribute's current state
defines one, and then, if the element has a text entry cursor
position, should move the text entry cursor position to the end of
the text field, unselecting any selected text and resetting the
selection direction to none.
On getting, if the element has a value attribute, it must return
that attribute's value; otherwise, it must return the empty
string. On setting, it must set the element's value attribute to the new
value.
On getting, if the element has a value attribute, it must return
that attribute's value; otherwise, it must return the string
"on". On setting, it must set the element's
value attribute to the new
value.
On getting, it must return the string "C:\fakepath\" followed by the filename of the
first file in the list of selected files, if
any, or the empty string if the list is empty. On setting, if the
new value is the empty string, it must empty the list of selected files;
otherwise, it must throw an InvalidStateError
exception.
This "fakepath" requirement is a sad accident of history. See the example in the File Upload state section for more information.
The checked IDL
attribute allows scripts to manipulate the checkedness of an
input element. On getting, it must return the current
checkedness of the element;
and on setting, it must set the element's checkedness to the new value and
set the element's dirty checkedness
flag to true.
The files IDL
attribute allows scripts to access the element's selected files. On
getting, if the IDL attribute applies, it must return a
FileList object that represents the current selected files. The
same object must be returned until the list of selected files
changes. If the IDL attribute does not apply, then it must instead
return null. [FILEAPI]
The valueAsDate IDL
attribute represents the value of the element, interpreted
as a date.
On getting, if the valueAsDate attribute does not
apply, as defined for the input element's type attribute's current state, then
return null. Otherwise, run the algorithm to convert a
string to a Date object defined for that state;
if the algorithm returned a Date object, then return
it, otherwise, return null.
On setting, if the valueAsDate attribute does not
apply, as defined for the input element's type attribute's current state, then
throw an InvalidStateError exception; otherwise, if the
new value is null or a Date object representing the NaN
time value, then set the value
of the element to the empty string; otherwise, run the algorithm to convert a
Date object to a string, as defined for that
state, on the new value, and set the value of the element to resulting
string.
The valueAsNumber IDL
attribute represents the value
of the element, interpreted as a number.
On getting, if the valueAsNumber attribute does
not apply, as defined for the input element's type attribute's current state, then
return a Not-a-Number (NaN) value. Otherwise, if the valueAsDate
attribute applies, run the algorithm to convert a
string to a Date object defined for that state;
if the algorithm returned a Date object, then return
the time value of the object (the number of milliseconds from
midnight UTC the morning of 1970-01-01 to the time represented by
the Date object), otherwise, return a Not-a-Number
(NaN) value. Otherwise, run the algorithm to convert a
string to a number defined for that state; if the algorithm
returned a number, then return it, otherwise, return a Not-a-Number
(NaN) value.
On setting, if the valueAsNumber attribute does
not apply, as defined for the input element's type attribute's current state, then
throw an InvalidStateError exception. Otherwise, if
the valueAsDate
attribute applies, run the algorithm to convert a
Date object to a string defined for that state,
passing it a Date object whose time value is the
new value, and set the value
of the element to resulting string. Otherwise, run the algorithm to convert a
number to a string, as defined for that state, on the new
value, and set the value of
the element to resulting string.
The stepDown(n) and stepUp(n) methods, when invoked, must run the
following algorithm:
If the stepDown() and
stepUp() methods do not
apply, as defined for the input element's type attribute's current state, then
throw an InvalidStateError exception, and abort these
steps.
If the element has no allowed value step, then throw an
InvalidStateError exception, and abort these
steps.
If applying the algorithm to convert a
string to a number to the string given by the element's
value results in an error,
then throw an InvalidStateError exception, and abort
these steps; otherwise, let value be the result
of that algorithm.
Let n be the argument, or 1 if the argument was omitted.
Let delta be the allowed value step multiplied by n.
If the method invoked was the stepDown() method, negate delta.
Let value be the result of adding delta to value.
If the element has a minimum, and the value is less than that minimum, then throw a
InvalidStateError exception.
If the element has a maximum, and the value is greater than that maximum, then throw a
InvalidStateError exception.
Let value as string be the result of
running the algorithm to convert a
number to a string, as defined for the input
element's type attribute's
current state, on value.
Set the value of the element to value as string.
The list IDL
attribute must return the current suggestions source element, if
any, or null otherwise.
When the input
event applies, any time the user causes the element's value to change, the user agent must
queue a task to fire a simple event that
bubbles named input at the
input element. User agents may wait for a suitable
break in the user's interaction before queuing the task; for
example, a user agent could wait for the user to have not hit a key
for 100ms, so as to only fire the event when the user pauses,
instead of continuously for each keystroke.
Examples of a user changing the element's value would include the user typing into a text field, pasting a new value into the field, or undoing an edit in that field. Some user interactions do not cause changes to the value, e.g. hitting the "delete" key in an empty text field, or replacing some text in the field with text from the clipboard that happens to be exactly the same text.
When the change event applies,
if the element does not have an activation behavior
defined but uses a user interface that involves an explicit commit
action, then any time the user commits a change to the element's
value or list of selected files, the
user agent must queue a task to fire a simple
event that bubbles named change at the input
element.
An example of a user interface with a commit action would be a File Upload control that consists of a single button that brings up a file selection dialog: when the dialog is closed, if that the file selection changed as a result, then the user has committed a new file selection.
Another example of a user interface with a commit action would be a Date control that allows both text-based user input and user selection from a drop-down calendar: while text input might not have an explicit commit step, selecting a date from the drop down calendar and then dismissing the drop down would be a commit action.
When the user agent changes the element's value on behalf of the user (e.g. as part of a form prefilling feature), the user agent must follow these steps:
input event
applies, queue a task to fire a simple
event that bubbles named input at the input
element.change event
applies, queue a task to fire a simple
event that bubbles named change at the input
element.In addition, when the change event applies, change events can also be fired as part
of the element's activation behavior and as part of the
unfocusing steps.
The task source for these tasks is the user interaction task source.
button elementautofocusdisabledformformactionformenctypeformmethodformnovalidateformtargetnametypevalueinterface HTMLButtonElement : HTMLElement { attribute boolean autofocus; attribute boolean disabled; readonly attribute HTMLFormElement? form; attribute DOMString formAction; attribute DOMString formEnctype; attribute DOMString formMethod; attribute boolean formNoValidate; attribute DOMString formTarget; attribute DOMString name; attribute DOMString type; attribute DOMString value; readonly attribute boolean willValidate; readonly attribute ValidityState validity; readonly attribute DOMString validationMessage; boolean checkValidity(); void setCustomValidity(DOMString error); readonly attribute NodeList labels; };
The button element represents a
button. If the element is not disabled, then the user agent
should allow the user to activate the button.
The element is a button.
The type
attribute controls the behavior of the button when it is activated.
It is an enumerated attribute. The following table
lists the keywords and states for the attribute — the keywords
in the left column map to the states in the cell in the second
column on the same row as the keyword.
| Keyword | State | Brief description |
|---|---|---|
submit
| Submit Button | Submits the form. |
reset
| Reset Button | Resets the form. |
button
| Button | Does nothing. |
The missing value default is the Submit Button state.
If the type attribute is in
the Submit Button
state, the element is specifically a submit button.
Constraint validation: If the type attribute is in the Reset Button state or
the Button state,
the element is barred from constraint validation.
If the element is not disabled, the activation
behavior of the button element is to run the
steps defined in the following list for the current state of the
element's type attribute.
If the element has a form owner, the element
must submit the form
owner from the button element.
If the element has a form owner, the element must reset the form owner.
Do nothing.
The form attribute is used to
explicitly associate the button element with its
form owner. The name
attribute represents the element's name. The disabled attribute is used to make
the control non-interactive and to prevent its value from being
submitted. The autofocus
attribute controls focus. The formaction, formenctype, formmethod, formnovalidate, and formtarget attributes are
attributes for form submission.
The formnovalidate attribute can
be used to make submit buttons that do not trigger the constraint
validation.
The formaction, formenctype, formmethod, formnovalidate, and formtarget must not be specified
if the element's type
attribute is not in the Submit Button
state.
The value
attribute gives the element's value for the purposes of form
submission. The element's value is the value of the element's
value attribute, if there is
one, or the empty string otherwise.
A button (and its value) is only included in the form submission if the button itself was used to initiate the form submission.
The value IDL
attribute must reflect the content attribute of the
same name.
The type IDL
attribute must reflect the content attribute of the
same name, limited to only known values.
The willValidate, validity, and validationMessage
attributes, and the checkValidity() and setCustomValidity()
methods, are part of the constraint validation API. The
labels attribute provides a list
of the element's labels. The autofocus, disabled, form, and name IDL attributes are part of the
element's forms API.
The following button is labeled "Show hint" and pops up a dialog box when activated:
<button type=button
onclick="alert('This 15-20 minute piece was composed by George Gershwin.')">
Show hint
</button>
select elementoption or optgroup elements.autofocusdisabledformmultiplenamerequiredsizeinterface HTMLSelectElement : HTMLElement { attribute boolean autofocus; attribute boolean disabled; readonly attribute HTMLFormElement? form; attribute boolean multiple; attribute DOMString name; attribute boolean required; attribute unsigned long size; readonly attribute DOMString type; readonly attribute HTMLOptionsCollection options; attribute unsigned long length; getter Element item(unsigned long index); object namedItem(DOMString name); void add(HTMLOptionElement element, optional HTMLElement? before); void add(HTMLOptGroupElement element, optional HTMLElement? before); void add(HTMLOptionElement element, long before); void add(HTMLOptGroupElement element, long before); void remove(long index); setter creator void (unsigned long index, HTMLOptionElement option); readonly attribute HTMLCollection selectedOptions; attribute long selectedIndex; attribute DOMString value; readonly attribute boolean willValidate; readonly attribute ValidityState validity; readonly attribute DOMString validationMessage; boolean checkValidity(); void setCustomValidity(DOMString error); readonly attribute NodeList labels; };
The select element represents a control for
selecting amongst a set of options.
The multiple
attribute is a boolean attribute. If the attribute is
present, then the select element
represents a control for selecting zero or more options
from the list of
options. If the attribute is absent, then the
select element represents a control for
selecting a single option from the list of options.
The size
attribute gives the number of options to show to the user. The size attribute, if specified, must
have a value that is a valid non-negative integer
greater than zero.
The display size of a
select element is the result of applying the
rules for parsing non-negative integers to the value of
element's size attribute, if
it has one and parsing it is successful. If applying those rules to
the attribute's value is not successful, or if the size attribute is absent, then the
element's display size is 4
if the element's multiple
content attribute is present, and 1 otherwise.
The list of options
for a select element consists of all the
option element children of the select
element, and all the option element children of all the
optgroup element children of the select
element, in tree order.
The required
attribute is a boolean attribute. When specified, the
user will be required to select a value before submitting the
form.
If a select element has a required attribute specified,
does not have a multiple
attribute specified, and has a display size of 1;
and if the value of the
first option element in the select
element's list of
options (if any) is the empty string, and that
option element's parent node is the select
element (and not an optgroup element), then that
option is the select element's
placeholder label option.
If a select element has a required attribute specified,
does not have a multiple
attribute specified, and has a display size of 1,
then the select element must have a placeholder
label option.
Constraint validation: If the element has its
required attribute
specified, and either none of the option elements in
the select element's list of options have their
selectedness set to
true, or the only option element in the
select element's list of options with its
selectedness set to
true is the placeholder label option, then the element
is suffering from being missing.
If the multiple
attribute is absent, and the element is not disabled, then the user agent
should allow the user to pick an option element in its
list of options that
is itself not disabled.
Upon this option element being picked (either through a click, or
through unfocusing the element after changing its value, or through
a menu command, or through any
other mechanism), and before the relevant user interaction event
is queued (e.g. before the
click event), the user agent must
set the selectedness of the
picked option element to true and then queue a
task to fire a simple event that bubbles named
change at the select
element, using the user interaction task source as the
task source.
If the multiple
attribute is absent, whenever an option element in the
select element's list of options has its
selectedness set to
true, and whenever an option element with its selectedness set to true
is added to the select element's list of options, the user
agent must set the selectedness of all the
other option element in its list of options to
false.
If the multiple
attribute is absent and the element's display size is greater than 1,
then the user agent should also allow the user to request that the
option whose selectedness is true, if
any, be unselected. Upon this request being conveyed to the user
agent, and before the relevant user interaction event is queued (e.g. before the click event), the user agent must set the
selectedness of
that option element to false and then queue a
task to fire a simple event that bubbles named
change at the select
element, using the user interaction task source as the
task source.
If the multiple
attribute is absent and the element's display size is 1, then whenever
there are no option elements in the select
element's list of
options that have their selectedness set to true,
the user agent must set the selectedness of the first
option element in the list of options in
tree order that is not disabled, if any, to
true.
If the multiple
attribute is present, and the element is not disabled, then the user agent
should allow the user to toggle the selectedness of the
option elements in its list of options that are
themselves not disabled
(either through a click, or through a menu command, or any other mechanism).
Upon the selectedness of one or
more option elements being changed by the user, and
before the relevant user interaction event is queued (e.g. before a related click event), the user agent must
queue a task to fire a simple event that
bubbles named change at the
select element, using the user interaction task
source as the task source.
The reset
algorithm for select elements is to go through
all the option elements in the element's list of options, and set
their selectedness
to true if the option element has a selected attribute, and false
otherwise.
The form attribute is used to
explicitly associate the select element with its
form owner. The name
attribute represents the element's name. The disabled attribute is used to make
the control non-interactive and to prevent its value from being
submitted. The autofocus
attribute controls focus.
typeReturns "select-multiple" if the element
has a multiple
attribute, and "select-one"
otherwise.
optionsReturns an HTMLOptionsCollection of the list of options.
length [ = value ]Returns the number of elements in the list of options.
When set to a smaller number, truncates the number of option elements in the select.
When set to a greater number, adds new blank option elements to the select.
item(index)Returns the item with index index from the list of options. The items are sorted in tree order.
namedItem(name)Returns the item with ID or name name from the list of options.
If there are multiple matching items, then a NodeList object containing all those elements is returned.
Returns null if no element with that ID could be found.
add(element [, before ])Inserts element before the node given by before.
The before argument can be a number, in which case element is inserted before the item with that number, or an element from the list of options, in which case element is inserted before that element.
If before is omitted, null, or a number out of range, then element will be added at the end of the list.
This method will throw a HierarchyRequestError
exception if element is an ancestor of the
element into which it is to be inserted.
selectedOptionsReturns an HTMLCollection of the list of options that are
selected.
selectedIndex [ = value ]Returns the index of the first selected item, if any, or −1 if there is no selected item.
Can be set, to change the selection.
value [ = value ]Returns the value of the first selected item, if any, or the empty string if there is no selected item.
Can be set, to change the selection.
The type IDL
attribute, on getting, must return the string "select-one" if the multiple attribute is absent,
and the string "select-multiple" if the multiple attribute is
present.
The options
IDL attribute must return an HTMLOptionsCollection
rooted at the select node, whose filter matches the
elements in the list of
options.
The options collection is
also mirrored on the HTMLSelectElement object. The
supported property indices at any instant are the
indices supported by the object returned by the options attribute at that
instant.
The length IDL
attribute must return the number of nodes represented by the options collection. On setting, it
must act like the attribute of the same name on the options collection.
The item(index) method must return the value
returned by the method of the same name on the options collection, when invoked
with the same argument.
The namedItem(name) method must return the value
returned by the method of the same name on the options collection, when invoked
with the same argument.
When the user agent is to set the value of a new indexed
property for a given property index index
to a new value value, it must instead set the value of a new
indexed property with the given property index index to the new value value on the
options collection.
Similarly, the add() and remove() methods must
act like their namesake methods on that same options collection.
The selectedOptions
IDL attribute must return an HTMLCollection rooted at
the select node, whose filter matches the elements in
the list of options
that have their selectedness set to
true.
The selectedIndex
IDL attribute, on getting, must return the index of the first
option element in the list of options in
tree order that has its selectedness set to true,
if any. If there isn't one, then it must return −1.
On setting, the selectedIndex attribute must
set the selectedness of all the
option elements in the list of options to false,
and then the option element in the list of options whose
index is the given new
value, if any, must have its selectedness set to
true.
The value IDL
attribute, on getting, must return the value of the first
option element in the list of options in
tree order that has its selectedness set to true,
if any. If there isn't one, then it must return the empty
string.
On setting, the value
attribute must set the selectedness of all the
option elements in the list of options to false,
and then the first option element in the list of options, in
tree order, whose value is equal to the given new
value, if any, must have its selectedness set to
true.
The multiple,
required, and
size IDL attributes
must reflect the respective content attributes of the
same name. The size IDL
attribute has a default value of zero.
For historical reasons, the default value of the
size IDL attribute does not
return the actual size used, which, in the absence of the size content attribute, is either 1
or 4 depending on the presence of the multiple attribute.
The willValidate, validity, and validationMessage
attributes, and the checkValidity() and setCustomValidity()
methods, are part of the constraint validation API. The
labels attribute provides a list
of the element's labels. The autofocus, disabled, form, and name IDL attributes are part of the
element's forms API.
The following example shows how a select element
can be used to offer the user with a set of options from which the
user can select a single option. The default option is
preselected.
<p> <label for="unittype">Select unit type:</label> <select id="unittype" name="unittype"> <option value="1"> Miner </option> <option value="2"> Puffer </option> <option value="3" selected> Snipey </option> <option value="4"> Max </option> <option value="5"> Firebot </option> </select> </p>
When there is no default option, a placeholder can be used instead:
<select name="unittype" required> <option value=""> Select unit type </option> <option value="1"> Miner </option> <option value="2"> Puffer </option> <option value="3"> Snipey </option> <option value="4"> Max </option> <option value="5"> Firebot </option> </select>
Here, the user is offered a set of options from which he can select any number. By default, all five options are selected.
<p> <label for="allowedunits">Select unit types to enable on this map:</label> <select id="allowedunits" name="allowedunits" multiple> <option value="1" selected> Miner </option> <option value="2" selected> Puffer </option> <option value="3" selected> Snipey </option> <option value="4" selected> Max </option> <option value="5" selected> Firebot </option> </select> </p>
Sometimes, a user has to select one or more items. This example shows such an interface.
<p>Select the songs from that you would like on your Act II Mix Tape:</p> <select multiple required name="act2"> <option value="s1">It Sucks to Be Me (Reprise) <option value="s2">There is Life Outside Your Apartment <option value="s3">The More You Ruv Someone <option value="s4">Schadenfreude <option value="s5">I Wish I Could Go Back to College <option value="s6">The Money Song <option value="s7">School for Monsters <option value="s8">The Money Song (Reprise) <option value="s9">There's a Fine, Fine Line (Reprise) <option value="s10">What Do You Do With a B.A. in English? (Reprise) <option value="s11">For Now </select>
datalist elementoption elements.interface HTMLDataListElement : HTMLElement { readonly attribute HTMLCollection options; };
The datalist element represents a set of
option elements that represent predefined options for
other controls. The contents of the element represents fallback
content for legacy user agents, intermixed with option
elements that represent the predefined options. In the rendering,
the datalist element represents
nothing and it, along with its children, should
be hidden.
The datalist element is hooked up to an
input element using the list attribute on the
input element.
Each option element that is a descendant of the
datalist element, that is not disabled, and whose value is a string that isn't the
empty string, represents a suggestion. Each suggestion has a value and a label.
optionsReturns an HTMLCollection of the options elements of the table.
The options
IDL attribute must return an HTMLCollection rooted at
the datalist node, whose filter matches
option elements.
Constraint validation: If an element has a
datalist element ancestor, it is barred from
constraint validation.
optgroup elementselect element.option elements.disabledlabelinterface HTMLOptGroupElement : HTMLElement { attribute boolean disabled; attribute DOMString label; };
The optgroup element represents a group of
option elements with a common label.
The element's group of option elements consists of
the option elements that are children of the
optgroup element.
When showing option elements in select
elements, user agents should show the option elements
of such groups as being related to each other and separate from
other option elements.
The disabled attribute
is a boolean attribute and can be used to disable a group of
option elements together.
The label
attribute must be specified. Its value gives the name of the group,
for the purposes of the user interface. User
agents should use this attribute's value when labelling the group of
option elements in a select
element.
The disabled and label attributes must
reflect the respective content attributes of the same
name.
The following snippet shows how a set of lessons from three
courses could be offered in a select drop-down
widget:
<form action="courseselector.dll" method="get">
<p>Which course would you like to watch today?
<p><label>Course:
<select name="c">
<optgroup label="8.01 Physics I: Classical Mechanics">
<option value="8.01.1">Lecture 01: Powers of Ten
<option value="8.01.2">Lecture 02: 1D Kinematics
<option value="8.01.3">Lecture 03: Vectors
<optgroup label="8.02 Electricity and Magnestism">
<option value="8.02.1">Lecture 01: What holds our world together?
<option value="8.02.2">Lecture 02: Electric Field
<option value="8.02.3">Lecture 03: Electric Flux
<optgroup label="8.03 Physics III: Vibrations and Waves">
<option value="8.03.1">Lecture 01: Periodic Phenomenon
<option value="8.03.2">Lecture 02: Beats
<option value="8.03.3">Lecture 03: Forced Oscillations with Damping
</select>
</label>
<p><input type=submit value="▶ Play">
</form>
option elementselect element.datalist element.optgroup element.disabledlabelselectedvalue[NamedConstructor=Option(), NamedConstructor=Option(DOMString text), NamedConstructor=Option(DOMString text, DOMString value), NamedConstructor=Option(DOMString text, DOMString value, boolean defaultSelected), NamedConstructor=Option(DOMString text, DOMString value, boolean defaultSelected, boolean selected)] interface HTMLOptionElement : HTMLElement { attribute boolean disabled; readonly attribute HTMLFormElement? form; attribute DOMString label; attribute boolean defaultSelected; attribute boolean selected; attribute DOMString value; attribute DOMString text; readonly attribute long index; };
The option element represents an option
in a select element or as part of a list of suggestions
in a datalist element.
In certain circumstances described in the definition of the
select element, an option element can be a
select element's placeholder label option.
A placeholder label option does not represent an actual
option, but instead represents a label for the select
control.
The disabled
attribute is a boolean attribute. An
option element is disabled if its disabled attribute is present or
if it is a child of an optgroup element whose disabled attribute is
present.
An option element that is disabled must prevent any click events that are queued on the user interaction task
source from being dispatched on the element.
The label
attribute provides a label for element. The label of an option
element is the value of the label content attribute, if there
is one, or, if there is not, the value of the element's text IDL attribute.
The value
attribute provides a value for element. The value of an option
element is the value of the value content attribute, if there
is one, or, if there is not, the value of the element's text IDL attribute.
The selected
attribute is a boolean attribute. It represents the
default selectedness of the
element.
The selectedness
of an option element is a boolean state, initially
false. Except where otherwise
specified, when the element is created, its selectedness must be set
to true if the element has a selected attribute. Whenever an
option element's selected attribute is added, its
selectedness must
be set to true.
The Option()
constructor with three or fewer arguments overrides the initial
state of the selectedness state to
always be false even if the third argument is true (implying that a
selected attribute is to
be set). The fourth argument can be used to explicitly set the
initial selectedness state when
using the constructor.
A select element whose multiple attribute is not
specified must not have more than one descendant option
element with its selected
attribute set.
An option element's index is the number of
option element that are in the same list of options but that
come before it in tree order. If the
option element is not in a list of options, then the
option element's index is zero.
selectedReturns true if the element is selected, and false otherwise.
Can be set, to override the current state of the element.
indexReturns the index of the element in its select
element's options
list.
formReturns the element's form element, if any, or
null otherwise.
textSame as textContent, except that spaces are collapsed.
Option( [ text [, value [, defaultSelected [, selected ] ] ] ] )Returns a new option element.
The text argument sets the contents of the element.
The value argument sets the value attribute.
The defaultSelected argument sets the selected attribute.
The selected argument sets whether or not the element is selected. If it is omitted, even if the defaultSelected argument is true, the element is not selected.
The disabled
IDL attribute must reflect the content attribute of the
same name. The defaultSelected
IDL attribute must reflect the selected content attribute.
The label IDL
attribute, on getting, must return the element's label. On setting, the element's
label content attribute must
be set to the new value.
The value IDL
attribute, on getting, must return the element's value. On setting, the element's
value content attribute must
be set to the new value.
The selected
IDL attribute, on getting, must return true if the element's selectedness is true, and
false otherwise. On setting, it must set the element's selectedness to the new
value.
The index IDL
attribute must return the element's index.
The text IDL
attribute, on getting, must return the value of the
textContent IDL attribute on the element, with leading and trailing
whitespace stripped, and with any sequences of two or more
space characters replaced by a
single U+0020 SPACE character. On setting, it must act as if the
textContent IDL attribute on the element had been set
to the new value.
The form IDL
attribute's behavior depends on whether the option
element is in a select element or not. If the
option has a select element as its parent,
or has an optgroup element as its parent and that
optgroup element has a select element as
its parent, then the form IDL
attribute must return the same value as the form IDL attribute on that
select element. Otherwise, it must return null.
Several constructors are provided for creating
HTMLOptionElement objects (in addition to the factory
methods from DOM Core such as createElement()): Option(), Option(text), Option(text, value), Option(text, value, defaultSelected), and Option(text, value, defaultSelected, selected). When invoked as constructors,
these must return a new HTMLOptionElement object (a new
option element). If the text
argument is present, the new object must have as its only child a
Text node whose data is the value of that argument. If
the value argument is present, the new object
must have a value attribute
set with the value of the argument as its value. If the defaultSelected argument is present and true, the new
object must have a selected attribute set with no
value. If the selected argument is present and
true, the new object must have its selectedness set to true;
otherwise the fourth argument is absent or false, and the selectedness must be set
to false, even if the defaultSelected argument
is present and true. The element's document must be the active
document of the browsing context of the
Window object on which the interface object of the
invoked constructor is found.
textarea elementautofocuscolsdirnamedisabledformmaxlengthnameplaceholderreadonlyrequiredrowswrapinterface HTMLTextAreaElement : HTMLElement { attribute boolean autofocus; attribute unsigned long cols; attribute DOMString dirName; attribute boolean disabled; readonly attribute HTMLFormElement? form; attribute long maxLength; attribute DOMString name; attribute DOMString placeholder; attribute boolean readOnly; attribute boolean required; attribute unsigned long rows; attribute DOMString wrap; readonly attribute DOMString type; attribute DOMString defaultValue; attribute DOMString value; readonly attribute unsigned long textLength; readonly attribute boolean willValidate; readonly attribute ValidityState validity; readonly attribute DOMString validationMessage; boolean checkValidity(); void setCustomValidity(DOMString error); readonly attribute NodeList labels; void select(); attribute unsigned long selectionStart; attribute unsigned long selectionEnd; attribute DOMString selectionDirection; void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction); };
The textarea element represents a
multiline plain text edit control for the
element's raw
value. The contents of the control represent the
control's default value.
The raw value of
a textarea control must be initially the empty
string.
A newline in a textarea element, and in its raw value, should separate
paragraphs for the purposes of the Unicode bidirectional algorithm.
This requirement may be implemented indirectly through the style
layer. For example, an HTML+CSS user agent could implement these
requirements by implementing the CSS 'unicode-bidi' property. [BIDI] [CSS]
The readonly attribute
is a boolean attribute used to control whether the text
can be edited by the user or not.
Constraint validation: If the readonly attribute is
specified on a textarea element, the element is
barred from constraint validation.
A textarea element is mutable if it is neither
disabled nor has a readonly attribute
specified.
When a textarea is mutable, its raw value should be
editable by the user: the user agent should allow the user to edit,
insert, and remove text, and to insert and remove line breaks in the
form of U+000A LINE FEED (LF) characters. Any time the user causes
the element's raw
value to change, the user agent must queue a
task to fire a simple event that bubbles named
input at the textarea
element. User agents may wait for a suitable break in the user's
interaction before queuing the task; for example, a user agent could
wait for the user to have not hit a key for 100ms, so as to only
fire the event when the user pauses, instead of continuously for
each keystroke.
A textarea element has a dirty value flag, which must be
initially set to false, and must be set to true whenever the user
interacts with the control in a way that changes the raw value.
When the textarea element's textContent
IDL attribute changes value, if the element's dirty value flag is false,
then the element's raw
value must be set to the value of the element's
textContent IDL attribute.
The reset
algorithm for textarea elements is to set the
element's value to
the value of the element's textContent IDL
attribute.
If the element is mutable, the user agent should allow the user to change the writing direction of the element, setting it either to a left-to-right writing direction or a right-to-left writing direction. If the user does so, the user agent must then run the following steps:
Set the element's dir
attribute to "ltr" if the user
selected a left-to-right writing direction, and "rtl" if the user selected a
right-to-left writing direction.
Queue a task to fire a simple
event that bubbles named input at the textarea
element.
The cols
attribute specifies the expected maximum number of characters per
line. If the cols attribute
is specified, its value must be a valid non-negative
integer greater than zero. If applying the
rules for parsing non-negative integers to the
attribute's value results in a number greater than zero, then the
element's character
width is that value; otherwise, it is 20.
The user agent may use the textarea element's character width as a hint to
the user as to how many characters the server prefers per line
(e.g. for visual user agents by making the width of the control be
that many characters). In visual renderings, the user agent should
wrap the user's input in the rendering so that each line is no wider
than this number of characters.
The rows
attribute specifies the number of lines to show. If the rows attribute is specified, its
value must be a valid non-negative integer greater than
zero. If applying the rules for parsing
non-negative integers to the attribute's value results in a
number greater than zero, then the element's character height is that
value; otherwise, it is 2.
Visual user agents should set the height of the control to the number of lines given by character height.
The wrap
attribute is an enumerated attribute with two keywords
and states: the soft keyword
which maps to the Soft state, and the
hard keyword
which maps to the Hard state. The
missing value default is the Soft state.
The Soft state
indicates that the text in the textarea is not to be
wrapped when it is submitted (though it can still be wrapped in the
rendering).
The Hard state
indicates that the text in the textarea is to have
newlines added by the user agent so that the text is wrapped when it
is submitted.
If the element's wrap
attribute is in the Hard state, the cols attribute must be
specified.
For historical reasons, the element's value is normalised in
three different ways for three different purposes. The raw value is the value as
it was originally set. It is not normalized. The API value is the value
used in the value IDL
attribute. It is normalized so that line breaks use U+000A LINE FEED
(LF) characters. Finally, there is the form submission value. It is normalized so that line
breaks use U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character
pairs, and in addition, if necessary given the element's wrap attribute, additional line
breaks are inserted to wrap the text at the given width.
The element's API value is defined to be the element's raw value with the following transformation applied:
Replace every U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pair from the raw value with a single U+000A LINE FEED (CRLF) character.
Replace every remaining U+000D CARRIAGE RETURN character from the raw value with a single U+000A LINE FEED (CRLF) character.
The element's value is defined to be the element's raw value with the following transformation applied:
Replace every occurrence of a U+000D CARRIAGE RETURN (CR) character not followed by a U+000A LINE FEED (LF) character, and every occurrence of a U+000A LINE FEED (LF) character not preceded by a U+000D CARRIAGE RETURN (CR) character, by a two-character string consisting of a U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pair.
If the element's wrap attribute is in the Hard state, insert
U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) character pairs
into the string using a UA-defined algorithm so that each line has
no more than character
width characters. For the purposes of this requirement,
lines are delimited by the start of the string, the end of the
string, and U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF)
character pairs.
The maxlength
attribute is a form control maxlength attribute controlled by the
textarea element's dirty value flag.
If the textarea element has a maximum allowed
value length, then the element's children must be such that
the code-point length of the value of the element's
textContent IDL attribute is equal to or less than the
element's maximum allowed value length.
The required attribute
is a boolean attribute. When specified, the user will
be required to enter a value before submitting the form.
Constraint validation: If the element has its
required attribute
specified, and the element is mutable, and the element's
value is the empty string,
then the element is suffering from being missing.
The placeholder
attribute represents a hint (a word or short phrase) intended to aid
the user with data entry. A hint could be a sample value or a brief
description of the expected format. The attribute, if specified,
must have a value that contains no U+000A LINE FEED (LF) or U+000D
CARRIAGE RETURN (CR) characters.
For a longer hint or other advisory text, the title attribute is more appropriate.
The placeholder
attribute should not be used as an alternative to a
label.
User agents should present this hint to the user, after having stripped line breaks from it, when the element's value is the empty string and the control is not focused (e.g. by displaying it inside a blank unfocused control).
The dirname
attribute is a form control dirname
attribute.
The form attribute is used to
explicitly associate the textarea element with its
form owner. The name
attribute represents the element's name. The disabled attribute is used to make
the control non-interactive and to prevent its value from being
submitted. The autofocus
attribute controls focus.
typeReturns the string "textarea".
valueReturns the current value of the element.
Can be set, to change the value.
The cols, placeholder,
required, rows, and wrap attributes must
reflect the respective content attributes of the same
name. The cols and rows attributes are limited
to only non-negative numbers greater than zero. The cols attribute's default value is
20. The rows attribute's
default value is 2. The dirName IDL
attribute must reflect the dirname content attribute. The
maxLength IDL
attribute must reflect the maxlength content attribute,
limited to only non-negative numbers. The readOnly IDL
attribute must reflect the readonly content
attribute.
The type IDL
attribute must return the value "textarea".
The defaultValue
IDL attribute must act like the element's textContent
IDL attribute.
The value
attribute must, on getting, return the element's API value; on setting, it
must set the element's raw
value to the new value, set the element's dirty value flag to true, and
should then move the text entry cursor position to the end of the
text field, unselecting any selected text and resetting the
selection direction to none.
The textLength IDL
attribute must return the code-point length of the
element's API
value.
The willValidate, validity, and validationMessage
attributes, and the checkValidity() and setCustomValidity()
methods, are part of the constraint validation API. The
labels attribute provides a list
of the element's labels. The select(), selectionStart,
selectionEnd,
selectionDirection,
and setSelectionRange()
methods and attributes expose the element's text selection. The
autofocus, disabled, form, and name IDL attributes are part of the
element's forms API.
Here is an example of a textarea being used for
unrestricted free-form text input in a form:
<p>If you have any comments, please let us know: <textarea cols=80 name=comments></textarea></p>
To specify a maximum length for the comments, one can use
the maxlength
attribute:
<p>If you have any short comments, please let us know: <textarea cols=80 name=comments maxlength=200></textarea></p>
To give a default value, text can be included inside the element:
<p>If you have any comments, please let us know: <textarea cols=80 name=comments>You rock!</textarea></p>
To have the browser submit the directionality of
the element along with the value, the dirname attribute can be
specified:
<p>If you have any comments, please let us know (you may use either English or Hebrew for your comments): <textarea cols=80 name=comments dirname=comments.dir></textarea></p>
keygen elementautofocuschallengedisabledformkeytypenameinterface HTMLKeygenElement : HTMLElement { attribute boolean autofocus; attribute DOMString challenge; attribute boolean disabled; readonly attribute HTMLFormElement? form; attribute DOMString keytype; attribute DOMString name; readonly attribute DOMString type; readonly attribute boolean willValidate; readonly attribute ValidityState validity; readonly attribute DOMString validationMessage; boolean checkValidity(); void setCustomValidity(DOMString error); readonly attribute NodeList labels; };
The keygen element represents a key
pair generator control. When the control's form is submitted, the
private key is stored in the local keystore, and the public key is
packaged and sent to the server.
The challenge attribute
may be specified. Its value will be packaged with the submitted
key.
The keytype
attribute is an enumerated attribute. The following
table lists the keywords and states for the attribute — the
keywords in the left column map to the states listed in the cell in
the second column on the same row as the keyword. User agents are
not required to support these values, and must only recognize values
whose corresponding algorithms they support.
| Keyword | State |
|---|---|
rsa
| RSA |
The invalid value default state is the unknown state. The missing value default state is the RSA state, if it is supported, or the unknown state otherwise.
This specification does not specify what key types user agents are to support — it is possible for a user agent to not support any key types at all.
The user agent may expose a user interface for each
keygen element to allow the user to configure settings
of the element's key pair generator, e.g. the key length.
The reset
algorithm for keygen elements is to set these
various configuration settings back to their defaults.
The element's value is the string returned from the following algorithm:
Use the appropriate step from the following list:
keytype
attribute is in the RSA stateGenerate an RSA key pair using the settings given by the
user, if appropriate, using the md5WithRSAEncryption RSA signature algorithm
(the signature algorithm with MD5 and the RSA encryption
algorithm) referenced in section 2.2.1 ("RSA Signature
Algorithm") of RFC 3279, and defined in RFC 2313. [RFC3279] [RFC2313]
keytype attribute is in the unknown stateThe given key type is not supported. Return the empty string and abort this algorithm.
Let private key be the generated private key.
Let public key be the generated public key.
Let signature algorithm be the selected signature algorithm.
If the element has a challenge attribute, then let
challenge be that attribute's value.
Otherwise, let challenge be the empty
string.
Let algorithm be an ASN.1 AlgorithmIdentifier structure as defined by
RFC 5280, with the algorithm field giving the
ASN.1 OID used to identify signature
algorithm, using the OIDs defined in section 2.2 ("Signature
Algorithms") of RFC 3279, and the parameters
field set up as required by RFC 3279 for AlgorithmIdentifier structures for that
algorithm. [X690] [RFC5280] [RFC3279]
Let spki be an ASN.1 SubjectPublicKeyInfo structure as defined by
RFC 5280, with the algorithm field set to the
algorithm structure from the previous step,
and the subjectPublicKey field set to the
BIT STRING value resulting from ASN.1 DER encoding the public key. [X690] [RFC5280]
Let publicKeyAndChallenge be an ASN.1
PublicKeyAndChallenge structure as defined below,
with the spki field set to the spki structure from the previous step, and the
challenge field set to the string challenge obtained earlier. [X690]
Let signature be the BIT STRING value resulting from ASN.1 DER encoding the signature generated by applying the signature algorithm to the byte string obtained by ASN.1 DER encoding the publicKeyAndChallenge structure, using private key as the signing key. [X690]
Let signedPublicKeyAndChallenge be an ASN.1
SignedPublicKeyAndChallenge structure as defined
below, with the publicKeyAndChallenge field
set to the publicKeyAndChallenge structure,
the signatureAlgorithm field set to the algorithm structure, and the signature field set to the BIT STRING signature from the previous step. [X690]
Return the result of base64 encoding the result of ASN.1 DER encoding the signedPublicKeyAndChallenge structure. [RFC4648] [X690]
The data objects used by the above algorithm are defined as follows. These definitions use the same "ASN.1-like" syntax defined by RFC 5280. [RFC5280]
PublicKeyAndChallenge ::= SEQUENCE {
spki SubjectPublicKeyInfo,
challenge IA5STRING
}
SignedPublicKeyAndChallenge ::= SEQUENCE {
publicKeyAndChallenge PublicKeyAndChallenge,
signatureAlgorithm AlgorithmIdentifier,
signature BIT STRING
}
Constraint validation: The keygen
element is barred from constraint validation.
The form attribute is used to
explicitly associate the keygen element with its
form owner. The name
attribute represents the element's name. The disabled attribute is used to make
the control non-interactive and to prevent its value from being
submitted. The autofocus
attribute controls focus.
typeReturns the string "keygen".
The challenge IDL
attribute must reflect the content attribute of the
same name.
The keytype
IDL attribute must reflect the content attribute of the
same name, limited to only known values.
The type IDL
attribute must return the value "keygen".
The willValidate, validity, and validationMessage
attributes, and the checkValidity() and setCustomValidity()
methods, are part of the constraint validation API. The
labels attribute provides a list
of the element's labels. The autofocus, disabled, form, and name IDL attributes are part of the
element's forms API.
This specification does not specify how the private
key generated is to be used. It is expected that after receiving the
SignedPublicKeyAndChallenge (SPKAC) structure, the
server will generate a client certificate and offer it back to the
user for download; this certificate, once downloaded and stored in
the key store along with the private key, can then be used to
authenticate to services that use TLS and certificate
authentication.
To generate a key pair, add the private key to the user's key store, and submit the public key to the server, markup such as the following can be used:
<form action="processkey.cgi" method="post" enctype="multipart/form-data"> <p><keygen name="key"></p> <p><input type=submit value="Submit key..."></p> </form>
The server will then receive a form submission with a packaged
RSA public key as the value of "key". This
can then be used for various purposes, such as generating a client
certificate, as mentioned above.
output elementforformnameinterface HTMLOutputElement : HTMLElement { [PutForwards=value] readonly attribute DOMSettableTokenList htmlFor; readonly attribute HTMLFormElement? form; attribute DOMString name; readonly attribute DOMString type; attribute DOMString defaultValue; attribute DOMString value; readonly attribute boolean willValidate; readonly attribute ValidityState validity; readonly attribute DOMString validationMessage; boolean checkValidity(); void setCustomValidity(DOMString error); readonly attribute NodeList labels; };
The output element represents the result of a
calculation.
The for content
attribute allows an explicit relationship to be made between the
result of a calculation and the elements that represent the values
that went into the calculation or that otherwise influenced the
calculation. The for attribute,
if specified, must contain a string consisting of an unordered
set of unique space-separated tokens that are
case-sensitive, each of which must have the value of an
ID of an element in the same
Document.
The form attribute is used to
explicitly associate the output element with its
form owner. The name
attribute represents the element's name.
The element has a value mode flag which is either value or default. Initially, the value mode flag must be set to default.
The element also has a default value. Initially, the default value must be the empty string.
When the value mode flag
is in mode default, the
contents of the element represent both the value of the element and
its default
value. When the value mode
flag is in mode value, the contents of the
element represent the value of the element only, and the default value is only
accessible using the defaultValue IDL
attribute.
Whenever the element's descendants are changed in a