This specification is available in the following formats: single page HTML, multipage HTML, full specification. This is revision 1.5614.
Copyright © 2012 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
The bulk of the text of this specification is also available in the WHATWG Web Applications 1.0 specification, under a license that permits reuse of the specification text.
This document is a strict subset of the full HTML5 specification that omits user-agent (UA) implementation details. It is targeted toward Web authors and others who are not UA implementors and who want a view of the HTML specification that focuses more precisely on details relevant to using the HTML language to create Web documents and Web applications. Because this document does not provide implementation conformance criteria, UA implementors should not rely on it, but should instead refer to the full HTML5 specification.
This document is an automated redaction of the full HTML5 specification. As such, the two documents are supposed to agree on normative matters concerning Web authors. However, if the documents disagree, this is a bug in the redaction process and the unredacted full HTML specification takes precedence. Readers are encouraged to report such discrepancies as bugs in the bug tracking system of the HTML Working Group.
This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the most recently formally published revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.
If you wish to make comments regarding this document in a manner that is tracked by the W3C, please submit them via using our public bug database. If you do not have an account then you can enter feedback using this form:
If you cannot do this then you can also e-mail feedback to public-html-comments@w3.org (subscribe, archives), and arrangements will be made to transpose the comments to our public bug database. Alternatively, you can e-mail feedback to whatwg@whatwg.org (subscribe, archives). The editor guarantees that all substantive feedback sent to this list will receive a reply. However, such feedback is not considered formal feedback for the W3C process. All feedback is welcome.
The working groups maintains a list of all bug reports that the editor has not yet tried to address and a list of issues for which the chairs have not yet declared a decision. The editor also maintains a list of all e-mails that he has not yet tried to address. These bugs, issues, and e-mails apply to multiple HTML-related specifications, not just this one.
Implementors should be aware that this specification is not stable. Implementors who are not taking part in the discussions are likely to find the specification changing out from under them in incompatible ways. Vendors interested in implementing this specification before it eventually reaches the Candidate Recommendation stage should join the aforementioned mailing lists and take part in the discussions.
The publication of this document by the W3C as a W3C Working Draft does not imply that all of the participants in the W3C HTML working group endorse the contents of the specification. Indeed, for any section of the specification, one can usually find many members of the working group or of the W3C as a whole who object strongly to the current text, the existence of the section at all, or the idea that the working group should even spend time discussing the concept of that section.
The latest stable version of the editor's draft of this specification is always available on the W3C CVS server and in the WHATWG Subversion repository. The latest editor's working copy (which may contain unfinished text in the process of being prepared) contains the latest draft text of this specification (amongst others). For more details, please see the WHATWG FAQ.
There are various ways to follow the change history for the HTML specifications:
svn checkout http://svn.whatwg.org/webapps/
The W3C HTML Working Group is the W3C working group responsible for this specification's progress along the W3C Recommendation track. This specification is the 29 March 2012 Working Draft.
Work on this specification is also done at the WHATWG. The W3C HTML working group actively pursues convergence with the WHATWG, as required by the W3C HTML working group charter.
This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.
id
attributetitle
attributelang
and xml:lang
attributestranslate
attributexml:base
attribute (XML only)dir
attributeclass
attributestyle
attributedata-*
attributesa
elementem
elementstrong
elementsmall
elements
elementcite
elementq
elementdfn
elementabbr
elementtime
elementcode
elementvar
elementsamp
elementkbd
elementsub
and sup
elementsi
elementb
elementu
elementmark
elementruby
elementrt
elementrp
elementbdi
elementbdo
elementspan
elementbr
elementwbr
elementimg
element
iframe
elementembed
elementobject
elementparam
elementvideo
elementaudio
elementsource
elementtrack
elementcanvas
elementmap
elementarea
elementform
elementfieldset
elementlegend
elementlabel
elementinput
element
type
attribute
type=text
) state and Search state (type=search
)type=tel
)type=url
)type=email
)type=password
)type=datetime
)type=date
)type=month
)type=week
)type=time
)type=datetime-local
)type=number
)type=range
)type=color
)type=checkbox
)type=radio
)type=file
)type=submit
)type=image
)type=reset
)type=button
)input
element attributes
autocomplete
attributedirname
attributelist
attributereadonly
attributesize
attributerequired
attributemultiple
attributemaxlength
attributepattern
attributemin
and max
attributesstep
attributeplaceholder
attributeinput
element APIsbutton
elementselect
elementdatalist
elementoptgroup
elementoption
elementtextarea
elementkeygen
elementoutput
elementprogress
elementmeter
elementa
and area
elementsalternate
"author
"bookmark
"help
"icon
"license
"nofollow
"noreferrer
"prefetch
"search
"stylesheet
"tag
"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 specification is intended for authors of documents and scripts that use the features defined in 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 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.
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. 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]
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.
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 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 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".
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".
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 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.
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:
html
html
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.
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).
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>
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.
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
.
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.
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:
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) 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.
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.
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) 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.
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.
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
Document
s 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.
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) 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) 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 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 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.
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
.
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]
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.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).
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.
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.
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.
The space characters, for the purposes of this specification, are U+0020 SPACE, "tab" (U+0009), "LF" (U+000A), "FF" (U+000C), and "CR" (U+000D).
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.
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 ASCII digits, optionally prefixed with a U+002D HYPHEN-MINUS character (-).
A valid integer without a "-" (U+002D) prefix represents the number that is represented in base ten by that string of digits. A valid integer with a "-" (U+002D) prefix represents the number represented in base ten by the string of digits that follows the U+002D HYPHEN-MINUS, subtracted from zero.
A string is a valid non-negative integer if it consists of one or more characters in the range ASCII digits.
A valid non-negative integer represents the number that is represented in base ten by that string of digits.
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) 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) character between the E and the number and the number is not zero, or else ignoring a "+" (U+002B) 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.
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.
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 ASCII digits, used to express numbers in base ten.
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:
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:
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.
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.
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:
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 "Z" (U+005A) character, 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.
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:
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:
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:
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) 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.
A string is a valid date string with optional time if it is also one of the following:
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) character, and the remaining six characters are all in the range ASCII digits, 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.
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.
A set of comma-separated tokens is a string containing zero or more tokens each separated from the next by a single "," (U+002C) character, where tokens consist of any string of zero or more characters, neither beginning nor ending with space characters, nor containing any "," (U+002C) 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.
A valid hash-name reference to an element of type type is a string consisting of a "#" (U+0023) character followed by a string which exactly matches the value
of the name
attribute of an element with type
type in the document.
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 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]
Resolving a URL is the process of taking a relative URL and obtaining the absolute URL that it implies.
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) 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) characters.
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 table below demonstrates how the getter 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. |
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) |
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.
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.
The HTMLAllCollection
,
HTMLFormControlsCollection
,
HTMLOptionsCollection
,
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); };
length
Returns 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 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; };
length
Returns 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 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 or HTMLOptGroupElement) element, optional (HTMLElement or long)? before = null);
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 DOMStringMap
interface represents a set of
name-value pairs. It exposes these using the scripting language's
native mechanisms for property access.
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 } }
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 { };
The following Transferable
types exist:
MessagePort
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.
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.
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); // 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 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.
URL
Returns the document's address.
referrer
Returns 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.
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.
lastModified
Returns the date of the last modification to the document, as
reported by the server, in the form "MM/DD/YYYY hh:mm:ss
", in the user's local
time zone.
If the last modification date is not known, the current time is returned instead.
readyState
Returns "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.
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.
head
Returns the head
element.
The head
element of a document is the
first head
element that is a child of the
html
element, if there is one, or null
otherwise.
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.
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.
images
Returns an HTMLCollection
of the img
elements in the Document
.
embeds
plugins
Return an HTMLCollection
of the embed
elements in the Document
.
links
Returns an HTMLCollection
of the a
and area
elements in the Document
that have href
attributes.
forms
Return an HTMLCollection
of the form
elements in the Document
.
scripts
Return an HTMLCollection
of the script
elements in the Document
.
getElementsByName
(name)Returns a NodeList
of elements in the
Document
that have a name
attribute with the value name.
The dir
attribute on the Document
interface is defined
along with the dir
content
attribute.
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 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 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, 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; // 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 following attributes are common to and may be specified on all HTML elements:
accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
id
lang
spellcheck
style
tabindex
title
translate
The following event handler content attributes may be specified on any HTML element:
onabort
onblur
*oncanplay
oncanplaythrough
onchange
onclick
oncontextmenu
oncuechange
ondblclick
ondrag
ondragend
ondragenter
ondragleave
ondragover
ondragstart
ondrop
ondurationchange
onemptied
onended
onerror
*onfocus
*oninput
oninvalid
onkeydown
onkeypress
onkeyup
onload
*onloadeddata
onloadedmetadata
onloadstart
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
onmousewheel
onpause
onplay
onplaying
onprogress
onratechange
onreset
onscroll
*onseeked
onseeking
onselect
onshow
onstalled
onsubmit
onsuspend
ontimeupdate
onvolumechange
onwaiting
The attributes marked with an asterisk have a
different meaning when specified on body
elements as
those elements expose event handlers of the
Window
object with the same names.
While these attributes apply to all elements, they
are not useful on all elements. For example, only media elements will ever receive a 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.
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 "LF" (U+000A) characters, the content is split into
multiple lines. Each "LF" (U+000A) 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.
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.
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:
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.
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]
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 attribute.)
style
Returns a CSSStyleDeclaration
object for the element's style
attribute.
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.
dataset
Returns a DOMStringMap
object for the element's data-*
attributes.
Hyphenated names become camel-cased. For example, data-foo-bar=""
becomes element.dataset.fooBar
.
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.
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. 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.
Elements 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.
a
abbr
address
area
(if it is a descendant of a map
element)article
aside
audio
b
bdi
bdo
blockquote
br
button
canvas
cite
code
command
datalist
del
details
dfn
div
dl
em
embed
fieldset
figure
footer
form
h1
h2
h3
h4
h5
h6
header
hgroup
hr
i
iframe
img
input
ins
kbd
keygen
label
map
mark
math
menu
meter
nav
noscript
object
ol
output
p
pre
progress
q
ruby
s
samp
script
section
select
small
span
strong
style
(if the scoped
attribute is present)sub
sup
svg
table
textarea
time
u
ul
var
video
wbr
Sectioning content is content that defines the scope of headings and footers.
Each 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).
Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.
a
(if it contains only phrasing content)abbr
area
(if it is a descendant of a map
element)audio
b
bdi
bdo
br
button
canvas
cite
code
command
datalist
del
(if it contains only phrasing content)dfn
em
embed
i
iframe
img
input
ins
(if it contains only phrasing content)kbd
keygen
label
map
(if it contains only phrasing content)mark
math
meter
noscript
object
output
progress
q
ruby
s
samp
script
select
small
span
strong
sub
sup
svg
textarea
time
u
var
video
wbr
As 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.
Elements that are from namespaces other than the HTML namespace and that convey content but not metadata, are embedded content for the purposes of the content models defined in this specification. (For example, MathML, or SVG.)
Some embedded content elements can have fallback content: content that is to be used when the external resource cannot be used (e.g. because it is of an unsupported format). The element definitions state what the fallback is, if any.
Interactive content is content that is specifically intended for user interaction.
a
audio
(if the controls
attribute is present)button
details
embed
iframe
img
(if the usemap
attribute is present)input
(if the type
attribute is not in the state)keygen
label
menu
(if the type
attribute is in the toolbar state)object
(if the usemap
attribute is present)select
textarea
video
(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 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
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:
a
abbr
address
article
aside
audio
(if the controls
attribute is present)b
bdi
bdo
blockquote
button
canvas
cite
code
details
dfn
div
dl
(if the element's children include at least one name-value group)em
embed
fieldset
figure
footer
form
h1
h2
h3
h4
h5
h6
header
hgroup
i
iframe
img
input
(if the type
attribute is not in the state)ins
kbd
keygen
label
map
mark
math
menu
(if the type
attribute is in the toolbar state or the list state)meter
nav
object
ol
(if the element's children include at least one li
element)output
p
pre
progress
q
ruby
s
samp
section
select
small
span
strong
sub
sup
svg
table
textarea
time
u
ul
(if the element's children include at least one li
element)var
video
Some elements are described as transparent; they have "transparent" in the description of their content model. The content model of a transparent element is derived from the content model of its parent element: the elements required in the part of the content model that is "transparent" are the same elements as required in the part of the content model of the parent of the transparent element in which the transparent element finds itself.
For instance, an ins
element inside a
ruby
element cannot contain an rt
element, because the part of the ruby
element's
content model that allows ins
elements is the part
that allows phrasing content, and the rt
element is not phrasing content.
In some cases, where transparent elements are nested in each other, the process has to be applied iteratively.
Consider the following markup fragment:
<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>
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
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]
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.
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 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 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.)
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>
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.
close
()Closes the input stream that was opened by the document.open()
method.
Throws an InvalidStateError
exception if the
Document
is an XML
document.
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.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 html element.
html
elementhead
element followed by a body
element.manifest
interface 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.
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.
base
elementhead
element containing no other base
elements.href
target
interface 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).
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.
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
elementnoscript
element that is a child of a head
element.href
rel
media
hreflang
type
sizes
title
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.
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.
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).
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.
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.
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.
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
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
elementcharset
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.name
http-equiv
content
charset
interface 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
, 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.
application-name
The 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.
author
The value must be a free-form string giving the name of one of the page's authors.
description
The 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.
generator
The 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">
keywords
The 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.
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.
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.
State | Keyword | Notes |
---|---|---|
Encoding declaration | content-type
| |
Default style | default-style
| |
Refresh | refresh
|
http-equiv="content-type"
)
The Encoding
declaration state is just an alternative form of setting
the charset
attribute: it is a
character encoding declaration.
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.
http-equiv="refresh"
)
This pragma acts as timed redirect.
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) character, followed by a valid URL
that does not start with a literal "'" (U+0027) or
""" (U+0022) 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">
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.
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]
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.media
type
scoped
title
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]
The media
attribute says which media the styles apply to. The value must be a
valid media query.
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.
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 = "-->"
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]
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.src
async
defer
type
charset
interface 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.
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.
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>
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
"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) 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 ; "tab" (U+0009) tag-end =/ %x000A ; "LF" (U+000A) tag-end =/ %x000C ; "FF" (U+000C) tag-end =/ %x0020 ; U+0020 SPACE tag-end =/ %x002F ; "/" (U+002F) 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 ; "tab" (U+0009) newline = %x000A ; "LF" (U+000A) space = %x0020 ; U+0020 SPACE star = %x002A ; "*" (U+002A) slash = %x002F ; "/" (U+002F) not-newline = %x0000-0009 / %x000B-10FFFF ; a Unicode character other than "LF" (U+000A) not-star = %x0000-0029 / %x002B-10FFFF ; a Unicode character other than "*" (U+002A) not-slash = %x0000-002E / %x0030-10FFFF ; a Unicode character other than "/" (U+002F)
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>
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.
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.
The body, section, nav, article, aside, h1, h2, h3, h4, h5, h6, hgroup, header, footer, and address elements.
body
elementhtml
element.onafterprint
onbeforeprint
onbeforeunload
onblur
onerror
onfocus
onhashchange
onload
onmessage
onoffline
ononline
onpagehide
onpageshow
onpopstate
onresize
onscroll
onstorage
onunload
interface 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.
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 best 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="http://dev.w3.org/html5/spec/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="http://dev.w3.org/html5/spec/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="http://dev.w3.org/html5/spec/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.
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.
Sectioning 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.
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 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:
The p, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, and div elements.
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.
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
elementcite
interface 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.
The content of a blockquote
may be abbreviated or
may have context added in the conventional manner for the text's
language.
For example, in English this is traditionally done using square brackets. Consider a page with the sentence "Fred ate the cracker. He then said he liked apples and fish."; it could be quoted as follows:
<blockquote> <p>[Fred] then said he liked [...] fish.</p> </blockquote>
Attribution for the quotation, if any, must be placed outside the
blockquote
element.
For example, here the attribution is given in a paragraph after the quote:
<blockquote> <p>I contend that we are both atheists. I just believe in one fewer god than you do. When you understand why you dismiss all the other possible gods, you will understand why I dismiss yours.</p> </blockquote> <p>— Stephen Roberts</p>
The other examples below show other ways of showing attribution.
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.reversed
start
type
interface 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.
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.
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. | ... |
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: value
interface 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.
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.
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
dd
s, 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 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.
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>
The a, em, strong, small, s, cite, q, dfn, abbr, time, code, figure, samp, kbd, sub, sup, i, b, u, mark, ruby, rt, rp, bdi, bdo, span, br, and wbr elements.
a
elementhref
target
rel
media
hreflang
type
interface HTMLAnchorElement : HTMLElement { stringifier attribute DOMString href; attribute DOMString target; 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
,
rel
, media
, hreflang
, and type
attributes must be omitted
if the href
attribute is
not present.
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>
text
Same as textContent
.
The IDL attributes
href
,
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 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
elementcite
HTMLQuoteElement
.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.
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.
time
elementdatetime
interface 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 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 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 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 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.
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 represents
nothing.
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).
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.
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.
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>
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>. |
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
elementcite
datetime
HTMLModElement
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
elementcite
datetime
HTMLModElement
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.
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.
The ins
and del
elements 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.
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.
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>
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).
The img, iframe, embed, object, param, video, audio, source, track, canvas, map, and area elements.
img
elementusemap
attribute: Interactive content.alt
src
crossorigin
usemap
ismap
width
height
[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.
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
.
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.
naturalWidth
naturalHeight
These attributes return the intrinsic dimensions of the image, or zero if the dimensions are not known.
complete
Returns 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.
On setting, they must act as if they reflected the respective content attributes of the same name.
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="http://dev.w3.org/html5/spec/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="http://dev.w3.org/html5/spec/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="http://dev.w3.org/html5/spec/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="http://dev.w3.org/html5/spec/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="http://dev.w3.org/html5/spec/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]
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.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.
iframe
elementsrc
srcdoc
name
sandbox
seamless
width
height
interface 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.
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.
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.
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) characters to wrap the
attribute contents and then to escape all """ (U+0022)
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 "tab" (U+0009), "LF" (U+000A), and "CR" (U+000D) — 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.
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.
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).
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
elementsrc
type
width
height
interface HTMLEmbedElement : HTMLElement { attribute DOMString src; attribute DOMString type; attribute DOMString width; attribute DOMString height; legacycaller any (any... arguments); };
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.
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.
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 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.data
type
typemustmatch
name
usemap
form
width
height
interface 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); };
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.
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.
The usemap
attribute,
if present while the object
element represents an
image, can indicate that the object has an associated image
map.
The form
attribute is used to
explicitly associate the object
element with its
form owner.
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.
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.name
value
interface 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.
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.src
crossorigin
poster
preload
autoplay
mediagroup
loop
muted
controls
width
height
interface 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; 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.
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.
videoWidth
videoHeight
These attributes return the intrinsic dimensions of the video, or zero if the dimensions are not known.
The video
element supports dimension
attributes.
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.src
crossorigin
preload
autoplay
mediagroup
loop
muted
controls
[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; 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.
Audio
( [ url ] )Returns a new audio
element, with the src
attribute set to the value
passed in the argument, if applicable.
source
elementtrack
elements.src
type
media
interface 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.
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
elementkind
src
srclang
label
default
interface 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'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]
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.
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.
readyState
Returns 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.
track
Returns the TextTrack
object corresponding to the text track of the track
element.
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.
error
Returns a MediaError
object representing the
current error state of the element.
Returns null if there is no 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
. code
Returns the current error's error code, from the list below.
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.
The crossorigin
content attribute on media
elements is a CORS settings attribute.
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.
currentSrc
Returns the address of the current media resource.
Returns the empty string when there is no media resource.
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.
"application/octet-stream
"
is special-cased here; if any parameter appears with it, it
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.
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.
networkState
Returns the current state of network activity for the element, from the codes in the list below.
NETWORK_EMPTY
(numeric value 0)NETWORK_IDLE
(numeric value 1)NETWORK_LOADING
(numeric value 2)NETWORK_NO_SOURCE
(numeric value 3)load
()Causes the element to reset and start selecting and loading a new media resource from scratch.
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, track list, duration, etc), and maybe even the first few frames, 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
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.
buffered
Returns a TimeRanges
object that represents the
ranges of the media resource that the user agent has
buffered.
duration
Returns 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.
initialTime
Returns 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.
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.
readyState
Returns 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.
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.
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 autoplay
attribute is a boolean attribute. When present, the
user agent 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.
paused
Returns true if playback is paused; false otherwise.
ended
Returns 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.
played
Returns 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.
seeking
Returns true if the user agent is currently seeking.
seekable
Returns a TimeRanges
object that represents the
ranges of the media resource to which it is possible
for the user agent to seek.
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.
audioTracks
Returns an AudioTrackList
object representing
the audio tracks available in the media resource.
videoTracks
Returns a VideoTrackList
object representing
the video tracks available in the media resource.
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
. length
videoTracks
. length
Returns 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.
id
id
Returns 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]
kind
kind
Returns the category the given track falls into. The possible track categories are given below.
label
label
Returns the label of the given track, if known, or the empty string otherwise.
language
language
Returns 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
. selectedIndex
Returns 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.
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"; DASH: "alternate" without "main" and "commentary" roles, and, for audio, without the "dub" role (other roles ignored). |
"captions "
| A version of the main video track with captions burnt in. (For legacy content; new content would use text tracks.) | Video only. | DASH: "caption" and "main" roles together (other roles ignored). |
"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; DASH: "main" role without "caption", "subtitle", and "dub" roles (other roles ignored). |
"sign "
| A sign-language interpretation of an audio track. | Video only. | Ogg: "video/sign". |
"subtitles "
| A version of the main video track with subtitles burnt in. (For legacy content; new content would use text tracks.) | Video only. | DASH: "subtitle" and "main" roles together (other roles ignored). |
"translation "
| A translated version of the main audio track. | Audio only. | Ogg: "audio/dub". DASH: "dub" and "main" roles together (other roles ignored). |
"commentary "
| Commentary on the primary audio or video track, e.g. a director's commentary. | Audio and video. | DASH: "commentary" role without "main" role (other roles ignored). |
" " (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, track role, or combination of track roles not described above. |
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.
buffered
Returns 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.
seekable
Returns a TimeRanges
object that represents the
intersection of the time ranges into which the user agent can seek
for all the slaved media
elements.
duration
Returns 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.
paused
Returns 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.
played
Returns 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.
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.
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.
interface TextTrackList : EventTarget { readonly attribute unsigned long length; getter TextTrack (unsigned long index); [TreatNonCallableAsNull] attribute Function? onaddtrack; };
textTracks
. length
Returns 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.
track
Returns the TextTrack
object representing the track
element's text track.
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; };
kind
Returns the text track kind string.
label
Returns the text track label.
language
Returns 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
mode.TextTrack
. SHOWING
(2)The text track showing and showing by default modes.
Can be set, to change the mode.
cues
Returns the text track list of cues, as a TextTrackCueList
object.
activeCues
Returns 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.
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); };
length
Returns 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.
[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 vertical; attribute boolean snapToLines; attribute long line; attribute long position; attribute long size; attribute DOMString align; attribute DOMString text; DocumentFragment getCueAsHTML(); [TreatNonCallableAsNull] attribute Function? ; [TreatNonCallableAsNull] attribute Function? ; };
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 empty string.
The string "rl
".
The string "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.
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 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 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.
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 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.
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); };
length
Returns 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.
[Constructor(DOMString type, optional TrackEventInit eventInitDict)] interface TrackEvent : Event { readonly attribute object? track; }; dictionary TrackEventInit : EventInit { object? track; };
track
Returns the track object (TextTrack
,
AudioTrack
, or VideoTrack
) to which the
event relates.
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.
|
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.
canvas
elementwidth
height
interface 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
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 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.
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).
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.
Type | Other arguments | Reference |
---|---|---|
image/jpeg
| The second argument is a number in the range 0.0 to 1.0 inclusive treated as the desired quality level. | [JPEG] |
map
elementname
interface 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.
areas
Returns an HTMLCollection
of the area
elements in the map
.
images
Returns an HTMLCollection
of the img
and object
elements that use the map
.
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.alt
coords
shape
href
target
rel
media
hreflang
type
interface HTMLAreaElement : HTMLElement { attribute DOMString alt; attribute DOMString coords; attribute DOMString shape; stringifier attribute DOMString href; attribute DOMString target; 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.
State | Keywords | |
---|---|---|
Circle state | circle
| |
Default state | default
| |
Polygon state | poly
| |
Rectangle state | rect
| |
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.
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.
The target
,
rel
, media
, hreflang
, and type
attributes must be omitted
if the href
attribute is
not present.
The IDL attributes alt
, coords
, href
, target
,
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>
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.
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.
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.
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.
The width
and height
IDL attributes on
the iframe
, embed
, object
,
and video
elements must reflect the
respective content attributes of the same name.
The table element.
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).border
interface 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.
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.
Authors are encouraged to provide information describing how to interpret complex tables. Guidance on how provide such information is given below.
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.
Authors are encouraged to consider using some of the table layout techniques described below to make tables easier to navigate for users.
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.
tBodies
Returns an HTMLCollection
of the tbody
elements of the table.
createTBody
()Creates a tbody
element, inserts it into the table, and returns it.
rows
Returns 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 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.
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.
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>
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.span
interface 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 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.span
HTMLTableColElement
, 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 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
.
rows
Returns 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.
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
.
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
.
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.
rowIndex
Returns the position of the row in the table's rows
list.
Returns −1 if the element isn't in a table.
sectionRowIndex
Returns the position of the row in the table section's rows
list.
Returns −1 if the element isn't in a table section.
cells
Returns 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.
td
elementtr
element.colspan
rowspan
headers
interface HTMLTableDataCellElement : HTMLTableCellElement {};
The td
element represents a data cell in a table.
th
elementtr
element.header
, footer
, sectioning content, or heading content descendants.colspan
rowspan
headers
scope
interface 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 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.
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.
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 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;
};
cellIndex
Returns 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 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>
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% |
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.
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>
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:
custname
custtel
custemail
size
small
, medium
, or large
toppings
bacon
, cheese
, onion
, and mushroom
delivery
comments
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=
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>
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.
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.
The form-associated elements fall into several subcategories:
Denotes elements that are listed in the form.elements
and fieldset.elements
APIs.
Denotes elements that can be used for constructing the form data
set when a form
element is submitted.
Some 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.
Some elements, not all of them form-associated, are categorized as labelable elements. These are elements
that can be associated with a label
element.
button
input
(if the type
attribute is not in the state)keygen
meter
output
progress
select
textarea
form
elementform
element descendants.accept-charset
action
autocomplete
enctype
method
name
novalidate
target
[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.
elements
Returns an HTMLCollection
of the form controls in
the form (excluding image buttons for historical reasons).
length
Returns 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.
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.disabled
form
name
interface 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.
type
Returns the string "fieldset".
elements
Returns an HTMLFormControlsCollection
of the form
controls in the element.
The disabled
IDL
attribute must reflect the content attribute of the
same name.
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
fieldset
s, 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 fieldset
s 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.
form
Returns the element's form
element, if any, or
null otherwise.
label
elementlabel
elements.form
for
interface 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, either using for
attribute, or by putting the form
control inside the label
element itself.
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.
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>
control
Returns the form control that is associated with this element.
The htmlFor
IDL
attribute must reflect the for
content attribute.
labels
Returns a NodeList
of all the label
elements that the form control is associated with.
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.accept
alt
autocomplete
autofocus
checked
dirname
disabled
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height
list
max
maxlength
min
multiple
name
pattern
placeholder
readonly
required
size
src
step
type
value
width
interface 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
| 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
summarizes which of
those content attributes, IDL attributes, methods, and events apply
to each state:
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 | · | · | · |
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 | · | · | · |
The value
content attribute gives the default value of the input
element.
The checked
content attribute is a boolean attribute that gives the
default checkedness of the
input
element.
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.
On setting, they must act as if they reflected the respective content attributes of the same name.
type
attributetype=hidden
)The input
element represents a value
that is not intended to be examined or manipulated by the user.
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.
type=text
) state and Search state (type=search
)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.
The value
attribute, if
specified, must have a value that contains no "LF" (U+000A)
or "CR" (U+000D) characters.
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
)The input
element represents a control
for editing a telephone number given in the element's value.
The value
attribute, if
specified, must have a value that contains no "LF" (U+000A)
or "CR" (U+000D) characters.
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
)The input
element represents a control
for editing a single absolute URL given in the
element's 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 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
)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.
The value
attribute, if
specified and not empty, must have a value that is a single
valid e-mail address.
multiple
attribute is specified on the elementThe input
element represents a
control for adding, removing, and editing the e-mail addresses
given in the element's values.
The value
attribute, if
specified, must have a value that is a valid e-mail address
list.
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.
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
)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.
The value
attribute, if
specified, must have a value that contains no "LF" (U+000A)
or "CR" (U+000D) characters.
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
)The input
element represents a control
for setting the element's value to a string representing a
specific global date and
time.
See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls.
The value
attribute, if
specified and not empty, must have a value that is a valid
global date and time string.
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 default step is 60
seconds.
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
)The input
element represents a control
for setting the element's value to a string representing a
specific date.
See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls.
The value
attribute, if
specified and not empty, must have a value that is a valid
date string.
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 default step is 1 day.
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
)The input
element represents a control
for setting the element's value to a string representing a
specific month.
The value
attribute, if
specified and not empty, must have a value that is a valid
month string.
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 default step is
1 month.
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
)The input
element represents a control
for setting the element's value to a string representing a
specific week.
The value
attribute, if
specified and not empty, must have a value that is a valid
week string.
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 default step is 1
week.
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
)The input
element represents a control
for setting the element's value to a string representing a
specific time.
The value
attribute, if
specified and not empty, must have a value that is a valid
time string.
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 default step is 60
seconds.
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
)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.
The value
attribute, if
specified and not empty, must have a value that is a valid
local date and time string.
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 default step is 60
seconds.
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
)The input
element represents a control
for setting the element's value to a string representing a
number.
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 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 default
step is 1 (allowing only integers, unless the min
attribute has a non-integer
value).
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
)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.
The value
attribute, if
specified, must have a value that is a valid floating point
number.
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.
The default
step is 1 (allowing only integers, unless the min
attribute has a non-integer
value).
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
)The input
element represents a color
well control, for setting the element's value to a string representing a
simple color.
The value
attribute, if
specified and not empty, must have a value that is a valid
simple color.
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
)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.
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
)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.
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
)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).
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).
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.
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
)The input
element represents a button
that, when activated, submits the form. The element is a button, specifically a submit button.
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.
type=image
)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.
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.
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.
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
)The input
element represents a button
that, when activated, resets the form. The element is a button.
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.
type=button
)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. The element is a button.
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.
input
element attributesautocomplete
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.)
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>
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.
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.
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.
required
attributeThe required
attribute is a boolean attribute. When specified, the
element is required.
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 is a form control maxlength
attribute.
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]
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 title
s as if an error has necessarily
occurred.
min
and max
attributesThe min
and max
attributes indicate
the allowed range of values for the element.
The max
attribute's value
(the maximum) must not be
less than the min
attribute's
value (its minimum).
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 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 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 "LF" (U+000A) or "CR" (U+000D) 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
.
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.
files
Returns 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.
list
Returns the datalist
element indicated by the
list
attribute.
button
elementautofocus
disabled
form
formaction
formenctype
formmethod
formnovalidate
formtarget
name
type
value
interface 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.
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.
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 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.autofocus
disabled
form
multiple
name
required
size
interface 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 or HTMLOptGroupElement) element, optional (HTMLElement or long)? before = null); 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 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.
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.
type
Returns "select-multiple
" if the element
has a multiple
attribute, and "select-one
"
otherwise.
options
Returns 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.
selectedOptions
Returns 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 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.
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.
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.
options
Returns an HTMLCollection
of the options
elements of the table.
optgroup
elementselect
element.option
elements.disabled
label
interface 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.
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.
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.disabled
label
selected
value
[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.
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.
A select
element whose multiple
attribute is not
specified must not have more than one descendant option
element with its selected
attribute set.
selected
Returns true if the element is selected, and false otherwise.
Can be set, to override the current state of the element.
index
Returns the index of the element in its select
element's options
list.
form
Returns the element's form
element, if any, or
null otherwise.
text
Same 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.
textarea
elementautofocus
cols
dirname
disabled
form
maxlength
name
placeholder
readonly
required
rows
wrap
interface 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. The contents of the control represent the
control's default value.
The readonly
attribute
is a boolean attribute used to control whether the text
can be edited by the user or not.
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.
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.
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.
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.
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 "LF" (U+000A) or "CR" (U+000D) 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
.
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.
type
Returns the string "textarea
".
value
Returns 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.
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
elementautofocus
challenge
disabled
form
keytype
name
interface 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 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.
type
Returns 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.
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
elementfor
form
name
interface 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.
value
[ = value ]Returns the element's current value.
Can be set, to change the value.
defaultValue
[ = value ]Returns the element's current default value.
Can be set, to change the default value.
type
Returns the string "output
".
The htmlFor
IDL attribute must reflect the for
content attribute.
A simple calculator could use output
for its
display of calculated results:
<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber"> <input name=a type=number step=any> + <input name=b type=number step=any> = <output name=o></output> </form>
progress
elementprogress
element descendants.value
max
interface HTMLProgressElement : HTMLElement { attribute double value; attribute double max; readonly attribute double position; readonly attribute NodeList labels; };
The progress
element represents the
completion progress of a task. The progress is either indeterminate,
indicating that progress is being made but that it is not clear how
much more work remains to be done before the task is complete (e.g.
because the task is waiting for a remote host to respond), or the
progress is a number in the range zero to a maximum, giving the
fraction of work that has so far been completed.
There are two attributes that determine the current task
completion represented by the element. The value
attribute
specifies how much of the task has been completed, and the max
attribute specifies
how much work the task requires in total. The units are arbitrary
and not specified.
To make a determinate progress bar, add a value
attribute with the current
progress (either a number from 0.0 to 1.0, or, if the max
attribute is specified, a
number from 0 to the value of the max
attribute). To make an
indeterminate progress bar, remove the value
attribute.
Authors are encouraged to also include the current value and the maximum value inline as text inside the element, so that the progress is made available to users of legacy user agents.
Here is a snippet of a Web application that shows the progress of some automated task:
<section> <h2>Task Progress</h2> <p>Progress: <progress id="p" max=100><span>0</span>%</progress></p> <script> var progressBar = document.getElementById('p'); function updateProgress(newValue) { progressBar.value = newValue; progressBar.getElementsByTagName('span')[0].textContent = newValue; } </script> </section>
(The updateProgress()
method in this example would
be called by some other code on the page to update the actual
progress bar as the task progressed.)
The value
and max
attributes, when present, must
have values that are valid
floating point numbers. The value
attribute, if present, must
have a value equal to or greater than zero, and less than or equal
to the value of the max
attribute, if present, or 1.0, otherwise. The max
attribute, if present, must
have a value greater than zero.
The progress
element is the wrong
element to use for something that is just a gauge, as opposed to
task progress. For instance, indicating disk space usage using
progress
would be inappropriate. Instead, the
meter
element is available for such use cases.
position
For a determinate progress bar (one with known current and maximum values), returns the result of dividing the current value by the maximum value.
For an indeterminate progress bar, returns −1.
If the progress bar is an indeterminate progress bar, then the
value
IDL
attribute, on getting, must return 0. Otherwise, it must return the
current value. On
setting, the given value must be converted to the best
representation of the number as a floating point number and
then the value
content
attribute must be set to that string.
The max
IDL
attribute must reflect the content attribute of the
same name, limited to numbers greater than zero. The
default value for max
is
1.0.
meter
elementmeter
element descendants.value
min
max
low
high
optimum
interface HTMLMeterElement : HTMLElement { attribute double value; attribute double min; attribute double max; attribute double low; attribute double high; attribute double optimum; readonly attribute NodeList labels; };
The meter
element represents a scalar
measurement within a known range, or a fractional value; for example
disk usage, the relevance of a query result, or the fraction of a
voting population to have selected a particular candidate.
This is also known as a gauge.
The meter
element should not be used to
indicate progress (as in a progress bar). For that role, HTML
provides a separate progress
element.
The meter
element also does not
represent a scalar value of arbitrary range — for example, it
would be wrong to use this to report a weight, or height, unless
there is a known maximum value.
There are six attributes that determine the semantics of the gauge represented by the element.
The min
attribute
specifies the lower bound of the range, and the max
attribute specifies
the upper bound. The value
attribute
specifies the value to have the gauge indicate as the "measured"
value.
The other three attributes can be used to segment the gauge's
range into "low", "medium", and "high" parts, and to indicate which
part of the gauge is the "optimum" part. The low
attribute specifies
the range that is considered to be the "low" part, and the high
attribute specifies
the range that is considered to be the "high" part. The optimum
attribute
gives the position that is "optimum"; if that is higher than the
"high" value then this indicates that the higher the value, the
better; if it's lower than the "low" mark then it indicates that
lower values are better, and naturally if it is in between then it
indicates that neither high nor low values are good.
The value
attribute must be
specified. The value
, min
, low
, high
, max
, and optimum
attributes, when present,
must have values that are valid floating point numbers.
In addition, the attributes' values are further constrained:
Let value be the value
attribute's number.
If the min
attribute
attribute is specified, then let minimum be that
attribute's value; otherwise, let it be zero.
If the max
attribute
attribute is specified, then let maximum be that
attribute's value; otherwise, let it be 1.0.
The following inequalities must hold, as applicable:
low
≤ maximum (if low
is specified)high
≤ maximum (if high
is specified)optimum
≤ maximum (if optimum
is specified)low
≤ high
(if both low
and high
are specified)If no minimum or maximum is specified, then the range is assumed to be 0..1, and the value thus has to be within that range.
Authors are encouraged to include a textual representation of the
gauge's state in the element's contents, for users of user agents
that do not support the meter
element.
The following examples show three gauges that would all be three-quarters full:
Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total)</meter> Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter> Tickets sold: <meter min="0" max="100" value="75"></meter>
The following example is incorrect use of the element, because it doesn't give a range (and since the default maximum is 1, both of the gauges would end up looking maxed out):
<p>The grapefruit pie had a radius of <meter value=12>12cm</meter> and a height of <meter value=2>2cm</meter>.</p> <!-- BAD! -->
Instead, one would either not include the meter element, or use the meter element with a defined range to give the dimensions in context compared to other pies:
<p>The grapefruit pie had a radius of 12cm and a height of 2cm.</p> <dl> <dt>Radius: <dd> <meter min=0 max=20 value=12>12cm</meter> <dt>Height: <dd> <meter min=0 max=10 value=2>2cm</meter> </dl>
There is no explicit way to specify units in the
meter
element, but the units may be specified in the
title
attribute in free-form text.
The example above could be extended to mention the units:
<dl> <dt>Radius: <dd> <meter min=0 max=20 value=12 title="centimeters">12cm</meter> <dt>Height: <dd> <meter min=0 max=10 value=2 title="centimeters">2cm</meter> </dl>
The following markup:
<h3>Suggested groups</h3> <menu type="toolbar"> <a href="?cmd=hsg" onclick="hideSuggestedGroups()">Hide suggested groups</a> </menu> <ul> <li> <p><a href="/group/comp.infosystems.www.authoring.stylesheets/view">comp.infosystems.www.authoring.stylesheets</a> - <a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe">join</a></p> <p>Group description: <strong>Layout/presentation on the WWW.</strong></p> <p><meter value="0.5">Moderate activity,</meter> Usenet, 618 subscribers</p> </li> <li> <p><a href="/group/netscape.public.mozilla.xpinstall/view">netscape.public.mozilla.xpinstall</a> - <a href="/group/netscape.public.mozilla.xpinstall/subscribe">join</a></p> <p>Group description: <strong>Mozilla XPInstall discussion.</strong></p> <p><meter value="0.25">Low activity,</meter> Usenet, 22 subscribers</p> </li> <li> <p><a href="/group/mozilla.dev.general/view">mozilla.dev.general</a> - <a href="/group/mozilla.dev.general/subscribe">join</a></p> <p><meter value="0.25">Low activity,</meter> Usenet, 66 subscribers</p> </li> </ul>
Might be rendered as follows:
User agents combine the value of
the title
attribute and the other
attributes to provide context-sensitive help or inline text
detailing the actual values.
For example, the following snippet:
<meter min=0 max=60 value=23.2 title=seconds></meter>
...might cause the user agent to display a gauge with a tooltip saying "Value: 23.2 out of 60." on one line and "seconds" on a second line.
The value
IDL
attribute, on getting, must return the actual value. On setting, the
given value must be converted to the best representation of
the number as a floating point number and then the value
content attribute must be set
to that string.
The following example shows how a gauge could fall back to localized or pretty-printed text.
<p>Disk usage: <meter min=0 value=170261928 max=233257824>170 261 928 bytes used out of 233 257 824 bytes available</meter></p>
A form-associated element can have a relationship
with a form
element, which is called the element's
form owner. If a form-associated element is
not associated with a form
element, its form
owner is said to be null.
A form-associated element is, by default, associated
with its ancestor
form
element, but may have a form
attribute specified to
override this.
This feature allows authors to work around the lack
of support for nested form
elements.
If a form-associated element has a form
attribute specified, then that
attribute's value must be the ID of a form
element in
the element's owner Document
.
form
Returns the element's form owner.
Returns null if there isn't one.
The name
content
attribute gives the name of the form control, as used in form
submission and in the form
element's elements
object. If the attribute
is specified, its value must not be the empty string.
Any non-empty value for name
is allowed, but the names "_charset_
" and "isindex
" are special:
isindex
This value, if used as the name of a Text control that is the first
control in a form that is submitted using the application/x-www-form-urlencoded
mechanism, causes the submission to only include the value of this
control, with no name.
_charset_
This value, if used as the name of a value
attribute, is automatically
given a value during submission consisting of the submission
character encoding.
The name
IDL
attribute must reflect the name
content attribute.
The disabled
content attribute is a boolean attribute.
A form control is disabled
if its disabled
attribute is
set, or if it is a descendant of a fieldset
element
whose disabled
attribute
is set and is not a descendant of that
fieldset
element's first legend
element
child, if any.
The disabled
IDL
attribute must reflect the disabled
content attribute.
The autofocus
content attribute allows the author to indicate that a control is to
be focused as soon as the page is loaded, allowing the user to just
start typing without having to manually focus the main control.
The autofocus
attribute is
a boolean attribute.
There must not be more than one element in the document with the
autofocus
attribute
specified.
The autofocus
IDL attribute must reflect the content attribute of the
same name.
In the following snippet, the text control would be focused when the document was loaded.
<input maxlength="256" name="q" value="" autofocus> <input type="submit" value="Search">
A form control maxlength
attribute, controlled by a dirty value flag, declares a limit on the number of
characters a user can input.
If an element has its form
control maxlength
attribute specified,
the attribute's value must be a valid non-negative
integer. If the attribute is specified and applying the
rules for parsing non-negative integers to its value
results in a number, then that number is the element's maximum
allowed value length. If the attribute is omitted or parsing
its value results in an error, then there is no maximum
allowed value length.
Attributes for form submission can be specified both
on form
elements and on submit buttons (elements that
represent buttons that submit forms, e.g. an input
element whose type
attribute is
in the Submit Button
state).
The attributes for form submission that may be
specified on form
elements are action
, enctype
, method
, novalidate
, and target
.
The corresponding attributes for form submission
that may be specified on submit
buttons are formaction
, formenctype
, formmethod
, formnovalidate
, and formtarget
. When omitted, they
default to the values given on the corresponding attributes on the
form
element.
The action
and
formaction
content attributes, if specified, must have a value that is a
valid non-empty URL potentially surrounded by
spaces.
The action of an element is
the value of the element's formaction
attribute, if the
element is a submit
button and has such an attribute, or the value of its
form owner's action
attribute, if it has one, or else the empty string.
The method
and
formmethod
content attributes are enumerated
attributes with the following keywords and states:
get
, mapping
to the state GET, indicating
the HTTP GET method.post
, mapping
to the state POST, indicating
the HTTP POST method.The missing value default for these attributes is the GET state.
The method of an element is
one of those states. If the element is a submit button and has a formmethod
attribute, then the
element's method is that
attribute's state; otherwise, it is the form owner's
method
attribute's state.
The enctype
and
formenctype
content attributes are enumerated
attributes with the following keywords and states:
application/x-www-form-urlencoded
" keyword and corresponding state.multipart/form-data
" keyword and corresponding state.text/plain
" keyword and corresponding state.The missing value default for these attributes is the
application/x-www-form-urlencoded
state.
The enctype of an element
is one of those three states. If the element is a submit button and has a formenctype
attribute, then the
element's enctype is that
attribute's state; otherwise, it is the form owner's
enctype
attribute's state.
The target
and
formtarget
content attributes, if specified, must have values that are valid browsing
context names or keywords.
The target of an element is
the value of the element's formtarget
attribute, if the
element is a submit
button and has such an attribute; or the value of its
form owner's target
attribute, if it has such an attribute; or, if the
Document
contains a base
element with a
target
attribute, then the
value of the target
attribute
of the first such base
element; or, if there is no such
element, the empty string.
The novalidate
and formnovalidate
content attributes are boolean
attributes. If present, they indicate that the form is not to
be validated during submission.
The no-validate state of
an element is true if the element is a submit button and the element's
formnovalidate
attribute
is present, or if the element's form owner's novalidate
attribute is present,
and false otherwise.
This attribute is useful to include "save" buttons on forms that have validation constraints, to allow users to save their progress even though they haven't fully entered the data in the form. The following example shows a simple form that has two required fields. There are three buttons: one to submit the form, which requires both fields to be filled in; one to save the form so that the user can come back and fill it in later; and one to cancel the form altogether.
<form action="editor.cgi" method="post"> <p><label>Name: <input required name=fn></label></p> <p><label>Essay: <textarea required name=essay></textarea></label></p> <p><input type=submit name=submit value="Submit essay"></p> <p><input type=submit formnovalidate name=save value="Save essay"></p> <p><input type=submit formnovalidate name=cancel value="Cancel"></p> </form>
The action
IDL
attribute must reflect the content attribute of the
same name, except that on getting, when the content attribute is
missing or its value is the empty string, the document's
address must be returned instead. The target
IDL attribute must
reflect the content attribute of the same name. The
method
and enctype
IDL attributes
must reflect the respective content attributes of the
same name, limited to only known values. The encoding
IDL attribute
must reflect the enctype
content attribute,
limited to only known values. The noValidate
IDL
attribute must reflect the novalidate
content attribute. The
formAction
IDL
attribute must reflect the formaction
content attribute,
except that on getting, when the content attribute is missing or its
value is the empty string, the document's address must
be returned instead. The formEnctype
IDL
attribute must reflect the formenctype
content attribute,
limited to only known values. The formMethod
IDL
attribute must reflect the formmethod
content attribute,
limited to only known values. The formNoValidate
IDL
attribute must reflect the formnovalidate
content
attribute. The formTarget
IDL
attribute must reflect the formtarget
content attribute.
A form control dirname
attribute
on a form control element enables the submission of the
directionality of the element, and gives the name of the
field that contains this value during form submission.
If such an attribute is specified, its value must not be the empty
string.
The input
and textarea
elements define
the following members in their DOM interfaces for handling their
selection:
void select(); attribute unsigned long selectionStart; attribute unsigned long selectionEnd; attribute DOMString selectionDirection; void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
These methods and attributes expose and control the selection of
input
and textarea
text fields.
select
()Selects everything in the text field.
selectionStart
[ = value ]Returns the offset to the start of the selection.
Can be set, to change the start of the selection.
selectionEnd
[ = value ]Returns the offset to the end of the selection.
Can be set, to change the end of the selection.
selectionDirection
[ = value ]Returns the current direction of the selection.
Can be set, to change the direction of the selection.
The possible values are "forward
", "backward
", and "none
".
setSelectionRange
(start, end [, direction] )Changes the selection to cover the given substring in the given direction. If the direction is omitted, it will be reset to be the platform default (none or forward).
Characters with no visible rendering, such as U+200D ZERO WIDTH JOINER, still count as characters. Thus, for instance, the selection can include just an invisible character, and the text insertion cursor can be placed to one side or another of such a character.
To obtain the currently selected text, the following JavaScript suffices:
var selectionText = control.value.substring(control.selectionStart, control.selectionEnd);
To add some text at the start of a text control, while maintaining the text selection, the three attributes must be preserved:
var oldStart = control.selectionStart; var oldEnd = control.selectionEnd; var oldDirection = control.selectionDirection; var prefix = "http://"; control.value = prefix + control.value; control.setSelectionRange(oldStart + prefix.length, oldEnd + prefix.length, oldDirection);
willValidate
Returns true if the element will be validated when the form is submitted; false otherwise.
setCustomValidity
(message)Sets a custom error, so that the element would fail to validate. The given message is the message to be shown to the user when reporting the problem to the user.
If the argument is the empty string, clears the custom error.
validity
. valueMissing
Returns true if the element has no value but is a required field; false otherwise.
validity
. typeMismatch
Returns true if the element's value is not in the correct syntax; false otherwise.
validity
. patternMismatch
Returns true if the element's value doesn't match the provided pattern; false otherwise.
validity
. tooLong
Returns true if the element's value is longer than the provided maximum length; false otherwise.
validity
. rangeUnderflow
Returns true if the element's value is lower than the provided minimum; false otherwise.
validity
. rangeOverflow
Returns true if the element's value is higher than the provided maximum; false otherwise.
validity
. stepMismatch
Returns true if the element's value doesn't fit the rules given by the step
attribute; false otherwise.
validity
. customError
Returns true if the element has a custom error; false otherwise.
validity
. valid
Returns true if the element's value has no validity problems; false otherwise.
checkValidity
()Returns true if the element's value has no validity problems;
false otherwise. Fires an invalid
event at the element in the
latter case.
validationMessage
Returns the error message that would be shown to the user if the element was to be checked for validity.
In the following example, a script checks the value of a form
control each time it is edited, and whenever it is not a valid
value, uses the setCustomValidity()
method
to set an appropriate message.
<label>Feeling: <input name=f type="text" oninput="check(this)"></label> <script> function check(input) { if (input.value == "good" || input.value == "fine" || input.value == "tired") { input.setCustomValidity('"' + input.value + '" is not a feeling.'); } else { // input is fine -- reset the error message input.setCustomValidity(''); } } </script>
The validity
attribute must return a ValidityState
object that
represents the validity states of the element. This
object is live, and the same object must be returned
each time the element's validity
attribute is retrieved.
Servers should not rely on client-side validation. Client-side validation can be intentionally bypassed by hostile users, and unintentionally bypassed by users of older user agents or automated tools that do not implement these features. The constraint validation features are only intended to improve the user experience, not to provide any kind of security mechanism.
When a form is submitted, the data in the form is converted into the structure specified by the enctype, and then sent to the destination specified by the action using the given method.
For example, take the following form:
<form action="/find.cgi" method=get> <input type=text name=t> <input type=search name=q> <input type=submit> </form>
If the user types in "cats" in the first field and "fur" in the
second, and then hits the submit button, then the user agent will
load /find.cgi?t=cats&q=fur
.
On the other hand, consider this form:
<form action="/find.cgi" method=post enctype="multipart/form-data"> <input type=text name=t> <input type=search name=q> <input type=submit> </form>
Given the same user input, the result on submission is quite different: the user agent instead does an HTTP POST to the given URL, with as the entity body something like the following text:
------kYFrd4jNJEgCervE Content-Disposition: form-data; name="t" cats ------kYFrd4jNJEgCervE Content-Disposition: form-data; name="q" fur ------kYFrd4jNJEgCervE--
This form data set encoding is in many ways an aberrant monstrosity, the result of many years of implementation accidents and compromises leading to a set of requirements necessary for interoperability, but in no way representing good design practices. In particular, readers are cautioned to pay close attention to the twisted details involving repeated (and in some cases nested) conversions between character encodings and byte sequences.
To decode application/x-www-form-urlencoded
payloads, the following algorithm should be used. This
algorithm uses as inputs the payload itself, payload, consisting of a Unicode string using only
characters in the range U+0000 to U+007F; a default character
encoding encoding; and optionally an isindex flag indicating that the payload is to be
processed as if it had been generated for a form containing an isindex
control. The output of
this algorithm is a sorted list of name-value pairs. If the isindex flag is set and the first control really was
an isindex
control, then
the first name-value pair will have as its name the empty
string.
Let strings be the result of strictly splitting the string payload on U+0026 AMPERSAND characters (&).
If the isindex flag is set and the first string in strings does not contain a "=" (U+003D) character, insert a U+003D EQUALS SIGN character (=) at the start of the first string in strings.
Let pairs be an empty list of name-value pairs.
For each string string in strings, run these substeps:
If string contains a "=" (U+003D) character, then let name be the substring of string from the start of string up to but excluding its first "=" (U+003D) character, and let value be the substring from the first character, if any, after the first "=" (U+003D) character up to the end of string. If the first U+003D EQUALS SIGN character (=) is the first character, then name will be the empty string. If it is the last character, then value will be the empty string.
Otherwise, string contains no "=" (U+003D) characters. Let name have the value of string and let value be the empty string.
Replace any "+" (U+002B) characters in name and value with U+0020 SPACE characters.
Replace any escape in name and value with the character represented by the escape. This replacement most not be recursive.
An escape is a "%" (U+0025) character followed by two characters in the ranges ASCII digits, 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.
The character represented by an escape is the Unicode character whose code point is equal to the value of the two characters after the "%" (U+0025) character, interpreted as a hexadecimal number (in the range 0..255).
So for instance the string "A%2BC
" would become "A+C
".
Similarly, the string "100%25AA%21
"
becomes the string "100%AA!
".
Convert the name and value strings to their byte representation in ISO-8859-1 (i.e. convert the Unicode string to a byte string, mapping code points to byte values directly).
Add a pair consisting of name and value to pairs.
If any of the name-value pairs in pairs
have a name component consisting of the string "_charset_
" encoded in US-ASCII, and the value
component of the first such pair, when decoded as US-ASCII, is the
name of a supported character encoding, then let encoding be that character encoding (replacing the
default passed to the algorithm).
Convert the name and value components of each name-value pair in pairs to Unicode by interpreting the bytes according to the encoding encoding.
Return pairs.
Parameters on the
application/x-www-form-urlencoded
MIME type are
ignored. In particular, this MIME type does not support the charset
parameter.
For details on how to interpret multipart/form-data
payloads, see RFC 2388. [RFC2388]
Payloads using the text/plain
format are intended to
be human readable. They are not reliably interpretable by computer,
as the format is ambiguous (for example, there is no way to
distinguish a literal newline in a value from the newline at the end
of the value).
The details, summary, command, and menu elements.
details
elementsummary
element followed by flow content.open
interface HTMLDetailsElement : HTMLElement { attribute boolean open; };
The details
element represents a
disclosure widget from which the user can obtain additional
information or controls.
The details
element is not appropriate
for footnotes. Please see the section on
footnotes for details on how to mark up footnotes.
The summary
element
child of the element, if any, represents the summary or
legend of the details.
The rest of the element's contents represents the additional information or controls.
The open
content attribute is a boolean attribute. If present,
it indicates that both the summary and the additional information is
to be shown to the user. If the attribute is absent, only the
summary is to be shown.
The open
IDL
attribute must reflect the open
content attribute.
The following example shows the details
element
being used to hide technical details in a progress report.
<section class="progress window"> <h1>Copying "Really Achieving Your Childhood Dreams"</h1> <details> <summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary> <dl> <dt>Transfer rate:</dt> <dd>452KB/s</dd> <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd> <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd> <dt>Duration:</dt> <dd>01:16:27</dd> <dt>Color profile:</dt> <dd>SD (6-1-6)</dd> <dt>Dimensions:</dt> <dd>320×240</dd> </dl> </details> </section>
The following shows how a details
element can be
used to hide some controls by default:
<details> <summary><label for=fn>Name & Extension:</label></summary> <p><input type=text id=fn name=fn value="Pillar Magazine.pdf"> <p><label><input type=checkbox name=ext checked> Hide extension</label> </details>
One could use this in conjunction with other details
in a list to allow the user to collapse a set of fields down to a
small set of headings, with the ability to open each one.
In these examples, the summary really just summarises what the controls can change, and not the actual values, which is less than ideal.
Because the open
attribute is added and removed automatically as the user interacts
with the control, it can be used in CSS to style the element
differently based on its state. Here, a stylesheet is used to
animate the color of the summary when the element is opened or
closed:
<style> details > summary { transition: color 1s; color: black; } details[open] > summary { color: red; } </style> <details> <summary>Automated Status: Operational</summary> <p>Velocity: 12m/s</p> <p>Direction: North</p> </details>
summary
elementdetails
element.HTMLElement
.The summary
element represents a
summary, caption, or legend for the rest of the contents of the
summary
element's parent details
element.
command
elementtype
label
icon
disabled
checked
radiogroup
command
title
attribute has special semantics on this element.interface HTMLCommandElement : HTMLElement { attribute DOMString type; attribute DOMString label; attribute DOMString icon; attribute boolean disabled; attribute boolean checked; attribute DOMString radiogroup; readonly attribute HTMLElement? command; };
The command
element represents a command that the user
can invoke.
A command can be explicitly part of a context menu or toolbar,
using the menu
element. It can also be put anywhere
else on a page, either just to define a keyboard shortcut, or to
define a command that is then referenced from other
command
elements.
A command
element that uses the
type
,
label
,
icon
,
disabled
,
checked
,
radiogroup
,
and
title
attributes defines a new
command. A command
element that uses the command
attribute
defines a command by reference to another one. This allows authors
to define a command once, and set its state (e.g. whether it is
active or disabled) in one place, and have all references to that
command in the user interface change at the same time.
The type
attribute indicates the kind of command: either a normal command
with an associated action, or a state or option that can be toggled,
or a selection of one item from a list of items.
The attribute is an enumerated attribute with three
keywords and states. The "command
"
keyword maps to the Command state, the
"checkbox
"
keyword maps to the Checkbox state, and
the "radio
"
keyword maps to the Radio state. The
missing value default is the Command state.
The element represents a normal command with an associated action.
The element represents a state or option that can be toggled.
The element represents a selection of one item from a list of items.
The label
attribute gives the name of the command, as shown to the user. The
label
attribute must be
specified and must have a value that is not the empty string.
The title
attribute gives a hint describing the command, which might be shown
to the user to help him.
The icon
attribute gives a picture that represents the command. If the
attribute is specified, the attribute's value must contain a
valid non-empty URL potentially surrounded by
spaces.
The disabled
attribute
is a boolean attribute that, if present, indicates that
the command is not available in the current state.
The distinction between disabled
and is subtle. A command would be
disabled if, in the same context, it could be enabled if only
certain aspects of the situation were changed. A command would be
marked as hidden if, in that situation, the command will never be
enabled. For example, in the context menu for a water faucet, the
command "open" might be disabled if the faucet is already open, but
the command "eat" would be marked hidden since the faucet could
never be eaten.
The checked
attribute is a boolean attribute that, if present,
indicates that the command is selected. The attribute must be
omitted unless the type
attribute is in either the Checkbox state or
the Radio
state.
The radiogroup
attribute gives the name of the group of commands that will be
toggled when the command itself is toggled, for commands whose type
attribute has the value "radio
". The scope of the name is the child list of
the parent element. The attribute must be omitted unless the type
attribute is in the Radio state.
If a command
element slave has a
command
attribute, and slave is in a
Document
, and there is an element in that
Document
whose ID has a
value equal to the value of slave's command
attribute, and the first
such element in tree order, hereafter master, itself defines
a command and either is not a command
element or
does not itself have a command
attribute, then the
master command of slave is master.
An element with a
command
attribute must have a master command and must not have any
type
,
label
,
icon
,
disabled
,
checked
, or
radiogroup
attributes.
The type
IDL
attribute must reflect the content attribute of the
same name, limited to only known values.
The label
, icon
, disabled
, checked
, and radiogroup
IDL attributes must reflect the respective content
attributes of the same name.
command
elements are not rendered
unless they form part of a menu.
Here is an example of a toolbar with three buttons that let the user toggle between left, center, and right alignment. One could imagine such a toolbar as part of a text editor. The toolbar also has a separator followed by another button labeled "Publish", though that button is disabled.
<menu type="toolbar"> <command type="radio" radiogroup="alignment" checked="checked" label="Left" icon="icons/alL.png" onclick="setAlign('left')"> <command type="radio" radiogroup="alignment" label="Center" icon="icons/alC.png" onclick="setAlign('center')"> <command type="radio" radiogroup="alignment" label="Right" icon="icons/alR.png" onclick="setAlign('right')"> <hr> <command type="command" disabled label="Publish" icon="icons/pub.png" onclick="publish()"> </menu>
menu
elementtype
attribute is in the toolbar state: Interactive content.type
attribute is in the toolbar state or the list state: Palpable content.li
elements.type
label
interface HTMLMenuElement : HTMLElement { attribute DOMString type; attribute DOMString label; };
The menu
element represents a list of commands.
The type
attribute
is an enumerated attribute indicating the kind of menu
being declared. The attribute has three states. The context
keyword maps to the
context menu state, in which
the element is declaring a context menu. The toolbar
keyword maps to the
toolbar state, in which the
element is declaring a toolbar. The attribute may also be
omitted. The missing value default is the list state, which indicates that the element is merely
a list of commands that is neither declaring a context menu nor
defining a toolbar.
If a menu
element's type
attribute is in the context menu state, then the
element represents the commands of a context menu, and
the user can only interact with the commands if that context menu is
activated.
If a menu
element's type
attribute is in the toolbar state, then the element
represents a list of active commands that the user can
immediately interact with.
If a menu
element's type
attribute is in the list state, then the element either
represents an unordered list of items (each represented
by an li
element), each of which represents a command
that the user can perform or activate, or, if the element has no
li
element children, flow content
describing available commands.
The label
attribute gives the label of the menu. It is used by user agents to
display nested menus in the UI. For example, a context menu
containing another menu would use the nested menu's label
attribute for the submenu's
menu label.
The type
and label
IDL attributes must
reflect the respective content attributes of the same
name.
The menu
element is used to define context menus and
toolbars.
For example, the following represents a toolbar with three menu buttons on it, each of which has a dropdown menu with a series of options:
<menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="fnew()">New...</button> <button type="button" onclick="fopen()">Open...</button> <button type="button" onclick="fsave()">Save</button> <button type="button" onclick="fsaveas()">Save as...</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="ecopy()">Copy</button> <button type="button" onclick="ecut()">Cut</button> <button type="button" onclick="epaste()">Paste</button> </menu> </li> <li> <menu label="Help"> <li><a href="help.html">Help</a></li> <li><a href="about.html">About</a></li> </menu> </li> </menu>
In a supporting user agent, this might look like this:
In a legacy user agent, the above would look like a bulleted list with three items, the first of which has four buttons, the second of which has three, and the third of which has two nested bullet points with two items consisting of links.
The following implements a similar toolbar, with a single button whose values, when selected, redirect the user to Web sites.
<form action="redirect.cgi"> <menu type="toolbar"> <label for="goto">Go to...</label> <menu label="Go"> <select id="goto"> <option value="" selected="selected"> Select site: </option> <option value="http://www.apple.com/"> Apple </option> <option value="http://www.mozilla.org/"> Mozilla </option> <option value="http://www.opera.com/"> Opera </option> </select> <span><input type="submit" value="Go"></span> </menu> </menu> </form>
The behavior in supporting user agents is similar to the example
above, but here the legacy behavior consists of a single
select
element with a submit button. The submit button
doesn't appear in the toolbar, because it is not a child of the
menu
element or of its li
children.
The contextmenu
attribute gives the element's context
menu. The value must be the ID of a menu
element in the
DOM.
The contextMenu
IDL attribute must reflect the contextmenu
content attribute.
Here is an example of a context menu for an input control:
<form name="npc"> <label>Character name: <input name=char type=text contextmenu=namemenu required></label> <menu type=context id=namemenu> <command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()"> <command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)"> </menu> </form>
This adds two items to the control's context menu, one called "Pick random name", and one called "Prefill other fields based on name". They invoke scripts that are not shown in the example above.
A command is the abstraction behind menu items, buttons, and links. Once a command is defined, other parts of the interface can refer to the same command, allowing many access points to a single feature to share facets such as the Disabled State.
Commands are defined to have the following facets:
These facets are exposed on elements using the command API:
commandType
Exposes the Type facet of the command.
id
Exposes the ID facet of the command.
commandLabel
Exposes the Label facet of the command.
title
Exposes the Hint facet of the command.
commandIcon
Exposes the Icon facet of the command.
accessKeyLabel
Exposes the Access Key facet of the command.
Exposes the
facet of the command.commandDisabled
Exposes the Disabled State facet of the command.
commandChecked
Exposes the Checked State facet of the command.
click
()Triggers the Action of the command.
commands
Returns an HTMLCollection
of the elements in the
Document
that define commands and have IDs.
User agents may expose the commands whose facet is false
(visible) and whose elements are in a
Document
. For example, such commands could be
listed in the user agent's menu bar. User agents are encouraged to
do this especially for commands that have Access Keys, as a way to
advertise those keys to the user.
Links are a conceptual construct, created by a
,
area
, and link
elements, that represent a connection between two
resources, one of which is the current Document
. There
are two kinds of links in HTML:
These are links to resources that are to be used to augment the current document, generally automatically processed by the user agent.
These are links to other resources that are generally exposed to the user by the user agent so that the user can cause the user agent to navigate to those resources, e.g. to visit them in a browser or download them.
For link
elements with an href
attribute and a rel
attribute, links must be created
for the keywords of the rel
attribute, as defined for those keywords in the link types section.
Similarly, for a
and area
elements with
an href
attribute and a
rel
attribute, links must be
created for the keywords of the rel
attribute as defined for those
keywords in the link types section. Unlike
link
elements, however, a
and
area
element with an href
attribute that either do not
have a rel
attribute, or
whose rel
attribute has no
keywords that are defined as specifying hyperlinks, must also create a
hyperlink. This implied hyperlink has no special
meaning (it has no link type) beyond
linking the element's document to the resource given by the
element's href
attribute.
A hyperlink can have one or more hyperlink annotations that modify the processing semantics of that hyperlink.
a
and area
elementsThe href
attribute on a
and area
elements must have
a value that is a valid URL potentially surrounded by
spaces.
The href
attribute on a
and area
elements is not
required; when those elements do not have href
attributes they do not
create hyperlinks.
The target
attribute, if present, must be a valid browsing context name
or keyword. It gives the name of the browsing
context that will be used.
The rel
attribute on a
and area
elements controls
what kinds of links the elements create. The attribue's value must
be a set of space-separated tokens. The allowed keywords and their meanings are
defined below.
The rel
attribute has
no default value. If the attribute is omitted or if none of the
values in the attribute are recognized by the user agent, then the
document has no particular relationship with the destination
resource other than there being a hyperlink between the two.
The media
attribute describes for which media the target document was
designed. It is purely advisory. The value must be a valid
media query. The default, if the media
attribute is omitted, is
"all
".
The hreflang
attribute on a
and area
elements that
create hyperlinks, if present, gives
the language of the linked resource. It is purely advisory. The
value must be a valid BCP 47 language tag. [BCP47]
The type
attribute, if present, gives the MIME type of the
linked resource. It is purely advisory. The value must be a
valid MIME type.
The following table summarizes the link types that are defined by this specification. This table is non-normative; the actual definitions for the link types are given in the next few sections.
In this section, the term referenced document refers to the resource identified by the element representing the link, and the term current document refers to the resource within which the element representing the link finds itself.
Except where otherwise specified, a keyword must not be specified
more than once per rel
attribute.
Link types are always ASCII case-insensitive.
Thus, rel="next"
is the
same as rel="NEXT"
.
Link type | Effect on... | Brief description | |
---|---|---|---|
link |
a and area |
||
alternate |
Hyperlink | Hyperlink | Gives alternate representations of the current document. |
author |
Hyperlink | Hyperlink | Gives a link to the current document's author. |
bookmark |
not allowed | Hyperlink | Gives the permalink for the nearest ancestor section. |
help |
Hyperlink | Hyperlink | Provides a link to context-sensitive help. |
icon |
External Resource | not allowed | Imports an icon to represent the current document. |
license |
Hyperlink | Hyperlink | Indicates that the main content of the current document is covered by the copyright license described by the referenced document. |
next |
Hyperlink | Hyperlink | Indicates that the current document is a part of a series, and that the next document in the series is the referenced document. |
nofollow |
not allowed | Annotation | Indicates that the current document's original author or publisher does not endorse the referenced document. |
noreferrer |
not allowed | Annotation | Requires that the user agent not send an HTTP Referer (sic) header if the user follows the hyperlink. |
prefetch |
External Resource | External Resource | Specifies that the target resource should be preemptively cached. |
prev |
Hyperlink | Hyperlink | Indicates that the current document is a part of a series, and that the previous document in the series is the referenced document. |
search |
Hyperlink | Hyperlink | Gives a link to a resource that can be used to search through the current document and its related pages. |
stylesheet |
External Resource | not allowed | Imports a stylesheet. |
tag |
not allowed | Hyperlink | Gives a tag (identified by the given address) that applies to the current document. |
alternate
"The alternate
keyword may be
used with link
, a
, and area
elements.
The meaning of this keyword depends on the values of the other attributes.
link
element and the rel
attribute also contains the
keyword stylesheet
The alternate
keyword
modifies the meaning of the stylesheet
keyword in the way
described for that keyword. The alternate
keyword does not create a
link of its own.
alternate
keyword is
used with the type
attribute set to the value application/rss+xml
or the value application/atom+xml
The keyword creates a hyperlink referencing a syndication feed (though not necessarily syndicating exactly the same content as the current page).
The keyword creates a hyperlink referencing an alternate representation of the current document.
The nature of the referenced document is given by the media
, hreflang
, and type
attributes.
If the alternate
keyword is
used with the media
attribute, it indicates that the referenced document is intended for
use with the media specified.
If the alternate
keyword is
used with the hreflang
attribute, and that attribute's value differs from the root
element's language, it indicates that the
referenced document is a translation.
If the alternate
keyword is
used with the type
attribute, it indicates that the referenced document is a
reformulation of the current document in the specified format.
The media
, hreflang
, and type
attributes can be combined
when specified with the alternate
keyword.
For example, the following link is a French translation that uses the PDF format:
<link rel=alternate type=application/pdf hreflang=fr href=manual-fr>
This relationship is transitive — that is, if a document
links to two other documents with the link type "alternate
", then, in addition to
implying that those documents are alternative representations of
the first document, it is also implying that those two documents
are alternative representations of each other.
author
"The author
keyword may be
used with link
, a
, and area
elements. This keyword creates a hyperlink.
For a
and area
elements, the author
keyword indicates that the
referenced document provides further information about the author of
the nearest article
element ancestor of the element
defining the hyperlink, if there is one, or of the page as a whole,
otherwise.
For link
elements, the author
keyword indicates that the
referenced document provides further information about the author
for the page as a whole.
The "referenced document" can be, and often is, a
mailto:
URL giving the e-mail address of the
author. [MAILTO]
bookmark
"The bookmark
keyword may be
used with a
and area
elements. This
keyword creates a hyperlink.
The bookmark
keyword gives a
permalink for the nearest ancestor article
element of
the linking element in question, or of the section the linking element is most
closely associated with, if there are no ancestor
article
elements.
The following snippet has three permalinks. A user agent could determine which permalink applies to which part of the spec by looking at where the permalinks are given.
... <body> <h1>Example of permalinks</h1> <div id="a"> <h2>First example</h2> <p><a href="a.html" rel="bookmark">This</a> permalink applies to only the content from the first H2 to the second H2. The DIV isn't exactly that section, but it roughly corresponds to it.</p> </div> <h2>Second example</h2> <article id="b"> <p><a href="b.html" rel="bookmark">This</a> permalink applies to the outer ARTICLE element (which could be, e.g., a blog post).</p> <article id="c"> <p><a href="c.html" rel="bookmark">This</a> permalink applies to the inner ARTICLE element (which could be, e.g., a blog comment).</p> </article> </article> </body> ...
help
"The help
keyword may be used with
link
, a
, and area
elements. This keyword creates a hyperlink.
For a
and area
elements, the help
keyword indicates that the referenced
document provides further help information for the parent of the
element defining the hyperlink, and its children.
In the following example, the form control has associated context-sensitive help. The user agent could use this information, for example, displaying the referenced document if the user presses the "Help" or "F1" key.
<p><label> Topic: <input name=topic> <a href="help/topic.html" rel="help">(Help)</a></label></p>
For link
elements, the help
keyword indicates that the referenced
document provides help for the page as a whole.
For a
and area
elements, on some
browsers, the help
keyword causes the
link to use a different cursor.
icon
"The icon
keyword may be used with
link
elements. This keyword creates an external resource link.
Icons could be auditory icons, visual icons, or other kinds of icons.
The sizes
attribute gives the sizes of icons for visual media. Its value, if
present, is merely advisory. User agents may use the value to decide
which icon(s) to use if multiple icons are available.
If specified, the attribute must have a value that is an
unordered set of unique space-separated tokens which
are ASCII case-insensitive. Each value must be either
an ASCII case-insensitive match for the string "any
", or a value that consists of
two valid non-negative
integers that do not have a leading "0" (U+0030)
character and that are separated by a single U+0078 LATIN SMALL
LETTER X or U+0058 LATIN CAPITAL LETTER X character.
The keywords represent icon sizes.
The any
keyword
represents that the resource contains a scalable icon, e.g. as
provided by an SVG image.
The keywords specified on the sizes
attribute must not represent
icon sizes that are not actually available in the linked
resource.
The following snippet shows the top part of an application with several icons.
<!DOCTYPE HTML> <html> <head> <title>lsForums — Inbox</title> <link rel=icon href=favicon.png sizes="16x16" type="image/png"> <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon"> <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768"> <link rel=icon href=iphone.png sizes="57x57" type="image/png"> <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml"> <link rel=stylesheet href=lsforums.css> <script src=lsforums.js></script> <meta name=application-name content="lsForums"> </head> <body> ...
For historical reasons, the icon
keyword may be preceded by the keyword "shortcut
". If the "shortcut
"
keyword is present, it must be come immediately before the icon
keyword and the two keywords must be
separated by only a single U+0020 SPACE character.
license
"The license
keyword may be used
with link
, a
, and area
elements. This keyword creates a hyperlink.
The license
keyword indicates
that the referenced document provides the copyright license terms
under which the main content of the current document is
provided.
This specification does not specify how to distinguish between the main content of a document and content that is not deemed to be part of that main content. The distinction should be made clear to the user.
Consider a photo sharing site. A page on that site might describe and show a photograph, and the page might be marked up as follows:
<!DOCTYPE HTML> <html> <head> <title>Exampl Pictures: Kissat</title> <link rel="stylesheet" href="/style/default"> </head> <body> <h1>Kissat</h1> <nav> <a href="../">Return to photo index</a> </nav> <figure> <img src="/pix/39627052_fd8dcd98b5.jpg"> <figcaption>Kissat</figcaption> </figure> <p>One of them has six toes!</p> <p><small><a rel="license" href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a></small></p> <footer> <a href="/">Home</a> | <a href="../">Photo index</a> <p><small>© copyright 2009 Exampl Pictures. All Rights Reserved.</small></p> </footer> </body> </html>
In this case the license
applies to just the photo (the main content of the document), not
the whole document. In particular not the design of the page
itself, which is covered by the copyright given at the bottom of
the document. This could be made clearer in the styling
(e.g. making the license link prominently positioned near the
photograph, while having the page copyright in light small text at
the foot of the page.
nofollow
"The nofollow
keyword may be
used with a
and area
elements. This
keyword does not create a hyperlink, but annotates any other hyperlinks
created by the element (the implied hyperlink, if no other keywords
create one).
The nofollow
keyword indicates
that the link is not endorsed by the original author or publisher of
the page, or that the link to the referenced document was included
primarily because of a commercial relationship between people
affiliated with the two pages.
noreferrer
"The noreferrer
keyword may be
used with a
and area
elements. This
keyword does not create a hyperlink, but annotates any other hyperlinks
created by the element (the implied hyperlink, if no other keywords
create one).
It indicates that no referrer information is to be leaked when following the link.
prefetch
"The prefetch
keyword may be
used with link
, a
, and area
elements. This keyword creates an external resource link.
The prefetch
keyword indicates
that preemptively fetching and caching the specified resource is
likely to be beneficial, as it is highly likely that the user will
require this resource.
There is no default type for resources given by the prefetch
keyword.
search
"The search
keyword may be used
with link
, a
, and area
elements. This keyword creates a hyperlink.
The search
keyword indicates that
the referenced document provides an interface specifically for
searching the document and its related resources.
OpenSearch description documents can be used with
link
elements and the search
link type to enable user agents to
autodiscover search interfaces. [OPENSEARCH]
stylesheet
"The stylesheet
keyword may be
used with link
elements. This keyword creates an external resource link that
contributes to the styling processing model.
The specified resource is a resource that describes how to present the document. Exactly how the resource is to be processed depends on the actual type of the resource.
If the alternate
keyword is
also specified on the link
element, then the link
is an alternative stylesheet; in this case, the title
attribute must be specified on the
link
element, with a non-empty value.
The default type for resources given by the stylesheet
keyword is text/css
.
tag
"The tag
keyword may be used with
a
and area
elements. This keyword creates
a hyperlink.
The tag
keyword indicates that the
tag that the referenced document represents applies to the
current document.
Since it indicates that the tag applies to the current document, it would be inappropriate to use this keyword in the markup of a tag cloud, which lists the popular tags across a set of pages.
Some documents form part of a sequence of documents.
A sequence of documents is one where each document can have a previous sibling and a next sibling. A document with no previous sibling is the start of its sequence, a document with no next sibling is the end of its sequence.
A document may be part of multiple sequences.
next
"The next
keyword may be used with
link
, a
, and area
elements. This keyword creates a hyperlink.
The next
keyword indicates that the
document is part of a sequence, and that the link is leading to the
document that is the next logical document in the sequence.
prev
"The prev
keyword may be used with
link
, a
, and area
elements. This keyword creates a hyperlink.
The prev
keyword indicates that the
document is part of a sequence, and that the link is leading to the
document that is the previous logical document in the sequence.
Extensions to the predefined set of link types may be registered in the microformats wiki existing-rel-values page. [MFREL]
Anyone is free to edit the microformats wiki existing-rel-values page at any time to add a type. Extension types must be specified with the following information:
The actual value being defined. The value should not be confusingly similar to any other defined value (e.g. differing only in case).
If the value contains a ":" (U+003A) character, it must also be an absolute URL.
link
One of the following:
link
elements.link
element;
it creates a hyperlink.link
element;
it creates an external resource link.a
and area
One of the following:
a
and
area
elements.a
and
area
elements; it creates a
hyperlink.a
and
area
elements; it creates an external resource
link.a
and
area
elements; it annotates other hyperlinks created by the element.A short non-normative description of what the keyword's meaning is.
A link to a more detailed description of the keyword's semantics and requirements. It could be another page on the Wiki, or a link to an external page.
A list of other keyword values that have exactly the same processing requirements. Authors should not use the values 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 keyword is found to be redundant with existing values, it should be removed and listed as a synonym for the existing value.
If a keyword 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 keyword 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 keyword 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.
Types defined as extensions in the microformats
wiki existing-rel-values page with the status "proposed" or
"ratified" may be used with the rel
attribute
on link
, a
, and area
elements
in accordance to the "Effect on..." field. [MFREL]
The main content of a page — not including headers and footers, navigation links, sidebars, advertisements, and so forth — can be marked up in a variety of ways, depending on the needs of the author.
The simplest solution is to not mark up the main content at all,
and just leave it as implicit. Another way to think of this is that
the body
elements marks up the main content of the
page, and the bits that aren't main content are excluded through the
use of more appropriate elements like aside
and
nav
.
Here is a short Web page marked up along this minimalistic
school of thought. The main content is highlighted. Notice how all
the other content in the body
is marked up
with elements to indicate that it's not part of the main content,
in this case header
, nav
, and
footer
.
<!DOCTYPE HTML> <html> <head> <title> My Toys </title> </head> <body> <header> <h1>My toys</h1> </header> <nav> <p><a href="/">Home</a></p> <p><a href="/contact">Contact</a></p> </nav> <p>I really like my chained book and my telephone. I'm not such a fan of my big ball.</p> <p>Another toy I like is my mirror.</p> <footer> <p>© copyright 2010 by the boy</p> </footer> </body> </html>
If the main content is an independent unit of content that one
could imagine syndicating independently, then the
article
element would be appropriate to mark up the
main content of the document.
The document in the previous example is here recast as a blog post:
<!DOCTYPE HTML> <html> <head> <title> The Boy Blog: My Toys </title> </head> <body> <header> <h1>The Boy Blog</h1> </header> <nav> <p><a href="/">Home</a></p> <p><a href="/contact">Contact</a></p> </nav> <article> <header> <h1>My toys</h1> <p>Published August 4th</p> </header> <p>I really like my chained book and my telephone. I'm not such a fan of my big ball.</p> <p>Another toy I like is my mirror.</p> </article> <footer> <p>© copyright 2010 by the boy</p> </footer> </body> </html>
If the main content is not an independent unit of content so much
as a section of a larger work, for instance a chapter, then the
section
element would be appropriate to mark up the
main content of the document.
Here is the same document, case as a chapter in an online book:
<!DOCTYPE HTML> <html> <head> <title> Chapter 2: My Toys — The Book of the Boy </title> </head> <body> <header> <h1>Chapter 2: My Toys</h1> </header> <nav> <p><a href="/">Front Page</a></p> <p><a href="/toc">Table of Contents</a></p> <p><a href="/c1">Chapter 1</a> — <a href="/c3">Chapter 3</a></p> </nav> <section> <p>I really like my chained book and my telephone. I'm not such a fan of my big ball.</p> <p>Another toy I like is my mirror.</p> </section> <footer> <p>© copyright 2010 by the boy</p> </footer> </body> </html>
If neither article
nor section
would be
appropriate, but the main content still needs an explicit element,
for example for styling purposes, then the div
element
can be used.
This is the same as the original example, but using
div
for the main content instead of leaving it
implied:
<!DOCTYPE HTML> <html> <head> <title> My Toys </title> <style> body > div { background: navy; color: yellow; } </style> </head> <body> <header> <h1>My toys</h1> </header> <nav> <p><a href="/">Home</a></p> <p><a href="/contact">Contact</a></p> </nav> <div> <p>I really like my chained book and my telephone. I'm not such a fan of my big ball.</p> <p>Another toy I like is my mirror.</p> </div> <footer> <p>© copyright 2010 by the boy</p> </footer> </body> </html>
This specification does not provide a machine-readable way of
describing bread-crumb navigation menus. Authors are encouraged to
just use a series of links in a paragraph. The nav
element can be used to mark the section containing these
paragraphs as being navigation blocks.
In the following example, the current page can be reached via two paths.
<nav> <p> <a href="/">Main</a> > <a href="/products/">Products</a> > <a href="/products/dishwashers/">Dishwashers</a> > <a>Second hand</a> </p> <p> <a href="/">Main</a> > <a href="/second-hand/">Second hand</a> > <a>Dishwashers</a> </p> </nav>
This specification does not define any markup
specifically for marking up lists of keywords that apply to a group
of pages (also known as tag clouds). In general, authors are
encouraged to either mark up such lists using ul
elements with explicit inline counts that are then hidden and turned
into a presentational effect using a style sheet, or to use SVG.
Here, three tags are included in a short tag cloud:
<style> @media screen, print, handheld, tv { /* should be ignored by non-visual browsers */ .tag-cloud > li > span { display: none; } .tag-cloud > li { display: inline; } .tag-cloud-1 { font-size: 0.7em; } .tag-cloud-2 { font-size: 0.9em; } .tag-cloud-3 { font-size: 1.1em; } .tag-cloud-4 { font-size: 1.3em; } .tag-cloud-5 { font-size: 1.5em; } } </style> ... <ul class="tag-cloud"> <li class="tag-cloud-4"><a title="28 instances" href="/t/apple">apple</a> <span>(popular)</span> <li class="tag-cloud-2"><a title="6 instances" href="/t/kiwi">kiwi</a> <span>(rare)</span> <li class="tag-cloud-5"><a title="41 instances" href="/t/pear">pear</a> <span>(very popular)</span> </ul>
The actual frequency of each tag is given using the title
attribute. A CSS style sheet is
provided to convert the markup into a cloud of differently-sized
words, but for user agents that do not support CSS or are not
visual, the markup contains annotations like "(popular)" or
"(rare)" to categorize the various tags by frequency, thus enabling
all users to benefit from the information.
The ul
element is used (rather than
ol
) because the order is not particularly important:
while the list is in fact ordered alphabetically, it would convey
the same information if ordered by, say, the length of the tag.
The tag
rel
-keyword is not used
on these a
elements because they do not represent tags
that apply to the page itself; they are just part of an index
listing the tags themselves.
This specification does not define a specific element for marking up conversations, meeting minutes, chat transcripts, dialogues in screenplays, instant message logs, and other situations where different players take turns in discourse.
Instead, authors are encouraged to mark up conversations using
p
elements and punctuation. Authors who need to mark
the speaker for styling purposes are encouraged to use
span
or b
. Paragraphs with their text
wrapped in the i
element can be used for marking up
stage directions.
This example demonstrates this using an extract from Abbot and Costello's famous sketch, Who's on first:
<p> Costello: Look, you gotta first baseman? <p> Abbott: Certainly. <p> Costello: Who's playing first? <p> Abbott: That's right. <p> Costello becomes exasperated. <p> Costello: When you pay off the first baseman every month, who gets the money? <p> Abbott: Every dollar of it.
HTML does not have a good way to mark up graphs, so descriptions
of interactive conversations from games are more difficult to mark
up. This example shows one possible convention using
dl
elements to list the possible responses at each
point in the conversation. Another option to consider is describing
the conversation in the form of a DOT file, and outputting the
result as an SVG image to place in the document. [DOT]
<p> Next, you meet a fisherman. You can say one of several greetings: <dl> <dt> "Hello there!" <dd> <p> He responds with "Hello, how may I help you?"; you can respond with: <dl> <dt> "I would like to buy a fish." <dd> <p> He sells you a fish and the conversation finishes. <dt> "Can I borrow your boat?" <dd> <p> He is surprised and asks "What are you offering in return?". <dl> <dt> "Five gold." (if you have enough) <dt> "Ten gold." (if you have enough) <dt> "Fifteen gold." (if you have enough) <dd> <p> He lends you his boat. The conversation ends. <dt> "A fish." (if you have one) <dt> "A newspaper." (if you have one) <dt> "A pebble." (if you have one) <dd> <p> "No thanks", he replies. Your conversation options at this point are the same as they were after asking to borrow his boat, minus any options you've suggested before. </dl> </dd> </dl> </dd> <dt> "Vote for me in the next election!" <dd> <p> He turns away. The conversation finishes. <dt> "Sir, are you aware that your fish are running away?" <dd> <p> He looks at you skeptically and says "Fish cannot run, sir". <dl> <dt> "You got me!" <dd> <p> The fisherman sighs and the conversation ends. <dt> "Only kidding." <dd> <p> "Good one!" he retorts. Your conversation options at this point are the same as those following "Hello there!" above. <dt> "Oh, then what are they doing?" <dd> <p> He looks at his fish, giving you an opportunity to steal his boat, which you do. The conversation ends. </dl> </dd> </ul>
HTML does not have a dedicated mechanism for marking up footnotes. Here are the recommended alternatives.
For short inline annotations, the title
attribute should be used.
In this example, two parts of a dialogue are annotated with
footnote-like content using the title
attribute.
<p> <b>Customer</b>: Hello! I wish to register a complaint. Hello. Miss? <p> <b>Shopkeeper</b>: <span title="Colloquial pronunciation of 'What do you'" >Watcha</span> mean, miss? <p> <b>Customer</b>: Uh, I'm sorry, I have a cold. I wish to make a complaint. <p> <b>Shopkeeper</b>: Sorry, <span title="This is, of course, a lie.">we're closing for lunch</span>.
For longer annotations, the a
element should be
used, pointing to an element later in the document. The convention
is that the contents of the link be a number in square brackets.
In this example, a footnote in the dialogue links to a paragraph below the dialogue. The paragraph then reciprocally links back to the dialogue, allowing the user to return to the location of the footnote.
<p> Announcer: Number 16: The <i>hand</i>. <p> Interviewer: Good evening. I have with me in the studio tonight Mr Norman St John Polevaulter, who for the past few years has been contradicting people. Mr Polevaulter, why <em>do</em> you contradict people? <p> Norman: I don't. <sup><a href="#fn1" id="r1">[1]</a></sup> <p> Interviewer: You told me you did! ... <section> <p id="fn1"><a href="#r1">[1]</a> This is, naturally, a lie, but paradoxically if it were true he could not say so without contradicting the interviewer and thus making it false.</p> </section>
For side notes, longer annotations that apply to entire sections
of the text rather than just specific words or sentences, the
aside
element should be used.
In this example, a sidebar is given after a dialogue, giving it some context.
<p> <span class="speaker">Customer</span>: I will not buy this record, it is scratched. <p> <span class="speaker">Shopkeeper</span>: I'm sorry? <p> <span class="speaker">Customer</span>: I will not buy this record, it is scratched. <p> <span class="speaker">Shopkeeper</span>: No no no, this's'a tobacconist's. <aside> <p>In 1970, the British Empire lay in ruins, and foreign nationalists frequented the streets — many of them Hungarians (not the streets — the foreign nationals). Sadly, Alexander Yalt has been publishing incompetently-written phrase books. </aside>
For figures or tables, footnotes can be included in the relevant
figcaption
or caption
element, or in
surrounding prose.
In this example, a table has cells with footnotes
that are given in prose. A figure
element is used to
give a single legend to the combination of the table and its
footnotes.
<figure> <figcaption>Table 1. Alternative activities for knights.</figcaption> <table> <tr> <th> Activity <th> Location <th> Cost <tr> <td> Dance <td> Wherever possible <td> £0<sup><a href="#fn1">1</a></sup> <tr> <td> Routines, chorus scenes<sup><a href="#fn2">2</a></sup> <td> Undisclosed <td> Undisclosed <tr> <td> Dining<sup><a href="#fn3">3</a></sup> <td> Camelot <td> Cost of ham, jam, and spam<sup><a href="#fn4">4</a></sup> </table> <p id="fn1">1. Assumed.</p> <p id="fn2">2. Footwork impeccable.</p> <p id="fn3">3. Quality described as "well".</p> <p id="fn4">4. A lot.</p> </figure>
A browsing context is an environment in which
Document
objects are presented to the user.
A tab or window in a Web browser typically contains
a browsing context, as does an iframe
.
Each browsing context has a corresponding
WindowProxy
object.
A browsing context has a session
history, which lists the Document
objects that
that browsing context has presented, is presenting, or
will present. At any time, one Document
in each
browsing context is designated the active
document. A Document
's browsing
context is that browsing context whose
session history contains the Document
, if
any. (A Document
created using an API such as createDocument()
has no browsing context.)
Each Document
is associated with a
Window
object. A browsing context's
WindowProxy
object forwards everything to the
browsing context's active document's
Window
object.
In general, there is a 1-to-1 mapping from the
Window
object to the Document
object.
There are two exceptions. First, a Window
can be reused
for the presentation of a second Document
in the same
browsing context, such that the mapping is then 2-to-1.
This occurs when a browsing context is navigated from the initial
about:blank
Document
to another, with
replacement enabled. Second, a Document
can end up being reused for several Window
objects when
the document.open()
method is
used, such that the mapping is then 1-to-many.
A Document
does not necessarily have a
browsing context associated with it. In particular,
data mining tools are likely to never instantiate browsing
contexts.
A browsing context can have a creator browsing context, the browsing context that was responsible for its creation. If a browsing context has a parent browsing context, then that is its creator browsing context. Otherwise, if the browsing context has an opener browsing context, then that is its creator browsing context. Otherwise, the browsing context has no creator browsing context.
If a browsing context A has a
creator browsing context, then the
Document
that was the active document of
that creator browsing context at the time A was created is the creator
Document
.
Certain elements (for example, iframe
elements) can
instantiate further browsing
contexts. These are called nested browsing contexts. If a browsing context P has a Document
D
with an element E that nests another browsing
context C inside it, then C
is said to be nested
through D, and E is
said to be the browsing context container of C. If the browsing context container
element E is in the Document
D,
then P is said to be the parent browsing
context of C and C is
said to be a child browsing context of P. Otherwise, the nested browsing
context C has no parent browsing
context.
A browsing context A is said to be an ancestor of a browsing context B if there exists a browsing context A' that is a child browsing context of A and that is itself an ancestor of B, or if there is a browsing context P that is a child browsing context of A and that is the parent browsing context of B.
A browsing context that is not a nested browsing context has no parent browsing context, and is the top-level browsing context of all the browsing contexts for which it is an ancestor browsing context.
The transitive closure of parent browsing contexts for a nested browsing context gives the list of ancestor browsing contexts.
The list of the descendant browsing contexts of a
Document
d is the (ordered) list
returned by the following algorithm:
Let list be an empty list.
For each child browsing context of d that is nested through an element that is in the Document
d, in the tree order of the elements
nesting those browsing
contexts, run these substeps:
Append that child browsing context to the list list.
Append the list of the descendant browsing contexts of the active document of that child browsing context to the list list.
Return the constructed list.
A Document
is said to be fully active
when it is the active document of its browsing
context, and either its browsing context is a top-level
browsing context, or it has a parent browsing
context and the Document
through which it is nested is itself fully
active.
Because they are nested through an element, child browsing contexts are always tied to
a specific Document
in their parent browsing
context. User agents must not allow the user to interact with
child browsing contexts
of elements that are in Document
s that are not
themselves fully active.
A nested browsing context can have a seamless
browsing context flag set, if it is embedded through an
iframe
element with a seamless
attribute.
A nested browsing context can in some
cases be taken out of its parent browsing context (e.g.
if an iframe
element is removed from its
Document
). In such a situation, the nested
browsing context has no parent browsing context,
but it still has the same browsing context container
and is still nested
through that element's Document
. Such a
nested browsing context is not a
top-level browsing context, and cannot contain
Document
s that are fully active.
Furthermore, if a browsing context container (such as
an iframe
) is moved to another Document
,
then the parent browsing context of its nested
browsing context will change.
top
Returns the WindowProxy
for the top-level browsing context.
parent
Returns the WindowProxy
for the parent browsing context.
frameElement
Returns the Element
for the browsing context container.
Returns null if there isn't one.
Throws a SecurityError
exception in cross-origin situations.
It is possible to create new browsing contexts that are related to a top-level browsing context without being nested through an element. Such browsing contexts are called auxiliary browsing contexts. Auxiliary browsing contexts are always top-level browsing contexts.
An auxiliary browsing context has an opener browsing context, which is the browsing context from which the auxiliary browsing context was created.
The opener
IDL
attribute on the Window
object, on getting, must return
the WindowProxy
object of the browsing
context from which the current browsing context
was created (its opener browsing context), if there is
one, if it is still available, and if the current browsing
context has not disowned its opener; otherwise, it
must return null. On setting, if the new value is null then the
current browsing context must disown its opener; if the new value is anything else
then the user agent must ignore the new value.
User agents may support secondary browsing contexts, which are browsing contexts that form part of the user agent's interface, apart from the main content area.
Browsing contexts can have a browsing context name. By default, a browsing context has no name (its name is not set).
A valid browsing context name is any string with at least one character that does not start with a U+005F LOW LINE character. (Names starting with an underscore are reserved for special keywords.)
A valid browsing context name or keyword is any string
that is either a valid browsing context name or that is
an ASCII case-insensitive match for one of: _blank
, _self
, _parent
, or _top
.
These values have different meanings based on whether the page is sandboxed or not, as summarized in the following (non-normative) table. In this table, "current" means the browsing context that the link or script is in, "parent" means the parent browsing context of the one the link or script is in, "master" means the nearest ancestor browsing context of the one the link or script is in that is not itself in a seamless iframe, "top" means the top-level browsing context of the one the link or script is in, "new" means a new top-level browsing context or auxiliary browsing context is to be created, subject to various user preferences and user agent policies, "maybe new" means the same as "new" but the requirements for those cases encourage user agents to treat it more like "none", and "none" means that by default nothing will happen.
Keyword | Ordinary effect | Effect in an iframe with...
| ||||
---|---|---|---|---|---|---|
seamless=""
| sandbox=""
| sandbox="" seamless=""
| sandbox="allow-top-navigation"
| sandbox="allow-top-navigation" seamless=""
| ||
none specified, for links and form submissions | current | master | current | master | current | master |
none specified, for window.open()
| new | new | maybe new† | maybe new† | maybe new† | maybe new† |
empty string | current | master | current | master | current | master |
_blank
| new | new | maybe new | maybe new | maybe new | maybe new |
_self
| current | current | current | current | current | current |
_parent if there isn't a parent
| current | current | current | current | current | current |
_parent if parent is also top
| parent/top | parent/top | none | none | parent/top | parent/top |
_parent if there is one and it's not top
| parent | parent | none | none | none | none |
_top if top is current
| current | current | current | current | current | current |
_top if top is not current
| top | top | none | none | top | top |
name that doesn't exist | new | new | maybe new | maybe new | maybe new | maybe new |
name that exists and is a descendant | specified descendant | specified descendant | specified descendant | specified descendant | specified descendant | specified descendant |
name that exists and is current | current | current | current | current | current | current |
name that exists and is an ancestor that is top | specified ancestor | specified ancestor | none | none | specified ancestor/top | specified ancestor/top |
name that exists and is an ancestor that is not top | specified ancestor | specified ancestor | none | none | none | none |
† This case is only possible if the sandbox
attribute also allows
scripts.
Window
object[ReplaceableNamedProperties] interface Window : EventTarget { // the current browsing context [Unforgeable] readonly attribute WindowProxy window; [Replaceable] readonly attribute WindowProxy self; [Unforgeable] readonly attribute Document document; attribute DOMString name; [PutForwards=href, Unforgeable] readonly attribute Location location; readonly attribute History history; [Replaceable] readonly attribute BarProp locationbar; [Replaceable] readonly attribute BarProp menubar; [Replaceable] readonly attribute BarProp personalbar; [Replaceable] readonly attribute BarProp scrollbars; [Replaceable] readonly attribute BarProp statusbar; [Replaceable] readonly attribute BarProp toolbar; attribute DOMString status; void close(); void stop(); void focus(); void blur(); // other browsing contexts [Replaceable] readonly attribute WindowProxy frames; [Replaceable] readonly attribute unsigned long length; [Unforgeable] readonly attribute WindowProxy top; attribute WindowProxy? opener; readonly attribute WindowProxy parent; readonly attribute Element? frameElement; WindowProxy open(optional DOMString url, optional DOMString target, optional DOMString features, optional boolean replace); getter WindowProxy (unsigned long index); getter object (DOMString name); // the user agent readonly attribute Navigator navigator; readonly attribute External external; readonly attribute ApplicationCache applicationCache; // user prompts void alert(DOMString message); boolean confirm(DOMString message); DOMString? prompt(DOMString message, optional DOMString default); void print(); any showModalDialog(DOMString url, optional any argument); // event handler IDL attributes [TreatNonCallableAsNull] attribute Function? onabort; [TreatNonCallableAsNull] attribute Function? onafterprint; [TreatNonCallableAsNull] attribute Function? onbeforeprint; [TreatNonCallableAsNull] attribute Function? onbeforeunload; [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? onhashchange; [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? onmessage; [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? onoffline; [TreatNonCallableAsNull] attribute Function? ononline; [TreatNonCallableAsNull] attribute Function? onpause; [TreatNonCallableAsNull] attribute Function? onplay; [TreatNonCallableAsNull] attribute Function? onplaying; [TreatNonCallableAsNull] attribute Function? onpagehide; [TreatNonCallableAsNull] attribute Function? onpageshow; [TreatNonCallableAsNull] attribute Function? onpopstate; [TreatNonCallableAsNull] attribute Function? onprogress; [TreatNonCallableAsNull] attribute Function? onratechange; [TreatNonCallableAsNull] attribute Function? onreset; [TreatNonCallableAsNull] attribute Function? onresize; [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? onstorage; [TreatNonCallableAsNull] attribute Function? onsubmit; [TreatNonCallableAsNull] attribute Function? onsuspend; [TreatNonCallableAsNull] attribute Function? ontimeupdate; [TreatNonCallableAsNull] attribute Function? onunload; [TreatNonCallableAsNull] attribute Function? onvolumechange; [TreatNonCallableAsNull] attribute Function? onwaiting; };
window
frames
self
These attributes all return window.
document
Returns the active document.
defaultView
Returns the Window
object of the active document.
open
( [ url [, target [, features [, replace ] ] ] ] )Opens a window to show url (defaults to
about:blank
), and returns it. The target argument gives the name of the new
window. If a window exists with that name already, it is
reused. The replace attribute, if true, means
that whatever page is currently open in that window will be
removed from the window's session history. The features argument is ignored.
name
[ = value ]Returns the name of the window.
Can be set, to change the name.
close
()Closes the window.
stop
()Cancels the document load.
length
Returns the number of child browsing contexts.
Returns the indicated child browsing context.
Window
objectReturns the indicated element or collection of elements.
To allow Web pages to integrate with Web browsers, certain Web browser interface elements are exposed in a limited way to scripts in Web pages.
Each interface element is represented by a BarProp
object:
interface BarProp { attribute boolean visible; };
locationbar
. visible
Returns true if the location bar is visible; otherwise, returns false.
menubar
. visible
Returns true if the menu bar is visible; otherwise, returns false.
personalbar
. visible
Returns true if the personal bar is visible; otherwise, returns false.
scrollbars
. visible
Returns true if the scroll bars are visible; otherwise, returns false.
statusbar
. visible
Returns true if the status bar is visible; otherwise, returns false.
toolbar
. visible
Returns true if the toolbar is visible; otherwise, returns false.
The origin of a resource and the effective script origin of a resource are both either opaque identifiers or tuples consisting of a scheme component, a host component, a port component, and optionally extra data.
The extra data could include the certificate of the site when using encrypted connections, to ensure that if the site's secure certificate changes, the origin is considered to change as well.
domain
[ = domain ]Returns the current domain used for security checks.
Can be set to a value that removes subdomains, to change the effective script origin to allow pages on other subdomains of the same domain (if they do the same thing) to access each other.
The domain
attribute is used to enable pages on different hosts of a domain to
access each others' DOMs.
Do not use the document.domain
attribute when
using shared hosting. If an untrusted third party is able to host an
HTTP server at the same IP address but on a different port, then the
same-origin protection that normally protects two different sites on
the same host will fail, as the ports are ignored when comparing
origins after the document.domain
attribute has
been used.
The sequence of Document
s in a browsing
context is its session history.
History
objects provide a representation of the
pages in the session history of browsing contexts. Each browsing
context, including nested browsing contexts, has a distinct session
history.
Each Document
object in a browsing
context's session history is associated with a
unique instance of the History
object, although they
all must model the same underlying session history.
The history
attribute
of the Window
interface must return the object
implementing the History
interface for that
Window
object's Document
.
History
objects represent their browsing
context's session history as a flat list of session history entries. Each
session history entry consists of a URL and
optionally a state object.
Titles associated with session history entries need not have any relation
with the current title
of the
Document
. The title of a session history
entry is intended to explain the state of the document at
that point, so that the user can navigate the document's
history.
URLs without associated state objects are added to the session history as the user (or script) navigates from page to page.
A state object is an object representing a user interface state.
Pages can add state objects between their entry in the session history and the next ("forward") entry. These are then returned to the script when the user (or script) goes back in the history, thus enabling authors to use the "navigation" metaphor even in one-page applications.
State objects are intended to
be used for two main purposes: first, storing a preparsed
description of the state in the URL so that in the
simple case an author doesn't have to do the parsing (though one
would still need the parsing for handling URLs passed around by users, so it's only a minor
optimization), and second, so that the author can store state that
one wouldn't store in the URL because it only applies to the current
Document
instance and it would have to be reconstructed
if a new Document
were opened.
An example of the latter would be something like keeping track of
the precise coordinate from which a popup div
was made
to animate, so that if the user goes back, it can be made to animate
to the same location. Or alternatively, it could be used to keep a
pointer into a cache of data that would be fetched from the server
based on the information in the URL, so that when going
back and forward, the information doesn't have to be fetched
again.
At any point, one of the entries in the session history is the current entry. This is the entry representing the active document of the browsing context. Which entry is the current entry is changed by the algorithms defined in this specification, e.g. during session history traversal.
The current entry is usually an entry
for the location of the
Document
. However, it can also be one of the entries
for state objects added to the
history by that document.
An entry with persisted user state is one that also has user-agent defined state. This specification does not specify what kind of state can be stored.
For example, some user agents might want to persist the scroll position, or the values of form controls.
User agents that persist the value of form controls
are encouraged to also persist their directionality (the value of
the element's dir
attribute). This
prevents values from being displayed incorrectly after a history
traversal when the user had originally entered the values with an
explicit, non-default directionality.
Entries that consist of state
objects share the same Document
as the entry for
the page that was active when they were added.
Contiguous entries that differ just by fragment identifier also
share the same Document
.
All entries that share the same
Document
(and that are therefore merely different
states of one particular document) are contiguous by definition.
Each Document
in a browsing context
also has a latest entry. This is the entry or that
Document
that was most the recently traversed to. When
a Document
is created, it initially has no latest
entry.
History
interfaceinterface History { readonly attribute long length; readonly attribute any state; void go(optional long delta); void back(); void forward(); void pushState(any data, DOMString title, optional DOMString url); void replaceState(any data, DOMString title, optional DOMString url); };
history
. length
Returns the number of entries in the joint session history.
history
. state
Returns the current state object.
history
. go
( [ delta ] )Goes back or forward the specified number of steps in the joint session history.
A zero delta will reload the current page.
If the delta is out of range, does nothing.
history
. back
()Goes back one step in the joint session history.
If there is no previous page, does nothing.
history
. forward
()Goes forward one step in the joint session history.
If there is no next page, does nothing.
history
. pushState
(data, title [, url ] )Pushes the given data onto the session history, with the given title, and, if provided, the given URL.
history
. replaceState
(data, title [, url ] )Updates the current entry in the session history to have the given data, title, and, if provided, URL.
The joint session history of a History
object is the union of all the session
histories of all browsing
contexts of all the fully active
Document
objects that share the History
object's top-level browsing context, with all the
entries that are current entries
in their respective session
histories removed except for the current entry of the
joint session history.
The current entry of the joint session history is the entry that most recently became a current entry in its session history.
Entries in the joint session history are ordered chronologically by the time they were added to their respective session histories. (Since all these browsing contexts by definition share an event loop, there is always a well-defined sequential order in which their session histories had their entries added.) Each entry has an index; the earliest entry has index 0, and the subsequent entries are numbered with consecutively increasing integers (1, 2, 3, etc).
Consider a game where the user can navigate along a line, such that the user is always at some coordinate, and such that the user can bookmark the page corresponding to a particular coordinate, to return to it later.
A static page implementing the x=5 position in such a game could look like the following:
<!DOCTYPE HTML> <!-- this is http://example.com/line?x=5 --> <title>Line Game - 5</title> <p>You are at coordinate 5 on the line.</p> <p> <a href="?x=6">Advance to 6</a> or <a href="?x=4">retreat to 4</a>? </p>
The problem with such a system is that each time the user clicks, the whole page has to be reloaded. Here instead is another way of doing it, using script:
<!DOCTYPE HTML> <!-- this starts off as http://example.com/line?x=5 --> <title>Line Game - 5</title> <p>You are at coordinate <span id="coord">5</span> on the line.</p> <p> <a href="?x=6" onclick="go(1); return false;">Advance to 6</a> or <a href="?x=4" onclick="go(-1); return false;">retreat to 4</a>? </p> <script> var currentPage = 5; // prefilled by server function go(d) { setupPage(currentPage + d); history.pushState(currentPage, document.title, '?x=' + currentPage); } onpopstate = function(event) { setupPage(event.state); } function setupPage(page) { currentPage = page; document.title = 'Line Game - ' + currentPage; document.getElementById('coord').textContent = currentPage; document.links[0].href = '?x=' + (currentPage+1); document.links[0].textContent = 'Advance to ' + (currentPage+1); document.links[1].href = '?x=' + (currentPage-1); document.links[1].textContent = 'retreat to ' + (currentPage-1); } </script>
In systems without script, this still works like the previous example. However, users that do have script support can now navigate much faster, since there is no network access for the same experience. Furthermore, contrary to the experience the user would have with just a naïve script-based approach, bookmarking and navigating the session history still work.
In the example above, the data argument to
the pushState()
method
is the same information as would be sent to the server, but in a
more convenient form, so that the script doesn't have to parse the
URL each time the user navigates.
Applications might not use the same title for a session
history entry as the value of the document's
title
element at that time. For example, here is a
simple page that shows a block in the title
element.
Clearly, when navigating backwards to a previous state the user
does not go back in time, and therefore it would be inappropriate
to put the time in the session history title.
<!DOCTYPE HTML> <TITLE>Line</TITLE> <SCRIPT> setInterval(function () { document.title = 'Line - ' + new Date(); }, 1000); var i = 1; function inc() { set(i+1); history.pushState(i, 'Line - ' + i); } function set(newI) { i = newI; document.forms.F.I.value = newI; } </SCRIPT> <BODY ONPOPSTATE="set(event.state)"> <FORM NAME=F> State: <OUTPUT NAME=I>1</OUTPUT> <INPUT VALUE="Increment" TYPE=BUTTON ONCLICK="inc()"> </FORM>
Location
interfaceEach Document
object in a browsing
context's session history is associated with a unique
instance of a Location
object.
location
[ = value ]location
[ = value ]Returns a Location
object with the current page's location.
Can be set, to navigate to another page.
Location
objects provide a representation of their document's current
address, and allow the current entry of the
browsing context's session history to be changed, by
adding or replacing entries in the history
object.
interface Location { stringifier attribute DOMString href; void assign(DOMString url); void replace(DOMString url); void reload(); // 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; };
href
[ = value ]Returns the current page's location.
Can be set, to navigate to another page.
assign
(url)Navigates to the given page.
replace
(url)Removes the current page from the session history and navigates to the given page.
reload
()Reloads the current page.
The Location
interface also has the complement of
URL decomposition IDL attributes, protocol
, host
, port
, hostname
, pathname
, search
, and hash
.
The popstate
event
is fired in certain cases when navigating to a session history
entry.
[Constructor(DOMString type, optional PopStateEventInit eventInitDict)] interface PopStateEvent : Event { readonly attribute any state; }; dictionary PopStateEventInit : EventInit { any state; };
state
Returns a copy of the information that was provided to pushState()
or replaceState()
.
The hashchange
event is fired when navigating to a session history
entry whose URL differs from that of the
previous one only in the fragment identifier.
[Constructor(DOMString type, optional HashChangeEventInit eventInitDict)] interface HashChangeEvent : Event { readonly attribute DOMString oldURL; readonly attribute DOMString newURL; }; dictionary HashChangeEventInit : EventInit { DOMString oldURL; DOMString newURL; };
oldURL
Returns the URL of the session history entry that was previously current.
newURL
Returns the URL of the session history entry that is now current.
The pageshow
event
is fired when traversing to a session history
entry.
The pagehide
event is fired when traversing from a session history
entry.
[Constructor(DOMString type, optional PageTransitionEventInit eventInitDict)] interface PageTransitionEvent : Event { readonly attribute boolean persisted; }; dictionary PageTransitionEventInit : EventInit { boolean persisted; };
persisted
Returns false if the page is newly being loaded (and the load
event will fire). Otherwise, returns true.
interface BeforeUnloadEvent : Event { attribute DOMString returnValue; };
returnValue
[ = value ]Returns the current return value of the event (the message to show the user).
Can be set, to update the message.
There are no BeforeUnloadEvent
-specific
initialization methods.
In order to enable users to continue interacting with Web applications and documents even when their network connection is unavailable — for instance, because they are traveling outside of their ISP's coverage area — authors can provide a manifest which lists the files that are needed for the Web application to work offline and which causes the user's browser to keep a copy of the files for use offline.
To illustrate this, consider a simple clock applet consisting of
an HTML page "clock.html
", a CSS style sheet
"clock.css
", and a JavaScript script "clock.js
".
Before adding the manifest, these three files might look like this:
<!-- clock.html --> <!DOCTYPE HTML> <html> <head> <title>Clock</title> <script src="clock.js"></script> <link rel="stylesheet" href="clock.css"> </head> <body> <p>The time is: <output id="clock"></output></p> </body> </html>
/* clock.css */ output { font: 2em sans-serif; }
/* clock.js */ setTimeout(function () { document.getElementById('clock').value = new Date(); }, 1000);
If the user tries to open the "clock.html
"
page while offline, though, the user agent (unless it happens to
have it still in the local cache) will fail with an error.
The author can instead provide a manifest of the three files, say
"clock.appcache
":
CACHE MANIFEST clock.html clock.css clock.js
With a small change to the HTML file, the manifest (served as
text/cache-manifest
) is linked to the application:
<!-- clock.html --> <!DOCTYPE HTML> <html manifest="clock.appcache"> <head> <title>Clock</title> <script src="clock.js"></script> <link rel="stylesheet" href="clock.css"> </head> <body> <p>The time is: <output id="clock"></output></p> </body> </html>
Now, if the user goes to the page, the browser will cache the files and make them available even when the user is offline.
Authors are encouraged to include the main page in the manifest also, but in practice the page that referenced the manifest is automatically cached even if it isn't explicitly mentioned.
With the exception of "no-store" directive, HTTP
cache headers and restrictions on caching pages served over TLS
(encrypted, using https:
) are overridden by
manifests. Thus, pages will not expire from an application cache
before the user agent has updated it, and even applications served
over TLS can be made to work offline.
When the user visits a page that declares a manifest, the browser will try to update the cache. It does this by fetching a copy of the manifest and, if the manifest has changed since the user agent last saw it, redownloading all the resources it mentions and caching them anew.
As this is going on, a number of events get fired on the
ApplicationCache
object to keep the script updated as
to the state of the cache update, so that the user can be notified
appropriately. The events are as follows:
Event name | Interface | Fired when... | Next events |
---|---|---|---|
checking
| Event
| The user agent is checking for an update, or attempting to download the manifest for the first time. This is always the first event in the sequence. | noupdate , downloading , obsolete , error
|
noupdate
| Event
| The manifest hadn't changed. | Last event in sequence. |
downloading
| Event
| The user agent has found an update and is fetching it, or is downloading the resources listed by the manifest for the first time. | progress , error , cached , updateready
|
progress
| ProgressEvent
| The user agent is downloading resources listed by the manifest. | progress , error , cached , updateready
|
cached
| Event
| The resources listed in the manifest have been downloaded, and the application is now cached. | Last event in sequence. |
updateready
| Event
| The resources listed in the manifest have been newly redownloaded, and the script can use swapCache() to switch to the new cache.
| Last event in sequence. |
obsolete
| Event
| The manifest was found to have become a 404 or 410 page, so the application cache is being deleted. | Last event in sequence. |
error
| Event
| The manifest was a 404 or 410 page, so the attempt to cache the application has been aborted. | Last event in sequence. |
The manifest hadn't changed, but the page referencing the manifest failed to download properly. | |||
A fatal error occurred while fetching the resources listed in the manifest. | |||
The manifest changed while the update was being run. | The user agent will try fetching the files again momentarily. |
This example manifest requires two images and a style sheet to be cached and whitelists a CGI script.
CACHE MANIFEST # the above line is required # this is a comment # there can be as many of these anywhere in the file # they are all ignored # comments can have spaces before them # but must be alone on the line # blank lines are ignored too # these are files that need to be cached they can either be listed # first, or a "CACHE:" header could be put before them, as is done # lower down. images/sound-icon.png images/background.png # note that each file has to be put on its own line # here is a file for the online whitelist -- it isn't cached, and # references to this file will bypass the cache, always hitting the # network (or trying to, if the user is offline). NETWORK: comm.cgi # here is another set of files to cache, this time just the CSS file. CACHE: style/default.css
It could equally well be written as follows:
CACHE MANIFEST NETWORK: comm.cgi CACHE: style/default.css images/sound-icon.png images/background.png
Offline application cache manifests can use absolute paths or even absolute URLs:
CACHE MANIFEST /main/home /main/app.js /settings/home /settings/app.js http://img.example.com/logo.png http://img.example.com/check.png http://img.example.com/cross.png
The following manifest defines a catch-all error page that is displayed for any page on the site while the user is offline. It also specifies that the online whitelist wildcard flag is open, meaning that accesses to resources on other sites will not be blocked. (Resources on the same site are already not blocked because of the catch-all fallback namespace.)
So long as all pages on the site reference this manifest, they will get cached locally as they are fetched, so that subsequent hits to the same page will load the page immediately from the cache. Until the manifest is changed, those pages will not be fetched from the server again. When the manifest changes, then all the files will be redownloaded.
Subresources, such as style sheets, images, etc, would only be cached using the regular HTTP caching semantics, however.
CACHE MANIFEST FALLBACK: / /offline.html NETWORK: *
Manifests must be served using the
text/cache-manifest
MIME type. All
resources served using the text/cache-manifest
MIME type must follow the syntax of application cache
manifests, as described in this section.
An application cache manifest is a text file, whose text is encoded using UTF-8. Data in application cache manifests is line-based. Newlines must be represented by "LF" (U+000A) characters, "CR" (U+000D) characters, or "CR" (U+000D) "LF" (U+000A) pairs. [RFC3629]
This is a willful violation of RFC
2046, which requires all text/*
types to only
allow CRLF line breaks. This requirement, however, is outdated; the
use of CR, LF, and CRLF line breaks is commonly supported and indeed
sometimes CRLF is not supported by text editors. [RFC2046]
The first line of an application cache manifest must consist of the string "CACHE", a single U+0020 SPACE character, the string "MANIFEST", and either a U+0020 SPACE character, a "tab" (U+0009) character, a "LF" (U+000A) character, or a "CR" (U+000D) character. The first line may optionally be preceded by a "BOM" (U+FEFF) character. If any other text is found on the first line, it is ignored.
Subsequent lines, if any, must all be one of the following:
Blank lines must consist of zero or more U+0020 SPACE and "tab" (U+0009) characters only.
Comment lines must consist of zero or more U+0020 SPACE and "tab" (U+0009) characters, followed by a single "#" (U+0023) character, followed by zero or more characters other than "LF" (U+000A) and "CR" (U+000D) characters.
Comments must be on a line on their own. If they were to be included on a line with a URL, the "#" would be mistaken for part of a fragment identifier.
Section headers change the current section. There are three possible section headers:
CACHE:
FALLBACK:
NETWORK:
Section header lines must consist of zero or more U+0020 SPACE and "tab" (U+0009) characters, followed by one of the names above (including the ":)" (U+003A) character followed by zero or more U+0020 SPACE and "tab" (U+0009) characters.
Ironically, by default, the current section is the explicit section.
The format that data lines must take depends on the current section.
When the current section is the explicit section, data lines must consist of zero or more U+0020 SPACE and "tab" (U+0009) characters, a valid URL identifying a resource other than the manifest itself, and then zero or more U+0020 SPACE and "tab" (U+0009) characters.
When the current section is the fallback section, data lines must consist of zero or more U+0020 SPACE and "tab" (U+0009) characters, a valid URL identifying a resource other than the manifest itself, one or more U+0020 SPACE and "tab" (U+0009) characters, another valid URL identifying a resource other than the manifest itself, and then zero or more U+0020 SPACE and "tab" (U+0009) characters.
When the current section is the online whitelist section, data lines must consist of zero or more U+0020 SPACE and "tab" (U+0009) characters, either a single "*" (U+002A) character or a valid URL identifying a resource other than the manifest itself, and then zero or more U+0020 SPACE and "tab" (U+0009) characters.
Manifests may contain sections more than once. Sections may be empty.
URLs that are to be fallback pages associated with fallback namespaces, and those namespaces themselves, must be given in fallback sections, with the namespace being the first URL of the data line, and the corresponding fallback page being the second URL. All the other pages to be cached must be listed in explicit sections.
Fallback namespaces and fallback entries must have the same origin as the manifest itself.
A fallback namespace must not be listed more than once.
Namespaces that the user agent is to put into the online whitelist must all be specified in online whitelist sections. (This is needed for any URL that the page is intending to use to communicate back to the server.) To specify that all URLs are automatically whitelisted in this way, a "*" (U+002A) character may be specified as one of the URLs.
Authors should not include namespaces in the online whitelist for which another namespace in the online whitelist is a prefix match.
Relative URLs must be given relative to the manifest's own URL. All URLs in the manifest must have the same <scheme> as the manifest itself (either explicitly or implicitly, through the use of relative URLs).
URLs in manifests must not have fragment identifiers (i.e. the U+0023 NUMBER SIGN character isn't allowed in URLs in manifests).
Fallback namespaces and namespaces in the online whitelist are matched by prefix match.
interface ApplicationCache : EventTarget { // update status const unsigned short UNCACHED = 0; const unsigned short IDLE = 1; const unsigned short CHECKING = 2; const unsigned short DOWNLOADING = 3; const unsigned short UPDATEREADY = 4; const unsigned short OBSOLETE = 5; readonly attribute unsigned short status; // updates void update(); void abort(); void swapCache(); // events [TreatNonCallableAsNull] attribute Function? ; [TreatNonCallableAsNull] attribute Function? onerror; [TreatNonCallableAsNull] attribute Function? ; [TreatNonCallableAsNull] attribute Function? ; [TreatNonCallableAsNull] attribute Function? onprogress; [TreatNonCallableAsNull] attribute Function? ; [TreatNonCallableAsNull] attribute Function? ; [TreatNonCallableAsNull] attribute Function? ; };
applicationCache
(In a window.) Returns the ApplicationCache
object that applies to the active document of that Window
.
applicationCache
(In a shared worker.) Returns the ApplicationCache
object that applies to the current shared worker.
[WEBWORKERS]
status
Returns the current status of the application cache, as given by the constants defined below.
update
()Invokes the application cache download process.
Throws an InvalidStateError
exception if there is no application cache to update.
Calling this method is not usually necessary, as user agents will generally take care of updating application caches automatically.
The method can be useful in situations such as long-lived applications. For example, a Web mail application might stay open in a browser tab for weeks at a time. Such an application could want to test for updates each day.
abort
()Cancels the application cache download process.
This method is intended to be used by Web application showing their own caching progress UI, in case the user wants to stop the update (e.g. because bandwidth is limited).
swapCache
()Switches to the most recent application cache, if there is a
newer one. If there isn't, throws an
InvalidStateError
exception.
This does not cause previously-loaded resources to be reloaded; for example, images do not suddenly get reloaded and style sheets and scripts do not get reparsed or reevaluated. The only change is that subsequent requests for cached resources will obtain the newer copies.
The updateready
event will fire before this method can be called. Once it fires,
the Web application can, at its leisure, call this method to
switch the underlying cache to the one with the more recent
updates. To make proper use of this, applications have to be able
to bring the new features into play; for example, reloading
scripts to enable new features.
An easier alternative to swapCache()
is just to
reload the entire page at a time suitable for the user, using
location.reload()
.
UNCACHED
(numeric value 0)The ApplicationCache
object's cache
host is not associated with an application
cache at this time.
IDLE
(numeric value 1)The ApplicationCache
object's cache
host is associated with an application cache
whose application cache group's update status is
idle, and that application cache is the newest cache in its
application cache group, and the application
cache group is not marked as obsolete.
CHECKING
(numeric value 2)The ApplicationCache
object's cache
host is associated with an application cache
whose application cache group's update status is
checking.
DOWNLOADING
(numeric value 3)The ApplicationCache
object's cache
host is associated with an application cache
whose application cache group's update status is
downloading.
UPDATEREADY
(numeric value 4)The ApplicationCache
object's cache
host is associated with an application cache
whose application cache group's update status is
idle, and whose application cache group is not
marked as obsolete,
but that application cache is not the newest cache in its
group.
OBSOLETE
(numeric value 5)The ApplicationCache
object's cache
host is associated with an application cache
whose application cache group is marked as obsolete.
[NoInterfaceObject] interface NavigatorOnLine { readonly attribute boolean onLine; };
navigator
. onLine
Returns false if the user agent is definitely offline (disconnected from the network). Returns true if the user agent might be online.
The events online
and offline
are fired when the value of
this attribute changes.
This attribute is inherently unreliable. A computer can be connected to a network without having Internet access.
In this example, an indicator is updated as the browser goes online and offline.
<!DOCTYPE HTML> <html> <head> <title>Online status</title> <script> function updateIndicator() { document.getElementById('indicator').textContent = navigator.onLine ? 'online' : 'offline'; } </script> </head> <body onload="updateIndicator()" ononline="updateIndicator()" onoffline="updateIndicator()"> <p>The network is: <span id="indicator">(state unknown)</span> </body> </html>
Various mechanisms can cause author-provided executable code to run in the context of a document. These mechanisms include, but are probably not limited to:
script
elements.javascript:
URLs (e.g. the src
attribute of img
elements, or an @import
rule in a CSS
style
element block).addEventListener()
, by explicit event handler
content attributes, by event handler IDL
attributes, or otherwise.Many objects can have event handlers specified. These act as non-capture event listeners for the object on which they are specified. [DOMCORE]
An event handler can either
have the value null or be set to a Function
object.
Event handlers are exposed in one or two ways.
The first way, common to all event handlers, is as an event handler IDL attribute.
The second way is as an event handler content attribute. Event handlers
on HTML elements and some of the event handlers on
Window
objects are exposed in this way.
Event handler content attributes, when specified, must
contain valid JavaScript code which, when parsed, would match the
FunctionBody
production after automatic
semicolon insertion. [ECMA262]
When an event handler content attribute is set on an
element owned by a Document
that is not in a
browsing context, the corresponding event handler is
not changed.
This example demonstrates the order in which event listeners are invoked. If the button in this example is clicked by the user, the page will show four alerts, with the text "ONE", "TWO", "THREE", and "FOUR" respectively.
<button id="test">Start Demo</button> <script> var button = document.getElementById('test'); button.addEventListener('click', function () { alert('ONE') }, false); button.setAttribute('onclick', "alert('NOT CALLED')"); // event handler listener is registered here button.addEventListener('click', function () { alert('THREE') }, false); button.onclick = function () { alert('TWO'); }; button.addEventListener('click', function () { alert('FOUR') }, false); </script>
The Function
interface represents a function in the
scripting language being used. It is represented in Web IDL as
follows:
[Callback=FunctionOnly, NoInterfaceObject] interface Function { any call(any... arguments); };
The call(...)
method is the object's callback.
In JavaScript, any Function
object implements this interface.
For example, the following document fragment:
<body onload="alert(this)" onclick="alert(this)">
...leads to an alert saying "[object Window]
" when the document is loaded,
and an alert saying "[object HTMLBodyElement]
" whenever the user
clicks something in the page.
The return value of the function affects whether the
event is canceled or not: if the return value is false, the event is canceled
(except for mouseover
events,
where the return value has to be true to cancel the event). With
beforeunload
events, the
value is instead used to determine the message to show the user.
Document
objects, and Window
objectsThe following are the event handlers (and their
corresponding event handler
event types) supported
by all HTML elements, as both content attributes and
IDL attributes, and on Document
and Window
objects, as IDL attributes.
Event handler | Event handler event type |
---|---|
onabort | abort
|
oncanplay | canplay
|
oncanplaythrough | canplaythrough
|
onchange | change
|
onclick | click
|
oncontextmenu | contextmenu
|
oncuechange | cuechange
|
ondblclick | dblclick
|
ondrag | drag
|
ondragend | dragend
|
ondragenter | dragenter
|
ondragleave | dragleave
|
ondragover | dragover
|
ondragstart | dragstart
|
ondrop | drop
|
ondurationchange | durationchange
|
onemptied | emptied
|
onended | ended
|
oninput | input
|
oninvalid | invalid
|
onkeydown | keydown
|
onkeypress | keypress
|
onkeyup | keyup
|
onloadeddata | loadeddata
|
onloadedmetadata | loadedmetadata
|
onloadstart | loadstart
|
onmousedown | mousedown
|
onmousemove | mousemove
|
onmouseout | mouseout
|
onmouseover | mouseover
|
onmouseup | mouseup
|
onmousewheel | mousewheel
|
onpause | pause
|
onplay | play
|
onplaying | playing
|
onprogress | progress
|
onratechange | ratechange
|
onreset | reset
|
onseeked | seeked
|
onseeking | seeking
|
onselect | select
|
onshow | show
|
onstalled | stalled
|
onsubmit | submit
|
onsuspend | suspend
|
ontimeupdate | timeupdate
|
onvolumechange | volumechange
|
onwaiting | waiting
|
The following are the event handlers (and their
corresponding event handler
event types) supported
by all HTML elements other than body
, as
both content attributes and IDL attributes, and on
Document
objects, as IDL attributes:
Event handler | Event handler event type |
---|---|
onblur | blur
|
onerror | error
|
onfocus | focus
|
onload | load
|
onscroll | scroll
|
The following are the event handlers (and their
corresponding event handler
event types) supported
by Window
objects, as IDL attributes on the
Window
object, and with corresponding content
attributes and IDL attributes exposed on the body
and
frameset
elements:
Event handler | Event handler event type |
---|---|
onafterprint | afterprint
|
onbeforeprint | beforeprint
|
onbeforeunload | beforeunload
|
onblur | blur
|
onerror | error
|
onfocus | focus
|
onhashchange | hashchange
|
onload | load
|
onmessage | message
|
onoffline | offline
|
ononline | online
|
onpagehide | pagehide
|
onpageshow | pageshow
|
onpopstate | popstate
|
onresize | resize
|
onscroll | scroll
|
onstorage | storage
|
onunload | unload
|
The onerror
handler is also used for reporting script errors.
The following are the event handlers (and their
corresponding event handler
event types) supported
on Document
objects as IDL attributes:
Event handler | Event handler event type |
---|---|
onreadystatechange | readystatechange
|
The atob()
and btoa()
methods allow authors to
transform content to and from the base64 encoding.
[NoInterfaceObject] interface WindowBase64 { DOMString btoa(DOMString btoa); DOMString atob(DOMString atob); }; Window implements WindowBase64;
In these APIs, for mnemonic purposes, the "b" can be considered to stand for "binary", and the "a" for "ASCII". In practice, though, for primarily historical reasons, both the input and output of these functions are Unicode strings.
btoa
( data )Takes the input data, in the form of a Unicode string containing only characters in the range U+0000 to U+00FF, each representing a binary byte with values 0x00 to 0xFF respectively, and converts it to its base64 representation, which it returns.
Throws an InvalidCharacterError
exception if the
input string contains any out-of-range characters.
atob
( data )Takes the input data, in the form of a Unicode string containing base64-encoded binary data, decodes it, and returns a string consisting of characters in the range U+0000 to U+00FF, each representing a binary byte with values 0x00 to 0xFF respectively, corresponding to that binary data.
Throws an InvalidCharacterError
exception if the
input string is not valid base64 data.
Some base64 encoders add newlines or other
whitespace to their output. The atob()
method throws an
exception if its input contains characters other than those
described by the regular expression bracket expression [+/=0-9A-Za-z]
, so other characters need to be
removed before atob()
is
used for decoding.
The setTimeout()
and setInterval()
methods allow authors to schedule timer-based callbacks.
[NoInterfaceObject] interface WindowTimers { long setTimeout(Function handler, optional long timeout, any... args); long setTimeout([AllowAny] DOMString handler, optional long timeout, any... args); void clearTimeout(long handle); long setInterval(Function handler, optional long timeout, any... args); long setInterval([AllowAny] DOMString handler, optional long timeout, any... args); void clearInterval(long handle); }; Window implements WindowTimers;
setTimeout
( handler [, timeout [, arguments... ] ] )Schedules a timeout to run handler after timeout milliseconds. Any arguments are passed straight through to the handler.
setTimeout
( code [, timeout ] )Schedules a timeout to compile and run code after timeout milliseconds.
clearTimeout
( handle )Cancels the timeout set with setTimeout()
identified by handle.
setInterval
( handler [, timeout [, arguments... ] ] )Schedules a timeout to run handler every timeout milliseconds. Any arguments are passed straight through to the handler.
setInterval
( code [, timeout ] )Schedules a timeout to compile and run code every timeout milliseconds.
clearInterval
( handle )Cancels the timeout set with setInterval()
identified by handle.
This API does not guarantee that timers will run exactly on schedule. Delays due to CPU load, other tasks, etc, are to be expected.
alert
(message)Displays a modal alert with the given message, and waits for the user to dismiss it.
A call to the navigator.yieldForStorageUpdates()
method is implied when this method is invoked.
confirm
(message)Displays a modal OK/Cancel prompt with the given message, waits for the user to dismiss it, and returns true if the user clicks OK and false if the user clicks Cancel.
A call to the navigator.yieldForStorageUpdates()
method is implied when this method is invoked.
prompt
(message [, default] )Displays a modal text field prompt with the given message, waits for the user to dismiss it, and returns the value that the user entered. If the user cancels the prompt, then returns null instead. If the second argument is present, then the given value is used as a default.
A call to the navigator.yieldForStorageUpdates()
method is implied when this method is invoked.
print
()Prompts the user to print the page.
A call to the navigator.yieldForStorageUpdates()
method is implied when this method is invoked.
showModalDialog
(url [, argument] )Prompts the user with the given page, waits for that page to close, and returns the return value.
A call to the navigator.yieldForStorageUpdates()
method is implied when this method is invoked.
[NoInterfaceObject] interface WindowModal { readonly attribute any dialogArguments; attribute DOMString returnValue; };
dialogArguments
Returns the argument argument that was
passed to the showModalDialog()
method.
returnValue
[ = value ]Returns the current return value for the window.
Can be set, to change the value that will be returned by the
showModalDialog()
method.
The window.close()
method can be used to
close the browsing context.
Navigator
objectinterface Navigator { // objects implementing this interface also implement the interfaces given below }; Navigator implements NavigatorID; Navigator implements NavigatorOnLine; Navigator implements NavigatorContentUtils; Navigator implements NavigatorStorageUtils;
[NoInterfaceObject] interface NavigatorID { readonly attribute DOMString appName; readonly attribute DOMString appVersion; readonly attribute DOMString platform; readonly attribute DOMString userAgent; };
In certain cases, despite the best efforts of the entire industry, Web browsers have bugs and limitations that Web authors are forced to work around.
This section defines a collection of attributes that can be used to determine, from script, the kind of user agent in use, in order to work around these issues.
Client detection should always be limited to detecting known current versions; future versions and unknown versions should always be assumed to be fully compliant.
navigator
. appName
Returns the name of the browser.
navigator
. appVersion
Returns the version of the browser.
navigator
. platform
Returns the name of the platform.
navigator
. userAgent
Returns the complete User-Agent header.
[NoInterfaceObject] interface NavigatorContentUtils { // content handler registration void registerProtocolHandler(DOMString scheme, DOMString url, DOMString title); void registerContentHandler(DOMString mimeType, DOMString url, DOMString title); DOMString isProtocolHandlerRegistered(DOMString scheme, DOMString url); DOMString isContentHandlerRegistered(DOMString mimeType, DOMString url); void unregisterProtocolHandler(DOMString scheme, DOMString url); void unregisterContentHandler(DOMString mimeType, DOMString url); };
The registerProtocolHandler()
method allows Web sites to register themselves as possible handlers
for particular schemes. For example, an online telephone messaging
service could register itself as a handler of the sms:
scheme, so that if the user clicks on such a link, he is given the
opportunity to use that Web site. Analogously, the registerContentHandler()
method allows Web sites to register themselves as possible handlers
for content in a particular MIME type. For example, the
same online telephone messaging service could register itself as a
handler for text/vcard
files, so that if the user has
no native application capable of handling vCards, his Web browser
can instead suggest he use that site to view contact information
stored on vCards that he opens. [RFC5724]
RFC6350
navigator
. registerProtocolHandler
(scheme, url, title)navigator
. registerContentHandler
(mimeType, url, title)Registers a handler for the given scheme or content type, at the given URL, with the given title.
The string "%s
" in the URL is used as a
placeholder for where to put the URL of the content to be
handled.
Throws a SecurityError
exception if the user agent
blocks the registration (this might happen if trying to register
as a handler for "http", for instance).
Throws a SyntaxError
if the "%s
" string is missing in the URL.
In addition to the registration methods, there are also methods for determining if particular handlers have been registered, and for unregistering handlers.
navigator
. isProtocolHandlerRegistered
(scheme, url)navigator
. isContentHandlerRegistered
(mimeType, url)Returns one of the following strings describing the state of the handler given by the arguments:
new
registered
declined
navigator
. unregisterProtocolHandler
(scheme, url)navigator
. unregisterContentHandler
(mimeType, url)Unregisters the handler given by the arguments.
[NoInterfaceObject] interface NavigatorStorageUtils { void yieldForStorageUpdates(); };
navigator
. yieldForStorageUpdates
()If a script uses the document.cookie
API, or the
localStorage
API, the
browser will block other scripts from accessing cookies or storage
until the first script finishes.
[WEBSTORAGE]
Calling the navigator.yieldForStorageUpdates()
method tells the user agent to unblock any other scripts that may
be blocked, even though the script hasn't returned.
Values of cookies and items in the Storage
objects
of localStorage
attributes
can change after calling this method, whence its name.
[WEBSTORAGE]
External
interfaceThe external
attribute of the Window
interface must return an
instance of the External
interface. The same object
must be returned each time.
interface External { void AddSearchProvider(DOMString engineURL); unsigned long IsSearchProviderInstalled(DOMString engineURL); };
external
. AddSearchProvider
( url )Adds the search engine described by the OpenSearch description document at url. [OPENSEARCH]
The OpenSearch description document has to be on the same server as the script that calls this method.
external
. IsSearchProviderInstalled
( url )Returns a value based on comparing url to the URLs of the results pages of the installed search engines.
The url is compared to the URLs of the results pages of the installed search engines using a prefix match. Only results pages on the same domain as the script that calls this method are checked.
Another way of exposing search engines using
OpenSearch description documents is using a link
element with the search
link
type.
hidden
attributeAll HTML elements may have the content attribute set. The
attribute is a boolean
attribute.
When specified on an element, it indicates that the element is not
yet, or is no longer, relevant.
In the following skeletal example, the attribute is used to hide the Web game's main screen until the user logs in:
<h1>The Example Game</h1> <section id="login"> <h2>Login</h2> <form> ... <!-- calls login() once the user's credentials have been checked --> </form> <script> function login() { // switch screens document.getElementById('login').hidden = true; document.getElementById('game').hidden = false; } </script> </section> <section id="game" hidden> ... </section>
The attribute must not be
used to hide content that could legitimately be shown in another
presentation. For example, it is incorrect to use
to hide panels in a tabbed dialog,
because the tabbed interface is merely a kind of overflow
presentation — one could equally well just show all the form
controls in one big page with a scrollbar. It is similarly incorrect
to use this attribute to hide content just from one presentation
— if something is marked
, it is hidden from all
presentations, including, for instance, screen readers.
Elements that are not
should not link to or refer to elements that are
.
For example, it would be incorrect to use the href
attribute to link to a
section marked with the
attribute. If the content is not applicable or relevant, then there
is no reason to link to it.
It would similarly be incorrect to use the ARIA aria-describedby
attribute to
refer to descriptions that are themselves . Hiding a section means that it
is not applicable or relevant to anyone at the current time, so
clearly it cannot be a valid description of content the user can
interact with.
Elements in a section hidden by the attribute are still active,
e.g. scripts and form controls in such sections still execute
and submit respectively. Only their presentation to the user
changes.
The hidden
IDL
attribute must reflect the content attribute of the
same name.
click
()Acts as if the element was clicked.
tabindex
attributeThe tabindex
content attribute allows authors to control whether an element is
supposed to be focusable, whether it is supposed to be reachable
using sequential focus navigation, and what is to be the relative
order of the element for the purposes of sequential focus
navigation. The name "tab index" comes from the common use of the
"tab" key to navigate through the focusable elements. The term
"tabbing" refers to moving forward through the focusable elements
that can be reached using sequential focus navigation.
The tabindex
attribute, if
specified, must have a value that is a valid
integer.
The tabIndex
IDL
attribute must reflect the value of the tabindex
content attribute. Its default
value is 0 for elements that are focusable and −1 for
elements that are not focusable.
activeElement
Returns the currently focused element.
hasFocus
()Returns true if the document has focus; otherwise, returns false.
focus
()Focuses the window. Use of this method is discouraged. Allow the user to control window focus instead.
blur
()Unfocuses the window. Use of this method is discouraged. Allow the user to control window focus instead.
focus
()Focuses the element.
blur
()Unfocuses the element. Use of this method is discouraged. Focus another element instead.
Do not use this method to hide the focus ring if you find the focus ring unsightly. Instead, use a CSS rule to override the 'outline' property. (Be aware, however, that this makes the page significantly less usable for some people, especially those with reduced vision who use focus outlines to help them navigate the page.)
For example, to hide the outline from links, you could use:
:link:focus, :visited:focus { outline: none; }
Each element that can be activated or focused can be assigned a
single key combination to activate it, using the accesskey
attribute.
The exact shortcut is determined by the user agent, based on
information about the user's keyboard, what keyboard shortcuts
already exist on the platform, and what other shortcuts have been
specified on the page, using the information provided in the accesskey
attribute as a guide.
In order to ensure that a relevant keyboard shortcut is available
on a wide variety of input devices, the author can provide a number
of alternatives in the accesskey
attribute.
Each alternative consists of a single character, such as a letter or digit.
User agents can provide users with a list of the keyboard
shortcuts, but authors are encouraged to do so also. The accessKeyLabel
IDL attribute
returns a string representing the actual key combination assigned by
the user agent.
In this example, an author has provided a button that can be invoked using a shortcut key. To support full keyboards, the author has provided "C" as a possible key. To support devices equipped only with numeric keypads, the author has provided "1" as another possibly key.
<input type=button value=Collect onclick="collect()" accesskey="C 1" id=c>
To tell the user what the shortcut key is, the author has this script here opted to explicitly add the key combination to the button's label:
function addShortcutKeyLabel(button) { if (button.accessKeyLabel != '') button.value += ' (' + button.accessKeyLabel + ')'; } addShortcutKeyLabel(document.getElementById('c'));
Browsers on different platforms will show different labels, even for the same key combination, based on the convention prevalent on that platform. For example, if the key combination is the Control key, the Shift key, and the letter C, a Windows browser might display "Ctrl+Shift+C", whereas a Mac browser might display "^⇧C", while an Emacs browser might just display "C-C". Similarly, if the key combination is the Alt key and the Escape key, Windows might use "Alt+Esc", Mac might use "⌥⎋", and an Emacs browser might use "M-ESC" or "ESC ESC".
In general, therefore, it is unwise to attempt to parse the
value returned from the accessKeyLabel
IDL attribute.
accesskey
attributeAll HTML elements may have the accesskey
content attribute set. The
accesskey
attribute's value is
used by the user agent as a guide for creating a keyboard shortcut
that activates or focuses the element.
If specified, the value must be an ordered set of unique space-separated tokens that are case-sensitive, each of which must be exactly one Unicode code point in length.
In the following example, a variety of links are given with access keys so that keyboard users familiar with the site can more quickly navigate to the relevant pages:
<nav> <p> <a title="Consortium Activities" accesskey="A" href="/Consortium/activities">Activities</a> | <a title="Technical Reports and Recommendations" accesskey="T" href="/TR/">Technical Reports</a> | <a title="Alphabetical Site Index" accesskey="S" href="/Consortium/siteindex">Site Index</a> | <a title="About This Site" accesskey="B" href="/Consortium/">About Consortium</a> | <a title="Contact Consortium" accesskey="C" href="/Consortium/contact">Contact</a> </p> </nav>
In the following example, the search field is given two possible access keys, "s" and "0" (in that order). A user agent on a device with a full keyboard might pick Ctrl+Alt+S as the shortcut key, while a user agent on a small device with just a numeric keypad might pick just the plain unadorned key 0:
<form action="/search"> <label>Search: <input type="search" name="q" accesskey="s 0"></label> <input type="submit"> </form>
In the following example, a button has possible access keys described. A script then tries to update the button's label to advertise the key combination the user agent selected.
<input type=submit accesskey="N @ 1" value="Compose"> ... <script> function labelButton(button) { if (button.accessKeyLabel) button.value += ' (' + button.accessKeyLabel + ')'; } var inputs = document.getElementsByTagName('input'); for (var i = 0; i < inputs.length; i += 1) { if (inputs[i].type == "submit") labelButton(inputs[i]); } </script>
On one user agent, the button's label might become "Compose (⌘N)". On another, it might become "Compose (Alt+⇧+1)". If the user agent doesn't assign a key, it will be just "Compose". The exact string depends on what the assigned access key is, and on how the user agent represents that key combination.
The accessKey
IDL
attribute must reflect the accesskey
content attribute.
contenteditable
content
attributeThe contenteditable
attribute is an enumerated attribute whose keywords are
the empty string, true
, and false
. The empty string and the true
keyword map to the true state. The false
keyword maps to the false state. In
addition, there is a third state, the inherit state, which is
the missing value default (and the invalid value
default).
The true state indicates that the element is editable. The inherit state indicates that the element is editable if its parent is. The false state indicates that the element is not editable.
contentEditable
[ = value ]Returns "true
", "false
", or "inherit
", based
on the state of the contenteditable
attribute.
Can be set, to change that state.
Throws a SyntaxError
exception if the new value
isn't one of those strings.
isContentEditable
Returns true if the element is editable; otherwise, returns false.
designMode
IDL attributedesignMode
[ = value ]Returns "on
" if the document is editable,
and "off
" if it isn't.
Can be set, to change the document's current state.
Authors are encouraged to set the 'white-space' property on editing hosts and on markup that was originally created through these editing mechanisms to the value 'pre-wrap'. Default HTML whitespace handling is not well suited to WYSIWYG editing, and line wrapping will not work correctly in some corner cases if 'white-space' is left at its default value.
As an example of problems that occur if the default 'normal' value is used instead, consider the case of the user typing "yellow␣␣ball", with two spaces (here represented by "␣") between the words. With the editing rules in place for the default value of 'white-space' ('normal'), the resulting markup will either consist of "yellow ball" or "yellow ball"; i.e., there will be a non-breaking space between the two words in addition to the regular space. This is necessary because the 'normal' value for 'white-space' requires adjacent regular spaces to be collapsed together.
In the former case, "yellow⍽" might wrap to the next line ("⍽" being used here to represent a non-breaking space) even though "yellow" alone might fit at the end of the line; in the latter case, "⍽ball", if wrapped to the start of the line, would have visible indentation from the non-breaking space.
When 'white-space' is set to 'pre-wrap', however, the editing rules will instead simply put two regular spaces between the words, and should the two words be split at the end of a line, the spaces would be neatly removed from the rendering.
The definition of the terms active range, editing
host, and editable, the user interface requirements
of elements that are editing hosts
or editable, the
execCommand()
,
queryCommandEnabled()
,
queryCommandIndeterm()
,
queryCommandState()
,
queryCommandSupported()
, and
queryCommandValue()
methods, and text selections are defined in the HTML Editing APIs
specification. The interaction of editing and the undo/redo features
in user agents is defined by the UndoManager and DOM Transaction
specification. [EDITING] [UNDO]
The spellcheck
attribute is an enumerated attribute whose keywords are
the empty string, true
and false
. The empty string and the true
keyword map to the true state. The false
keyword maps to the false state. In
addition, there is a third state, the default state, which is
the missing value default (and the invalid value
default).
The true state indicates that the element is
to have its spelling and grammar checked. The default state
indicates that the element is to act according to a default
behavior, possibly based on the parent element's own spellcheck
state, as defined below.
The false state indicates that the element is not to be
checked.
spellcheck
[ = value ]Returns true if the element is to have its spelling and grammar checked; otherwise, returns false.
Can be set, to override the default and set the spellcheck
content attribute.
This specification does not define the user interface for spelling and grammar checkers. A user agent could offer on-demand checking, could perform continuous checking while the checking is enabled, or could use other interfaces.
This section defines an event-based drag-and-drop mechanism.
This specification does not define exactly what a drag-and-drop operation actually is.
On a visual medium with a pointing device, a drag operation could
be the default action of a mousedown
event that is followed by a
series of mousemove
events, and
the drop could be triggered by the mouse being released.
When using an input modality other than a pointing device, users would probably have to explicitly indicate their intention to perform a drag-and-drop operation, stating what they wish to drag and where they wish to drop it, respectively.
To make an element draggable is simple: give the element a draggable
attribute, and set an event
listener for dragstart
that
stores the data being dragged.
The event handler typically needs to check that it's not a text
selection that is being dragged, and then needs to store data into
the DataTransfer
object and set the allowed effects
(copy, move, link, or some combination).
For example:
<p>What fruits do you like?</p> <ol ondragstart="dragStartHandler(event)"> <li draggable="true" data-value="fruit-apple">Apples</li> <li draggable="true" data-value="fruit-orange">Oranges</li> <li draggable="true" data-value="fruit-pear">Pears</li> </ol> <script> var internalDNDType = 'text/x-example'; // set this to something specific to your site function dragStartHandler(event) { if (event.target instanceof HTMLLIElement) { // use the element's data-value="" attribute as the value to be moving: event.dataTransfer.setData(internalDNDType, event.target.dataset.value); event.dataTransfer.effectAllowed = 'move'; // only allow moves } else { event.preventDefault(); // don't allow selection to be dragged } } </script>
To accept a drop, the drop target has to have a dropzone
attribute and listen to the
drop
event.
The value of the dropzone
attribute specifies what kind of data to accept (e.g. "string:text/plain
" to accept any text strings, or
"file:image/png
" to accept a PNG image file) and what
kind of feedback to give (e.g. "move
" to indicate that
the data will be moved).
Instead of using the dropzone
attribute, a drop target can
handle the dragenter
event (to
report whether or not the drop target is to accept the drop) and the
dragover
event (to specify what
feedback is to be shown to the user).
The drop
event allows the actual
drop to be performed. This event needs to be canceled, so that the
dropEffect
attribute's value can be used by the source (otherwise it's
reset).
For example:
<p>Drop your favorite fruits below:</p> <ol dropzone="move string:text/x-example" ondrop="dropHandler(event)"> <-- don't forget to change the "text/x-example" type to something specific to your site --> </ol> <script> var internalDNDType = 'text/x-example'; // set this to something specific to your site function dropHandler(event) { var li = document.createElement('li'); var data = event.dataTransfer.getData(internalDNDType); if (data == 'fruit-apple') { li.textContent = 'Apples'; } else if (data == 'fruit-orange') { li.textContent = 'Oranges'; } else if (data == 'fruit-pear') { li.textContent = 'Pears'; } else { li.textContent = 'Unknown Fruit'; } event.target.appendChild(li); } </script>
To remove the original element (the one that was dragged) from
the display, the dragend
event
can be used.
For our example here, that means updating the original markup to handle that event:
<p>What fruits do you like?</p> <ol ondragstart="dragStartHandler(event)" ondragend="dragEndHandler(event)"> ...as before... </ol> <script> function dragStartHandler(event) { // ...as before... } function dragEndHandler(event) { // remove the dragged element event.target.parentNode.removeChild(event.target); } </script>
The data that underlies a drag-and-drop operation, known as the drag data store, consists of the following information:
A drag data store item list, which is a list of items representing the dragged data, each consisting of the following information:
The kind of data:
Text.
Binary data with a file name.
A Unicode string giving the type or format of the data, generally given by a MIME type. Some values that are not MIME types are special-cased for legacy reasons. The API does not enforce the use of MIME types; other values can be used as well. In all cases, however, the values are all converted to ASCII lowercase by the API.
Strings that contain space characters cannot be used with the dropzone
attribute, so authors are
encouraged to use only MIME types
or custom strings (without spaces).
There is a limit of one Plain Unicode string item per item type string.
A Unicode or binary string, in some cases with a file name (itself a Unicode string), as per the drag data item kind.
The drag data store item list is ordered in the order that the items were added to the list; most recently added last.
The following information, used to generate the UI feedback during the drag:
A drag data store mode, which is one of the following:
For the dragstart
event.
New data can be added to the drag data store.
For the drop
event. The list of
items representing dragged data can be read, including the data.
No new data can be added.
For all other events. The formats and kinds in the drag data store list of items representing dragged data can be enumerated, but the data itself is unavailable and no new data can be added.
A drag data store allowed effects state, which is a string.
When a drag data store is created, it must be initialized such that its
drag data store item list is empty, it has no
drag data store default feedback, its drag data
store elements list is empty, it has no drag data store
bitmap / drag data store hot spot coordinate,
its drag data store mode is protected mode, and its drag data
store allowed effects state is the string "uninitialized
".
DataTransfer
interfaceDataTransfer
objects are used to expose the
drag data store that underlies a drag-and-drop
operation.
interface DataTransfer { attribute DOMString dropEffect; attribute DOMString effectAllowed; readonly attribute DataTransferItemList items; void setDragImage(Element image, long x, long y); void addElement(Element element); /* old interface */ readonly attribute DOMStringList types; DOMString getData(DOMString format); void setData(DOMString format, DOMString data); void clearData(optional DOMString format); readonly attribute FileList files; };
dropEffect
[ = value ]Returns the kind of operation that is currently selected. If
the kind of operation isn't one of those that is allowed by the
effectAllowed
attribute, then the operation will fail.
Can be set, to change the selected operation.
The possible values are "none
", "copy
", "link
", and "move
".
effectAllowed
[ = value ]Returns the kinds of operations that are to be allowed.
Can be set, to change the allowed operations.
The possible values are "none
", "copy
", "copyLink
", "copyMove
", "link
", "linkMove
", "move
", "all
", and "uninitialized
",
items
Returns a DataTransferItemList
object, with the drag data.
setDragImage
(element, x, y)Uses the given element to update the drag feedback, replacing any previously specified feedback.
addElement
(element)Adds the given element to the list of elements used to render the drag feedback.
types
Returns a DOMStringList
listing the formats that
were set in the dragstart
event. In addition, if any files are being dragged, then one of
the types will be the string "Files
".
getData
(format)Returns the specified data. If there is no such data, returns the empty string.
setData
(format, data)Adds the specified data.
clearData
( [ format ] )Removes the data of the specified formats. Removes all data if the argument is omitted.
files
Returns a FileList
of the files being dragged, if any.
DataTransfer
objects are used during the drag-and-drop events, and are only valid while
those events are being fired.
DataTransferItemList
interfaceEach DataTransfer
object is associated with a
DataTransferItemList
object.
interface DataTransferItemList { readonly attribute unsigned long length; getter DataTransferItem (unsigned long index); deleter void (unsigned long index); void clear(); DataTransferItem? add(DOMString data, DOMString type); DataTransferItem? add(File data); };
length
Returns the number of items in the drag data store.
Returns the DataTransferItem
object representing the indexth entry in the drag data store.
delete
items[index]Removes the indexth entry in the drag data store.
clear
()Removes all the entries in the drag data store.
add
(data)add
(data, type)Adds a new entry for the given data to the drag data store. If the data is plain text then a type string has to be provided also.
DataTransferItem
interfaceEach DataTransferItem
object is associated with a
DataTransfer
object.
interface DataTransferItem {
readonly attribute DOMString kind;
readonly attribute DOMString type;
void getAsString(FunctionStringCallback? _callback);
File? getAsFile();
};
[Callback, NoInterfaceObject]
interface FunctionStringCallback {
void handleEvent(DOMString data);
};
kind
Returns the drag data item kind, one of: "string", "file".
type
Returns the drag data item type string.
getAsString
(callback)Invokes the callback with the string data as the argument, if the drag data item kind is Plain Unicode string.
getAsFile
()Returns a File
object, if the drag data item kind is File.
DragEvent
interfaceThe drag-and-drop processing model involves several events. They
all use the DragEvent
interface.
[Constructor(DOMString type, optional DragEventInit eventInitDict)] interface DragEvent : MouseEvent { readonly attribute DataTransfer? dataTransfer; }; dictionary DragEventInit : MouseEventInit { DataTransfer? dataTransfer; };
dataTransfer
Returns the DataTransfer
object for the event.
The following events are involved in the drag-and-drop model.
Event Name | Target | Cancelable? | Drag data store mode | dropEffect |
Default Action |
---|---|---|---|---|---|
dragstart |
Source node | ✓ Cancelable | Read/write mode | "none " |
Initiate the drag-and-drop operation |
drag |
Source node | ✓ Cancelable | Protected mode | "none " |
Continue the drag-and-drop operation |
dragenter |
Immediate user selection or the body element | ✓ Cancelable | Protected mode | Based on effectAllowed value |
Reject immediate user selection as potential target element |
dragleave |
Previous target element | — | Protected mode | "none " |
None |
dragover |
Current target element | ✓ Cancelable | Protected mode | Based on effectAllowed value |
Reset the current drag operation to "none" |
drop |
Current target element | ✓ Cancelable | Read-only mode | Current drag operation | Varies |
dragend |
Source node | — | Protected mode | Current drag operation | Varies |
Not shown in the above table: all these events bubble, and the
effectAllowed
attribute always has the value it had after the previous event was
fired, defaulting to "uninitialized
" in the
dragstart
event.
draggable
attributeAll HTML elements may have the draggable
content attribute set. The
draggable
attribute is an
enumerated attribute. It has three states. The first
state is true and it has the keyword true
. The second state is false and it has
the keyword false
. The third state is
auto; it has no keywords but it is the missing value
default.
The true state means the element is draggable; the false state means that it is not. The auto state uses the default behavior of the user agent.
draggable
[ = value ]Returns true if the element is draggable; otherwise, returns false.
Can be set, to override the default and set the draggable
content attribute.
dropzone
attributeAll HTML elements may have the dropzone
content attribute set. When
specified, its value must be an unordered set of unique
space-separated tokens that are ASCII
case-insensitive. The allowed values are the following:
copy
Indicates that dropping an accepted item on the element will result in a copy of the dragged data.
move
Indicates that dropping an accepted item on the element will result in the dragged data being moved to the new location.
link
Indicates that dropping an accepted item on the element will result in a link to the original data.
string:
"Indicates that items with the drag data item kind Plain Unicode string and the drag data item type string set to a value that matches the remainder of the keyword are accepted.
file:
"Indicates that items with the drag data item kind File and the drag data item type string set to a value that matches the remainder of the keyword are accepted.
The dropzone
content
attribute's values must not have more than one of the three feedback
values (copy
, move
, and link
) specified. If none are
specified, the copy
value is
implied.
The dropzone
IDL
attribute must reflect the content attribute of the
same name.
In this example, a div
element is made into a drop
target for image files using the dropzone
attribute. Images dropped
into the target are then displayed.
<div dropzone="copy file:image/png file:image/gif file:image/jpeg" ondrop="receive(event, this)"> <p>Drop an image here to have it displayed.</p> </div> <script> function receive(event, element) { var data = event.dataTransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) { var img = new Image(); img.src = window.createObjectURL(data[i].getAsFile()); element.appendChild(img); } } } </script>
This section only describes the rules for resources labeled with an HTML MIME type. Rules for XML resources are discussed in the section below entitled "The XHTML syntax".
Documents must consist of the following parts, in the given order:
html
element.The various types of content mentioned above are described in the next few sections.
In addition, there are some restrictions on how character encoding declarations are to be serialized, as discussed in the section on that topic.
Space characters before the root html
element, and
space characters at the start of the html
element and
before the head
element, will be dropped when the
document is parsed; space characters after the root
html
element will be parsed as if they were at the end
of the body
element. Thus, space characters around the
root element do not round-trip.
It is suggested that newlines be inserted after the DOCTYPE,
after any comments that are before the root element, after the
html
element's start tag (if it is not omitted), and after any comments
that are inside the html
element but before the
head
element.
Many strings in the HTML syntax (e.g. the names of elements and their attributes) are case-insensitive, but only for characters in the ranges U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z) and U+0061 to U+007A (LATIN SMALL LETTER A to LATIN SMALL LETTER Z). For convenience, in this section this is just referred to as "case-insensitive".
A DOCTYPE is a required preamble.
DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.
A DOCTYPE must consist of the following components, in this order:
<!DOCTYPE
".html
".In other words, <!DOCTYPE html>
,
case-insensitively.
For the purposes of HTML generators that cannot output HTML
markup with the short DOCTYPE "<!DOCTYPE
html>
", a DOCTYPE legacy string may be inserted
into the DOCTYPE (in the position defined above). This string must
consist of:
SYSTEM
".about:legacy-compat
".In other words, <!DOCTYPE html SYSTEM
"about:legacy-compat">
or <!DOCTYPE html SYSTEM
'about:legacy-compat'>
, case-insensitively except for the
part in single or double quotes.
The DOCTYPE legacy string should not be used unless the document is generated from a system that cannot output the shorter string.
To help authors transition from HTML4 and XHTML1, an obsolete permitted DOCTYPE string can be inserted into the DOCTYPE (in the position defined above). This string must consist of:
PUBLIC
".Public identifier | System identifier |
---|---|
-//W3C//DTD HTML 4.0//EN
| |
-//W3C//DTD HTML 4.0//EN
| http://www.w3.org/TR/REC-html40/strict.dtd
|
-//W3C//DTD HTML 4.01//EN
| |
-//W3C//DTD HTML 4.01//EN
| http://www.w3.org/TR/html4/strict.dtd
|
-//W3C//DTD XHTML 1.0 Strict//EN
| http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
|
-//W3C//DTD XHTML 1.1//EN
| http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd
|
A DOCTYPE containing an obsolete permitted DOCTYPE string is an obsolete permitted DOCTYPE. Authors should not use obsolete permitted DOCTYPEs, as they are unnecessarily long.
There are five different kinds of elements: void elements, raw text elements, RCDATA elements, foreign elements, and normal elements.
area
, base
, br
,
col
, command
, embed
,
hr
, img
, input
,
keygen
, link
, meta
,
param
, source
, track
,
wbr
script
, style
textarea
, title
Tags are used to delimit the start and end of elements in the markup. Raw text, RCDATA, and normal elements have a start tag to indicate where they begin, and an end tag to indicate where they end. The start and end tags of certain normal elements can be omitted, as described later. Those that cannot be omitted must not be omitted. Void elements only have a start tag; end tags must not be specified for void elements. Foreign elements must either have a start tag and an end tag, or a start tag that is marked as self-closing, in which case they must not have an end tag.
The contents of the element must be placed between just after the start tag (which might be implied, in certain cases) and just before the end tag (which again, might be implied in certain cases). The exact allowed contents of each individual element depend on the content model of that element, as described earlier in this specification. Elements must not contain content that their content model disallows. In addition to the restrictions placed on the contents by those content models, however, the five types of elements have additional syntactic requirements.
Void elements can't have any contents (since there's no end tag, no content can be put between the start tag and the end tag).
Raw text elements can have text, though it has restrictions described below.
RCDATA elements can have text and character references, but the text must not contain an ambiguous ampersand. There are also further restrictions described below.
Foreign elements whose start tag is marked as self-closing can't have any contents (since, again, as there's no end tag, no content can be put between the start tag and the end tag). Foreign elements whose start tag is not marked as self-closing can have text, character references, CDATA sections, other elements, and comments, but the text must not contain the character U+003C LESS-THAN SIGN (<) or an ambiguous ampersand.
The HTML syntax does not support namespace declarations, even in foreign elements.
For instance, consider the following HTML fragment:
<p> <svg> <metadata> <!-- this is invalid --> <cdr:license xmlns:cdr="http://www.example.com/cdr/metadata" name="MIT"/> </metadata> </svg> </p>
The innermost element, cdr:license
, is
actually in the SVG namespace, as the "xmlns:cdr
" attribute has no effect (unlike in
XML). In fact, as the comment in the fragment above says, the
fragment is actually non-conforming. This is because the SVG
specification does not define any elements called "cdr:license
" in the SVG namespace.
Normal elements can have text, character references, other elements, and comments, but the text must not contain the character U+003C LESS-THAN SIGN (<) or an ambiguous ampersand. Some normal elements also have yet more restrictions on what content they are allowed to hold, beyond the restrictions imposed by the content model and those described in this paragraph. Those restrictions are described below.
Tags contain a tag name, giving the element's name. HTML elements all have names that only use characters in the range ASCII digits, lowercase ASCII letters, and uppercase ASCII letters. In the HTML syntax, tag names, even those for foreign elements, may be written with any mix of lower- and uppercase letters that, when converted to all-lowercase, matches the element's tag name; tag names are case-insensitive.
Start tags must have the following format:
End tags must have the following format:
Attributes for an element are expressed inside the element's start tag.
Attributes have a name and a value. Attribute names must consist of one or more characters other than the space characters, U+0000 NULL, """ (U+0022), "'" (U+0027), U+003E GREATER-THAN SIGN (>), "/" (U+002F), and "=" (U+003D) characters, the control characters, and any characters that are not defined by Unicode. In the HTML syntax, attribute names, even those for foreign elements, may be written with any mix of lower- and uppercase letters that are an ASCII case-insensitive match for the attribute's name.
Attribute values are a mixture of text and character references, except with the additional restriction that the text cannot contain an ambiguous ampersand.
Attributes can be specified in four different ways:
Just the attribute name. The value is implicitly the empty string.
In the following example, the disabled
attribute is given with
the empty attribute syntax:
<input disabled>
If an attribute using the empty attribute syntax is to be followed by another attribute, then there must be a space character separating the two.
The attribute name, followed by zero or more space characters, followed by a single U+003D EQUALS SIGN character, followed by zero or more space characters, followed by the attribute value, which, in addition to the requirements given above for attribute values, must not contain any literal space characters, any """ (U+0022) characters, "'" (U+0027) characters, "=" (U+003D) characters, U+003C LESS-THAN SIGN characters (<), U+003E GREATER-THAN SIGN characters (>), or "`" (U+0060) characters, and must not be the empty string.
In the following example, the value
attribute is given
with the unquoted attribute value syntax:
<input value=yes>
If an attribute using the unquoted attribute syntax is to be followed by another attribute or by the optional "/" (U+002F) character allowed in step 6 of the start tag syntax above, then there must be a space character separating the two.
The attribute name, followed by zero or more space characters, followed by a single U+003D EQUALS SIGN character, followed by zero or more space characters, followed by a single "'" (U+0027) character, followed by the attribute value, which, in addition to the requirements given above for attribute values, must not contain any literal "'" (U+0027) characters, and finally followed by a second single U+0027 APOSTROPHE character (').
In the following example, the type
attribute is given with the
single-quoted attribute value syntax:
<input type='checkbox'>
If an attribute using the single-quoted attribute syntax is to be followed by another attribute, then there must be a space character separating the two.
The attribute name, followed by zero or more space characters, followed by a single U+003D EQUALS SIGN character, followed by zero or more space characters, followed by a single """ (U+0022) character, followed by the attribute value, which, in addition to the requirements given above for attribute values, must not contain any literal """ (U+0022) characters, and finally followed by a second single """ (U+0022) character.
In the following example, the name
attribute is given with the
double-quoted attribute value syntax:
<input name="be evil">
If an attribute using the double-quoted attribute syntax is to be followed by another attribute, then there must be a space character separating the two.
There must never be two or more attributes on the same start tag whose names are an ASCII case-insensitive match for each other.
When a foreign element has one of the namespaced attributes given by the local name and namespace of the first and second cells of a row from the following table, it must be written using the name given by the third cell from the same row.
Local name | Namespace | Attribute name |
---|---|---|
actuate | XLink namespace | xlink:actuate
|
arcrole | XLink namespace | xlink:arcrole
|
href | XLink namespace | xlink:href
|
role | XLink namespace | xlink:role
|
show | XLink namespace | xlink:show
|
title | XLink namespace | xlink:title
|
type | XLink namespace | xlink:type
|
base | XML namespace | xml:base
|
lang | XML namespace | xml:lang
|
space | XML namespace | xml:space
|
xmlns | XMLNS namespace | xmlns
|
xlink | XMLNS namespace | xmlns:xlink
|
No other namespaced attribute can be expressed in the HTML syntax.
Certain tags can be omitted.
Omitting an element's start tag in the situations
described below does not mean the element is not present; it is
implied, but it is still there. For example, an HTML document always
has a root html
element, even if the string <html>
doesn't appear anywhere in the markup.
An html
element's start tag may be omitted if the
first thing inside the html
element is not a comment.
An html
element's end
tag may be omitted if the html
element is not
immediately followed by a comment.
A head
element's start tag may be omitted if the
element is empty, or if the first thing inside the
head
element is an element.
A head
element's end
tag may be omitted if the head
element is not
immediately followed by a space character or a comment.
A body
element's start tag may be omitted if the
element is empty, or if the first thing inside the body
element is not a space character or a comment, except if the first thing
inside the body
element is a script
or
style
element.
A body
element's end
tag may be omitted if the body
element is not
immediately followed by a comment.
An li
element's end
tag may be omitted if the li
element is
immediately followed by another li
element or if there
is no more content in the parent element.
A dt
element's end
tag may be omitted if the dt
element is
immediately followed by another dt
element or a
dd
element.
A dd
element's end
tag may be omitted if the dd
element is
immediately followed by another dd
element or a
dt
element, or if there is no more content in the
parent element.
A p
element's end
tag may be omitted if the p
element is
immediately followed by an address
,
article
, aside
, blockquote
,
dir
, div
, dl
,
fieldset
, footer
, form
,
h1
, h2
, h3
, h4
,
h5
, h6
, header
,
hgroup
, hr
, menu
,
nav
, ol
, p
, pre
,
section
, table
, or ul
,
element, or if there is no more content in the parent element and
the parent element is not an a
element.
An rt
element's end
tag may be omitted if the rt
element is
immediately followed by an rt
or rp
element, or if there is no more content in the parent element.
An rp
element's end
tag may be omitted if the rp
element is
immediately followed by an rt
or rp
element, or if there is no more content in the parent element.
An optgroup
element's end tag may be omitted if the
optgroup
element is immediately followed by
another optgroup
element, or if there is no
more content in the parent element.
An option
element's end
tag may be omitted if the option
element is
immediately followed by another option
element, or if
it is immediately followed by an optgroup
element, or
if there is no more content in the parent element.
A colgroup
element's start tag may be omitted if the
first thing inside the colgroup
element is a
col
element, and if the element is not immediately
preceded by another colgroup
element whose end tag has been omitted. (It can't be
omitted if the element is empty.)
A colgroup
element's end tag may be omitted if the
colgroup
element is not immediately followed by a
space character or a comment.
A thead
element's end
tag may be omitted if the thead
element is
immediately followed by a tbody
or tfoot
element.
A tbody
element's start tag may be omitted if the
first thing inside the tbody
element is a
tr
element, and if the element is not immediately
preceded by a tbody
, thead
, or
tfoot
element whose end
tag has been omitted. (It can't be omitted if the element is
empty.)
A tbody
element's end
tag may be omitted if the tbody
element is
immediately followed by a tbody
or tfoot
element, or if there is no more content in the parent element.
A tfoot
element's end
tag may be omitted if the tfoot
element is
immediately followed by a tbody
element, or if there is
no more content in the parent element.
A tr
element's end
tag may be omitted if the tr
element is
immediately followed by another tr
element, or if there
is no more content in the parent element.
A td
element's end
tag may be omitted if the td
element is
immediately followed by a td
or th
element, or if there is no more content in the parent element.
A th
element's end
tag may be omitted if the th
element is
immediately followed by a td
or th
element, or if there is no more content in the parent element.
However, a start tag must never be omitted if it has any attributes.
For historical reasons, certain elements have extra restrictions beyond even the restrictions given by their content model.
A table
element must not contain tr
elements, even though these elements are technically allowed inside
table
elements according to the content models
described in this specification. (If a tr
element is
put inside a table
in the markup, it will in fact imply
a tbody
start tag before it.)
A single newline may be
placed immediately after the start
tag of pre
and textarea
elements. This does not affect the processing of the element. The
otherwise optional newline
must be included if the element's contents themselves start
with a newline (because
otherwise the leading newline in the contents would be treated like
the optional newline, and ignored).
The text in raw text and
RCDATA elements must not contain any occurrences of the
string "</
" (U+003C LESS-THAN SIGN, U+002F
SOLIDUS) followed by characters that case-insensitively match the
tag name of the element followed by one of "tab" (U+0009), "LF" (U+000A), "FF" (U+000C), "CR" (U+000D), U+0020 SPACE, U+003E GREATER-THAN SIGN (>), or
"/" (U+002F).
Text is allowed inside elements, attribute values, and comments. Extra constraints are placed on what is and what is not allowed in text based on where the text is to be put, as described in the other sections.
Newlines in HTML may be represented either as "CR" (U+000D) characters, "LF" (U+000A) characters, or pairs of "CR" (U+000D), "LF" (U+000A) characters in that order.
Where character references are allowed, a character reference of a "LF" (U+000A) character (but not a "CR" (U+000D) character) also represents a newline.
In certain cases described in other sections, text may be mixed with character references. These can be used to escape characters that couldn't otherwise legally be included in text.
Character references must start with a U+0026 AMPERSAND character (&). Following this, there are three possible kinds of character references:
The numeric character reference forms described above are allowed to reference any Unicode code point other than U+0000, U+000D, permanently undefined Unicode characters (noncharacters), and control characters other than space characters.
An ambiguous ampersand is a U+0026 AMPERSAND character (&) that is followed by one or more characters in the range ASCII digits, lowercase ASCII letters, and uppercase ASCII letters, followed by a U+003B SEMICOLON character (;), where these characters do not match any of the names given in the named character references section.
CDATA sections must consist of the following components, in this order:
<![CDATA[
".]]>
".]]>
".CDATA sections can only be used in foreign content (MathML or
SVG). In this example, a CDATA section is used to escape the
contents of an ms
element:
<p>You can add a string to a number, but this stringifies the number:</p> <math> <ms><![CDATA[x<y]]></ms> <mo>+</mo> <mn>3</mn> <mo>=</mo> <ms><![CDATA[x<y3]]></ms> </math>
Comments must start with the
four character sequence U+003C LESS-THAN SIGN, U+0021 EXCLAMATION
MARK, U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS (<!--
). Following this sequence, the comment may
have text, with the additional
restriction that the text must not start with a single U+003E
GREATER-THAN SIGN character (>), nor start with a "-" (U+002D) character followed by a U+003E GREATER-THAN SIGN
(>) character, nor contain two consecutive U+002D HYPHEN-MINUS
characters (--
), nor end with a "-" (U+002D) character. Finally, the comment must be ended by
the three character sequence U+002D HYPHEN-MINUS, U+002D
HYPHEN-MINUS, U+003E GREATER-THAN SIGN (-->
).
This table lists the character reference names that are supported by HTML, and the code points to which they refer. It is referenced by the previous sections.
Name | Character(s) | Glyph |
---|---|---|
Aacute; | U+000C1 | Á |
aacute; | U+000E1 | á |
Abreve; | U+00102 | Ă |
abreve; | U+00103 | ă |
ac; | U+0223E | ∾ |
acd; | U+0223F | ∿ |
acE; | U+0223E U+00333 | ∾̳ |
Acirc; | U+000C2 | Â |
acirc; | U+000E2 | â |
acute; | U+000B4 | ´ |
Acy; | U+00410 | А |
acy; | U+00430 | а |
AElig; | U+000C6 | Æ |
aelig; | U+000E6 | æ |
af; | U+02061 | |
Afr; | U+1D504 | 𝔄 |
afr; | U+1D51E | 𝔞 |
Agrave; | U+000C0 | À |
agrave; | U+000E0 | à |
alefsym; | U+02135 | ℵ |
aleph; | U+02135 | ℵ |
Alpha; | U+00391 | Α |
alpha; | U+003B1 | α |
Amacr; | U+00100 | Ā |
amacr; | U+00101 | ā |
amalg; | U+02A3F | ⨿ |
AMP; | U+00026 | & |
amp; | U+00026 | & |
And; | U+02A53 | ⩓ |
and; | U+02227 | ∧ |
andand; | U+02A55 | ⩕ |
andd; | U+02A5C | ⩜ |
andslope; | U+02A58 | ⩘ |
andv; | U+02A5A | ⩚ |
ang; | U+02220 | ∠ |
ange; | U+029A4 | ⦤ |
angle; | U+02220 | ∠ |
angmsd; | U+02221 | ∡ |
angmsdaa; | U+029A8 | ⦨ |
angmsdab; | U+029A9 | ⦩ |
angmsdac; | U+029AA | ⦪ |
angmsdad; | U+029AB | ⦫ |
angmsdae; | U+029AC | ⦬ |
angmsdaf; | U+029AD | ⦭ |
angmsdag; | U+029AE | ⦮ |
angmsdah; | U+029AF | ⦯ |
angrt; | U+0221F | ∟ |
angrtvb; | U+022BE | ⊾ |
angrtvbd; | U+0299D | ⦝ |
angsph; | U+02222 | ∢ |
angst; | U+000C5 | Å |
angzarr; | U+0237C | ⍼ |
Aogon; | U+00104 | Ą |
aogon; | U+00105 | ą |
Aopf; | U+1D538 | 𝔸 |
aopf; | U+1D552 | 𝕒 |
ap; | U+02248 | ≈ |
apacir; | U+02A6F | ⩯ |
apE; | U+02A70 | ⩰ |
ape; | U+0224A | ≊ |
apid; | U+0224B | ≋ |
apos; | U+00027 | ' |
ApplyFunction; | U+02061 | |
approx; | U+02248 | ≈ |
approxeq; | U+0224A | ≊ |
Aring; | U+000C5 | Å |
aring; | U+000E5 | å |
Ascr; | U+1D49C | 𝒜 |
ascr; | U+1D4B6 | 𝒶 |
Assign; | U+02254 | ≔ |
ast; | U+0002A | * |
asymp; | U+02248 | ≈ |
asympeq; | U+0224D | ≍ |
Atilde; | U+000C3 | Ã |
atilde; | U+000E3 | ã |
Auml; | U+000C4 | Ä |
auml; | U+000E4 | ä |
awconint; | U+02233 | ∳ |
awint; | U+02A11 | ⨑ |
backcong; | U+0224C | ≌ |
backepsilon; | U+003F6 | ϶ |
backprime; | U+02035 | ‵ |
backsim; | U+0223D | ∽ |
backsimeq; | U+022CD | ⋍ |
Backslash; | U+02216 | ∖ |
Barv; | U+02AE7 | ⫧ |
barvee; | U+022BD | ⊽ |
Barwed; | U+02306 | ⌆ |
barwed; | U+02305 | ⌅ |
barwedge; | U+02305 | ⌅ |
bbrk; | U+023B5 | ⎵ |
bbrktbrk; | U+023B6 | ⎶ |
bcong; | U+0224C | ≌ |
Bcy; | U+00411 | Б |
bcy; | U+00431 | б |
bdquo; | U+0201E | „ |
becaus; | U+02235 | ∵ |
Because; | U+02235 | ∵ |
because; | U+02235 | ∵ |
bemptyv; | U+029B0 | ⦰ |
bepsi; | U+003F6 | ϶ |
bernou; | U+0212C | ℬ |
Bernoullis; | U+0212C | ℬ |
Beta; | U+00392 | Β |
beta; | U+003B2 | β |
beth; | U+02136 | ℶ |
between; | U+0226C | ≬ |
Bfr; | U+1D505 | 𝔅 |
bfr; | U+1D51F | 𝔟 |
bigcap; | U+022C2 | ⋂ |
bigcirc; | U+025EF | ◯ |
bigcup; | U+022C3 | ⋃ |
bigodot; | U+02A00 | ⨀ |
bigoplus; | U+02A01 | ⨁ |
bigotimes; | U+02A02 | ⨂ |
bigsqcup; | U+02A06 | ⨆ |
bigstar; | U+02605 | ★ |
bigtriangledown; | U+025BD | ▽ |
bigtriangleup; | U+025B3 | △ |
biguplus; | U+02A04 | ⨄ |
bigvee; | U+022C1 | ⋁ |
bigwedge; | U+022C0 | ⋀ |
bkarow; | U+0290D | ⤍ |
blacklozenge; | U+029EB | ⧫ |
blacksquare; | U+025AA | ▪ |
blacktriangle; | U+025B4 | ▴ |
blacktriangledown; | U+025BE | ▾ |
blacktriangleleft; | U+025C2 | ◂ |
blacktriangleright; | U+025B8 | ▸ |
blank; | U+02423 | ␣ |
blk12; | U+02592 | ▒ |
blk14; | U+02591 | ░ |
blk34; | U+02593 | ▓ |
block; | U+02588 | █ |
bne; | U+0003D U+020E5 | =⃥ |
bnequiv; | U+02261 U+020E5 | ≡⃥ |
bNot; | U+02AED | ⫭ |
bnot; | U+02310 | ⌐ |
Bopf; | U+1D539 | 𝔹 |
bopf; | U+1D553 | 𝕓 |
bot; | U+022A5 | ⊥ |
bottom; | U+022A5 | ⊥ |
bowtie; | U+022C8 | ⋈ |
boxbox; | U+029C9 | ⧉ |
boxDL; | U+02557 | ╗ |
boxDl; | U+02556 | ╖ |
boxdL; | U+02555 | ╕ |
boxdl; | U+02510 | ┐ |
boxDR; | U+02554 | ╔ |
boxDr; | U+02553 | ╓ |
boxdR; | U+02552 | ╒ |
boxdr; | U+0250C | ┌ |
boxH; | U+02550 | ═ |
boxh; | U+02500 | ─ |
boxHD; | U+02566 | ╦ |
boxHd; | U+02564 | ╤ |
boxhD; | U+02565 | ╥ |
boxhd; | U+0252C | ┬ |
boxHU; | U+02569 | ╩ |
boxHu; | U+02567 | ╧ |
boxhU; | U+02568 | ╨ |
boxhu; | U+02534 | ┴ |
boxminus; | U+0229F | ⊟ |
boxplus; | U+0229E | ⊞ |
boxtimes; | U+022A0 | ⊠ |
boxUL; | U+0255D | ╝ |
boxUl; | U+0255C | ╜ |
boxuL; | U+0255B | ╛ |
boxul; | U+02518 | ┘ |
boxUR; | U+0255A | ╚ |
boxUr; | U+02559 | ╙ |
boxuR; | U+02558 | ╘ |
boxur; | U+02514 | └ |
boxV; | U+02551 | ║ |
boxv; | U+02502 | │ |
boxVH; | U+0256C | ╬ |
boxVh; | U+0256B | ╫ |
boxvH; | U+0256A | ╪ |
boxvh; | U+0253C | ┼ |
boxVL; | U+02563 | ╣ |
boxVl; | U+02562 | ╢ |
boxvL; | U+02561 | ╡ |
boxvl; | U+02524 | ┤ |
boxVR; | U+02560 | ╠ |
boxVr; | U+0255F | ╟ |
boxvR; | U+0255E | ╞ |
boxvr; | U+0251C | ├ |
bprime; | U+02035 | ‵ |
Breve; | U+002D8 | ˘ |
breve; | U+002D8 | ˘ |
brvbar; | U+000A6 | ¦ |
Bscr; | U+0212C | ℬ |
bscr; | U+1D4B7 | 𝒷 |
bsemi; | U+0204F | ⁏ |
bsim; | U+0223D | ∽ |
bsime; | U+022CD | ⋍ |
bsol; | U+0005C | \ |
bsolb; | U+029C5 | ⧅ |
bsolhsub; | U+027C8 | ⟈ |
bull; | U+02022 | • |
bullet; | U+02022 | • |
bump; | U+0224E | ≎ |
bumpE; | U+02AAE | ⪮ |
bumpe; | U+0224F | ≏ |
Bumpeq; | U+0224E | ≎ |
bumpeq; | U+0224F | ≏ |
Cacute; | U+00106 | Ć |
cacute; | U+00107 | ć |
Cap; | U+022D2 | ⋒ |
cap; | U+02229 | ∩ |
capand; | U+02A44 | ⩄ |
capbrcup; | U+02A49 | ⩉ |
capcap; | U+02A4B | ⩋ |
capcup; | U+02A47 | ⩇ |
capdot; | U+02A40 | ⩀ |
CapitalDifferentialD; | U+02145 | ⅅ |
caps; | U+02229 U+0FE00 | ∩︀ |
caret; | U+02041 | ⁁ |
caron; | U+002C7 | ˇ |
Cayleys; | U+0212D | ℭ |
ccaps; | U+02A4D | ⩍ |
Ccaron; | U+0010C | Č |
ccaron; | U+0010D | č |
Ccedil; | U+000C7 | Ç |
ccedil; | U+000E7 | ç |
Ccirc; | U+00108 | Ĉ |
ccirc; | U+00109 | ĉ |
Cconint; | U+02230 | ∰ |
ccups; | U+02A4C | ⩌ |
ccupssm; | U+02A50 | ⩐ |
Cdot; | U+0010A | Ċ |
cdot; | U+0010B | ċ |
cedil; | U+000B8 | ¸ |
Cedilla; | U+000B8 | ¸ |
cemptyv; | U+029B2 | ⦲ |
cent; | U+000A2 | ¢ |
CenterDot; | U+000B7 | · |
centerdot; | U+000B7 | · |
Cfr; | U+0212D | ℭ |
cfr; | U+1D520 | 𝔠 |
CHcy; | U+00427 | Ч |
chcy; | U+00447 | ч |
check; | U+02713 | ✓ |
checkmark; | U+02713 | ✓ |
Chi; | U+003A7 | Χ |
chi; | U+003C7 | χ |
cir; | U+025CB | ○ |
circ; | U+002C6 | ˆ |
circeq; | U+02257 | ≗ |
circlearrowleft; | U+021BA | ↺ |
circlearrowright; | U+021BB | ↻ |
circledast; | U+0229B | ⊛ |
circledcirc; | U+0229A | ⊚ |
circleddash; | U+0229D | ⊝ |
CircleDot; | U+02299 | ⊙ |
circledR; | U+000AE | ® |
circledS; | U+024C8 | Ⓢ |
CircleMinus; | U+02296 | ⊖ |
CirclePlus; | U+02295 | ⊕ |
CircleTimes; | U+02297 | ⊗ |
cirE; | U+029C3 | ⧃ |
cire; | U+02257 | ≗ |
cirfnint; | U+02A10 | ⨐ |
cirmid; | U+02AEF | ⫯ |
cirscir; | U+029C2 | ⧂ |
ClockwiseContourIntegral; | U+02232 | ∲ |
CloseCurlyDoubleQuote; | U+0201D | ” |
CloseCurlyQuote; | U+02019 | ’ |
clubs; | U+02663 | ♣ |
clubsuit; | U+02663 | ♣ |
Colon; | U+02237 | ∷ |
colon; | U+0003A | : |
Colone; | U+02A74 | ⩴ |
colone; | U+02254 | ≔ |
coloneq; | U+02254 | ≔ |
comma; | U+0002C | , |
commat; | U+00040 | @ |
comp; | U+02201 | ∁ |
compfn; | U+02218 | ∘ |
complement; | U+02201 | ∁ |
complexes; | U+02102 | ℂ |
cong; | U+02245 | ≅ |
congdot; | U+02A6D | ⩭ |
Congruent; | U+02261 | ≡ |
Conint; | U+0222F | ∯ |
conint; | U+0222E | ∮ |
ContourIntegral; | U+0222E | ∮ |
Copf; | U+02102 | ℂ |
copf; | U+1D554 | 𝕔 |
coprod; | U+02210 | ∐ |
Coproduct; | U+02210 | ∐ |
COPY; | U+000A9 | © |
copy; | U+000A9 | © |
copysr; | U+02117 | ℗ |
CounterClockwiseContourIntegral; | U+02233 | ∳ |
crarr; | U+021B5 | ↵ |
Cross; | U+02A2F | ⨯ |
cross; | U+02717 | ✗ |
Cscr; | U+1D49E | 𝒞 |
cscr; | U+1D4B8 | 𝒸 |
csub; | U+02ACF | ⫏ |
csube; | U+02AD1 | ⫑ |
csup; | U+02AD0 | ⫐ |
csupe; | U+02AD2 | ⫒ |
ctdot; | U+022EF | ⋯ |
cudarrl; | U+02938 | ⤸ |
cudarrr; | U+02935 | ⤵ |
cuepr; | U+022DE | ⋞ |
cuesc; | U+022DF | ⋟ |
cularr; | U+021B6 | ↶ |
cularrp; | U+0293D | ⤽ |
Cup; | U+022D3 | ⋓ |
cup; | U+0222A | ∪ |
cupbrcap; | U+02A48 | ⩈ |
CupCap; | U+0224D | ≍ |
cupcap; | U+02A46 | ⩆ |
cupcup; | U+02A4A | ⩊ |
cupdot; | U+0228D | ⊍ |
cupor; | U+02A45 | ⩅ |
cups; | U+0222A U+0FE00 | ∪︀ |
curarr; | U+021B7 | ↷ |
curarrm; | U+0293C | ⤼ |
curlyeqprec; | U+022DE | ⋞ |
curlyeqsucc; | U+022DF | ⋟ |
curlyvee; | U+022CE | ⋎ |
curlywedge; | U+022CF | ⋏ |
curren; | U+000A4 | ¤ |
curvearrowleft; | U+021B6 | ↶ |
curvearrowright; | U+021B7 | ↷ |
cuvee; | U+022CE | ⋎ |
cuwed; | U+022CF | ⋏ |
cwconint; | U+02232 | ∲ |
cwint; | U+02231 | ∱ |
cylcty; | U+0232D | ⌭ |
Dagger; | U+02021 | ‡ |
dagger; | U+02020 | † |
daleth; | U+02138 | ℸ |
Darr; | U+021A1 | ↡ |
dArr; | U+021D3 | ⇓ |
darr; | U+02193 | ↓ |
dash; | U+02010 | ‐ |
Dashv; | U+02AE4 | ⫤ |
dashv; | U+022A3 | ⊣ |
dbkarow; | U+0290F | ⤏ |
dblac; | U+002DD | ˝ |
Dcaron; | U+0010E | Ď |
dcaron; | U+0010F | ď |
Dcy; | U+00414 | Д |
dcy; | U+00434 | д |
DD; | U+02145 | ⅅ |
dd; | U+02146 | ⅆ |
ddagger; | U+02021 | ‡ |
ddarr; | U+021CA | ⇊ |
DDotrahd; | U+02911 | ⤑ |
ddotseq; | U+02A77 | ⩷ |
deg; | U+000B0 | ° |
Del; | U+02207 | ∇ |
Delta; | U+00394 | Δ |
delta; | U+003B4 | δ |
demptyv; | U+029B1 | ⦱ |
dfisht; | U+0297F | ⥿ |
Dfr; | U+1D507 | 𝔇 |
dfr; | U+1D521 | 𝔡 |
dHar; | U+02965 | ⥥ |
dharl; | U+021C3 | ⇃ |
dharr; | U+021C2 | ⇂ |
DiacriticalAcute; | U+000B4 | ´ |
DiacriticalDot; | U+002D9 | ˙ |
DiacriticalDoubleAcute; | U+002DD | ˝ |
DiacriticalGrave; | U+00060 | ` |
DiacriticalTilde; | U+002DC | ˜ |
diam; | U+022C4 | ⋄ |
Diamond; | U+022C4 | ⋄ |
diamond; | U+022C4 | ⋄ |
diamondsuit; | U+02666 | ♦ |
diams; | U+02666 | ♦ |
die; | U+000A8 | ¨ |
DifferentialD; | U+02146 | ⅆ |
digamma; | U+003DD | ϝ |
disin; | U+022F2 | ⋲ |
div; | U+000F7 | ÷ |
divide; | U+000F7 | ÷ |
divideontimes; | U+022C7 | ⋇ |
divonx; | U+022C7 | ⋇ |
DJcy; | U+00402 | Ђ |
djcy; | U+00452 | ђ |
dlcorn; | U+0231E | ⌞ |
dlcrop; | U+0230D | ⌍ |
dollar; | U+00024 | $ |
Dopf; | U+1D53B | 𝔻 |
dopf; | U+1D555 | 𝕕 |
Dot; | U+000A8 | ¨ |
dot; | U+002D9 | ˙ |
DotDot; | U+020DC | ◌⃜ |
doteq; | U+02250 | ≐ |
doteqdot; | U+02251 | ≑ |
DotEqual; | U+02250 | ≐ |
dotminus; | U+02238 | ∸ |
dotplus; | U+02214 | ∔ |
dotsquare; | U+022A1 | ⊡ |
doublebarwedge; | U+02306 | ⌆ |
DoubleContourIntegral; | U+0222F | ∯ |
DoubleDot; | U+000A8 | ¨ |
DoubleDownArrow; | U+021D3 | ⇓ |
DoubleLeftArrow; | U+021D0 | ⇐ |
DoubleLeftRightArrow; | U+021D4 | ⇔ |
DoubleLeftTee; | U+02AE4 | ⫤ |
DoubleLongLeftArrow; | U+027F8 | ⟸ |
DoubleLongLeftRightArrow; | U+027FA | ⟺ |
DoubleLongRightArrow; | U+027F9 | ⟹ |
DoubleRightArrow; | U+021D2 | ⇒ |
DoubleRightTee; | U+022A8 | ⊨ |
DoubleUpArrow; | U+021D1 | ⇑ |
DoubleUpDownArrow; | U+021D5 | ⇕ |
DoubleVerticalBar; | U+02225 | ∥ |
DownArrow; | U+02193 | ↓ |
Downarrow; | U+021D3 | ⇓ |
downarrow; | U+02193 | ↓ |
DownArrowBar; | U+02913 | ⤓ |
DownArrowUpArrow; | U+021F5 | ⇵ |
DownBreve; | U+00311 | ◌̑ |
downdownarrows; | U+021CA | ⇊ |
downharpoonleft; | U+021C3 | ⇃ |
downharpoonright; | U+021C2 | ⇂ |
DownLeftRightVector; | U+02950 | ⥐ |
DownLeftTeeVector; | U+0295E | ⥞ |
DownLeftVector; | U+021BD | ↽ |
DownLeftVectorBar; | U+02956 | ⥖ |
DownRightTeeVector; | U+0295F | ⥟ |
DownRightVector; | U+021C1 | ⇁ |
DownRightVectorBar; | U+02957 | ⥗ |
DownTee; | U+022A4 | ⊤ |
DownTeeArrow; | U+021A7 | ↧ |
drbkarow; | U+02910 | ⤐ |
drcorn; | U+0231F | ⌟ |
drcrop; | U+0230C | ⌌ |
Dscr; | U+1D49F | 𝒟 |
dscr; | U+1D4B9 | 𝒹 |
DScy; | U+00405 | Ѕ |
dscy; | U+00455 | ѕ |
dsol; | U+029F6 | ⧶ |
Dstrok; | U+00110 | Đ |
dstrok; | U+00111 | đ |
dtdot; | U+022F1 | ⋱ |
dtri; | U+025BF | ▿ |
dtrif; | U+025BE | ▾ |
duarr; | U+021F5 | ⇵ |
duhar; | U+0296F | ⥯ |
dwangle; | U+029A6 | ⦦ |
DZcy; | U+0040F | Џ |
dzcy; | U+0045F | џ |
dzigrarr; | U+027FF | ⟿ |
Eacute; | U+000C9 | É |
eacute; | U+000E9 | é |
easter; | U+02A6E | ⩮ |
Ecaron; | U+0011A | Ě |
ecaron; | U+0011B | ě |
ecir; | U+02256 | ≖ |
Ecirc; | U+000CA | Ê |
ecirc; | U+000EA | ê |
ecolon; | U+02255 | ≕ |
Ecy; | U+0042D | Э |
ecy; | U+0044D | э |
eDDot; | U+02A77 | ⩷ |
Edot; | U+00116 | Ė |
eDot; | U+02251 | ≑ |
edot; | U+00117 | ė |
ee; | U+02147 | ⅇ |
efDot; | U+02252 | ≒ |
Efr; | U+1D508 | 𝔈 |
efr; | U+1D522 | 𝔢 |
eg; | U+02A9A | ⪚ |
Egrave; | U+000C8 | È |
egrave; | U+000E8 | è |
egs; | U+02A96 | ⪖ |
egsdot; | U+02A98 | ⪘ |
el; | U+02A99 | ⪙ |
Element; | U+02208 | ∈ |
elinters; | U+023E7 | ⏧ |
ell; | U+02113 | ℓ |
els; | U+02A95 | ⪕ |
elsdot; | U+02A97 | ⪗ |
Emacr; | U+00112 | Ē |
emacr; | U+00113 | ē |
empty; | U+02205 | ∅ |
emptyset; | U+02205 | ∅ |
EmptySmallSquare; | U+025FB | ◻ |
emptyv; | U+02205 | ∅ |
EmptyVerySmallSquare; | U+025AB | ▫ |
emsp; | U+02003 | |
emsp13; | U+02004 | |
emsp14; | U+02005 | |
ENG; | U+0014A | Ŋ |
eng; | U+0014B | ŋ |
ensp; | U+02002 | |
Eogon; | U+00118 | Ę |
eogon; | U+00119 | ę |
Eopf; | U+1D53C | 𝔼 |
eopf; | U+1D556 | 𝕖 |
epar; | U+022D5 | ⋕ |
eparsl; | U+029E3 | ⧣ |
eplus; | U+02A71 | ⩱ |
epsi; | U+003B5 | ε |
Epsilon; | U+00395 | Ε |
epsilon; | U+003B5 | ε |
epsiv; | U+003F5 | ϵ |
eqcirc; | U+02256 | ≖ |
eqcolon; | U+02255 | ≕ |
eqsim; | U+02242 | ≂ |
eqslantgtr; | U+02A96 | ⪖ |
eqslantless; | U+02A95 | ⪕ |
Equal; | U+02A75 | ⩵ |
equals; | U+0003D | = |
EqualTilde; | U+02242 | ≂ |
equest; | U+0225F | ≟ |
Equilibrium; | U+021CC | ⇌ |
equiv; | U+02261 | ≡ |
equivDD; | U+02A78 | ⩸ |
eqvparsl; | U+029E5 | ⧥ |
erarr; | U+02971 | ⥱ |
erDot; | U+02253 | ≓ |
Escr; | U+02130 | ℰ |
escr; | U+0212F | ℯ |
esdot; | U+02250 | ≐ |
Esim; | U+02A73 | ⩳ |
esim; | U+02242 | ≂ |
Eta; | U+00397 | Η |
eta; | U+003B7 | η |
ETH; | U+000D0 | Ð |
eth; | U+000F0 | ð |
Euml; | U+000CB | Ë |
euml; | U+000EB | ë |
euro; | U+020AC | € |
excl; | U+00021 | ! |
exist; | U+02203 | ∃ |
Exists; | U+02203 | ∃ |
expectation; | U+02130 | ℰ |
ExponentialE; | U+02147 | ⅇ |
exponentiale; | U+02147 | ⅇ |
fallingdotseq; | U+02252 | ≒ |
Fcy; | U+00424 | Ф |
fcy; | U+00444 | ф |
female; | U+02640 | ♀ |
ffilig; | U+0FB03 | ffi |
fflig; | U+0FB00 | ff |
ffllig; | U+0FB04 | ffl |
Ffr; | U+1D509 | 𝔉 |
ffr; | U+1D523 | 𝔣 |
filig; | U+0FB01 | fi |
FilledSmallSquare; | U+025FC | ◼ |
FilledVerySmallSquare; | U+025AA | ▪ |
fjlig; | U+00066 U+0006A | fj |
flat; | U+0266D | ♭ |
fllig; | U+0FB02 | fl |
fltns; | U+025B1 | ▱ |
fnof; | U+00192 | ƒ |
Fopf; | U+1D53D | 𝔽 |
fopf; | U+1D557 | 𝕗 |
ForAll; | U+02200 | ∀ |
forall; | U+02200 | ∀ |
fork; | U+022D4 | ⋔ |
forkv; | U+02AD9 | ⫙ |
Fouriertrf; | U+02131 | ℱ |
fpartint; | U+02A0D | ⨍ |
frac12; | U+000BD | ½ |
frac13; | U+02153 | ⅓ |
frac14; | U+000BC | ¼ |
frac15; | U+02155 | ⅕ |
frac16; | U+02159 | ⅙ |
frac18; | U+0215B | ⅛ |
frac23; | U+02154 | ⅔ |
frac25; | U+02156 | ⅖ |
frac34; | U+000BE | ¾ |
frac35; | U+02157 | ⅗ |
frac38; | U+0215C | ⅜ |
frac45; | U+02158 | ⅘ |
frac56; | U+0215A | ⅚ |
frac58; | U+0215D | ⅝ |
frac78; | U+0215E | ⅞ |
frasl; | U+02044 | ⁄ |
frown; | U+02322 | ⌢ |
Fscr; | U+02131 | ℱ |
fscr; | U+1D4BB | 𝒻 |
gacute; | U+001F5 | ǵ |
Gamma; | U+00393 | Γ |
gamma; | U+003B3 | γ |
Gammad; | U+003DC | Ϝ |
gammad; | U+003DD | ϝ |
gap; | U+02A86 | ⪆ |
Gbreve; | U+0011E | Ğ |
gbreve; | U+0011F | ğ |
Gcedil; | U+00122 | Ģ |
Gcirc; | U+0011C | Ĝ |
gcirc; | U+0011D | ĝ |
Gcy; | U+00413 | Г |
gcy; | U+00433 | г |
Gdot; | U+00120 | Ġ |
gdot; | U+00121 | ġ |
gE; | U+02267 | ≧ |
ge; | U+02265 | ≥ |
gEl; | U+02A8C | ⪌ |
gel; | U+022DB | ⋛ |
geq; | U+02265 | ≥ |
geqq; | U+02267 | ≧ |
geqslant; | U+02A7E | ⩾ |
ges; | U+02A7E | ⩾ |
gescc; | U+02AA9 | ⪩ |
gesdot; | U+02A80 | ⪀ |
gesdoto; | U+02A82 | ⪂ |
gesdotol; | U+02A84 | ⪄ |
gesl; | U+022DB U+0FE00 | ⋛︀ |
gesles; | U+02A94 | ⪔ |
Gfr; | U+1D50A | 𝔊 |
gfr; | U+1D524 | 𝔤 |
Gg; | U+022D9 | ⋙ |
gg; | U+0226B | ≫ |
ggg; | U+022D9 | ⋙ |
gimel; | U+02137 | ℷ |
GJcy; | U+00403 | Ѓ |
gjcy; | U+00453 | ѓ |
gl; | U+02277 | ≷ |
gla; | U+02AA5 | ⪥ |
glE; | U+02A92 | ⪒ |
glj; | U+02AA4 | ⪤ |
gnap; | U+02A8A | ⪊ |
gnapprox; | U+02A8A | ⪊ |
gnE; | U+02269 | ≩ |
gne; | U+02A88 | ⪈ |
gneq; | U+02A88 | ⪈ |
gneqq; | U+02269 | ≩ |
gnsim; | U+022E7 | ⋧ |
Gopf; | U+1D53E | 𝔾 |
gopf; | U+1D558 | 𝕘 |
grave; | U+00060 | ` |
GreaterEqual; | U+02265 | ≥ |
GreaterEqualLess; | U+022DB | ⋛ |
GreaterFullEqual; | U+02267 | ≧ |
GreaterGreater; | U+02AA2 | ⪢ |
GreaterLess; | U+02277 | ≷ |
GreaterSlantEqual; | U+02A7E | ⩾ |
GreaterTilde; | U+02273 | ≳ |
Gscr; | U+1D4A2 | 𝒢 |
gscr; | U+0210A | ℊ |
gsim; | U+02273 | ≳ |
gsime; | U+02A8E | ⪎ |
gsiml; | U+02A90 | ⪐ |
GT; | U+0003E | > |
Gt; | U+0226B | ≫ |
gt; | U+0003E | > |
gtcc; | U+02AA7 | ⪧ |
gtcir; | U+02A7A | ⩺ |
gtdot; | U+022D7 | ⋗ |
gtlPar; | U+02995 | ⦕ |
gtquest; | U+02A7C | ⩼ |
gtrapprox; | U+02A86 | ⪆ |
gtrarr; | U+02978 | ⥸ |
gtrdot; | U+022D7 | ⋗ |
gtreqless; | U+022DB | ⋛ |
gtreqqless; | U+02A8C | ⪌ |
gtrless; | U+02277 | ≷ |
gtrsim; | U+02273 | ≳ |
gvertneqq; | U+02269 U+0FE00 | ≩︀ |
gvnE; | U+02269 U+0FE00 | ≩︀ |
Hacek; | U+002C7 | ˇ |
hairsp; | U+0200A | |
half; | U+000BD | ½ |
hamilt; | U+0210B | ℋ |
HARDcy; | U+0042A | Ъ |
hardcy; | U+0044A | ъ |
hArr; | U+021D4 | ⇔ |
harr; | U+02194 | ↔ |
harrcir; | U+02948 | ⥈ |
harrw; | U+021AD | ↭ |
Hat; | U+0005E | ^ |
hbar; | U+0210F | ℏ |
Hcirc; | U+00124 | Ĥ |
hcirc; | U+00125 | ĥ |
hearts; | U+02665 | ♥ |
heartsuit; | U+02665 | ♥ |
hellip; | U+02026 | … |
hercon; | U+022B9 | ⊹ |
Hfr; | U+0210C | ℌ |
hfr; | U+1D525 | 𝔥 |
HilbertSpace; | U+0210B | ℋ |
hksearow; | U+02925 | ⤥ |
hkswarow; | U+02926 | ⤦ |
hoarr; | U+021FF | ⇿ |
homtht; | U+0223B | ∻ |
hookleftarrow; | U+021A9 | ↩ |
hookrightarrow; | U+021AA | ↪ |
Hopf; | U+0210D | ℍ |
hopf; | U+1D559 | 𝕙 |
horbar; | U+02015 | ― |
HorizontalLine; | U+02500 | ─ |
Hscr; | U+0210B | ℋ |
hscr; | U+1D4BD | 𝒽 |
hslash; | U+0210F | ℏ |
Hstrok; | U+00126 | Ħ |
hstrok; | U+00127 | ħ |
HumpDownHump; | U+0224E | ≎ |
HumpEqual; | U+0224F | ≏ |
hybull; | U+02043 | ⁃ |
hyphen; | U+02010 | ‐ |
Iacute; | U+000CD | Í |
iacute; | U+000ED | í |
ic; | U+02063 | |
Icirc; | U+000CE | Î |
icirc; | U+000EE | î |
Icy; | U+00418 | И |
icy; | U+00438 | и |
Idot; | U+00130 | İ |
IEcy; | U+00415 | Е |
iecy; | U+00435 | е |
iexcl; | U+000A1 | ¡ |
iff; | U+021D4 | ⇔ |
Ifr; | U+02111 | ℑ |
ifr; | U+1D526 | 𝔦 |
Igrave; | U+000CC | Ì |
igrave; | U+000EC | ì |
ii; | U+02148 | ⅈ |
iiiint; | U+02A0C | ⨌ |
iiint; | U+0222D | ∭ |
iinfin; | U+029DC | ⧜ |
iiota; | U+02129 | ℩ |
IJlig; | U+00132 | IJ |
ijlig; | U+00133 | ij |
Im; | U+02111 | ℑ |
Imacr; | U+0012A | Ī |
imacr; | U+0012B | ī |
image; | U+02111 | ℑ |
ImaginaryI; | U+02148 | ⅈ |
imagline; | U+02110 | ℐ |
imagpart; | U+02111 | ℑ |
imath; | U+00131 | ı |
imof; | U+022B7 | ⊷ |
imped; | U+001B5 | Ƶ |
Implies; | U+021D2 | ⇒ |
in; | U+02208 | ∈ |
incare; | U+02105 | ℅ |
infin; | U+0221E | ∞ |
infintie; | U+029DD | ⧝ |
inodot; | U+00131 | ı |
Int; | U+0222C | ∬ |
int; | U+0222B | ∫ |
intcal; | U+022BA | ⊺ |
integers; | U+02124 | ℤ |
Integral; | U+0222B | ∫ |
intercal; | U+022BA | ⊺ |
Intersection; | U+022C2 | ⋂ |
intlarhk; | U+02A17 | ⨗ |
intprod; | U+02A3C | ⨼ |
InvisibleComma; | U+02063 | |
InvisibleTimes; | U+02062 | |
IOcy; | U+00401 | Ё |
iocy; | U+00451 | ё |
Iogon; | U+0012E | Į |
iogon; | U+0012F | į |
Iopf; | U+1D540 | 𝕀 |
iopf; | U+1D55A | 𝕚 |
Iota; | U+00399 | Ι |
iota; | U+003B9 | ι |
iprod; | U+02A3C | ⨼ |
iquest; | U+000BF | ¿ |
Iscr; | U+02110 | ℐ |
iscr; | U+1D4BE | 𝒾 |
isin; | U+02208 | ∈ |
isindot; | U+022F5 | ⋵ |
isinE; | U+022F9 | ⋹ |
isins; | U+022F4 | ⋴ |
isinsv; | U+022F3 | ⋳ |
isinv; | U+02208 | ∈ |
it; | U+02062 | |
Itilde; | U+00128 | Ĩ |
itilde; | U+00129 | ĩ |
Iukcy; | U+00406 | І |
iukcy; | U+00456 | і |
Iuml; | U+000CF | Ï |
iuml; | U+000EF | ï |
Jcirc; | U+00134 | Ĵ |
jcirc; | U+00135 | ĵ |
Jcy; | U+00419 | Й |
jcy; | U+00439 | й |
Jfr; | U+1D50D | 𝔍 |
jfr; | U+1D527 | 𝔧 |
jmath; | U+00237 | ȷ |
Jopf; | U+1D541 | 𝕁 |
jopf; | U+1D55B | 𝕛 |
Jscr; | U+1D4A5 | 𝒥 |
jscr; | U+1D4BF | 𝒿 |
Jsercy; | U+00408 | Ј |
jsercy; | U+00458 | ј |
Jukcy; | U+00404 | Є |
jukcy; | U+00454 | є |
Kappa; | U+0039A | Κ |
kappa; | U+003BA | κ |
kappav; | U+003F0 | ϰ |
Kcedil; | U+00136 | Ķ |
kcedil; | U+00137 | ķ |
Kcy; | U+0041A | К |
kcy; | U+0043A | к |
Kfr; | U+1D50E | 𝔎 |
kfr; | U+1D528 | 𝔨 |
kgreen; | U+00138 | ĸ |
KHcy; | U+00425 | Х |
khcy; | U+00445 | х |
KJcy; | U+0040C | Ќ |
kjcy; | U+0045C | ќ |
Kopf; | U+1D542 | 𝕂 |
kopf; | U+1D55C | 𝕜 |
Kscr; | U+1D4A6 | 𝒦 |
kscr; | U+1D4C0 | 𝓀 |
lAarr; | U+021DA | ⇚ |
Lacute; | U+00139 | Ĺ |
lacute; | U+0013A | ĺ |
laemptyv; | U+029B4 | ⦴ |
lagran; | U+02112 | ℒ |
Lambda; | U+0039B | Λ |
lambda; | U+003BB | λ |
Lang; | U+027EA | ⟪ |
lang; | U+027E8 | ⟨ |
langd; | U+02991 | ⦑ |
langle; | U+027E8 | ⟨ |
lap; | U+02A85 | ⪅ |
Laplacetrf; | U+02112 | ℒ |
laquo; | U+000AB | « |
Larr; | U+0219E | ↞ |
lArr; | U+021D0 | ⇐ |
larr; | U+02190 | ← |
larrb; | U+021E4 | ⇤ |
larrbfs; | U+0291F | ⤟ |
larrfs; | U+0291D | ⤝ |
larrhk; | U+021A9 | ↩ |
larrlp; | U+021AB | ↫ |
larrpl; | U+02939 | ⤹ |
larrsim; | U+02973 | ⥳ |
larrtl; | U+021A2 | ↢ |
lat; | U+02AAB | ⪫ |
lAtail; | U+0291B | ⤛ |
latail; | U+02919 | ⤙ |
late; | U+02AAD | ⪭ |
lates; | U+02AAD U+0FE00 | ⪭︀ |
lBarr; | U+0290E | ⤎ |
lbarr; | U+0290C | ⤌ |
lbbrk; | U+02772 | ❲ |
lbrace; | U+0007B | { |
lbrack; | U+0005B | [ |
lbrke; | U+0298B | ⦋ |
lbrksld; | U+0298F | ⦏ |
lbrkslu; | U+0298D | ⦍ |
Lcaron; | U+0013D | Ľ |
lcaron; | U+0013E | ľ |
Lcedil; | U+0013B | Ļ |
lcedil; | U+0013C | ļ |
lceil; | U+02308 | ⌈ |
lcub; | U+0007B | { |
Lcy; | U+0041B | Л |
lcy; | U+0043B | л |
ldca; | U+02936 | ⤶ |
ldquo; | U+0201C | “ |
ldquor; | U+0201E | „ |
ldrdhar; | U+02967 | ⥧ |
ldrushar; | U+0294B | ⥋ |
ldsh; | U+021B2 | ↲ |
lE; | U+02266 | ≦ |
le; | U+02264 | ≤ |
LeftAngleBracket; | U+027E8 | ⟨ |
LeftArrow; | U+02190 | ← |
Leftarrow; | U+021D0 | ⇐ |
leftarrow; | U+02190 | ← |
LeftArrowBar; | U+021E4 | ⇤ |
LeftArrowRightArrow; | U+021C6 | ⇆ |
leftarrowtail; | U+021A2 | ↢ |
LeftCeiling; | U+02308 | ⌈ |
LeftDoubleBracket; | U+027E6 | ⟦ |
LeftDownTeeVector; | U+02961 | ⥡ |
LeftDownVector; | U+021C3 | ⇃ |
LeftDownVectorBar; | U+02959 | ⥙ |
LeftFloor; | U+0230A | ⌊ |
leftharpoondown; | U+021BD | ↽ |
leftharpoonup; | U+021BC | ↼ |
leftleftarrows; | U+021C7 | ⇇ |
LeftRightArrow; | U+02194 | ↔ |
Leftrightarrow; | U+021D4 | ⇔ |
leftrightarrow; | U+02194 | ↔ |
leftrightarrows; | U+021C6 | ⇆ |
leftrightharpoons; | U+021CB | ⇋ |
leftrightsquigarrow; | U+021AD | ↭ |
LeftRightVector; | U+0294E | ⥎ |
LeftTee; | U+022A3 | ⊣ |
LeftTeeArrow; | U+021A4 | ↤ |
LeftTeeVector; | U+0295A | ⥚ |
leftthreetimes; | U+022CB | ⋋ |
LeftTriangle; | U+022B2 | ⊲ |
LeftTriangleBar; | U+029CF | ⧏ |
LeftTriangleEqual; | U+022B4 | ⊴ |
LeftUpDownVector; | U+02951 | ⥑ |
LeftUpTeeVector; | U+02960 | ⥠ |
LeftUpVector; | U+021BF | ↿ |
LeftUpVectorBar; | U+02958 | ⥘ |
LeftVector; | U+021BC | ↼ |
LeftVectorBar; | U+02952 | ⥒ |
lEg; | U+02A8B | ⪋ |
leg; | U+022DA | ⋚ |
leq; | U+02264 | ≤ |
leqq; | U+02266 | ≦ |
leqslant; | U+02A7D | ⩽ |
les; | U+02A7D | ⩽ |
lescc; | U+02AA8 | ⪨ |
lesdot; | U+02A7F | ⩿ |
lesdoto; | U+02A81 | ⪁ |
lesdotor; | U+02A83 | ⪃ |
lesg; | U+022DA U+0FE00 | ⋚︀ |
lesges; | U+02A93 | ⪓ |
lessapprox; | U+02A85 | ⪅ |
lessdot; | U+022D6 | ⋖ |
lesseqgtr; | U+022DA | ⋚ |
lesseqqgtr; | U+02A8B | ⪋ |
LessEqualGreater; | U+022DA | ⋚ |
LessFullEqual; | U+02266 | ≦ |
LessGreater; | U+02276 | ≶ |
lessgtr; | U+02276 | ≶ |
LessLess; | U+02AA1 | ⪡ |
lesssim; | U+02272 | ≲ |
LessSlantEqual; | U+02A7D | ⩽ |
LessTilde; | U+02272 | ≲ |
lfisht; | U+0297C | ⥼ |
lfloor; | U+0230A | ⌊ |
Lfr; | U+1D50F | 𝔏 |
lfr; | U+1D529 | 𝔩 |
lg; | U+02276 | ≶ |
lgE; | U+02A91 | ⪑ |
lHar; | U+02962 | ⥢ |
lhard; | U+021BD | ↽ |
lharu; | U+021BC | ↼ |
lharul; | U+0296A | ⥪ |
lhblk; | U+02584 | ▄ |
LJcy; | U+00409 | Љ |
ljcy; | U+00459 | љ |
Ll; | U+022D8 | ⋘ |
ll; | U+0226A | ≪ |
llarr; | U+021C7 | ⇇ |
llcorner; | U+0231E | ⌞ |
Lleftarrow; | U+021DA | ⇚ |
llhard; | U+0296B | ⥫ |
lltri; | U+025FA | ◺ |
Lmidot; | U+0013F | Ŀ |
lmidot; | U+00140 | ŀ |
lmoust; | U+023B0 | ⎰ |
lmoustache; | U+023B0 | ⎰ |
lnap; | U+02A89 | ⪉ |
lnapprox; | U+02A89 | ⪉ |
lnE; | U+02268 | ≨ |
lne; | U+02A87 | ⪇ |
lneq; | U+02A87 | ⪇ |
lneqq; | U+02268 | ≨ |
lnsim; | U+022E6 | ⋦ |
loang; | U+027EC | ⟬ |
loarr; | U+021FD | ⇽ |
lobrk; | U+027E6 | ⟦ |
LongLeftArrow; | U+027F5 | ⟵ |
Longleftarrow; | U+027F8 | ⟸ |
longleftarrow; | U+027F5 | ⟵ |
LongLeftRightArrow; | U+027F7 | ⟷ |
Longleftrightarrow; | U+027FA | ⟺ |
longleftrightarrow; | U+027F7 | ⟷ |
longmapsto; | U+027FC | ⟼ |
LongRightArrow; | U+027F6 | ⟶ |
Longrightarrow; | U+027F9 | ⟹ |
longrightarrow; | U+027F6 | ⟶ |
looparrowleft; | U+021AB | ↫ |
looparrowright; | U+021AC | ↬ |
lopar; | U+02985 | ⦅ |
Lopf; | U+1D543 | 𝕃 |
lopf; | U+1D55D | 𝕝 |
loplus; | U+02A2D | ⨭ |
lotimes; | U+02A34 | ⨴ |
lowast; | U+02217 | ∗ |
lowbar; | U+0005F | _ |
LowerLeftArrow; | U+02199 | ↙ |
LowerRightArrow; | U+02198 | ↘ |
loz; | U+025CA | ◊ |
lozenge; | U+025CA | ◊ |
lozf; | U+029EB | ⧫ |
lpar; | U+00028 | ( |
lparlt; | U+02993 | ⦓ |
lrarr; | U+021C6 | ⇆ |
lrcorner; | U+0231F | ⌟ |
lrhar; | U+021CB | ⇋ |
lrhard; | U+0296D | ⥭ |
lrm; | U+0200E | |
lrtri; | U+022BF | ⊿ |
lsaquo; | U+02039 | ‹ |
Lscr; | U+02112 | ℒ |
lscr; | U+1D4C1 | 𝓁 |
Lsh; | U+021B0 | ↰ |
lsh; | U+021B0 | ↰ |
lsim; | U+02272 | ≲ |
lsime; | U+02A8D | ⪍ |
lsimg; | U+02A8F | ⪏ |
lsqb; | U+0005B | [ |
lsquo; | U+02018 | ‘ |
lsquor; | U+0201A | ‚ |
Lstrok; | U+00141 | Ł |
lstrok; | U+00142 | ł |
LT; | U+0003C | < |
Lt; | U+0226A | ≪ |
lt; | U+0003C | < |
ltcc; | U+02AA6 | ⪦ |
ltcir; | U+02A79 | ⩹ |
ltdot; | U+022D6 | ⋖ |
lthree; | U+022CB | ⋋ |
ltimes; | U+022C9 | ⋉ |
ltlarr; | U+02976 | ⥶ |
ltquest; | U+02A7B | ⩻ |
ltri; | U+025C3 | ◃ |
ltrie; | U+022B4 | ⊴ |
ltrif; | U+025C2 | ◂ |
ltrPar; | U+02996 | ⦖ |
lurdshar; | U+0294A | ⥊ |
luruhar; | U+02966 | ⥦ |
lvertneqq; | U+02268 U+0FE00 | ≨︀ |
lvnE; | U+02268 U+0FE00 | ≨︀ |
macr; | U+000AF | ¯ |
male; | U+02642 | ♂ |
malt; | U+02720 | ✠ |
maltese; | U+02720 | ✠ |
Map; | U+02905 | ⤅ |
map; | U+021A6 | ↦ |
mapsto; | U+021A6 | ↦ |
mapstodown; | U+021A7 | ↧ |
mapstoleft; | U+021A4 | ↤ |
mapstoup; | U+021A5 | ↥ |
marker; | U+025AE | ▮ |
mcomma; | U+02A29 | ⨩ |
Mcy; | U+0041C | М |
mcy; | U+0043C | м |
mdash; | U+02014 | — |
mDDot; | U+0223A | ∺ |
measuredangle; | U+02221 | ∡ |
MediumSpace; | U+0205F | |
Mellintrf; | U+02133 | ℳ |
Mfr; | U+1D510 | 𝔐 |
mfr; | U+1D52A | 𝔪 |
mho; | U+02127 | ℧ |
micro; | U+000B5 | µ |
mid; | U+02223 | ∣ |
midast; | U+0002A | * |
midcir; | U+02AF0 | ⫰ |
middot; | U+000B7 | · |
minus; | U+02212 | − |
minusb; | U+0229F | ⊟ |
minusd; | U+02238 | ∸ |
minusdu; | U+02A2A | ⨪ |
MinusPlus; | U+02213 | ∓ |
mlcp; | U+02ADB | ⫛ |
mldr; | U+02026 | … |
mnplus; | U+02213 | ∓ |
models; | U+022A7 | ⊧ |
Mopf; | U+1D544 | 𝕄 |
mopf; | U+1D55E | 𝕞 |
mp; | U+02213 | ∓ |
Mscr; | U+02133 | ℳ |
mscr; | U+1D4C2 | 𝓂 |
mstpos; | U+0223E | ∾ |
Mu; | U+0039C | Μ |
mu; | U+003BC | μ |
multimap; | U+022B8 | ⊸ |
mumap; | U+022B8 | ⊸ |
nabla; | U+02207 | ∇ |
Nacute; | U+00143 | Ń |
nacute; | U+00144 | ń |
nang; | U+02220 U+020D2 | ∠⃒ |
nap; | U+02249 | ≉ |
napE; | U+02A70 U+00338 | ⩰̸ |
napid; | U+0224B U+00338 | ≋̸ |
napos; | U+00149 | ʼn |
napprox; | U+02249 | ≉ |
natur; | U+0266E | ♮ |
natural; | U+0266E | ♮ |
naturals; | U+02115 | ℕ |
nbsp; | U+000A0 | |
nbump; | U+0224E U+00338 | ≎̸ |
nbumpe; | U+0224F U+00338 | ≏̸ |
ncap; | U+02A43 | ⩃ |
Ncaron; | U+00147 | Ň |
ncaron; | U+00148 | ň |
Ncedil; | U+00145 | Ņ |
ncedil; | U+00146 | ņ |
ncong; | U+02247 | ≇ |
ncongdot; | U+02A6D U+00338 | ⩭̸ |
ncup; | U+02A42 | ⩂ |
Ncy; | U+0041D | Н |
ncy; | U+0043D | н |
ndash; | U+02013 | – |
ne; | U+02260 | ≠ |
nearhk; | U+02924 | ⤤ |
neArr; | U+021D7 | ⇗ |
nearr; | U+02197 | ↗ |
nearrow; | U+02197 | ↗ |
nedot; | U+02250 U+00338 | ≐̸ |
NegativeMediumSpace; | U+0200B | |
NegativeThickSpace; | U+0200B | |
NegativeThinSpace; | U+0200B | |
NegativeVeryThinSpace; | U+0200B | |
nequiv; | U+02262 | ≢ |
nesear; | U+02928 | ⤨ |
nesim; | U+02242 U+00338 | ≂̸ |
NestedGreaterGreater; | U+0226B | ≫ |
NestedLessLess; | U+0226A | ≪ |
NewLine; | U+0000A | ␊ |
nexist; | U+02204 | ∄ |
nexists; | U+02204 | ∄ |
Nfr; | U+1D511 | 𝔑 |
nfr; | U+1D52B | 𝔫 |
ngE; | U+02267 U+00338 | ≧̸ |
nge; | U+02271 | ≱ |
ngeq; | U+02271 | ≱ |
ngeqq; | U+02267 U+00338 | ≧̸ |
ngeqslant; | U+02A7E U+00338 | ⩾̸ |
nges; | U+02A7E U+00338 | ⩾̸ |
nGg; | U+022D9 U+00338 | ⋙̸ |
ngsim; | U+02275 | ≵ |
nGt; | U+0226B U+020D2 | ≫⃒ |
ngt; | U+0226F | ≯ |
ngtr; | U+0226F | ≯ |
nGtv; | U+0226B U+00338 | ≫̸ |
nhArr; | U+021CE | ⇎ |
nharr; | U+021AE | ↮ |
nhpar; | U+02AF2 | ⫲ |
ni; | U+0220B | ∋ |
nis; | U+022FC | ⋼ |
nisd; | U+022FA | ⋺ |
niv; | U+0220B | ∋ |
NJcy; | U+0040A | Њ |
njcy; | U+0045A | њ |
nlArr; | U+021CD | ⇍ |
nlarr; | U+0219A | ↚ |
nldr; | U+02025 | ‥ |
nlE; | U+02266 U+00338 | ≦̸ |
nle; | U+02270 | ≰ |
nLeftarrow; | U+021CD | ⇍ |
nleftarrow; | U+0219A | ↚ |
nLeftrightarrow; | U+021CE | ⇎ |
nleftrightarrow; | U+021AE | ↮ |
nleq; | U+02270 | ≰ |
nleqq; | U+02266 U+00338 | ≦̸ |
nleqslant; | U+02A7D U+00338 | ⩽̸ |
nles; | U+02A7D U+00338 | ⩽̸ |
nless; | U+0226E | ≮ |
nLl; | U+022D8 U+00338 | ⋘̸ |
nlsim; | U+02274 | ≴ |
nLt; | U+0226A U+020D2 | ≪⃒ |
nlt; | U+0226E | ≮ |
nltri; | U+022EA | ⋪ |
nltrie; | U+022EC | ⋬ |
nLtv; | U+0226A U+00338 | ≪̸ |
nmid; | U+02224 | ∤ |
NoBreak; | U+02060 | |
NonBreakingSpace; | U+000A0 | |
Nopf; | U+02115 | ℕ |
nopf; | U+1D55F | 𝕟 |
Not; | U+02AEC | ⫬ |
not; | U+000AC | ¬ |
NotCongruent; | U+02262 | ≢ |
NotCupCap; | U+0226D | ≭ |
NotDoubleVerticalBar; | U+02226 | ∦ |
NotElement; | U+02209 | ∉ |
NotEqual; | U+02260 | ≠ |
NotEqualTilde; | U+02242 U+00338 | ≂̸ |
NotExists; | U+02204 | ∄ |
NotGreater; | U+0226F | ≯ |
NotGreaterEqual; | U+02271 | ≱ |
NotGreaterFullEqual; | U+02267 U+00338 | ≧̸ |
NotGreaterGreater; | U+0226B U+00338 | ≫̸ |
NotGreaterLess; | U+02279 | ≹ |
NotGreaterSlantEqual; | U+02A7E U+00338 | ⩾̸ |
NotGreaterTilde; | U+02275 | ≵ |
NotHumpDownHump; | U+0224E U+00338 | ≎̸ |
NotHumpEqual; | U+0224F U+00338 | ≏̸ |
notin; | U+02209 | ∉ |
notindot; | U+022F5 U+00338 | ⋵̸ |
notinE; | U+022F9 U+00338 | ⋹̸ |
notinva; | U+02209 | ∉ |
notinvb; | U+022F7 | ⋷ |
notinvc; | U+022F6 | ⋶ |
NotLeftTriangle; | U+022EA | ⋪ |
NotLeftTriangleBar; | U+029CF U+00338 | ⧏̸ |
NotLeftTriangleEqual; | U+022EC | ⋬ |
NotLess; | U+0226E | ≮ |
NotLessEqual; | U+02270 | ≰ |
NotLessGreater; | U+02278 | ≸ |
NotLessLess; | U+0226A U+00338 | ≪̸ |
NotLessSlantEqual; | U+02A7D U+00338 | ⩽̸ |
NotLessTilde; | U+02274 | ≴ |
NotNestedGreaterGreater; | U+02AA2 U+00338 | ⪢̸ |
NotNestedLessLess; | U+02AA1 U+00338 | ⪡̸ |
notni; | U+0220C | ∌ |
notniva; | U+0220C | ∌ |
notnivb; | U+022FE | ⋾ |
notnivc; | U+022FD | ⋽ |
NotPrecedes; | U+02280 | ⊀ |
NotPrecedesEqual; | U+02AAF U+00338 | ⪯̸ |
NotPrecedesSlantEqual; | U+022E0 | ⋠ |
NotReverseElement; | U+0220C | ∌ |
NotRightTriangle; | U+022EB | ⋫ |
NotRightTriangleBar; | U+029D0 U+00338 | ⧐̸ |
NotRightTriangleEqual; | U+022ED | ⋭ |
NotSquareSubset; | U+0228F U+00338 | ⊏̸ |
NotSquareSubsetEqual; | U+022E2 | ⋢ |
NotSquareSuperset; | U+02290 U+00338 | ⊐̸ |
NotSquareSupersetEqual; | U+022E3 | ⋣ |
NotSubset; | U+02282 U+020D2 | ⊂⃒ |
NotSubsetEqual; | U+02288 | ⊈ |
NotSucceeds; | U+02281 | ⊁ |
NotSucceedsEqual; | U+02AB0 U+00338 | ⪰̸ |
NotSucceedsSlantEqual; | U+022E1 | ⋡ |
NotSucceedsTilde; | U+0227F U+00338 | ≿̸ |
NotSuperset; | U+02283 U+020D2 | ⊃⃒ |
NotSupersetEqual; | U+02289 | ⊉ |
NotTilde; | U+02241 | ≁ |
NotTildeEqual; | U+02244 | ≄ |
NotTildeFullEqual; | U+02247 | ≇ |
NotTildeTilde; | U+02249 | ≉ |
NotVerticalBar; | U+02224 | ∤ |
npar; | U+02226 | ∦ |
nparallel; | U+02226 | ∦ |
nparsl; | U+02AFD U+020E5 | ⫽⃥ |
npart; | U+02202 U+00338 | ∂̸ |
npolint; | U+02A14 | ⨔ |
npr; | U+02280 | ⊀ |
nprcue; | U+022E0 | ⋠ |
npre; | U+02AAF U+00338 | ⪯̸ |
nprec; | U+02280 | ⊀ |
npreceq; | U+02AAF U+00338 | ⪯̸ |
nrArr; | U+021CF | ⇏ |
nrarr; | U+0219B | ↛ |
nrarrc; | U+02933 U+00338 | ⤳̸ |
nrarrw; | U+0219D U+00338 | ↝̸ |
nRightarrow; | U+021CF | ⇏ |
nrightarrow; | U+0219B | ↛ |
nrtri; | U+022EB | ⋫ |
nrtrie; | U+022ED | ⋭ |
nsc; | U+02281 | ⊁ |
nsccue; | U+022E1 | ⋡ |
nsce; | U+02AB0 U+00338 | ⪰̸ |
Nscr; | U+1D4A9 | 𝒩 |
nscr; | U+1D4C3 | 𝓃 |
nshortmid; | U+02224 | ∤ |
nshortparallel; | U+02226 | ∦ |
nsim; | U+02241 | ≁ |
nsime; | U+02244 | ≄ |
nsimeq; | U+02244 | ≄ |
nsmid; | U+02224 | ∤ |
nspar; | U+02226 | ∦ |
nsqsube; | U+022E2 | ⋢ |
nsqsupe; | U+022E3 | ⋣ |
nsub; | U+02284 | ⊄ |
nsubE; | U+02AC5 U+00338 | ⫅̸ |
nsube; | U+02288 | ⊈ |
nsubset; | U+02282 U+020D2 | ⊂⃒ |
nsubseteq; | U+02288 | ⊈ |
nsubseteqq; | U+02AC5 U+00338 | ⫅̸ |
nsucc; | U+02281 | ⊁ |
nsucceq; | U+02AB0 U+00338 | ⪰̸ |
nsup; | U+02285 | ⊅ |
nsupE; | U+02AC6 U+00338 | ⫆̸ |
nsupe; | U+02289 | ⊉ |
nsupset; | U+02283 U+020D2 | ⊃⃒ |
nsupseteq; | U+02289 | ⊉ |
nsupseteqq; | U+02AC6 U+00338 | ⫆̸ |
ntgl; | U+02279 | ≹ |
Ntilde; | U+000D1 | Ñ |
ntilde; | U+000F1 | ñ |
ntlg; | U+02278 | ≸ |
ntriangleleft; | U+022EA | ⋪ |
ntrianglelefteq; | U+022EC | ⋬ |
ntriangleright; | U+022EB | ⋫ |
ntrianglerighteq; | U+022ED | ⋭ |
Nu; | U+0039D | Ν |
nu; | U+003BD | ν |
num; | U+00023 | # |
numero; | U+02116 | № |
numsp; | U+02007 | |
nvap; | U+0224D U+020D2 | ≍⃒ |
nVDash; | U+022AF | ⊯ |
nVdash; | U+022AE | ⊮ |
nvDash; | U+022AD | ⊭ |
nvdash; | U+022AC | ⊬ |
nvge; | U+02265 U+020D2 | ≥⃒ |
nvgt; | U+0003E U+020D2 | >⃒ |
nvHarr; | U+02904 | ⤄ |
nvinfin; | U+029DE | ⧞ |
nvlArr; | U+02902 | ⤂ |
nvle; | U+02264 U+020D2 | ≤⃒ |
nvlt; | U+0003C U+020D2 | <⃒ |
nvltrie; | U+022B4 U+020D2 | ⊴⃒ |
nvrArr; | U+02903 | ⤃ |
nvrtrie; | U+022B5 U+020D2 | ⊵⃒ |
nvsim; | U+0223C U+020D2 | ∼⃒ |
nwarhk; | U+02923 | ⤣ |
nwArr; | U+021D6 | ⇖ |
nwarr; | U+02196 | ↖ |
nwarrow; | U+02196 | ↖ |
nwnear; | U+02927 | ⤧ |
Oacute; | U+000D3 | Ó |
oacute; | U+000F3 | ó |
oast; | U+0229B | ⊛ |
ocir; | U+0229A | ⊚ |
Ocirc; | U+000D4 | Ô |
ocirc; | U+000F4 | ô |
Ocy; | U+0041E | О |
ocy; | U+0043E | о |
odash; | U+0229D | ⊝ |
Odblac; | U+00150 | Ő |
odblac; | U+00151 | ő |
odiv; | U+02A38 | ⨸ |
odot; | U+02299 | ⊙ |
odsold; | U+029BC | ⦼ |
OElig; | U+00152 | Œ |
oelig; | U+00153 | œ |
ofcir; | U+029BF | ⦿ |
Ofr; | U+1D512 | 𝔒 |
ofr; | U+1D52C | 𝔬 |
ogon; | U+002DB | ˛ |
Ograve; | U+000D2 | Ò |
ograve; | U+000F2 | ò |
ogt; | U+029C1 | ⧁ |
ohbar; | U+029B5 | ⦵ |
ohm; | U+003A9 | Ω |
oint; | U+0222E | ∮ |
olarr; | U+021BA | ↺ |
olcir; | U+029BE | ⦾ |
olcross; | U+029BB | ⦻ |
oline; | U+0203E | ‾ |
olt; | U+029C0 | ⧀ |
Omacr; | U+0014C | Ō |
omacr; | U+0014D | ō |
Omega; | U+003A9 | Ω |
omega; | U+003C9 | ω |
Omicron; | U+0039F | Ο |
omicron; | U+003BF | ο |
omid; | U+029B6 | ⦶ |
ominus; | U+02296 | ⊖ |
Oopf; | U+1D546 | 𝕆 |
oopf; | U+1D560 | 𝕠 |
opar; | U+029B7 | ⦷ |
OpenCurlyDoubleQuote; | U+0201C | “ |
OpenCurlyQuote; | U+02018 | ‘ |
operp; | U+029B9 | ⦹ |
oplus; | U+02295 | ⊕ |
Or; | U+02A54 | ⩔ |
or; | U+02228 | ∨ |
orarr; | U+021BB | ↻ |
ord; | U+02A5D | ⩝ |
order; | U+02134 | ℴ |
orderof; | U+02134 | ℴ |
ordf; | U+000AA | ª |
ordm; | U+000BA | º |
origof; | U+022B6 | ⊶ |
oror; | U+02A56 | ⩖ |
orslope; | U+02A57 | ⩗ |
orv; | U+02A5B | ⩛ |
oS; | U+024C8 | Ⓢ |
Oscr; | U+1D4AA | 𝒪 |
oscr; | U+02134 | ℴ |
Oslash; | U+000D8 | Ø |
oslash; | U+000F8 | ø |
osol; | U+02298 | ⊘ |
Otilde; | U+000D5 | Õ |
otilde; | U+000F5 | õ |
Otimes; | U+02A37 | ⨷ |
otimes; | U+02297 | ⊗ |
otimesas; | U+02A36 | ⨶ |
Ouml; | U+000D6 | Ö |
ouml; | U+000F6 | ö |
ovbar; | U+0233D | ⌽ |
OverBar; | U+0203E | ‾ |
OverBrace; | U+023DE | ⏞ |
OverBracket; | U+023B4 | ⎴ |
OverParenthesis; | U+023DC | ⏜ |
par; | U+02225 | ∥ |
para; | U+000B6 | ¶ |
parallel; | U+02225 | ∥ |
parsim; | U+02AF3 | ⫳ |
parsl; | U+02AFD | ⫽ |
part; | U+02202 | ∂ |
PartialD; | U+02202 | ∂ |
Pcy; | U+0041F | П |
pcy; | U+0043F | п |
percnt; | U+00025 | % |
period; | U+0002E | . |
permil; | U+02030 | ‰ |
perp; | U+022A5 | ⊥ |
pertenk; | U+02031 | ‱ |
Pfr; | U+1D513 | 𝔓 |
pfr; | U+1D52D | 𝔭 |
Phi; | U+003A6 | Φ |
phi; | U+003C6 | φ |
phiv; | U+003D5 | ϕ |
phmmat; | U+02133 | ℳ |
phone; | U+0260E | ☎ |
Pi; | U+003A0 | Π |
pi; | U+003C0 | π |
pitchfork; | U+022D4 | ⋔ |
piv; | U+003D6 | ϖ |
planck; | U+0210F | ℏ |
planckh; | U+0210E | ℎ |
plankv; | U+0210F | ℏ |
plus; | U+0002B | + |
plusacir; | U+02A23 | ⨣ |
plusb; | U+0229E | ⊞ |
pluscir; | U+02A22 | ⨢ |
plusdo; | U+02214 | ∔ |
plusdu; | U+02A25 | ⨥ |
pluse; | U+02A72 | ⩲ |
PlusMinus; | U+000B1 | ± |
plusmn; | U+000B1 | ± |
plussim; | U+02A26 | ⨦ |
plustwo; | U+02A27 | ⨧ |
pm; | U+000B1 | ± |
Poincareplane; | U+0210C | ℌ |
pointint; | U+02A15 | ⨕ |
Popf; | U+02119 | ℙ |
popf; | U+1D561 | 𝕡 |
pound; | U+000A3 | £ |
Pr; | U+02ABB | ⪻ |
pr; | U+0227A | ≺ |
prap; | U+02AB7 | ⪷ |
prcue; | U+0227C | ≼ |
prE; | U+02AB3 | ⪳ |
pre; | U+02AAF | ⪯ |
prec; | U+0227A | ≺ |
precapprox; | U+02AB7 | ⪷ |
preccurlyeq; | U+0227C | ≼ |
Precedes; | U+0227A | ≺ |
PrecedesEqual; | U+02AAF | ⪯ |
PrecedesSlantEqual; | U+0227C | ≼ |
PrecedesTilde; | U+0227E | ≾ |
preceq; | U+02AAF | ⪯ |
precnapprox; | U+02AB9 | ⪹ |
precneqq; | U+02AB5 | ⪵ |
precnsim; | U+022E8 | ⋨ |
precsim; | U+0227E | ≾ |
Prime; | U+02033 | ″ |
prime; | U+02032 | ′ |
primes; | U+02119 | ℙ |
prnap; | U+02AB9 | ⪹ |
prnE; | U+02AB5 | ⪵ |
prnsim; | U+022E8 | ⋨ |
prod; | U+0220F | ∏ |
Product; | U+0220F | ∏ |
profalar; | U+0232E | ⌮ |
profline; | U+02312 | ⌒ |
profsurf; | U+02313 | ⌓ |
prop; | U+0221D | ∝ |
Proportion; | U+02237 | ∷ |
Proportional; | U+0221D | ∝ |
propto; | U+0221D | ∝ |
prsim; | U+0227E | ≾ |
prurel; | U+022B0 | ⊰ |
Pscr; | U+1D4AB | 𝒫 |
pscr; | U+1D4C5 | 𝓅 |
Psi; | U+003A8 | Ψ |
psi; | U+003C8 | ψ |
puncsp; | U+02008 | |
Qfr; | U+1D514 | 𝔔 |
qfr; | U+1D52E | 𝔮 |
qint; | U+02A0C | ⨌ |
Qopf; | U+0211A | ℚ |
qopf; | U+1D562 | 𝕢 |
qprime; | U+02057 | ⁗ |
Qscr; | U+1D4AC | 𝒬 |
qscr; | U+1D4C6 | 𝓆 |
quaternions; | U+0210D | ℍ |
quatint; | U+02A16 | ⨖ |
quest; | U+0003F | ? |
questeq; | U+0225F | ≟ |
QUOT; | U+00022 | " |
quot; | U+00022 | " |
rAarr; | U+021DB | ⇛ |
race; | U+0223D U+00331 | ∽̱ |
Racute; | U+00154 | Ŕ |
racute; | U+00155 | ŕ |
radic; | U+0221A | √ |
raemptyv; | U+029B3 | ⦳ |
Rang; | U+027EB | ⟫ |
rang; | U+027E9 | ⟩ |
rangd; | U+02992 | ⦒ |
range; | U+029A5 | ⦥ |
rangle; | U+027E9 | ⟩ |
raquo; | U+000BB | » |
Rarr; | U+021A0 | ↠ |
rArr; | U+021D2 | ⇒ |
rarr; | U+02192 | → |
rarrap; | U+02975 | ⥵ |
rarrb; | U+021E5 | ⇥ |
rarrbfs; | U+02920 | ⤠ |
rarrc; | U+02933 | ⤳ |
rarrfs; | U+0291E | ⤞ |
rarrhk; | U+021AA | ↪ |
rarrlp; | U+021AC | ↬ |
rarrpl; | U+02945 | ⥅ |
rarrsim; | U+02974 | ⥴ |
Rarrtl; | U+02916 | ⤖ |
rarrtl; | U+021A3 | ↣ |
rarrw; | U+0219D | ↝ |
rAtail; | U+0291C | ⤜ |
ratail; | U+0291A | ⤚ |
ratio; | U+02236 | ∶ |
rationals; | U+0211A | ℚ |
RBarr; | U+02910 | ⤐ |
rBarr; | U+0290F | ⤏ |
rbarr; | U+0290D | ⤍ |
rbbrk; | U+02773 | ❳ |
rbrace; | U+0007D | } |
rbrack; | U+0005D | ] |
rbrke; | U+0298C | ⦌ |
rbrksld; | U+0298E | ⦎ |
rbrkslu; | U+02990 | ⦐ |
Rcaron; | U+00158 | Ř |
rcaron; | U+00159 | ř |
Rcedil; | U+00156 | Ŗ |
rcedil; | U+00157 | ŗ |
rceil; | U+02309 | ⌉ |
rcub; | U+0007D | } |
Rcy; | U+00420 | Р |
rcy; | U+00440 | р |
rdca; | U+02937 | ⤷ |
rdldhar; | U+02969 | ⥩ |
rdquo; | U+0201D | ” |
rdquor; | U+0201D | ” |
rdsh; | U+021B3 | ↳ |
Re; | U+0211C | ℜ |
real; | U+0211C | ℜ |
realine; | U+0211B | ℛ |
realpart; | U+0211C | ℜ |
reals; | U+0211D | ℝ |
rect; | U+025AD | ▭ |
REG; | U+000AE | ® |
reg; | U+000AE | ® |
ReverseElement; | U+0220B | ∋ |
ReverseEquilibrium; | U+021CB | ⇋ |
ReverseUpEquilibrium; | U+0296F | ⥯ |
rfisht; | U+0297D | ⥽ |
rfloor; | U+0230B | ⌋ |
Rfr; | U+0211C | ℜ |
rfr; | U+1D52F | 𝔯 |
rHar; | U+02964 | ⥤ |
rhard; | U+021C1 | ⇁ |
rharu; | U+021C0 | ⇀ |
rharul; | U+0296C | ⥬ |
Rho; | U+003A1 | Ρ |
rho; | U+003C1 | ρ |
rhov; | U+003F1 | ϱ |
RightAngleBracket; | U+027E9 | ⟩ |
RightArrow; | U+02192 | → |
Rightarrow; | U+021D2 | ⇒ |
rightarrow; | U+02192 | → |
RightArrowBar; | U+021E5 | ⇥ |
RightArrowLeftArrow; | U+021C4 | ⇄ |
rightarrowtail; | U+021A3 | ↣ |
RightCeiling; | U+02309 | ⌉ |
RightDoubleBracket; | U+027E7 | ⟧ |
RightDownTeeVector; | U+0295D | ⥝ |
RightDownVector; | U+021C2 | ⇂ |
RightDownVectorBar; | U+02955 | ⥕ |
RightFloor; | U+0230B | ⌋ |
rightharpoondown; | U+021C1 | ⇁ |
rightharpoonup; | U+021C0 | ⇀ |
rightleftarrows; | U+021C4 | ⇄ |
rightleftharpoons; | U+021CC | ⇌ |
rightrightarrows; | U+021C9 | ⇉ |
rightsquigarrow; | U+0219D | ↝ |
RightTee; | U+022A2 | ⊢ |
RightTeeArrow; | U+021A6 | ↦ |
RightTeeVector; | U+0295B | ⥛ |
rightthreetimes; | U+022CC | ⋌ |
RightTriangle; | U+022B3 | ⊳ |
RightTriangleBar; | U+029D0 | ⧐ |
RightTriangleEqual; | U+022B5 | ⊵ |
RightUpDownVector; | U+0294F | ⥏ |
RightUpTeeVector; | U+0295C | ⥜ |
RightUpVector; | U+021BE | ↾ |
RightUpVectorBar; | U+02954 | ⥔ |
RightVector; | U+021C0 | ⇀ |
RightVectorBar; | U+02953 | ⥓ |
ring; | U+002DA | ˚ |
risingdotseq; | U+02253 | ≓ |
rlarr; | U+021C4 | ⇄ |
rlhar; | U+021CC | ⇌ |
rlm; | U+0200F | |
rmoust; | U+023B1 | ⎱ |
rmoustache; | U+023B1 | ⎱ |
rnmid; | U+02AEE | ⫮ |
roang; | U+027ED | ⟭ |
roarr; | U+021FE | ⇾ |
robrk; | U+027E7 | ⟧ |
ropar; | U+02986 | ⦆ |
Ropf; | U+0211D | ℝ |
ropf; | U+1D563 | 𝕣 |
roplus; | U+02A2E | ⨮ |
rotimes; | U+02A35 | ⨵ |
RoundImplies; | U+02970 | ⥰ |
rpar; | U+00029 | ) |
rpargt; | U+02994 | ⦔ |
rppolint; | U+02A12 | ⨒ |
rrarr; | U+021C9 | ⇉ |
Rrightarrow; | U+021DB | ⇛ |
rsaquo; | U+0203A | › |
Rscr; | U+0211B | ℛ |
rscr; | U+1D4C7 | 𝓇 |
Rsh; | U+021B1 | ↱ |
rsh; | U+021B1 | ↱ |
rsqb; | U+0005D | ] |
rsquo; | U+02019 | ’ |
rsquor; | U+02019 | ’ |
rthree; | U+022CC | ⋌ |
rtimes; | U+022CA | ⋊ |
rtri; | U+025B9 | ▹ |
rtrie; | U+022B5 | ⊵ |
rtrif; | U+025B8 | ▸ |
rtriltri; | U+029CE | ⧎ |
RuleDelayed; | U+029F4 | ⧴ |
ruluhar; | U+02968 | ⥨ |
rx; | U+0211E | ℞ |
Sacute; | U+0015A | Ś |
sacute; | U+0015B | ś |
sbquo; | U+0201A | ‚ |
Sc; | U+02ABC | ⪼ |
sc; | U+0227B | ≻ |
scap; | U+02AB8 | ⪸ |
Scaron; | U+00160 | Š |
scaron; | U+00161 | š |
sccue; | U+0227D | ≽ |
scE; | U+02AB4 | ⪴ |
sce; | U+02AB0 | ⪰ |
Scedil; | U+0015E | Ş |
scedil; | U+0015F | ş |
Scirc; | U+0015C | Ŝ |
scirc; | U+0015D | ŝ |
scnap; | U+02ABA | ⪺ |
scnE; | U+02AB6 | ⪶ |
scnsim; | U+022E9 | ⋩ |
scpolint; | U+02A13 | ⨓ |
scsim; | U+0227F | ≿ |
Scy; | U+00421 | С |
scy; | U+00441 | с |
sdot; | U+022C5 | ⋅ |
sdotb; | U+022A1 | ⊡ |
sdote; | U+02A66 | ⩦ |
searhk; | U+02925 | ⤥ |
seArr; | U+021D8 | ⇘ |
searr; | U+02198 | ↘ |
searrow; | U+02198 | ↘ |
sect; | U+000A7 | § |
semi; | U+0003B | ; |
seswar; | U+02929 | ⤩ |
setminus; | U+02216 | ∖ |
setmn; | U+02216 | ∖ |
sext; | U+02736 | ✶ |
Sfr; | U+1D516 | 𝔖 |
sfr; | U+1D530 | 𝔰 |
sfrown; | U+02322 | ⌢ |
sharp; | U+0266F | ♯ |
SHCHcy; | U+00429 | Щ |
shchcy; | U+00449 | щ |
SHcy; | U+00428 | Ш |
shcy; | U+00448 | ш |
ShortDownArrow; | U+02193 | ↓ |
ShortLeftArrow; | U+02190 | ← |
shortmid; | U+02223 | ∣ |
shortparallel; | U+02225 | ∥ |
ShortRightArrow; | U+02192 | → |
ShortUpArrow; | U+02191 | ↑ |
shy; | U+000AD | |
Sigma; | U+003A3 | Σ |
sigma; | U+003C3 | σ |
sigmaf; | U+003C2 | ς |
sigmav; | U+003C2 | ς |
sim; | U+0223C | ∼ |
simdot; | U+02A6A | ⩪ |
sime; | U+02243 | ≃ |
simeq; | U+02243 | ≃ |
simg; | U+02A9E | ⪞ |
simgE; | U+02AA0 | ⪠ |
siml; | U+02A9D | ⪝ |
simlE; | U+02A9F | ⪟ |
simne; | U+02246 | ≆ |
simplus; | U+02A24 | ⨤ |
simrarr; | U+02972 | ⥲ |
slarr; | U+02190 | ← |
SmallCircle; | U+02218 | ∘ |
smallsetminus; | U+02216 | ∖ |
smashp; | U+02A33 | ⨳ |
smeparsl; | U+029E4 | ⧤ |
smid; | U+02223 | ∣ |
smile; | U+02323 | ⌣ |
smt; | U+02AAA | ⪪ |
smte; | U+02AAC | ⪬ |
smtes; | U+02AAC U+0FE00 | ⪬︀ |
SOFTcy; | U+0042C | Ь |
softcy; | U+0044C | ь |
sol; | U+0002F | / |
solb; | U+029C4 | ⧄ |
solbar; | U+0233F | ⌿ |
Sopf; | U+1D54A | 𝕊 |
sopf; | U+1D564 | 𝕤 |
spades; | U+02660 | ♠ |
spadesuit; | U+02660 | ♠ |
spar; | U+02225 | ∥ |
sqcap; | U+02293 | ⊓ |
sqcaps; | U+02293 U+0FE00 | ⊓︀ |
sqcup; | U+02294 | ⊔ |
sqcups; | U+02294 U+0FE00 | ⊔︀ |
Sqrt; | U+0221A | √ |
sqsub; | U+0228F | ⊏ |
sqsube; | U+02291 | ⊑ |
sqsubset; | U+0228F | ⊏ |
sqsubseteq; | U+02291 | ⊑ |
sqsup; | U+02290 | ⊐ |
sqsupe; | U+02292 | ⊒ |
sqsupset; | U+02290 | ⊐ |
sqsupseteq; | U+02292 | ⊒ |
squ; | U+025A1 | □ |
Square; | U+025A1 | □ |
square; | U+025A1 | □ |
SquareIntersection; | U+02293 | ⊓ |
SquareSubset; | U+0228F | ⊏ |
SquareSubsetEqual; | U+02291 | ⊑ |
SquareSuperset; | U+02290 | ⊐ |
SquareSupersetEqual; | U+02292 | ⊒ |
SquareUnion; | U+02294 | ⊔ |
squarf; | U+025AA | ▪ |
squf; | U+025AA | ▪ |
srarr; | U+02192 | → |
Sscr; | U+1D4AE | 𝒮 |
sscr; | U+1D4C8 | 𝓈 |
ssetmn; | U+02216 | ∖ |
ssmile; | U+02323 | ⌣ |
sstarf; | U+022C6 | ⋆ |
Star; | U+022C6 | ⋆ |
star; | U+02606 | ☆ |
starf; | U+02605 | ★ |
straightepsilon; | U+003F5 | ϵ |
straightphi; | U+003D5 | ϕ |
strns; | U+000AF | ¯ |
Sub; | U+022D0 | ⋐ |
sub; | U+02282 | ⊂ |
subdot; | U+02ABD | ⪽ |
subE; | U+02AC5 | ⫅ |
sube; | U+02286 | ⊆ |
subedot; | U+02AC3 | ⫃ |
submult; | U+02AC1 | ⫁ |
subnE; | U+02ACB | ⫋ |
subne; | U+0228A | ⊊ |
subplus; | U+02ABF | ⪿ |
subrarr; | U+02979 | ⥹ |
Subset; | U+022D0 | ⋐ |
subset; | U+02282 | ⊂ |
subseteq; | U+02286 | ⊆ |
subseteqq; | U+02AC5 | ⫅ |
SubsetEqual; | U+02286 | ⊆ |
subsetneq; | U+0228A | ⊊ |
subsetneqq; | U+02ACB | ⫋ |
subsim; | U+02AC7 | ⫇ |
subsub; | U+02AD5 | ⫕ |
subsup; | U+02AD3 | ⫓ |
succ; | U+0227B | ≻ |
succapprox; | U+02AB8 | ⪸ |
succcurlyeq; | U+0227D | ≽ |
Succeeds; | U+0227B | ≻ |
SucceedsEqual; | U+02AB0 | ⪰ |
SucceedsSlantEqual; | U+0227D | ≽ |
SucceedsTilde; | U+0227F | ≿ |
succeq; | U+02AB0 | ⪰ |
succnapprox; | U+02ABA | ⪺ |
succneqq; | U+02AB6 | ⪶ |
succnsim; | U+022E9 | ⋩ |
succsim; | U+0227F | ≿ |
SuchThat; | U+0220B | ∋ |
Sum; | U+02211 | ∑ |
sum; | U+02211 | ∑ |
sung; | U+0266A | ♪ |
Sup; | U+022D1 | ⋑ |
sup; | U+02283 | ⊃ |
sup1; | U+000B9 | ¹ |
sup2; | U+000B2 | ² |
sup3; | U+000B3 | ³ |
supdot; | U+02ABE | ⪾ |
supdsub; | U+02AD8 | ⫘ |
supE; | U+02AC6 | ⫆ |
supe; | U+02287 | ⊇ |
supedot; | U+02AC4 | ⫄ |
Superset; | U+02283 | ⊃ |
SupersetEqual; | U+02287 | ⊇ |
suphsol; | U+027C9 | ⟉ |
suphsub; | U+02AD7 | ⫗ |
suplarr; | U+0297B | ⥻ |
supmult; | U+02AC2 | ⫂ |
supnE; | U+02ACC | ⫌ |
supne; | U+0228B | ⊋ |
supplus; | U+02AC0 | ⫀ |
Supset; | U+022D1 | ⋑ |
supset; | U+02283 | ⊃ |
supseteq; | U+02287 | ⊇ |
supseteqq; | U+02AC6 | ⫆ |
supsetneq; | U+0228B | ⊋ |
supsetneqq; | U+02ACC | ⫌ |
supsim; | U+02AC8 | ⫈ |
supsub; | U+02AD4 | ⫔ |
supsup; | U+02AD6 | ⫖ |
swarhk; | U+02926 | ⤦ |
swArr; | U+021D9 | ⇙ |
swarr; | U+02199 | ↙ |
swarrow; | U+02199 | ↙ |
swnwar; | U+0292A | ⤪ |
szlig; | U+000DF | ß |
Tab; | U+00009 | ␉ |
target; | U+02316 | ⌖ |
Tau; | U+003A4 | Τ |
tau; | U+003C4 | τ |
tbrk; | U+023B4 | ⎴ |
Tcaron; | U+00164 | Ť |
tcaron; | U+00165 | ť |
Tcedil; | U+00162 | Ţ |
tcedil; | U+00163 | ţ |
Tcy; | U+00422 | Т |
tcy; | U+00442 | т |
tdot; | U+020DB | ◌⃛ |
telrec; | U+02315 | ⌕ |
Tfr; | U+1D517 | 𝔗 |
tfr; | U+1D531 | 𝔱 |
there4; | U+02234 | ∴ |
Therefore; | U+02234 | ∴ |
therefore; | U+02234 | ∴ |
Theta; | U+00398 | Θ |
theta; | U+003B8 | θ |
thetasym; | U+003D1 | ϑ |
thetav; | U+003D1 | ϑ |
thickapprox; | U+02248 | ≈ |
thicksim; | U+0223C | ∼ |
ThickSpace; | U+0205F U+0200A | |
thinsp; | U+02009 | |
ThinSpace; | U+02009 | |
thkap; | U+02248 | ≈ |
thksim; | U+0223C | ∼ |
THORN; | U+000DE | Þ |
thorn; | U+000FE | þ |
Tilde; | U+0223C | ∼ |
tilde; | U+002DC | ˜ |
TildeEqual; | U+02243 | ≃ |
TildeFullEqual; | U+02245 | ≅ |
TildeTilde; | U+02248 | ≈ |
times; | U+000D7 | × |
timesb; | U+022A0 | ⊠ |
timesbar; | U+02A31 | ⨱ |
timesd; | U+02A30 | ⨰ |
tint; | U+0222D | ∭ |
toea; | U+02928 | ⤨ |
top; | U+022A4 | ⊤ |
topbot; | U+02336 | ⌶ |
topcir; | U+02AF1 | ⫱ |
Topf; | U+1D54B | 𝕋 |
topf; | U+1D565 | 𝕥 |
topfork; | U+02ADA | ⫚ |
tosa; | U+02929 | ⤩ |
tprime; | U+02034 | ‴ |
TRADE; | U+02122 | ™ |
trade; | U+02122 | ™ |
triangle; | U+025B5 | ▵ |
triangledown; | U+025BF | ▿ |
triangleleft; | U+025C3 | ◃ |
trianglelefteq; | U+022B4 | ⊴ |
triangleq; | U+0225C | ≜ |
triangleright; | U+025B9 | ▹ |
trianglerighteq; | U+022B5 | ⊵ |
tridot; | U+025EC | ◬ |
trie; | U+0225C | ≜ |
triminus; | U+02A3A | ⨺ |
TripleDot; | U+020DB | ◌⃛ |
triplus; | U+02A39 | ⨹ |
trisb; | U+029CD | ⧍ |
tritime; | U+02A3B | ⨻ |
trpezium; | U+023E2 | ⏢ |
Tscr; | U+1D4AF | 𝒯 |
tscr; | U+1D4C9 | 𝓉 |
TScy; | U+00426 | Ц |
tscy; | U+00446 | ц |
TSHcy; | U+0040B | Ћ |
tshcy; | U+0045B | ћ |
Tstrok; | U+00166 | Ŧ |
tstrok; | U+00167 | ŧ |
twixt; | U+0226C | ≬ |
twoheadleftarrow; | U+0219E | ↞ |
twoheadrightarrow; | U+021A0 | ↠ |
Uacute; | U+000DA | Ú |
uacute; | U+000FA | ú |
Uarr; | U+0219F | ↟ |
uArr; | U+021D1 | ⇑ |
uarr; | U+02191 | ↑ |
Uarrocir; | U+02949 | ⥉ |
Ubrcy; | U+0040E | Ў |
ubrcy; | U+0045E | ў |
Ubreve; | U+0016C | Ŭ |
ubreve; | U+0016D | ŭ |
Ucirc; | U+000DB | Û |
ucirc; | U+000FB | û |
Ucy; | U+00423 | У |
ucy; | U+00443 | у |
udarr; | U+021C5 | ⇅ |
Udblac; | U+00170 | Ű |
udblac; | U+00171 | ű |
udhar; | U+0296E | ⥮ |
ufisht; | U+0297E | ⥾ |
Ufr; | U+1D518 | 𝔘 |
ufr; | U+1D532 | 𝔲 |
Ugrave; | U+000D9 | Ù |
ugrave; | U+000F9 | ù |
uHar; | U+02963 | ⥣ |
uharl; | U+021BF | ↿ |
uharr; | U+021BE | ↾ |
uhblk; | U+02580 | ▀ |
ulcorn; | U+0231C | ⌜ |
ulcorner; | U+0231C | ⌜ |
ulcrop; | U+0230F | ⌏ |
ultri; | U+025F8 | ◸ |
Umacr; | U+0016A | Ū |
umacr; | U+0016B | ū |
uml; | U+000A8 | ¨ |
UnderBar; | U+0005F | _ |
UnderBrace; | U+023DF | ⏟ |
UnderBracket; | U+023B5 | ⎵ |
UnderParenthesis; | U+023DD | ⏝ |
Union; | U+022C3 | ⋃ |
UnionPlus; | U+0228E | ⊎ |
Uogon; | U+00172 | Ų |
uogon; | U+00173 | ų |
Uopf; | U+1D54C | 𝕌 |
uopf; | U+1D566 | 𝕦 |
UpArrow; | U+02191 | ↑ |
Uparrow; | U+021D1 | ⇑ |
uparrow; | U+02191 | ↑ |
UpArrowBar; | U+02912 | ⤒ |
UpArrowDownArrow; | U+021C5 | ⇅ |
UpDownArrow; | U+02195 | ↕ |
Updownarrow; | U+021D5 | ⇕ |
updownarrow; | U+02195 | ↕ |
UpEquilibrium; | U+0296E | ⥮ |
upharpoonleft; | U+021BF | ↿ |
upharpoonright; | U+021BE | ↾ |
uplus; | U+0228E | ⊎ |
UpperLeftArrow; | U+02196 | ↖ |
UpperRightArrow; | U+02197 | ↗ |
Upsi; | U+003D2 | ϒ |
upsi; | U+003C5 | υ |
upsih; | U+003D2 | ϒ |
Upsilon; | U+003A5 | Υ |
upsilon; | U+003C5 | υ |
UpTee; | U+022A5 | ⊥ |
UpTeeArrow; | U+021A5 | ↥ |
upuparrows; | U+021C8 | ⇈ |
urcorn; | U+0231D | ⌝ |
urcorner; | U+0231D | ⌝ |
urcrop; | U+0230E | ⌎ |
Uring; | U+0016E | Ů |
uring; | U+0016F | ů |
urtri; | U+025F9 | ◹ |
Uscr; | U+1D4B0 | 𝒰 |
uscr; | U+1D4CA | 𝓊 |
utdot; | U+022F0 | ⋰ |
Utilde; | U+00168 | Ũ |
utilde; | U+00169 | ũ |
utri; | U+025B5 | ▵ |
utrif; | U+025B4 | ▴ |
uuarr; | U+021C8 | ⇈ |
Uuml; | U+000DC | Ü |
uuml; | U+000FC | ü |
uwangle; | U+029A7 | ⦧ |
vangrt; | U+0299C | ⦜ |
varepsilon; | U+003F5 | ϵ |
varkappa; | U+003F0 | ϰ |
varnothing; | U+02205 | ∅ |
varphi; | U+003D5 | ϕ |
varpi; | U+003D6 | ϖ |
varpropto; | U+0221D | ∝ |
vArr; | U+021D5 | ⇕ |
varr; | U+02195 | ↕ |
varrho; | U+003F1 | ϱ |
varsigma; | U+003C2 | ς |
varsubsetneq; | U+0228A U+0FE00 | ⊊︀ |
varsubsetneqq; | U+02ACB U+0FE00 | ⫋︀ |
varsupsetneq; | U+0228B U+0FE00 | ⊋︀ |
varsupsetneqq; | U+02ACC U+0FE00 | ⫌︀ |
vartheta; | U+003D1 | ϑ |
vartriangleleft; | U+022B2 | ⊲ |
vartriangleright; | U+022B3 | ⊳ |
Vbar; | U+02AEB | ⫫ |
vBar; | U+02AE8 | ⫨ |
vBarv; | U+02AE9 | ⫩ |
Vcy; | U+00412 | В |
vcy; | U+00432 | в |
VDash; | U+022AB | ⊫ |
Vdash; | U+022A9 | ⊩ |
vDash; | U+022A8 | ⊨ |
vdash; | U+022A2 | ⊢ |
Vdashl; | U+02AE6 | ⫦ |
Vee; | U+022C1 | ⋁ |
vee; | U+02228 | ∨ |
veebar; | U+022BB | ⊻ |
veeeq; | U+0225A | ≚ |
vellip; | U+022EE | ⋮ |
Verbar; | U+02016 | ‖ |
verbar; | U+0007C | | |
Vert; | U+02016 | ‖ |
vert; | U+0007C | | |
VerticalBar; | U+02223 | ∣ |
VerticalLine; | U+0007C | | |
VerticalSeparator; | U+02758 | ❘ |
VerticalTilde; | U+02240 | ≀ |
VeryThinSpace; | U+0200A | |
Vfr; | U+1D519 | 𝔙 |
vfr; | U+1D533 | 𝔳 |
vltri; | U+022B2 | ⊲ |
vnsub; | U+02282 U+020D2 | ⊂⃒ |
vnsup; | U+02283 U+020D2 | ⊃⃒ |
Vopf; | U+1D54D | 𝕍 |
vopf; | U+1D567 | 𝕧 |
vprop; | U+0221D | ∝ |
vrtri; | U+022B3 | ⊳ |
Vscr; | U+1D4B1 | 𝒱 |
vscr; | U+1D4CB | 𝓋 |
vsubnE; | U+02ACB U+0FE00 | ⫋︀ |
vsubne; | U+0228A U+0FE00 | ⊊︀ |
vsupnE; | U+02ACC U+0FE00 | ⫌︀ |
vsupne; | U+0228B U+0FE00 | ⊋︀ |
Vvdash; | U+022AA | ⊪ |
vzigzag; | U+0299A | ⦚ |
Wcirc; | U+00174 | Ŵ |
wcirc; | U+00175 | ŵ |
wedbar; | U+02A5F | ⩟ |
Wedge; | U+022C0 | ⋀ |
wedge; | U+02227 | ∧ |
wedgeq; | U+02259 | ≙ |
weierp; | U+02118 | ℘ |
Wfr; | U+1D51A | 𝔚 |
wfr; | U+1D534 | 𝔴 |
Wopf; | U+1D54E | 𝕎 |
wopf; | U+1D568 | 𝕨 |
wp; | U+02118 | ℘ |
wr; | U+02240 | ≀ |
wreath; | U+02240 | ≀ |
Wscr; | U+1D4B2 | 𝒲 |
wscr; | U+1D4CC | 𝓌 |
xcap; | U+022C2 | ⋂ |
xcirc; | U+025EF | ◯ |
xcup; | U+022C3 | ⋃ |
xdtri; | U+025BD | ▽ |
Xfr; | U+1D51B | 𝔛 |
xfr; | U+1D535 | 𝔵 |
xhArr; | U+027FA | ⟺ |
xharr; | U+027F7 | ⟷ |
Xi; | U+0039E | Ξ |
xi; | U+003BE | ξ |
xlArr; | U+027F8 | ⟸ |
xlarr; | U+027F5 | ⟵ |
xmap; | U+027FC | ⟼ |
xnis; | U+022FB | ⋻ |
xodot; | U+02A00 | ⨀ |
Xopf; | U+1D54F | 𝕏 |
xopf; | U+1D569 | 𝕩 |
xoplus; | U+02A01 | ⨁ |
xotime; | U+02A02 | ⨂ |
xrArr; | U+027F9 | ⟹ |
xrarr; | U+027F6 | ⟶ |
Xscr; | U+1D4B3 | 𝒳 |
xscr; | U+1D4CD | 𝓍 |
xsqcup; | U+02A06 | ⨆ |
xuplus; | U+02A04 | ⨄ |
xutri; | U+025B3 | △ |
xvee; | U+022C1 | ⋁ |
xwedge; | U+022C0 | ⋀ |
Yacute; | U+000DD | Ý |
yacute; | U+000FD | ý |
YAcy; | U+0042F | Я |
yacy; | U+0044F | я |
Ycirc; | U+00176 | Ŷ |
ycirc; | U+00177 | ŷ |
Ycy; | U+0042B | Ы |
ycy; | U+0044B | ы |
yen; | U+000A5 | ¥ |
Yfr; | U+1D51C | 𝔜 |
yfr; | U+1D536 | 𝔶 |
YIcy; | U+00407 | Ї |
yicy; | U+00457 | ї |
Yopf; | U+1D550 | 𝕐 |
yopf; | U+1D56A | 𝕪 |
Yscr; | U+1D4B4 | 𝒴 |
yscr; | U+1D4CE | 𝓎 |
YUcy; | U+0042E | Ю |
yucy; | U+0044E | ю |
Yuml; | U+00178 | Ÿ |
yuml; | U+000FF | ÿ |
Zacute; | U+00179 | Ź |
zacute; | U+0017A | ź |
Zcaron; | U+0017D | Ž |
zcaron; | U+0017E | ž |
Zcy; | U+00417 | З |
zcy; | U+00437 | з |
Zdot; | U+0017B | Ż |
zdot; | U+0017C | ż |
zeetrf; | U+02128 | ℨ |
ZeroWidthSpace; | U+0200B | |
Zeta; | U+00396 | Ζ |
zeta; | U+003B6 | ζ |
Zfr; | U+02128 | ℨ |
zfr; | U+1D537 | 𝔷 |
ZHcy; | U+00416 | Ж |
zhcy; | U+00436 | ж |
zigrarr; | U+021DD | ⇝ |
Zopf; | U+02124 | ℤ |
zopf; | U+1D56B | 𝕫 |
Zscr; | U+1D4B5 | 𝒵 |
zscr; | U+1D4CF | 𝓏 |
zwj; | U+0200D | |
zwnj; | U+0200C | |
The glyphs displayed above are non-normative. Refer to the Unicode specifications for formal definitions of the characters listed above.
This section only describes the rules for XML
resources. Rules for text/html
resources are discussed
in the section above entitled "The HTML syntax".
The syntax for using HTML with XML, whether in XHTML documents or embedded in other XML documents, is defined in the XML and Namespaces in XML specifications. [XML] [XMLNS]
This specification does not define any syntax-level requirements beyond those defined for XML proper.
XML documents may contain a DOCTYPE
if desired, but
this is not required to conform to this specification. This
specification does not define a public or system identifier, nor
provide a format DTD.
According to the XML specification, XML processors
are not guaranteed to process the external DTD subset referenced in
the DOCTYPE. This means, for example, that using entity references
for characters in XHTML documents is unsafe if they are defined in
an external file (except for <
, >
, &
, "
and '
).
Features listed in this section will trigger warnings in conformance checkers.
Authors should not specify a border
attribute on an
img
element. If the attribute is present, its value
must be the string "0
". CSS should be used
instead.
Authors should not specify a language
attribute on a
script
element. If the attribute is present, its value
must be an ASCII case-insensitive match for the string
"JavaScript
" and either the type
attribute must be omitted or
its value must be an ASCII case-insensitive match for
the string "text/javascript
". The attribute
should be entirely omitted instead (with the value "JavaScript
", it has no effect), or replaced with use
of the type
attribute.
Authors should not specify the name
attribute on a
elements. If the attribute is present, its value must not be the
empty string and must neither be equal to the value of any of the
IDs in the element's home
subtree other than the element's own ID, if any, nor be equal to the value of
any of the other name
attributes on
a
elements in the element's home
subtree. If this attribute is present and the element has an
ID, then the attribute's value must
be equal to the element's ID. In
earlier versions of the language, this attribute was intended as a
way to specify possible targets for fragment identifiers in URLs. The id
attribute should be used instead.
Authors should not, but may despite requirements to the contrary
elsewhere in this specification, specify the maxlength
and size
attributes on input
elements whose type
attributes
are in the Number state.
One valid reason for using these attributes regardless is to help
legacy user agents that do not support input
elements
with type="number"
to still render the text
field with a useful width.
In the HTML syntax, specifying a DOCTYPE that is an obsolete permitted DOCTYPE will also trigger a warning.
Elements in the following list are entirely obsolete, and must not be used by authors:
applet
acronym
Use abbr
instead.
bgsound
Use audio
instead.
dir
Use ul
instead.
frame
frameset
noframes
Either use iframe
and CSS instead, or use server-side includes to generate complete pages with the various invariant parts merged in.
isindex
Use an explicit form
and text field combination instead.
listing
nextid
Use GUIDs instead.
noembed
plaintext
Use the "text/plain
" MIME type instead.
rb
Providing the ruby base directly inside the ruby
element is sufficient; the rb
element is unnecessary. Omit it altogether.
strike
Use del
instead if the element is marking an edit, otherwise use s
instead.
xmp
Use pre
and code
instead, and escape "<
" and "&
" characters as "<
" and "&
" respectively.
basefont
big
blink
center
font
marquee
multicol
nobr
spacer
tt
Use appropriate elements and/or CSS instead.
Where the tt
element would have been used for
marking up keyboard input, consider the kbd
element;
for variables, consider the var
element; for computer
code, consider the code
element; and for computer
output, consider the samp
element.
Similarly, if the big
element is being used to
denote a heading, consider using the h1
element; if
it is being used for marking up important passages, consider the
strong
element; and if it is being used for
highlighting text for reference purposes, consider the
mark
element.
See also the text-level semantics usage summary for more suggestions with examples.
The following attributes are obsolete (though the elements are still part of the language), and must not be used by authors:
charset
on a
elementscharset
on link
elementsUse an HTTP Content-Type header on the linked resource instead.
coords
on a
elementsshape
on a
elementsmethods
on a
elementsmethods
on link
elementsUse the HTTP OPTIONS feature instead.
name
on a
elements (except as noted in the previous section)name
on embed
elementsname
on img
elementsname
on option
elementsUse the id
attribute instead.
rev
on a
elementsrev
on link
elementsUse the rel
attribute instead, with an opposite term. (For example, instead of
rev="made"
, use rel="author"
.)
urn
on a
elementsurn
on link
elementsSpecify the preferred persistent identifier using the href
attribute instead.
accept
on form
elementsUse the accept
attribute directly on the input
elements instead.
nohref
on area
elementsOmitting the href
attribute is sufficient; the nohref
attribute is
unnecessary. Omit it altogether.
profile
on head
elementsWhen used for declaring which meta
terms are
used in the document, unnecessary; omit it altogether, and register the names.
When used for triggering specific user agent behaviors: use
a link
element instead.
version
on html
elementsUnnecessary. Omit it altogether.
usemap
on input
elementslongdesc
on iframe
elementslongdesc
on img
elementsUse a regular a
element to link to the
description, or (in the case of images) use an image
map to provide a link from the image to the image's
description.
lowsrc
on img
elementsUse a progressive JPEG image (given in the src
attribute),
instead of using two separate images.
target
on link
elementsUnnecessary. Omit it altogether.
scheme
on meta
elementsUse only one scheme per field, or make the scheme declaration part of the value.
archive
on object
elementsclassid
on object
elementscode
on object
elementscodebase
on object
elementscodetype
on object
elementsUse the data
and type
attributes to invoke plugins. To set parameters with these names
in particular, the param
element can be used.
declare
on object
elementsRepeat the object
element completely each time the resource is to be reused.
standby
on object
elementsOptimize the linked resource so that it loads quickly or, at least, incrementally.
type
on param
elementsvaluetype
on param
elementsUse the name
and value
attributes without declaring
value types.
language
on script
elements (except as noted in the previous section)Use the type
attribute
instead.
event
on script
elementsfor
on script
elementsUse DOM Events mechanisms to register event listeners. [DOMCORE]
datapagesize
on table
elementsUnnecessary. Omit it altogether.
summary
on table
elementsUse one of the techniques for describing
tables given in the table
section
instead.
abbr
on td
and th
elementsUse text that begins in an unambiguous and terse manner, and include any more elaborate text after that. The title
attribute can also be useful in including more detailed text, so that the cell's contents can be made terse.
axis
on td
and th
elementsscope
on td
elementsUse th
elements for heading cells.
datasrc
on a
, applet
, button
, div
, frame
, iframe
, img
, input
, label
, legend
, marquee
, object
, option
, select
, span
, table
, and textarea
elementsdatafld
on a
, applet
, button
, div
, fieldset
, frame
, iframe
, img
, input
, label
, legend
, marquee
, object
, param
, select
, span
, and textarea
elementsdataformatas
on button
, div
, input
, label
, legend
, marquee
, object
, option
, select
, span
, and table
elementsUse script and a mechanism such as XMLHttpRequest
to populate the page dynamically. [XHR]
alink
on body
elementsbgcolor
on body
elementslink
on body
elementsmarginbottom
on body
elementsmarginheight
on body
elementsmarginleft
on body
elementsmarginright
on body
elementsmargintop
on body
elementsmarginwidth
on body
elementstext
on body
elementsvlink
on body
elementsclear
on br
elementsalign
on caption
elementsalign
on col
elementschar
on col
elementscharoff
on col
elementsvalign
on col
elementswidth
on col
elementsalign
on div
elementscompact
on dl
elementsalign
on embed
elementshspace
on embed
elementsvspace
on embed
elementsalign
on hr
elementscolor
on hr
elementsnoshade
on hr
elementssize
on hr
elementswidth
on hr
elementsalign
on h1
—h6
elementsalign
on iframe
elementsallowtransparency
on iframe
elementsframeborder
on iframe
elementshspace
on iframe
elementsmarginheight
on iframe
elementsmarginwidth
on iframe
elementsscrolling
on iframe
elementsvspace
on iframe
elementsalign
on input
elementshspace
on input
elementsvspace
on input
elementsalign
on img
elementsborder
on img
elements (except as noted in the previous section)hspace
on img
elementsvspace
on img
elementsalign
on legend
elementstype
on li
elementscompact
on menu
elementsalign
on object
elementsborder
on object
elementshspace
on object
elementsvspace
on object
elementscompact
on ol
elementsalign
on p
elementswidth
on pre
elementsalign
on table
elementsbgcolor
on table
elementscellpadding
on table
elementscellspacing
on table
elementsframe
on table
elementsrules
on table
elementswidth
on table
elementsalign
on tbody
, thead
, and tfoot
elementschar
on tbody
, thead
, and tfoot
elementscharoff
on tbody
, thead
, and tfoot
elementsvalign
on tbody
, thead
, and tfoot
elementsalign
on td
and th
elementsbgcolor
on td
and th
elementschar
on td
and th
elementscharoff
on td
and th
elementsheight
on td
and th
elementsnowrap
on td
and th
elementsvalign
on td
and th
elementswidth
on td
and th
elementsalign
on tr
elementsbgcolor
on tr
elementschar
on tr
elementscharoff
on tr
elementsvalign
on tr
elementscompact
on ul
elementstype
on ul
elementsbackground
on body
, table
, thead
, tbody
, tfoot
, tr
, td
, and th
elementsUse CSS instead.
The border
attribute on
the table
element can be used to provide basic fallback
styling for the purpose of making tables legible in browsing
environments where CSS support is limited or absent, such as
text-based browsers, WYSIWYG editors, and in situations where CSS
support is disabled or the style sheet is lost. Only the empty
string and the value "1
" may be used as border
values for this purpose.
Other values are considered obsolete. To regulate the thickness of
such borders, authors should instead use CSS.
The align
, alt
, archive
, code
, height
, hspace
, name
, object
, vspace
, and width
IDL attributes
must reflect the respective content attributes of the
same name. For the purposes of reflection, the applet
element's object
content
attribute is defined as containing a URL.
The codeBase
IDL attribute must reflect the codebase
content attribute,
which for the purposes of reflection is defined as containing a
URL.
The behavior
, direction
, height
, hspace
, vspace
, and width
IDL attributes
must reflect the respective content attributes of the
same name.
The bgColor
IDL attribute must reflect the bgcolor
content attribute.
The scrollAmount
IDL attribute must reflect the scrollamount
content
attribute. The default value is 6.
The scrollDelay
IDL
attribute must reflect the scrolldelay
content
attribute. The default value is 85.
The trueSpeed
IDL
attribute must reflect the truespeed
content
attribute.
The cols
and
rows
IDL
attributes of the frameset
element must
reflect the respective content attributes of the same
name.
The name
, scrolling
, and src
IDL attributes of the
frame
element must reflect the respective
content attributes of the same name.
The frameBorder
IDL
attribute of the frame
element must
reflect the element's frameborder
content
attribute.
The longDesc
IDL attribute of the frame
element must
reflect the element's longdesc
content attribute, which
for the purposes of reflection is defined as containing a
URL.
The noResize
IDL attribute of the frame
element must
reflect the element's noresize
content attribute.
The marginHeight
IDL
attribute of the frame
element must
reflect the element's marginheight
content
attribute.
The marginWidth
IDL
attribute of the frame
element must
reflect the element's marginwidth
content
attribute.
The coords
, charset
, name
, rev
, and shape
IDL attributes of the
a
element must reflect the respective
content attributes of the same name.
The noHref
IDL
attribute of the area
element must reflect
the element's nohref
content
attribute.
The color
,
face
, and size
IDL attributes of
the basefont
element must reflect the
respective content attributes of the same name.
The text
IDL
attribute of the body
element must reflect
the element's text
content
attribute.
The link
IDL
attribute of the body
element must reflect
the element's link
content
attribute.
The aLink
IDL
attribute of the body
element must reflect
the element's alink
content
attribute.
The vLink
IDL
attribute of the body
element must reflect
the element's vlink
content
attribute.
The bgColor
IDL
attribute of the body
element must reflect
the element's bgcolor
content
attribute.
The background
IDL
attribute of the body
element must reflect
the element's background
content attribute. (The background
content is not
defined to contain a URL, despite rules regarding its
handling in the rendering section above.)
The clear
IDL
attribute of the br
element must reflect
the content attribute of the same name.
The align
IDL
attribute of the caption
element must
reflect the content attribute of the same name.
The align
and width
IDL attributes of
the col
element must reflect the
respective content attributes of the same name.
The ch
IDL attribute
of the col
element must reflect the
element's char
content
attribute.
The chOff
IDL
attribute of the col
element must reflect
the element's charoff
content
attribute.
The vAlign
IDL
attribute of the col
element must reflect
the element's valign
content
attribute.
The compact
IDL
attribute of the dir
element must reflect
the content attribute of the same name.
The align
IDL
attribute of the div
element must reflect
the content attribute of the same name.
The compact
IDL
attribute of the dl
element must reflect
the content attribute of the same name.
The name
and align
IDL attributes of
the embed
element must reflect the
respective content attributes of the same name.
The color
,
face
, and size
IDL attributes of
the font
element must reflect the
respective content attributes of the same name.
The align
IDL
attribute of the h1
–h6
elements must
reflect the content attribute of the same name.
The align
, color
, size
, and width
IDL attributes of the
hr
element must reflect the respective
content attributes of the same name.
The noShade
IDL
attribute of the hr
element must reflect
the element's noshade
content
attribute.
The version
IDL
attribute of the html
element must reflect
the content attribute of the same name.
The align
and
scrolling
IDL
attributes of the iframe
element must
reflect the respective content attributes of the same
name.
The frameBorder
IDL
attribute of the iframe
element must
reflect the element's frameborder
content
attribute.
The longDesc
IDL attribute of the iframe
element must
reflect the element's longdesc
content attribute,
which for the purposes of reflection is defined as containing a
URL.
The marginHeight
IDL
attribute of the iframe
element must
reflect the element's marginheight
content
attribute.
The marginWidth
IDL
attribute of the iframe
element must
reflect the element's marginwidth
content
attribute.
The name
, align
, border
, hspace
, and vspace
IDL attributes of
the img
element must reflect the
respective content attributes of the same name.
The longDesc
IDL
attribute of the img
element must reflect
the element's longdesc
content attribute, which for the purposes of reflection is defined
as containing a URL.
The align
IDL
attribute of the input
element must reflect
the content attribute of the same name.
The useMap
IDL
attribute of the input
element must
reflect the element's usemap
content attribute.
The align
IDL
attribute of the legend
element must reflect
the content attribute of the same name.
The type
IDL
attribute of the li
element must reflect
the content attribute of the same name.
The charset
,
rev
, and target
IDL attributes of
the link
element must reflect the
respective content attributes of the same name.
The compact
IDL
attribute of the menu
element must reflect
the content attribute of the same name.
The scheme
IDL
attribute of the meta
element must reflect
the content attribute of the same name.
The align
, archive
, border
, code
, declare
, hspace
, standby
, and vspace
IDL attributes
of the object
element must reflect the
respective content attributes of the same name.
The codeBase
IDL attribute of the object
element must
reflect the element's codebase
content attribute,
which for the purposes of reflection is defined as containing a
URL.
The codeType
IDL
attribute of the object
element must reflect
the element's codetype
content
attribute.
The compact
IDL
attribute of the ol
element must reflect
the content attribute of the same name.
The align
IDL
attribute of the p
element must reflect
the content attribute of the same name.
The type
IDL
attribute of the param
element must
reflect the content attribute of the same name.
The valueType
IDL attribute of the param
element must
reflect the element's valuetype
content attribute.
The width
IDL
attribute of the pre
element must reflect
the content attribute of the same name.
The align
, frame
, summary
, rules
, and width
, IDL attributes of
the table
element must reflect the
respective content attributes of the same name.
The bgColor
IDL
attribute of the table
element must reflect
the element's bgcolor
content
attribute.
The cellPadding
IDL
attribute of the table
element must reflect
the element's cellpadding
content
attribute.
The cellSpacing
IDL
attribute of the table
element must reflect
the element's cellspacing
content
attribute.
The align
IDL
attribute of the tbody
, thead
, and
tfoot
elements must reflect the content
attribute of the same name.
The ch
IDL attribute
of the tbody
, thead
, and
tfoot
elements must reflect the elements'
char
content attributes.
The chOff
IDL
attribute of the tbody
, thead
, and
tfoot
elements must reflect the elements'
charoff
content attributes.
The vAlign
IDL
attribute of the tbody
, thead
, and
tfoot
element must reflect the elements'
valign
content
attributes.
The abbr
, align
, axis
, height
, and width
IDL attributes of
the td
and th
elements must
reflect the respective content attributes of the same
name.
The ch
IDL
attribute of the td
and th
elements must
reflect the elements' char
content attributes.
The chOff
IDL
attribute of the td
and th
elements must
reflect the elements' charoff
content attributes.
The noWrap
IDL
attribute of the td
and th
elements must
reflect the elements' nowrap
content attributes.
The vAlign
IDL
attribute of the td
and th
element must
reflect the elements' valign
content attributes.
The bgColor
IDL
attribute of the td
and th
elements must
reflect the elements' bgcolor
content attributes.
The align
IDL
attribute of the tr
element must reflect
the content attribute of the same name.
The ch
IDL attribute of
the tr
element must reflect the element's
char
content attribute.
The chOff
IDL
attribute of the tr
element must reflect
the element's charoff
content
attribute.
The vAlign
IDL
attribute of the tr
element must reflect
the element's valign
content
attribute.
The bgColor
IDL
attribute of the tr
element must reflect
the element's bgcolor
content
attribute.
The compact
and
type
IDL attributes of
the ul
element must reflect the respective
content attributes of the same name.
The attributes of the Document
object listed in the
first column of the following table must reflect the
content attribute on the body element with the name
given in the corresponding cell in the second column on the same
row, if the body element is a body
element
(as opposed to a frameset
element). When there is no
body element or if it is a
frameset
element, the attributes must instead return
the empty string on getting and do nothing on setting.
text/html
This registration is for community review and will be submitted to the IESG for review, approval, and registration with IANA.
charset
The charset
parameter may be provided
to definitively specify the document's character
encoding, overriding any character encoding declarations in the
document. The parameter's value must be the name of the
character encoding used to serialize the file, must be a valid
character encoding name, and must be an ASCII
case-insensitive match for the preferred MIME
name for that encoding. [IANACHARSET]
Entire novels have been written about the security considerations that apply to HTML documents. Many are listed in this document, to which the reader is referred for more details. Some general concerns bear mentioning here, however:
HTML is scripted language, and has a large number of APIs (some of which are described in this document). Script can expose the user to potential risks of information leakage, credential leakage, cross-site scripting attacks, cross-site request forgeries, and a host of other problems. While the designs in this specification are intended to be safe if implemented correctly, a full implementation is a massive undertaking and, as with any software, user agents are likely to have security bugs.
Even without scripting, there are specific features in HTML
which, for historical reasons, are required for broad
compatibility with legacy content but that expose the user to
unfortunate security problems. In particular, the img
element can be used in conjunction with some other features as a
way to effect a port scan from the user's location on the
Internet. This can expose local network topologies that the
attacker would otherwise not be able to determine.
HTML relies on a compartmentalization scheme sometimes known as the same-origin policy. An origin in most cases consists of all the pages served from the same host, on the same port, using the same protocol.
It is critical, therefore, to ensure that any untrusted content that forms part of a site be hosted on a different origin than any sensitive content on that site. Untrusted content can easily spoof any other page on the same origin, read data from that origin, cause scripts in that origin to execute, submit forms to and from that origin even if they are protected from cross-site request forgery attacks by unique tokens, and make use of any third-party resources exposed to or rights granted to that origin.
html
" and "htm
"
are commonly, but certainly not exclusively, used as the
extension for HTML documents.TEXT
Fragment identifiers used with text/html
resources
either refer to the indicated part of the document or
provide state information for in-page scripts.
multipart/x-mixed-replace
This registration is for community review and will be submitted to the IESG for review, approval, and registration with IANA.
boundary
(defined in RFC2046) [RFC2046]
multipart/x-mixed-replace
resource can be of any type, including types with non-trivial
security implications such as text/html
.
multipart/mixed
. [RFC2046]
multipart/x-mixed-replace
resource.Fragment identifiers used with
multipart/x-mixed-replace
resources apply to each body
part as defined by the type used by that body part.
application/xhtml+xml
This registration is for community review and will be submitted to the IESG for review, approval, and registration with IANA.
application/xml
[RFC3023]application/xml
[RFC3023]application/xml
[RFC3023]application/xml
[RFC3023]application/xml
[RFC3023]application/xhtml+xml
type asserts that the resource is an XML document that likely has
a root element from the HTML namespace. Thus, the
relevant specifications are the XML specification, the Namespaces
in XML specification, and this specification. [XML] [XMLNS]
application/xml
[RFC3023]application/xml
[RFC3023]xhtml
" and "xht
"
are sometimes used as extensions for XML resources that have a
root element from the HTML namespace.TEXT
Fragment identifiers used with application/xhtml+xml
resources have the same semantics as with any XML MIME
type. [RFC3023]
application/x-www-form-urlencoded
This registration is for community review and will be submitted to the IESG for review, approval, and registration with IANA.
In isolation, an application/x-www-form-urlencoded
payload poses no security risks. However, as this type is usually
used as part of a form submission, all the risks that apply to
HTML forms need to be considered in the context of this type.
application/x-www-form-urlencoded
payloads are
defined in this specification.
application/x-www-form-urlencoded
payloads.Fragment identifiers have no meaning with the
application/x-www-form-urlencoded
type as this type is
only used for uploaded payloads that do not have URL
identifiers.
text/cache-manifest
This registration is for community review and will be submitted to the IESG for review, approval, and registration with IANA.
Cache manifests themselves pose no immediate risk unless sensitive information is included within the manifest. Implementations, however, are required to follow specific rules when populating a cache based on a cache manifest, to ensure that certain origin-based restrictions are honored. Failure to correctly implement these rules can result in information leakage, cross-site scripting attacks, and the like.
CACHE
MANIFEST
", followed by either a U+0020 SPACE character, a
"tab" (U+0009) character, a "LF" (U+000A) character, or a "CR" (U+000D) character.appcache
"Fragment identifiers have no meaning with
text/cache-manifest
resources.
web+
scheme prefixThis section describes a convention for use with the IANA URI scheme registry. It does not itself register a specific scheme. [RFC4395]
web+
" followed by one or more letters in the range
a
-z
.
web+
" schemes should use UTF-8 encodings were relevant.web+
" schemes. As such, these schemes must not be
used for features intended to be core platform features (e.g.
network transfer protocols like HTTP or FTP). Similarly, such
schemes must not store confidential information in their URLs,
such as usernames, passwords, personal information, or
confidential project names.
An asterisk (*) in a cell indicates that the actual rules are more complicated than indicated in the table above.
† Categories in the "Parents" column refer to parents that
list the given categories in their content model, not to elements
that themselves are in those categories. For example, the
a
element's "Parents" column says "phrasing", so any
element whose content model contains the "phrasing" category could
be a parent of an a
element. Since the "flow" category
includes all the "phrasing" elements, that means the
address
element could be a parent to an a
element.
Attribute | Element(s) | Description | Value |
---|---|---|---|
accept
| input
| Hint for expected file type in file upload controls | Set of comma-separated tokens* consisting of valid MIME types with no parameters or audio/* , video/* , or image/*
|
accept-charset
| form
| Character encodings to use for form submission | Ordered set of unique space-separated tokens, ASCII case-insensitive, consisting of preferred MIME names of ASCII-compatible character encodings* |
accesskey
| HTML elements | Keyboard shortcut to activate or focus element | Ordered set of unique space-separated tokens, case-sensitive, consisting of one Unicode code point in length |
action
| form
| URL to use for form submission | Valid non-empty URL potentially surrounded by spaces |
alt
| area ;
img ;
input
| Replacement text for use when images are not available | Text* |
async
| script
| Execute script asynchronously | Boolean attribute |
autocomplete
| form ;
input
| Prevent the user agent from providing autocompletions for the form control(s) | "on "; "off "
|
autofocus
| button ;
input ;
keygen ;
select ;
textarea
| Automatically focus the form control when the page is loaded | Boolean attribute |
autoplay
| audio ;
video
| Hint that the media resource can be started automatically when the page is loaded | Boolean attribute |
border
| table
| Explicit indication that the table element is not being used for layout purposes
| The empty string, or "1 "
|
challenge
| keygen
| String to package with the generated and signed public key | Text |
charset
| meta
| Character encoding declaration | Preferred MIME name of an encoding* |
charset
| script
| Character encoding of the external script resource | Preferred MIME name of an encoding* |
checked
| command ;
input
| Whether the command or control is checked | Boolean attribute |
cite
| blockquote ;
del ;
ins ;
q
| Link to the source of the quotation or more information about the edit | Valid URL potentially surrounded by spaces |
class
| HTML elements | Classes to which the element belongs | Set of space-separated tokens |
cols
| textarea
| Maximum number of characters per line | Valid non-negative integer greater than zero |
colspan
| td ;
th
| Number of columns that the cell is to span | Valid non-negative integer greater than zero |
command
| command
| Command definition | ID* |
content
| meta
| Value of the element | Text* |
contenteditable
| HTML elements | Whether the element is editable | "true "; "false "
|
contextmenu
| HTML elements | The element's context menu | ID* |
controls
| audio ;
video
| Show user agent controls | Boolean attribute |
coords
| area
| Coordinates for the shape to be created in an image map | Valid list of integers* |
crossorigin
| audio ;
img ;
video
| How the element handles crossorigin requests. | "anonymous "; "use-credentials "
|
data
| object
| Address of the resource | Valid non-empty URL potentially surrounded by spaces |
datetime
| del ;
ins
| Date and (optionally) time of the change | Valid date string with optional time |
datetime
| time
| Machine-readable value | Valid month string, valid date string, valid yearless date string, valid time string, valid local date and time string, valid time-zone offset string, valid global date and time string, valid week string, valid non-negative integer, or valid duration string |
default
| track
| Enable the track if no other text track is more suitable. | Boolean attribute |
defer
| script
| Defer script execution | Boolean attribute |
dir
| HTML elements | The text directionality of the element | "ltr "; "rtl "; "auto "
|
dirname
| input ;
textarea
| Name of form field to use for sending the element's directionality in form submission | Text* |
disabled
| button ;
command ;
fieldset ;
input ;
keygen ;
optgroup ;
option ;
select ;
textarea
| Whether the form control is disabled | Boolean attribute |
draggable
| HTML elements | Whether the element is draggable | "true "; "false "
|
dropzone
| HTML elements | Accepted item types for drag-and-drop | Unordered set of unique space-separated tokens, ASCII case-insensitive, consisting of accepted types and drag feedback* |
enctype
| form
| Form data set encoding type to use for form submission | "application/x-www-form-urlencoded "; "multipart/form-data "; "text/plain "
|
for
| label
| Associate the label with form control | ID* |
for
| output
| Specifies controls from which the output was calculated | Unordered set of unique space-separated tokens, case-sensitive, consisting of IDs* |
form
| button ;
fieldset ;
input ;
keygen ;
label ;
object ;
output ;
select ;
textarea
| Associates the control with a form element
| ID* |
formaction
| button ;
input
| URL to use for form submission | Valid non-empty URL potentially surrounded by spaces |
formenctype
| button ;
input
| Form data set encoding type to use for form submission | "application/x-www-form-urlencoded "; "multipart/form-data "; "text/plain "
|
formmethod
| button ;
input
| HTTP method to use for form submission | "GET "; "POST "
|
formnovalidate
| button ;
input
| Bypass form control validation for form submission | Boolean attribute |
formtarget
| button ;
input
| Browsing context for form submission | Valid browsing context name or keyword |
headers
| td ;
th
| The header cells for this cell | Unordered set of unique space-separated tokens, case-sensitive, consisting of IDs* |
height
| canvas ;
embed ;
iframe ;
img ;
input ;
object ;
video
| Vertical dimension | Valid non-negative integer |
hidden
| Whether the element is relevant | Boolean attribute | |
high
| meter
| Low limit of high range | Valid floating point number* |
href
| a ;
area
| Address of the hyperlink | Valid URL potentially surrounded by spaces |
href
| link
| Address of the hyperlink | Valid non-empty URL potentially surrounded by spaces |
href
| base
| Document base URL | Valid URL potentially surrounded by spaces |
hreflang
| a ;
area ;
link
| Language of the linked resource | Valid BCP 47 language tag |
http-equiv
| meta
| Pragma directive | Text* |
icon
| command
| Icon for the command | Valid non-empty URL potentially surrounded by spaces |
id
| HTML elements | The element's ID | Text* |
ismap
| img
| Whether the image is a server-side image map | Boolean attribute |
keytype
| keygen
| The type of cryptographic key to generate | Text* |
kind
| track
| The type of text track | "subtitles ";
"captions ";
"descriptions ";
"chapters ";
"metadata "
|
label
| command ;
menu ;
optgroup ;
option ;
track
| User-visible label | Text |
lang
| HTML elements | Language of the element | Valid BCP 47 language tag or the empty string |
list
| input
| List of autocomplete options | ID* |
loop
| audio ;
video
| Whether to loop the media resource | Boolean attribute |
low
| meter
| High limit of low range | Valid floating point number* |
manifest
| html
| Application cache manifest | Valid non-empty URL potentially surrounded by spaces |
max
| input
| Maximum value | Varies* |
max
| meter ;
progress
| Upper bound of range | Valid floating point number* |
maxlength
| input ;
textarea
| Maximum length of value | Valid non-negative integer |
media
| a ;
area ;
link ;
source ;
style
| Applicable media | Valid media query |
mediagroup
| audio ;
video
| Groups media elements together with an implicit MediaController
| Text |
method
| form
| HTTP method to use for form submission | "GET "; "POST "
|
min
| input
| Minimum value | Varies* |
min
| meter
| Lower bound of range | Valid floating point number* |
multiple
| input ;
select
| Whether to allow multiple values | Boolean attribute |
muted
| audio ;
video
| Whether to mute the media resource by default | Boolean attribute |
name
| button ;
fieldset ;
input ;
keygen ;
output ;
select ;
textarea
| Name of form control to use for form submission and in the form.elements API
| Text* |
name
| form
| Name of form to use in the document.forms API
| Text* |
name
| iframe ;
object
| Name of nested browsing context | Valid browsing context name or keyword |
name
| map
| Name of image map to reference from the usemap attribute
| Text* |
name
| meta
| Metadata name | Text* |
name
| param
| Name of parameter | Text |
novalidate
| form
| Bypass form control validation for form submission | Boolean attribute |
open
| details
| Whether the details are visible | Boolean attribute |
optimum
| meter
| Optimum value in gauge | Valid floating point number* |
pattern
| input
| Pattern to be matched by the form control's value | Regular expression matching the JavaScript Pattern production |
placeholder
| input ;
textarea
| User-visible label to be placed within the form control | Text* |
poster
| video
| Poster frame to show prior to video playback | Valid non-empty URL potentially surrounded by spaces |
preload
| audio ;
video
| Hints how much buffering the media resource will likely need | "none ";
"metadata ";
"auto "
|
radiogroup
| command
| Name of group of commands to treat as a radio button group | Text |
readonly
| input ;
textarea
| Whether to allow the value to be edited by the user | Boolean attribute |
rel
| a ;
area ;
link
| Relationship between the document containing the hyperlink and the destination resource | Set of space-separated tokens* |
required
| input ;
select ;
textarea
| Whether the control is required for form submission | Boolean attribute |
reversed
| ol
| Number the list backwards | Boolean attribute |
rows
| textarea
| Number of lines to show | Valid non-negative integer greater than zero |
rowspan
| td ;
th
| Number of rows that the cell is to span | Valid non-negative integer |
sandbox
| iframe
| Security rules for nested content | Unordered set of unique space-separated tokens, ASCII case-insensitive, consisting of
"allow-forms ",
"allow-same-origin ",
"allow-scripts and
"allow-top-navigation "
|
spellcheck
| HTML elements | Whether the element is to have its spelling and grammar checked | "true "; "false "
|
scope
| th
| Specifies which cells the header cell applies to | "row ";
"col ";
"rowgroup ";
"colgroup "
|
scoped
| style
| Whether the styles apply to the entire document or just the parent subtree | Boolean attribute |
seamless
| iframe
| Whether to apply the document's styles to the nested content | Boolean attribute |
selected
| option
| Whether the option is selected by default | Boolean attribute |
shape
| area
| The kind of shape to be created in an image map | "circle ";
"default ";
"poly ";
"rect "
|
size
| input ;
select
| Size of the control | Valid non-negative integer greater than zero |
sizes
| link
| Sizes of the icons (for rel ="icon ")
| Unordered set of unique space-separated tokens, ASCII case-insensitive, consisting of sizes* |
span
| col ;
colgroup
| Number of columns spanned by the element | Valid non-negative integer greater than zero |
src
| audio ;
embed ;
iframe ;
img ;
input ;
script ;
source ;
track ;
video
| Address of the resource | Valid non-empty URL potentially surrounded by spaces |
srcdoc
| iframe
| A document to render in the iframe
| The source of an iframe srcdoc document*
|
srclang
| track
| Language of the text track | Valid BCP 47 language tag |
start
| ol
| Ordinal value of the first item | Valid integer |
step
| input
| Granularity to be matched by the form control's value | Valid floating point number greater than zero, or "any "
|
style
| HTML elements | Presentational and formatting instructions | CSS declarations* |
tabindex
| HTML elements | Whether the element is focusable, and the relative order of the element for the purposes of sequential focus navigation | Valid integer |
target
| a ;
area
| Browsing context for hyperlink navigation | Valid browsing context name or keyword |
target
| base
| Default browsing context for hyperlink navigation and form submission | Valid browsing context name or keyword |
target
| form
| Browsing context for form submission | Valid browsing context name or keyword |
title
| HTML elements | Advisory information for the element | Text |
title
| abbr ;
dfn
| Full term or expansion of abbreviation | Text |
title
| command
| Hint describing the command | Text |
title
| link
| Title of the link | Text |
title
| link ;
style
| Alternative style sheet set name | Text |
translate
| HTML elements | Whether the element is to be translated when the page is localized | "yes "; "no "
|
type
| a ;
area ;
link
| Hint for the type of the referenced resource | Valid MIME type |
type
| button
| Type of button | "submit ";
"reset ";
"button "
|
type
| command
| Type of command | "command ";
"checkbox ";
"radio "
|
type
| embed ;
object ;
script ;
source ;
style
| Type of embedded resource | Valid MIME type |
type
| input
| Type of form control | input type keyword
|
type
| menu
| Type of menu | "context "; "toolbar "
|
typemustmatch
| object
| Whether the type attribute and the Content-Type value need to match for the resource to be used
| Boolean attribute |
usemap
| img ;
object
| Name of image map to use | Valid hash-name reference* |
value
| button ;
option
| Value to be used for form submission | Text |
value
| data
| Machine-readable value | Text* |
value
| input
| Value of the form control | Varies* |
value
| li
| Ordinal value of the list item | Valid integer |
value
| meter ;
progress
| Current value of the element | Valid floating point number |
value
| param
| Value of parameter | Text |
width
| canvas ;
embed ;
iframe ;
img ;
input ;
object ;
video
| Horizontal dimension | Valid non-negative integer |
wrap
| textarea
| How the value of the form control is to be wrapped for form submission | "soft ";
"hard "
|
An asterisk (*) in a cell indicates that the actual rules are more complicated than indicated in the table above.
Event | Interface | Description |
---|---|---|
abort
| Event
| Fired at the Window when the download was aborted by the user
|
afterprint
| Event
| Fired at the Window after printing
|
beforeprint
| Event
| Fired at the Window before printing
|
beforeunload
| BeforeUnloadEvent
| Fired at the Window when the page is about to be unloaded, in case the page would like to show a warning prompt
|
blur
| Event
| Fired at nodes losing focus |
change
| Event
| Fired at controls when the user commits a value change |
click
| Event
| Fired at an element before its activation behavior is run |
contextmenu
| Event
| Fired at elements when the user requests their context menu |
DOMContentLoaded
| Event
| Fired at the Document once the parser has finished
|
error
| Event
| Fired at elements when network and script errors occur |
focus
| Event
| Fired at nodes gaining focus |
hashchange
| HashChangeEvent
| Fired at the Window when the fragment identifier part of the document's current address changes
|
input
| Event
| Fired at controls when the user changes the value |
invalid
| Event
| Fired at controls during form validation if they do not satisfy their constraints |
load
| Event
| Fired at the Window when the document has finished loading; fired at an element containing a resource (e.g. img , embed ) when its resource has finished loading
|
message
| MessageEvent
| Fired at an object when the object receives a message |
offline
| Event
| Fired at the Window when the network connections fails
|
online
| Event
| Fired at the Window when the network connections returns
|
pagehide
| PageTransitionEvent
| Fired at the Window when the page's entry in the session history stops being the current entry
|
pageshow
| PageTransitionEvent
| Fired at the Window when the page's entry in the session history becomes the current entry
|
popstate
| PopStateEvent
| Fired at the Window when the user navigates the session history
|
readystatechange
| Event
| Fired at the Document when it finishes parsing and again when all its subresources have finished loading
|
reset
| Event
| Fired at a form element when it is reset
|
show
| Event
| Fired at a menu element when it is shown as a context menu
|
submit
| Event
| Fired at a form element when it is submitted
|
unload
| Event
| Fired at the Window object when the page is going away
|
See also media element events, application cache events, and drag-and-drop events.
AudioTrackList
and VideoTrackList
objects
a
link
element
style
element
a
element
(2)
(3)
(4)
(5)
(6)
dfn
element
(2)
img
element
(2)
(3)
a
and area
elements
(2)
(3)
(4)
(5)
alternate
"
author
"
(2)
bookmark
"
help
"
(2)
(3)
license
"
nofollow
"
noreferrer
"
prefetch
"
search
"
tag
"
next
"
prev
"
track
element
abbr
title
attribute
dfn
element
abbr
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
abbr
td
and th
elements
abbr
align
, axis
, height
, and width
IDL attributes of
the td
and th
elements must
reflect the respective content attributes of the same
name.
abort
about:legacy-compat
about:srcdoc
type=url
)
(2)
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.
input
element
(2)
accept
input
element
(2)
(3)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=datetime
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
(2)
type=submit
)
type=image
)
type=reset
)
type=button
)
accept
form
elements
accept-charset
form
element
(2)
(3)
acceptCharset
form
element
(2)
accesskey
accesskey
attribute
(2)
(3)
(4)
accessKey
...
content attribute.
accesskey
attribute
acronym
action
formaction
content attributes, if specified, must have a value that is a
valid non-empty URL potentially surrounded by
spaces.
form
element
(2)
formaction
attribute, if the
element is a submit
button and has such an attribute, or the value of its
form owner's ...
attribute, if it has one, or else the empty string.
action
target
IDL attribute must
reflect the content attribute of the same name. The
method
and enctype
IDL attributes
must reflect the respective content attributes of the
same name, limited to only known values. The encoding
IDL attribute
must reflect the enctype
content attribute,
limited to only known values. The noValidate
IDL
attribute must reflect the novalidate
content attribute. The
formAction
IDL
attribute must reflect the formaction
content attribute,
except that on getting, when the content attribute is missing or its
value is the empty string, the document's address must
be returned instead. The formEnctype
IDL
attribute must reflect the formenctype
content attribute,
limited to only known values. The formMethod
IDL
attribute must reflect the formmethod
content attribute,
limited to only known values. The formNoValidate
IDL
attribute must reflect the formnovalidate
content
attribute. The formTarget
IDL
attribute must reflect the formtarget
content attribute.
form
element
img
element
iframe
element
object
element
Window
object
(2)
address
article
element
footer
element
address
element
(2)
(3)
(4)
(5)
(6)
(7)
align
col
elements
align
div
elements
align
embed
elements
embed
element
align
hr
elements
align
h1
—h6
elements
align
iframe
elements
align
input
elements
align
img
elements
align
legend
elements
align
object
elements
align
p
elements
align
table
elements
align
tbody
, thead
, and tfoot
elements
align
td
and th
elements
align
tr
elements
align
alt
, archive
, code
, height
, hspace
, name
, object
, vspace
, and width
IDL attributes
must reflect the respective content attributes of the
same name. For the purposes of reflection, the applet
element's object
content
attribute is defined as containing a URL.
align
width
IDL attributes of
the col
element must reflect the
respective content attributes of the same name.
align
div
element must reflect
the content attribute of the same name.
align
name
and ... IDL attributes of
the embed
element must reflect the
respective content attributes of the same name.
align
h1
–h6
elements must
reflect the content attribute of the same name.
align
color
, size
, and width
IDL attributes of the
hr
element must reflect the respective
content attributes of the same name.
align
scrolling
IDL
attributes of the iframe
element must
reflect the respective content attributes of the same
name.
align
name
, ..., border
, hspace
, and vspace
IDL attributes of
the img
element must reflect the
respective content attributes of the same name.
align
input
element must reflect
the content attribute of the same name.
align
legend
element must reflect
the content attribute of the same name.
align
archive
, border
, code
, declare
, hspace
, standby
, and vspace
IDL attributes
of the object
element must reflect the
respective content attributes of the same name.
align
p
element must reflect
the content attribute of the same name.
align
frame
, summary
, rules
, and width
, IDL attributes of
the table
element must reflect the
respective content attributes of the same name.
align
tbody
, thead
, and
tfoot
elements must reflect the content
attribute of the same name.
align
abbr
, ..., axis
, height
, and width
IDL attributes of
the td
and th
elements must
reflect the respective content attributes of the same
name.
align
tr
element must reflect
the content attribute of the same name.
alink
body
elements
aLink
body
element must reflect
the element's ...
content
attribute.
allowtransparency
alt
src
attribute is the
embedded content; the value of the ... attribute provides
equivalent content for those who cannot process images or who have
image loading disabled.
img
element
(2)
(3)
(4)
alt
src
IDL attributes must
reflect the respective content attributes of the same
name.
img
element
(2)
alt
area
element has an href
attribute, then the
area
element represents a hyperlink. In
this case, the ...
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.
area
element
(2)
(3)
(4)
(5)
alt
coords
, href
, target
,
rel
, media
, hreflang
, and type
, each must
reflect the respective content attributes of the same
name.
area
element
(2)
alt
accept
, ..., 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.
input
element
(2)
alt
alt
attribute must be present, and
must contain a non-empty string.
input
element
(2)
(3)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=datetime
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
type=image
)
(2)
(3)
type=reset
)
type=button
)
alt
align
, ..., archive
, code
, height
, hspace
, name
, object
, vspace
, and width
IDL attributes
must reflect the respective content attributes of the
same name. For the purposes of reflection, the applet
element's object
content
attribute is defined as containing a URL.
alternate
alternate
"
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
stylesheet
"
iframe
srcdoc
document
head
element
iframe
element
anonymous
application-name
application/x-www-form-urlencoded
application/x-www-form-urlencoded
application/x-www-form-urlencoded
(2)
(3)
(4)
(5)
application/xhtml+xml
application/xhtml+xml
(2)
(3)
Window
object
archive
object
elements
archive
align
, alt
, ..., code
, height
, hspace
, name
, object
, vspace
, and width
IDL attributes
must reflect the respective content attributes of the
same name. For the purposes of reflection, the applet
element's object
content
attribute is defined as containing a URL.
archive
align
, ..., border
, code
, declare
, hspace
, standby
, and vspace
IDL attributes
of the object
element must reflect the
respective content attributes of the same name.
area
link
element
map
element
(2)
area
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
a
and area
elements
(2)
(3)
(4)
(5)
alternate
"
author
"
(2)
bookmark
"
help
"
(2)
(3)
license
"
nofollow
"
noreferrer
"
prefetch
"
search
"
tag
"
next
"
prev
"
article
section
element
(2)
article
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
address
element
blockquote
element
div
element
author
"
bookmark
"
(2)
lang
and xml:lang
attributes
(2)
meta
element
script
element
iframe
element
form
element
(2)
type=file
)
(2)
step
attribute
icon
"
(2)
dropzone
attribute
(2)
(3)
text/html
form
element
application/x-www-form-urlencoded
aside
aside
element
(2)
(3)
(4)
(5)
ins
element
async
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.
script
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
async
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
...
content attribute.
script
element
(2)
(3)
form
element
type=submit
)
type=image
)
button
element
audio
video
element
audio
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
source
element
AudioTrackList
and VideoTrackList
objects
(2)
(3)
(4)
(5)
AudioTrackList
and VideoTrackList
objects
(2)
(3)
auto
dir
attribute
(2)
bdi
element
dir
attribute
(2)
(3)
(4)
autocomplete
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.
form
element
(2)
autocomplete
attribute
(2)
autocomplete
form
element
(2)
autocomplete
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.
input
element
(2)
autocomplete
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.
input
element
(2)
(3)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=datetime
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
type=image
)
type=reset
)
type=button
)
autocomplete
attribute
(2)
autofocus
input
element
(2)
button
element
(2)
select
element
(2)
textarea
element
(2)
keygen
element
(2)
autofocus
input
element
button
element
select
element
textarea
element
keygen
element
autoplay
video
element
(2)
audio
element
(2)
autoplay
axis
td
and th
elements
axis
abbr
, align
, ..., height
, and width
IDL attributes of
the td
and th
elements must
reflect the respective content attributes of the same
name.
b
cite
element
(2)
b
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
u
element
background
body
, table
, thead
, tbody
, tfoot
, tr
, td
, and th
elements
background
body
element must reflect
the element's ...
content attribute. (The ...
content is not
defined to contain a URL, despite rules regarding its
handling in the rendering section above.)
base
html
element
base
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
meta
element
iframe
element
basefont
bdi
dir
attribute
(2)
bdi
element
(2)
(3)
bdo
bdo
element
(2)
behavior
bgcolor
body
elements
bgcolor
table
elements
bgcolor
td
and th
elements
bgcolor
tr
elements
bgColor
bgcolor
content attribute.
bgColor
body
element must reflect
the element's ...
content
attribute.
bgColor
table
element must reflect
the element's ...
content
attribute.
bgColor
td
and th
elements must
reflect the elements' ...
content attributes.
bgColor
tr
element must reflect
the element's ...
content
attribute.
bgsound
blockquote
blockquote
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
(12)
body
html
element
body
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
(12)
address
element
Document
objects, and Window
objects
(2)
style
element
script
element
ol
element
img
element
iframe
element
object
element
input
element
readonly
attribute
required
attribute
multiple
attribute
select
element
(2)
optgroup
element
option
element
(2)
textarea
element
(2)
details
element
command
element
(2)
hidden
attribute
border
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.
table
element
(2)
border
table
element
(2)
border
img
elements (except as noted in the previous section)
border
object
elements
border
name
, align
, ..., hspace
, and vspace
IDL attributes of
the img
element must reflect the
respective content attributes of the same name.
border
align
, archive
, ..., code
, declare
, hspace
, standby
, and vspace
IDL attributes
of the object
element must reflect the
respective content attributes of the same name.
br
br
element
(2)
(3)
(4)
(5)
(6)
(7)
base
element
(2)
img
element
iframe
element
(2)
(3)
a
and area
elements
History
interface
(2)
Location
interface
(2)
button
input
element
cached
call(...)
canplay
Document
objects, and Window
objects
canplay
canplaythrough
Document
objects, and Window
objects
canplaythrough
canvas
img
element
canvas
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
(12)
(13)
(14)
(15)
(16)
(17)
(18)
(19)
ol
element
td
and th
elements
type=hidden
)
output
element
accesskey
attribute
html
element
head
element
title
element
base
element
link
element
meta
element
style
element
script
element
noscript
element
body
element
section
element
nav
element
article
element
aside
element
h1
, h2
, h3
, h4
, h5
, and h6
elements
hgroup
element
header
element
footer
element
address
element
p
element
hr
element
pre
element
blockquote
element
ol
element
ul
element
li
element
dl
element
dt
element
dd
element
figure
element
figcaption
element
div
element
a
element
em
element
strong
element
small
element
s
element
cite
element
q
element
dfn
element
abbr
element
time
element
code
element
var
element
samp
element
kbd
element
sub
and sup
elements
i
element
b
element
u
element
mark
element
ruby
element
rt
element
rp
element
bdi
element
bdo
element
span
element
br
element
wbr
element
ins
element
del
element
img
element
iframe
element
embed
element
object
element
param
element
video
element
audio
element
source
element
track
element
canvas
element
map
element
area
element
table
element
caption
element
colgroup
element
col
element
tbody
element
thead
element
tfoot
element
tr
element
td
element
th
element
form
element
fieldset
element
legend
element
label
element
input
element
button
element
select
element
datalist
element
optgroup
element
option
element
textarea
element
keygen
element
output
element
progress
element
meter
element
details
element
summary
element
command
element
menu
element
cellpadding
table
elements
cellPadding
table
element must reflect
the element's ...
content
attribute.
cellspacing
table
elements
cellSpacing
table
element must reflect
the element's ...
content
attribute.
center
ch
col
element must reflect the
element's char
content
attribute.
ch
tbody
, thead
, and
tfoot
elements must reflect the elements'
char
content attributes.
ch
td
and th
elements must
reflect the elements' char
content attributes.
ch
tr
element must reflect the element's
char
content attribute.
challenge
keygen
element
(2)
challenge
keygen
element
(2)
chapters
track
element
track
element
(2)
chapters
char
col
elements
char
tbody
, thead
, and tfoot
elements
char
td
and th
elements
char
tr
elements
meta
element
(2)
text/html
(2)
charoff
col
elements
charoff
tbody
, thead
, and tfoot
elements
charoff
td
and th
elements
charoff
tr
elements
charset
UTF-8
" (and the document is therefore forced to use
UTF-8 as its encoding).
meta
element
(2)
(3)
(4)
(5)
(6)
(7)
charset
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]
script
element
(2)
(3)
charset
src
, type
, ..., and defer
, each must
reflect the respective content attributes of the same
name.
script
element
(2)
charset
a
elements
charset
link
elements
charset
coords
, ..., name
, rev
, and shape
IDL attributes of the
a
element must reflect the respective
content attributes of the same name.
charset
rev
, and target
IDL attributes of
the link
element must reflect the
respective content attributes of the same name.
checkbox
input
element
input
element
(2)
(3)
type=checkbox
)
(2)
checkbox
command
"
keyword maps to the Command state, the
"..."
keyword maps to the Checkbox state, and
the "radio
"
keyword maps to the Radio state. The
missing value default is the Command state.
command
element
command
element
(2)
(3)
checked
input
element.
input
element
(2)
(3)
(4)
(5)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=datetime
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
type=image
)
type=reset
)
type=button
)
checked
type
attribute is in either the Checkbox state or
the Radio
state.
command
element
(2)
(3)
(4)
checked
label
, icon
, disabled
, ..., and radiogroup
IDL attributes must reflect the respective content
attributes of the same name.
command
element
(2)
checking
CHECKING
chOff
col
element must reflect
the element's charoff
content
attribute.
chOff
tbody
, thead
, and
tfoot
elements must reflect the elements'
charoff
content attributes.
chOff
td
and th
elements must
reflect the elements' charoff
content attributes.
chOff
tr
element must reflect
the element's charoff
content
attribute.
circle
area
element
area
element
(2)
cite
blockquote
must be quoted from
another source, whose address, if it has one, may be cited in the
...
attribute.
blockquote
element
(2)
(3)
cite
cite
content attribute.
blockquote
element
(2)
cite
blockquote
element
(2)
cite
element
(2)
(3)
(4)
(5)
(6)
(7)
u
element
cite
q
element must be quoted from
another source, whose address, if it has one, may be cited in the
... attribute. The
source may be fictional, as when quoting characters in a novel or
screenplay.
q
element
(2)
(3)
cite
ins
element
del
element
ins
and del
elements
(2)
(3)
cite
...
content attribute. The dateTime
IDL attribute
must reflect the element's datetime
content attribute.
ins
and del
elements
(2)
class
class
attribute
(2)
(3)
(4)
data-*
attributes
div
element
i
element
b
element
span
element
(2)
classid
clear
br
elements
clear
br
element must reflect
the content attribute of the same name.
code
pre
element
code
element
(2)
(3)
(4)
code
object
elements
code
align
, alt
, archive
, ..., height
, hspace
, name
, object
, vspace
, and width
IDL attributes
must reflect the respective content attributes of the
same name. For the purposes of reflection, the applet
element's object
content
attribute is defined as containing a URL.
code
align
, archive
, border
, ..., declare
, hspace
, standby
, and vspace
IDL attributes
of the object
element must reflect the
respective content attributes of the same name.
maxlength
attribute
textarea
element
codebase
object
elements
codeBase
codebase
content attribute,
which for the purposes of reflection is defined as containing a
URL.
codeBase
object
element must
reflect the element's ...
content attribute,
which for the purposes of reflection is defined as containing a
URL.
codetype
object
elements
codeType
object
element must reflect
the element's ...
content
attribute.
col
colgroup
element
(2)
col
element
(2)
(3)
col
th
element
colgroup
table
element
colgroup
element
(2)
(3)
col
element
(2)
(3)
(4)
tbody
element
thead
element
tfoot
element
(2)
tr
element
colgroup
th
element
(2)
color
input
element
color
hr
elements
color
face
, and size
IDL attributes of
the basefont
element must reflect the
respective content attributes of the same name.
color
face
, and size
IDL attributes of
the font
element must reflect the
respective content attributes of the same name.
color
align
, ..., size
, and width
IDL attributes of the
hr
element must reflect the respective
content attributes of the same name.
cols
cols
attribute
is specified, its value must be a valid non-negative
integer greater than zero.
textarea
element
(2)
(3)
(4)
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.
textarea
element
(2)
(3)
(4)
cols
rows
IDL
attributes of the frameset
element must
reflect the respective content attributes of the same
name.
colspan
td
and th
elements may have a ... content
attribute specified, whose value must be a valid non-negative
integer greater than zero.
td
element
th
element
td
and th
elements
(2)
colSpan
...
content attribute. The
value must be limited to only non-negative numbers greater
than zero.
td
and th
elements
(2)
command
command
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
command
checkbox
"
keyword maps to the Checkbox state, and
the "radio
"
keyword maps to the Radio state. The
missing value default is the Command state.
command
element
command
element
(2)
(3)
command
...
element slave has a
...
attribute, and slave is in a
Document
, and there is an element in that
Document
whose ID has a
value equal to the value of slave's command
attribute, and the first
such element in tree order, hereafter master, itself defines
a command and either is not a ...
element or
does not itself have a command
attribute, then the
master command of slave is master.
command
element
(2)
(3)
(4)
(5)
(6)
li
element
command
element
iframe
element
(2)
(3)
compact
dl
elements
compact
ol
elements
compact
ul
elements
compact
dir
element must reflect
the content attribute of the same name.
compact
dl
element must reflect
the content attribute of the same name.
compact
ol
element must reflect
the content attribute of the same name.
compact
type
IDL attributes of
the ul
element must reflect the respective
content attributes of the same name.
map
element
type=radio
)
content
name
and ... IDL attributes
must reflect the respective content attributes of the
same name. The IDL attribute httpEquiv
must
reflect the content attribute http-equiv
.
meta
element
(2)
html
element
head
element
title
element
base
element
link
element
meta
element
style
element
script
element
noscript
element
body
element
section
element
nav
element
article
element
aside
element
h1
, h2
, h3
, h4
, h5
, and h6
elements
hgroup
element
header
element
footer
element
address
element
p
element
hr
element
pre
element
blockquote
element
ol
element
ul
element
li
element
dl
element
dt
element
dd
element
figure
element
figcaption
element
div
element
a
element
em
element
strong
element
small
element
s
element
cite
element
q
element
dfn
element
abbr
element
time
element
code
element
var
element
samp
element
kbd
element
sub
and sup
elements
i
element
b
element
u
element
mark
element
ruby
element
rt
element
rp
element
bdi
element
bdo
element
span
element
br
element
wbr
element
ins
element
del
element
img
element
iframe
element
embed
element
object
element
param
element
video
element
audio
element
source
element
track
element
canvas
element
map
element
area
element
table
element
caption
element
colgroup
element
col
element
tbody
element
thead
element
tfoot
element
tr
element
td
element
th
element
form
element
fieldset
element
legend
element
label
element
input
element
button
element
select
element
datalist
element
optgroup
element
option
element
textarea
element
keygen
element
output
element
progress
element
meter
element
details
element
summary
element
command
element
menu
element
html
element
head
element
title
element
base
element
link
element
meta
element
style
element
script
element
noscript
element
body
element
section
element
nav
element
article
element
aside
element
h1
, h2
, h3
, h4
, h5
, and h6
elements
hgroup
element
header
element
footer
element
address
element
p
element
hr
element
pre
element
blockquote
element
ol
element
ul
element
li
element
dl
element
dt
element
dd
element
figure
element
figcaption
element
div
element
a
element
em
element
strong
element
small
element
s
element
cite
element
q
element
dfn
element
abbr
element
time
element
code
element
var
element
samp
element
kbd
element
sub
and sup
elements
i
element
b
element
u
element
mark
element
ruby
element
rt
element
rp
element
bdi
element
bdo
element
span
element
br
element
wbr
element
ins
element
del
element
img
element
iframe
element
embed
element
object
element
param
element
video
element
audio
element
source
element
track
element
canvas
element
map
element
area
element
table
element
caption
element
colgroup
element
col
element
tbody
element
thead
element
tfoot
element
tr
element
td
element
th
element
form
element
fieldset
element
legend
element
label
element
input
element
button
element
select
element
datalist
element
optgroup
element
option
element
textarea
element
keygen
element
output
element
progress
element
meter
element
details
element
summary
element
command
element
menu
element
contentDocument
Document
object of the
active document of the iframe
element's
nested browsing context, if any, or null otherwise.
iframe
element
(2)
contentDocument
Document
object of the
active document of the object
element's
nested browsing context, if it has one; otherwise, it
must return null.
object
element
(2)
contenteditable
contenteditable
content
attribute
(2)
(3)
contentWindow
WindowProxy
object of the
iframe
element's nested browsing
context, if any, or null otherwise.
iframe
element
(2)
contentWindow
WindowProxy
object of the
object
element's nested browsing context,
if it has one; otherwise, it must return null.
object
element
(2)
html
element
head
element
title
element
base
element
link
element
meta
element
style
element
script
element
noscript
element
body
element
section
element
nav
element
article
element
aside
element
h1
, h2
, h3
, h4
, h5
, and h6
elements
hgroup
element
header
element
footer
element
address
element
p
element
hr
element
pre
element
blockquote
element
ol
element
ul
element
li
element
dl
element
dt
element
dd
element
figure
element
figcaption
element
div
element
a
element
em
element
strong
element
small
element
s
element
cite
element
q
element
dfn
element
abbr
element
time
element
code
element
var
element
samp
element
kbd
element
sub
and sup
elements
i
element
b
element
u
element
mark
element
ruby
element
rt
element
rp
element
bdi
element
bdo
element
span
element
br
element
wbr
element
ins
element
del
element
img
element
iframe
element
embed
element
object
element
param
element
video
element
audio
element
source
element
track
element
canvas
element
map
element
area
element
table
element
caption
element
colgroup
element
col
element
tbody
element
thead
element
tfoot
element
tr
element
td
element
th
element
form
element
fieldset
element
legend
element
label
element
input
element
button
element
select
element
datalist
element
optgroup
element
option
element
textarea
element
keygen
element
output
element
progress
element
meter
element
details
element
summary
element
command
element
menu
element
controls
video
element
(2)
(3)
audio
element
(2)
(3)
(4)
controls
coords
shape
attribute.
area
element
(2)
(3)
(4)
(5)
(6)
(7)
coords
alt
, ..., href
, target
,
rel
, media
, hreflang
, and type
, each must
reflect the respective content attributes of the same
name.
area
element
(2)
coords
a
elements
coords
charset
, name
, rev
, and shape
IDL attributes of the
a
element must reflect the respective
content attributes of the same name.
img
element
Document
crossorigin
canvas
.
img
element
(2)
(3)
crossOrigin
...
content
attribute.
img
element
(2)
crossorigin
video
element
audio
element
crossOrigin
...
content
attribute.
History
interface
(2)
Location
interface
History
interface
(2)
data-*
attributes
(2)
(3)
(4)
data
object
element
(2)
(3)
(4)
(5)
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.
object
element
(2)
data-
data-*
attributes
(2)
(3)
(4)
data:
URL
canvas
element
datafld
dataformatas
datalist
list
attribute
(2)
(3)
(4)
(5)
(6)
(7)
multiple
attribute
input
element APIs
datalist
element
(2)
(3)
(4)
(5)
option
element
(2)
datapagesize
datasrc
DataTransfer
interface
(2)
(3)
(4)
DataTransferItemList
interface
DataTransferItem
interface
DragEvent
interface
(2)
(3)
DataTransferItemList
interface
(2)
(3)
(4)
DataTransferItem
interface
(2)
(3)
DataTransfer
interface
(2)
DataTransferItemList
interface
(2)
(3)
type=date
)
input
element
(2)
(3)
type=date
)
input
element APIs
input
element
(2)
type=datetime
)
(2)
(3)
type=date
)
type=datetime-local
)
(2)
datetime
time
element
(2)
(3)
(4)
(5)
datetime
time
element
(2)
datetime
ins
element
del
element
ins
and del
elements
(2)
(3)
dateTime
cite
IDL
attribute must reflect the element's cite
content attribute. The ... IDL attribute
must reflect the element's ...
content attribute.
ins
and del
elements
(2)
datetime
input
element
time
element
(2)
datetime-local
input
element
dd
dl
element
(2)
(3)
dt
element
(2)
dd
element
(2)
(3)
(4)
ol
element
declare
object
elements
declare
align
, archive
, border
, code
, ..., hspace
, standby
, and vspace
IDL attributes
of the object
element must reflect the
respective content attributes of the same name.
application/x-www-form-urlencoded
payloads
application/x-www-form-urlencoded
default
track
element with the same parent node with the default
attribute specified.
track
element
(2)
(3)
default
src
, srclang
, label
, and ... 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.
track
element
(2)
default
area
element
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 ...
state.
autocomplete
attribute
(2)
type=range
)
(2)
area
element
(2)
defaultChecked
input
element
(2)
defaultMuted
defaultSelected
option
element
(2)
defaultValue
input
element
(2)
defer
async
and
... 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.
script
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
defer
src
, type
, charset
, and ..., each must
reflect the respective content attributes of the same
name.
script
element
(2)
dfn
element
(2)
abbr
element
del
s
element
del
element
(2)
(3)
ins
and del
elements
(2)
description
descriptions
track
element
track
element
(2)
descriptions
details
details
element
(2)
(3)
(4)
(5)
(6)
summary
element
(2)
dfn
dl
element
dt
element
dd
element
dfn
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
i
element
img
element
iframe
element
embed
element
object
element
video
element
type=image
)
dir
dir
attribute
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
(12)
(13)
(14)
(15)
(16)
bdi
element
(2)
bdo
element
(2)
span
element
dir
...
content attribute of that element,
limited to only known values.
dir
attribute
(2)
dir
Document
objects must
reflect the ...
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.
dir
attribute
direction
dirName
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 ... 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.
input
element
(2)
dirname
dirname
attribute.
input
element
(2)
(3)
(4)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=datetime
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
type=image
)
type=reset
)
type=button
)
dirname
attribute
(2)
dirname
dirname
attribute.
textarea
element
(2)
(3)
(4)
dirName
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 ... IDL
attribute must reflect the ...
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.
textarea
element
(2)
disabled
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.
link
element
(2)
(3)
disabled
style
element
(2)
disabled
fieldset
element, excluding those that are
descendants of the fieldset
element's first
legend
element child, if any, to be disabled.
fieldset
element
(2)
disabled
fieldset
element
(2)
disabled
option
elements together.
optgroup
element
(2)
option
element
disabled
label
attributes must
reflect the respective content attributes of the same
name.
optgroup
element
(2)
disabled
option
element is ... if its disabled
attribute is present or
if it is a child of an optgroup
element whose ...
attribute is
present.
option
element
(2)
(3)
option
element is ... if its ...
attribute is present or
if it is a child of an optgroup
element whose ...
attribute is
present.
datalist
element
optgroup
element
option
element
disabled
defaultSelected
IDL attribute must reflect the selected
content attribute.
option
element
(2)
disabled
input
element
(2)
button
element
(2)
select
element
(2)
textarea
element
(2)
keygen
element
(2)
...
attribute is
set, or if it is a descendant of a fieldset
element
whose ...
attribute
is set and is not a descendant of that
fieldset
element's first legend
element
child, if any.
fieldset
element
disabled
...
content attribute.
input
element
button
element
select
element
textarea
element
keygen
element
disabled
command
element
(2)
(3)
(4)
(5)
disabled
label
, icon
, ..., checked
, and radiogroup
IDL attributes must reflect the respective content
attributes of the same name.
command
element
(2)
div
section
element
nav
element
p
element
(2)
div
element
(2)
(3)
(4)
(5)
(6)
dropzone
attribute
dl
dl
element
(2)
(3)
(4)
(5)
(6)
(7)
dt
element
(2)
(3)
dd
element
(2)
(3)
dfn
element
iframe
element
Document
objects and their descendant DOM
trees, and to serialized byte streams using the HTML syntax or XHTML syntax, depending on context.
dir
attribute
document.write()
document.writeln()
head
element
base
element
style
element
body
element
(2)
iframe
element
(2)
(3)
(4)
object
element
form
element
label
element
output
element
command
element
Window
object
History
interface
Location
interface
Document
objects, and Window
objects
(2)
(3)
(4)
html
element
head
element
title
element
base
element
link
element
meta
element
style
element
script
element
noscript
element
body
element
section
element
nav
element
article
element
aside
element
h1
, h2
, h3
, h4
, h5
, and h6
elements
hgroup
element
header
element
footer
element
address
element
p
element
hr
element
pre
element
blockquote
element
ol
element
ul
element
li
element
dl
element
dt
element
dd
element
figure
element
figcaption
element
div
element
a
element
em
element
strong
element
small
element
s
element
cite
element
q
element
dfn
element
abbr
element
time
element
code
element
var
element
samp
element
kbd
element
sub
and sup
elements
i
element
b
element
u
element
mark
element
ruby
element
rt
element
rp
element
bdi
element
bdo
element
span
element
br
element
wbr
element
ins
element
del
element
img
element
iframe
element
embed
element
object
element
param
element
video
element
audio
element
source
element
track
element
canvas
element
map
element
area
element
table
element
caption
element
colgroup
element
col
element
tbody
element
thead
element
tfoot
element
tr
element
td
element
th
element
form
element
fieldset
element
legend
element
label
element
input
element
button
element
select
element
datalist
element
optgroup
element
option
element
textarea
element
keygen
element
output
element
progress
element
meter
element
details
element
summary
element
command
element
menu
element
downloading
DOWNLOADING
drag
Document
objects, and Window
objects
DataTransfer
interface
DataTransferItemList
interface
(2)
(3)
(4)
(5)
dragend
Document
objects, and Window
objects
dragenter
Document
objects, and Window
objects
DragEvent
interface
(2)
(3)
DragEvent
interface
(2)
draggable
draggable
attribute
(2)
(3)
(4)
dragleave
Document
objects, and Window
objects
dragover
Document
objects, and Window
objects
dragstart
Document
objects, and Window
objects
DataTransfer
interface
drop
Document
objects, and Window
objects
dropzone
dropzone
attribute
(2)
(3)
(4)
dropzone
dropzone
attribute
dt
dl
element
(2)
(3)
dt
element
(2)
(3)
(4)
(5)
dd
element
(2)
durationchange
Document
objects, and Window
objects
durationchange
dir
attribute
input
element
(2)
type=tel
)
type=email
)
(2)
em
em
element
(2)
(3)
(4)
(5)
small
element
(2)
i
element
b
element
u
element
mark
element
email
input
element
embed
embed
element
(2)
(3)
(4)
img
element
(2)
iframe
element
(2)
embed
element
(2)
object
element
(2)
video
element
(2)
audio
element
(2)
canvas
element
(2)
(3)
(4)
(5)
data-*
attributes
emptied
Document
objects, and Window
objects
emptied
meta
element
(2)
(3)
enctype
formenctype
content attributes are enumerated
attributes with the following keywords and states:
form
element
(2)
formenctype
attribute, then the
element's enctype is that
attribute's state; otherwise, it is the form owner's
...
attribute's state.
enctype
action
IDL
attribute must reflect the content attribute of the
same name, except that on getting, when the content attribute is
missing or its value is the empty string, the document's
address must be returned instead. The target
IDL attribute must
reflect the content attribute of the same name. The
method
and ... IDL attributes
must reflect the respective content attributes of the
same name, limited to only known values. The encoding
IDL attribute
must reflect the ...
content attribute,
limited to only known values. The noValidate
IDL
attribute must reflect the novalidate
content attribute. The
formAction
IDL
attribute must reflect the formaction
content attribute,
except that on getting, when the content attribute is missing or its
value is the empty string, the document's address must
be returned instead. The formEnctype
IDL
attribute must reflect the formenctype
content attribute,
limited to only known values. The formMethod
IDL
attribute must reflect the formmethod
content attribute,
limited to only known values. The formNoValidate
IDL
attribute must reflect the formnovalidate
content
attribute. The formTarget
IDL
attribute must reflect the formtarget
content attribute.
form
element
ended
Document
objects, and Window
objects
ended
ended
translate
attribute
dir
attribute
track
element
area
element
th
element
form
element
input
element
autocomplete
attribute
button
element
textarea
element
keygen
element
command
element
menu
element
contenteditable
content
attribute
draggable
attribute
error
error
body
element
(2)
(3)
body
element
(2)
(3)
(4)
Document
objects, and Window
objects
(2)
(3)
(4)
(5)
(6)
(7)
(8)
execCommand()
external
Window
interface must return an
instance of the External
interface. The same object
must be returned each time.
Window
object
External
interface
(2)
(3)
Window
object
External
interface
(2)
(3)
face
color
,
..., and size
IDL attributes of
the basefont
element must reflect the
respective content attributes of the same name.
face
color
,
..., and size
IDL attributes of
the font
element must reflect the
respective content attributes of the same name.
track
element
iframe
element
canvas
element
(2)
(3)
(4)
(5)
fieldset
div
element
fieldset
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
legend
element
(2)
figure
blockquote
element
li
element
figure
element
(2)
(3)
(4)
(5)
(6)
figcaption
element
(2)
caption
element
input
element
(2)
type=file
)
style
element
(2)
(3)
(4)
(5)
script
element
noscript
element
body
element
section
element
(2)
(3)
nav
element
(2)
(3)
article
element
(2)
(3)
aside
element
(2)
(3)
h1
, h2
, h3
, h4
, h5
, and h6
elements
(2)
hgroup
element
(2)
header
element
(2)
(3)
footer
element
(2)
(3)
address
element
(2)
(3)
p
element
(2)
hr
element
(2)
pre
element
(2)
blockquote
element
(2)
(3)
ol
element
(2)
ul
element
(2)
li
element
dl
element
(2)
dt
element
dd
element
figure
element
(2)
(3)
(4)
(5)
(6)
figcaption
element
div
element
(2)
(3)
a
element
(2)
em
element
strong
element
small
element
s
element
cite
element
q
element
dfn
element
abbr
element
time
element
code
element
var
element
samp
element
kbd
element
sub
and sup
elements
i
element
b
element
u
element
mark
element
ruby
element
bdi
element
bdo
element
span
element
br
element
wbr
element
ins
element
(2)
del
element
(2)
img
element
iframe
element
embed
element
object
element
param
element
video
element
audio
element
source
element
track
element
canvas
element
map
element
(2)
area
element
table
element
(2)
caption
element
td
element
th
element
form
element
(2)
(3)
fieldset
element
(2)
(3)
label
element
input
element
button
element
select
element
datalist
element
textarea
element
keygen
element
output
element
progress
element
meter
element
details
element
(2)
(3)
command
element
menu
element
(2)
(3)
(4)
for
Document
as the label
element.
label
element
(2)
(3)
(4)
for
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
.
output
element
(2)
(3)
(4)
for
script
elements
form
base
element
form
element
(2)
(3)
(4)
(5)
legend
element
autocomplete
attribute
option
element
form
...
element, but may have a ... attribute specified to
override this.
object
element
(2)
fieldset
element
(2)
label
element
(2)
input
element
(2)
button
element
(2)
select
element
(2)
textarea
element
(2)
keygen
element
(2)
output
element
(2)
dirname
attribute
dirname
attribute
textarea
element
maxlength
attribute
maxlength
attribute
textarea
element
object
element
fieldset
element
label
element
input
element
type=radio
)
(2)
autocomplete
attribute
button
element
select
element
textarea
element
keygen
element
output
element
object
element
form
element
fieldset
element
label
element
input
element
(2)
button
element
select
element
textarea
element
keygen
element
output
element
formaction
action
and
...
content attributes, if specified, must have a value that is a
valid non-empty URL potentially surrounded by
spaces.
input
element
(2)
(3)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=datetime
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
(2)
type=image
)
(2)
type=reset
)
type=button
)
button
element
(2)
(3)
formAction
action
IDL
attribute must reflect the content attribute of the
same name, except that on getting, when the content attribute is
missing or its value is the empty string, the document's
address must be returned instead. The target
IDL attribute must
reflect the content attribute of the same name. The
method
and enctype
IDL attributes
must reflect the respective content attributes of the
same name, limited to only known values. The encoding
IDL attribute
must reflect the enctype
content attribute,
limited to only known values. The noValidate
IDL
attribute must reflect the novalidate
content attribute. The
... IDL
attribute must reflect the ...
content attribute,
except that on getting, when the content attribute is missing or its
value is the empty string, the document's address must
be returned instead. The formEnctype
IDL
attribute must reflect the formenctype
content attribute,
limited to only known values. The formMethod
IDL
attribute must reflect the formmethod
content attribute,
limited to only known values. The formNoValidate
IDL
attribute must reflect the formnovalidate
content
attribute. The formTarget
IDL
attribute must reflect the formtarget
content attribute.
input
element
button
element
formenctype
enctype
and
...
content attributes are enumerated
attributes with the following keywords and states:
input
element
(2)
(3)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=datetime
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
(2)
type=image
)
(2)
type=reset
)
type=button
)
button
element
(2)
(3)
formEnctype
action
IDL
attribute must reflect the content attribute of the
same name, except that on getting, when the content attribute is
missing or its value is the empty string, the document's
address must be returned instead. The target
IDL attribute must
reflect the content attribute of the same name. The
method
and enctype
IDL attributes
must reflect the respective content attributes of the
same name, limited to only known values. The encoding
IDL attribute
must reflect the enctype
content attribute,
limited to only known values. The noValidate
IDL
attribute must reflect the novalidate
content attribute. The
formAction
IDL
attribute must reflect the formaction
content attribute,
except that on getting, when the content attribute is missing or its
value is the empty string, the document's address must
be returned instead. The ... IDL
attribute must reflect the ...
content attribute,
limited to only known values. The formMethod
IDL
attribute must reflect the formmethod
content attribute,
limited to only known values. The formNoValidate
IDL
attribute must reflect the formnovalidate
content
attribute. The formTarget
IDL
attribute must reflect the formtarget
content attribute.
input
element
button
element
formmethod
method
and
...
content attributes are enumerated
attributes with the following keywords and states:
input
element
(2)
(3)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=datetime
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
(2)
type=image
)
(2)
type=reset
)
type=button
)
button
element
(2)
(3)
formMethod
action
IDL
attribute must reflect the content attribute of the
same name, except that on getting, when the content attribute is
missing or its value is the empty string, the document's
address must be returned instead. The target
IDL attribute must
reflect the content attribute of the same name. The
method
and enctype
IDL attributes
must reflect the respective content attributes of the
same name, limited to only known values. The encoding
IDL attribute
must reflect the enctype
content attribute,
limited to only known values. The noValidate
IDL
attribute must reflect the novalidate
content attribute. The
formAction
IDL
attribute must reflect the formaction
content attribute,
except that on getting, when the content attribute is missing or its
value is the empty string, the document's address must
be returned instead. The formEnctype
IDL
attribute must reflect the formenctype
content attribute,
limited to only known values. The ... IDL
attribute must reflect the ...
content attribute,
limited to only known values. The formNoValidate
IDL
attribute must reflect the formnovalidate
content
attribute. The formTarget
IDL
attribute must reflect the formtarget
content attribute.
input
element
button
element
formnovalidate
novalidate
and ...
content attributes are boolean
attributes. If present, they indicate that the form is not to
be validated during submission.
input
element
(2)
(3)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=datetime
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
(2)
(3)
type=image
)
(2)
type=reset
)
type=button
)
button
element
(2)
(3)
(4)
formNoValidate
action
IDL
attribute must reflect the content attribute of the
same name, except that on getting, when the content attribute is
missing or its value is the empty string, the document's
address must be returned instead. The target
IDL attribute must
reflect the content attribute of the same name. The
method
and enctype
IDL attributes
must reflect the respective content attributes of the
same name, limited to only known values. The encoding
IDL attribute
must reflect the enctype
content attribute,
limited to only known values. The noValidate
IDL
attribute must reflect the novalidate
content attribute. The
formAction
IDL
attribute must reflect the formaction
content attribute,
except that on getting, when the content attribute is missing or its
value is the empty string, the document's address must
be returned instead. The formEnctype
IDL
attribute must reflect the formenctype
content attribute,
limited to only known values. The formMethod
IDL
attribute must reflect the formmethod
content attribute,
limited to only known values. The ... IDL
attribute must reflect the ...
content
attribute. The formTarget
IDL
attribute must reflect the formtarget
content attribute.
input
element
button
element
formtarget
target
and
...
content attributes, if specified, must have values that are valid browsing
context names or keywords.
input
element
(2)
(3)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=datetime
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
(2)
type=image
)
(2)
type=reset
)
type=button
)
button
element
(2)
(3)
formTarget
action
IDL
attribute must reflect the content attribute of the
same name, except that on getting, when the content attribute is
missing or its value is the empty string, the document's
address must be returned instead. The target
IDL attribute must
reflect the content attribute of the same name. The
method
and enctype
IDL attributes
must reflect the respective content attributes of the
same name, limited to only known values. The encoding
IDL attribute
must reflect the enctype
content attribute,
limited to only known values. The noValidate
IDL
attribute must reflect the novalidate
content attribute. The
formAction
IDL
attribute must reflect the formaction
content attribute,
except that on getting, when the content attribute is missing or its
value is the empty string, the document's address must
be returned instead. The formEnctype
IDL
attribute must reflect the formenctype
content attribute,
limited to only known values. The formMethod
IDL
attribute must reflect the formmethod
content attribute,
limited to only known values. The formNoValidate
IDL
attribute must reflect the formnovalidate
content
attribute. The ... IDL
attribute must reflect the ...
content attribute.
input
element
button
element
frame
table
elements
frame
align
, ..., summary
, rules
, and width
, IDL attributes of
the table
element must reflect the
respective content attributes of the same name.
frameborder
iframe
elements
frameBorder
frame
element must
reflect the element's frameborder
content
attribute.
frameBorder
iframe
element must
reflect the element's ...
content
attribute.
History
interface
body
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
(12)
(13)
(14)
(15)
(16)
(17)
(18)
AudioTrackList
and VideoTrackList
objects
(2)
(3)
(4)
Window
object
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
(12)
(13)
(14)
(15)
(16)
(17)
(18)
(19)
(20)
(21)
(22)
(23)
(24)
(25)
(26)
(27)
(28)
(29)
(30)
(31)
(32)
(33)
(34)
(35)
(36)
(37)
(38)
(39)
(40)
(41)
(42)
(43)
(44)
(45)
(46)
(47)
(48)
(49)
(50)
(51)
(52)
(53)
(54)
(55)
(56)
(57)
(58)
(59)
(60)
(61)
(62)
(63)
(64)
(65)
(66)
DataTransferItem
interface
(2)
generator
get
html
element
head
element
title
element
base
element
link
element
meta
element
style
element
script
element
noscript
element
body
element
section
element
nav
element
article
element
aside
element
h1
, h2
, h3
, h4
, h5
, and h6
elements
hgroup
element
header
element
footer
element
address
element
p
element
hr
element
pre
element
blockquote
element
ol
element
ul
element
li
element
dl
element
dt
element
dd
element
figure
element
figcaption
element
div
element
a
element
em
element
strong
element
small
element
s
element
cite
element
q
element
dfn
element
abbr
element
time
element
code
element
var
element
samp
element
kbd
element
sub
and sup
elements
i
element
b
element
u
element
mark
element
ruby
element
rt
element
rp
element
bdi
element
bdo
element
span
element
(2)
br
element
wbr
element
ins
element
del
element
img
element
iframe
element
embed
element
object
element
param
element
video
element
audio
element
source
element
track
element
canvas
element
map
element
area
element
table
element
caption
element
colgroup
element
col
element
tbody
element
thead
element
tfoot
element
tr
element
td
element
th
element
form
element
fieldset
element
legend
element
label
element
input
element
button
element
select
element
datalist
element
optgroup
element
option
element
textarea
element
keygen
element
output
element
progress
element
meter
element
details
element
summary
element
command
element
menu
element
type=datetime
)
h1
section
element
h1
, h2
, h3
, h4
, h5
, and h6
elements
(2)
(3)
hgroup
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
(12)
(13)
(14)
header
element
(2)
(3)
(4)
hr
element
li
element
b
element
(2)
canvas
element
h2
section
element
h1
, h2
, h3
, h4
, h5
, and h6
elements
(2)
(3)
hgroup
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
(12)
(13)
(14)
header
element
(2)
(3)
(4)
hr
element
li
element
b
element
(2)
canvas
element
h3
section
element
h1
, h2
, h3
, h4
, h5
, and h6
elements
(2)
(3)
hgroup
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
(12)
(13)
(14)
header
element
(2)
(3)
(4)
hr
element
li
element
b
element
(2)
canvas
element
h4
section
element
h1
, h2
, h3
, h4
, h5
, and h6
elements
(2)
(3)
hgroup
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
(12)
(13)
(14)
header
element
(2)
(3)
(4)
hr
element
li
element
b
element
(2)
canvas
element
h5
section
element
h1
, h2
, h3
, h4
, h5
, and h6
elements
(2)
(3)
hgroup
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
(12)
(13)
(14)
header
element
(2)
(3)
(4)
hr
element
li
element
b
element
(2)
canvas
element
h6
section
element
h1
, h2
, h3
, h4
, h5
, and h6
elements
(2)
(3)
hgroup
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
(12)
(13)
(14)
header
element
(2)
(3)
(4)
hr
element
li
element
b
element
(2)
canvas
element
hard
wrap
attribute is an enumerated attribute with two keywords
and states: the soft
keyword
which maps to the Soft state, and the
... keyword
which maps to the Hard state. The
missing value default is the Soft state.
textarea
element
textarea
is to have
newlines added by the user agent so that the text is wrapped when it
is submitted.
textarea
element
(2)
(3)
min
and max
attributes
hash
a
element also supports the complement of
URL decomposition IDL attributes, protocol
, host
, port
, hostname
, pathname
, search
, and .... 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.
a
element
(2)
hash
area
element also supports the complement of
URL decomposition IDL attributes, protocol
, host
, port
, hostname
, pathname
, search
, and .... 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.
area
element
(2)
hash
Location
interface also has the complement of
URL decomposition IDL attributes, protocol
, host
, port
, hostname
, pathname
, search
, and ....
Location
interface
(2)
hashchange
Document
objects, and Window
objects
HAVE_CURRENT_DATA
HAVE_ENOUGH_DATA
HAVE_FUTURE_DATA
HAVE_METADATA
HAVE_NOTHING
head
html
element
head
element
(2)
(3)
title
element
base
element
link
element
meta
element
(2)
(3)
style
element
noscript
element
(2)
(3)
(4)
(5)
(6)
(7)
header
article
element
header
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
footer
element
address
element
dt
element
th
element
headers
td
and th
element may have a ... 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.
td
element
th
element
td
and th
elements
(2)
(3)
headers
td
and th
elements
(2)
h1
, h2
, h3
, h4
, h5
, and h6
elements
hgroup
element
(2)
address
element
dt
element
th
element
h1
, h2
, h3
, h4
, h5
, and h6
elements
hgroup
element
height
canvas
element has two attributes to control the
size of the coordinate space: width
and .... These
attributes, when specified, must have values that are valid non-negative
integers. The
width
attribute defaults to
300, and the height
attribute defaults to 150.
canvas
element
(2)
(3)
height
width
and
... IDL
attributes must reflect the respective content
attributes of the same name, with the same defaults.
canvas
element
(2)
height
width
and ... 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.
img
element
(2)
(3)
iframe
element
embed
element
object
element
video
element
input
element
(2)
(3)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=datetime
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
type=image
)
type=reset
)
type=button
)
height
width
and ... IDL attributes on
the iframe
, embed
, object
,
and video
elements must reflect the
respective content attributes of the same name.
iframe
element
embed
element
object
element
video
element
height
td
and th
elements
height
align
, alt
, archive
, code
, ..., hspace
, name
, object
, vspace
, and width
IDL attributes
must reflect the respective content attributes of the
same name. For the purposes of reflection, the applet
element's object
content
attribute is defined as containing a URL.
height
behavior
, direction
, ..., hspace
, vspace
, and width
IDL attributes
must reflect the respective content attributes of the
same name.
height
abbr
, align
, axis
, ..., and width
IDL attributes of
the td
and th
elements must
reflect the respective content attributes of the same
name.
hgroup
h1
, h2
, h3
, h4
, h5
, and h6
elements
hgroup
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
header
element
history
Window
interface must return the object
implementing the History
interface for that
Window
object's Document
.
Window
object
History
interface
(2)
(3)
(4)
(5)
(6)
(7)
Location
interface
Window
object
History
interface
(2)
(3)
(4)
host
a
element also supports the complement of
URL decomposition IDL attributes, protocol
, ..., 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.
a
element
(2)
host
area
element also supports the complement of
URL decomposition IDL attributes, protocol
, ..., 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.
area
element
(2)
host
Location
interface also has the complement of
URL decomposition IDL attributes, protocol
, ..., port
, hostname
, pathname
, search
, and hash
.
Location
interface
(2)
hostname
a
element also supports the complement of
URL decomposition IDL attributes, protocol
, host
, port
, ..., 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.
a
element
(2)
hostname
area
element also supports the complement of
URL decomposition IDL attributes, protocol
, host
, port
, ..., 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.
area
element
(2)
hostname
Location
interface also has the complement of
URL decomposition IDL attributes, protocol
, host
, port
, ..., pathname
, search
, and hash
.
Location
interface
(2)
hr
hr
element
(2)
(3)
(4)
(5)
(6)
href
base
element
(2)
(3)
(4)
href
target
IDL attributes
must reflect the respective content attributes of the
same name.
base
element
(2)
href
link
element
(2)
href
rel
, media
, hreflang
, type
, and sizes
each must
reflect the respective content attributes of the same
name.
link
element
(2)
href
target
, rel
, media
, hreflang
, and type
, must
reflect the respective content attributes of the same
name.
a
element
(2)
href
alt
, coords
, ..., target
,
rel
, media
, hreflang
, and type
, each must
reflect the respective content attributes of the same
name.
area
element
(2)
href
a
and area
elements must have
a value that is a valid URL potentially surrounded by
spaces.
a
element
(2)
(3)
(4)
(5)
(6)
img
element
(2)
area
element
(2)
(3)
(4)
(5)
(6)
a
and area
elements
(2)
(3)
hidden
attribute
hreflang
link
element has the same semantics as
the hreflang
attribute on a
and area
elements.
link
element
(2)
hreflang
href
, rel
, media
, ..., type
, and sizes
each must
reflect the respective content attributes of the same
name.
link
element
(2)
hreflang
href
,
target
, rel
, media
, ..., and type
, must
reflect the respective content attributes of the same
name.
a
element
(2)
hreflang
alt
, coords
, href
, target
,
rel
, media
, ..., and type
, each must
reflect the respective content attributes of the same
name.
area
element
(2)
hreflang
a
and area
elements that
create hyperlinks, if present, gives
the language of the linked resource. It is purely advisory. The
value must be a valid BCP 47 language tag. [BCP47]
link
element
a
element
(2)
area
element
(2)
a
and area
elements
alternate
"
(2)
(3)
hspace
embed
elements
embed
element
hspace
iframe
elements
hspace
input
elements
hspace
img
elements
hspace
object
elements
hspace
align
, alt
, archive
, code
, height
, ..., name
, object
, vspace
, and width
IDL attributes
must reflect the respective content attributes of the
same name. For the purposes of reflection, the applet
element's object
content
attribute is defined as containing a URL.
hspace
behavior
, direction
, height
, ..., vspace
, and width
IDL attributes
must reflect the respective content attributes of the
same name.
hspace
name
, align
, border
, ..., and vspace
IDL attributes of
the img
element must reflect the
respective content attributes of the same name.
hspace
align
, archive
, border
, code
, declare
, ..., standby
, and vspace
IDL attributes
of the object
element must reflect the
respective content attributes of the same name.
html
html
element
(2)
(3)
head
element
base
element
body
element
(2)
(3)
iframe
element
title
attribute
lang
and xml:lang
attributes
(2)
(3)
(4)
class
attribute
style
attribute
data-*
attributes
(2)
body
element
Document
objects, and Window
objects
(2)
hidden
attribute
accesskey
attribute
draggable
attribute
dropzone
attribute
application/xhtml+xml
(2)
a
element
area
element
audio
element
base
element
body
element
br
element
canvas
element
command
element
datalist
element
details
element
div
element
dl
element
html
element
head
element
title
element
base
element
link
element
meta
element
style
element
script
element
noscript
element
body
element
section
element
nav
element
article
element
aside
element
h1
, h2
, h3
, h4
, h5
, and h6
elements
hgroup
element
header
element
footer
element
address
element
p
element
hr
element
pre
element
blockquote
element
ol
element
ul
element
li
element
dl
element
dt
element
dd
element
figure
element
figcaption
element
div
element
a
element
em
element
strong
element
small
element
s
element
cite
element
dfn
element
abbr
element
time
element
code
element
var
element
samp
element
kbd
element
sub
and sup
elements
i
element
b
element
u
element
mark
element
ruby
element
rt
element
rp
element
bdi
element
bdo
element
span
element
br
element
wbr
element
ins
and del
elements
img
element
iframe
element
embed
element
object
element
param
element
source
element
track
element
canvas
element
map
element
area
element
table
element
(2)
(3)
(4)
(5)
(6)
caption
element
colgroup
element
tbody
element
(2)
tr
element
(2)
td
and th
elements
form
element
fieldset
element
legend
element
label
element
(2)
input
element
(2)
button
element
select
element
(2)
datalist
element
optgroup
element
option
element
textarea
element
keygen
element
output
element
progress
element
meter
element
details
element
summary
element
command
element
(2)
menu
element
embed
element
fieldset
element
htmlFor
for
content attribute.
label
element
(2)
htmlFor
for
content attribute.
output
element
(2)
form
element
fieldset
element
(2)
object
element
form
element
fieldset
element
legend
element
label
element
input
element
button
element
select
element
option
element
textarea
element
keygen
element
output
element
head
element
h1
, h2
, h3
, h4
, h5
, and h6
elements
hr
element
html
element
iframe
element
img
element
(2)
(3)
input
element
keygen
element
label
element
legend
element
li
element
link
element
(2)
map
element
video
element
audio
element
meta
element
meter
element
ins
element
del
element
ins
and del
elements
(2)
object
element
ol
element
select
element
optgroup
element
select
element
(2)
option
element
select
element
(2)
output
element
p
element
param
element
pre
element
progress
element
blockquote
element
(2)
q
element
script
element
select
element
source
element
span
element
style
element
(2)
td
element
th
element
td
and th
elements
(2)
colgroup
element
col
element
td
element
table
element
th
element
tr
element
table
element
(2)
tbody
element
(2)
thead
element
tfoot
element
textarea
element
time
element
title
element
track
element
ul
element
video
element
http-equiv
meta
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
httpEquiv
meta
element
(2)
nofollow
"
noreferrer
"
base
element
(2)
link
element
(2)
a
element
area
element
a
and area
elements
alternate
"
(2)
author
"
bookmark
"
help
"
license
"
nofollow
"
noreferrer
"
search
"
tag
"
next
"
prev
"
i
em
element
i
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
b
element
u
element
icon
command
element
(2)
(3)
(4)
icon
label
, ..., disabled
, checked
, and radiogroup
IDL attributes must reflect the respective content
attributes of the same name.
command
element
(2)
id
id
attribute
(2)
map
element
iframe
iframe
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
(12)
(13)
(14)
(15)
(16)
(17)
(18)
(19)
(20)
(21)
(22)
(23)
(24)
(25)
(26)
(27)
(28)
(29)
(30)
(31)
image
input
element
img
element
object
element
map
element
area
element
(2)
(3)
Image()
img
element
(2)
(3)
Image(width)
img
element
(2)
Image(width, height)
img
element
(2)
img
img
element
(2)
(3)
(4)
(5)
(6)
(7)
map
element
form
element
type=image
)
text/html
Document
command
element
indeterminate
input
element
(2)
type=checkbox
)
(2)
(3)
(4)
script
element
script
elements
input
title
attribute
dir
attribute
form
element
(2)
input
element
(2)
(3)
(4)
(5)
(6)
type=hidden
)
type=text
) state and Search state (type=search
)
(2)
type=tel
)
(2)
type=url
)
(2)
type=email
)
(2)
(3)
type=password
)
(2)
type=datetime
)
(2)
(3)
type=date
)
(2)
type=month
)
(2)
type=week
)
(2)
type=time
)
(2)
type=datetime-local
)
(2)
(3)
type=number
)
(2)
type=range
)
(2)
type=color
)
(2)
type=checkbox
)
(2)
type=radio
)
(2)
(3)
(4)
(5)
(6)
(7)
type=file
)
(2)
(3)
type=submit
)
(2)
type=image
)
(2)
(3)
type=reset
)
type=button
)
input
element attributes
list
attribute
maxlength
attribute
pattern
attribute
input
element APIs
datalist
element
(2)
ins
style
element
ins
element
(2)
(3)
(4)
ins
and del
elements
(2)
style
element
(2)
a
element
(2)
img
element
iframe
element
embed
element
object
element
video
element
audio
element
label
element
input
element
button
element
(2)
select
element
textarea
element
keygen
element
details
element
menu
element
isindex
ismap
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.
img
element
(2)
(3)
(4)
isMap
...
content attribute.
img
element
(2)
kbd
pre
element
(2)
samp
element
(2)
kbd
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
keygen
keygen
element
(2)
(3)
keytype
keygen
element
(2)
keytype
keygen
element
(2)
keywords
kind
track
element
(2)
(3)
(4)
(5)
(6)
kind
src
, srclang
, label
, and default
IDL attributes
must reflect the respective content attributes of the
same name. The ...
IDL attribute must reflect the content attribute of the
same name, limited to only known values.
track
element
(2)
label
track
element
(2)
(3)
(4)
label
src
, srclang
, ..., 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.
track
element
(2)
label
label
element
(2)
(3)
(4)
(5)
(6)
(7)
placeholder
attribute
textarea
element
label
disabled
and ... attributes must
reflect the respective content attributes of the same
name.
optgroup
element
(2)
label
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.
option
element
(2)
(3)
option
element is the value of the ...
content attribute, if there
is one, or, if there is not, the value of the element's text
IDL attribute.
datalist
element
option
element
label
label
attribute must be
specified and must have a value that is not the empty string.
command
element
(2)
(3)
(4)
(5)
label
icon
, disabled
, checked
, and radiogroup
IDL attributes must reflect the respective content
attributes of the same name.
command
element
(2)
label
element
(2)
input
element
button
element
select
element
textarea
element
keygen
element
output
element
progress
element
meter
element
lang
lang
and xml:lang
attributes
(2)
(3)
(4)
(5)
(6)
div
element
i
element
span
element
lang
lang
and xml:lang
attributes
(2)
(3)
(4)
(5)
(6)
i
element
lang
...
content attribute in no namespace.
lang
and xml:lang
attributes
object
element
(2)
legend
fieldset
element
(2)
(3)
legend
element
(2)
(3)
li
ol
element
(2)
(3)
ul
element
(2)
(3)
li
element
(2)
(3)
(4)
(5)
(6)
(7)
menu
element
(2)
(3)
link
title
attribute
link
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
(12)
(13)
(14)
(15)
(16)
meta
element
style
element
noscript
element
(2)
(3)
alternate
"
(2)
author
"
(2)
help
"
(2)
icon
"
license
"
prefetch
"
search
"
(2)
stylesheet
"
(2)
(3)
next
"
prev
"
External
interface
link
body
elements
link
body
element must reflect
the element's ...
content
attribute.
link
element
(2)
(3)
icon
"
prefetch
"
stylesheet
"
list
input
element
(2)
(3)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=datetime
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
(2)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
type=image
)
type=reset
)
type=button
)
list
attribute
(2)
input
element APIs
datalist
element
type
attribute
is an enumerated attribute indicating the kind of menu
being declared. The attribute has three states. The context
keyword maps to the
context menu state, in which
the element is declaring a context menu. The toolbar
keyword maps to the
toolbar state, in which the
element is declaring a toolbar. The attribute may also be
omitted. The missing value default is the ... state, which indicates that the element is merely
a list of commands that is neither declaring a context menu nor
defining a toolbar.
menu
element
(2)
(3)
object
element
fieldset
element
input
element
(2)
button
element
select
element
textarea
element
keygen
element
output
element
listing
loadeddata
Document
objects, and Window
objects
loadeddata
loadedmetadata
Document
objects, and Window
objects
loadedmetadata
loadstart
Document
objects, and Window
objects
type=datetime-local
)
input
element
(2)
type=datetime
)
type=datetime-local
)
(2)
Window
object
Location
interface
(2)
(3)
(4)
(5)
(6)
longdesc
iframe
elements
longdesc
img
elements
longDesc
frame
element must
reflect the element's longdesc
content attribute, which
for the purposes of reflection is defined as containing a
URL.
longDesc
iframe
element must
reflect the element's ...
content attribute,
which for the purposes of reflection is defined as containing a
URL.
longDesc
img
element must reflect
the element's ...
content attribute, which for the purposes of reflection is defined
as containing a URL.
loop
video
element
(2)
audio
element
(2)
loop
ol
element
ol
element
lowsrc
ltr
dir
attribute
dir
attribute
(2)
dir
attribute
(2)
(3)
(4)
(5)
bdo
element
map
map
element
(2)
(3)
(4)
(5)
area
element
marginbottom
marginheight
body
elements
marginheight
iframe
elements
marginHeight
frame
element must
reflect the element's marginheight
content
attribute.
marginHeight
iframe
element must
reflect the element's ...
content
attribute.
marginleft
marginright
margintop
marginwidth
body
elements
marginwidth
iframe
elements
marginWidth
frame
element must
reflect the element's marginwidth
content
attribute.
marginWidth
iframe
element must
reflect the element's ...
content
attribute.
mark
b
element
u
element
mark
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
command
element
(2)
math
max
accept
, alt
, ..., 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.
input
element
(2)
max
min
and ... attributes indicate
the allowed range of values for the element.
input
element
(2)
(3)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=datetime
)
(2)
type=date
)
(2)
type=month
)
(2)
type=week
)
(2)
type=time
)
(2)
type=datetime-local
)
(2)
type=number
)
(2)
type=range
)
(2)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
type=image
)
type=reset
)
type=button
)
min
and max
attributes
(2)
(3)
max
value
attribute
specifies how much of the task has been completed, and the ... attribute specifies
how much work the task requires in total. The units are arbitrary
and not specified.
progress
element
(2)
(3)
(4)
(5)
(6)
(7)
max
max
is
1.0.
progress
element
(2)
(3)
max
min
attribute
specifies the lower bound of the range, and the ... attribute specifies
the upper bound. The value
attribute
specifies the value to have the gauge indicate as the "measured"
value.
meter
element
(2)
(3)
(4)
maxlength
attribute
(2)
textarea
element
(2)
maxLength
autocomplete
and
type
IDL attributes
must reflect the respective content attributes of the
same name, limited to only known values. The ... IDL
attribute must reflect the maxlength
content attribute,
limited to only non-negative numbers.
input
element
(2)
maxlength
maxlength
attribute.
input
element
(2)
(3)
(4)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=datetime
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
type=image
)
type=reset
)
type=button
)
maxlength
attribute
(2)
maxlength
maxlength
attribute controlled by the
textarea
element's dirty value flag.
textarea
element
(2)
(3)
(4)
maxLength
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
... IDL
attribute must reflect the ...
content attribute,
limited to only non-negative numbers. The readOnly
IDL
attribute must reflect the readonly
content
attribute.
textarea
element
(2)
media
link
element
(2)
(3)
(4)
media
href
, rel
, ..., hreflang
, type
, and sizes
each must
reflect the respective content attributes of the same
name.
link
element
(2)
media
style
element
(2)
(3)
media
type
and scoped
IDL attributes
must reflect the respective content attributes of the
same name.
style
element
(2)
media
href
,
target
, rel
, ..., hreflang
, and type
, must
reflect the respective content attributes of the same
name.
a
element
(2)
media
source
element
(2)
media
src
, type
, and ... must
reflect the respective content attributes of the same
name.
source
element
(2)
media
alt
, coords
, href
, target
,
rel
, ..., hreflang
, and type
, each must
reflect the respective content attributes of the same
name.
area
element
(2)
media
media
attribute is omitted, is
"all
".
a
element
(2)
area
element
(2)
a
and area
elements
(2)
alternate
"
(2)
(3)
video
element
audio
element
video
element
audio
element
video
element
(2)
(3)
audio
element
(2)
(3)
source
element
(2)
(3)
track
element
(2)
(3)
source
element
(2)
(3)
(4)
(5)
(6)
(7)
track
element
(2)
(3)
MEDIA_ERR_ABORTED
MEDIA_ERR_DECODE
MEDIA_ERR_NETWORK
MEDIA_ERR_SRC_NOT_SUPPORTED
video
element
mediagroup
MediaController
. The value is text; media elements with the same value are automatically
linked by the user agent.
video
element
(2)
(3)
audio
element
(2)
mediaGroup
...
content
attribute.
meta
meta
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
noscript
element
(2)
(3)
metadata
track
element
track
element
(2)
metadata
head
element
(2)
title
element
base
element
link
element
(2)
meta
element
(2)
style
element
(2)
script
element
(2)
noscript
element
command
element
(2)
meter
progress
element
meter
element
(2)
(3)
(4)
(5)
(6)
(7)
method
formmethod
content attributes are enumerated
attributes with the following keywords and states:
form
element
(2)
formmethod
attribute, then the
element's method is that
attribute's state; otherwise, it is the form owner's
...
attribute's state.
method
action
IDL
attribute must reflect the content attribute of the
same name, except that on getting, when the content attribute is
missing or its value is the empty string, the document's
address must be returned instead. The target
IDL attribute must
reflect the content attribute of the same name. The
... and enctype
IDL attributes
must reflect the respective content attributes of the
same name, limited to only known values. The encoding
IDL attribute
must reflect the enctype
content attribute,
limited to only known values. The noValidate
IDL
attribute must reflect the novalidate
content attribute. The
formAction
IDL
attribute must reflect the formaction
content attribute,
except that on getting, when the content attribute is missing or its
value is the empty string, the document's address must
be returned instead. The formEnctype
IDL
attribute must reflect the formenctype
content attribute,
limited to only known values. The formMethod
IDL
attribute must reflect the formmethod
content attribute,
limited to only known values. The formNoValidate
IDL
attribute must reflect the formnovalidate
content
attribute. The formTarget
IDL
attribute must reflect the formtarget
content attribute.
form
element
methods
a
elements
methods
link
elements
link
element
embed
element
input
element
a
and area
elements
min
accept
, alt
, max
, ..., 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.
input
element
(2)
min
max
attributes indicate
the allowed range of values for the element.
input
element
(2)
(3)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=datetime
)
(2)
type=date
)
(2)
type=month
)
(2)
type=week
)
(2)
type=time
)
(2)
type=datetime-local
)
(2)
type=number
)
(2)
(3)
type=range
)
(2)
(3)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
type=image
)
type=reset
)
type=button
)
min
and max
attributes
(2)
(3)
min
max
attribute specifies
the upper bound. The value
attribute
specifies the value to have the gauge indicate as the "measured"
value.
meter
element
(2)
(3)
(4)
type=month
)
month
input
element
multicol
multipart/form-data
multipart/x-mixed-replace
multipart/x-mixed-replace
(2)
(3)
(4)
multiple
accept
, alt
, max
, min
, ..., 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.
input
element
(2)
multiple
input
element
(2)
(3)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
(2)
(3)
(4)
type=password
)
type=datetime
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
type=image
)
type=reset
)
type=button
)
multiple
attribute
(2)
pattern
attribute
multiple
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.
select
element
(2)
(3)
(4)
(5)
option
element
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.
select
element
(2)
muted
video
element
(2)
audio
element
(2)
name
meta
element has a ... 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.
meta
element
(2)
(3)
(4)
(5)
(6)
(7)
name
content
IDL attributes
must reflect the respective content attributes of the
same name. The IDL attribute httpEquiv
must
reflect the content attribute http-equiv
.
meta
element
(2)
name
iframe
element
(2)
name
src
, srcdoc
, ..., sandbox
, and seamless
must
reflect the respective content attributes of the same
name.
iframe
element
(2)
name
object
element
(2)
name
data
, type
and ... 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.
object
element
(2)
name
value
must both
reflect the respective content attributes of the same
name.
param
element
(2)
name
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.
map
element
(2)
(3)
(4)
name
map
element
(2)
name
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.
form
element
(2)
name
form
element
(2)
name
form
element's elements
object. If the attribute
is specified, its value must not be the empty string.
form
element
(2)
fieldset
element
(2)
input
element
(2)
type=hidden
)
type=radio
)
(2)
(3)
(4)
button
element
(2)
select
element
(2)
textarea
element
(2)
keygen
element
(2)
output
element
(2)
name
...
content attribute.
fieldset
element
input
element
button
element
select
element
textarea
element
keygen
element
output
element
name
a
elements (except as noted in the previous section)
name
embed
elements
embed
element
name
img
elements
name
option
elements
select
element
name
align
, alt
, archive
, code
, height
, hspace
, ..., object
, vspace
, and width
IDL attributes
must reflect the respective content attributes of the
same name. For the purposes of reflection, the applet
element's object
content
attribute is defined as containing a URL.
name
scrolling
, and src
IDL attributes of the
frame
element must reflect the respective
content attributes of the same name.
name
coords
, charset
, ..., rev
, and shape
IDL attributes of the
a
element must reflect the respective
content attributes of the same name.
name
align
IDL attributes of
the embed
element must reflect the
respective content attributes of the same name.
name
align
, border
, hspace
, and vspace
IDL attributes of
the img
element must reflect the
respective content attributes of the same name.
iframe
element
(2)
(3)
(4)
(5)
(6)
(7)
object
element
(2)
(3)
(4)
NETWORK_EMPTY
NETWORK_LOADING
NETWORK_NO_SOURCE
nextid
translate
attribute
(2)
(3)
noembed
noframes
nohref
area
elements
noHref
area
element must reflect
the element's ...
content
attribute.
noResize
noscript
link
element
meta
element
style
element
noscript
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
(12)
(13)
(14)
(15)
(16)
(17)
(18)
(19)
(20)
(21)
(22)
(23)
(24)
(25)
(26)
(27)
(28)
(29)
(30)
(31)
(32)
(33)
noshade
hr
elements
noShade
hr
element must reflect
the element's ...
content
attribute.
noupdate
novalidate
formnovalidate
content attributes are boolean
attributes. If present, they indicate that the form is not to
be validated during submission.
form
element
(2)
noValidate
action
IDL
attribute must reflect the content attribute of the
same name, except that on getting, when the content attribute is
missing or its value is the empty string, the document's
address must be returned instead. The target
IDL attribute must
reflect the content attribute of the same name. The
method
and enctype
IDL attributes
must reflect the respective content attributes of the
same name, limited to only known values. The encoding
IDL attribute
must reflect the enctype
content attribute,
limited to only known values. The ... IDL
attribute must reflect the ...
content attribute. The
formAction
IDL
attribute must reflect the formaction
content attribute,
except that on getting, when the content attribute is missing or its
value is the empty string, the document's address must
be returned instead. The formEnctype
IDL
attribute must reflect the formenctype
content attribute,
limited to only known values. The formMethod
IDL
attribute must reflect the formmethod
content attribute,
limited to only known values. The formNoValidate
IDL
attribute must reflect the formnovalidate
content
attribute. The formTarget
IDL
attribute must reflect the formtarget
content attribute.
form
element
nowrap
td
and th
elements
noWrap
td
and th
elements must
reflect the elements' ...
content attributes.
number
input
element
input
element
(2)
type=datetime
)
type=number
)
type=range
)
object
embed
element
object
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
param
element
(2)
map
element
object
align
, alt
, archive
, code
, height
, hspace
, name
, ..., vspace
, and width
IDL attributes
must reflect the respective content attributes of the
same name. For the purposes of reflection, the applet
element's object
content
attribute is defined as containing a URL.
obsolete
OBSOLETE
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 ...
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.
form
element
(2)
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 ...
state. The attribute may also be omitted. The missing value
default is the default
state.
autocomplete
attribute
(2)
ol
p
element
ol
element
(2)
(3)
(4)
ul
element
(2)
li
element
(2)
(3)
(4)
(5)
autocomplete
attribute is an enumerated attribute. The attribute has
two states. The on
keyword maps to the ... 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.
form
element
(2)
(3)
autocomplete
attribute
autocomplete
attribute is an enumerated attribute. The attribute has
three states. The on
keyword maps to the ... state, and the
off
keyword maps to
the off
state. The attribute may also be omitted. The missing value
default is the default
state.
autocomplete
attribute
(2)
onabort
Document
objects, and Window
objects
onafterprint
body
element
Document
objects, and Window
objects
onbeforeprint
body
element
Document
objects, and Window
objects
onbeforeunload
body
element
Document
objects, and Window
objects
onblur
Document
objects, and Window
objects
onblur
body
element
(2)
Document
objects, and Window
objects
oncanplay
Document
objects, and Window
objects
oncanplaythrough
Document
objects, and Window
objects
onchange
Document
objects, and Window
objects
onclick
Document
objects, and Window
objects
oncuechange
Document
objects, and Window
objects
ondblclick
Document
objects, and Window
objects
ondrag
Document
objects, and Window
objects
ondragend
Document
objects, and Window
objects
ondragenter
Document
objects, and Window
objects
ondragleave
Document
objects, and Window
objects
ondragover
Document
objects, and Window
objects
ondragstart
Document
objects, and Window
objects
ondrop
Document
objects, and Window
objects
ondurationchange
Document
objects, and Window
objects
onemptied
Document
objects, and Window
objects
onended
Document
objects, and Window
objects
onerror
body
element
Document
objects, and Window
objects
onerror
body
element
(2)
(3)
Document
objects, and Window
objects
(2)
onfocus
Document
objects, and Window
objects
onfocus
body
element
(2)
Document
objects, and Window
objects
onhashchange
body
element
Document
objects, and Window
objects
oninput
Document
objects, and Window
objects
oninvalid
Document
objects, and Window
objects
onkeydown
Document
objects, and Window
objects
onkeypress
Document
objects, and Window
objects
onkeyup
Document
objects, and Window
objects
onload
Document
objects, and Window
objects
onload
body
element
(2)
Document
objects, and Window
objects
onloadeddata
Document
objects, and Window
objects
onloadedmetadata
Document
objects, and Window
objects
onloadstart
Document
objects, and Window
objects
onmessage
body
element
Document
objects, and Window
objects
onmousedown
Document
objects, and Window
objects
onmousemove
Document
objects, and Window
objects
onmouseout
Document
objects, and Window
objects
onmouseover
Document
objects, and Window
objects
onmouseup
Document
objects, and Window
objects
onmousewheel
Document
objects, and Window
objects
onoffline
body
element
Document
objects, and Window
objects
ononline
body
element
Document
objects, and Window
objects
onpagehide
body
element
Document
objects, and Window
objects
onpageshow
body
element
Document
objects, and Window
objects
onpause
Document
objects, and Window
objects
onplay
Document
objects, and Window
objects
onplaying
Document
objects, and Window
objects
onpopstate
body
element
Document
objects, and Window
objects
onprogress
Document
objects, and Window
objects
onratechange
Document
objects, and Window
objects
onreadystatechange
Document
objects, and Window
objects
onreset
Document
objects, and Window
objects
onresize
body
element
Document
objects, and Window
objects
onscroll
Document
objects, and Window
objects
onscroll
body
element
(2)
Document
objects, and Window
objects
onseeked
Document
objects, and Window
objects
onseeking
Document
objects, and Window
objects
onselect
Document
objects, and Window
objects
onshow
Document
objects, and Window
objects
onstalled
Document
objects, and Window
objects
onstorage
body
element
Document
objects, and Window
objects
onsubmit
Document
objects, and Window
objects
onsuspend
Document
objects, and Window
objects
ontimeupdate
Document
objects, and Window
objects
onunload
body
element
Document
objects, and Window
objects
onvolumechange
Document
objects, and Window
objects
onwaiting
Document
objects, and Window
objects
open
details
element
(2)
(3)
(4)
open
...
content attribute.
details
element
(2)
open()
document.write()
document.writeln()
optgroup
select
element
(2)
(3)
optgroup
element
(2)
(3)
option
element
(2)
optimum
meter
element
(2)
(3)
(4)
(5)
option
list
attribute
(2)
select
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
datalist
element
(2)
(3)
(4)
optgroup
element
(2)
(3)
(4)
(5)
option
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
form
element
accesskey
attribute
ol
element
li
element
(2)
section
element
hgroup
element
header
element
hr
element
output
output
element
(2)
(3)
(4)
p
dir
attribute
address
element
p
element
(2)
(3)
(4)
(5)
blockquote
element
pagehide
Document
objects, and Window
objects
pageshow
Document
objects, and Window
objects
section
element
nav
element
article
element
aside
element
h1
, h2
, h3
, h4
, h5
, and h6
elements
hgroup
element
header
element
footer
element
address
element
p
element
pre
element
blockquote
element
ol
element
ul
element
dl
element
figure
element
div
element
a
element
em
element
strong
element
small
element
s
element
cite
element
q
element
dfn
element
abbr
element
time
element
code
element
var
element
samp
element
kbd
element
sub
and sup
elements
i
element
b
element
u
element
mark
element
ruby
element
bdi
element
bdo
element
span
element
ins
element
img
element
iframe
element
embed
element
object
element
video
element
audio
element
canvas
element
map
element
table
element
form
element
fieldset
element
label
element
input
element
button
element
select
element
textarea
element
keygen
element
output
element
progress
element
meter
element
details
element
menu
element
p
element
(2)
(3)
hr
element
dfn
element
br
element
ins
element
(2)
del
element
param
object
element
param
element
(2)
(3)
password
input
element
pathname
a
element also supports the complement of
URL decomposition IDL attributes, protocol
, host
, port
, hostname
, ..., 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.
a
element
(2)
pathname
area
element also supports the complement of
URL decomposition IDL attributes, protocol
, host
, port
, hostname
, ..., 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.
area
element
(2)
pathname
Location
interface also has the complement of
URL decomposition IDL attributes, protocol
, host
, port
, hostname
, ..., search
, and hash
.
Location
interface
(2)
pattern
accept
, alt
, max
, min
, multiple
, ..., 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.
input
element
(2)
pattern
multiple
attribute applies and is
set, the control's values, are to be
checked.
input
element
(2)
(3)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
(2)
type=url
)
type=email
)
type=password
)
type=datetime
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
type=image
)
type=reset
)
type=button
)
pattern
attribute
(2)
(3)
(4)
pause
Document
objects, and Window
objects
pause
script
element
(2)
noscript
element
(2)
h1
, h2
, h3
, h4
, h5
, and h6
elements
p
element
pre
element
a
element
(2)
(3)
(4)
em
element
(2)
(3)
strong
element
(2)
(3)
small
element
(2)
(3)
s
element
(2)
(3)
cite
element
(2)
(3)
q
element
(2)
(3)
(4)
dfn
element
(2)
(3)
abbr
element
(2)
(3)
time
element
(2)
(3)
code
element
(2)
(3)
var
element
(2)
(3)
samp
element
(2)
(3)
kbd
element
(2)
(3)
sub
and sup
elements
(2)
(3)
i
element
(2)
(3)
b
element
(2)
(3)
u
element
(2)
(3)
mark
element
(2)
(3)
ruby
element
(2)
(3)
rt
element
rp
element
bdi
element
(2)
(3)
bdo
element
(2)
(3)
span
element
(2)
(3)
br
element
(2)
wbr
element
(2)
ins
element
(2)
(3)
(4)
(5)
del
element
(2)
(3)
(4)
img
element
iframe
element
(2)
embed
element
object
element
video
element
audio
element
canvas
element
map
element
(2)
(3)
(4)
area
element
(2)
legend
element
label
element
(2)
(3)
input
element
(2)
button
element
(2)
(3)
select
element
(2)
datalist
element
(2)
(3)
textarea
element
(2)
keygen
element
(2)
output
element
(2)
(3)
progress
element
(2)
(3)
meter
element
(2)
(3)
summary
element
command
element
(2)
placeholder
accept
, alt
, max
, min
, multiple
, pattern
, ..., 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.
input
element
(2)
placeholder
input
element
(2)
(3)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=datetime
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
type=image
)
type=reset
)
type=button
)
placeholder
attribute
(2)
(3)
(4)
placeholder
textarea
element
(2)
(3)
placeholder
cols
, ...,
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.
textarea
element
(2)
select
element
(2)
option
element
(2)
plaintext
play
Document
objects, and Window
objects
playing
Document
objects, and Window
objects
playing
embed
element
(2)
object
element
(2)
area
element
(2)
popstate
Document
objects, and Window
objects
port
a
element also supports the complement of
URL decomposition IDL attributes, protocol
, host
, ..., 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.
a
element
(2)
port
area
element also supports the complement of
URL decomposition IDL attributes, protocol
, host
, ..., 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.
area
element
(2)
port
Location
interface also has the complement of
URL decomposition IDL attributes, protocol
, host
, ..., hostname
, pathname
, search
, and hash
.
Location
interface
(2)
post
poster
video
element
(2)
(3)
(4)
poster
...
content attribute.
video
element
(2)
pre
dir
attribute
pre
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
code
element
(2)
samp
element
script
element
form
element
text/html
preload
video
element
(2)
audio
element
(2)
preload
profile
progress
Document
objects, and Window
objects
progress
progress
element
(2)
(3)
(4)
(5)
meter
element
progress
protocol
a
element also supports the complement of
URL decomposition IDL attributes, ..., 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.
a
element
(2)
protocol
area
element also supports the complement of
URL decomposition IDL attributes, ..., 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.
area
element
(2)
protocol
Location
interface also has the complement of
URL decomposition IDL attributes, ..., host
, port
, hostname
, pathname
, search
, and hash
.
Location
interface
(2)
q
blockquote
element
cite
element
q
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
(12)
queryCommandEnabled()
queryCommandIndeterm()
queryCommandState()
queryCommandSupported()
queryCommandValue()
radio
input
element
radio
command
"
keyword maps to the Command state, the
"checkbox
"
keyword maps to the Checkbox state, and
the "..."
keyword maps to the Radio state. The
missing value default is the Command state.
command
element
command
element
(2)
(3)
(4)
radiogroup
type
attribute has the value "radio
". The scope of the name is the child list of
the parent element. The attribute must be omitted unless the type
attribute is in the Radio state.
command
element
(2)
(3)
(4)
radiogroup
label
, icon
, disabled
, checked
, and ...
IDL attributes must reflect the respective content
attributes of the same name.
command
element
(2)
range
input
element
h1
, h2
, h3
, h4
, h5
, and h6
elements
hgroup
element
(2)
(3)
ratechange
Document
objects, and Window
objects
ratechange
readOnly
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 ... 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.
input
element
(2)
readonly
input
element
(2)
(3)
(4)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=datetime
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
type=image
)
type=reset
)
type=button
)
readonly
attribute
(2)
readonly
textarea
element
(2)
(3)
readOnly
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 ... IDL
attribute must reflect the ...
content
attribute.
textarea
element
(2)
area
element
(2)
(3)
title
attribute
lang
and xml:lang
attributes
dir
attribute
(2)
class
attribute
base
element
link
element
(2)
meta
element
(2)
style
element
script
element
(2)
blockquote
element
ol
element
li
element
a
element
(2)
time
element
ins
and del
elements
(2)
img
element
(2)
(3)
(4)
(5)
iframe
element
embed
element
object
element
(2)
(3)
param
element
video
element
source
element
track
element
(2)
canvas
element
map
element
area
element
(2)
(3)
table
element
colgroup
element
col
element
th
element
td
and th
elements
(2)
(3)
form
element
(2)
(3)
fieldset
element
label
element
input
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
button
element
(2)
select
element
optgroup
element
option
element
(2)
textarea
element
(2)
(3)
(4)
keygen
element
(2)
output
element
progress
element
details
element
command
element
(2)
menu
element
hidden
attribute
tabindex
attribute
accesskey
attribute
dropzone
attribute
rel
link
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
alternate
"
rel
href
, ..., media
, hreflang
, type
, and sizes
each must
reflect the respective content attributes of the same
name.
link
element
(2)
rel
href
,
target
, ..., media
, hreflang
, and type
, must
reflect the respective content attributes of the same
name.
a
element
(2)
rel
alt
, coords
, href
, target
,
..., media
, hreflang
, and type
, each must
reflect the respective content attributes of the same
name.
area
element
(2)
rel
a
and area
elements controls
what kinds of links the elements create. The attribue's value must
be a set of space-separated tokens. The allowed keywords and their meanings are
defined below.
link
element
a
element
(2)
(3)
area
element
(2)
(3)
a
and area
elements
(2)
relList
rel
content attribute.
link
element
(2)
relList
rel
content attribute.
a
element
(2)
relList
rel
content attribute.
area
element
(2)
required
accept
, alt
, max
, min
, multiple
, pattern
, placeholder
, ..., 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.
input
element
(2)
required
input
element
(2)
(3)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=datetime
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
type=image
)
type=reset
)
type=button
)
required
attribute
(2)
required
attribute
required
select
element
(2)
(3)
(4)
required
multiple
,
..., and
size
IDL attributes
must reflect the respective content attributes of the
same name. The size
IDL
attribute has a default value of zero.
select
element
(2)
required
textarea
element
(2)
required
cols
, placeholder
,
..., 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.
textarea
element
(2)
reset
input
element
input
element
(2)
select
element
textarea
element
keygen
element
output
element
script
elements
script
element
(2)
script
elements
rev
a
elements
rev
link
elements
rev
coords
, charset
, name
, ..., and shape
IDL attributes of the
a
element must reflect the respective
content attributes of the same name.
rev
charset
,
..., and target
IDL attributes of
the link
element must reflect the
respective content attributes of the same name.
reversed
ol
element
(2)
li
element
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.
ol
element
(2)
translate
attribute
dir
attribute
alternate
"
Document
object
rowgroup
th
element
(2)
(3)
rows
rows
attribute is specified, its
value must be a valid non-negative integer greater than
zero.
textarea
element
(2)
(3)
rows
cols
, placeholder
,
required
, ..., 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.
textarea
element
(2)
(3)
(4)
rows
cols
and
... IDL
attributes of the frameset
element must
reflect the respective content attributes of the same
name.
rowspan
td
and th
elements may also have a
... content
attribute specified, whose value must be a valid non-negative
integer.
td
element
th
element
td
and th
elements
(2)
rowSpan
...
content attribute. Its
default value, which must be used if parsing the attribute as a non-negative
integer returns an error, is 1.
td
and th
elements
(2)
rp
ruby
element
(2)
(3)
rt
element
rp
element
(2)
(3)
(4)
rt
ruby
element
(2)
(3)
(4)
rt
element
(2)
(3)
rp
element
rtl
dir
attribute
dir
attribute
(2)
dir
attribute
(2)
(3)
(4)
bdo
element
ruby
u
element
ruby
element
(2)
(3)
rt
element
(2)
rp
element
rules
table
elements
rules
align
, frame
, summary
, ..., and width
, IDL attributes of
the table
element must reflect the
respective content attributes of the same name.
s
s
element
(2)
(3)
samp
pre
element
(2)
samp
element
(2)
(3)
(4)
kbd
element
(2)
(3)
sandbox
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).
iframe
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
sandbox
src
, srcdoc
, name
, ..., and seamless
must
reflect the respective content attributes of the same
name.
iframe
element
(2)
scheme
meta
elements
scheme
meta
element must reflect
the content attribute of the same name.
scope
th
element may have a ... content attribute
specified. The scope
attribute is
an enumerated attribute with five states, four of which
have explicit keywords:
th
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
scope
th
element
(2)
scope
td
elements
scoped
style
element's parent element, as opposed to
the whole Document
.
style
element
(2)
(3)
(4)
(5)
(6)
(7)
scoped
media
, type
and ... IDL attributes
must reflect the respective content attributes of the
same name.
style
element
(2)
script
dir
attribute
meta
element
script
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
script
elements
(2)
noscript
element
(2)
iframe
element
scrollAmount
scrollDelay
scrolling
iframe
elements
scrolling
name
, ..., and src
IDL attributes of the
frame
element must reflect the respective
content attributes of the same name.
scrolling
align
and
... IDL
attributes of the iframe
element must
reflect the respective content attributes of the same
name.
seamless
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).
iframe
element
(2)
(3)
seamless
src
, srcdoc
, name
, sandbox
, and ... must
reflect the respective content attributes of the same
name.
iframe
element
(2)
search
a
element also supports the complement of
URL decomposition IDL attributes, protocol
, host
, port
, hostname
, pathname
, ..., 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.
a
element
(2)
search
area
element also supports the complement of
URL decomposition IDL attributes, protocol
, host
, port
, hostname
, pathname
, ..., 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.
area
element
(2)
search
input
element
dir
attribute
(2)
input
element
(2)
(3)
(4)
(5)
type=text
) state and Search state (type=search
)
(2)
(3)
(4)
search
Location
interface also has the complement of
URL decomposition IDL attributes, protocol
, host
, port
, hostname
, pathname
, ..., and hash
.
Location
interface
(2)
section
section
element
(2)
(3)
(4)
(5)
(6)
hr
element
div
element
...
elements, though some may
correspond to such elements — they are merely conceptual
sections.)
section
element
nav
element
article
element
aside
element
header
element
footer
element
(2)
(3)
address
element
dt
element
dfn
element
th
element
body
element
footer
element
(2)
blockquote
element
figure
element
td
element
fieldset
element
details
element
seeked
Document
objects, and Window
objects
seeking
Document
objects, and Window
objects
select
type=datetime
)
list
attribute
select
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
(12)
(13)
(14)
(15)
(16)
(17)
optgroup
element
(2)
option
element
(2)
(3)
(4)
(5)
(6)
(7)
selected
list
attribute
option
element
(2)
(3)
(4)
(5)
History
interface
(2)
(3)
(4)
(5)
History
interface
type=email
)
type=file
)
class
attribute
link
element
a
and area
elements
shape
area
element
(2)
(3)
(4)
(5)
shape
...
content attribute.
area
element
(2)
shape
a
elements
shape
coords
, charset
, name
, rev
, and ... IDL attributes of the
a
element must reflect the respective
content attributes of the same name.
type=color
)
size
accept
, alt
, max
, min
, multiple
, pattern
, placeholder
, required
, ..., 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.
input
element
(2)
size
input
element
(2)
(3)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=datetime
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
type=image
)
type=reset
)
type=button
)
size
attribute
(2)
(3)
size
size
attribute, if specified, must
have a value that is a valid non-negative integer
greater than zero.
select
element
(2)
(3)
size
multiple
,
required
, and
... IDL attributes
must reflect the respective content attributes of the
same name. The size
IDL
attribute has a default value of zero.
select
element
(2)
(3)
size
hr
elements
size
color
,
face
, and ... IDL attributes of
the basefont
element must reflect the
respective content attributes of the same name.
size
color
,
face
, and ... IDL attributes of
the font
element must reflect the
respective content attributes of the same name.
size
align
, color
, ..., and width
IDL attributes of the
hr
element must reflect the respective
content attributes of the same name.
sizes
href
, rel
, media
, hreflang
, type
, and ... each must
reflect the respective content attributes of the same
name.
link
element
(2)
small
small
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
soft
wrap
attribute is an enumerated attribute with two keywords
and states: the ... 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.
textarea
element
textarea
is not to be
wrapped when it is submitted (though it can still be wrapped in the
rendering).
textarea
element
(2)
(3)
source
video
element
audio
element
source
element
(2)
(3)
(4)
(5)
id
attribute
iframe
element
(2)
(3)
map
element
spacer
span
style
attribute
cite
element
mark
element
span
element
(2)
(3)
span
colgroup
element contains no col
elements, then the element may have a ... content attribute
specified, whose value must be a valid non-negative
integer greater than zero.
colgroup
element
(2)
(3)
(4)
span
colgroup
element
(2)
span
col
element
(2)
(3)
span
col
element
(2)
src
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.
script
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
src
type
, charset
, and defer
, each must
reflect the respective content attributes of the same
name.
script
element
(2)
src
alt
attribute provides
equivalent content for those who cannot process images or who have
image loading disabled.
img
element
(2)
(3)
src
alt
and ... IDL attributes must
reflect the respective content attributes of the same
name.
img
element
(2)
src
iframe
element
(2)
(3)
(4)
(5)
src
srcdoc
, name
, sandbox
, and seamless
must
reflect the respective content attributes of the same
name.
iframe
element
(2)
src
embed
element
(2)
(3)
(4)
src
type
each must
reflect the respective content attributes of the same
name.
embed
element
(2)
src
source
element
(2)
src
type
, and media
must
reflect the respective content attributes of the same
name.
source
element
(2)
src
track
element
(2)
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.
track
element
(2)
src
video
element
(2)
(3)
(4)
audio
element
(2)
(3)
(4)
(5)
source
element
src
src
accept
, alt
, max
, min
, multiple
, pattern
, placeholder
, required
, size
, ..., 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.
input
element
(2)
src
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.
input
element
(2)
(3)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=datetime
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
type=image
)
(2)
(3)
type=reset
)
type=button
)
src
name
, scrolling
, and ... IDL attributes of the
frame
element must reflect the respective
content attributes of the same name.
srcdoc
iframe
srcdoc
document.
iframe
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
srcdoc
src
, ..., name
, sandbox
, and seamless
must
reflect the respective content attributes of the same
name.
iframe
element
(2)
srclang
kind
attribute is
in the subtitles
state. [BCP47]
track
element
(2)
(3)
srclang
src
, ..., 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.
track
element
(2)
stalled
Document
objects, and Window
objects
standby
object
elements
standby
align
, archive
, border
, code
, declare
, hspace
, ..., and vspace
IDL attributes
of the object
element must reflect the
respective content attributes of the same name.
start
ol
element
(2)
start
reversed
,
..., 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.
ol
element
(2)
(3)
startOffsetTime
History
interface
step
accept
, alt
, max
, min
, multiple
, pattern
, placeholder
, required
, size
, src
, and ... 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.
input
element
(2)
step
input
element
(2)
(3)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=datetime
)
(2)
type=date
)
(2)
type=month
)
(2)
type=week
)
(2)
type=time
)
(2)
type=datetime-local
)
(2)
type=number
)
type=range
)
(2)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
type=image
)
type=reset
)
type=button
)
step
attribute
(2)
(3)
input
element APIs
(2)
strike
strong
em
element
strong
element
(2)
(3)
(4)
(5)
small
element
(2)
b
element
(2)
mark
element
style
style
attribute
(2)
(3)
(4)
(5)
(6)
style
dir
attribute
meta
element
style
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
(12)
noscript
element
(2)
(3)
stylesheet
link
element
alternate
"
(2)
stylesheet
"
(2)
(3)
link
element
style
element
(2)
stylesheet
"
sub
sub
and sup
elements
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
submit
input
element
object
element
input
element
(2)
button
element
select
element
textarea
element
keygen
element
subtitles
track
element
track
element
(2)
(3)
(4)
subtitles
summary
details
element
(2)
summary
element
(2)
(3)
summary
table
elements
summary
align
, frame
, ..., rules
, and width
, IDL attributes of
the table
element must reflect the
respective content attributes of the same name.
sup
sub
and sup
elements
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
suspend
Document
objects, and Window
objects
svg
tabindex
tabindex
attribute
(2)
(3)
(4)
tabIndex
...
content attribute. Its default
value is 0 for elements that are focusable and −1 for
elements that are not focusable.
tabindex
attribute
table
table
element
(2)
(3)
(4)
caption
element
(2)
(3)
(4)
(5)
colgroup
element
(2)
(3)
col
element
tbody
element
(2)
(3)
(4)
thead
element
(2)
(3)
(4)
tfoot
element
(2)
(3)
(4)
(5)
(6)
tr
element
(2)
target
Document
cause navigation.
base
element
(2)
(3)
(4)
iframe
element
target
href
and ... IDL attributes
must reflect the respective content attributes of the
same name.
base
element
(2)
target
href
,
..., rel
, media
, hreflang
, and type
, must
reflect the respective content attributes of the same
name.
a
element
(2)
target
alt
, coords
, href
, ...,
rel
, media
, hreflang
, and type
, each must
reflect the respective content attributes of the same
name.
area
element
(2)
target
formtarget
content attributes, if specified, must have values that are valid browsing
context names or keywords.
form
element
(2)
formtarget
attribute, if the
element is a submit
button and has such an attribute; or the value of its
form owner's ...
attribute, if it has such an attribute; or, if the
Document
contains a base
element with a
...
attribute, then the
value of the ...
attribute
of the first such base
element; or, if there is no such
element, the empty string.
target
action
IDL
attribute must reflect the content attribute of the
same name, except that on getting, when the content attribute is
missing or its value is the empty string, the document's
address must be returned instead. The ... IDL attribute must
reflect the content attribute of the same name. The
method
and enctype
IDL attributes
must reflect the respective content attributes of the
same name, limited to only known values. The encoding
IDL attribute
must reflect the enctype
content attribute,
limited to only known values. The noValidate
IDL
attribute must reflect the novalidate
content attribute. The
formAction
IDL
attribute must reflect the formaction
content attribute,
except that on getting, when the content attribute is missing or its
value is the empty string, the document's address must
be returned instead. The formEnctype
IDL
attribute must reflect the formenctype
content attribute,
limited to only known values. The formMethod
IDL
attribute must reflect the formmethod
content attribute,
limited to only known values. The formNoValidate
IDL
attribute must reflect the formnovalidate
content
attribute. The formTarget
IDL
attribute must reflect the formtarget
content attribute.
form
element
target
a
element
(2)
area
element
(2)
a
and area
elements
target
link
elements
target
charset
,
rev
, and ... IDL attributes of
the link
element must reflect the
respective content attributes of the same name.
tbody
table
element
(2)
(3)
(4)
colgroup
element
tbody
element
(2)
(3)
thead
element
(2)
tfoot
element
(2)
(3)
tr
element
(2)
td
thead
element
tr
element
(2)
(3)
(4)
(5)
td
element
(2)
td
and th
elements
(2)
(3)
(4)
(5)
(6)
(7)
(8)
dir
attribute
input
element
(2)
type=tel
)
(2)
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).
title
element
option
element
textarea
element
dir
attribute
(2)
input
element
(2)
(3)
(4)
(5)
type=text
) state and Search state (type=search
)
(2)
(3)
(4)
text
body
elements
text
body
element must reflect
the element's ...
content
attribute.
track
element
(2)
text/cache-manifest
text/cache-manifest
(2)
text/html
iframe
element
text/html
(2)
(3)
multipart/x-mixed-replace
text/plain
textarea
dir
attribute
(2)
(3)
textarea
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
track
element
(2)
tfoot
table
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
colgroup
element
tbody
element
thead
element
tfoot
element
(2)
(3)
(4)
(5)
tr
element
th
thead
element
tr
element
(2)
(3)
th
element
(2)
(3)
(4)
(5)
td
and th
elements
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
(12)
Location
interface
body
element
footer
element
address
element
dir
attribute
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
(12)
textarea
element
DataTransferItem
interface
(2)
(3)
dropzone
attribute
(2)
DataTransferItem
interface
dropzone
attribute
(2)
head
element
html
element
dir
attribute
(2)
(3)
(4)
noscript
element
pre
element
iframe
element
(2)
text/html
stylesheet
"
title
element
thead
table
element
(2)
(3)
(4)
(5)
(6)
colgroup
element
tbody
element
(2)
thead
element
(2)
(3)
(4)
(5)
(6)
tfoot
element
(2)
tr
element
(2)
this
this
.
time
time
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
(10)
(11)
input
element
(2)
type=time
)
timeupdate
Document
objects, and Window
objects
timeupdate
title
title
attribute
(2)
(3)
(4)
(5)
(6)
(7)
(8)
link
element
style
element
(2)
div
element
dfn
element
abbr
element
(2)
(3)
(4)
(5)
img
element
pattern
attribute
(2)
(3)
(4)
placeholder
attribute
textarea
element
meter
element
(2)
command
element
stylesheet
"
title
...
content attribute.
title
attribute
title
head
element
(2)
(3)
title
element
(2)
(3)
(4)
meta
element
History
interface
(2)
title
title
attribute defines alternative style sheet sets.
link
element
(2)
(3)
(4)
(5)
style
element
title
style
elements defines alternative style sheet
sets. If the style
element has no title
attribute, then it has no
title; the ...
attribute of
ancestors does not apply to the style
element. [CSSOM]
style
element
(2)
(3)
(4)
title
dfn
element has a
... 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.
dfn
element
(2)
(3)
title
abbr
element represents an
abbreviation or acronym, optionally with its expansion. The ... 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.
dfn
element
abbr
element
(2)
menu
element
(2)
(3)
(4)
iframe
element
History
interface
tr
table
element
(2)
(3)
(4)
(5)
colgroup
element
tbody
element
(2)
(3)
(4)
(5)
(6)
thead
element
(2)
tfoot
element
(2)
(3)
tr
element
(2)
td
element
th
element
track
video
element
(2)
(3)
(4)
audio
element
(2)
(3)
source
element
track
element
(2)
(3)
(4)
(5)
translate
attribute
(2)
(3)
(4)
translate
attribute
(2)
(3)
(4)
style
element
(2)
noscript
element
(2)
a
element
ins
element
del
element
object
element
video
element
(2)
audio
element
(2)
canvas
element
map
element
dir
attribute
ol
element
select
element
(2)
command
element
trueSpeed
type
link
element
(2)
(3)
type
href
, rel
, media
, hreflang
, ..., and sizes
each must
reflect the respective content attributes of the same
name.
link
element
(2)
type
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]
style
element
(2)
(3)
(4)
type
media
, ... and scoped
IDL attributes
must reflect the respective content attributes of the
same name.
style
element
(2)
type
charset
parameter must not be
specified. The default, which is used if the attribute is absent,
is "text/javascript
".
script
element
(2)
(3)
(4)
(5)
(6)
(7)
type
src
, ..., charset
, and defer
, each must
reflect the respective content attributes of the same
name.
script
element
(2)
type
ol
element
(2)
type
reversed
,
start
, and ... IDL attributes must
reflect the respective content attributes of the same
name. The start
IDL attribute has
the same default as its content attribute.
ol
element
(2)
type
href
,
target
, rel
, media
, hreflang
, and ..., must
reflect the respective content attributes of the same
name.
a
element
(2)
type
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.
embed
element
(2)
(3)
(4)
type
src
and ... each must
reflect the respective content attributes of the same
name.
embed
element
(2)
type
object
element
(2)
(3)
(4)
(5)
type
data
, ... 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.
object
element
(2)
type
codecs
parameter, which certain MIME types define, might be necessary to
specify exactly how the resource is encoded. [RFC4281]
source
element
(2)
(3)
type
src
, ..., and media
must
reflect the respective content attributes of the same
name.
source
element
(2)
type
alt
, coords
, href
, target
,
rel
, media
, hreflang
, and ..., each must
reflect the respective content attributes of the same
name.
area
element
(2)
type
dir
attribute
input
element
(2)
(3)
(4)
(5)
(6)
(7)
type
attribute
type=datetime-local
)
type=radio
)
type
autocomplete
and
... 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.
input
element
(2)
type
command
element
(2)
type
a
element
(2)
area
element
(2)
a
and area
elements
alternate
"
(2)
(3)
(4)
type
param
elements
type
li
elements
type
ul
elements
type
li
element must reflect
the content attribute of the same name.
type
param
element must
reflect the content attribute of the same name.
type
compact
and
... IDL attributes of
the ul
element must reflect the respective
content attributes of the same name.
typemustmatch
data
attribute is only to be used if
the value of the type
attribute and the Content-Type of the aforementioned
resource match.
object
element
(2)
(3)
(4)
(5)
typeMustMatch
data
, type
and name
each must
reflect the respective content attributes of the same
name. The ...
IDL attribute must reflect the ...
content
attribute. The useMap
IDL attribute
must reflect the usemap
content attribute.
object
element
(2)
u
u
element
(2)
(3)
(4)
mark
element
ul
p
element
ol
element
(2)
ul
element
(2)
(3)
(4)
li
element
(2)
UNCACHED
iframe
element
td
and th
elements
output
element
icon
"
dropzone
attribute
updateready
UPDATEREADY
ol
element
ol
element
base
element
iframe
element
application/x-www-form-urlencoded
dir
attribute
input
element
(2)
type=tel
)
type=url
)
a
element
(2)
(3)
area
element
(2)
(3)
Location
interface
(2)
urn
a
elements
urn
link
elements
use-credentials
useMap
usemap
content attribute.
img
element
(2)
useMap
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 ... IDL attribute
must reflect the usemap
content attribute.
object
element
(2)
usemap
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 ... attribute on
the img
or object
element. The usemap
attribute, if specified,
must be a valid hash-name reference to a
map
element.
img
element
(2)
(3)
object
element
(2)
(3)
usemap
input
elements
useMap
input
element must
reflect the element's ...
content attribute.
iframe
element
object
element
base
element
a
and area
elements
time
element
type=date
)
(2)
(3)
ins
and del
elements
time
element
type=email
)
(2)
(3)
type=email
)
(2)
type=number
)
(2)
(3)
type=range
)
(2)
(3)
step
attribute
progress
element
meter
element
time
element
type=datetime
)
(2)
(3)
ol
element
li
element
tabindex
attribute
area
element
time
element
type=datetime-local
)
(2)
(3)
link
element
style
element
source
element
a
and area
elements
link
element
style
element
script
element
embed
element
object
element
source
element
a
and area
elements
type=file
)
time
element
type=month
)
(2)
(3)
html
element
link
element
script
element
img
element
iframe
element
embed
element
object
element
video
element
source
element
track
element
type=image
)
command
element
time
element
canvas
element
colgroup
element
col
element
td
and th
elements
(2)
size
attribute
select
element
textarea
element
(2)
icon
"
type=color
)
time
element
type=time
)
(2)
(3)
time
element
base
element
blockquote
element
q
element
ins
and del
elements
type=url
)
a
and area
elements
time
element
type=week
)
(2)
(3)
time
element
validity
object
element
fieldset
element
input
element
button
element
select
element
textarea
element
keygen
element
output
element
valign
col
elements
valign
tbody
, thead
, and tfoot
elements
valign
td
and th
elements
valign
tr
elements
vAlign
col
element must reflect
the element's ...
content
attribute.
vAlign
tbody
, thead
, and
tfoot
element must reflect the elements'
...
content
attributes.
vAlign
td
and th
element must
reflect the elements' ...
content attributes.
vAlign
tr
element must reflect
the element's ...
content
attribute.
value
li
element
(2)
value
value
content attribute.
li
element
(2)
(3)
value
name
and ... must both
reflect the respective content attributes of the same
name.
param
element
(2)
value
input
element.
input
element
(2)
(3)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
(2)
type=password
)
type=datetime
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
type=color
)
type=file
)
type=image
)
type=button
)
maxlength
attribute
value
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.
list
attribute
option
element
(2)
(3)
(4)
option
element is the value of the ...
content attribute, if there
is one, or, if there is not, the value of the element's text
IDL attribute.
select
element
datalist
element
(2)
option
element
value
max
attribute specifies
how much work the task requires in total. The units are arbitrary
and not specified.
progress
element
(2)
(3)
(4)
(5)
(6)
value
value
content
attribute must be set to that string.
progress
element
(2)
(3)
value
min
attribute
specifies the lower bound of the range, and the max
attribute specifies
the upper bound. The ... attribute
specifies the value to have the gauge indicate as the "measured"
value.
meter
element
(2)
(3)
(4)
(5)
value
value
content attribute must be set
to that string.
meter
element
(2)
(3)
valuetype
param
elements
valueType
param
element must
reflect the element's ...
content attribute.
var
var
element
(2)
(3)
(4)
(5)
sub
and sup
elements
version
html
elements
version
html
element must reflect
the content attribute of the same name.
video
object
element
(2)
(3)
video
element
(2)
(3)
(4)
(5)
(6)
(7)
(8)
(9)
audio
element
source
element
AudioTrackList
and VideoTrackList
objects
(2)
(3)
(4)
(5)
AudioTrackList
and VideoTrackList
objects
(2)
(3)
vlink
body
elements
vLink
body
element must reflect
the element's ...
content
attribute.
volumechange
Document
objects, and Window
objects
volumechange
vspace
embed
elements
embed
element
vspace
iframe
elements
vspace
input
elements
vspace
img
elements
vspace
object
elements
vspace
align
, alt
, archive
, code
, height
, hspace
, name
, object
, ..., and width
IDL attributes
must reflect the respective content attributes of the
same name. For the purposes of reflection, the applet
element's object
content
attribute is defined as containing a URL.
vspace
behavior
, direction
, height
, hspace
, ..., and width
IDL attributes
must reflect the respective content attributes of the
same name.
vspace
name
, align
, border
, hspace
, and ... IDL attributes of
the img
element must reflect the
respective content attributes of the same name.
vspace
align
, archive
, border
, code
, declare
, hspace
, standby
, and ... IDL attributes
of the object
element must reflect the
respective content attributes of the same name.
waiting
Document
objects, and Window
objects
waiting
wbr
wbr
element
(2)
(3)
(4)
web+
scheme prefix
web+
scheme prefix
type=week
)
width
canvas
element has two attributes to control the
size of the coordinate space: ... and height
. These
attributes, when specified, must have values that are valid non-negative
integers. The
width
attribute defaults to
300, and the height
attribute defaults to 150.
canvas
element
(2)
(3)
width
height
IDL
attributes must reflect the respective content
attributes of the same name, with the same defaults.
canvas
element
(2)
width
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.
img
element
(2)
(3)
iframe
element
embed
element
object
element
video
element
input
element
(2)
(3)
type=hidden
)
type=text
) state and Search state (type=search
)
type=tel
)
type=url
)
type=email
)
type=password
)
type=datetime
)
type=date
)
type=month
)
type=week
)
type=time
)
type=datetime-local
)
type=number
)
type=range
)
type=color
)
type=checkbox
)
type=radio
)
type=file
)
type=submit
)
type=image
)
type=reset
)
type=button
)
width
height
IDL attributes on
the iframe
, embed
, object
,
and video
elements must reflect the
respective content attributes of the same name.
iframe
element
embed
element
object
element
video
element
width
col
elements
width
hr
elements
width
pre
elements
width
table
elements
width
td
and th
elements
width
align
, alt
, archive
, code
, height
, hspace
, name
, object
, vspace
, and ... IDL attributes
must reflect the respective content attributes of the
same name. For the purposes of reflection, the applet
element's object
content
attribute is defined as containing a URL.
width
behavior
, direction
, height
, hspace
, vspace
, and ... IDL attributes
must reflect the respective content attributes of the
same name.
width
align
and ... IDL attributes of
the col
element must reflect the
respective content attributes of the same name.
width
align
, color
, size
, and ... IDL attributes of the
hr
element must reflect the respective
content attributes of the same name.
width
pre
element must reflect
the content attribute of the same name.
width
align
, frame
, summary
, rules
, and ..., IDL attributes of
the table
element must reflect the
respective content attributes of the same name.
width
abbr
, align
, axis
, height
, and ... IDL attributes of
the td
and th
elements must
reflect the respective content attributes of the same
name.
type=email
)
body
element
(2)
(3)
(4)
(5)
img
element
iframe
element
Window
object
(2)
(3)
Window
object
Document
objects, and Window
objects
(2)
(3)
(4)
External
interface
wrap
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.
textarea
element
(2)
(3)
wrap
cols
, placeholder
,
required
, rows
, and ... 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.
textarea
element
(2)
application/xhtml+xml
lang
and xml:lang
attributes
data-*
attributes
embed
element
All references are normative unless marked "Non-normative".
XMLHttpRequest
,
A. van Kesteren. W3C.Thanks to Tim Berners-Lee for inventing HTML, without which none of this would exist.
Thanks to Aankhen, Aaron Boodman, Aaron Leventhal, Adam Barth, Adam de Boor, Adam Hepton, Adam Roben, Addison Phillips, Adele Peterson, Adrian Bateman, Adrian Sutton, Agustín Fernández, Ajai Tirumali, Akatsuki Kitamura, Alan Plum, Alastair Campbell, Alejandro G. Castro, Alex Bishop, Alex Nicolaou, Alex Rousskov, Alexander J. Vincent, Alexandre Morgaut, Alexey Feldgendler, Алексей Проскуряков (Alexey Proskuryakov), Alexis Deveria, Allan Clements, Amos Jeffries, Anders Carlsson, Andreas, Andreas Kling, Andrei Popescu, André E. Veltstra, Andrew Barfield, Andrew Clover, Andrew Gove, Andrew Grieve, Andrew Oakley, Andrew Sidwell, Andrew Simons, Andrew Smith, Andrew W. Hagen, Andrey V. Lukyanov, Andy Heydon, Andy Palay, Anne van Kesteren, Anthony Boyd, Anthony Bryan, Anthony Hickson, Anthony Ricaud, Antti Koivisto, Arne Thomassen, Aron Spohr, Arphen Lin, Arun Patole, Aryeh Gregor, Asbjørn Ulsberg, Ashley Sheridan, Atsushi Takayama, Aurelien Levy, Ave Wrigley, Ben Boyle, Ben Godfrey, Ben Lerner, Ben Leslie, Ben Meadowcroft, Ben Millard, Benjamin Carl Wiley Sittler, Benjamin Hawkes-Lewis, Bert Bos, Bijan Parsia, Bil Corry, Bill Mason, Bill McCoy, Billy Wong, Bjartur Thorlacius, Björn Höhrmann, Blake Frantz, Boris Zbarsky, Brad Fults, Brad Neuberg, Brad Spencer, Brady Eidson, Brendan Eich, Brenton Simpson, Brett Wilson, Brett Zamir, Brian Campbell, Brian Korver, Brian Kuhn, Brian Ryner, Brian Smith, Brian Wilson, Bryan Sullivan, Bruce D'Arcus, Bruce Lawson, Bruce Miller, C. Williams, Cameron McCormack, Cao Yipeng, Carlos Gabriel Cardona, Carlos Perelló Marín, Chao Cai, 윤석찬 (Channy Yun), Charl van Niekerk, Charles Iliya Krempeaux, Charles McCathieNevile, Chris Apers, Chris Cressman, Chris Evans, Chris Morris, Chris Pearce, Christian Biesinger, Christian Johansen, Christian Schmidt, Christopher Aillon, Christopher Ferris, Chriswa, Clark Buehler, Cole Robison, Colin Fine, Collin Jackson, Corprew Reed, Craig Cockburn, Csaba Gabor, Csaba Marton, Cynthia Shelly, Dan Yoder, Daniel Barclay, Daniel Bratell, Daniel Brooks, Daniel Brumbaugh Keeney, Daniel Cheng, Daniel Davis, Daniel Glazman, Daniel Peng, Daniel Schattenkirchner, Daniel Spång, Daniel Steinberg, Danny Sullivan, Darin Adler, Darin Fisher, Darxus, Dave Camp, Dave Hodder, Dave Lampton, Dave Singer, Dave Townsend, David Baron, David Bloom, David Bruant, David Carlisle, David E. Cleary, David Egan Evans, David Flanagan, David Gerard, David Håsäther, David Hyatt, David I. Lehn, David John Burrowes, David Matja, David Remahl, David Smith, David Woolley, DeWitt Clinton, Dean Edridge, Dean Edwards, Debi Orton, Derek Featherstone, Devdatta, Dimitri Glazkov, Dimitry Golubovsky, Dirk Pranke, Divya Manian, Dmitry Titov, dolphinling, Dominique Hazaël-Massieux, Don Brutzman, Doron Rosenberg, Doug Kramer, Doug Simpkinson, Drew Wilson, Edmund Lai, Eduard Pascual, Eduardo Vela, Edward O'Connor, Edward Welbourne, Edward Z. Yang, Ehsan Akhgari, Eira Monstad, Eitan Adler, Eliot Graff, Elisabeth Robson, Elizabeth Castro, Elliott Sprehn, Elliotte Harold, Eric Carlson, Eric Law, Eric Rescorla, Eric Semling, Erik Arvidsson, Erik Rose, Evan Martin, Evan Prodromou, Evert, fantasai, Felix Sasaki, Francesco Schwarz, Francis Brosnan Blazquez, Franck 'Shift' Quélain, Frank Barchard, 鵜飼文敏 (Fumitoshi Ukai), Futomi Hatano, Gavin Carothers, Gavin Kistner, Gareth Rees, Garrett Smith, Geoffrey Garen, Sam Sneddon, George Lund, Gianmarco Armellin, Giovanni Campagna, Glenn Adams, Glenn Maynard, Graham Klyne, Greg Botten, Greg Houston, Greg Wilkins, Gregg Tavares, Gregory J. Rosmaita, Grey, Guilherme Johansson Tramontina, Gytis Jakutonis, Håkon Wium Lie, Hallvord Reiar Michaelsen Steen, Hans S. Tømmerhalt, Hans Stimer, Harald Alvestrand, Henri Sivonen, Henrik Lied, Henry Mason, Hugh Guiney, Hugh Winkler, Ian Bicking, Ian Clelland, Ian Davis, Ian Fette, Ido Green, Ignacio Javier, Ivan Enderlin, Ivo Emanuel Gonçalves, J. King, Jacques Distler, James Craig, James Graham, James Justin Harrell, James Kozianski, James M Snell, James Perrett, James Robinson, Jamie Lokier, Jan-Klaas Kollhof, Jason Kersey, Jason Lustig, Jason White, Jasper Bryant-Greene, Jatinder Mann, Jed Hartman, Jeff Balogh, Jeff Cutsinger, Jeff Schiller, Jeff Walden, Jeffrey Zeldman, 胡慧鋒 (Jennifer Braithwaite), Jens Bannmann, Jens Fendler, Jens Lindström, Jens Meiert, Jeremey Hustman, Jeremy Keith, Jeremy Orlow, Jeroen van der Meer, Jian Li, Jim Jewett, Jim Ley, Jim Meehan, Jirka Kosek, Jjgod Jiang, João Eiras, Joe Clark, Joe Gregorio, Joel Spolsky, Johan Herland, John Boyer, John Bussjaeger, John Carpenter, John Fallows, John Foliot, John Harding, John Keiser, John Snyders, John-Mark Bell, Johnny Stenback, Jon Ferraiolo, Jon Gibbins, Jon Perlow, Jonas Sicking, Jonathan Cook, Jonathan Rees, Jonathan Worent, Jonny Axelsson, Jorgen Horstink, Jorunn Danielsen Newth, Joseph Kesselman, Joseph Pecoraro, Josh Aas, Josh Levenberg, Joshua Bell, Joshua Randall, Jukka K. Korpela, Jules Clément-Ripoche, Julian Reschke, Jürgen Jeka, Justin Lebar, Justin Novosad, Justin Schuh, Justin Sinclair, Kai Hendry, 呂康豪 (KangHao Lu), Kartikaya Gupta, Kathy Walton, Kelly Ford, Kelly Norton, Kevin Benson, Kevin Cole, Kornél Pál, Kornel Lesinski, Kris Northfield, Kristof Zelechovski, Krzysztof Maczyński, 黒澤剛志 (Kurosawa Takeshi), Kyle Hofmann, Kyle Huey, Léonard Bouchet, Léonie Watson, Lachlan Hunt, Larry Masinter, Larry Page, Lars Gunther, Lars Solberg, Laura Carlson, Laura Granka, Laura L. Carlson, Laura Wisewell, Laurens Holst, Lee Kowalkowski, Leif Halvard Silli, Lenny Domnitser, Leonard Rosenthol, Leons Petrazickis, Lobotom Dysmon, Logan, Loune, Luke Kenneth Casson Leighton, Maciej Stachowiak, Magnus Kristiansen, Maik Merten, Malcolm Rowe, Mark Birbeck, Mark Davis, Mark Miller, Mark Nottingham, Mark Pilgrim, Mark Rowe, Mark Schenk, Mark Wilton-Jones, Martijn Wargers, Martin Atkins, Martin Dürst, Martin Honnen, Martin Janecke, Martin Kutschker, Martin Nilsson, Martin Thomson, Masataka Yakura, Mathieu Henri, Matias Larsson, Matt Schmidt, Matt Wright, Matthew Gregan, Matthew Mastracci, Matthew Raymond, Matthew Thomas, Mattias Waldau, Max Romantschuk, Menno van Slooten, Micah Dubinko, Michael 'Ratt' Iannarelli, Michael A. Nachbaur, Michael A. Puls II, Michael Carter, Michael Daskalov, Michael Enright, Michael Gratton, Michael Nordman, Michael Powers, Michael Rakowski, Michael(tm) Smith, Michal Zalewski, Michel Fortin, Michelangelo De Simone, Michiel van der Blonk, Mihai Şucan, Mihai Parparita, Mike Brown, Mike Dierken, Mike Dixon, Mike Schinkel, Mike Shaver, Mikko Rantalainen, Mohamed Zergaoui, Mounir Lamouri, Ms2ger, NARUSE Yui, Neil Deakin, Neil Rashbrook, Neil Soiffer, Nicholas Shanks, Nicholas Stimpson, Nicholas Zakas, Nickolay Ponomarev, Nicolas Gallagher, Noah Mendelsohn, Noah Slater, Noel Gordon, NoozNooz42, Ojan Vafai, Olaf Hoffmann, Olav Junker Kjær, Oldřich Vetešník, Oli Studholme, Oliver Hunt, Oliver Rigby, Olivier Gendrin, Olli Pettay, oSand, Patrick H. Lauke, Patrik Persson, Paul Norman, Per-Erik Brodin, Perry Smith, Peter Beverloo, Peter Karlsson, Peter Kasting, Peter Moulder, Peter Stark, Peter-Paul Koch, Phil Pickering, Philip Jägenstedt, Philip Taylor, Philip TAYLOR, Philippe De Ryck, Prateek Rungta, Pravir Gupta, Rachid Finge, Rafał Miłecki, Rajas Moonka, Ralf Stoltze, Ralph Giles, Raphael Champeimont, Remci Mizkur, Remco, Remy Sharp, Rene Saarsoo, Rene Stach, Ric Hardacre, Rich Doughty, Richard Ishida, Rigo Wenning, Rikkert Koppes, Rimantas Liubertas, Riona Macnamara, Rob Ennals, Rob Jellinghaus, Rob S, Robert Blaut, Robert Collins, Robert O'Callahan, Robert Sayre, Robin Berjon, Rodger Combs, Roland Steiner, Roman Ivanov, Roy Fielding, Ruud Steltenpool, Ryan King, Ryosuke Niwa, S. Mike Dierken, Salvatore Loreto, Sam Dutton, Sam Kuper, Sam Ruby, Sam Weinig, Sander van Lambalgen, Sarven Capadisli, Scott González, Scott Hess, Sean Fraser, Sean Hayes, Sean Hogan, Sean Knapp, Sebastian Markbåge, Sebastian Schnitzenbaumer, Seth Call, Shanti Rao, Shaun Inman, Shiki Okasaka, Sierk Bornemann, Sigbjørn Vik, Silvia Pfeiffer, Simon Montagu, Simon Pieters, Simon Spiegel, skeww, Stanton McCandlish, Stefan Håkansson, Stefan Haustein, Stefan Santesson, Stefan Weiss, Steffen Meschkat, Stephen Ma, Steve Faulkner, Steve Runyon, Steven Bennett, Steven Garrity, Steven Tate, Stewart Brodie, Stuart Ballard, Stuart Parmenter, Subramanian Peruvemba, Sunava Dutta, Susan Borgrink, Susan Lesch, Sylvain Pasche, T. J. Crowder, Tab Atkins, Tantek Çelik, 田村健人 (TAMURA Kent), Ted Mielczarek, Terrence Wood, Thomas Broyer, Thomas Koetter, Thomas O'Connor, Tim Altman, Tim Johansson, Toby Inkster, Todd Moody, Tom Baker, Tom Pike, Tommy Thorsen, Travis Leithead, Tyler Close, Vladimir Katardjiev, Vladimir Vukićević, voracity, Wakaba, Wayne Carr, Wayne Pollock, Wellington Fernando de Macedo, Weston Ruter, Wilhelm Joys Andersen, Will Levine, William Swanson, Wladimir Palant, Wojciech Mach, Wolfram Kriesing, Xan Gregg, Yang Chen, Ye-Kui Wang, Yehuda Katz, Yi-An Huang, Yngve Nysaeter Pettersen, Yuzo Fujishima, Zhenbin Xu, Zoltan Herczeg, and Øistein E. Andersen, for their useful comments, both large and small, that have led to changes to this specification over the years.
Thanks also to everyone who has ever posted about HTML to their blogs, public mailing lists, or forums, including all the contributors to the various W3C HTML WG lists and the various WHATWG lists.
Special thanks to Richard Williamson for creating the first
implementation of canvas
in Safari, from which the
canvas feature was designed.
Special thanks also to the Microsoft employees who first
implemented the event-based drag-and-drop mechanism, contenteditable
, and other
features first widely deployed by the Windows Internet Explorer
browser.
Thanks to the many sources that provided inspiration for the examples used in the specification.
Thanks also to the Microsoft blogging community for some ideas, to the attendees of the W3C Workshop on Web Applications and Compound Documents for inspiration, to the #mrt crew, the #mrt.no crew, and the #whatwg crew, and to Pillar and Hedral for their ideas and support.