- From: Michael Smith via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 01 Jan 2010 04:51:37 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/spec-author-view
In directory hutz:/tmp/cvs-serv23381
Added Files:
apis-in-html-documents.html
association-of-controls-and-forms.html commands.html
common-input-element-attributes.html common-microsyntaxes.html
content-models.html dnd.html edits.html elements.html
embedded-content-1.html grouping-content.html links.html
number-state.html scripting-1.html sections.html
states-of-the-type-attribute.html the-button-element.html
the-iframe-element.html the-input-element.html
the-map-element.html timers.html urls.html
Log Message:
typo (whatwg r4456)
[updated by splitter]
--- NEW FILE: scripting-1.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.3 Scripting — HTML5</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"/><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
p + * > li, dd li { margin: 1em 0; }
dt, dfn { font-weight: bold; font-style: normal; }
dt dfn { font-style: italic; }
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
pre em { font-weight: bolder; font-style: normal; }
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead { border-bottom: solid; }
table tbody th:first-child { border-left: solid; }
table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
img.extra { float: right; }
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
pre.css:first-line { color: #AAAA50; }
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; }
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
dl.domintro dd p { margin: 0.5em 0; }
dl.switch { padding-left: 2em; }
dl.switch > dt { text-indent: -1.5em; }
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
dl.triple { padding: 0 0 0 1em; }
dl.triple dt, dl.triple dd { margin: 0; display: inline }
dl.triple dt:after { content: ':'; }
dl.triple dd:after { content: '\A'; white-space: pre; }
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
a .diff-new { border-bottom: 1px blue solid; }
h2 { page-break-before: always; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; }
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
div.head p { margin: 0; }
div.head h1 { margin: 0; }
div.head .logo { float: right; margin: 0 1em; }
div.head .logo img { border: none } /* remove border from top image */
div.head dl { margin: 1em 0; }
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
body > .toc > li > * { margin-bottom: 0.5em; }
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
.toc, .toc li { list-style: none; }
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
.brief li { margin: 0; padding: 0; }
.brief li p { margin: 0; padding: 0; }
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
.category-list li { display: inline; }
.category-list li:not(:last-child)::after { content: ', '; }
.category-list li > span, .category-list li > a { text-transform: lowercase; }
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
.XXX > :first-child { margin-top: 0; }
p .XXX { line-height: 3em; }
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
.annotation :link, .annotation :visited { color: inherit; }
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
.annotation span { border: none ! important; }
.note { color: green; background: transparent; font-family: sans-serif; }
.warning { color: red; background: transparent; }
.note, .warning { font-weight: bolder; font-style: italic; }
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
.note p:first-child, .warning p:first-child { margin-top: 0; }
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
.warning:before { font-style: normal; }
p.note:before { content: 'Note: '; }
p.warning:before { content: '\26A0 Warning! '; }
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
h4 { position: relative; z-index: 3; }
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
.element {
background: #EEEEFF;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -1.15em;
height: 2em;
width: 0.9em;
background: #EEEEFF;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
td > .example:only-child { margin: 0 0 0 0.1em; }
.tall-and-narrow {
font-size: 0.6em;
column-width: 25em;
column-gap: 1em;
-moz-column-width: 25em;
-moz-column-gap: 1em;
-webkit-column-width: 25em;
-webkit-column-gap: 1em;
}
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
ul.domTree li li { list-style: none; }
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree span { font-style: italic; font-family: serif; }
ul.domTree .t1 code { color: purple; font-weight: bold; }
ul.domTree .t2 { font-style: normal; font-family: monospace; }
ul.domTree .t2 .name { color: black; font-weight: bold; }
ul.domTree .t2 .value { color: blue; font-weight: normal; }
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
ul.domTree .t7 code, .domTree .t8 code { color: green; }
ul.domTree .t10 code { color: teal; }
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
#configUI p label { display: block; }
#configUI #updateUI, #configUI .loginUI { text-align: center; }
#configUI input[type=button] { display: block; margin: auto; }
</style><style type="text/css">
.applies thead th > * { display: block; }
.applies thead code { display: block; }
.applies tbody th { whitespace: nowrap; }
.applies td { text-align: center; }
.applies .yes { background: yellow; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
#table-example-1 caption { padding-bottom: 0.5em; }
#table-example-1 thead, #table-example-1 tbody { border: none; }
#table-example-1 th, #table-example-1 td { border: solid thin; }
#table-example-1 th { font-weight: normal; }
#table-example-1 td { border-style: none solid; vertical-align: top; }
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
#table-example-1 tbody td:first-child::after { content: leader(". "); }
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
#table-example-1 tbody td:first-child + td { width: 10em; }
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
.apple-table-examples * { font-family: "Times", serif; }
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
.apple-table-examples td { text-align: right; vertical-align: top; }
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
.apple-table-examples sup { line-height: 0; }
</style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script>
function getCookie(name) {
var params = location.search.substr(1).split("&");
for (var index = 0; index < params.length; index++) {
if (params[index] == name)
return "1";
var data = params[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
var cookies = document.cookie.split("; ");
for (var index = 0; index < cookies.length; index++) {
var data = cookies[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
return null;
}
function load(script) {
var e = document.createElement('script');
e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
document.body.appendChild(e);
}
function init() {
if (location.search == '?slow-browser')
return;
var configUI = document.createElement('div');
configUI.id = 'configUI';
document.body.appendChild(configUI);
// load('reviewer.js'); // would need cross-site XHR
if (document.getElementById('head'))
load('toc.js');
load('styler.js');
// load('updater.js'); // would need cross-site XHR
load('dfn.js');
// load('status.js'); // would need cross-site XHR
if (getCookie('profile') == '1')
document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
fixBrokenLink();
}
</script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="semantics.html" title="4 The elements of HTML" rel="prev">
<link href="Overview.html#contents" title="Table of contents" rel="index">
<link href="sections.html" title="4.4 Sections" rel="next">
</head><body onload="fixBrokenLink(); init()"><div class="head" id="head">
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
</div><div>
<a href="semantics.html">← 4 The elements of HTML</a> –
<a href="Overview.html#contents">Table of contents</a> –
<a href="sections.html">4.4 Sections →</a>
<ol class="toc"><li><ol><li><a href="scripting-1.html#scripting-1"><span class="secno">4.3 </span>Scripting</a>
<ol><li><a href="scripting-1.html#script"><span class="secno">4.3.1 </span>The <code>script</code> element</a>
<ol><li><a href="scripting-1.html#scriptingLanguages"><span class="secno">4.3.1.1 </span>Scripting languages</a></li><li><a href="scripting-1.html#restrictions-for-contents-of-script-elements"><span class="secno">4.3.1.2 </span>Restrictions for contents of <code>script</code> elements</a></li><li><a href="scripting-1.html#inline-documentation-for-external-scripts"><span class="secno">4.3.1.3 </span>Inline documentation for external scripts</a></li></ol></li><li><a href="scripting-1.html#the-noscript-element"><span class="secno">4.3.2 </span>The <code>noscript</code> element</a></li></ol></li></ol></li></ol></div>
<h3 id="scripting-1"><span class="secno">4.3 </span>Scripting</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Scripts allow authors to add interactivity to their documents.</p><p>Authors are encouraged to use declarative alternatives to
scripting where possible, as declarative mechanisms are often more
maintainable, and many users disable scripting.</p><div class="example">
<p>For example, instead of using script to show or hide a section
to show more details, the <code><a href="interactive-elements.html#the-details-element">details</a></code> element could be
used.</p>
</div><p>Authors are also encouraged to make their applications degrade
gracefully in the absence of scripting support.</p><div class="example">
<p>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.</p>
</div><h4 id="script"><span class="secno">4.3.1 </span>The <dfn><code>script</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
<dd><a href="content-models.html#metadata-content">Metadata content</a>.</dd>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href="content-models.html#metadata-content">metadata content</a> is expected.</dd>
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
<dt>Content model:</dt>
<dd>If there is no <code title="attr-script-src"><a href="#attr-script-src">src</a></code>
attribute, depends on the value of the <code title="attr-script-type"><a href="#attr-script-type">type</a></code> attribute, but must match
<a href="#restrictions-for-contents-of-script-elements">script content restrictions</a>.</dd>
<dd>If there <em>is</em> a <code title="attr-script-src"><a href="#attr-script-src">src</a></code>
attribute, the element must be either empty or contain only
<a href="#inline-documentation-for-external-scripts">script documentation</a> that also matches <a href="#restrictions-for-contents-of-script-elements">script
content restrictions</a>.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dd><code title="attr-script-src"><a href="#attr-script-src">src</a></code></dd>
<dd><code title="attr-script-async"><a href="#attr-script-async">async</a></code></dd>
<dd><code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code></dd>
<dd><code title="attr-script-type"><a href="#attr-script-type">type</a></code></dd>
<dd><code title="attr-script-charset"><a href="#attr-script-charset">charset</a></code></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn id="htmlscriptelement">HTMLScriptElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
attribute DOMString <a href="#dom-script-src" title="dom-script-src">src</a>;
attribute boolean <a href="#dom-script-async" title="dom-script-async">async</a>;
attribute boolean <a href="#dom-script-defer" title="dom-script-defer">defer</a>;
attribute DOMString <a href="#dom-script-type" title="dom-script-type">type</a>;
attribute DOMString <a href="#dom-script-charset" title="dom-script-charset">charset</a>;
attribute DOMString <a href="#dom-script-text" title="dom-script-text">text</a>;
};</pre>
</dd>
</dl><p>The <code><a href="#script">script</a></code> element allows authors to include dynamic
script and data blocks in their documents. The element does not
<a href="#represents" title="represents">represent</a> content for the user.</p><p>When used to include dynamic scripts, the scripts may either be
embedded inline or may be imported from an external file using the
<code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute. If the language
is not that described by "<code title="">text/javascript</code>",
then the <code title="attr-script-type"><a href="#attr-script-type">type</a></code> attribute must
be present, as described below.</p><p>When used to include data blocks, the data must be embedded
inline, the format of the data must be given using the <code title="attr-script-type"><a href="#attr-script-type">type</a></code> attribute, and the <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute must not be
specified.</p><p>The <dfn id="attr-script-type" title="attr-script-type"><code>type</code></dfn>
attribute gives the language of the script or format of the data. If
the attribute is present, its value must be a <a href="infrastructure.html#valid-mime-type">valid MIME
type</a>, optionally with parameters. The <code title="">charset</code> parameter must not be specified. (The
default, which is used if the attribute is absent, is "<code title="">text/javascript</code>".)</p><p>The <dfn id="attr-script-src" title="attr-script-src"><code>src</code></dfn>
attribute, if specified, gives the address of the external script
resource to use. The value of the attribute must be a <a href="urls.html#valid-url">valid
URL</a> identifying a script resource of the type given by the
<code title="attr-script-type"><a href="#attr-script-type">type</a></code> attribute, if the
attribute is present, or of the type "<code title="">text/javascript</code>", 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.</p><p>The <dfn id="attr-script-charset" title="attr-script-charset"><code>charset</code></dfn>
attribute gives the character encoding of the external script
resource. The attribute must not be specified if the <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute is not present. If the
attribute is set, its value must be a valid character encoding name,
must be an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the
<a href="infrastructure.html#preferred-mime-name">preferred MIME name</a> for that encoding, and must match
the encoding given in the <code title="">charset</code> parameter of
the <a href="#content-type" title="Content-Type">Content-Type metadata</a> of the
external file, if any. <a href="references.html#refsIANACHARSET">[IANACHARSET]</a></p><p>The <dfn id="attr-script-async" title="attr-script-async"><code>async</code></dfn> and
<dfn id="attr-script-defer" title="attr-script-defer"><code>defer</code></dfn> attributes
are <a href="common-microsyntaxes.html#boolean-attribute" title="boolean attribute">boolean attributes</a> that
indicate how the script should be executed.</p><p>There are three possible modes that can be selected using these
attributes. If the <code title="attr-script-async"><a href="#attr-script-async">async</a></code>
attribute is present, then the script will be executed
asynchronously, as soon as it is available. If the <code title="attr-script-async"><a href="#attr-script-async">async</a></code> attribute is not present but
the <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code> 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 described below.</p><p>The <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code> attribute may be
specified even if the <code title="attr-script-async"><a href="#attr-script-async">async</a></code>
attribute is specified, to cause legacy Web browsers that only
support <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code> (and not <code title="attr-script-async"><a href="#attr-script-async">async</a></code>) to fall back to the <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code> behavior instead of the
synchronous blocking behavior that is the default.</p><p>If one or both of the <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code> and <code title="attr-script-async"><a href="#attr-script-async">async</a></code> attributes are specified, the
<code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute must also be
specified.</p><p>Changing the <code title="attr-script-src"><a href="#attr-script-src">src</a></code>, <code title="attr-script-type"><a href="#attr-script-type">type</a></code>, <code title="attr-script-charset"><a href="#attr-script-charset">charset</a></code>, <code title="attr-script-async"><a href="#attr-script-async">async</a></code>, and <code title="attr-script-defer"><a href="#attr-script-defer">defer</a></code> attributes dynamically has no
direct effect; these attribute are only used when the element is
<a href="infrastructure.html#insert-an-element-into-a-document" title="insert an element into a document">inserted into the
document</a>.</p><!-- by implication,
changes to the base URL also have no effect --><dl class="domintro"><dt><var title="">script</var> . <code title="dom-script-text"><a href="#dom-script-text">text</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns the contents of the element, ignoring child nodes that
aren't <a href="infrastructure.html#text-node" title="text node">text nodes</a>.</p>
<p>Can be set, to replace the element's children with the given
value.</p>
</dd>
</dl><p class="note">When inserted using the <code title="dom-document-write"><a href="#dom-document-write">document.write()</a></code> method,
<code><a href="#script">script</a></code> elements execute (typically synchronously), but
when inserted using <code title="dom-innerHTML"><a href="apis-in-html-documents.html#dom-innerhtml">innerHTML</a></code> and <code title="dom-outerHTML"><a href="apis-in-html-documents.html#dom-outerhtml">outerHTML</a></code> attributes, they do not
execute at all.</p><div class="example">
<p>In this example, two <code><a href="#script">script</a></code> elements are used. One
embeds an external script, and the other includes some data.</p>
<pre><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></pre>
<p>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.</p>
</div><div class="example">
<p>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 <code><a href="#script">script</a></code> element can be
used to invoke script while the document is being parsed, in this
case to initialize the form's output.</p>
<pre><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">
<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 onformchange="calculate(form)"></output></p>
</fieldset>
<script>
document.forms.pricecalc.dispatchFormChange();
</script>
</form></pre>
</div><h5 id="scriptingLanguages"><span class="secno">4.3.1.1 </span>Scripting languages</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The following lists some <a href="infrastructure.html#mime-type">MIME type</a> strings and the
languages to which they refer:</p><dl><dt>"<code>application/ecmascript</code>"</dt>
<dt>"<code>application/javascript</code>"</dt>
<dt>"<code>application/x-ecmascript</code>"</dt>
<dt>"<code>application/x-javascript</code>"</dt>
<dt>"<code>text/ecmascript</code>"</dt>
<dt>"<code>text/javascript</code>"</dt>
<dt>"<code>text/javascript1.0</code>"</dt>
<dt>"<code>text/javascript1.1</code>"</dt>
<dt>"<code>text/javascript1.2</code>"</dt>
<dt>"<code>text/javascript1.3</code>"</dt>
<dt>"<code>text/javascript1.4</code>"</dt>
<dt>"<code>text/javascript1.5</code>"</dt>
<dt>"<code>text/jscript</code>"</dt>
<dt>"<code>text/livescript</code>"</dt>
<dt>"<code>text/x-ecmascript</code>"</dt>
<dt>"<code>text/x-javascript</code>"</dt>
<dd>JavaScript. <a href="references.html#refsECMA262">[ECMA262]</a></dd>
<dt>"<code>text/javascript;e4x=1</code>"</dt>
<dd>JavaScript with ECMAScript for XML. <a href="references.html#refsECMA357">[ECMA357]</a></dd>
</dl><h5 id="restrictions-for-contents-of-script-elements"><span class="secno">4.3.1.2 </span><dfn title="script content restrictions">Restrictions for contents of <code>script</code> elements</dfn></h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code>textContent</code> of a <code><a href="#script">script</a></code> element must match the
<code title="">script</code> production in the following ABNF, the
character set for which is Unicode. <a href="references.html#refsABNF">[ABNF]</a></p><pre>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 = <!-- script-end / -->"<!--" <!-- the script-end is redundant here since it would close the element -->
data2 = <any string that doesn't contain a substring that matches not-data2>
not-data2 = <!-- script-end / -->script-start / "-->" <!-- the script-end is redundant here since it would close the element -->
data3 = <any string that doesn't contain a substring that matches not-data3>
not-data3 = script-end / "-->"
script-start = lt s c r i p t tag-end
script-end = lt slash s c r i p t tag-end
lt = %x003C ; U+003C LESS-THAN SIGN character (<)
slash = %x002F ; U+002F SOLIDUS character (/)
s = %x0053 ; U+0053 LATIN CAPITAL LETTER S
s =/ %x0073 ; U+0073 LATIN SMALL LETTER S
c = %x0043 ; U+0043 LATIN CAPITAL LETTER C
c =/ %x0063 ; U+0063 LATIN SMALL LETTER C
r = %x0052 ; U+0052 LATIN CAPITAL LETTER R
r =/ %x0072 ; U+0072 LATIN SMALL LETTER R
i = %x0049 ; U+0049 LATIN CAPITAL LETTER I
i =/ %x0069 ; U+0069 LATIN SMALL LETTER I
p = %x0050 ; U+0050 LATIN CAPITAL LETTER P
p =/ %x0070 ; U+0070 LATIN SMALL LETTER P
t = %x0054 ; U+0054 LATIN CAPITAL LETTER T
t =/ %x0074 ; U+0074 LATIN SMALL LETTER T
tag-end = %x0009 ; U+0009 CHARACTER TABULATION
tag-end =/ %x000A ; U+000A LINE FEED (LF)
tag-end =/ %x000C ; U+000C FORM FEED (FF)
tag-end =/ %x0020 ; U+0020 SPACE
tag-end =/ %x002F ; U+002F SOLIDUS (/)
tag-end =/ %x003E ; U+003E GREATER-THAN SIGN (>)</pre><p>When a <code><a href="#script">script</a></code> element contains <a href="#inline-documentation-for-external-scripts">script
documentation</a>, there are further restrictions on the contents
of the element, as described in the section below.</p><h5 id="inline-documentation-for-external-scripts"><span class="secno">4.3.1.3 </span><dfn title="script documentation">Inline documentation for external scripts</dfn></h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>If a <code><a href="#script">script</a></code> element's <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute is specified, then the
contents of the <code><a href="#script">script</a></code> element, if any, must be such
that the value of the <code title="dom-script-text"><a href="#dom-script-text">text</a></code> IDL
attribute, which is derived from the element's contents, matches the
<code title="">documentation</code> production in the following
ABNF, the character set for which is Unicode. <a href="references.html#refsABNF">[ABNF]</a></p><pre>documentation = *( *( space / tab / comment ) [ line-comment ] newline )
comment = slash star *( not-star / star not-slash ) 1*star slash
line-comment = slash slash *not-newline
; characters
tab = %x0009 ; U+0009 TAB
newline = %x000A ; U+000A LINE FEED (LF)
space = %x0020 ; U+0020 SPACE
star = %x002A ; U+002A ASTERISK (*)
slash = %x002F ; U+002F SOLIDUS (/)
not-newline = %x0000-0009 / %x000B-10FFFF
; a Unicode character other than U+000A LINE FEED (LF)
not-star = %x0000-0029 / %x002B-10FFFF
; a Unicode character other than U+002A ASTERISK (*)
not-slash = %x0000-002E / %x0030-10FFFF
; a Unicode character other than U+002F SOLIDUS (/)</pre><p class="note">This corresponds to putting the contents of the
element in JavaScript comments.</p><p class="note">This requirement is in addition to the earlier
restrictions on the syntax of contents of <code><a href="#script">script</a></code>
elements.</p><div class="example">
<p>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 <code title="attr-script-src"><a href="#attr-script-src">src</a></code> attribute.</p>
<pre><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></pre>
</div><h4 id="the-noscript-element"><span class="secno">4.3.2 </span>The <dfn><code>noscript</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
<dd><a href="content-models.html#metadata-content">Metadata content</a>.</dd>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>In a <code><a href="semantics.html#the-head-element-0">head</a></code> element of an <a href="dom.html#html-documents" title="HTML documents">HTML document</a>, if there are no ancestor <code><a href="#the-noscript-element">noscript</a></code> elements.</dd>
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected in <a href="dom.html#html-documents">HTML documents</a>, if there are no ancestor <code><a href="#the-noscript-element">noscript</a></code> elements.</dd>
<dt>Content model:</dt>
<dd>When <a href="#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a>, in a <code><a href="semantics.html#the-head-element-0">head</a></code> element: in any order, zero or more <code><a href="semantics.html#the-link-element">link</a></code> elements, zero or more <code><a href="semantics.html#the-style-element">style</a></code> elements, and zero or more <code><a href="semantics.html#meta">meta</a></code> elements.</dd>
<dd>When <a href="#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a>, not in a <code><a href="semantics.html#the-head-element-0">head</a></code> element: <a href="content-models.html#transparent">transparent</a>, but there must be no <code><a href="#the-noscript-element">noscript</a></code> element descendants.</dd>
<dd>Otherwise: text that conforms to the requirements given in the prose.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dt>DOM interface:</dt>
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
</dl><p>The <code><a href="#the-noscript-element">noscript</a></code> element <a href="#represents">represents</a> nothing
if <a href="#concept-n-script" title="concept-n-script">scripting is enabled</a>, and
<a href="#represents">represents</a> its children if <a href="#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a>. 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.</p><p>When used in <a href="dom.html#html-documents">HTML documents</a>, the allowed content
model is as follows:</p><dl><dt>In a <code><a href="semantics.html#the-head-element-0">head</a></code> element, if <a href="#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a> for the
<code><a href="#the-noscript-element">noscript</a></code> element</dt>
<dd><p>The <code><a href="#the-noscript-element">noscript</a></code> element must contain only
<code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="semantics.html#the-style-element">style</a></code>, and <code><a href="semantics.html#meta">meta</a></code>
elements.</p></dd>
<dt>In a <code><a href="semantics.html#the-head-element-0">head</a></code> element, if <a href="#concept-n-script" title="concept-n-script">scripting is enabled</a> for the
<code><a href="#the-noscript-element">noscript</a></code> element</dt>
<dd><p>The <code><a href="#the-noscript-element">noscript</a></code> element must contain only text,
except that invoking the <a href="#html-fragment-parsing-algorithm">HTML fragment parsing
algorithm</a> <!-- (which disables <script> execution) --> with
the <code><a href="#the-noscript-element">noscript</a></code> element as the <var title="">context</var> element and the text contents as the <var title="">input</var> must result in a list of nodes that consists
only of <code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="semantics.html#the-style-element">style</a></code>, and
<code><a href="semantics.html#meta">meta</a></code> elements that would be conforming if they were
children of the <code><a href="#the-noscript-element">noscript</a></code> element, and no <a href="#parse-error" title="parse error">parse errors</a>.</p></dd>
<dt>Outside of <code><a href="semantics.html#the-head-element-0">head</a></code> elements, if <a href="#concept-n-noscript" title="concept-n-noscript">scripting is disabled</a> for the
<code><a href="#the-noscript-element">noscript</a></code> element</dt>
<dd><p>The <code><a href="#the-noscript-element">noscript</a></code> element's content model is
<a href="content-models.html#transparent">transparent</a>, with the additional restriction that a
<code><a href="#the-noscript-element">noscript</a></code> element must not have a <code><a href="#the-noscript-element">noscript</a></code>
element as an ancestor (that is, <code><a href="#the-noscript-element">noscript</a></code> can't be
nested).</p></dd>
<dt>Outside of <code><a href="semantics.html#the-head-element-0">head</a></code> elements, if <a href="#concept-n-script" title="concept-n-script">scripting is enabled</a> for the
<code><a href="#the-noscript-element">noscript</a></code> element</dt>
<dd>
<p>The <code><a href="#the-noscript-element">noscript</a></code> element must contain only text,
except that the text must be such that running the following
algorithm results in a conforming document with no
<code><a href="#the-noscript-element">noscript</a></code> elements and no <code><a href="#script">script</a></code>
elements, and such that no step in the algorithm causes an
<a href="#html-parser">HTML parser</a> to flag a <a href="#parse-error">parse error</a>:</p>
<ol><li>Remove every <code><a href="#script">script</a></code> element from the
document.</li>
<li>Make a list of every <code><a href="#the-noscript-element">noscript</a></code> element in the
document. For every <code><a href="#the-noscript-element">noscript</a></code> element in that list,
perform the following steps:
<ol><li>Let the <var title="">parent element</var> be the parent
element of the <code><a href="#the-noscript-element">noscript</a></code> element.</li>
<li>Take all the children of the <var title="">parent element</var>
that come before the <code><a href="#the-noscript-element">noscript</a></code> element, and call these
elements <var title="">the before children</var>.</li>
<li>Take all the children of the <var title="">parent element</var>
that come <em>after</em> the <code><a href="#the-noscript-element">noscript</a></code> element, and
call these elements <var title="">the after children</var>.</li>
<li>Let <var title="">s</var> be the concatenation of all the
<a href="infrastructure.html#text-node">text node</a> children of the <code><a href="#the-noscript-element">noscript</a></code>
element.</li>
<li>Set the <code title="dom-innerHTML"><a href="apis-in-html-documents.html#dom-innerhtml">innerHTML</a></code>
attribute of the <var title="">parent element</var> to the value
of <var title="">s</var>. (This, as a side-effect, causes the
<code><a href="#the-noscript-element">noscript</a></code> element to be removed from the
document.)</li>
<li>Insert <var title="">the before children</var> at the start of
the <var title="">parent element</var>, preserving their original
relative order.</li>
<li>Insert <var title="">the after children</var> at the end of the
<var title="">parent element</var>, preserving their original
relative order.</li>
</ol></li>
</ol></dd>
</dl><p class="note">All these contortions are required because, for
historical reasons, the <code><a href="#the-noscript-element">noscript</a></code> element is handled
differently by the <a href="#html-parser">HTML parser</a> based on whether <a href="#scripting-flag" title="scripting flag">scripting was enabled or not</a> when the
parser was invoked.</p><p>The <code><a href="#the-noscript-element">noscript</a></code> element must not be used in <a href="dom.html#xml-documents">XML
documents</a>.</p><p class="note"><strong>The <code><a href="#the-noscript-element">noscript</a></code> element is only
effective in <a href="syntax.html#syntax">the HTML syntax</a>, it has no effect in
<a href="the-xhtml-syntax.html#the-xhtml-syntax">the XHTML syntax</a>.</strong></p><div class="example">
<p>In the following example, a <code><a href="#the-noscript-element">noscript</a></code> element is
used to provide fallback for a script.</p>
<pre><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></pre>
<p>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.</p>
<p>The <code><a href="#the-noscript-element">noscript</a></code> 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 <code><a href="#the-noscript-element">noscript</a></code>, 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:</p>
<pre><form action="calcSquare.php">
<p>
<label for=x>Number</label>:
<input id="x" name="x" type="number">
</p>
<strong><input id="submit" type=submit value="Calculate Square"></strong>
<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;
};
<strong> var submit = document.getElementById('submit');
submit.parentNode.removeChild(submit);</strong>
</script>
</form></pre>
<p>The above technique is also useful in XHTML, since
<code><a href="#the-noscript-element">noscript</a></code> is not supported in <a href="the-xhtml-syntax.html#the-xhtml-syntax">the XHTML
syntax</a>.</p>
</div></body></html>
--- NEW FILE: the-map-element.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.8.12 The map element — HTML5</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"/><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
p + * > li, dd li { margin: 1em 0; }
dt, dfn { font-weight: bold; font-style: normal; }
dt dfn { font-style: italic; }
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
pre em { font-weight: bolder; font-style: normal; }
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead { border-bottom: solid; }
table tbody th:first-child { border-left: solid; }
table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
img.extra { float: right; }
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
pre.css:first-line { color: #AAAA50; }
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; }
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
dl.domintro dd p { margin: 0.5em 0; }
dl.switch { padding-left: 2em; }
dl.switch > dt { text-indent: -1.5em; }
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
dl.triple { padding: 0 0 0 1em; }
dl.triple dt, dl.triple dd { margin: 0; display: inline }
dl.triple dt:after { content: ':'; }
dl.triple dd:after { content: '\A'; white-space: pre; }
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
a .diff-new { border-bottom: 1px blue solid; }
h2 { page-break-before: always; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; }
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
div.head p { margin: 0; }
div.head h1 { margin: 0; }
div.head .logo { float: right; margin: 0 1em; }
div.head .logo img { border: none } /* remove border from top image */
div.head dl { margin: 1em 0; }
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
body > .toc > li > * { margin-bottom: 0.5em; }
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
.toc, .toc li { list-style: none; }
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
.brief li { margin: 0; padding: 0; }
.brief li p { margin: 0; padding: 0; }
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
.category-list li { display: inline; }
.category-list li:not(:last-child)::after { content: ', '; }
.category-list li > span, .category-list li > a { text-transform: lowercase; }
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
.XXX > :first-child { margin-top: 0; }
p .XXX { line-height: 3em; }
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
.annotation :link, .annotation :visited { color: inherit; }
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
.annotation span { border: none ! important; }
.note { color: green; background: transparent; font-family: sans-serif; }
.warning { color: red; background: transparent; }
.note, .warning { font-weight: bolder; font-style: italic; }
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
.note p:first-child, .warning p:first-child { margin-top: 0; }
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
.warning:before { font-style: normal; }
p.note:before { content: 'Note: '; }
p.warning:before { content: '\26A0 Warning! '; }
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
h4 { position: relative; z-index: 3; }
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
.element {
background: #EEEEFF;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -1.15em;
height: 2em;
width: 0.9em;
background: #EEEEFF;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
td > .example:only-child { margin: 0 0 0 0.1em; }
.tall-and-narrow {
font-size: 0.6em;
column-width: 25em;
column-gap: 1em;
-moz-column-width: 25em;
-moz-column-gap: 1em;
-webkit-column-width: 25em;
-webkit-column-gap: 1em;
}
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
ul.domTree li li { list-style: none; }
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree span { font-style: italic; font-family: serif; }
ul.domTree .t1 code { color: purple; font-weight: bold; }
ul.domTree .t2 { font-style: normal; font-family: monospace; }
ul.domTree .t2 .name { color: black; font-weight: bold; }
ul.domTree .t2 .value { color: blue; font-weight: normal; }
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
ul.domTree .t7 code, .domTree .t8 code { color: green; }
ul.domTree .t10 code { color: teal; }
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
#configUI p label { display: block; }
#configUI #updateUI, #configUI .loginUI { text-align: center; }
#configUI input[type=button] { display: block; margin: auto; }
</style><style type="text/css">
.applies thead th > * { display: block; }
.applies thead code { display: block; }
.applies tbody th { whitespace: nowrap; }
.applies td { text-align: center; }
.applies .yes { background: yellow; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
#table-example-1 caption { padding-bottom: 0.5em; }
#table-example-1 thead, #table-example-1 tbody { border: none; }
#table-example-1 th, #table-example-1 td { border: solid thin; }
#table-example-1 th { font-weight: normal; }
#table-example-1 td { border-style: none solid; vertical-align: top; }
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
#table-example-1 tbody td:first-child::after { content: leader(". "); }
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
#table-example-1 tbody td:first-child + td { width: 10em; }
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
.apple-table-examples * { font-family: "Times", serif; }
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
.apple-table-examples td { text-align: right; vertical-align: top; }
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
.apple-table-examples sup { line-height: 0; }
</style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script>
function getCookie(name) {
var params = location.search.substr(1).split("&");
for (var index = 0; index < params.length; index++) {
if (params[index] == name)
return "1";
var data = params[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
var cookies = document.cookie.split("; ");
for (var index = 0; index < cookies.length; index++) {
var data = cookies[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
return null;
}
function load(script) {
var e = document.createElement('script');
e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
document.body.appendChild(e);
}
function init() {
if (location.search == '?slow-browser')
return;
var configUI = document.createElement('div');
configUI.id = 'configUI';
document.body.appendChild(configUI);
// load('reviewer.js'); // would need cross-site XHR
if (document.getElementById('head'))
load('toc.js');
load('styler.js');
// load('updater.js'); // would need cross-site XHR
load('dfn.js');
// load('status.js'); // would need cross-site XHR
if (getCookie('profile') == '1')
document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
fixBrokenLink();
}
</script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="the-canvas-element.html" title="4.8.11 The canvas element" rel="prev">
<link href="Overview.html#contents" title="Table of contents" rel="index">
<link href="tabular-data.html" title="4.9 Tabular data" rel="next">
</head><body onload="fixBrokenLink(); init()"><div class="head" id="head">
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
</div><div>
<a href="the-canvas-element.html">← 4.8.11 The canvas element</a> –
<a href="Overview.html#contents">Table of contents</a> –
<a href="tabular-data.html">4.9 Tabular data →</a>
<ol class="toc"><li><ol><li><ol><li><a href="the-map-element.html#the-map-element"><span class="secno">4.8.12 </span>The <code>map</code> element</a></li><li><a href="the-map-element.html#the-area-element"><span class="secno">4.8.13 </span>The <code>area</code> element</a></li><li><a href="the-map-element.html#image-maps"><span class="secno">4.8.14 </span>Image maps</a></li><li><a href="the-map-element.html#mathml"><span class="secno">4.8.15 </span>MathML</a></li><li><a href="the-map-element.html#svg-0"><span class="secno">4.8.16 </span>SVG</a></li><li><a href="the-map-element.html#dimension-attributes"><span class="secno">4.8.17 </span>Dimension attributes</a></li></ol></li></ol></li></ol></div>
<h4 id="the-map-element"><span class="secno">4.8.12 </span>The <dfn><code>map</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dd>When the element only contains <a href="content-models.html#phrasing-content">phrasing content</a>: <a href="content-models.html#phrasing-content">phrasing content</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
<dt>Content model:</dt>
<dd><a href="content-models.html#transparent">Transparent</a>.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dd><code title="attr-map-name"><a href="#attr-map-name">name</a></code></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn id="htmlmapelement">HTMLMapElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
attribute DOMString <a href="#dom-map-name" title="dom-map-name">name</a>;
readonly attribute <a href="urls.html#htmlcollection">HTMLCollection</a> <a href="#dom-map-areas" title="dom-map-areas">areas</a>;
readonly attribute <a href="urls.html#htmlcollection">HTMLCollection</a> <a href="#dom-map-images" title="dom-map-images">images</a>;
};</pre>
</dd>
</dl><p>The <code><a href="#the-map-element">map</a></code> element, in conjunction with any
<code><a href="#the-area-element">area</a></code> element descendants, defines an <a href="#image-map">image
map</a>. The element <a href="#represents">represents</a> its children.</p><p>The <dfn id="attr-map-name" title="attr-map-name"><code>name</code></dfn> 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 <a href="#space-character" title="space character">space characters</a>. The value of the
<code title="attr-map-name"><a href="#attr-map-name">name</a></code> attribute must not be a
<a href="infrastructure.html#compatibility-caseless" title="compatibility caseless">compatibility-caseless</a>
match for the value of the <code title="attr-map-name"><a href="#attr-map-name">name</a></code>
attribute of another <code><a href="#the-map-element">map</a></code> element in the same
document. If the <code title="attr-id"><a href="elements.html#the-id-attribute">id</a></code> attribute is also
specified, both attributes must have the same value.</p><dl class="domintro"><dt><var title="">map</var> . <code title="dom-map-areas"><a href="#dom-map-areas">areas</a></code></dt>
<dd>
<p>Returns an <code><a href="urls.html#htmlcollection">HTMLCollection</a></code> of the <code><a href="#the-area-element">area</a></code> elements in the <code><a href="#the-map-element">map</a></code>.</p>
</dd>
<dt><var title="">map</var> . <code title="dom-map-images"><a href="#dom-map-images">images</a></code></dt>
<dd>
<p>Returns an <code><a href="urls.html#htmlcollection">HTMLCollection</a></code> of the <code><a href="embedded-content-1.html#the-img-element">img</a></code> and <code><a href="the-iframe-element.html#the-object-element">object</a></code> elements that use the <code><a href="#the-map-element">map</a></code>.</p>
</dd>
</dl><h4 id="the-area-element"><span class="secno">4.8.13 </span>The <dfn><code>area</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected, but only if there is a <code><a href="#the-map-element">map</a></code> element ancestor.</dd>
<dt>Content model:</dt>
<dd>Empty.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dd><code title="attr-area-alt"><a href="#attr-area-alt">alt</a></code></dd>
<dd><code title="attr-area-coords"><a href="#attr-area-coords">coords</a></code></dd>
<dd><code title="attr-area-shape"><a href="#attr-area-shape">shape</a></code></dd>
<dd><code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code></dd>
<dd><code title="attr-hyperlink-target"><a href="links.html#attr-hyperlink-target">target</a></code></dd>
<dd><code title="attr-hyperlink-ping"><a href="links.html#ping">ping</a></code></dd>
<dd><code title="attr-hyperlink-rel"><a href="links.html#attr-hyperlink-rel">rel</a></code></dd>
<dd><code title="attr-hyperlink-media"><a href="links.html#attr-hyperlink-media">media</a></code></dd>
<dd><code title="attr-hyperlink-hreflang"><a href="links.html#attr-hyperlink-hreflang">hreflang</a></code></dd>
<dd><code title="attr-hyperlink-type"><a href="links.html#attr-hyperlink-type">type</a></code></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn id="htmlareaelement">HTMLAreaElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
attribute DOMString <a href="#dom-area-alt" title="dom-area-alt">alt</a>;
attribute DOMString <a href="#dom-area-coords" title="dom-area-coords">coords</a>;
attribute DOMString <a href="#dom-area-shape" title="dom-area-shape">shape</a>;
stringifier attribute DOMString <a href="#dom-area-href" title="dom-area-href">href</a>;
attribute DOMString <a href="#dom-area-target" title="dom-area-target">target</a>;
attribute DOMString <a href="#dom-area-ping" title="dom-area-ping">ping</a>;
attribute DOMString <a href="#dom-area-rel" title="dom-area-rel">rel</a>;
readonly attribute DOMTokenList <a href="#dom-area-rellist" title="dom-area-relList">relList</a>;
attribute DOMString <a href="#dom-area-media" title="dom-area-media">media</a>;
attribute DOMString <a href="#dom-area-hreflang" title="dom-area-hreflang">hreflang</a>;
attribute DOMString <a href="#dom-area-type" title="dom-area-type">type</a>;
// <a href="urls.html#url-decomposition-idl-attributes">URL decomposition IDL attributes</a>
attribute DOMString <a href="#dom-area-protocol" title="dom-area-protocol">protocol</a>;
attribute DOMString <a href="#dom-area-host" title="dom-area-host">host</a>;
attribute DOMString <a href="#dom-area-hostname" title="dom-area-hostname">hostname</a>;
attribute DOMString <a href="#dom-area-port" title="dom-area-port">port</a>;
attribute DOMString <a href="#dom-area-pathname" title="dom-area-pathname">pathname</a>;
attribute DOMString <a href="#dom-area-search" title="dom-area-search">search</a>;
attribute DOMString <a href="#dom-area-hash" title="dom-area-hash">hash</a>;
};</pre>
</dd>
</dl><p>The <code><a href="#the-area-element">area</a></code> element <a href="#represents">represents</a> either a
hyperlink with some text and a corresponding area on an <a href="#image-map">image
map</a>, or a dead area on an image map.</p><p>If the <code><a href="#the-area-element">area</a></code> element has an <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute, then the
<code><a href="#the-area-element">area</a></code> element represents a <a href="links.html#hyperlink">hyperlink</a>. In
this case, the <dfn id="attr-area-alt" title="attr-area-alt"><code>alt</code></dfn>
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 <a href="#image-map">image
map</a>, 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 <code title="attr-area-alt"><a href="#attr-area-alt">alt</a></code>
attribute may be left blank if there is another <code><a href="#the-area-element">area</a></code>
element in the same <a href="#image-map">image map</a> that points to the same
resource and has a non-blank <code title="attr-area-alt"><a href="#attr-area-alt">alt</a></code>
attribute.</p><p>If the <code><a href="#the-area-element">area</a></code> element has no <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute, then the area
represented by the element cannot be selected, and the <code title="attr-area-alt"><a href="#attr-area-alt">alt</a></code> attribute must be omitted.</p><p>In both cases, the <code title="attr-area-shape"><a href="#attr-area-shape">shape</a></code> and
<code title="attr-area-coords"><a href="#attr-area-coords">coords</a></code> attributes specify the
area.</p><p>The <dfn id="attr-area-shape" title="attr-area-shape"><code>shape</code></dfn>
attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a>. 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. </p><table><thead><tr><th>State
</th><th>Keywords
</th></tr></thead><tbody><tr><td rowspan="2"><a href="#attr-area-shape-circle" title="attr-area-shape-circle">Circle state</a>
</td><td><dfn id="attr-area-shape-keyword-circle" title="attr-area-shape-keyword-circle"><code>circle</code></dfn>
</td></tr><tr></tr><tr><td><a href="#attr-area-shape-default" title="attr-area-shape-default">Default state</a>
</td><td><dfn id="attr-area-shape-keyword-default" title="attr-area-shape-keyword-default"><code>default</code></dfn>
</td></tr><tr><td rowspan="2"><a href="#attr-area-shape-poly" title="attr-area-shape-poly">Polygon state</a>
</td><td><dfn id="attr-area-shape-keyword-poly" title="attr-area-shape-keyword-poly"><code>poly</code></dfn>
</td></tr><tr></tr><tr><td rowspan="2"><a href="#attr-area-shape-rect" title="attr-area-shape-rect">Rectangle state</a>
</td><td><dfn id="attr-area-shape-keyword-rect" title="attr-area-shape-keyword-rect"><code>rect</code></dfn>
</td></tr><tr></tr></tbody></table><p>The attribute may be omitted. The <i>missing value default</i> is
the <a href="#attr-area-shape-rect" title="attr-area-shape-rect">rectangle</a> state.</p><p>The <dfn id="attr-area-coords" title="attr-area-coords"><code>coords</code></dfn>
attribute must, if specified, contain a <a href="common-microsyntaxes.html#valid-list-of-integers">valid list of
integers</a>. This attribute gives the coordinates for the shape
described by the <code title="attr-area-shape"><a href="#attr-area-shape">shape</a></code>
attribute. </p><!-- v2: It was suggested by John S. Urban that coords should
support percentages as well as pixels, so that one could use the
same image map for images of various sizes. --><p>In the <dfn id="attr-area-shape-circle" title="attr-area-shape-circle">circle state</dfn>,
<code><a href="#the-area-element">area</a></code> elements must have a <code title="attr-area-coords"><a href="#attr-area-coords">coords</a></code> 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.</p><p>In the <dfn id="attr-area-shape-default" title="attr-area-shape-default">default state</dfn>
state, <code><a href="#the-area-element">area</a></code> elements must not have a <code title="attr-area-coords"><a href="#attr-area-coords">coords</a></code> attribute. (The area is the
whole image.)</p><p>In the <dfn id="attr-area-shape-poly" title="attr-area-shape-poly">polygon state</dfn>,
<code><a href="#the-area-element">area</a></code> elements must have a <code title="attr-area-coords"><a href="#attr-area-coords">coords</a></code> 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.</p><p>In the <dfn id="attr-area-shape-rect" title="attr-area-shape-rect">rectangle state</dfn>,
<code><a href="#the-area-element">area</a></code> elements must have a <code title="attr-area-coords"><a href="#attr-area-coords">coords</a></code> 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.</p><p>The <code title="attr-hyperlink-target"><a href="links.html#attr-hyperlink-target">target</a></code>, <code title="attr-hyperlink-ping"><a href="links.html#ping">ping</a></code>, <code title="attr-hyperlink-rel"><a href="links.html#attr-hyperlink-rel">rel</a></code>, <code title="attr-hyperlink-media"><a href="links.html#attr-hyperlink-media">media</a></code>, <code title="attr-hyperlink-hreflang"><a href="links.html#attr-hyperlink-hreflang">hreflang</a></code>, and <code title="attr-hyperlink-type"><a href="links.html#attr-hyperlink-type">type</a></code> attributes must be omitted
if the <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute is
not present.</p><h4 id="image-maps"><span class="secno">4.8.14 </span>Image maps</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!-- TESTS
http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A%3Cimg%20src%3D%22http%3A//hixie.ch/resources/images/smallcats%22%20usemap%3D%23a%20onclick%3Dw%28%27img%27%29%3E%0A%3Cmap%20name%3Da%3E%0A%20%3Carea%20onclick%3Dw%28%271%27%29%20coords%3D%270%25%200%25%20100%25%20100%25%27%20href%3Djavascript%3A%3E%0A%3C/map%3E
http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A%3Cbody%20onfocus%3D%22w%28document.activeElement.tagName%29%22%3E%0A%3Cimg%20src%3D%22http%3A//hixie.ch/resources/images/smallcats%22%20usemap%3D%23a%20onclick%3Dw%28%27img%27%29%20onfocus%3D%22w%28document.activeElement.tagName%29%22%3E%0A%3Cimg%20src%3D%22http%3A//hixie.ch/resources/images/sample%22%20usemap%3D%23a%20onclick%3Dw%28%27img%27%29%20onfocus%3D%22w%28document.activeElement.tagName%29%22%3E%0A%3Cmap%20name%3Da%20onfocus%3D%22w%28document.activeElement.tagName%29%22%3E%0A%20%3Carea%20onclick%3Dw%28%271%27%29%20coords%3D%270%200%2050%2050%27%20href%3Djavascript%3A%20onfocus%3D%22w%28document.activeElement.tagName%29%22%3E%0A%3C/map%3E%0A%3Cscript%3E%0A%20var%20x%20%3D%20document.getElementsByTagName%28%27img%27%29%5B0%5D%3B%0A%20x.parentNode.appendChild%28x%29%3B%0A%20document.getElementsByTagName%28%27area%27%29%5B0%5D.focus%28%29%3B%0A%3C/script%3E
http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3Ex%3Cmap%3E%3Carea%20shape%3Dpolyg%20coords%3D%221%2C2%203%22%3E%3C/map%3E%0A%3Cscript%3Ex%20%3D%20document.getElementsByTagName%28%27area%27%29%5B0%5D%3B%20w%28x.shape%20+%20%27%20%27%20+%20x.coords%29%3C/script%3E
http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0D%0A%3Cp%3E%3Cimg%20src%3D%22http%3A//hixie.ch/resources/images/astrophy/128%22%20usemap%3D%23a%3E%0D%0A%3Cmap%20name%3Da%3E%3Carea%20shape%3Dcirc%20coords%3D%2220%2C20%2C10%25%22%20href%3D%23%3E%3Carea%20shape%3Dcirc%20coords%3D%2220%2C20%2C10%22%20href%3D%23%3E%3C/map%3E%0D%0A%3Cscript%3Edocument.write%28document.getElementsByTagName%28%27area%27%29%5B0%5D.coords%29%3C/script%3E
--><p>An <dfn id="image-map">image map</dfn> allows geometric areas on an image to be
associated with <a href="links.html#hyperlink" title="hyperlink">hyperlinks</a>.</p><p>An image, in the form of an <code><a href="embedded-content-1.html#the-img-element">img</a></code> element or an
<code><a href="the-iframe-element.html#the-object-element">object</a></code> element representing an image, may be associated
with an image map (in the form of a <code><a href="#the-map-element">map</a></code> element) by
specifying a <dfn id="attr-hyperlink-usemap" title="attr-hyperlink-usemap"><code>usemap</code></dfn> attribute on
the <code><a href="embedded-content-1.html#the-img-element">img</a></code> or <code><a href="the-iframe-element.html#the-object-element">object</a></code> element. The <code title="attr-hyperlink-usemap"><a href="#attr-hyperlink-usemap">usemap</a></code> attribute, if specified,
must be a <a href="common-microsyntaxes.html#valid-hash-name-reference">valid hash-name reference</a> to a
<code><a href="#the-map-element">map</a></code> element.</p><div class="example">
<p>Consider an image that looks as follows:</p>
<p><img alt="A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star." src="images/sample-usemap.png"></p>
<p>If we wanted just the colored areas to be clickable, we could
do it as follows:</p>
<pre><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></pre>
</div><h4 id="mathml"><span class="secno">4.8.15 </span>MathML</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="math"><code>math</code></dfn> element from the <a href="#mathml-namespace">MathML
namespace</a> falls into the <a href="content-models.html#embedded-content">embedded content</a>,
<a href="content-models.html#phrasing-content">phrasing content</a>, and <a href="content-models.html#flow-content">flow content</a>
categories for the purposes of the content models in this
specification.</p><p>The semantics of MathML elements are defined by the MathML
specification and other relevant specifications. <a href="references.html#refsMATHML">[MATHML]</a></p><div class="example">
<p>Here is an example of the use of MathML in an HTML document:</p>
<pre><!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></pre>
</div><h4 id="svg-0"><span class="secno">4.8.16 </span>SVG</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="svg"><code>svg</code></dfn> element from the <a href="#svg-namespace">SVG
namespace</a> falls into the <a href="content-models.html#embedded-content">embedded content</a>,
<a href="content-models.html#phrasing-content">phrasing content</a>, and <a href="content-models.html#flow-content">flow content</a>
categories for the purposes of the content models in this
specification.</p><p>When the SVG <code>foreignObject</code> element contains elements
from the <a href="#html-namespace-0">HTML namespace</a>, such elements must all be
<a href="content-models.html#flow-content">flow content</a>. <a href="references.html#refsSVG">[SVG]</a></p><p>The content model for <code title="">title</code> elements in the
<a href="#svg-namespace">SVG namespace</a> inside <a href="dom.html#html-documents">HTML documents</a> is
<a href="content-models.html#phrasing-content">phrasing content</a>. (This further constrains the
requirements given in the SVG specification.)</p><p>The semantics of SVG elements are defined by the SVG
specification and other relevant specifications. <a href="references.html#refsSVG">[SVG]</a></p><!-- The following paragraph is for bug 7510 --><p>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
<code>foreignObject</code> element. <em>This</em> 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.</p><h4 id="dimension-attributes"><span class="secno">4.8.17 </span><dfn>Dimension attributes</dfn></h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><dfn id="attr-dim-width" title="attr-dim-width"><code>width</code></dfn> and <dfn id="attr-dim-height" title="attr-dim-height"><code>height</code></dfn> attributes on
<code><a href="embedded-content-1.html#the-img-element">img</a></code>, <code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code>, <code><a href="the-iframe-element.html#the-embed-element">embed</a></code>,
<code><a href="the-iframe-element.html#the-object-element">object</a></code>, <code><a href="video.html#video">video</a></code>, and, when their <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="number-state.html#image-button-state" title="attr-input-type-image">Image Button</a> state,
<code><a href="the-input-element.html#the-input-element">input</a></code> 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 <a href="common-microsyntaxes.html#valid-non-negative-integer" title="valid non-negative integer">valid
non-negative integers</a>.</p><p>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:</p><ul><li><span title=""><var title="">specified width</var> - 0.5 ≤
<var title="">specified height</var> * <var title="">target ratio</var> ≤
<var title="">specified width</var> + 0.5</span></li>
<li><span title=""><var title="">specified height</var> - 0.5 ≤
<var title="">specified width</var> / <var title="">target ratio</var> ≤
<var title="">specified height</var> + 0.5</span></li>
<li><span title=""><var title="">specified height</var> = <var title="">specified width</var> = 0</span></li>
</ul><p>The <var title="">target ratio</var> is the ratio of the
intrinsic width to the intrinsic height in the resource. The <var title="">specified width</var> and <var title="">specified
height</var> are the values of the <code title="attr-dim-width"><a href="#attr-dim-width">width</a></code> and <code title="attr-dim-height"><a href="#attr-dim-height">height</a></code> attributes respectively.</p><p>The two attributes must be omitted if the resource in question
does not have both an intrinsic width and an intrinsic height.</p><p>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).</p><p class="note">The dimension attributes are not intended to be used
to stretch the image.</p></body></html>
--- NEW FILE: the-iframe-element.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.8.3 The iframe element — HTML5</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"/><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
p + * > li, dd li { margin: 1em 0; }
dt, dfn { font-weight: bold; font-style: normal; }
dt dfn { font-style: italic; }
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
pre em { font-weight: bolder; font-style: normal; }
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead { border-bottom: solid; }
table tbody th:first-child { border-left: solid; }
table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
img.extra { float: right; }
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
pre.css:first-line { color: #AAAA50; }
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; }
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
dl.domintro dd p { margin: 0.5em 0; }
dl.switch { padding-left: 2em; }
dl.switch > dt { text-indent: -1.5em; }
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
dl.triple { padding: 0 0 0 1em; }
dl.triple dt, dl.triple dd { margin: 0; display: inline }
dl.triple dt:after { content: ':'; }
dl.triple dd:after { content: '\A'; white-space: pre; }
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
a .diff-new { border-bottom: 1px blue solid; }
h2 { page-break-before: always; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; }
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
div.head p { margin: 0; }
div.head h1 { margin: 0; }
div.head .logo { float: right; margin: 0 1em; }
div.head .logo img { border: none } /* remove border from top image */
div.head dl { margin: 1em 0; }
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
body > .toc > li > * { margin-bottom: 0.5em; }
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
.toc, .toc li { list-style: none; }
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
.brief li { margin: 0; padding: 0; }
.brief li p { margin: 0; padding: 0; }
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
.category-list li { display: inline; }
.category-list li:not(:last-child)::after { content: ', '; }
.category-list li > span, .category-list li > a { text-transform: lowercase; }
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
.XXX > :first-child { margin-top: 0; }
p .XXX { line-height: 3em; }
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
.annotation :link, .annotation :visited { color: inherit; }
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
.annotation span { border: none ! important; }
.note { color: green; background: transparent; font-family: sans-serif; }
.warning { color: red; background: transparent; }
.note, .warning { font-weight: bolder; font-style: italic; }
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
.note p:first-child, .warning p:first-child { margin-top: 0; }
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
.warning:before { font-style: normal; }
p.note:before { content: 'Note: '; }
p.warning:before { content: '\26A0 Warning! '; }
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
h4 { position: relative; z-index: 3; }
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
.element {
background: #EEEEFF;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -1.15em;
height: 2em;
width: 0.9em;
background: #EEEEFF;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
td > .example:only-child { margin: 0 0 0 0.1em; }
.tall-and-narrow {
font-size: 0.6em;
column-width: 25em;
column-gap: 1em;
-moz-column-width: 25em;
-moz-column-gap: 1em;
-webkit-column-width: 25em;
-webkit-column-gap: 1em;
}
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
ul.domTree li li { list-style: none; }
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree span { font-style: italic; font-family: serif; }
ul.domTree .t1 code { color: purple; font-weight: bold; }
ul.domTree .t2 { font-style: normal; font-family: monospace; }
ul.domTree .t2 .name { color: black; font-weight: bold; }
ul.domTree .t2 .value { color: blue; font-weight: normal; }
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
ul.domTree .t7 code, .domTree .t8 code { color: green; }
ul.domTree .t10 code { color: teal; }
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
#configUI p label { display: block; }
#configUI #updateUI, #configUI .loginUI { text-align: center; }
#configUI input[type=button] { display: block; margin: auto; }
</style><style type="text/css">
.applies thead th > * { display: block; }
.applies thead code { display: block; }
.applies tbody th { whitespace: nowrap; }
.applies td { text-align: center; }
.applies .yes { background: yellow; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
#table-example-1 caption { padding-bottom: 0.5em; }
#table-example-1 thead, #table-example-1 tbody { border: none; }
#table-example-1 th, #table-example-1 td { border: solid thin; }
#table-example-1 th { font-weight: normal; }
#table-example-1 td { border-style: none solid; vertical-align: top; }
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
#table-example-1 tbody td:first-child::after { content: leader(". "); }
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
#table-example-1 tbody td:first-child + td { width: 10em; }
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
.apple-table-examples * { font-family: "Times", serif; }
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
.apple-table-examples td { text-align: right; vertical-align: top; }
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
.apple-table-examples sup { line-height: 0; }
</style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script>
function getCookie(name) {
var params = location.search.substr(1).split("&");
for (var index = 0; index < params.length; index++) {
if (params[index] == name)
return "1";
var data = params[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
var cookies = document.cookie.split("; ");
for (var index = 0; index < cookies.length; index++) {
var data = cookies[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
return null;
}
function load(script) {
var e = document.createElement('script');
e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
document.body.appendChild(e);
}
function init() {
if (location.search == '?slow-browser')
return;
var configUI = document.createElement('div');
configUI.id = 'configUI';
document.body.appendChild(configUI);
// load('reviewer.js'); // would need cross-site XHR
if (document.getElementById('head'))
load('toc.js');
load('styler.js');
// load('updater.js'); // would need cross-site XHR
load('dfn.js');
// load('status.js'); // would need cross-site XHR
if (getCookie('profile') == '1')
document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
fixBrokenLink();
}
</script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="embedded-content-1.html" title="4.8 Embedded content" rel="prev">
<link href="Overview.html#contents" title="Table of contents" rel="index">
<link href="video.html" title="4.8.7 The video element" rel="next">
</head><body onload="fixBrokenLink(); init()"><div class="head" id="head">
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
</div><div>
<a href="embedded-content-1.html">← 4.8 Embedded content</a> –
<a href="Overview.html#contents">Table of contents</a> –
<a href="video.html">4.8.7 The video element →</a>
<ol class="toc"><li><ol><li><ol><li><a href="the-iframe-element.html#the-iframe-element"><span class="secno">4.8.3 </span>The <code>iframe</code> element</a></li><li><a href="the-iframe-element.html#the-embed-element"><span class="secno">4.8.4 </span>The <code>embed</code> element</a></li><li><a href="the-iframe-element.html#the-object-element"><span class="secno">4.8.5 </span>The <code>object</code> element</a></li><li><a href="the-iframe-element.html#the-param-element"><span class="secno">4.8.6 </span>The <code>param</code> element</a></li></ol></li></ol></li></ol></div>
<h4 id="the-iframe-element"><span class="secno">4.8.3 </span>The <dfn><code>iframe</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
<dd><a href="content-models.html#embedded-content">Embedded content</a>.</dd>
<dd><a href="content-models.html#interactive-content">Interactive content</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href="content-models.html#embedded-content">embedded content</a> is expected.</dd>
<dt>Content model:</dt>
<dd>Text that conforms to the requirements given in the prose.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dd><code title="attr-iframe-src"><a href="#attr-iframe-src">src</a></code></dd>
<dd><code title="attr-iframe-name"><a href="#attr-iframe-name">name</a></code></dd>
<dd><code title="attr-iframe-sandbox"><a href="#attr-iframe-sandbox">sandbox</a></code></dd>
<dd><code title="attr-iframe-seamless"><a href="#attr-iframe-seamless">seamless</a></code></dd>
<dd><code title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code></dd>
<dd><code title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn id="htmliframeelement">HTMLIFrameElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
attribute DOMString <a href="#dom-iframe-src" title="dom-iframe-src">src</a>;
attribute DOMString <a href="#dom-iframe-name" title="dom-iframe-name">name</a>;
attribute DOMString <a href="#dom-iframe-sandbox" title="dom-iframe-sandbox">sandbox</a>;
attribute boolean <a href="#dom-iframe-seamless" title="dom-iframe-seamless">seamless</a>;
attribute DOMString <a href="#dom-dim-width" title="dom-dim-width">width</a>;
attribute DOMString <a href="#dom-dim-height" title="dom-dim-height">height</a>;
readonly attribute Document <a href="#dom-iframe-contentdocument" title="dom-iframe-contentDocument">contentDocument</a>;
readonly attribute <a href="#windowproxy">WindowProxy</a> <a href="#dom-iframe-contentwindow" title="dom-iframe-contentWindow">contentWindow</a>;
};</pre>
</dd>
</dl><!-- v2 doc="" idea (awaiting implementation experience with seamless="" first):
http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-May/014874.html
doc="" would take a string which would then be interpreted as
the source document markup of an HTML document, much like the
above; it would override src="" if it was present, allowing
src="" to be used for legacy UAs:
<iframe seamless sandbox="allow-scripts allow-forms" doc="
<!DOCTYPE HTML>
<title></title>
Welcome to my blog!
</sandbox>
<a href='#' onclick='alert(document.cookie)'>Click here</a>
"></iframe>
(There are things we can do to make this better, e.g. make the
<!DOCTYPE HMTL> and <title></title> bits implicit, maybe
introducing type="" to say whether it's HTML or XML instead of
only supporting HTML, maybe saying that if src="" and doc=""
are both specified they must have identical data, etc.)
--><p>The <code><a href="#the-iframe-element">iframe</a></code> element <a href="#represents">represents</a> a
<a href="browsers.html#nested-browsing-context">nested browsing context</a>.</p><p>The <dfn id="attr-iframe-src" title="attr-iframe-src"><code>src</code></dfn> attribute
gives the address of a page that the <a href="browsers.html#nested-browsing-context">nested browsing
context</a> is to contain. The attribute, if present, must be a
<a href="urls.html#valid-url">valid URL</a>. </p><p>The <dfn id="attr-iframe-name" title="attr-iframe-name"><code>name</code></dfn>
attribute, if present, must be a <a href="browsers.html#valid-browsing-context-name">valid browsing context
name</a>. The given value is used to name the <a href="browsers.html#nested-browsing-context">nested
browsing context</a>. </p><hr><p>The <dfn id="attr-iframe-sandbox" title="attr-iframe-sandbox"><code>sandbox</code></dfn>
attribute, when specified, enables a set of extra restrictions on
any content hosted by the <code><a href="#the-iframe-element">iframe</a></code>. Its value must be an
<a href="common-microsyntaxes.html#unordered-set-of-unique-space-separated-tokens">unordered set of unique space-separated tokens</a>. The
allowed values are <code title="attr-iframe-sandbox-allow-same-origin"><a href="#attr-iframe-sandbox-allow-same-origin">allow-same-origin</a></code>,
<code title="attr-iframe-sandbox-allow-forms"><a href="#attr-iframe-sandbox-allow-forms">allow-forms</a></code>,
and <code title="attr-iframe-sandbox-allow-scripts"><a href="#attr-iframe-sandbox-allow-scripts">allow-scripts</a></code>. When
the attribute is set, the content is treated as being from a unique
<a href="#origin">origin</a>, forms and scripts are disabled, links are
prevented from targeting other <a href="browsers.html#browsing-context" title="browsing
context">browsing contexts</a>, and plugins are disabled. The
<code title="attr-iframe-sandbox-allow-same-origin"><a href="#attr-iframe-sandbox-allow-same-origin">allow-same-origin</a></code>
token allows the content to be treated as being from the same origin
instead of forcing it into a unique origin, and the <code title="attr-iframe-sandbox-allow-forms"><a href="#attr-iframe-sandbox-allow-forms">allow-forms</a></code> and <code title="attr-iframe-sandbox-allow-scripts"><a href="#attr-iframe-sandbox-allow-scripts">allow-scripts</a></code>
tokens re-enable forms and scripts respectively (though scripts are
still prevented from creating popups).</p><div class="example">
<p>In this example, some completely-unknown, potentially hostile,
user-provided HTML content is embedded in a page. Because it is
sandboxed, it is treated by the user agent as being from a unique
origin, despite the content being served from the same site. Thus
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>
<pre><p>We're not scared of you! Here is your content, unedited:</p>
<iframe sandbox src="getusercontent.cgi?id=12193"></iframe></pre>
<p>Note that cookies are still sent to the server in the <code title="">getusercontent.cgi</code> request, though they are not
visible in the <code title="dom-document-cookie"><a href="#dom-document-cookie">document.cookie</a></code> IDL
attribute.</p>
</div><div class="example">
<p>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.</p>
<pre><iframe sandbox="allow-same-origin allow-forms allow-scripts"
src="http://maps.example.com/embedded.html"></iframe></pre>
</div><hr><!-- v2: Might be interesting to have a value on seamless that
allowed event propagation of some sort, maybe based on the WICD
work: http://www.w3.org/TR/WICD/ --><p>The <dfn id="attr-iframe-seamless" title="attr-iframe-seamless"><code>seamless</code></dfn>
attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. When specified, it
indicates that the <code><a href="#the-iframe-element">iframe</a></code> element's <a href="browsers.html#browsing-context">browsing
context</a> is to be rendered in a manner that makes it appear to
be part of the containing document (seamlessly included in the
parent document). </p><p class="note">The attribute can be set or removed dynamically,
with the rendering updating in tandem.</p><div class="example">
<p>In this example, the site's navigation is embedded using a
client-side include using an <code><a href="#the-iframe-element">iframe</a></code>. Any links in the
<code><a href="#the-iframe-element">iframe</a></code> will, in new user agents, be automatically
opened in the <code><a href="#the-iframe-element">iframe</a></code>'s parent browsing context; for
legacy user agents, the site could also include a <code><a href="semantics.html#the-base-element">base</a></code>
element with a <code title="attr-base-target"><a href="semantics.html#attr-base-target">target</a></code>
attribute with the value <code title="">_parent</code>. 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.</p>
<pre><nav><iframe seamless src="nav.include.html"></iframe></nav></pre>
</div><hr><p>The <code><a href="#the-iframe-element">iframe</a></code> element supports <a href="the-map-element.html#dimension-attributes">dimension
attributes</a> for cases where the embedded content has specific
dimensions (e.g. ad units have well-defined dimensions).</p><p>An <code><a href="#the-iframe-element">iframe</a></code> element never has <a href="content-models.html#fallback-content">fallback
content</a>, as it will always create a nested <a href="browsers.html#browsing-context">browsing
context</a>, regardless of whether the specified initial contents
are successfully used.</p><p>Descendants of <code><a href="#the-iframe-element">iframe</a></code> elements represent
nothing. (In legacy user agents that do not support
<code><a href="#the-iframe-element">iframe</a></code> elements, the contents would be parsed as markup
that could act as fallback content.)</p><p>When used in <a href="dom.html#html-documents">HTML documents</a>, the allowed content
model of <code><a href="#the-iframe-element">iframe</a></code> elements is text, except that invoking
the <a href="#html-fragment-parsing-algorithm">HTML fragment parsing algorithm</a> with the
<code><a href="#the-iframe-element">iframe</a></code> element as the <var title="">context</var>
element and the text contents as the <var title="">input</var> must
result in a list of nodes that are all <a href="content-models.html#phrasing-content">phrasing
content</a>, with no <a href="#parse-error" title="parse error">parse
errors</a> having occurred, with no <code><a href="scripting-1.html#script">script</a></code> 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.</p><p>The <code><a href="#the-iframe-element">iframe</a></code> element must be empty in <a href="dom.html#xml-documents">XML
documents</a>.</p><p class="note">The <a href="#html-parser">HTML parser</a> treats markup inside
<code><a href="#the-iframe-element">iframe</a></code> elements as text.</p><div class="example">
<p>Here is an example of a page using an <code><a href="#the-iframe-element">iframe</a></code> to
include advertising from an advertising broker:</p>
<pre><iframe src="http://ads.example.com/?customerid=923513721&amp;format=banner"
width="468" height="60"></iframe></pre>
</div><h4 id="the-embed-element"><span class="secno">4.8.4 </span>The <dfn><code>embed</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!-- (v2?)
we have all kinds of quirks we should define if they come up during
testing, as e.g. shown in:
http://mxr.mozilla.org/mozilla-central/source/layout/generic/nsObjectFrame.cpp
http://trac.webkit.org/browser/trunk/WebCore/html/HTMLEmbedElement.cpp
http://trac.webkit.org/browser/trunk/WebCore/rendering/RenderPartObject.cpp (updateWidget)
e.g. - 240x200 default
- the attributes/params are sent in a name/value pair list as follows (for Gecko):
+ attributes of the element, in source order
+ a synthesised 'src' attribute, if there was no 'src' but
there was a 'data', with the value of the 'data' attribute
+ PARAM/null
+ the params, in source order
(WebKit does something different still)
- the HIDDEN attribute (might be moot now)
--><dl class="element"><dt>Categories</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
<dd><a href="content-models.html#embedded-content">Embedded content</a>.</dd>
<dd><a href="content-models.html#interactive-content">Interactive content</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href="content-models.html#embedded-content">embedded content</a> is expected.</dd>
<dt>Content model:</dt>
<dd>Empty.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dd><code title="attr-embed-src"><a href="#attr-embed-src">src</a></code></dd>
<dd><code title="attr-embed-type"><a href="#attr-embed-type">type</a></code></dd>
<dd><code title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code></dd>
<dd><code title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code></dd>
<dd>Any other attribute that has no namespace (see prose).</dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn id="htmlembedelement">HTMLEmbedElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
attribute DOMString <a href="#dom-embed-src" title="dom-embed-src">src</a>;
attribute DOMString <a href="#dom-embed-type" title="dom-embed-type">type</a>;
attribute DOMString <a href="#dom-dim-width" title="dom-dim-width">width</a>;
attribute DOMString <a href="#dom-dim-height" title="dom-dim-height">height</a>;
};</pre>
</dd>
</dl><p>The <code><a href="#the-embed-element">embed</a></code> element <a href="#represents">represents</a> an
integration point for an external (typically non-HTML) application
or interactive content.</p><p>The <dfn id="attr-embed-src" title="attr-embed-src"><code>src</code></dfn> attribute
gives the address of the resource being embedded. The attribute, if
present, must contain a <a href="urls.html#valid-url">valid URL</a>.</p><p>The <dfn id="attr-embed-type" title="attr-embed-type"><code>type</code></dfn>
attribute, if present, gives the <a href="infrastructure.html#mime-type">MIME type</a> of the plugin to
instantiate. The value must be a <a href="infrastructure.html#valid-mime-type">valid MIME type</a>,
optionally with parameters. If both the <code title="attr-embed-type"><a href="#attr-embed-type">type</a></code> attribute and the <code title="attr-embed-src"><a href="#attr-embed-src">src</a></code> attribute are present, then the
<code title="attr-embed-type"><a href="#attr-embed-type">type</a></code> attribute must specify the
same type as the <a href="#content-type" title="Content-Type">explicit Content-Type
metadata</a> of the resource given by the <code title="attr-embed-src"><a href="#attr-embed-src">src</a></code> attribute.</p><p>Any namespace-less attribute other than <code title="attr-embed-name"><a href="obsolete.html#attr-embed-name">name</a></code> and <code title="attr-embed-align"><a href="obsolete.html#attr-embed-align">align</a></code> <!-- when editing, see also
note below --> may be specified on the <code><a href="#the-embed-element">embed</a></code> element,
so long as its name is <a href="infrastructure.html#xml-compatible">XML-compatible</a> 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 <a href="infrastructure.html#plugin">plugin</a>.</p><p class="note">All attributes in <a href="dom.html#html-documents">HTML documents</a> get
lowercased automatically, so the restriction on uppercase letters
doesn't affect such documents.</p><p class="note">The two exceptions are to exclude legacy attributes
that have side-effects beyond just sending parameters to the
<a href="infrastructure.html#plugin">plugin</a>.</p><p>The <code><a href="#the-embed-element">embed</a></code> element supports <a href="the-map-element.html#dimension-attributes">dimension
attributes</a>.</p><div class="example">
<p>Here's a way to embed a resource that requires a proprietary
plug-in, like Flash:</p>
<pre><embed src="catgame.swf"></pre>
<p>If the user does not have the plug-in (for example if the
plug-in vendor doesn't support the user's platform), then the user
will be unable to use the resource.</p>
<p>To pass the plugin a parameter "quality" with the value "high",
an attribute can be specified:</p>
<pre><embed src="catgame.swf" quality="high"></pre>
<p>This would be equivalent to the following, when using an
<code><a href="#the-object-element">object</a></code> element instead:</p>
<pre><object data="catgame.swf">
<param name="quality" value="high">
</object></pre>
</div><h4 id="the-object-element"><span class="secno">4.8.5 </span>The <dfn><code>object</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
<dd><a href="content-models.html#embedded-content">Embedded content</a>.</dd>
<dd>If the element has a <code title="attr-hyperlink-usemap"><a href="the-map-element.html#attr-hyperlink-usemap">usemap</a></code> attribute: <a href="content-models.html#interactive-content">Interactive content</a>.</dd> <!-- also when showing a plugin or a nested browsing context, but checking that statically is hard...) -->
<dd><a href="forms.html#category-listed" title="category-listed">Listed</a>, <a href="forms.html#category-submit" title="category-submit">submittable</a>, <a href="forms.html#form-associated-element">form-associated element</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href="content-models.html#embedded-content">embedded content</a> is expected.</dd>
<dt>Content model:</dt>
<dd>Zero or more <code><a href="#the-param-element">param</a></code> elements, then, <a href="content-models.html#transparent">transparent</a>.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dd><code title="attr-object-data"><a href="#attr-object-data">data</a></code></dd>
<dd><code title="attr-object-type"><a href="#attr-object-type">type</a></code></dd>
<dd><code title="attr-object-name"><a href="#attr-object-name">name</a></code></dd>
<dd><code title="attr-hyperlink-usemap"><a href="the-map-element.html#attr-hyperlink-usemap">usemap</a></code></dd>
<dd><code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code></dd>
<dd><code title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code></dd>
<dd><code title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn id="htmlobjectelement">HTMLObjectElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
attribute DOMString <a href="#dom-object-data" title="dom-object-data">data</a>;
attribute DOMString <a href="#dom-object-type" title="dom-object-type">type</a>;
attribute DOMString <a href="#dom-object-name" title="dom-object-name">name</a>;
attribute DOMString <a href="#dom-object-usemap" title="dom-object-useMap">useMap</a>;
readonly attribute <a href="forms.html#htmlformelement">HTMLFormElement</a> <a href="#dom-fae-form" title="dom-fae-form">form</a>;
attribute DOMString <a href="#dom-dim-width" title="dom-dim-width">width</a>;
attribute DOMString <a href="#dom-dim-height" title="dom-dim-height">height</a>;
readonly attribute Document <a href="#dom-object-contentdocument" title="dom-object-contentDocument">contentDocument</a>;
readonly attribute <a href="#windowproxy">WindowProxy</a> <a href="#dom-object-contentwindow" title="dom-object-contentWindow">contentWindow</a>;
readonly attribute boolean <a href="#dom-cva-willvalidate" title="dom-cva-willValidate">willValidate</a>;
readonly attribute <a href="#validitystate">ValidityState</a> <a href="#dom-cva-validity" title="dom-cva-validity">validity</a>;
readonly attribute DOMString <a href="#dom-cva-validationmessage" title="dom-cva-validationMessage">validationMessage</a>;
boolean <a href="#dom-cva-checkvalidatity" title="dom-cva-checkValidatity">checkValidity</a>();
void <a href="#dom-cva-setcustomvalidity" title="dom-cva-setCustomValidity">setCustomValidity</a>(in DOMString error);
};</pre>
</dd>
</dl><p>The <code><a href="#the-object-element">object</a></code> element can represent an external
resource, which, depending on the type of the resource, will either
be treated as an image, as a <a href="browsers.html#nested-browsing-context">nested browsing context</a>,
or as an external resource to be processed by a
<a href="infrastructure.html#plugin">plugin</a>.</p><p>The <dfn id="attr-object-data" title="attr-object-data"><code>data</code></dfn>
attribute, if present, specifies the address of the resource. If
present, the attribute must be a <a href="urls.html#valid-url">valid URL</a>.</p><p>The <dfn id="attr-object-type" title="attr-object-type"><code>type</code></dfn>
attribute, if present, specifies the type of the resource. If
present, the attribute must be a <a href="infrastructure.html#valid-mime-type">valid MIME type</a>,
optionally with parameters.</p><p>One or both of the <code title="attr-object-data"><a href="#attr-object-data">data</a></code> and
<code title="attr-object-type"><a href="#attr-object-type">type</a></code> attributes must be
present.</p><p>The <dfn id="attr-object-name" title="attr-object-name"><code>name</code></dfn>
attribute, if present, must be a <a href="browsers.html#valid-browsing-context-name">valid browsing context
name</a>. The given value is used to name the <a href="browsers.html#nested-browsing-context">nested
browsing context</a>, if applicable.</p><p>The <code title="attr-hyperlink-usemap"><a href="the-map-element.html#attr-hyperlink-usemap">usemap</a></code> attribute,
if present while the <code><a href="#the-object-element">object</a></code> element represents an
image, can indicate that the object has an associated <a href="the-map-element.html#image-map">image
map</a>. </p><p>The <code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code> attribute is used to
explicitly associate the <code><a href="#the-object-element">object</a></code> element with its
<a href="association-of-controls-and-forms.html#form-owner">form owner</a>.</p><p>The <code><a href="#the-object-element">object</a></code> element supports <a href="the-map-element.html#dimension-attributes">dimension
attributes</a>.</p><div class="example">
<p>In the following example, a Java applet is embedded in a page
using the <code><a href="#the-object-element">object</a></code> 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.)</p>
<pre><figure>
<dd>
<object type="application/x-java-applet">
<param name="code" value="MyJavaClass">
<p>You do not have Java available, or it is disabled.</p>
</object>
</dd>
<dt>My Java Clock</dt>
</figure></pre>
</div><div class="example">
<p>In this example, an HTML page is embedded in another using the
<code><a href="#the-object-element">object</a></code> element.</p>
<pre><figure>
<dd><object data="clock.html"></object>
<dt>My HTML Clock
</figure></pre>
</div><h4 id="the-param-element"><span class="secno">4.8.6 </span>The <dfn><code>param</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
<dd>None.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>As a child of an <code><a href="#the-object-element">object</a></code> element, before any <a href="content-models.html#flow-content">flow content</a>.</dd>
<dt>Content model:</dt>
<dd>Empty.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dd><code title="attr-param-name"><a href="#attr-param-name">name</a></code></dd>
<dd><code title="attr-param-value"><a href="#attr-param-value">value</a></code></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn id="htmlparamelement">HTMLParamElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
attribute DOMString <a href="#dom-param-name" title="dom-param-name">name</a>;
attribute DOMString <a href="#dom-param-value" title="dom-param-value">value</a>;
};</pre>
</dd>
</dl><p>The <code><a href="#the-param-element">param</a></code> element defines parameters for plugins
invoked by <code><a href="#the-object-element">object</a></code> elements. It does not <a href="#represents" title="represents">represent</a> anything on its own.</p><p>The <dfn id="attr-param-name" title="attr-param-name"><code>name</code></dfn>
attribute gives the name of the parameter.</p><p>The <dfn id="attr-param-value" title="attr-param-value"><code>value</code></dfn>
attribute gives the value of the parameter.</p><p>Both attributes must be present. They may have any value.</p><div class="example">
<p>The following example shows how the <code><a href="#the-param-element">param</a></code> element
can be used to pass a parameter to a plugin, in this case the Flash
plugin.</p>
<pre><!DOCTYPE HTML>
<html lang="en">
<head>
<title>Flash test page</title>
</head>
<body>
<p>
<object type="application/x-shockwave-flash">
<strong><param name=movie value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"></strong>
This page requires the use of a proprietary technology. Since you
have not installed the software product required to view this
page, you should try visiting another site that instead uses open
vendor-neutral technologies.
</object>
</p>
</body>
</html></pre>
</div></body></html>
--- NEW FILE: common-input-element-attributes.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.10.5.2 Common input element attributes — HTML5</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"/><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
p + * > li, dd li { margin: 1em 0; }
dt, dfn { font-weight: bold; font-style: normal; }
dt dfn { font-style: italic; }
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
pre em { font-weight: bolder; font-style: normal; }
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead { border-bottom: solid; }
table tbody th:first-child { border-left: solid; }
table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
img.extra { float: right; }
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
pre.css:first-line { color: #AAAA50; }
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; }
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
dl.domintro dd p { margin: 0.5em 0; }
dl.switch { padding-left: 2em; }
dl.switch > dt { text-indent: -1.5em; }
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
dl.triple { padding: 0 0 0 1em; }
dl.triple dt, dl.triple dd { margin: 0; display: inline }
dl.triple dt:after { content: ':'; }
dl.triple dd:after { content: '\A'; white-space: pre; }
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
a .diff-new { border-bottom: 1px blue solid; }
h2 { page-break-before: always; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; }
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
div.head p { margin: 0; }
div.head h1 { margin: 0; }
div.head .logo { float: right; margin: 0 1em; }
div.head .logo img { border: none } /* remove border from top image */
div.head dl { margin: 1em 0; }
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
body > .toc > li > * { margin-bottom: 0.5em; }
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
.toc, .toc li { list-style: none; }
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
.brief li { margin: 0; padding: 0; }
.brief li p { margin: 0; padding: 0; }
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
.category-list li { display: inline; }
.category-list li:not(:last-child)::after { content: ', '; }
.category-list li > span, .category-list li > a { text-transform: lowercase; }
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
.XXX > :first-child { margin-top: 0; }
p .XXX { line-height: 3em; }
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
.annotation :link, .annotation :visited { color: inherit; }
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
.annotation span { border: none ! important; }
.note { color: green; background: transparent; font-family: sans-serif; }
.warning { color: red; background: transparent; }
.note, .warning { font-weight: bolder; font-style: italic; }
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
.note p:first-child, .warning p:first-child { margin-top: 0; }
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
.warning:before { font-style: normal; }
p.note:before { content: 'Note: '; }
p.warning:before { content: '\26A0 Warning! '; }
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
h4 { position: relative; z-index: 3; }
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
.element {
background: #EEEEFF;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -1.15em;
height: 2em;
width: 0.9em;
background: #EEEEFF;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
td > .example:only-child { margin: 0 0 0 0.1em; }
.tall-and-narrow {
font-size: 0.6em;
column-width: 25em;
column-gap: 1em;
-moz-column-width: 25em;
-moz-column-gap: 1em;
-webkit-column-width: 25em;
-webkit-column-gap: 1em;
}
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
ul.domTree li li { list-style: none; }
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree span { font-style: italic; font-family: serif; }
ul.domTree .t1 code { color: purple; font-weight: bold; }
ul.domTree .t2 { font-style: normal; font-family: monospace; }
ul.domTree .t2 .name { color: black; font-weight: bold; }
ul.domTree .t2 .value { color: blue; font-weight: normal; }
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
ul.domTree .t7 code, .domTree .t8 code { color: green; }
ul.domTree .t10 code { color: teal; }
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
#configUI p label { display: block; }
#configUI #updateUI, #configUI .loginUI { text-align: center; }
#configUI input[type=button] { display: block; margin: auto; }
</style><style type="text/css">
.applies thead th > * { display: block; }
.applies thead code { display: block; }
.applies tbody th { whitespace: nowrap; }
.applies td { text-align: center; }
.applies .yes { background: yellow; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
#table-example-1 caption { padding-bottom: 0.5em; }
#table-example-1 thead, #table-example-1 tbody { border: none; }
#table-example-1 th, #table-example-1 td { border: solid thin; }
#table-example-1 th { font-weight: normal; }
#table-example-1 td { border-style: none solid; vertical-align: top; }
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
#table-example-1 tbody td:first-child::after { content: leader(". "); }
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
#table-example-1 tbody td:first-child + td { width: 10em; }
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
.apple-table-examples * { font-family: "Times", serif; }
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
.apple-table-examples td { text-align: right; vertical-align: top; }
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
.apple-table-examples sup { line-height: 0; }
</style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script>
function getCookie(name) {
var params = location.search.substr(1).split("&");
for (var index = 0; index < params.length; index++) {
if (params[index] == name)
return "1";
var data = params[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
var cookies = document.cookie.split("; ");
for (var index = 0; index < cookies.length; index++) {
var data = cookies[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
return null;
}
function load(script) {
var e = document.createElement('script');
e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
document.body.appendChild(e);
}
function init() {
if (location.search == '?slow-browser')
return;
var configUI = document.createElement('div');
configUI.id = 'configUI';
document.body.appendChild(configUI);
// load('reviewer.js'); // would need cross-site XHR
if (document.getElementById('head'))
load('toc.js');
load('styler.js');
// load('updater.js'); // would need cross-site XHR
load('dfn.js');
// load('status.js'); // would need cross-site XHR
if (getCookie('profile') == '1')
document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
fixBrokenLink();
}
</script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="number-state.html" title="4.10.5.1.13 Number state" rel="prev">
<link href="Overview.html#contents" title="Table of contents" rel="index">
<link href="the-button-element.html" title="4.10.6 The button element" rel="next">
</head><body onload="fixBrokenLink(); init()"><div class="head" id="head">
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
</div><div>
<a href="number-state.html">← 4.10.5.1.13 Number state</a> –
<a href="Overview.html#contents">Table of contents</a> –
<a href="the-button-element.html">4.10.6 The button element →</a>
<ol class="toc"><li><ol><li><ol><li><ol><li><a href="common-input-element-attributes.html#common-input-element-attributes"><span class="secno">4.10.5.2 </span>Common <code>input</code> element attributes</a>
<ol><li><a href="common-input-element-attributes.html#the-autocomplete-attribute"><span class="secno">4.10.5.2.1 </span>The <code title="attr-input-autocomplete">autocomplete</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-list-attribute"><span class="secno">4.10.5.2.2 </span>The <code title="attr-input-list">list</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-readonly-attribute"><span class="secno">4.10.5.2.3 </span>The <code title="attr-input-readonly">readonly</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-size-attribute"><span class="secno">4.10.5.2.4 </span>The <code title="attr-input-size">size</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-required-attribute"><span class="secno">4.10.5.2.5 </span>The <code title="attr-input-required">required</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-multiple-attribute"><span class="secno">4.10.5.26 </span>The <code title="attr-input-multiple">multiple</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-maxlength-attribute"><span class="secno">4.10.5.2.7 </span>The <code title="attr-input-maxlength">maxlength</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-pattern-attribute"><span class="secno">4.10.5.2.8 </span>The <code title="attr-input-pattern">pattern</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-min-and-max-attributes"><span class="secno">4.10.5.2.9 </span>The <code title="attr-input-min">min</code> and <code title="attr-input-max">max</code> attributes</a></li><li><a href="common-input-element-attributes.html#the-step-attribute"><span class="secno">4.10.5.2.10 </span>The <code title="attr-input-step">step</code> attribute</a></li><li><a href="common-input-element-attributes.html#the-placeholder-attribute"><span class="secno">4.10.5.2.11 </span>The <code title="attr-input-placeholder">placeholder</code> atribute</a></li></ol></li><li><a href="common-input-element-attributes.html#common-input-element-apis"><span class="secno">4.10.5.3 </span>Common <code>input</code> element APIs</a></li></ol></li></ol></li></ol></li></ol></div>
<h5 id="common-input-element-attributes"><span class="secno">4.10.5.2 </span>Common <code><a href="the-input-element.html#the-input-element">input</a></code> element attributes</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h6 id="the-autocomplete-attribute"><span class="secno">4.10.5.2.1 </span>The <code title="attr-input-autocomplete"><a href="#attr-input-autocomplete">autocomplete</a></code> attribute</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>User agents sometimes have features for helping users fill forms
in, for example prefilling the user's address based on earlier user
input.</p><p>The <dfn id="attr-input-autocomplete" title="attr-input-autocomplete"><code>autocomplete</code></dfn>
attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a>. The attribute has
three states. The <code title="attr-input-autocomplete-on">on</code>
keyword maps to the <dfn id="attr-input-autocomplete-on-state" title="attr-input-autocomplete-on-state">on</dfn> state, and the
<code title="attr-input-autocomplete-off">off</code> keyword maps to
the <dfn id="attr-input-autocomplete-off-state" title="attr-input-autocomplete-off-state">off</dfn>
state. The attribute may also be omitted. The <i>missing value
default</i> is the <dfn id="attr-input-autocomplete-default-state" title="attr-input-autocomplete-default-state">default</dfn>
state.</p><p>The <a href="#attr-input-autocomplete-off-state" title="attr-input-autocomplete-off-state">off</a>
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.</p><p>Conversely, the <a href="#attr-input-autocomplete-on-state" title="attr-input-autocomplete-on-state">on</a> 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.</p><p>The <a href="#attr-input-autocomplete-default-state" title="attr-input-autocomplete-default-state">default</a> state
indicates that the user agent is to use the <code title="attr-form-autocomplete"><a href="forms.html#attr-form-autocomplete">autocomplete</a></code> attribute on the
element's <a href="association-of-controls-and-forms.html#form-owner">form owner</a> instead. (By default, the <code title="attr-form-autocomplete"><a href="forms.html#attr-form-autocomplete">autocomplete</a></code> attribute of
<code><a href="forms.html#the-form-element">form</a></code> elements is in the <a href="forms.html#attr-form-autocomplete-on-state" title="attr-form-autocomplete-on-state">on</a> state.)</p><div class="example">
<p>Banks frequently do not want UAs to prefill login
information:</p>
<pre><p><label>Account: <input type="text" name="ac" autocomplete="off"></label></p>
<p><label>PIN: <input type="password" name="pin" autocomplete="off"></label></p></pre>
</div><h6 id="the-list-attribute"><span class="secno">4.10.5.2.2 </span>The <code title="attr-input-list"><a href="#attr-input-list">list</a></code> attribute</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-input-list" title="attr-input-list"><code>list</code></dfn>
attribute is used to identify an element that lists predefined
options suggested to the user.</p><p>If present, its value must be the ID of a <code><a href="the-button-element.html#the-datalist-element">datalist</a></code>
element in the same document.</p><div class="example">
<p>This URL field offers some suggestions.</p>
<pre><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></pre>
<p>Other URLs from the user's history might show also; this is up
to the user agent.</p>
</div><h6 id="the-readonly-attribute"><span class="secno">4.10.5.2.3 </span>The <code title="attr-input-readonly"><a href="#attr-input-readonly">readonly</a></code> attribute</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-input-readonly" title="attr-input-readonly"><code>readonly</code></dfn>
attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a> that controls whether
or not the use can edit the form control. </p><div class="example">
<p>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).</p>
<pre><form action="products.cgi" method=post enctype="multipart/formdata">
<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></pre>
</div><h6 id="the-size-attribute"><span class="secno">4.10.5.2.4 </span>The <code title="attr-input-size"><a href="#attr-input-size">size</a></code> attribute</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-input-size" title="attr-input-size"><code>size</code></dfn>
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 <a href="#concept-fe-value" title="concept-fe-value">value</a>.</p><p>The <code title="attr-input-size"><a href="#attr-input-size">size</a></code> attribute, if
specified, must have a value that is a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative
integer</a> greater than zero.</p><h6 id="the-required-attribute"><span class="secno">4.10.5.2.5 </span>The <code title="attr-input-required"><a href="#attr-input-required">required</a></code> attribute</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-input-required" title="attr-input-required"><code>required</code></dfn>
attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. When specified, the
element is <dfn id="concept-input-required" title="concept-input-required"><i>required</i></dfn>.</p><div class="example">
<p>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 considerd valid if the user types the same password in the
password field and this third field.</p>
<pre><h1>Create new account</h1>
<form action="/newaccount" method=post>
<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 onforminput="setCustomValidity(value != password1.value ? 'Passwords do not match.' : '')">
<p>
<input type=submit value="Create account">
</form></pre>
</div><h6 id="the-multiple-attribute"><span class="secno">4.10.5.2.6 </span>The <code title="attr-input-multiple"><a href="#attr-input-multiple">multiple</a></code> attribute</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-input-multiple" title="attr-input-multiple"><code>multiple</code></dfn>
attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a> that indicates whether
the user is to be allowed to specify more than one value.</p><div class="example">
<p>The following extract shows how an e-mail client's "Cc" field
could accept multiple e-mail addresses.</p>
<pre><label>Cc: <input type=email multiple name=cc></label></pre>
</div><div class="example">
<p>The following extract shows how an e-mail client's "Attachments"
field could accept multiple files for upload.</p>
<pre><label>Attachments: <input type=file multiple name=att></label></pre>
</div><h6 id="the-maxlength-attribute"><span class="secno">4.10.5.2.7 </span>The <code title="attr-input-maxlength"><a href="#attr-input-maxlength">maxlength</a></code> attribute</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-input-maxlength" title="attr-input-maxlength"><code>maxlength</code></dfn>
attribute is a <a href="association-of-controls-and-forms.html#attr-fe-maxlength" title="attr-fe-maxlength">form control <code title="">maxlength</code> attribute</a>.</p><p>If the <code><a href="the-input-element.html#the-input-element">input</a></code> element has a <a href="association-of-controls-and-forms.html#maximum-allowed-value-length">maximum allowed
value length</a>, then the <a href="#code-point-length">code-point length</a> of the
value of the element's <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code>
attribute must be equal to or less than the element's <a href="association-of-controls-and-forms.html#maximum-allowed-value-length">maximum
allowed value length</a>.</p><div class="example">
<p>The following extract shows how a messaging client's text entry
could be arbitrarily restricted to a fixed number of characters,
thus forcing any conversion through this medium to be terse and
discouraging intelligent discourse.</p>
<pre>What are you doing? <input name=status maxlength=140></pre>
</div><h6 id="the-pattern-attribute"><span class="secno">4.10.5.2.8 </span>The <code title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code> attribute</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-input-pattern" title="attr-input-pattern"><code>pattern</code></dfn>
attribute specifies a regular expression against which the control's
<a href="#concept-fe-value" title="concept-fe-value">value</a> is to be checked.</p><p>If specified, the attribute's value must match the JavaScript <i title="">Pattern</i> production. <a href="references.html#refsECMA262">[ECMA262]</a></p><p>When an <code><a href="the-input-element.html#the-input-element">input</a></code> element has a <code title="attr-input-pattern"><a href="#attr-input-pattern">pattern</a></code> attribute specified,
authors should include a <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code>
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.</p><div class="example">
<p>For example, the following snippet:</p>
<pre><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></pre>
<p>...could cause the UA to display an alert such as:</p>
<pre><samp>A part number is a digit followed by three uppercase letters.
You cannot complete this form until the field is correct.</samp></pre>
</div><p>When a control has a <code>pattern</code> attribute, the
<code><a href="semantics.html#the-title-element-0">title</a></code> 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.</p><p class="example">For instance, if the title attribute contained
the caption of the control, assistive technology could end up saying
something like <samp>The text you have entered does not match the
required pattern. Birthday</samp>, which is not useful.</p><p>UAs may still show the <code><a href="semantics.html#the-title-element-0">title</a></code> in non-error situations
(for example, as a tooltip when hovering over the control), so
authors should be careful not to word <code><a href="semantics.html#the-title-element-0">title</a></code>s as if an
error has necessarily occurred.</p><h6 id="the-min-and-max-attributes"><span class="secno">4.10.5.2.9 </span>The <code title="attr-input-min"><a href="#attr-input-min">min</a></code> and <code title="attr-input-max"><a href="#attr-input-max">max</a></code> attributes</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-input-min" title="attr-input-min"><code>min</code></dfn> and <dfn id="attr-input-max" title="attr-input-max"><code>max</code></dfn> attributes indicate
the allowed range of values for the element.</p><p>The <code title="attr-input-max"><a href="#attr-input-max">max</a></code> attribute's value
(the <a href="#concept-input-max" title="concept-input-max">maximum</a>) must not be
less than the <code title="attr-input-min"><a href="#attr-input-min">min</a></code> attribute's
value (its <a href="#concept-input-min" title="concept-input-min">minimum</a>).</p><div class="example">
<p>The following date control limits input to dates that are before
the 1980s:</p>
<pre><input name=bday type=date max="1979-12-31"></pre>
</div><div class="example">
<p>The following number control limits input to whole numbers
greater than zero:</p>
<pre><input name=quantity required type=number min=1 value=1></pre>
</div><h6 id="the-step-attribute"><span class="secno">4.10.5.2.10 </span>The <code title="attr-input-step"><a href="#attr-input-step">step</a></code> attribute</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-input-step" title="attr-input-step"><code>step</code></dfn>
attribute indicates the granularity that is expected (and required)
of the <a href="#concept-fe-value" title="concept-fe-value">value</a>, by limiting the
allowed values. </p><p>The <code title="attr-input-step"><a href="#attr-input-step">step</a></code> attribute, if
specified, must either have a value that is a <a href="common-microsyntaxes.html#valid-floating-point-number">valid floating
point number</a> that <a href="#rules-for-parsing-floating-point-number-values" title="rules for parsing floating
point number values">parses</a> to a number that is greater than
zero, or must have a value that is an <a href="infrastructure.html#ascii-case-insensitive">ASCII
case-insensitive</a> match for the string "<code title="">any</code>".</p><div class="example">
<p>The following range control only accepts values in the range
0..1, and allows 256 steps in that range:</p>
<pre><input name=opacity type=range min=0 max=1 step=0.00392156863></pre>
</div><div class="example">
<p>The following control allows any time in the day to be selected,
with any accuracy (e.g. thousandth-of-a-second accuracy or
more):</p>
<pre><input name=favtime type=time step=any></pre>
<p>Normally, time controls are limited to an accuracy of one
minute.</p>
</div><h6 id="the-placeholder-attribute"><span class="secno">4.10.5.2.11 </span>The <code title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code> attribute</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!-- similar text in the <textarea> section --><p>The <dfn id="attr-input-placeholder" title="attr-input-placeholder"><code>placeholder</code></dfn>
attribute represents a <em>short</em> hint (a word or short phrase)
intended to aid the user with data entry. A hint could be a sample
value or a brief description of the expected format. The attribute,
if specified, must have a value that contains no U+000A LINE FEED
(LF) or U+000D CARRIAGE RETURN (CR) characters.</p><p class="note">For a longer hint or other advisory text, the <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute is more appropriate.</p><p>The <code title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>
attribute should not be used as an alternative to a
<code><a href="forms.html#the-label-element">label</a></code>.</p><div class="example">
<p>Here is an example of a mail configuration user interface that
uses the <code title="attr-input-placeholder"><a href="#attr-input-placeholder">placeholder</a></code>
attribute:</p>
<pre><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></pre>
</div><h5 id="common-input-element-apis"><span class="secno">4.10.5.3 </span>Common <code><a href="the-input-element.html#the-input-element">input</a></code> element APIs</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">input</var> . <code title="dom-input-value"><a href="#dom-input-value">value</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns the current <a href="#concept-fe-value" title="concept-fe-value">value</a>
of the form control.</p>
<p>Can be set, to change the value.</p>
<p>Throws an <code><a href="urls.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception if it is
set to any value other than the empty string when the control is a
file upload control.</p>
</dd>
<dt><var title="">input</var> . <code title="dom-input-checked"><a href="#dom-input-checked">checked</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns the current <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a> of the form
control.</p>
<p>Can be set, to change the <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a>.</p>
</dd>
<dt><var title="">input</var> . <code title="dom-input-files"><a href="#dom-input-files">files</a></code></dt>
<dd>
<p>Returns a <code>FileList</code> object listing the <a href="number-state.html#concept-input-type-file-selected" title="concept-input-type-file-selected">selected files</a> of
the form control.</p>
<p>Throws an <code><a href="urls.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception if the
control isn't a file control.</p>
</dd>
<dt><var title="">input</var> . <code title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns a <code>Date</code> object representing the form
control's <a href="#concept-fe-value" title="concept-fe-value">value</a>, if
applicable; otherwise, returns null.</p>
<p>Can be set, to change the value.</p>
<p>Throws an <code><a href="urls.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception if the
control isn't date- or time-based.</p>
</dd>
<dt><var title="">input</var> . <code title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns a number representing the form control's <a href="#concept-fe-value" title="concept-fe-value">value</a>, if applicable; otherwise,
returns null.</p>
<p>Can be set, to change the value.</p>
<p>Throws an <code><a href="urls.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception if the
control is neither date- or time-based nor numeric.</p>
</dd>
<dt><var title="">input</var> . <code title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp</a></code>( [ <var title="">n</var> ] )</dt>
<dt><var title="">input</var> . <code title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown</a></code>( [ <var title="">n</var> ] )</dt>
<dd>
<p>Changes the form control's <a href="#concept-fe-value" title="concept-fe-value">value</a> by the value given in the
<code title="attr-input-step"><a href="#attr-input-step">step</a></code> attribute, multiplied by
<var title="">n</var>. The default is 1.</p>
<p>Throws <code><a href="urls.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception if the control
is neither date- or time-based nor numeric, if the <code title="attr-input-step"><a href="#attr-input-step">step</a></code> attribute's value is "<code title="">any</code>", if the current <a href="#concept-fe-value" title="concept-fe-value">value</a> could not be parsed, or if
stepping in the given direction by the given amount would take the
value out of range.</p>
</dd>
<dt><var title="">input</var> . <code title="dom-input-list"><a href="#dom-input-list">list</a></code></dt>
<dd>
<p>Returns the <code><a href="the-button-element.html#the-datalist-element">datalist</a></code> element indicated by the
<code title="attr-input-list"><a href="#attr-input-list">list</a></code> attribute.</p>
</dd>
<dt><var title="">input</var> . <code title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code></dt>
<dd>
<p>Returns the <code><a href="the-button-element.html#the-option-element">option</a></code> element from the
<code><a href="the-button-element.html#the-datalist-element">datalist</a></code> element indicated by the <code title="attr-input-list"><a href="#attr-input-list">list</a></code> attribute that matches the
form control's <a href="#concept-fe-value" title="concept-fe-value">value</a>.</p>
</dd>
</dl></body></html>
--- NEW FILE: embedded-content-1.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.8 Embedded content — HTML5</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"/><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
[...1246 lines suppressed...]
that alternative text be included (as appropriate according to the
kind of image involved, as described in the above entries), so that
the e-mail is still usable should the user use a mail client that
does not support images, or should the document be forwarded on to
other users whose abilities might not include easily seeing
images.</p><h6 id="general-guidelines"><span class="secno">4.8.2.1.12 </span>General guidelines</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The most general rule to consider when writing alternative text
is the following: <strong>the intent is that replacing every image
with the text of its <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute
not change the meaning of the page</strong>.</p><p>So, in general, alternative text can be written by considering
what one would have written had one not been able to include the
image.</p><p>A corollary to this is that the <code title="attr-img-alt"><a href="#attr-img-alt">alt</a></code> attribute's value should never
contain text that could be considered the image's <em>caption</em>,
<em>title</em>, or <em>legend</em>. It is supposed to contain
replacement text that could be used by users <em>instead</em> of the
image; it is not meant to supplement the image. The <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute can be used for
supplemental information.</p><p class="note">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.</p></body></html>
--- NEW FILE: the-input-element.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.10.5 The input element — HTML5</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"/><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
[...1372 lines suppressed...]
</td><td class="yes"> Yes <!-- Checkbox -->
<!-- <td class="yes"> Yes Radio Button -->
</td><td class="yes"> Yes <!-- File Upload -->
</td><td class="no"> · <!-- Submit Button -->
</td><td class="no"> · <!-- Image Button -->
</td><td class="no"> · <!-- Reset Button -->
<!-- <td class="no"> · Button -->
</td></tr></tbody></table><p>The <dfn id="attr-input-value" title="attr-input-value"><code>value</code></dfn>
content attribute gives the default <a href="#concept-fe-value" title="concept-fe-value">value</a> of the <code><a href="#the-input-element">input</a></code>
element. </p><p>The <dfn id="attr-input-checked" title="attr-input-checked"><code>checked</code></dfn>
content attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a> that gives the
default <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a> of the
<code><a href="#the-input-element">input</a></code> element. </p><p>The <code title="attr-fae-form"><a href="association-of-controls-and-forms.html#attr-fae-form">form</a></code> attribute is used to
explicitly associate the <code><a href="#the-input-element">input</a></code> element with its
<a href="association-of-controls-and-forms.html#form-owner">form owner</a>. The <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code>
attribute represents the element's name. The <code title="attr-fe-disabled"><a href="association-of-controls-and-forms.html#attr-fe-disabled">disabled</a></code> attribute is used to make
the control non-interactive and to prevent its value from being
submitted. The <code title="attr-fe-autofocus"><a href="association-of-controls-and-forms.html#attr-fe-autofocus">autofocus</a></code>
attribute controls focus.</p></body></html>
--- NEW FILE: grouping-content.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.5 Grouping content — HTML5</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"/><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
p + * > li, dd li { margin: 1em 0; }
dt, dfn { font-weight: bold; font-style: normal; }
dt dfn { font-style: italic; }
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
pre em { font-weight: bolder; font-style: normal; }
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead { border-bottom: solid; }
table tbody th:first-child { border-left: solid; }
table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
img.extra { float: right; }
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
pre.css:first-line { color: #AAAA50; }
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; }
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
dl.domintro dd p { margin: 0.5em 0; }
dl.switch { padding-left: 2em; }
dl.switch > dt { text-indent: -1.5em; }
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
dl.triple { padding: 0 0 0 1em; }
dl.triple dt, dl.triple dd { margin: 0; display: inline }
dl.triple dt:after { content: ':'; }
dl.triple dd:after { content: '\A'; white-space: pre; }
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
a .diff-new { border-bottom: 1px blue solid; }
h2 { page-break-before: always; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; }
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
div.head p { margin: 0; }
div.head h1 { margin: 0; }
div.head .logo { float: right; margin: 0 1em; }
div.head .logo img { border: none } /* remove border from top image */
div.head dl { margin: 1em 0; }
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
body > .toc > li > * { margin-bottom: 0.5em; }
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
.toc, .toc li { list-style: none; }
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
.brief li { margin: 0; padding: 0; }
.brief li p { margin: 0; padding: 0; }
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
.category-list li { display: inline; }
.category-list li:not(:last-child)::after { content: ', '; }
.category-list li > span, .category-list li > a { text-transform: lowercase; }
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
.XXX > :first-child { margin-top: 0; }
p .XXX { line-height: 3em; }
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
.annotation :link, .annotation :visited { color: inherit; }
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
.annotation span { border: none ! important; }
.note { color: green; background: transparent; font-family: sans-serif; }
.warning { color: red; background: transparent; }
.note, .warning { font-weight: bolder; font-style: italic; }
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
.note p:first-child, .warning p:first-child { margin-top: 0; }
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
.warning:before { font-style: normal; }
p.note:before { content: 'Note: '; }
p.warning:before { content: '\26A0 Warning! '; }
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
h4 { position: relative; z-index: 3; }
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
.element {
background: #EEEEFF;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -1.15em;
height: 2em;
width: 0.9em;
background: #EEEEFF;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
td > .example:only-child { margin: 0 0 0 0.1em; }
.tall-and-narrow {
font-size: 0.6em;
column-width: 25em;
column-gap: 1em;
-moz-column-width: 25em;
-moz-column-gap: 1em;
-webkit-column-width: 25em;
-webkit-column-gap: 1em;
}
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
ul.domTree li li { list-style: none; }
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree span { font-style: italic; font-family: serif; }
ul.domTree .t1 code { color: purple; font-weight: bold; }
ul.domTree .t2 { font-style: normal; font-family: monospace; }
ul.domTree .t2 .name { color: black; font-weight: bold; }
ul.domTree .t2 .value { color: blue; font-weight: normal; }
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
ul.domTree .t7 code, .domTree .t8 code { color: green; }
ul.domTree .t10 code { color: teal; }
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
#configUI p label { display: block; }
#configUI #updateUI, #configUI .loginUI { text-align: center; }
#configUI input[type=button] { display: block; margin: auto; }
</style><style type="text/css">
.applies thead th > * { display: block; }
.applies thead code { display: block; }
.applies tbody th { whitespace: nowrap; }
.applies td { text-align: center; }
.applies .yes { background: yellow; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
#table-example-1 caption { padding-bottom: 0.5em; }
#table-example-1 thead, #table-example-1 tbody { border: none; }
#table-example-1 th, #table-example-1 td { border: solid thin; }
#table-example-1 th { font-weight: normal; }
#table-example-1 td { border-style: none solid; vertical-align: top; }
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
#table-example-1 tbody td:first-child::after { content: leader(". "); }
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
#table-example-1 tbody td:first-child + td { width: 10em; }
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
.apple-table-examples * { font-family: "Times", serif; }
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
.apple-table-examples td { text-align: right; vertical-align: top; }
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
.apple-table-examples sup { line-height: 0; }
</style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script>
function getCookie(name) {
var params = location.search.substr(1).split("&");
for (var index = 0; index < params.length; index++) {
if (params[index] == name)
return "1";
var data = params[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
var cookies = document.cookie.split("; ");
for (var index = 0; index < cookies.length; index++) {
var data = cookies[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
return null;
}
function load(script) {
var e = document.createElement('script');
e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
document.body.appendChild(e);
}
function init() {
if (location.search == '?slow-browser')
return;
var configUI = document.createElement('div');
configUI.id = 'configUI';
document.body.appendChild(configUI);
// load('reviewer.js'); // would need cross-site XHR
if (document.getElementById('head'))
load('toc.js');
load('styler.js');
// load('updater.js'); // would need cross-site XHR
load('dfn.js');
// load('status.js'); // would need cross-site XHR
if (getCookie('profile') == '1')
document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
fixBrokenLink();
}
</script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="sections.html" title="4.4 Sections" rel="prev">
<link href="Overview.html#contents" title="Table of contents" rel="index">
<link href="text-level-semantics.html" title="4.6 Text-level semantics" rel="next">
</head><body onload="fixBrokenLink(); init()"><div class="head" id="head">
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
</div><div>
<a href="sections.html">← 4.4 Sections</a> –
<a href="Overview.html#contents">Table of contents</a> –
<a href="text-level-semantics.html">4.6 Text-level semantics →</a>
<ol class="toc"><li><ol><li><a href="grouping-content.html#grouping-content"><span class="secno">4.5 </span>Grouping content</a>
<ol><li><a href="grouping-content.html#the-p-element"><span class="secno">4.5.1 </span>The <code>p</code> element</a></li><li><a href="grouping-content.html#the-hr-element"><span class="secno">4.5.2 </span>The <code>hr</code> element</a></li><li><a href="grouping-content.html#the-br-element"><span class="secno">4.5.3 </span>The <code>br</code> element</a></li><li><a href="grouping-content.html#the-pre-element"><span class="secno">4.5.4 </span>The <code>pre</code> element</a></li><li><a href="grouping-content.html#the-blockquote-element"><span class="secno">4.5.5 </span>The <code>blockquote</code> element</a></li><li><a href="grouping-content.html#the-ol-element"><span class="secno">4.5.6 </span>The <code>ol</code> element</a></li><li><a href="grouping-content.html#the-ul-element"><span class="secno">4.5.7 </span>The <code>ul</code> element</a></li><li><a href="grouping-content.html#the-li-element"><span class="secno">4.5.8 </span>The <code>li</code> element</a></li><li><a href="grouping-content.html#thedl-element"><span class="secno">4.5.9 </span>The <code>dl</code> element</a></li><li><a href="grouping-content.html#the-dt-element"><span class="secno">4.5.10 </span>The <code>dt</code> element</a></li><li><a href="grouping-content.html#the-dd-element"><span class="secno">4.5.11 </span>The <code>dd</code> element</a></li><li><a href="grouping-content.html#the-div-element"><span class="secno">4.5.12 </span>The <code>div</code> element</a></li></ol></li></ol></li></ol></div>
<h3 id="grouping-content"><span class="secno">4.5 </span>Grouping content</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h4 id="the-p-element"><span class="secno">4.5.1 </span>The <dfn><code>p</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dd><a href="dnd.html#formatblock-candidate"><code title="">formatBlock</code> candidate</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd>
<dt>Content model:</dt>
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn id="htmlparagraphelement">HTMLParagraphElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre>
</dd>
</dl><p>The <code><a href="#the-p-element">p</a></code> element <a href="#represents">represents</a> a
<a href="content-models.html#paragraph">paragraph</a>.</p><div class="example">
<p>The following examples are conforming HTML fragments:</p>
<pre><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></pre>
<pre><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></pre>
<pre><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></pre>
</div><p>The <code><a href="#the-p-element">p</a></code> element should not be used when a more
specific element is more appropriate.</p><div class="example">
<p>The following example is technically correct:</p>
<pre><section>
<!-- ... -->
<p>Last modified: 2001-04-23</p>
<p>Author: fred@example.com</p>
</section></pre>
<p>However, it would be better marked-up as:</p>
<pre><section>
<!-- ... -->
<footer>Last modified: 2001-04-23</footer>
<address>Author: fred@example.com</address>
</section></pre>
<p>Or:</p>
<pre><section>
<!-- ... -->
<footer>
<p>Last modified: 2001-04-23</p>
<address>Author: fred@example.com</address>
</footer>
</section></pre>
</div><h4 id="the-hr-element"><span class="secno">4.5.2 </span>The <dfn><code>hr</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd>
<dt>Content model:</dt>
<dd>Empty.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn id="htmlhrelement">HTMLHRElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre>
</dd>
</dl><p>The <code><a href="#the-hr-element">hr</a></code> element <a href="#represents">represents</a> a
<a href="content-models.html#paragraph">paragraph</a>-level thematic break, e.g. a scene change in
a story, or a transition to another topic within a section of a
reference book.</p><div class="example">
<p>The following extract from <cite>Pandora's Star</cite> 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
<code><a href="#the-hr-element">hr</a></code> element.</p>
<!-- ISBN 1-4050-0020-1; bottom of page 14 -->
<pre lang="en-GB"><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 Commonwearth 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>
<strong><hr></strong>
<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></pre>
</div><h4 id="the-br-element"><span class="secno">4.5.3 </span>The <dfn><code>br</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
<dt>Content model:</dt>
<dd>Empty.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn id="htmlbrelement">HTMLBRElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre>
</dd>
</dl><p>The <code><a href="#the-br-element">br</a></code> element <a href="#represents">represents</a> a line
break.</p><p><code><a href="#the-br-element">br</a></code> elements must be used only for line breaks that
are actually part of the content, as in poems or addresses.</p><div class="example">
<p>The following example is correct usage of the <code><a href="#the-br-element">br</a></code>
element:</p>
<pre><p>P. Sherman<br>
42 Wallaby Way<br>
Sydney</p></pre>
</div><p><code><a href="#the-br-element">br</a></code> elements must not be used for separating thematic
groups in a paragraph.</p><div class="example">
<p>The following examples are non-conforming, as they abuse the
<code><a href="#the-br-element">br</a></code> element:</p>
<pre><p><a ...>34 comments.</a><br>
<a ...>Add a comment.</a></p></pre>
<pre><p><label>Name: <input name="name"></label><br>
<label>Address: <input name="address"></label></p></pre>
<p>Here are alternatives to the above, which are correct:</p>
<pre><p><a ...>34 comments.</a></p>
<p><a ...>Add a comment.</a></p></pre>
<pre><p><label>Name: <input name="name"></label></p>
<p><label>Address: <input name="address"></label></p></pre>
</div><p>If a <a href="content-models.html#paragraph">paragraph</a> consists of nothing but a single
<code><a href="#the-br-element">br</a></code> element, it represents a placeholder blank line
(e.g. as in a template). Such blank lines must not be used for
presentation purposes.</p><h4 id="the-pre-element"><span class="secno">4.5.4 </span>The <dfn><code>pre</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dd><a href="dnd.html#formatblock-candidate"><code title="">formatBlock</code> candidate</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd>
<dt>Content model:</dt>
<dd><a href="content-models.html#phrasing-content">Phrasing content</a>.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn id="htmlpreelement">HTMLPreElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre>
</dd>
</dl><p>The <code><a href="#the-pre-element">pre</a></code> element <a href="#represents">represents</a> a block of
preformatted text, in which structure is represented by typographic
conventions rather than by elements.</p><p class="note">In <a href="syntax.html#syntax">the HTML syntax</a>, a leading
newline character immediately following the <code><a href="#the-pre-element">pre</a></code> element
start tag is stripped.</p><p>Some examples of cases where the <code><a href="#the-pre-element">pre</a></code> element could
be used:</p><ul><li>Including an e-mail, with paragraphs indicated by blank lines,
lists indicated by lines prefixed with a bullet, and so on.</li>
<li>Including fragments of computer code, with structure indicated
according to the conventions of that language.</li>
<li>Displaying ASCII art.</li>
</ul><p class="note">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.</p><p>To represent a block of computer code, the <code><a href="#the-pre-element">pre</a></code>
element can be used with a <code><a href="text-level-semantics.html#the-code-element">code</a></code> element; to represent a
block of computer output the <code><a href="#the-pre-element">pre</a></code> element can be used
with a <code><a href="text-level-semantics.html#the-samp-element">samp</a></code> element. Similarly, the <code><a href="text-level-semantics.html#the-kbd-element">kbd</a></code>
element can be used within a <code><a href="#the-pre-element">pre</a></code> element to indicate
text that the user is to enter.</p><div class="example">
<p>In the following snippet, a sample of computer code is
presented.</p>
<pre><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></pre>
</div><div class="example">
<p>In the following snippet, <code><a href="text-level-semantics.html#the-samp-element">samp</a></code> and <code><a href="text-level-semantics.html#the-kbd-element">kbd</a></code>
elements are mixed in the contents of a <code><a href="#the-pre-element">pre</a></code> element to
show a session of Zork I.</p>
<pre><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></pre>
</div><div class="example">
<p>The following shows a contemporary poem that uses the
<code><a href="#the-pre-element">pre</a></code> element to preserve its unusual formatting, which
forms an intrinsic part of the poem itself.</p>
<pre><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></pre>
</div><h4 id="the-blockquote-element"><span class="secno">4.5.5 </span>The <dfn><code>blockquote</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dd><a href="sections.html#sectioning-root">Sectioning root</a>.</dd>
<dd><a href="dnd.html#formatblock-candidate"><code title="">formatBlock</code> candidate</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd>
<dt>Content model:</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dd><code title="attr-blockquote-cite"><a href="#attr-blockquote-cite">cite</a></code></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn id="htmlquoteelement">HTMLQuoteElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
attribute DOMString <a href="#dom-quote-cite" title="dom-quote-cite">cite</a>;
};</pre>
<p class="note">The <code><a href="#htmlquoteelement">HTMLQuoteElement</a></code> interface is
also used by the <code><a href="text-level-semantics.html#the-q-element">q</a></code> element.</p>
</dd>
</dl><p>The <code><a href="#the-blockquote-element">blockquote</a></code> element <a href="#represents">represents</a> a
section that is quoted from another source.</p><p>Content inside a <code><a href="#the-blockquote-element">blockquote</a></code> must be quoted from
another source, whose address, if it has one, should be cited in the
<dfn id="attr-blockquote-cite" title="attr-blockquote-cite"><code>cite</code></dfn>
attribute.</p><p>If the <code title="attr-blockquote-cite"><a href="#attr-blockquote-cite">cite</a></code> attribute
is present, it must be a <a href="urls.html#valid-url">valid URL</a>. </p><div class="example">
<p>This next example shows the use of <code><a href="text-level-semantics.html#the-cite-element">cite</a></code> alongside
<code><a href="#the-blockquote-element">blockquote</a></code>:</p>
<pre><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>
...</pre>
</div><p class="note"><a href="commands.html#conversations">Examples of how to
represent a conversation</a> are shown below; it is not appropriate
to use the <code><a href="text-level-semantics.html#the-cite-element">cite</a></code> and <code><a href="#the-blockquote-element">blockquote</a></code> elements
for this purpose.</p><h4 id="the-ol-element"><span class="secno">4.5.6 </span>The <dfn><code>ol</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd>
<dt>Content model:</dt>
<dd>Zero or more <code><a href="#the-li-element">li</a></code> elements.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dd><code title="attr-ol-reversed"><a href="#attr-ol-reversed">reversed</a></code></dd>
<dd><code title="attr-ol-start"><a href="#attr-ol-start">start</a></code></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn id="htmlolistelement">HTMLOListElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
attribute boolean <a href="#dom-ol-reversed" title="dom-ol-reversed">reversed</a>;
attribute long <a href="#dom-ol-start" title="dom-ol-start">start</a>;
};</pre>
</dd>
</dl><p>The <code><a href="#the-ol-element">ol</a></code> element <a href="#represents">represents</a> a list of
items, where the items have been intentionally ordered, such that
changing the order would change the meaning of the document.</p><p>The items of the list are the <code><a href="#the-li-element">li</a></code> element child nodes
of the <code><a href="#the-ol-element">ol</a></code> element, in <a href="infrastructure.html#tree-order">tree order</a>.</p><p>The <dfn id="attr-ol-reversed" title="attr-ol-reversed"><code>reversed</code></dfn>
attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>. 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,
...).</p><p>The <dfn id="attr-ol-start" title="attr-ol-start"><code>start</code></dfn>
attribute, if present, must be a <a href="common-microsyntaxes.html#valid-integer">valid integer</a> giving
the ordinal value of the first list item.</p><!-- v2: resuming numbering of lists from previous lists? --><div class="example">
<p>The following markup shows a list where the order matters, and
where the <code><a href="#the-ol-element">ol</a></code> element is therefore appropriate. Compare
this list to the equivalent list in the <code><a href="#the-ul-element">ul</a></code> section to
see an example of the same items using the <code><a href="#the-ul-element">ul</a></code>
element.</p>
<pre><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></pre>
<p>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>
<pre><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></pre>
</div><h4 id="the-ul-element"><span class="secno">4.5.7 </span>The <dfn><code>ul</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd>
<dt>Content model:</dt>
<dd>Zero or more <code><a href="#the-li-element">li</a></code> elements.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn id="htmlulistelement">HTMLUListElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre>
</dd>
</dl><p>The <code><a href="#the-ul-element">ul</a></code> element <a href="#represents">represents</a> 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.</p><p>The items of the list are the <code><a href="#the-li-element">li</a></code> element child nodes
of the <code><a href="#the-ul-element">ul</a></code> element.</p><div class="example">
<p>The following markup shows a list where the order does not
matter, and where the <code><a href="#the-ul-element">ul</a></code> element is therefore
appropriate. Compare this list to the equivalent list in the
<code><a href="#the-ol-element">ol</a></code> section to see an example of the same items using
the <code><a href="#the-ol-element">ol</a></code> element.</p>
<pre><p>I have lived in the following countries:</p>
<ul>
<li>Norway
<li>Switzerland
<li>United Kingdom
<li>United States
</ul></pre>
<p>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>
<pre><p>I have lived in the following countries:</p>
<ul>
<li>Switzerland
<li>Norway
<li>United Kingdom
<li>United States
</ul></pre>
</div><h4 id="the-li-element"><span class="secno">4.5.8 </span>The <dfn><code>li</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
<dd>None.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Inside <code><a href="#the-ol-element">ol</a></code> elements.</dd>
<dd>Inside <code><a href="#the-ul-element">ul</a></code> elements.</dd>
<dd>Inside <code><a href="interactive-elements.html#menus">menu</a></code> elements.</dd>
<dt>Content model:</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dd>If the element is a child of an <code><a href="#the-ol-element">ol</a></code> element: <code title="attr-li-value"><a href="#attr-li-value">value</a></code></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn id="htmllielement">HTMLLIElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
attribute long <a href="#dom-li-value" title="dom-li-value">value</a>;
};</pre>
</dd>
</dl><p>The <code><a href="#the-li-element">li</a></code> element <a href="#represents">represents</a> a list
item. If its parent element is an <code><a href="#the-ol-element">ol</a></code>, <code><a href="#the-ul-element">ul</a></code>,
or <code><a href="interactive-elements.html#menus">menu</a></code> 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
<code><a href="#the-li-element">li</a></code> element.</p><p>The <dfn id="attr-li-value" title="attr-li-value"><code>value</code></dfn>
attribute, if present, must be a <a href="common-microsyntaxes.html#valid-integer">valid integer</a> giving
the ordinal value of the list item.</p><div class="example">
<p>The following example, the top ten movies are listed (in reverse
order). Note the way the list is given a title by using a
<code><a href="embedded-content-1.html#the-figure-element">figure</a></code> element and its <code><a href="#the-dt-element">dt</a></code> element.</p>
<pre><figure>
<dt>The top 10 movies of all time</dt>
<dd>
<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>
<dd>
</figure></pre>
<p>The markup could also be written as follows, using the <code title="attr-ol-reversed"><a href="#attr-ol-reversed">reversed</a></code> attribute on the
<code><a href="#the-ol-element">ol</a></code> element:</p>
<pre><figure>
<dt>The top 10 movies of all time</dt>
<dd>
<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>
</dd>
</figure></pre>
</div><p class="note">If the <code><a href="#the-li-element">li</a></code> element is the child of a
<code><a href="interactive-elements.html#menus">menu</a></code> element and itself has a child that defines a
<a href="commands.html#concept-command" title="concept-command">command</a>, then the
<code><a href="#the-li-element">li</a></code> element will match the <code title="selector-enabled"><a href="#selector-enabled">:enabled</a></code> and <code title="selector-disabled"><a href="#selector-disabled">:disabled</a></code> pseudo-classes in the
same way as the first such child element does.</p><h4 id="the-dl-element"><span class="secno">4.5.9 </span>The <dfn><code>dl</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd>
<dt>Content model:</dt>
<dd>Zero or more groups each consisting of one or more
<code><a href="#the-dt-element">dt</a></code> elements followed by one or more <code><a href="#the-dd-element">dd</a></code>
elements.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn id="htmldlistelement">HTMLDListElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre>
</dd>
</dl><p>The <code><a href="#the-dl-element">dl</a></code> element <a href="#represents">represents</a> an
association list consisting of zero or more name-value groups (a
description list). Each group must consist of one or more names
(<code><a href="#the-dt-element">dt</a></code> elements) followed by one or more values
(<code><a href="#the-dd-element">dd</a></code> elements). Within a single <code><a href="#the-dl-element">dl</a></code> element,
there should not be more than one <code><a href="#the-dt-element">dt</a></code> element for each
name.</p><p>Name-value groups may be terms and definitions, metadata topics
and values, or any other groups of name-value data.</p><p>The values within a group are alternatives; multiple paragraphs
forming part of the same value must all be given within the same
<code><a href="#the-dd-element">dd</a></code> element.</p><p>The order of the list of groups, and of the names and values
within each group, may be significant.</p><div class="example">
<p>In the following example, one entry ("Authors") is linked to two
values ("John" and "Luke").</p>
<pre><dl>
<dt> Authors
<dd> John
<dd> Luke
<dt> Editor
<dd> Frank
</dl></pre>
</div><div class="example">
<p>In the following example, one definition is linked to two
terms.</p>
<pre><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></pre>
</div><div class="example">
<p>The following example illustrates the use of the <code><a href="#the-dl-element">dl</a></code>
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").</p>
<pre><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></pre>
</div><div class="example">
<p>The following example shows the <code><a href="#the-dl-element">dl</a></code> 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>
<pre><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></pre>
</div><div class="example">
<p>The following snippet shows a <code><a href="#the-dl-element">dl</a></code> element being used
as a glossary. Note the use of <code><a href="text-level-semantics.html#the-dfn-element">dfn</a></code> to indicate the
word being defined.</p>
<pre><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></pre>
</div><p class="note">The <code><a href="#the-dl-element">dl</a></code> element is inappropriate for
marking up dialogue. <a href="commands.html#conversations">Examples of how to
mark up dialogue</a> are shown below.</p><h4 id="the-dt-element"><span class="secno">4.5.10 </span>The <dfn><code>dt</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
<dd>None.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Before <code><a href="#the-dd-element">dd</a></code> or <code><a href="#the-dt-element">dt</a></code> elements inside <code><a href="#the-dl-element">dl</a></code> elements.</dd>
<dd>In a <code><a href="embedded-content-1.html#the-figure-element">figure</a></code> element containing no other <code><a href="#the-dt-element">dt</a></code> element children.</dd>
<dd>As the first child of a <code><a href="interactive-elements.html#the-details-element">details</a></code> element.</dd>
<dt>Content model:</dt>
<dd>When the parent node is a <code><a href="embedded-content-1.html#the-figure-element">figure</a></code> element: <a href="content-models.html#flow-content">flow content</a>, but with no descendant <code><a href="embedded-content-1.html#the-figure-element">figure</a></code> elements.</dd>
<dd>Otherwise: <a href="content-models.html#phrasing-content">phrasing content</a>.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dt>DOM interface:</dt>
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
</dl><p>The <code><a href="#the-dt-element">dt</a></code> element <a href="#represents">represents</a> either: the
term, or name, part of a term-description group in a description
list (<code><a href="#the-dl-element">dl</a></code> element); or, the caption of a
<code><a href="embedded-content-1.html#the-figure-element">figure</a></code> element; or, the summary of a
<code><a href="interactive-elements.html#the-details-element">details</a></code> element.</p><p class="note">The <code><a href="#the-dt-element">dt</a></code> element itself, when used in a
<code><a href="#the-dl-element">dl</a></code> element, does not indicate that its contents are a
term being defined, but this can be indicated using the
<code><a href="text-level-semantics.html#the-dfn-element">dfn</a></code> element.</p><h4 id="the-dd-element"><span class="secno">4.5.11 </span>The <dfn><code>dd</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
<dd>None.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>After <code><a href="#the-dt-element">dt</a></code> or <code><a href="#the-dd-element">dd</a></code> elements inside <code><a href="#the-dl-element">dl</a></code> elements.</dd>
<dd>In a <code><a href="embedded-content-1.html#the-figure-element">figure</a></code> element containing no other <code><a href="#the-dd-element">dd</a></code> element children.</dd>
<dd>As the last child of a <code><a href="interactive-elements.html#the-details-element">details</a></code> element.</dd>
<dt>Content model:</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dt>DOM interface:</dt>
<dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
</dl><p>The <code><a href="#the-dd-element">dd</a></code> element <a href="#represents">represents</a> either: the
description, definition, or value, part of a term-description group
in a description list (<code><a href="#the-dl-element">dl</a></code> element); or, the data of a
<code><a href="embedded-content-1.html#the-figure-element">figure</a></code> element; or, the details of a
<code><a href="interactive-elements.html#the-details-element">details</a></code> element.</p><div class="example">
<p>A <code><a href="#the-dl-element">dl</a></code> can be used to define a vocabulary list, like
in a dictionary. In the following example, each entry, given by a
<code><a href="#the-dt-element">dt</a></code> with a <code><a href="text-level-semantics.html#the-dfn-element">dfn</a></code>, has several
<code><a href="#the-dd-element">dd</a></code>s, showing the various parts of the definition.</p>
<!-- the actual pronunciations below are nonsense. -->
<pre><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></pre>
</div><h4 id="the-div-element"><span class="secno">4.5.12 </span>The <dfn><code>div</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dd><a href="dnd.html#formatblock-candidate"><code title="">formatBlock</code> candidate</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href="content-models.html#flow-content">flow content</a> is expected.</dd>
<dt>Content model:</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dt>DOM interface:</dt>
<dd>
<pre class="idl">interface <dfn id="htmldivelement">HTMLDivElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {};</pre>
</dd>
</dl><p>The <code><a href="#the-div-element">div</a></code> element has no special meaning at all. It
<a href="#represents">represents</a> its children. It can be used with the <code title="attr-class"><a href="elements.html#classes">class</a></code>, <code title="attr-lang"><a href="elements.html#attr-lang">lang</a></code>, and <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attributes to mark up semantics
common to a group of consecutive elements.</p><p class="note">Authors are strongly encouraged to view the
<code><a href="#the-div-element">div</a></code> element as an element of last resort, for when no
other element is suitable. Use of the <code><a href="#the-div-element">div</a></code> element
instead of more appropriate elements leads to poor accessibility for
readers and poor maintainability for authors.</p><div class="example">
<p>For example, a blog post would be marked up using
<code><a href="sections.html#the-article-element">article</a></code>, a chapter using <code><a href="sections.html#the-section-element">section</a></code>, a
page's navigation aids using <code><a href="sections.html#the-nav-element">nav</a></code>, and a group of form
controls using <code><a href="forms.html#the-fieldset-element">fieldset</a></code>.</p>
<p>On the other hand, <code><a href="#the-div-element">div</a></code> 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 <code><a href="#the-div-element">div</a></code> 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:</p>
<pre><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></pre>
</div></body></html>
--- NEW FILE: timers.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>6.4 Timers — HTML5</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"/><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
p + * > li, dd li { margin: 1em 0; }
dt, dfn { font-weight: bold; font-style: normal; }
dt dfn { font-style: italic; }
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
pre em { font-weight: bolder; font-style: normal; }
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead { border-bottom: solid; }
table tbody th:first-child { border-left: solid; }
table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
img.extra { float: right; }
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
pre.css:first-line { color: #AAAA50; }
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; }
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
dl.domintro dd p { margin: 0.5em 0; }
dl.switch { padding-left: 2em; }
dl.switch > dt { text-indent: -1.5em; }
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
dl.triple { padding: 0 0 0 1em; }
dl.triple dt, dl.triple dd { margin: 0; display: inline }
dl.triple dt:after { content: ':'; }
dl.triple dd:after { content: '\A'; white-space: pre; }
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
a .diff-new { border-bottom: 1px blue solid; }
h2 { page-break-before: always; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; }
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
div.head p { margin: 0; }
div.head h1 { margin: 0; }
div.head .logo { float: right; margin: 0 1em; }
div.head .logo img { border: none } /* remove border from top image */
div.head dl { margin: 1em 0; }
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
body > .toc > li > * { margin-bottom: 0.5em; }
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
.toc, .toc li { list-style: none; }
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
.brief li { margin: 0; padding: 0; }
.brief li p { margin: 0; padding: 0; }
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
.category-list li { display: inline; }
.category-list li:not(:last-child)::after { content: ', '; }
.category-list li > span, .category-list li > a { text-transform: lowercase; }
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
.XXX > :first-child { margin-top: 0; }
p .XXX { line-height: 3em; }
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
.annotation :link, .annotation :visited { color: inherit; }
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
.annotation span { border: none ! important; }
.note { color: green; background: transparent; font-family: sans-serif; }
.warning { color: red; background: transparent; }
.note, .warning { font-weight: bolder; font-style: italic; }
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
.note p:first-child, .warning p:first-child { margin-top: 0; }
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
.warning:before { font-style: normal; }
p.note:before { content: 'Note: '; }
p.warning:before { content: '\26A0 Warning! '; }
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
h4 { position: relative; z-index: 3; }
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
.element {
background: #EEEEFF;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -1.15em;
height: 2em;
width: 0.9em;
background: #EEEEFF;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
td > .example:only-child { margin: 0 0 0 0.1em; }
.tall-and-narrow {
font-size: 0.6em;
column-width: 25em;
column-gap: 1em;
-moz-column-width: 25em;
-moz-column-gap: 1em;
-webkit-column-width: 25em;
-webkit-column-gap: 1em;
}
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
ul.domTree li li { list-style: none; }
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree span { font-style: italic; font-family: serif; }
ul.domTree .t1 code { color: purple; font-weight: bold; }
ul.domTree .t2 { font-style: normal; font-family: monospace; }
ul.domTree .t2 .name { color: black; font-weight: bold; }
ul.domTree .t2 .value { color: blue; font-weight: normal; }
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
ul.domTree .t7 code, .domTree .t8 code { color: green; }
ul.domTree .t10 code { color: teal; }
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
#configUI p label { display: block; }
#configUI #updateUI, #configUI .loginUI { text-align: center; }
#configUI input[type=button] { display: block; margin: auto; }
</style><style type="text/css">
.applies thead th > * { display: block; }
.applies thead code { display: block; }
.applies tbody th { whitespace: nowrap; }
.applies td { text-align: center; }
.applies .yes { background: yellow; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
#table-example-1 caption { padding-bottom: 0.5em; }
#table-example-1 thead, #table-example-1 tbody { border: none; }
#table-example-1 th, #table-example-1 td { border: solid thin; }
#table-example-1 th { font-weight: normal; }
#table-example-1 td { border-style: none solid; vertical-align: top; }
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
#table-example-1 tbody td:first-child::after { content: leader(". "); }
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
#table-example-1 tbody td:first-child + td { width: 10em; }
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
.apple-table-examples * { font-family: "Times", serif; }
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
.apple-table-examples td { text-align: right; vertical-align: top; }
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
.apple-table-examples sup { line-height: 0; }
</style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script>
function getCookie(name) {
var params = location.search.substr(1).split("&");
for (var index = 0; index < params.length; index++) {
if (params[index] == name)
return "1";
var data = params[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
var cookies = document.cookie.split("; ");
for (var index = 0; index < cookies.length; index++) {
var data = cookies[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
return null;
}
function load(script) {
var e = document.createElement('script');
e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
document.body.appendChild(e);
}
function init() {
if (location.search == '?slow-browser')
return;
var configUI = document.createElement('div');
configUI.id = 'configUI';
document.body.appendChild(configUI);
// load('reviewer.js'); // would need cross-site XHR
if (document.getElementById('head'))
load('toc.js');
load('styler.js');
// load('updater.js'); // would need cross-site XHR
load('dfn.js');
// load('status.js'); // would need cross-site XHR
if (getCookie('profile') == '1')
document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
fixBrokenLink();
}
</script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="browsers.html" title="6 Web browsers" rel="prev">
<link href="Overview.html#contents" title="Table of contents" rel="index">
<link href="offline.html" title="6.7 Offline Web applications" rel="next">
</head><body onload="fixBrokenLink(); init()"><div class="head" id="head">
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
</div><div>
<a href="browsers.html">← 6 Web browsers</a> –
<a href="Overview.html#contents">Table of contents</a> –
<a href="offline.html">6.7 Offline Web applications →</a>
<ol class="toc"><li><ol><li><a href="timers.html#timers"><span class="secno">6.4 </span>Timers</a></li><li><a href="timers.html#user-prompts"><span class="secno">6.5 </span>User prompts</a>
<ol><li><a href="timers.html#simple-dialogs"><span class="secno">6.5.1 </span>Simple dialogs</a></li><li><a href="timers.html#printing"><span class="secno">6.5.2 </span>Printing</a></li><li><a href="timers.html#dialogs-implemented-using-separate-documents"><span class="secno">6.5.3 </span>Dialogs implemented using separate documents</a></li></ol></li><li><a href="timers.html#system-state-and-capabilities"><span class="secno">6.6 </span>System state and capabilities</a>
<ol><li><a href="timers.html#client-identification"><span class="secno">6.6.1 </span>Client identification</a></li><li><a href="timers.html#custom-handlers"><span class="secno">6.6.2 </span>Custom scheme and content handlers</a></li><li><a href="timers.html#manually-releasing-the-storage-mutex"><span class="secno">6.6.3 </span>Manually releasing the storage mutex</a></li></ol></li></ol></li></ol></div>
<h3 id="timers"><span class="secno">6.4 </span>Timers</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="dom-windowtimers-setTimeout"><a href="#dom-windowtimers-settimeout">setTimeout()</a></code>
and <code title="dom-windowtimers-setInterval"><a href="#dom-windowtimers-setinterval">setInterval()</a></code>
methods allow authors to schedule timer-based callbacks.</p><pre class="idl">[Supplemental, NoInterfaceObject]
interface <dfn id="windowtimers">WindowTimers</dfn> {
long <a href="#dom-windowtimers-settimeout" title="dom-windowtimers-setTimeout">setTimeout</a>(in any handler, in optional any timeout, in any... args);
void <a href="#dom-windowtimers-cleartimeout" title="dom-windowtimers-clearTimeout">clearTimeout</a>(in long handle);
long <a href="#dom-windowtimers-setinterval" title="dom-windowtimers-setInterval">setInterval</a>(in any handler, in optional any timeout, in any... args);
void <a href="#dom-windowtimers-clearinterval" title="dom-windowtimers-clearInterval">clearInterval</a>(in long handle);
};
<a href="browsers.html#window">Window</a> implements <a href="#windowtimers">WindowTimers</a>;</pre><dl class="domintro"><dt><var title="">handle</var> = <var title="">window</var> . <code title="dom-windowtimers-setTimeout"><a href="#dom-windowtimers-settimeout">setTimeout</a></code>( <var title="">handler</var> [, <var title="">timeout</var> [, <var title="">arguments</var> ] ] )</dt>
<dd>
<p>Schedules a timeout to run <var title="">handler</var> after
<var title="">timeout</var> milliseconds. Any <var title="">arguments</var> are passed straight through to the <var title="">handler</var>.</p>
</dd>
<dt><var title="">handle</var> = <var title="">window</var> . <code title="dom-windowtimers-setTimeout"><a href="#dom-windowtimers-settimeout">setTimeout</a></code>( <var title="">code</var> [, <var title="">timeout</var> ] )</dt>
<dd>
<p>Schedules a timeout to compile and run <var title="">code</var>
after <var title="">timeout</var> milliseconds.</p>
</dd>
<dt><var title="">window</var> . <code title="dom-windowtimers-clearTimeout"><a href="#dom-windowtimers-cleartimeout">clearTimeout</a></code>( <var title="">handle</var> )</dt>
<dd>
<p>Cancels the timeout set with <code title="dom-windowtimers-setTimeout"><a href="#dom-windowtimers-settimeout">setTimeout()</a></code> identified by <var title="">handle</var>.</p>
</dd>
<dt><var title="">handle</var> = <var title="">window</var> . <code title="dom-windowtimers-setInterval"><a href="#dom-windowtimers-setinterval">setInterval</a></code>( <var title="">handler</var> [, <var title="">timeout</var> [, <var title="">arguments</var> ] ] )</dt>
<dd>
<p>Schedules a timeout to run <var title="">handler</var> every
<var title="">timeout</var> milliseconds. Any <var title="">arguments</var> are passed straight through to the <var title="">handler</var>.</p>
</dd>
<dt><var title="">handle</var> = <var title="">window</var> . <code title="dom-windowtimers-setInterval"><a href="#dom-windowtimers-setinterval">setInterval</a></code>( <var title="">code</var> [, <var title="">timeout</var> ] )</dt>
<dd>
<p>Schedules a timeout to compile and run <var title="">code</var>
every <var title="">timeout</var> milliseconds.</p>
</dd>
<dt><var title="">window</var> . <code title="dom-windowtimers-clearInterval"><a href="#dom-windowtimers-clearinterval">clearInterval</a></code>( <var title="">handle</var> )</dt>
<dd>
<p>Cancels the timeout set with <code title="dom-windowtimers-setInterval"><a href="#dom-windowtimers-setinterval">setInterval()</a></code> identified by <var title="">handle</var>.</p>
</dd>
</dl><p class="note">This API does not guarantee that timers will fire
exactly on schedule. Delays due to CPU load, other tasks, etc, are
to be expected.</p><h3 id="user-prompts"><span class="secno">6.5 </span>User prompts</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!--
v2 ideas:
* in-window modal dialogs
- escape/enter handling
- dragging the window out of the tab
* in-window non-modal palettes
- with a solution for the mobile space
--><h4 id="simple-dialogs"><span class="secno">6.5.1 </span>Simple dialogs</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">window</var> . <code title="dom-alert"><a href="#dom-alert">alert</a></code>(<var title="">message</var>)</dt>
<dd>
<p>Displays a modal alert with the given message, and waits for the user to dismiss it.</p>
<p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code>
method is implied when this method is invoked.</p>
</dd>
<dt><var title="">result</var> = <var title="">window</var> . <code title="dom-confirm"><a href="#dom-confirm">confirm</a></code>(<var title="">message</var>)</dt>
<dd>
<p>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.</p>
<p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code>
method is implied when this method is invoked.</p>
</dd>
<dt><var title="">result</var> = <var title="">window</var> . <code title="dom-prompt"><a href="#dom-prompt">prompt</a></code>(<var title="">message</var> [, <var title="">default</var>] )</dt>
<dd>
<p>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.</p>
<p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code>
method is implied when this method is invoked.</p>
</dd>
</dl><h4 id="printing"><span class="secno">6.5.2 </span>Printing</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">window</var> . <code title="dom-print"><a href="#dom-print">print</a></code>()</dt>
<dd>
<p>Prompts the user to print the page.</p>
<p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code>
method is implied when this method is invoked.</p>
</dd>
</dl><h4 id="dialogs-implemented-using-separate-documents"><span class="secno">6.5.3 </span>Dialogs implemented using separate documents</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">result</var> = <var title="">window</var> . <code title="dom-showModalDialog"><a href="#dom-showmodaldialog">showModalDialog</a></code>(<var title="">url</var> [, <var title="">argument</var>] )</dt>
<dd>
<p>Prompts the user with the given page, waits for that page to
close, and returns the return value.</p>
<p>A call to the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code>
method is implied when this method is invoked.</p>
</dd>
</dl><pre class="idl">[Supplemental, NoInterfaceObject] interface <dfn id="windowmodal">WindowModal</dfn> {
readonly attribute any <a href="#dom-windowmodal-dialogarguments" title="dom-WindowModal-dialogArguments">dialogArguments</a>;
attribute DOMString <a href="#dom-windowmodal-returnvalue" title="dom-WindowModal-returnValue">returnValue</a>;
};
<a href="browsers.html#window">Window</a> implements <a href="#windowmodal">WindowModal</a>; /* sometimes */</pre><dl class="domintro"><dt><var title="">window</var> . <code title="dom-WindowModal-dialogArguments"><a href="#dom-windowmodal-dialogarguments">dialogArguments</a></code></dt>
<dd>
<p>Returns the <var title="">argument</var> argument that was
passed to the <code title="dom-showModalDialog"><a href="#dom-showmodaldialog">showModalDialog()</a></code> method.</p>
</dd>
<dt><var title="">window</var> . <code title="dom-WindowModal-returnValue"><a href="#dom-windowmodal-returnvalue">returnValue</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns the current return value for the window.</p>
<p>Can be set, to change the value that will be returned by the
<code title="dom-showModalDialog"><a href="#dom-showmodaldialog">showModalDialog()</a></code>
method.</p>
</dd>
</dl><p class="note">The <code title="dom-window-close"><a href="#dom-window-close">window.close()</a></code> method can be used to
close the browsing context.</p><h3 id="system-state-and-capabilities"><span class="secno">6.6 </span>System state and capabilities</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><pre class="idl">interface <dfn id="navigator">Navigator</dfn> {
// objects implementing this interface also implement the interfaces given below
};
<a href="#navigator">Navigator</a> implements <a href="#navigatorid">NavigatorID</a>;
<a href="#navigator">Navigator</a> implements <a href="#navigatoronline">NavigatorOnLine</a>;
<a href="#navigator">Navigator</a> implements <a href="#navigatorabilities">NavigatorAbilities</a>;
[Supplemental, NoInterfaceObject]
interface <dfn id="navigatorid">NavigatorID</dfn> {<!--
readonly attribute DOMString <span title="dom-navigator-appCodeName">appCodeName</span>;-->
readonly attribute DOMString <a href="#dom-navigator-appname" title="dom-navigator-appName">appName</a>;
readonly attribute DOMString <a href="#dom-navigator-appversion" title="dom-navigator-appVersion">appVersion</a>;
readonly attribute DOMString <a href="#dom-navigator-platform" title="dom-navigator-platform">platform</a>;
readonly attribute DOMString <a href="#dom-navigator-useragent" title="dom-navigator-userAgent">userAgent</a>;
};
[Supplemental, NoInterfaceObject]
interface <dfn id="navigatoronline">NavigatorOnLine</dfn> {
readonly attribute boolean <a href="#dom-navigator-online" title="dom-navigator-onLine">onLine</a>;
};
[Supplemental, NoInterfaceObject]
interface <dfn id="navigatorabilities">NavigatorAbilities</dfn> {
// content handler registration
void <a href="#dom-navigator-registerprotocolhandler" title="dom-navigator-registerProtocolHandler">registerProtocolHandler</a>(in DOMString scheme, in DOMString url, in DOMString title);
void <a href="#dom-navigator-registercontenthandler" title="dom-navigator-registerContentHandler">registerContentHandler</a>(in DOMString mimeType, in DOMString url, in DOMString title);
void <a href="#dom-navigator-yieldforstorageupdates" title="dom-navigator-yieldForStorageUpdates">yieldForStorageUpdates</a>();
<!-- v2: cookieEnabled geolocator javaEnabled mozIsLocallyAvailable preference
readonly attribute <span>MimeTypeArray</span> <span title="dom-navigator-mimeTypes">mimeTypes</span>;
readonly attribute <span>PluginArray</span> <span title="dom-navigator-plugins">plugins</span>;
(the latter is used in a <video> element demo now, so we might need to pull this forward from v2!)
-->};</pre><h4 id="client-identification"><span class="secno">6.6.1 </span>Client identification</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>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.</p><p>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.</p><p>Client detection should always be limited to detecting known
current versions; future versions and unknown versions should always
be assumed to be fully compliant.</p><dl class="domintro"><dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-appName"><a href="#dom-navigator-appname">appName</a></code></dt>
<dd>
<p>Returns the name of the browser.</p>
</dd>
<dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-appVersion"><a href="#dom-navigator-appversion">appVersion</a></code></dt>
<dd>
<p>Returns the version of the browser.</p>
</dd>
<dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-platform"><a href="#dom-navigator-platform">platform</a></code></dt>
<dd>
<p>Returns the name of the platform.</p>
</dd>
<dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-userAgent"><a href="#dom-navigator-useragent">userAgent</a></code></dt>
<dd>
<p>Returns the complete User-Agent header.</p>
</dd>
</dl><h4 id="custom-handlers"><span class="secno">6.6.2 </span>Custom scheme and content handlers</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="dom-navigator-registerprotocolhandler" title="dom-navigator-registerProtocolHandler"><code>registerProtocolHandler()</code></dfn>
method allows Web sites to register themselves as possible handlers
for particular schemes. For example, an online fax service could
register itself as a handler of the <code>fax:</code> scheme (<a href="references.html#refsRFC2806">[RFC2806]</a>), so that if the user clicks on
such a link, he is given the opportunity to use that Web
site. Analogously, the <dfn id="dom-navigator-registercontenthandler" title="dom-navigator-registerContentHandler"><code>registerContentHandler()</code></dfn>
method allows Web sites to register themselves as possible handlers
for content in a particular <a href="infrastructure.html#mime-type">MIME type</a>. For example, the same online
fax service could register itself as a handler for
<code>image/g3fax</code> files (<a href="references.html#refsRFC1494">[RFC1494]</a>), so that if the user has no
native application capable of handling G3 Facsimile byte streams,
his Web browser can instead suggest he use that site to view the
image.</p><dl class="domintro"><dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-registerProtocolHandler"><a href="#dom-navigator-registerprotocolhandler">registerProtocolHandler</a></code>(<var title="">scheme</var>, <var title="">url</var>, <var title="">title</var>)</dt>
<dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-registerContentHandler"><a href="#dom-navigator-registercontenthandler">registerContentHandler</a></code>(<var title="">mimeType</var>, <var title="">url</var>, <var title="">title</var>)</dt>
<dd>
<p>Registers a handler for the given scheme or content type, at
the given URL, with the given title.</p>
<p>The string "<code title="">%s</code>" in the URL is used as a
placeholder for where to put the URL of the content to be
handled.</p>
<p>Throws a <code><a href="urls.html#security_err">SECURITY_ERR</a></code> exception if the user agent
blocks the registration (this might happen if trying to register
as a handler for "http", for instance).</p>
<p>Throws a <code><a href="urls.html#syntax_err">SYNTAX_ERR</a></code> if the "<code title="">%s</code>" string is missing in the URL.</p>
</dd>
</dl><h4 id="manually-releasing-the-storage-mutex"><span class="secno">6.6.3 </span>Manually releasing the storage mutex</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">window</var> . <code title="dom-navigator"><a href="#dom-navigator">navigator</a></code> . <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">yieldForStorageUpdates</a></code>()</dt>
<dd>
<p>If a script uses the <code title="dom-document-cookie"><a href="#dom-document-cookie">document.cookie</a></code> API, or the
<code title="dom-localStorage">localStorage</code> API, the
browser will block other scripts from accessing cookies or storage
until the first script finishes.</p>
<p>Calling the <code title="dom-navigator-yieldForStorageUpdates"><a href="#dom-navigator-yieldforstorageupdates">navigator.yieldForStorageUpdates()</a></code>
method tells the user agent to unblock any other scripts that may
be blocked, even though the script hasn't returned.</p>
<p>Values of cookies and items in the <code>Storage</code> objects
of <code title="dom-localStorage">localStorage</code> attributes
can change after calling this method, whence its name.</p>
</dd>
</dl></body></html>
--- NEW FILE: elements.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>3.2 Elements — HTML5</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"/><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
p + * > li, dd li { margin: 1em 0; }
dt, dfn { font-weight: bold; font-style: normal; }
dt dfn { font-style: italic; }
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
pre em { font-weight: bolder; font-style: normal; }
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead { border-bottom: solid; }
table tbody th:first-child { border-left: solid; }
table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
img.extra { float: right; }
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
pre.css:first-line { color: #AAAA50; }
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; }
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
dl.domintro dd p { margin: 0.5em 0; }
dl.switch { padding-left: 2em; }
dl.switch > dt { text-indent: -1.5em; }
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
dl.triple { padding: 0 0 0 1em; }
dl.triple dt, dl.triple dd { margin: 0; display: inline }
dl.triple dt:after { content: ':'; }
dl.triple dd:after { content: '\A'; white-space: pre; }
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
a .diff-new { border-bottom: 1px blue solid; }
h2 { page-break-before: always; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; }
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
div.head p { margin: 0; }
div.head h1 { margin: 0; }
div.head .logo { float: right; margin: 0 1em; }
div.head .logo img { border: none } /* remove border from top image */
div.head dl { margin: 1em 0; }
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
body > .toc > li > * { margin-bottom: 0.5em; }
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
.toc, .toc li { list-style: none; }
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
.brief li { margin: 0; padding: 0; }
.brief li p { margin: 0; padding: 0; }
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
.category-list li { display: inline; }
.category-list li:not(:last-child)::after { content: ', '; }
.category-list li > span, .category-list li > a { text-transform: lowercase; }
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
.XXX > :first-child { margin-top: 0; }
p .XXX { line-height: 3em; }
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
.annotation :link, .annotation :visited { color: inherit; }
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
.annotation span { border: none ! important; }
.note { color: green; background: transparent; font-family: sans-serif; }
.warning { color: red; background: transparent; }
.note, .warning { font-weight: bolder; font-style: italic; }
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
.note p:first-child, .warning p:first-child { margin-top: 0; }
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
.warning:before { font-style: normal; }
p.note:before { content: 'Note: '; }
p.warning:before { content: '\26A0 Warning! '; }
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
h4 { position: relative; z-index: 3; }
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
.element {
background: #EEEEFF;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -1.15em;
height: 2em;
width: 0.9em;
background: #EEEEFF;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
td > .example:only-child { margin: 0 0 0 0.1em; }
.tall-and-narrow {
font-size: 0.6em;
column-width: 25em;
column-gap: 1em;
-moz-column-width: 25em;
-moz-column-gap: 1em;
-webkit-column-width: 25em;
-webkit-column-gap: 1em;
}
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
ul.domTree li li { list-style: none; }
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree span { font-style: italic; font-family: serif; }
ul.domTree .t1 code { color: purple; font-weight: bold; }
ul.domTree .t2 { font-style: normal; font-family: monospace; }
ul.domTree .t2 .name { color: black; font-weight: bold; }
ul.domTree .t2 .value { color: blue; font-weight: normal; }
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
ul.domTree .t7 code, .domTree .t8 code { color: green; }
ul.domTree .t10 code { color: teal; }
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
#configUI p label { display: block; }
#configUI #updateUI, #configUI .loginUI { text-align: center; }
#configUI input[type=button] { display: block; margin: auto; }
</style><style type="text/css">
.applies thead th > * { display: block; }
.applies thead code { display: block; }
.applies tbody th { whitespace: nowrap; }
.applies td { text-align: center; }
.applies .yes { background: yellow; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
#table-example-1 caption { padding-bottom: 0.5em; }
#table-example-1 thead, #table-example-1 tbody { border: none; }
#table-example-1 th, #table-example-1 td { border: solid thin; }
#table-example-1 th { font-weight: normal; }
#table-example-1 td { border-style: none solid; vertical-align: top; }
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
#table-example-1 tbody td:first-child::after { content: leader(". "); }
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
#table-example-1 tbody td:first-child + td { width: 10em; }
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
.apple-table-examples * { font-family: "Times", serif; }
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
.apple-table-examples td { text-align: right; vertical-align: top; }
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
.apple-table-examples sup { line-height: 0; }
</style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script>
function getCookie(name) {
var params = location.search.substr(1).split("&");
for (var index = 0; index < params.length; index++) {
if (params[index] == name)
return "1";
var data = params[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
var cookies = document.cookie.split("; ");
for (var index = 0; index < cookies.length; index++) {
var data = cookies[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
return null;
}
function load(script) {
var e = document.createElement('script');
e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
document.body.appendChild(e);
}
function init() {
if (location.search == '?slow-browser')
return;
var configUI = document.createElement('div');
configUI.id = 'configUI';
document.body.appendChild(configUI);
// load('reviewer.js'); // would need cross-site XHR
if (document.getElementById('head'))
load('toc.js');
load('styler.js');
// load('updater.js'); // would need cross-site XHR
load('dfn.js');
// load('status.js'); // would need cross-site XHR
if (getCookie('profile') == '1')
document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
fixBrokenLink();
}
</script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="dom.html" title="3 Semantics, structure, and APIs of HTML documents" rel="prev">
<link href="Overview.html#contents" title="Table of contents" rel="index">
<link href="content-models.html" title="3.2.5 Content models" rel="next">
</head><body onload="fixBrokenLink(); init()"><div class="head" id="head">
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
</div><div>
<a href="dom.html">← 3 Semantics, structure, and APIs of HTML documents</a> –
<a href="Overview.html#contents">Table of contents</a> –
<a href="content-models.html">3.2.5 Content models →</a>
<ol class="toc"><li><ol><li><a href="elements.html#elements"><span class="secno">3.2 </span>Elements</a>
<ol><li><a href="elements.html#semantics-0"><span class="secno">3.2.1 </span>Semantics</a></li><li><a href="elements.html#elements-in-the-dom"><span class="secno">3.2.2 </span>Elements in the DOM</a></li><li><a href="elements.html#global-attributes"><span class="secno">3.2.3 </span>Global attributes</a>
<ol><li><a href="elements.html#the-id-attribute"><span class="secno">3.2.3.1 </span>The <code>id</code> attribute</a></li><li><a href="elements.html#the-title-attribute"><span class="secno">3.2.3.2 </span>The <code>title</code> attribute</a></li><li><a href="elements.html#the-lang-and-xml:lang-attributes"><span class="secno">3.2.3.3 </span>The <code title="attr-lang">lang</code> and <code title="attr-xml-lang">xml:lang</code> attributes</a></li><li><a href="elements.html#the-xml:base-attribute-xml-only"><span class="secno">3.2.3.4 </span>The <code>xml:base</code>
attribute (XML only)</a></li><li><a href="elements.html#the-dir-attribute"><span class="secno">3.2.3.5 </span>The <code>dir</code> attribute</a></li><li><a href="elements.html#classes"><span class="secno">3.2.3.6 </span>The <code>class</code> attribute</a></li><li><a href="elements.html#the-style-attribute"><span class="secno">3.2.3.7 </span>The <code>style</code> attribute</a></li><li><a href="elements.html#embedding-custom-non-visible-data"><span class="secno">3.2.3.8 </span>Embedding custom non-visible data</a></li></ol></li><li><a href="elements.html#element-definitions"><span class="secno">3.2.4 </span>Element definitions</a></li></ol></li></ol></li></ol></div>
<h3 id="elements"><span class="secno">3.2 </span>Elements</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h4 id="semantics-0"><span class="secno">3.2.1 </span>Semantics</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments. </i><span><a href="http://www.w3.org/html/wg/tracker/issues/41">ISSUE-41</a> (Decentralized-extensibility) blocks progress to Last Call</span></p><p>Elements, attributes, and attribute values in HTML are defined
(by this specification) to have certain meanings (semantics). For
example, the <code><a href="grouping-content.html#the-ol-element">ol</a></code> element represents an ordered list, and
the <code title="attr-lang"><a href="#attr-lang">lang</a></code> attribute represents the
language of the content.</p><p>Authors must not use elements, attributes, and attribute values
for purposes other than their appropriate intended semantic
purpose. Authors must not use elements, attributes, and attribute
values that are not permitted by this specification or <a href="#other-applicable-specifications">other
applicable specifications</a>.</p><div class="example">
<p>For example, the following document is non-conforming, despite
being syntactically correct:</p>
<pre class="bad"><!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></pre>
<p>...because the data placed in the cells is clearly not tabular
data (and the <code><a href="text-level-semantics.html#the-cite-element">cite</a></code> element mis-used). A corrected
version of this document might be:</p>
<pre><!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></pre>
<p>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).</p>
<pre class="bad"><body>
<h1>ABC Company</h1>
<h2>Leading the way in widget design since 1432</h2>
...</pre>
<p>The <code><a href="sections.html#the-hgroup-element">hgroup</a></code> element is intended for these kinds of
situations:</p>
<pre><body>
<hgroup>
<h1>ABC Company</h1>
<h2>Leading the way in widget design since 1432</h2>
</hgroup>
...</pre>
<p>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:</p>
<pre class="bad"><label>Carpet: <input type="carpet" name="c" texture="deep pile"></label></pre>
<p>Here would be an alternative and correct way to mark this up:</p>
<pre><label>Carpet: <input type="text" class="carpet" name="c" data-texture="deep pile"></label></pre>
</div><p>Through scripting and using other mechanisms, the values of
attributes, text, and indeed the entire structure of the document
may change dynamically while a user agent is processing it. The
semantics of a document at an instant in time are those represented
by the state of the document at that instant in time, and the
semantics of a document can therefore change over time. User agents
must</p><p class="example">HTML has a <code><a href="text-level-semantics.html#the-progress-element">progress</a></code> element that
describes a progress bar. If its "value" attribute is dynamically
updated by a script, the UA would update the rendering to show the
progress changing.</p><h4 id="elements-in-the-dom"><span class="secno">3.2.2 </span>Elements in the DOM</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The nodes representing <a href="infrastructure.html#html-elements">HTML elements</a> in the DOM
implement, and expose to scripts, the
interfaces listed for them in the relevant sections of this
specification. This includes <a href="infrastructure.html#html-elements">HTML elements</a> in <a href="dom.html#xml-documents">XML
documents</a>, even when those documents are in another context
(e.g. inside an XSLT transform).</p><p>Elements in the DOM <a href="#represents" title="represents">represent</a>
things; that is, they have intrinsic <em>meaning</em>, also known as
semantics.</p><p class="example">For example, an <code><a href="grouping-content.html#the-ol-element">ol</a></code> element
represents an ordered list.</p><p>The basic interface, from which all the <a href="infrastructure.html#html-elements">HTML
elements</a>' interfaces inherit, is the <code><a href="#htmlelement">HTMLElement</a></code> interface.</p><pre class="idl">interface <dfn id="htmlelement">HTMLElement</dfn> : <span>Element</span> {
// <a href="dom.html#dom-tree-accessors">DOM tree accessors</a>
NodeList <a href="#dom-getelementsbyclassname" title="dom-getElementsByClassName">getElementsByClassName</a>(in DOMString classNames);
// <a href="apis-in-html-documents.html#dynamic-markup-insertion">dynamic markup insertion</a>
attribute DOMString <a href="apis-in-html-documents.html#dom-innerhtml" title="dom-innerHTML">innerHTML</a>;
attribute DOMString <a href="apis-in-html-documents.html#dom-outerhtml" title="dom-outerHTML">outerHTML</a>;
void <a href="#dom-insertadjacenthtml" title="dom-insertAdjacentHTML">insertAdjacentHTML</a>(in DOMString position, in DOMString text);
// <span>metadata attributes</span>
attribute DOMString <a href="#dom-id" title="dom-id">id</a>;
attribute DOMString <a href="#dom-title" title="dom-title">title</a>;
attribute DOMString <a href="#dom-lang" title="dom-lang">lang</a>;
attribute DOMString <a href="#dom-dir" title="dom-dir">dir</a>;
attribute <span>DOMString</span> <a href="#dom-classname" title="dom-className">className</a>;
readonly attribute <a href="urls.html#domtokenlist">DOMTokenList</a> <a href="#dom-classlist" title="dom-classList">classList</a>;
readonly attribute <a href="#domstringmap">DOMStringMap</a> <a href="#dom-dataset" title="dom-dataset">dataset</a>;
// <a href="microdata.html#microdata">microdata</a>
attribute boolean <a href="#dom-itemscope" title="dom-itemScope">itemScope</a>;
attribute DOMString <a href="#dom-itemtype" title="dom-itemType">itemType</a>;
attribute DOMString <a href="#dom-itemid" title="dom-itemId">itemId</a>;
attribute DOMString <a href="#dom-itemref" title="dom-itemRef">itemRef</a>;
[PutForwards=<a href="#dom-domsettabletokenlist-value" title="dom-DOMSettableTokenList-value">value</a>] readonly attribute <a href="urls.html#domsettabletokenlist">DOMSettableTokenList</a> <a href="#dom-itemprop" title="dom-itemProp">itemProp</a>;
readonly attribute <a href="urls.html#htmlpropertiescollection">HTMLPropertiesCollection</a> <a href="#dom-properties" title="dom-properties">properties</a>;
attribute any <a href="#dom-itemvalue" title="dom-itemValue">itemValue</a>;
// <a href="editing.html#editing">user interaction</a>
attribute boolean <a href="#dom-hidden" title="dom-hidden">hidden</a>;
void <a href="#dom-click" title="dom-click">click</a>();
void <a href="#dom-scrollintoview" title="dom-scrollIntoView">scrollIntoView</a>();
void <a href="#dom-scrollintoview" title="dom-scrollIntoView">scrollIntoView</a>(in boolean top);
attribute long <a href="#dom-tabindex" title="dom-tabindex">tabIndex</a>;
void <a href="#dom-focus" title="dom-focus">focus</a>();
void <a href="#dom-blur" title="dom-blur">blur</a>();
attribute DOMString <a href="#dom-accesskey" title="dom-accessKey">accessKey</a>;
readonly attribute DOMString <a href="#dom-accesskeylabel" title="dom-accessKeyLabel">accessKeyLabel</a>;
attribute boolean <a href="#dom-draggable" title="dom-draggable">draggable</a>;
attribute DOMString <a href="#dom-contenteditable" title="dom-contentEditable">contentEditable</a>;
readonly attribute boolean <a href="#dom-iscontenteditable" title="dom-isContentEditable">isContentEditable</a>;
attribute <a href="interactive-elements.html#htmlmenuelement">HTMLMenuElement</a> <a href="#dom-contextmenu" title="dom-contextMenu">contextMenu</a>;
attribute DOMString <a href="#dom-spellcheck" title="dom-spellcheck">spellcheck</a>;
// <a href="commands.html#command-api">command API</a>
readonly attribute DOMString <a href="#dom-command-ro-commandtype" title="dom-command-ro-commandType">commandType</a>;
readonly attribute DOMString <a href="#dom-command-ro-label" title="dom-command-ro-label">label</a>;
readonly attribute DOMString <a href="#dom-command-ro-icon" title="dom-command-ro-icon">icon</a>;
readonly attribute boolean <a href="#dom-command-ro-disabled" title="dom-command-ro-disabled">disabled</a>;
readonly attribute boolean <a href="#dom-command-ro-checked" title="dom-command-ro-checked">checked</a>;<!-- v2COMMAND
readonly attribute <span>HTMLCollection</span> <span title="dom-command-ro-triggers">triggers</span>;-->
// <span>styling</span>
readonly attribute <span>CSSStyleDeclaration</span> <a href="#dom-style" title="dom-style">style</a>;
// <a href="#event-handler-idl-attributes">event handler IDL attributes</a>
attribute <a href="#function">Function</a> <a href="#handler-onabort" title="handler-onabort">onabort</a>;
attribute <a href="#function">Function</a> <a href="#handler-onblur" title="handler-onblur">onblur</a>;
attribute <a href="#function">Function</a> <a href="#handler-oncanplay" title="handler-oncanplay">oncanplay</a>;
attribute <a href="#function">Function</a> <a href="#handler-oncanplaythrough" title="handler-oncanplaythrough">oncanplaythrough</a>;
attribute <a href="#function">Function</a> <a href="#handler-onchange" title="handler-onchange">onchange</a>;
attribute <a href="#function">Function</a> <a href="#handler-onclick" title="handler-onclick">onclick</a>;
attribute <a href="#function">Function</a> <a href="#handler-oncontextmenu" title="handler-oncontextmenu">oncontextmenu</a>;
attribute <a href="#function">Function</a> <a href="#handler-ondblclick" title="handler-ondblclick">ondblclick</a>;
attribute <a href="#function">Function</a> <a href="#handler-ondrag" title="handler-ondrag">ondrag</a>;
attribute <a href="#function">Function</a> <a href="#handler-ondragend" title="handler-ondragend">ondragend</a>;
attribute <a href="#function">Function</a> <a href="#handler-ondragenter" title="handler-ondragenter">ondragenter</a>;
attribute <a href="#function">Function</a> <a href="#handler-ondragleave" title="handler-ondragleave">ondragleave</a>;
attribute <a href="#function">Function</a> <a href="#handler-ondragover" title="handler-ondragover">ondragover</a>;
attribute <a href="#function">Function</a> <a href="#handler-ondragstart" title="handler-ondragstart">ondragstart</a>;
attribute <a href="#function">Function</a> <a href="#handler-ondrop" title="handler-ondrop">ondrop</a>;
attribute <a href="#function">Function</a> <a href="#handler-ondurationchange" title="handler-ondurationchange">ondurationchange</a>;
attribute <a href="#function">Function</a> <a href="#handler-onemptied" title="handler-onemptied">onemptied</a>;
attribute <a href="#function">Function</a> <a href="#handler-onended" title="handler-onended">onended</a>;
attribute <a href="#function">Function</a> <a href="#handler-onerror" title="handler-onerror">onerror</a>;
attribute <a href="#function">Function</a> <a href="#handler-onfocus" title="handler-onfocus">onfocus</a>;
attribute <a href="#function">Function</a> <a href="#handler-onformchange" title="handler-onformchange">onformchange</a>;
attribute <a href="#function">Function</a> <a href="#handler-onforminput" title="handler-onforminput">onforminput</a>;
attribute <a href="#function">Function</a> <a href="#handler-oninput" title="handler-oninput">oninput</a>;
attribute <a href="#function">Function</a> <a href="#handler-oninvalid" title="handler-oninvalid">oninvalid</a>;
attribute <a href="#function">Function</a> <a href="#handler-onkeydown" title="handler-onkeydown">onkeydown</a>;
attribute <a href="#function">Function</a> <a href="#handler-onkeypress" title="handler-onkeypress">onkeypress</a>;
attribute <a href="#function">Function</a> <a href="#handler-onkeyup" title="handler-onkeyup">onkeyup</a>;
attribute <a href="#function">Function</a> <a href="#handler-onload" title="handler-onload">onload</a>;
attribute <a href="#function">Function</a> <a href="#handler-onloadeddata" title="handler-onloadeddata">onloadeddata</a>;
attribute <a href="#function">Function</a> <a href="#handler-onloadedmetadata" title="handler-onloadedmetadata">onloadedmetadata</a>;
attribute <a href="#function">Function</a> <a href="#handler-onloadstart" title="handler-onloadstart">onloadstart</a>;
attribute <a href="#function">Function</a> <a href="#handler-onmousedown" title="handler-onmousedown">onmousedown</a>;
attribute <a href="#function">Function</a> <a href="#handler-onmousemove" title="handler-onmousemove">onmousemove</a>;
attribute <a href="#function">Function</a> <a href="#handler-onmouseout" title="handler-onmouseout">onmouseout</a>;
attribute <a href="#function">Function</a> <a href="#handler-onmouseover" title="handler-onmouseover">onmouseover</a>;
attribute <a href="#function">Function</a> <a href="#handler-onmouseup" title="handler-onmouseup">onmouseup</a>;
attribute <a href="#function">Function</a> <a href="#handler-onmousewheel" title="handler-onmousewheel">onmousewheel</a>;
attribute <a href="#function">Function</a> <a href="#handler-onpause" title="handler-onpause">onpause</a>;
attribute <a href="#function">Function</a> <a href="#handler-onplay" title="handler-onplay">onplay</a>;
attribute <a href="#function">Function</a> <a href="#handler-onplaying" title="handler-onplaying">onplaying</a>;
attribute <a href="#function">Function</a> <a href="#handler-onprogress" title="handler-onprogress">onprogress</a>;
attribute <a href="#function">Function</a> <a href="#handler-onratechange" title="handler-onratechange">onratechange</a>;
attribute <a href="#function">Function</a> <a href="#handler-onreadystatechange" title="handler-onreadystatechange">onreadystatechange</a>;
attribute <a href="#function">Function</a> <a href="#handler-onscroll" title="handler-onscroll">onscroll</a>;
attribute <a href="#function">Function</a> <a href="#handler-onseeked" title="handler-onseeked">onseeked</a>;
attribute <a href="#function">Function</a> <a href="#handler-onseeking" title="handler-onseeking">onseeking</a>;
attribute <a href="#function">Function</a> <a href="#handler-onselect" title="handler-onselect">onselect</a>;
attribute <a href="#function">Function</a> <a href="#handler-onshow" title="handler-onshow">onshow</a>;
attribute <a href="#function">Function</a> <a href="#handler-onstalled" title="handler-onstalled">onstalled</a>;
attribute <a href="#function">Function</a> <a href="#handler-onsubmit" title="handler-onsubmit">onsubmit</a>;
attribute <a href="#function">Function</a> <a href="#handler-onsuspend" title="handler-onsuspend">onsuspend</a>;
attribute <a href="#function">Function</a> <a href="#handler-ontimeupdate" title="handler-ontimeupdate">ontimeupdate</a>;
attribute <a href="#function">Function</a> <a href="#handler-onvolumechange" title="handler-onvolumechange">onvolumechange</a>;
attribute <a href="#function">Function</a> <a href="#handler-onwaiting" title="handler-onwaiting">onwaiting</a>;
};
interface <dfn id="htmlunknownelement">HTMLUnknownElement</dfn> : <a href="#htmlelement">HTMLElement</a> { };</pre><p>The <code><a href="#htmlelement">HTMLElement</a></code> interface holds methods and
attributes related to a number of disparate features, and the
members of this interface are therefore described in various
different sections of this specification.</p><h4 id="global-attributes"><span class="secno">3.2.3 </span><dfn>Global attributes</dfn></h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The following attributes are common to and may be specified on
all <a href="infrastructure.html#html-elements">HTML elements</a>:</p><ul class="brief"><li><code title="attr-accesskey"><a href="editing.html#the-accesskey-attribute">accesskey</a></code></li>
<li><code title="attr-class"><a href="#classes">class</a></code></li>
<li><code title="attr-contenteditable"><a href="editing.html#attr-contenteditable">contenteditable</a></code></li>
<li><code title="attr-contextmenu"><a href="interactive-elements.html#attr-contextmenu">contextmenu</a></code></li>
<li><code title="attr-dir"><a href="#the-dir-attribute">dir</a></code></li>
<li><code title="attr-draggable"><a href="dnd.html#the-draggable-attribute">draggable</a></code></li>
<li><code title="attr-hidden"><a href="editing.html#the-hidden-attribute">hidden</a></code></li>
<li><code title="attr-id"><a href="#the-id-attribute">id</a></code></li>
<li><code title="attr-itemid"><a href="microdata.html#attr-itemid">itemid</a></code></li>
<li><code title="attr-itemprop"><a href="microdata.html#names:-the-itemprop-attribute">itemprop</a></code></li>
<li><code title="attr-itemref"><a href="microdata.html#attr-itemref">itemref</a></code></li>
<li><code title="attr-itemscope"><a href="microdata.html#attr-itemscope">itemscope</a></code></li>
<li><code title="attr-itemtype"><a href="microdata.html#attr-itemtype">itemtype</a></code></li>
<li><code title="attr-lang"><a href="#attr-lang">lang</a></code></li>
<li><code title="attr-spellcheck"><a href="editing.html#attr-spellcheck">spellcheck</a></code></li>
<li><code title="attr-style"><a href="#the-style-attribute">style</a></code></li>
<li><code title="attr-tabindex"><a href="editing.html#attr-tabindex">tabindex</a></code></li>
<li><code title="attr-title"><a href="#the-title-attribute">title</a></code></li>
</ul><hr><p>The following <a href="browsers.html#event-handler-content-attributes">event handler content attributes</a> may
be specified on any <a href="infrastructure.html#html-elements" title="HTML elements">HTML
element</a>:</p><ul class="brief"><li><code title="handler-onabort"><a href="#handler-onabort">onabort</a></code></li>
<li><code title="handler-onblur"><a href="#handler-onblur">onblur</a></code>*</li>
<li><code title="handler-oncanplay"><a href="#handler-oncanplay">oncanplay</a></code></li>
<li><code title="handler-oncanplaythrough"><a href="#handler-oncanplaythrough">oncanplaythrough</a></code></li>
<li><code title="handler-onchange"><a href="#handler-onchange">onchange</a></code></li>
<li><code title="handler-onclick"><a href="#handler-onclick">onclick</a></code></li>
<li><code title="handler-oncontextmenu"><a href="#handler-oncontextmenu">oncontextmenu</a></code></li>
<li><code title="handler-ondblclick"><a href="#handler-ondblclick">ondblclick</a></code></li>
<li><code title="handler-ondrag"><a href="#handler-ondrag">ondrag</a></code></li>
<li><code title="handler-ondragend"><a href="#handler-ondragend">ondragend</a></code></li>
<li><code title="handler-ondragenter"><a href="#handler-ondragenter">ondragenter</a></code></li>
<li><code title="handler-ondragleave"><a href="#handler-ondragleave">ondragleave</a></code></li>
<li><code title="handler-ondragover"><a href="#handler-ondragover">ondragover</a></code></li>
<li><code title="handler-ondragstart"><a href="#handler-ondragstart">ondragstart</a></code></li>
<li><code title="handler-ondrop"><a href="#handler-ondrop">ondrop</a></code></li>
<li><code title="handler-ondurationchange"><a href="#handler-ondurationchange">ondurationchange</a></code></li>
<li><code title="handler-onemptied"><a href="#handler-onemptied">onemptied</a></code></li>
<li><code title="handler-onended"><a href="#handler-onended">onended</a></code></li>
<li><code title="handler-onerror"><a href="#handler-onerror">onerror</a></code>*</li>
<li><code title="handler-onfocus"><a href="#handler-onfocus">onfocus</a></code>*</li>
<li><code title="handler-onformchange"><a href="#handler-onformchange">onformchange</a></code></li>
<li><code title="handler-onforminput"><a href="#handler-onforminput">onforminput</a></code></li>
<li><code title="handler-oninput"><a href="#handler-oninput">oninput</a></code></li>
<li><code title="handler-oninvalid"><a href="#handler-oninvalid">oninvalid</a></code></li>
<li><code title="handler-onkeydown"><a href="#handler-onkeydown">onkeydown</a></code></li>
<li><code title="handler-onkeypress"><a href="#handler-onkeypress">onkeypress</a></code></li>
<li><code title="handler-onkeyup"><a href="#handler-onkeyup">onkeyup</a></code></li>
<li><code title="handler-onload"><a href="#handler-onload">onload</a></code>*</li>
<li><code title="handler-onloadeddata"><a href="#handler-onloadeddata">onloadeddata</a></code></li>
<li><code title="handler-onloadedmetadata"><a href="#handler-onloadedmetadata">onloadedmetadata</a></code></li>
<li><code title="handler-onloadstart"><a href="#handler-onloadstart">onloadstart</a></code></li>
<li><code title="handler-onmousedown"><a href="#handler-onmousedown">onmousedown</a></code></li>
<li><code title="handler-onmousemove"><a href="#handler-onmousemove">onmousemove</a></code></li>
<li><code title="handler-onmouseout"><a href="#handler-onmouseout">onmouseout</a></code></li>
<li><code title="handler-onmouseover"><a href="#handler-onmouseover">onmouseover</a></code></li>
<li><code title="handler-onmouseup"><a href="#handler-onmouseup">onmouseup</a></code></li>
<li><code title="handler-onmousewheel"><a href="#handler-onmousewheel">onmousewheel</a></code></li>
<li><code title="handler-onpause"><a href="#handler-onpause">onpause</a></code></li>
<li><code title="handler-onplay"><a href="#handler-onplay">onplay</a></code></li>
<li><code title="handler-onplaying"><a href="#handler-onplaying">onplaying</a></code></li>
<li><code title="handler-onprogress"><a href="#handler-onprogress">onprogress</a></code></li>
<li><code title="handler-onratechange"><a href="#handler-onratechange">onratechange</a></code></li>
<li><code title="handler-onreadystatechange"><a href="#handler-onreadystatechange">onreadystatechange</a></code></li>
<li><code title="handler-onscroll"><a href="#handler-onscroll">onscroll</a></code></li>
<li><code title="handler-onseeked"><a href="#handler-onseeked">onseeked</a></code></li>
<li><code title="handler-onseeking"><a href="#handler-onseeking">onseeking</a></code></li>
<li><code title="handler-onselect"><a href="#handler-onselect">onselect</a></code></li>
<li><code title="handler-onshow"><a href="#handler-onshow">onshow</a></code></li>
<li><code title="handler-onstalled"><a href="#handler-onstalled">onstalled</a></code></li>
<li><code title="handler-onsubmit"><a href="#handler-onsubmit">onsubmit</a></code></li>
<li><code title="handler-onsuspend"><a href="#handler-onsuspend">onsuspend</a></code></li>
<li><code title="handler-ontimeupdate"><a href="#handler-ontimeupdate">ontimeupdate</a></code></li>
<li><code title="handler-onvolumechange"><a href="#handler-onvolumechange">onvolumechange</a></code></li>
<li><code title="handler-onwaiting"><a href="#handler-onwaiting">onwaiting</a></code></li>
</ul><p class="note">The attributes marked with an asterisk have a
different meaning when specified on <code><a href="sections.html#the-body-element-0">body</a></code> elements as
those elements expose <a href="browsers.html#event-handlers">event handlers</a> of the
<code><a href="browsers.html#window">Window</a></code> object with the same names.</p><p class="note">While these attributes apply to all elements, they
are not useful on all elements. For example, only <a href="video.html#media-element" title="media
element">media elements</a> will ever receive a <code title="event-media-volumechange"><a href="video.html#event-media-volumechange">volumechange</a></code> event fired by
the user agent.</p><hr><p><a href="#custom-data-attribute" title="custom data attribute">Custom data attributes</a>
(e.g. <code title="">data-foldername</code> or <code title="">data-msgid</code>) can be specified on any <a href="infrastructure.html#html-elements" title="HTML elements">HTML element</a>, to store custom data
specific to the page.</p><hr><p>In <a href="dom.html#html-documents">HTML documents</a>, elements in the <a href="#html-namespace-0">HTML
namespace</a> may have an <code title="">xmlns</code> attribute
specified, if, and only if, it has the exact value
"<code>http://www.w3.org/1999/xhtml</code>". This does not apply to
<a href="dom.html#xml-documents">XML documents</a>.</p><p class="note">In HTML, the <code title="">xmlns</code> 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 <a href="#html-parser">HTML parser</a>, the attribute ends up in no
namespace, not the "<code>http://www.w3.org/2000/xmlns/</code>"
namespace like namespace declaration attributes in XML do.</p><p class="note">In XML, an <code title="">xmlns</code> attribute is
part of the namespace declaration mechanism, and an element cannot
actually have an <code title="">xmlns</code> attribute in no
namespace specified.</p><hr><p>To enable assistive technology products to expose a more
fine-grained interface than is otherwise possible with HTML elements
and attributes, a set of <a href="content-models.html#annotations-for-assistive-technology-products-aria">annotations for assistive technology
products</a> can be specified.</p><h5 id="the-id-attribute"><span class="secno">3.2.3.1 </span>The <dfn title="attr-id"><code>id</code></dfn> attribute</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="attr-id"><a href="#the-id-attribute">id</a></code> attribute specifies its
element's <dfn id="concept-id" title="concept-id">unique identifier (ID)</dfn>. The
value must be unique amongst all the IDs in the element's <a href="infrastructure.html#home-subtree">home
subtree</a> and must contain at least one character. The value
must not contain any <a href="#space-character" title="space character">space
characters</a>.</p><!-- space characters are disallowed because space-separated lists
of IDs otherwise would not be able to reach all valid IDs --><p class="note">An element's <a href="#concept-id" title="concept-id">unique
identifier</a> can be used for a variety of purposes, most
notably as a way to link to specific parts of a document using
fragment identifiers, as a way to target an element when scripting,
and as a way to style a specific element from CSS.</p><h5 id="the-title-attribute"><span class="secno">3.2.3.2 </span>The <dfn title="attr-title"><code>title</code></dfn> attribute</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute
<a href="#represents">represents</a> advisory information for the element, such
as would be appropriate for a tooltip. On a link, this could be the
title or a description of the target resource; on an image, it could
be the image credit or a description of the image; on a paragraph,
it could be a footnote or commentary on the text; on a citation, it
could be further information about the source; and so forth. The
value is text.</p><p>If this attribute is omitted from an element, then it implies
that the <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute of the
nearest ancestor <a href="infrastructure.html#html-elements" title="HTML elements">HTML element</a>
with a <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute set is also
relevant to this element. Setting the attribute overrides this,
explicitly stating that the advisory information of any ancestors is
not relevant to this element. Setting the attribute to the empty
string indicates that the element has no advisory information.</p><p>If the <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute's value
contains U+000A LINE FEED (LF) characters, the content is split into
multiple lines. Each U+000A LINE FEED (LF) character represents a
line break.</p><div class="example">
<p>Caution is advised with respect to the use of newlines in <code title="attr-title"><a href="#the-title-attribute">title</a></code> attributes.</p>
<p>For instance, the following snippet actually defines an
abbreviation's expansion <em>with a line break in it</em>:</p>
<pre class="bad"><p>My logs show that there was some interest in <abbr title="Hypertext
Transport Protocol">HTTP</abbr> today.</p></pre>
</div><p>Some elements, such as <code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="text-level-semantics.html#the-abbr-element">abbr</a></code>, and
<code><a href="the-input-element.html#the-input-element">input</a></code>, define additional semantics for the <code title="attr-title"><a href="#the-title-attribute">title</a></code> attribute beyond the semantics
described above.</p><h5 id="the-lang-and-xml:lang-attributes"><span class="secno">3.2.3.3 </span>The <code title="attr-lang"><a href="#attr-lang">lang</a></code> and <code title="attr-xml-lang"><a href="#attr-xml-lang">xml:lang</a></code> attributes</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-lang" title="attr-lang"><code>lang</code></dfn> attribute (in
no namespace) specifies the primary <dfn id="language">language</dfn> 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 code, or
the empty string. <a href="references.html#refsBCP47">[BCP47]</a></p><p>The <dfn id="attr-xml-lang" title="attr-xml-lang"><code title="">lang</code></dfn>
attribute in the <a href="#xml-namespace">XML namespace</a> is defined in XML. <a href="references.html#refsXML">[XML]</a></p><p>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. Setting the attribute to the empty string indicates
that the primary language is unknown.</p><!-- UA conformance
requires for this are below --><p>The <code title="attr-lang"><a href="#attr-lang">lang</a></code> attribute in no namespace
may be used on any <a href="infrastructure.html#html-elements" title="HTML elements">HTML
element</a>.</p><p>The <a href="#attr-xml-lang" title="attr-xml-lang"><code title="">lang</code>
attribute in the <span>XML namespace</span></a> may be used on
<a href="infrastructure.html#html-elements">HTML elements</a> in <a href="dom.html#xml-documents">XML documents</a>, as well as
elements in other namespaces if the relevant specifications allow it
(in particular, MathML and SVG allow <a href="#attr-xml-lang" title="attr-xml-lang"><code title="">lang</code> attributes in the
<span>XML namespace</span></a> to be specified on their
elements). If both the <code title="attr-lang"><a href="#attr-lang">lang</a></code> attribute
in no namespace and the <a href="#attr-xml-lang" title="attr-xml-lang"><code title="">lang</code> attribute in the <span>XML
namespace</span></a> are specified on the same element, they must
have exactly the same value when compared in an <a href="infrastructure.html#ascii-case-insensitive">ASCII
case-insensitive</a> manner.</p><p>Authors must not use the <a href="#attr-xml-lang" title="attr-xml-lang"><code title="">lang</code> attribute in the <span>XML
namespace</span></a> on <a href="infrastructure.html#html-elements">HTML elements</a> in <a href="dom.html#html-documents">HTML
documents</a>. To ease migration to and from XHTML, authors may
specify an attribute in no namespace with no prefix and with the
literal localname "<code title="">xml:lang</code>" on <a href="infrastructure.html#html-elements">HTML
elements</a> in <a href="dom.html#html-documents">HTML documents</a>, but such attributes
must only be specified if a <code title="attr-lang"><a href="#attr-lang">lang</a></code>
attribute in no namespace is also specified, and both attributes
must have the same value when compared in an <a href="infrastructure.html#ascii-case-insensitive">ASCII
case-insensitive</a> manner.</p><p class="note">The attribute in no namespace with no prefix and
with the literal localname "<code title="">xml:lang</code>" has no
effect on language processing.</p><h5 id="the-xml:base-attribute-xml-only"><span class="secno">3.2.3.4 </span>The <dfn title="attr-xml-base"><code>xml:base</code></dfn>
attribute (XML only)</h5><p>The <code title="attr-xml-base"><a href="#the-xml:base-attribute-xml-only">xml:base</a></code> attribute is
defined in XML Base. <a href="references.html#refsXMLBASE">[XMLBASE]</a></p><p>The <code title="attr-xml-base"><a href="#the-xml:base-attribute-xml-only">xml:base</a></code> attribute may be
used on elements of <a href="dom.html#xml-documents">XML documents</a>. Authors must not
use the <code title="attr-xml-base"><a href="#the-xml:base-attribute-xml-only">xml:base</a></code> attribute in
<a href="dom.html#html-documents">HTML documents</a>.</p><h5 id="the-dir-attribute"><span class="secno">3.2.3.5 </span>The <dfn title="attr-dir"><code>dir</code></dfn> attribute</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute specifies the
element's text directionality. The attribute is an <a href="common-microsyntaxes.html#enumerated-attribute">enumerated
attribute</a> with the keyword <code title="">ltr</code> mapping
to the state <i>ltr</i>, and the keyword <code title="">rtl</code>
mapping to the state <i>rtl</i>. The attribute has no
defaults.</p><p><dfn id="the-directionality">The directionality</dfn> of an element, which is used in
particular by the <code><a href="the-canvas-element.html#the-canvas-element">canvas</a></code> element's text rendering API,
is either 'ltr' or 'rtl'. If the user agent supports CSS and the
'direction' property on this element has a computed value of either
'ltr' or 'rtl', then that is <a href="#the-directionality">the directionality</a> of the
element. Otherwise, if the element is <a href="#being-rendered">being rendered</a>,
then <a href="#the-directionality">the directionality</a> of the element is the
directionality used by the presentation layer, potentially
determined from the value of the <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code>
attribute on the element. Otherwise, if the element's <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute has the state <i>ltr</i>, the
element's directionality is 'ltr' (left-to-right); if the attribute
has the state <i>rtl</i>, the element's directionality is 'rtl'
(right-to-left); and otherwise, the element's directionality is the
same as its parent element, or 'ltr' if there is no parent
element.</p><hr><dl class="domintro"><dt><var title="">document</var> . <code title="dom-dir"><a href="#dom-dir">dir</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns <a href="dom.html#the-html-element">the <code>html</code> element</a>'s <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute's value, if any.</p>
<p>Can be set, to either "<code title="">ltr</code>" or "<code title="">rtl</code>", to replace <a href="dom.html#the-html-element">the <code>html</code> element</a>'s <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute's value.</p>
<p>If there is no <a href="dom.html#the-html-element" title="the html element"><code>html</code> element</a>, returns the empty string and ignores new values.</p>
</dd>
</dl><p class="note">Authors are strongly encouraged to use the <code title="attr-dir"><a href="#the-dir-attribute">dir</a></code> attribute to indicate text direction
rather than using CSS, since that way their documents will continue
to render correctly even in the absence of CSS (e.g. as interpreted
by search engines).</p><h5 id="classes"><span class="secno">3.2.3.6 </span>The <dfn title="attr-class"><code>class</code></dfn> attribute</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Every <a href="infrastructure.html#html-elements" title="HTML elements">HTML element</a> may have a
<code title="attr-class"><a href="#classes">class</a></code> attribute specified.</p><p>The attribute, if specified, must have a value that is a
<a href="common-microsyntaxes.html#set-of-space-separated-tokens">set of space-separated tokens</a> representing the various
classes that the element belongs to.</p><p class="note">Assigning classes to an element affects class
matching in selectors in CSS, the <code title="dom-document-getElementsByClassName"><a href="#dom-document-getelementsbyclassname">getElementsByClassName()</a></code>
method in the DOM, and other such features.</p><p>There are no additional restrictions on the tokens authors can
use in the <code title="attr-class"><a href="#classes">class</a></code> attribute, but
authors are encouraged to use values that describe the nature of the
content, rather than values that describe the desired presentation
of the content.</p><h5 id="the-style-attribute"><span class="secno">3.2.3.7 </span>The <dfn title="attr-style"><code>style</code></dfn> attribute</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>All <a href="infrastructure.html#html-elements">HTML elements</a> may have the <code title="attr-style"><a href="#the-style-attribute">style</a></code> content attribute set. If specified,
the attribute must contain only a list of zero or more
semicolon-separated (;) CSS declarations. <a href="references.html#refsCSS">[CSS]</a></p><p>Documents that use <code title="attr-style"><a href="#the-style-attribute">style</a></code>
attributes on any of their elements must still be comprehensible and
usable if those attributes were removed.</p><p class="note">In particular, using the <code title="attr-style"><a href="#the-style-attribute">style</a></code> attribute to hide and show content,
or to convey meaning that is otherwise not included in the document,
is non-conforming. (To hide and show content, use the <code title="attr-hidden"><a href="editing.html#the-hidden-attribute">hidden</a></code> attribute.)</p><hr><dl class="domintro"><dt><var title="">element</var> . <code title="dom-style"><a href="#dom-style">style</a></code></dt>
<dd>
<p>Returns a <code>CSSStyleDeclaration</code> object for the element's <code title="attr-style"><a href="#the-style-attribute">style</a></code> attribute.</p>
</dd>
</dl><div class="example">
<p>In the following example, the words that refer to colors are
marked up using the <code><a href="text-level-semantics.html#the-span-element">span</a></code> element and the <code title="attr-style"><a href="#the-style-attribute">style</a></code> attribute to make those words show
up in the relevant colors in visual media.</p>
<pre><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></pre>
</div><h5 id="embedding-custom-non-visible-data"><span class="secno">3.2.3.8 </span><dfn>Embedding custom non-visible data</dfn></h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A <dfn id="custom-data-attribute">custom data attribute</dfn> is an attribute in no
namespace whose name starts with the string "<dfn id="attr-data" title="attr-data-*"><code>data-</code></dfn>", has at least one
character after the hyphen, is <a href="infrastructure.html#xml-compatible">XML-compatible</a>, and
contains no characters in the range U+0041 to U+005A (LATIN CAPITAL
LETTER A to LATIN CAPITAL LETTER Z).</p><p class="note">All attributes on <a href="infrastructure.html#html-elements">HTML elements</a> in
<a href="dom.html#html-documents">HTML documents</a> get ASCII-lowercased automatically, so
the restriction on ASCII uppercase letters doesn't affect such
documents.</p><p><a href="#custom-data-attribute" title="custom data attribute">Custom data attributes</a>
are intended to store custom data private to the page or
application, for which there are no more appropriate attributes or
elements.</p><p>These attributes are not intended for use by software that is
independent of the site that uses the attributes.</p><div class="example">
<p>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.</p>
<pre><ol>
<li data-length="2m11s">Beyond The Sea</li>
...
</ol></pre>
<p>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.</p>
<p>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.</p>
</div><p>Every <a href="infrastructure.html#html-elements" title="HTML elements">HTML element</a> may have
any number of <a href="#custom-data-attribute" title="custom data attribute">custom data
attributes</a> specified, with any value.</p><hr><dl class="domintro"><dt><var title="">element</var> . <code title="dom-dataset"><a href="#dom-dataset">dataset</a></code></dt>
<dd>
<p>Returns a <code><a href="#domstringmap">DOMStringMap</a></code> object for the element's <code title="attr-data-*"><a href="#attr-data">data-*</a></code> attributes.</p>
</dd>
</dl><div class="example">
<p>If a Web page wanted an element to represent a space ship,
e.g. as part of a game, it would have to use the <code class="attr-class">class</code> attribute along with <code title="attr-data-*"><a href="#attr-data">data-*</a></code> attributes:</p>
<pre><div class="spaceship" data-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.id].fire()">
Fire
</button>
</div></pre>
</div><p>Authors should carefully design such extensions so that when the
attributes are ignored and any associated CSS dropped, the page is
still usable.</p><h4 id="element-definitions"><span class="secno">3.2.4 </span>Element definitions</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Each element in this specification has a definition that includes
the following information:</p><dl><dt>Categories</dt>
<dd>A list of <a href="content-models.html#content-categories" title="content categories">categories</a> to
which the element belongs. These are used when defining the
<a href="content-models.html#content-models">content models</a> for each element.</dd>
<dt>Contexts in which this element may be used</dt>
<dd>A <em>non-normative</em> 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.</dd>
<dt>Content model</dt>
<dd>A normative description of what content must be included as
children and descendants of the element.</dd>
<dt>Content attributes</dt>
<dd>A normative list of attributes that may be specified on the
element.</dd>
<dt>DOM interface</dt>
<dd>A normative definition of a DOM interface that such elements
must implement.</dd>
</dl><p>This is then followed by a description of what the element
<a href="#represents">represents</a>, along with any additional normative
conformance criteria that may apply to authors. Examples are sometimes
also included.</p></body></html>
--- NEW FILE: urls.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>2.5 URLs — HTML5</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"/><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
p + * > li, dd li { margin: 1em 0; }
dt, dfn { font-weight: bold; font-style: normal; }
dt dfn { font-style: italic; }
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
pre em { font-weight: bolder; font-style: normal; }
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead { border-bottom: solid; }
table tbody th:first-child { border-left: solid; }
table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
img.extra { float: right; }
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
pre.css:first-line { color: #AAAA50; }
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; }
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
dl.domintro dd p { margin: 0.5em 0; }
dl.switch { padding-left: 2em; }
dl.switch > dt { text-indent: -1.5em; }
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
dl.triple { padding: 0 0 0 1em; }
dl.triple dt, dl.triple dd { margin: 0; display: inline }
dl.triple dt:after { content: ':'; }
dl.triple dd:after { content: '\A'; white-space: pre; }
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
a .diff-new { border-bottom: 1px blue solid; }
h2 { page-break-before: always; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; }
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
div.head p { margin: 0; }
div.head h1 { margin: 0; }
div.head .logo { float: right; margin: 0 1em; }
div.head .logo img { border: none } /* remove border from top image */
div.head dl { margin: 1em 0; }
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
body > .toc > li > * { margin-bottom: 0.5em; }
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
.toc, .toc li { list-style: none; }
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
.brief li { margin: 0; padding: 0; }
.brief li p { margin: 0; padding: 0; }
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
.category-list li { display: inline; }
.category-list li:not(:last-child)::after { content: ', '; }
.category-list li > span, .category-list li > a { text-transform: lowercase; }
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
.XXX > :first-child { margin-top: 0; }
p .XXX { line-height: 3em; }
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
.annotation :link, .annotation :visited { color: inherit; }
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
.annotation span { border: none ! important; }
.note { color: green; background: transparent; font-family: sans-serif; }
.warning { color: red; background: transparent; }
.note, .warning { font-weight: bolder; font-style: italic; }
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
.note p:first-child, .warning p:first-child { margin-top: 0; }
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
.warning:before { font-style: normal; }
p.note:before { content: 'Note: '; }
p.warning:before { content: '\26A0 Warning! '; }
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
h4 { position: relative; z-index: 3; }
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
.element {
background: #EEEEFF;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -1.15em;
height: 2em;
width: 0.9em;
background: #EEEEFF;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
td > .example:only-child { margin: 0 0 0 0.1em; }
.tall-and-narrow {
font-size: 0.6em;
column-width: 25em;
column-gap: 1em;
-moz-column-width: 25em;
-moz-column-gap: 1em;
-webkit-column-width: 25em;
-webkit-column-gap: 1em;
}
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
ul.domTree li li { list-style: none; }
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree span { font-style: italic; font-family: serif; }
ul.domTree .t1 code { color: purple; font-weight: bold; }
ul.domTree .t2 { font-style: normal; font-family: monospace; }
ul.domTree .t2 .name { color: black; font-weight: bold; }
ul.domTree .t2 .value { color: blue; font-weight: normal; }
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
ul.domTree .t7 code, .domTree .t8 code { color: green; }
ul.domTree .t10 code { color: teal; }
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
#configUI p label { display: block; }
#configUI #updateUI, #configUI .loginUI { text-align: center; }
#configUI input[type=button] { display: block; margin: auto; }
</style><style type="text/css">
.applies thead th > * { display: block; }
.applies thead code { display: block; }
.applies tbody th { whitespace: nowrap; }
.applies td { text-align: center; }
.applies .yes { background: yellow; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
#table-example-1 caption { padding-bottom: 0.5em; }
#table-example-1 thead, #table-example-1 tbody { border: none; }
#table-example-1 th, #table-example-1 td { border: solid thin; }
#table-example-1 th { font-weight: normal; }
#table-example-1 td { border-style: none solid; vertical-align: top; }
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
#table-example-1 tbody td:first-child::after { content: leader(". "); }
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
#table-example-1 tbody td:first-child + td { width: 10em; }
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
.apple-table-examples * { font-family: "Times", serif; }
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
.apple-table-examples td { text-align: right; vertical-align: top; }
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
.apple-table-examples sup { line-height: 0; }
</style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script>
function getCookie(name) {
var params = location.search.substr(1).split("&");
for (var index = 0; index < params.length; index++) {
if (params[index] == name)
return "1";
var data = params[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
var cookies = document.cookie.split("; ");
for (var index = 0; index < cookies.length; index++) {
var data = cookies[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
return null;
}
function load(script) {
var e = document.createElement('script');
e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
document.body.appendChild(e);
}
function init() {
if (location.search == '?slow-browser')
return;
var configUI = document.createElement('div');
configUI.id = 'configUI';
document.body.appendChild(configUI);
// load('reviewer.js'); // would need cross-site XHR
if (document.getElementById('head'))
load('toc.js');
load('styler.js');
// load('updater.js'); // would need cross-site XHR
load('dfn.js');
// load('status.js'); // would need cross-site XHR
if (getCookie('profile') == '1')
document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
fixBrokenLink();
}
</script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="common-microsyntaxes.html" title="2.4 Common microsyntaxes" rel="prev">
<link href="Overview.html#contents" title="Table of contents" rel="index">
<link href="dom.html" title="3 Semantics, structure, and APIs of HTML documents" rel="next">
</head><body onload="fixBrokenLink(); init()"><div class="head" id="head">
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
</div><div>
<a href="common-microsyntaxes.html">← 2.4 Common microsyntaxes</a> –
<a href="Overview.html#contents">Table of contents</a> –
<a href="dom.html">3 Semantics, structure, and APIs of HTML documents →</a>
<ol class="toc"><li><ol><li><a href="urls.html#urls"><span class="secno">2.5 </span>URLs</a>
<ol><li><a href="urls.html#terminology-0"><span class="secno">2.5.1 </span>Terminology</a></li><li><a href="urls.html#interfaces-for-url-manipulation"><span class="secno">2.5.2 </span>Interfaces for URL manipulation</a></li></ol></li><li><a href="urls.html#common-dom-interfaces"><span class="secno">2.6 </span>Common DOM interfaces</a>
<ol><li><a href="urls.html#reflecting-content-attributes-in-idl-attributes"><span class="secno">2.6.1 </span>Reflecting content attributes in IDL attributes</a></li><li><a href="urls.html#collections-0"><span class="secno">2.6.2 </span>Collections</a>
<ol><li><a href="urls.html#htmlcollection-0"><span class="secno">2.6.2.1 </span>HTMLCollection</a></li><li><a href="urls.html#htmlallcollection-0"><span class="secno">2.6.2.2 </span>HTMLAllCollection</a></li><li><a href="urls.html#htmlformcontrolscollection-0"><span class="secno">2.6.2.3 </span>HTMLFormControlsCollection</a></li><li><a href="urls.html#htmloptionscollection-0"><span class="secno">2.6.2.4 </span>HTMLOptionsCollection</a></li><li><a href="urls.html#htmlpropertiescollection-0"><span class="secno">2.6.2.5 </span>HTMLPropertiesCollection</a></li></ol></li><li><a href="urls.html#domtokenlist-0"><span class="secno">2.6.3 </span>DOMTokenList</a></li><li><a href="urls.html#domsettabletokenlist-0"><span class="secno">2.6.4 </span>DOMSettableTokenList</a></li><li><a href="urls.html#domstringmap-0"><span class="secno">2.6.5 </span>DOMStringMap</a></li><li><a href="urls.html#dom-feature-strings"><span class="secno">2.6.6 </span>DOM feature strings</a></li><li><a href="urls.html#exceptions"><span clss="secno">2.6.7 </span>Exceptions</a></li></ol></li></ol></li></ol></div>
<h3 id="urls"><span class="secno">2.5 </span>URLs</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments. </i><span><a href="http://www.w3.org/html/wg/tracker/issues/56">ISSUE-56</a> (urls-webarch) blocks progress to Last Call</span></p><h4 id="terminology-0"><span class="secno">2.5.1 </span>Terminology</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A <dfn id="url">URL</dfn> is a string used to identify a resource.</p><p>A <a href="#url">URL</a> is a <dfn id="valid-url">valid URL</dfn> if it is a
<span>valid Web address</span> as defined by the Web addresses
specification. <a href="references.html#refsWEBADDRESSES">[WEBADDRESSES]</a></p><p>A <a href="#url">URL</a> is an <dfn id="absolute-url">absolute URL</dfn> if it is an
<span>absolute Web address</span> as defined by the Web addresses
specification. <a href="references.html#refsWEBADDRESSES">[WEBADDRESSES]</a></p><p class="note">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
<em>this</em> specification if they pretend the term "URL" as used
herein is really called something else altogether. This is a
<a href="introduction.html#willful-violation">willful violation</a> of RFC 3986. <a href="references.html#refsRFC3986">[RFC3986]</a></p><h4 id="interfaces-for-url-manipulation"><span class="secno">2.5.2 </span>Interfaces for URL manipulation</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>An interface that has a complement of <dfn id="url-decomposition-idl-attributes">URL decomposition IDL
attributes</dfn> will have seven attributes with the following
definitions:</p><pre class="idl extract"> attribute DOMString <a href="#dom-uda-protocol" title="dom-uda-protocol">protocol</a>;
attribute DOMString <a href="#dom-uda-host" title="dom-uda-host">host</a>;
attribute DOMString <a href="#dom-uda-hostname" title="dom-uda-hostname">hostname</a>;
attribute DOMString <a href="#dom-uda-port" title="dom-uda-port">port</a>;
attribute DOMString <a href="#dom-uda-pathname" title="dom-uda-pathname">pathname</a>;
attribute DOMString <a href="#dom-uda-search" title="dom-uda-search">search</a>;
attribute DOMString <a href="#dom-uda-hash" title="dom-uda-hash">hash</a>;</pre><dl class="domintro"><dt><var title="">o</var> . <code title="dom-uda-protocol"><a href="#dom-uda-protocol">protocol</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns the current scheme of the underlying URL.</p>
<p>Can be set, to change the underlying URL's scheme.</p>
</dd>
<dt><var title="">o</var> . <code title="dom-uda-host"><a href="#dom-uda-host">host</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns the current host and port (if it's not the default port) in the underlying URL.</p>
<p>Can be set, to change the underlying URL's host and port.</p>
<p>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.</p>
</dd>
<dt><var title="">o</var> . <code title="dom-uda-hostname"><a href="#dom-uda-hostname">hostname</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns the current host in the underlying URL.</p>
<p>Can be set, to change the underlying URL's host.</p>
</dd>
<dt><var title="">o</var> . <code title="dom-uda-port"><a href="#dom-uda-port">port</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns the current port in the underlying URL.</p>
<p>Can be set, to change the underlying URL's port.</p>
</dd>
<dt><var title="">o</var> . <code title="dom-uda-pathname"><a href="#dom-uda-pathname">pathname</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns the current path in the underlying URL.</p>
<p>Can be set, to change the underlying URL's path.</p>
</dd>
<dt><var title="">o</var> . <code title="dom-uda-search"><a href="#dom-uda-search">search</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns the current query component in the underlying URL.</p>
<p>Can be set, to change the underlying URL's query component.</p>
</dd>
<dt><var title="">o</var> . <code title="dom-uda-hash"><a href="#dom-uda-hash">hash</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns the current fragment identifier in the underlying URL.</p>
<p>Can be set, to change the underlying URL's fragment identifier.</p>
</dd>
</dl><div class="example">
<p>The table below demonstrates how the getter condition<code title="dom-uda-search"><a href="#dom-uda-search">search</a></code> results in different results
depending on the exact original syntax of the URL:</p>
<table><thead><tr><th> Input URL
</th><th> <code title="dom-uda-search"><a href="#dom-uda-search">search</a></code> value
</th><th> Explanation
</th></tr></thead><tbody><tr><td> <code title="">http://example.com/</code>
</td><td> <i>empty string</i>
</td><td> No <a href="#url-query" title="url-query"><query></a> component in input URL.
</td></tr><tr><td> <code title="">http://example.com/?</code>
</td><td> <code title="">?</code>
</td><td> There is a <a href="#url-query" title="url-query"><query></a> component, but it is empty.
</td></tr><tr><td> <code title="">http://example.com/?test</code>
</td><td> <code title="">?test</code>
</td><td> The <a href="#url-query" title="url-query"><query></a> component has the value "<code title="">test</code>".
</td></tr><tr><td> <code title="">http://example.com/?test#</code>
</td><td> <code title="">?test</code>
</td><td> The (empty) <a href="#url-fragment" title="url-fragment"><fragment></a> component is not part of the <a href="#url-query" title="url-query"><query></a> component.
</td></tr></tbody></table></div><h3 id="common-dom-interfaces"><span class="secno">2.6 </span>Common DOM interfaces</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h4 id="reflecting-content-attributes-in-idl-attributes"><span class="secno">2.6.1 </span>Reflecting content attributes in IDL attributes</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Some IDL attributes are defined to <dfn id="reflect">reflect</dfn> 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.</p><!-- v2 for completeness: (also search for REFLECTIDL)
<p class="note">A list of <span>reflecting IDL attributes</span> and
their corresponding content attributes is given in the index.</p>
--><h4 id="collections-0"><span class="secno">2.6.2 </span>Collections</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="#htmlcollection">HTMLCollection</a></code>, <code><a href="#htmlallcollection">HTMLAllCollection</a></code>,
<code><a href="#htmlformcontrolscollection">HTMLFormControlsCollection</a></code>,
<code><a href="#htmloptionscollection">HTMLOptionsCollection</a></code>, and
<code><a href="#htmlpropertiescollection">HTMLPropertiesCollection</a></code> interfaces represent various
lists of DOM nodes. Collectively, objects implementing these
interfaces are called <dfn id="collections">collections</dfn>.</p><p>When a <a href="#collections" title="collections">collection</a> is created, a
filter and a root are associated with the collection.</p><p class="example">For example, when the <code><a href="#htmlcollection">HTMLCollection</a></code>
object for the <code title="dom-document-images"><a href="#dom-document-images">document.images</a></code> attribute is
created, it is associated with a filter that selects only
<code><a href="embedded-content-1.html#the-img-element">img</a></code> elements, and rooted at the root of the
document.</p><p>The <a href="#collections" title="collections">collection</a> then <dfn id="represented-by-the-collection" title="represented by the collection">represents</dfn> a
<a href="infrastructure.html#live">live</a> view of the subtree rooted at the collection's
root, containing only nodes that match the given filter. The view is
linear. </p><h5 id="htmlcollection-0"><span class="secno">2.6.2.1 </span>HTMLCollection</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="#htmlcollection">HTMLCollection</a></code> interface represents a generic
<a href="#collections" title="collections">collection</a> of elements.</p><pre class="idl">interface <dfn id="htmlcollection">HTMLCollection</dfn> {
readonly attribute unsigned long <a href="#dom-htmlcollection-length" title="dom-HTMLCollection-length">length</a>;
caller getter object <a href="#dom-htmlcollection-item" title="dom-HTMLCollection-item">item</a>(in unsigned long index); // only returns Element
caller getter object <a href="#dom-htmlcollection-nameditem" title="dom-HTMLCollection-namedItem">namedItem</a>(in DOMString name); // only returns Element<!--
(removed on the assuption that browsers will remove support:)
https://bugs.webkit.org/show_bug.cgi?id=30695
https://bugs.opera.com/browse/CORE-25171
<span>HTMLAllCollection</span> <span title="dom-HTMLCollection-tags">tags</span>(in DOMString tagName);-->
};</pre><dl class="domintro"><dt><var title="">collection</var> . <code title="dom-HTMLCollection-length"><a href="#dom-htmlcollection-length">length</a></code></dt>
<dd>
<p>Returns the number of elements in the collection.</p>
</dd>
<dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLCollection-item"><a href="#dom-htmlcollection-item">item</a></code>(<var title="">index</var>)</dt>
<dt><var title="">collection</var>[<var title="">index</var>]</dt>
<dt><var title="">collection</var>(<var title="">index</var>)</dt>
<dd>
<p>Returns the item with index <var title="">index</var> from the collection. The items are sorted in <a href="infrastructure.html#tree-order">tree order</a>.</p>
<p>Returns null if <var title="">index</var> is out of range.</p>
</dd>
<dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLCollection-item"><a href="#dom-htmlcollection-item">namedItem</a></code>(<var title="">name</var>)</dt>
<dt><var title="">collection</var>[<var title="">name</var>]</dt>
<dt><var title="">collection</var>(<var title="">name</var>)</dt>
<dd>
<p>Returns the first item with <a href="elements.html#concept-id" title="concept-id">ID</a> or name <var title="">name</var>
from the collection.</p>
<p>Returns null if no element with that <a href="elements.html#concept-id" title="concept-id">ID</a> or name could be found.</p>
<p>Only <code><a href="text-level-semantics.html#the-a-element">a</a></code>, <code><a href="#the-applet-element">applet</a></code>, <code><a href="the-map-element.html#the-area-element">area</a></code>,
<code><a href="the-iframe-element.html#the-embed-element">embed</a></code>, <code><a href="forms.html#the-form-element">form</a></code>, <code><a href="#frame">frame</a></code>,
<code><a href="#frameset">frameset</a></code>, <code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code>, <code><a href="embedded-content-1.html#the-img-element">img</a></code>, and
<code><a href="the-iframe-element.html#the-object-element">object</a></code> elements can have a name for the purpose of
this method; their name is given by the value of their <code title="">name</code> attribute.</p>
</dd>
<!--(see IDL)
<dt><var title="">collection</var> = <var title="">collection</var> . <code title="dom-HTMLCollection-tags">tags</code>(<var title="">tagName</var>)</dt>
<dd>
<p>Returns a collection that is a filtered view of the current collection, containing only elements with the given tag name.</p>
</dd>
-->
</dl><h5 id="htmlallcollection-0"><span class="secno">2.6.2.2 </span>HTMLAllCollection</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="#htmlallcollection">HTMLAllCollection</a></code> interface represents a generic
<a href="#collections" title="collections">collection</a> of elements just like
<code><a href="#htmlcollection">HTMLCollection</a></code>, with the exception that its <code title="dom-HTMLAllCollection-namedItem"><a href="#dom-htmlallcollection-nameditem">namedItem()</a></code> method
returns an <code><a href="#htmlcollection">HTMLCollection</a></code> object when there are
multiple matching elements.</p><pre class="idl">interface <dfn id="htmlallcollection">HTMLAllCollection</dfn> : <a href="#htmlcollection">HTMLCollection</a> {
// inherits <a href="#dom-htmlcollection-length" title="dom-HTMLCollection-length">length</a> and <a href="#dom-htmlcollection-item" title="dom-HTMLCollection-item">item</a>()
caller getter object <a href="#dom-htmlallcollection-nameditem" title="dom-HTMLAllCollection-namedItem">namedItem</a>(in DOMString name); // overrides inherited namedItem()
<a href="#htmlallcollection">HTMLAllCollection</a> <a href="#dom-htmlallcollection-tags" title="dom-HTMLAllCollection-tags">tags</a>(in DOMString tagName);
};</pre><dl class="domintro"><dt><var title="">collection</var> . <code title="dom-HTMLCollection-length"><a href="#dom-htmlcollection-length">length</a></code></dt>
<dd>
<p>Returns the number of elements in the collection.</p>
</dd>
<dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLCollection-item"><a href="#dom-htmlcollection-item">item</a></code>(<var title="">index</var>)</dt>
<dt><var title="">collection</var>[<var title="">index</var>]</dt>
<dt><var title="">collection</var>(<var title="">index</var>)</dt>
<dd>
<p>Returns the item with index <var title="">index</var> from the collection. The items are sorted in <a href="infrastructure.html#tree-order">tree order</a>.</p>
<p>Returns null if <var title="">index</var> is out of range.</p>
</dd>
<dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLAllCollection-namedItem"><a href="#dom-htmlallcollection-nameditem">namedItem</a></code>(<var title="">name</var>)</dt>
<dt><var title="">collection</var> = <var title="">collection</var> . <code title="dom-HTMLAllCollection-namedItem"><a href="#dom-htmlallcollection-nameditem">namedItem</a></code>(<var title="">name</var>)</dt>
<dt><var title="">collection</var>[<var title="">name</var>]</dt>
<dt><var title="">collection</var>(<var title="">name</var>)</dt>
<dd>
<p>Returns the item with <a href="elements.html#concept-id" title="concept-id">ID</a> or name <var title="">name</var> from the collection.</p>
<p>If there are multiple matching items, then an <code><a href="#htmlallcollection">HTMLAllCollection</a></code> object containing all those elements is returned.</p>
<p>Returns null if no element with that <a href="elements.html#concept-id" title="concept-id">ID</a> or name could be found.</p>
<p>Only <code><a href="text-level-semantics.html#the-a-element">a</a></code>, <code><a href="#the-applet-element">applet</a></code>, <code><a href="the-map-element.html#the-area-element">area</a></code>,
<code><a href="the-iframe-element.html#the-embed-element">embed</a></code>, <code><a href="forms.html#the-form-element">form</a></code>, <code><a href="#frame">frame</a></code>,
<code><a href="#frameset">frameset</a></code>, <code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code>, <code><a href="embedded-content-1.html#the-img-element">img</a></code>, and
<code><a href="the-iframe-element.html#the-object-element">object</a></code> elements can have a name for the purpose of
this method; their name is given by the value of their <code title="">name</code> attribute.</p>
</dd>
<dt><var title="">collection</var> = <var title="">collection</var> . <code title="dom-HTMLAllCollection-tags"><a href="#dom-htmlallcollection-tags">tags</a></code>(<var title="">tagName</var>)</dt>
<dd>
<p>Returns a collection that is a filtered view of the current collection, containing only elements with the given tag name.</p>
</dd>
</dl><h5 id="htmlformcontrolscollection-0"><span class="secno">2.6.2.3 </span>HTMLFormControlsCollection</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="#htmlformcontrolscollection">HTMLFormControlsCollection</a></code> interface represents
a <a href="#collections" title="collections">collection</a> of <a href="forms.html#category-listed" title="category-listed">listed</a> elements in <code><a href="forms.html#the-form-element">form</a></code>
and <code><a href="forms.html#the-fieldset-element">fieldset</a></code> elements.</p><pre class="idl">interface <dfn id="htmlformcontrolscollection">HTMLFormControlsCollection</dfn> : <a href="#htmlcollection">HTMLCollection</a> {
// inherits <a href="#dom-htmlcollection-length" title="dom-HTMLCollection-length">length</a> and <a href="#dom-htmlcollection-item" title="dom-HTMLCollection-item">item</a>()
caller getter object <a href="#dom-htmlformcontrolscollection-nameditem" title="dom-HTMLFormControlsCollection-namedItem">namedItem</a>(in DOMString name); // overrides inherited namedItem()
};
interface <dfn id="radionodelist">RadioNodeList</dfn> : <span>NodeList</span> {
attribute DOMString <a href="#dom-radionodelist-value" title="dom-RadioNodeList-value">value</a>;
};</pre><dl class="domintro"><dt><var title="">collection</var> . <code title="dom-HTMLCollection-length"><a href="#dom-htmlcollection-length">length</a></code></dt>
<dd>
<p>Returns the number of elements in the collection.</p>
</dd>
<dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLCollection-item"><a href="#dom-htmlcollection-item">item</a></code>(<var title="">index</var>)</dt>
<dt><var title="">collection</var>[<var title="">index</var>]</dt>
<dt><var title="">collection</var>(<var title="">index</var>)</dt>
<dd>
<p>Returns the item with index <var title="">index</var> from the collection. The items are sorted in <a href="infrastructure.html#tree-order">tree order</a>.</p>
<p>Returns null if <var title="">index</var> is out of range.</p>
</dd>
<dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLFormControlsCollection-namedItem"><a href="#dom-htmlformcontrolscollection-nameditem">namedItem</a></code>(<var title="">name</var>)</dt>
<dt><var title="">radioNodeList</var> = <var title="">collection</var> . <code title="dom-HTMLFormControlsCollection-namedItem"><a href="#dom-htmlformcontrolscollection-nameditem">namedItem</a></code>(<var title="">name</var>)</dt>
<dt><var title="">collection</var>[<var title="">name</var>]</dt>
<dt><var title="">collection</var>(<var title="">name</var>)</dt>
<dd>
<p>Returns the item with <a href="elements.html#concept-id" title="concept-id">ID</a> or <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code> <var title="">name</var> from the collection.</p>
<p>If there are multiple matching items, then a <code><a href="#radionodelist">RadioNodeList</a></code> object containing all those elements is returned.</p>
<p>Returns null if no element with that <a href="elements.html#concept-id" title="concept-id">ID</a> or <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code> could be found.</p>
</dd>
<dt><var title="">radioNodeList</var> . <var title="">value</var> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns the value of the first checked radio button represented by the object.</p>
<p>Can be set, to check the first radio button with the given value represented by the object.</p>
</dd>
</dl><h5 id="htmloptionscollection-0"><span class="secno">2.6.2.4 </span>HTMLOptionsCollection</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="#htmloptionscollection">HTMLOptionsCollection</a></code> interface represents a
list of <code><a href="the-button-element.html#the-option-element">option</a></code> elements. It is always rooted on a
<code><a href="the-button-element.html#the-select-element">select</a></code> element and has attributes and methods that
manipulate that element's descendants.</p><pre class="idl">interface <dfn id="htmloptionscollection">HTMLOptionsCollection</dfn> : <a href="#htmlcollection">HTMLCollection</a> {
// inherits <a href="#dom-htmlcollection-item" title="dom-HTMLCollection-item">item</a>()
attribute unsigned long <a href="#dom-htmloptionscollection-length" title="dom-HTMLOptionsCollection-length">length</a>; // overrides inherited length
caller getter object <a href="#dom-htmloptionscollection-nameditem" title="dom-HTMLOptionsCollection-namedItem">namedItem</a>(in DOMString name); // overrides inherited namedItem()
void <a href="#dom-htmloptionscollection-add" title="dom-HTMLOptionsCollection-add">add</a>(in <a href="elements.html#htmlelement">HTMLElement</a> element, in optional <a href="elements.html#htmlelement">HTMLElement</a> before);
void <a href="#dom-htmloptionscollection-add" title="dom-HTMLOptionsCollection-add">add</a>(in <a href="elements.html#htmlelement">HTMLElement</a> element, in long before);
void <a href="#dom-htmloptionscollection-remove" title="dom-HTMLOptionsCollection-remove">remove</a>(in long index);
};</pre><dl class="domintro"><dt><var title="">collection</var> . <code title="dom-HTMLOptionsCollection-length"><a href="#dom-htmloptionscollection-length">length</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns the number of elements in the collection.</p>
<p>When set to a smaller number, truncates the number of <code><a href="the-button-element.html#the-option-element">option</a></code> elements in the corresponding container.</p>
<p>When set to a greater number, adds new blank <code><a href="the-button-element.html#the-option-element">option</a></code> elements to that container.</p>
</dd>
<dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLCollection-item"><a href="#dom-htmlcollection-item">item</a></code>(<var title="">index</var>)</dt>
<dt><var title="">collection</var>[<var title="">index</var>]</dt>
<dt><var title="">collection</var>(<var title="">index</var>)</dt>
<dd>
<p>Returns the item with index <var title="">index</var> from the collection. The items are sorted in <a href="infrastructure.html#tree-order">tree order</a>.</p>
<p>Returns null if <var title="">index</var> is out of range.</p>
</dd>
<dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLOptionsCollection-namedItem"><a href="#dom-htmloptionscollection-nameditem">namedItem</a></code>(<var title="">name</var>)</dt>
<dt><var title="">nodeList</var> = <var title="">collection</var> . <code title="dom-HTMLOptionsCollection-namedItem"><a href="#dom-htmloptionscollection-nameditem">namedItem</a></code>(<var title="">name</var>)</dt>
<dt><var title="">collection</var>[<var title="">name</var>]</dt>
<dt><var title="">collection</var>(<var title="">name</var>)</dt>
<dd>
<p>Returns the item with <a href="elements.html#concept-id" title="concept-id">ID</a> or <code title="attr-option-name">name</code> <var title="">name</var> from the collection.</p>
<p>If there are multiple matching items, then a <code>NodeList</code> object containing all those elements is returned.</p>
<p>Returns null if no element with that <a href="elements.html#concept-id" title="concept-id">ID</a> could be found.</p>
</dd>
<dt><var title="">collection</var> . <code title="dom-HTMLOptionsCollection-add"><a href="#dom-htmloptionscollection-add">add</a></code>(<var title="">element</var> [, <var title="">before</var> ] )</dt>
<dd>
<p>Inserts <var title="">element</var> before the node given by <var title="">before</var>.</p>
<p>The <var title="">before</var> argument can be a number, in
which case <var title="">element</var> is inserted before the item
with that number, or an element from the collection, in which case
<var title="">element</var> is inserted before that element.</p>
<p>If <var title="">before</var> is omitted, null, or a number out
of range, then <var title="">element</var> will be added at the
end of the list.</p>
<p>This method will throw a <code><a href="#hierarchy_request_err">HIERARCHY_REQUEST_ERR</a></code>
exception if <var title="">element</var> is an ancestor of the
element into which it is to be inserted. If <var title="">element</var> is not an <code><a href="the-button-element.html#the-option-element">option</a></code> or
<code><a href="the-button-element.html#the-optgroup-element">optgroup</a></code> element, then the method does nothing.</p>
</dd>
</dl><h5 id="htmlpropertiescollection-0"><span class="secno">2.6.2.5 </span>HTMLPropertiesCollection</h5><p>The <code><a href="#htmlpropertiescollection">HTMLPropertiesCollection</a></code> interface represents a
<a href="#collections" title="collections">collection</a> of elements that add
name-value pairs to a particular <a href="microdata.html#concept-item" title="concept-item">item</a> in the <a href="microdata.html#microdata">microdata</a>
model.</p><pre class="idl">interface <dfn id="htmlpropertiescollection">HTMLPropertiesCollection</dfn> : <a href="#htmlcollection">HTMLCollection</a> {
// inherits <a href="#dom-htmlcollection-length" title="dom-HTMLCollection-length">length</a> and <a href="#dom-htmlcollection-item" title="dom-HTMLCollection-item">item</a>()
caller getter <a href="#propertynodelist">PropertyNodeList</a> <a href="#dom-htmlpropertiescollection-nameditem" title="dom-HTMLPropertiesCollection-namedItem">namedItem</a>(in DOMString name); // overrides inherited namedItem()
readonly attribute <span>DOMStringList</span> <a href="#dom-htmlpropertiescollection-names" title="dom-HTMLPropertiesCollection-names">names</a>;
};
typedef sequence<any> <dfn id="propertyvaluearray">PropertyValueArray</dfn>;
interface <dfn id="propertynodelist">PropertyNodeList</dfn> : <span>NodeList</span> {
readonly attribute <a href="#propertyvaluearray">PropertyValueArray</a> <a href="#dom-propertynodelist-values" title="dom-PropertyNodeList-values">values</a>;
};</pre><dl class="domintro"><dt><var title="">collection</var> . <code title="dom-HTMLCollection-length"><a href="#dom-htmlcollection-length">length</a></code></dt>
<dd>
<p>Returns the number of elements in the collection.</p>
</dd>
<dt><var title="">element</var> = <var title="">collection</var> . <code title="dom-HTMLCollection-item"><a href="#dom-htmlcollection-item">item</a></code>(<var title="">index</var>)</dt>
<dt><var title="">collection</var>[<var title="">index</var>]</dt>
<dt><var title="">collection</var>(<var title="">index</var>)</dt>
<dd>
<p>Returns the element with index <var title="">index</var> from the collection. The items are sorted in <a href="infrastructure.html#tree-order">tree order</a>.</p>
<p>Returns null if <var title="">index</var> is out of range.</p>
</dd>
<dt><var title="">propertyNodeList</var> = <var title="">collection</var> . <code title="dom-HTMLPropertiesCollection-namedItem"><a href="#dom-htmlpropertiescollection-nameditem">namedItem</a></code>(<var title="">name</var>)</dt>
<dt><var title="">collection</var>[<var title="">name</var>]</dt>
<dt><var title="">collection</var>(<var title="">name</var>)</dt>
<dd>
<p>Returns a <code><a href="#propertynodelist">PropertyNodeList</a></code> object containing any elements that add a property named <var title="">name</var>.</p>
</dd>
<dt><var title="">collection</var> . <code title="dom-HTMLPropertiesCollection-names"><a href="#dom-htmlpropertiescollection-names">names</a></code></dt>
<dd>
<p>Returns a <code>DOMStringList</code> with the <a href="microdata.html#property-names">property names</a> of the elements in the collection.</p>
</dd>
<dt><var title="">propertyNodeList</var> . <code title="dom-PropertyNodeList-values"><a href="#dom-propertynodelist-values">values</a></code></dt>
<dd>
<p>Returns an array of the various values that the relevant elements have.</p>
</dd>
</dl><h4 id="domtokenlist-0"><span class="secno">2.6.3 </span>DOMTokenList</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="#domtokenlist">DOMTokenList</a></code> interface represents an interface
to an underlying string that consists of a <a href="common-microsyntaxes.html#set-of-space-separated-tokens">set of
space-separated tokens</a>.</p><p class="note"><code><a href="#domtokenlist">DOMTokenList</a></code> objects are always
<a href="infrastructure.html#case-sensitive">case-sensitive</a>, even when the underlying string might
ordinarily be treated in a case-insensitive manner.</p><pre class="idl">interface <dfn id="domtokenlist">DOMTokenList</dfn> {
readonly attribute unsigned long <a href="#dom-tokenlist-length" title="dom-tokenlist-length">length</a>;
getter DOMString <a href="#dom-tokenlist-item" title="dom-tokenlist-item">item</a>(in unsigned long index);
boolean <a href="#dom-tokenlist-contains" title="dom-tokenlist-contains">contains</a>(in DOMString token);
void <a href="#dom-tokenlist-add" title="dom-tokenlist-add">add</a>(in DOMString token);
void <a href="#dom-tokenlist-remove" title="dom-tokenlist-remove">remove</a>(in DOMString token);
boolean <a href="#dom-tokenlist-toggle" title="dom-tokenlist-toggle">toggle</a>(in DOMString token);
<a href="#dom-tokenlist-tostring" title="dom-tokenlist-toString">stringifier</a> DOMString ();
};</pre><dl class="domintro"><dt><var title="">tokenlist</var> . <code title="dom-tokenlist-length"><a href="#dom-tokenlist-length">length</a></code></dt>
<dd>
<p>Returns the number of tokens in the string.</p>
</dd>
<dt><var title="">element</var> = <var title="">tokenlist</var> . <code title="dom-tokenlist-item"><a href="#dom-tokenlist-item">item</a></code>(<var title="">index</var>)</dt>
<dt><var title="">tokenlist</var>[<var title="">index</var>]</dt>
<dd>
<p>Returns the token with index <var title="">index</var>. The tokens are returned in the order they are found in the underlying string.</p>
<p>Returns null if <var title="">index</var> is out of range.</p>
</dd>
<dt><var title="">hastoken</var> = <var title="">tokenlist</var> . <code title="dom-tokenlist-contains"><a href="#dom-tokenlist-contains">contains</a></code>(<var title="">token</var>)</dt>
<dd>
<p>Returns true if the <var title="">token</var> is present; false otherwise.</p>
<p>Throws a <code><a href="#syntax_err">SYNTAX_ERR</a></code> exception if <var title="">token</var> is empty.</p>
<p>Throws an <code><a href="#invalid_character_err">INVALID_CHARACTER_ERR</a></code> exception if <var title="">token</var> contains any spaces.</p>
</dd>
<dt><var title="">tokenlist</var> . <code title="dom-tokenlist-add"><a href="#dom-tokenlist-add">add</a></code>(<var title="">token</var>)</dt>
<dd>
<p>Adds <var title="">token</var>, unless it is already present.</p>
<p>Throws a <code><a href="#syntax_err">SYNTAX_ERR</a></code> exception if <var title="">token</var> is empty.</p>
<p>Throws an <code><a href="#invalid_character_err">INVALID_CHARACTER_ERR</a></code> exception if <var title="">token</var> contains any spaces.</p>
</dd>
<dt><var title="">tokenlist</var> . <code title="dom-tokenlist-remove"><a href="#dom-tokenlist-remove">remove</a></code>(<var title="">token</var>)</dt>
<dd>
<p>Removes <var title="">token</var> if it is present.</p>
<p>Throws a <code><a href="#syntax_err">SYNTAX_ERR</a></code> exception if <var title="">token</var> is empty.</p>
<p>Throws an <code><a href="#invalid_character_err">INVALID_CHARACTER_ERR</a></code> exception if <var title="">token</var> contains any spaces.</p>
</dd>
<dt><var title="">hastoken</var> = <var title="">tokenlist</var> . <code title="dom-tokenlist-toggle"><a href="#dom-tokenlist-toggle">toggle</a></code>(<var title="">token</var>)</dt>
<dd>
<p>Adds <var title="">token</var> if it is not present, or removes it if it is.</p>
<p>Throws a <code><a href="#syntax_err">SYNTAX_ERR</a></code> exception if <var title="">token</var> is empty.</p>
<p>Throws an <code><a href="#invalid_character_err">INVALID_CHARACTER_ERR</a></code> exception if <var title="">token</var> contains any spaces.</p>
</dd>
</dl><h4 id="domsettabletokenlist-0"><span class="secno">2.6.4 </span>DOMSettableTokenList</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="#domsettabletokenlist">DOMSettableTokenList</a></code> interface is the same as the
<code><a href="#domtokenlist">DOMTokenList</a></code> interface, except that it allows the
underlying string to be directly changed.</p><pre class="idl">interface <dfn id="domsettabletokenlist">DOMSettableTokenList</dfn> : <a href="#domtokenlist">DOMTokenList</a> {
attribute DOMString <a href="#dom-domsettabletokenlist-value" title="dom-DOMSettableTokenList-value">value</a>;
};</pre><dl class="domintro"><dt><var title="">tokenlist</var> . <code title="dom-DOMSettableTokenList-value"><a href="#dom-domsettabletokenlist-value">value</a></code></dt>
<dd>
<p>Returns the underlying string.</p>
<p>Can be set, to change the underlying string.</p>
</dd>
</dl><h4 id="domstringmap-0"><span class="secno">2.6.5 </span>DOMStringMap</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="#domstringmap">DOMStringMap</a></code> interface represents a set of
name-value pairs. It exposes these using the scripting language's
native mechanisms for property access.</p><div class="example">
<p>The <code title="dom-dataset"><a href="#dom-dataset">dataset</a></code> attribute on
elements exposes the <code title="attr-data-*"><a href="elements.html#attr-data">data-*</a></code>
attributes on the element.</p>
<p>Given the following fragment and elements with similar
constructions:</p>
<pre><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"></pre>
<p>...one could imagine a function <code title="">splashDamage()</code> that takes some arguments, the first
of which is the element to process:</p>
<pre>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
}
}</pre>
</div><h4 id="dom-feature-strings"><span class="secno">2.6.6 </span>DOM feature strings</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>DOM3 Core defines mechanisms for checking for interface support,
and for obtaining implementations of interfaces, using <a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#DOMFeatures">feature
strings</a>. <a href="references.html#refsDOMCORE">[DOMCORE]</a></p><p>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.</p><h4 id="exceptions"><span class="secno">2.6.7 </span>Exceptions</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The following are <code>DOMException</code> codes. <a href="references.html#refsDOMCORE">[DOMCORE]</a></p><ol class="brief"><li value="1"><dfn id="index_size_err"><code>INDEX_SIZE_ERR</code></dfn></li>
<li value="2"><dfn id="domstring_size_err"><code>DOMSTRING_SIZE_ERR</code></dfn></li>
<li value="3"><dfn id="hierarchy_request_err"><code>HIERARCHY_REQUEST_ERR</code></dfn></li>
<li value="4"><dfn id="wrong_document_err"><code>WRONG_DOCUMENT_ERR</code></dfn></li>
<li value="5"><dfn id="invalid_character_err"><code>INVALID_CHARACTER_ERR</code></dfn></li>
<li value="6"><dfn id="no_data_allowed_err"><code>NO_DATA_ALLOWED_ERR</code></dfn></li>
<li value="7"><dfn id="no_modification_allowed_err"><code>NO_MODIFICATION_ALLOWED_ERR</code></dfn></li>
<li value="8"><dfn id="not_found_err"><code>NOT_FOUND_ERR</code></dfn></li>
<li value="9"><dfn id="not_supported_err"><code>NOT_SUPPORTED_ERR</code></dfn></li>
<li value="10"><dfn id="inuse_attribute_err"><code>INUSE_ATTRIBUTE_ERR</code></dfn></li>
<li value="11"><dfn id="invalid_state_err"><code>INVALID_STATE_ERR</code></dfn></li>
<li value="12"><dfn id="syntax_err"><code>SYNTAX_ERR</code></dfn></li>
<li value="13"><dfn id="invalid_modification_err"><code>INVALID_MODIFICATION_ERR</code></dfn></li>
<li value="14"><dfn id="namespace_err"><code>NAMESPACE_ERR</code></dfn></li>
<li value="15"><dfn id="invalid_access_err"><code>INVALID_ACCESS_ERR</code></dfn></li>
<li value="16"><dfn id="validation_err"><code>VALIDATION_ERR</code></dfn></li>
<li value="17"><dfn id="type_mismatch_err"><code>TYPE_MISMATCH_ERR</code></dfn></li>
<li value="18"><dfn id="security_err"><code>SECURITY_ERR</code></dfn></li> <!-- actually in XHR for now -->
<li value="19"><dfn id="network_err"><code>NETWORK_ERR</code></dfn></li> <!-- actually in XHR for now -->
<li value="20"><dfn id="abort_err"><code>ABORT_ERR</code></dfn></li> <!-- actually in XHR for now -->
<li value="21"><dfn id="url_mismatch_err"><code>URL_MISMATCH_ERR</code></dfn></li> <!-- actually in workers for now -->
<li value="22"><dfn id="quota_exceeded_err"><code>QUOTA_EXCEEDED_ERR</code></dfn></li> <!-- actually defined right here for now -->
<!--v2DATAGRID <li value="23"><dfn><code>DATAGRID_MODEL_ERR</code></dfn></li> --> <!-- actually defined right here for now -->
<li value="81"><dfn id="parse_err"><code>PARSE_ERR</code></dfn></li> <!-- actually defined in dom3ls -->
<li value="82"><dfn id="serialize_err"><code>SERIALIZE_ERR</code></dfn></li> <!-- actually defined in dom3ls -->
</ol></body></html>
--- NEW FILE: association-of-controls-and-forms.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.10.14 Association of controls and forms — HTML5</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"/><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
p + * > li, dd li { margin: 1em 0; }
dt, dfn { font-weight: bold; font-style: normal; }
dt dfn { font-style: italic; }
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
pre em { font-weight: bolder; font-style: normal; }
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead { border-bottom: solid; }
table tbody th:first-child { border-left: solid; }
table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
img.extra { float: right; }
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
pre.css:first-line { color: #AAAA50; }
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; }
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
dl.domintro dd p { margin: 0.5em 0; }
dl.switch { padding-left: 2em; }
dl.switch > dt { text-indent: -1.5em; }
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
dl.triple { padding: 0 0 0 1em; }
dl.triple dt, dl.triple dd { margin: 0; display: inline }
dl.triple dt:after { content: ':'; }
dl.triple dd:after { content: '\A'; white-space: pre; }
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
a .diff-new { border-bottom: 1px blue solid; }
h2 { page-break-before: always; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; }
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
div.head p { margin: 0; }
div.head h1 { margin: 0; }
div.head .logo { float: right; margin: 0 1em; }
div.head .logo img { border: none } /* remove border from top image */
div.head dl { margin: 1em 0; }
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
body > .toc > li > * { margin-bottom: 0.5em; }
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
.toc, .toc li { list-style: none; }
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
.brief li { margin: 0; padding: 0; }
.brief li p { margin: 0; padding: 0; }
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
.category-list li { display: inline; }
.category-list li:not(:last-child)::after { content: ', '; }
.category-list li > span, .category-list li > a { text-transform: lowercase; }
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
.XXX > :first-child { margin-top: 0; }
p .XXX { line-height: 3em; }
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
.annotation :link, .annotation :visited { color: inherit; }
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
.annotation span { border: none ! important; }
.note { color: green; background: transparent; font-family: sans-serif; }
.warning { color: red; background: transparent; }
.note, .warning { font-weight: bolder; font-style: italic; }
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
.note p:first-child, .warning p:first-child { margin-top: 0; }
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
.warning:before { font-style: normal; }
p.note:before { content: 'Note: '; }
p.warning:before { content: '\26A0 Warning! '; }
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
h4 { position: relative; z-index: 3; }
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
.element {
background: #EEEEFF;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -1.15em;
height: 2em;
width: 0.9em;
background: #EEEEFF;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
td > .example:only-child { margin: 0 0 0 0.1em; }
.tall-and-narrow {
font-size: 0.6em;
column-width: 25em;
column-gap: 1em;
-moz-column-width: 25em;
-moz-column-gap: 1em;
-webkit-column-width: 25em;
-webkit-column-gap: 1em;
}
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
ul.domTree li li { list-style: none; }
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree span { font-style: italic; font-family: serif; }
ul.domTree .t1 code { color: purple; font-weight: bold; }
ul.domTree .t2 { font-style: normal; font-family: monospace; }
ul.domTree .t2 .name { color: black; font-weight: bold; }
ul.domTree .t2 .value { color: blue; font-weight: normal; }
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
ul.domTree .t7 code, .domTree .t8 code { color: green; }
ul.domTree .t10 code { color: teal; }
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
#configUI p label { display: block; }
#configUI #updateUI, #configUI .loginUI { text-align: center; }
#configUI input[type=button] { display: block; margin: auto; }
</style><style type="text/css">
.applies thead th > * { display: block; }
.applies thead code { display: block; }
.applies tbody th { whitespace: nowrap; }
.applies td { text-align: center; }
.applies .yes { background: yellow; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
#table-example-1 caption { padding-bottom: 0.5em; }
#table-example-1 thead, #table-example-1 tbody { border: none; }
#table-example-1 th, #table-example-1 td { border: solid thin; }
#table-example-1 th { font-weight: normal; }
#table-example-1 td { border-style: none solid; vertical-align: top; }
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
#table-example-1 tbody td:first-child::after { content: leader(". "); }
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
#table-example-1 tbody td:first-child + td { width: 10em; }
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
.apple-table-examples * { font-family: "Times", serif; }
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
.apple-table-examples td { text-align: right; vertical-align: top; }
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
.apple-table-examples sup { line-height: 0; }
</style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script>
function getCookie(name) {
var params = location.search.substr(1).split("&");
for (var index = 0; index < params.length; index++) {
if (params[index] == name)
return "1";
var data = params[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
var cookies = document.cookie.split("; ");
for (var index = 0; index < cookies.length; index++) {
var data = cookies[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
return null;
}
function load(script) {
var e = document.createElement('script');
e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
document.body.appendChild(e);
}
function init() {
if (location.search == '?slow-browser')
return;
var configUI = document.createElement('div');
configUI.id = 'configUI';
document.body.appendChild(configUI);
// load('reviewer.js'); // would need cross-site XHR
if (document.getElementById('head'))
load('toc.js');
load('styler.js');
// load('updater.js'); // would need cross-site XHR
load('dfn.js');
// load('status.js'); // would need cross-site XHR
if (getCookie('profile') == '1')
document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
fixBrokenLink();
}
</script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="the-button-element.html" title="4.10.6 The button element" rel="prev">
<link href="Overview.html#contents" title="Table of contents" rel="index">
<link href="interactive-elements.html" title="4.11 Interactive elements" rel="next">
</head><body onload="fixBrokenLink(); init()"><div class="head" id="head">
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
</div><div>
<a href="the-button-element.html">← 4.10.6 The button element</a> –
<a href="Overview.html#contents">Table of contents</a> –
<a href="interactive-elements.html">4.11 Interactive elements →</a>
<ol class="toc"><li><ol><li><ol><li><a href="association-of-controls-and-forms.html#association-of-controls-and-forms"><span class="secno">4.10.14 </span>Association of controls and forms</a></li><li><a href="association-of-controls-and-forms.html#attributes-common-to-form-controls"><span class="secno">4.10.15 </span>Attributes common to form controls</a>
<ol><li><a href="association-of-controls-and-forms.html#naming-form-controls"><span class="secno">4.10.15.1 </span>Naming form controls</a></li><li><a href="association-of-controls-and-forms.html#enabling-and-disabling-form-controls"><span class="secno">4.10.15.2 </span>Enabling and disabling form controls</a></li><li><a href="association-of-controls-and-forms.html#autofocusing-a-form-control"><span class="secno">4.10.15.3 </span>Autofocusing a form control</a></li><li><a href="association-of-controls-and-forms.html#limiting-user-input-length"><span class="secno">4.10.15.4 </span>Limiting user input length</a></li><li><a href="association-of-controls-and-forms.html#form-submission-0"><span class="secno">4.10.15.5 </span>Form submission</a></li></ol></li><li><a href="association-of-controls-and-forms.html#constraints"><span class="secno">4.10.16 </span>Constraints</a>
<ol><li><a href="association-of-controls-and-forms.html#definitions"><span class="secno">4.10.16.1 </span>Definitions</a></li><li><a href="association-of-controls-and-forms.html#the-constraint-validation-api"><span class="secno">4.10.16.2 </span>The constraint validation API</a></li></ol></li><li><a href="association-of-controls-and-forms.html#form-submission"><span class="secno">4.10.17 </span>Form submission</a></li></ol></li></ol></li></ol></div>
<h4 id="association-of-controls-and-forms"><span class="secno">4.10.14 </span>Association of controls and forms</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A <a href="forms.html#form-associated-element">form-associated element</a> can have a relationship
with a <code><a href="forms.html#the-form-element">form</a></code> element, which is called the element's
<dfn id="form-owner">form owner</dfn>. If a <a href="forms.html#form-associated-element">form-associated element</a> is
not associated with a <code><a href="forms.html#the-form-element">form</a></code> element, its <a href="#form-owner">form
owner</a> is said to be null.</p><p>A <a href="forms.html#form-associated-element">form-associated element</a> is, by default, associated
with its nearest ancestor <code><a href="forms.html#the-form-element">form</a></code> element, but may have a <dfn id="attr-fae-form" title="attr-fae-form"><code>form</code></dfn> attribute specified to
override this.</p><p>If a <a href="forms.html#form-associated-element">form-associated element</a> has a <code title="attr-fae-form"><a href="#attr-fae-form">form</a></code> attribute specified, then its
value must be the ID of a <code><a href="forms.html#the-form-element">form</a></code> element in the element's
owner <code>Document</code>.</p><dl class="domintro"><dt><var title="">element</var> . <code title="dom-fae-form"><a href="#dom-fae-form">form</a></code></dt>
<dd>
<p>Returns the element's <a href="#form-owner">form owner</a>.</p>
<p>Returns null if there isn't one.</p>
</dd>
</dl><h4 id="attributes-common-to-form-controls"><span class="secno">4.10.15 </span><dfn>Attributes common to form controls</dfn></h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h5 id="naming-form-controls"><span class="secno">4.10.15.1 </span>Naming form controls</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-fe-name" title="attr-fe-name"><code>name</code></dfn> content
attribute gives the name of the form control, as used in <a href="#form-submission">form
submission</a> and in the <code><a href="forms.html#the-form-element">form</a></code> element's <code title="dom-form-elements"><a href="#dom-form-elements">elements</a></code> object. If the attribute
is specified, its value must not be the empty string.</p><h5 id="enabling-and-disabling-form-controls"><span class="secno">4.10.15.2 </span>Enabling and disabling form controls</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-fe-disabled" title="attr-fe-disabled"><code>disabled</code></dfn>
content attribute is a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>.</p><p>A form control is <dfn id="concept-fe-disabled" title="concept-fe-disabled">disabled</dfn>
if its <code title="attr-fe-disabled"><a href="#attr-fe-disabled">disabled</a></code> attribute is
set, or if it is a descendant of a <code><a href="forms.html#the-fieldset-element">fieldset</a></code> element
whose <code title="attr-fieldset-disabled"><a href="forms.html#attr-fieldset-disabled">disabled</a></code> attribute
is set and is <em>not</em> a descendant of that
<code><a href="forms.html#the-fieldset-element">fieldset</a></code> element's first <code><a href="forms.html#the-legend-element">legend</a></code> element
child, if any.</p><h5 id="autofocusing-a-form-control"><span class="secno">4.10.15.3 </span>Autofocusing a form control</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!-- v2: Apply this to contentEditable elements --><p>The <dfn id="attr-fe-autofocus" title="attr-fe-autofocus"><code>autofocus</code></dfn>
content attribute allows the user 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.</p><p>The <code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code> attribute is
a <a href="common-microsyntaxes.html#boolean-attribute">boolean attribute</a>.</p><p>There must not be more than one element in the document with the
<code title="attr-fe-autofocus"><a href="#attr-fe-autofocus">autofocus</a></code> attribute
specified.</p><div class="example">
<p>In the following snippet, the text control would be focused when
the document was loaded.</p>
<pre><input maxlength="256" name="q" value="" autofocus>
<input type="submit" value="Search"></pre>
</div><h5 id="limiting-user-input-length"><span class="secno">4.10.15.4 </span>Limiting user input length</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A <dfn id="attr-fe-maxlength" title="attr-fe-maxlength">form control <code title="">maxlength</code> attribute</dfn>, controlled by a <var title="">dirty value flag</var> declares a limit on the number of
characters a user can input.</p><p>If an element has its <a href="#attr-fe-maxlength" title="attr-fe-maxlength">form
control <code title="">maxlength</code> attribute</a> specified,
the attribute's value must be a <a href="common-microsyntaxes.html#valid-non-negative-integer">valid non-negative
integer</a>. If the attribute is specified and applying the
<a href="#rules-for-parsing-non-negative-integers">rules for parsing non-negative integers</a> to its value
results in a number, then that number is the element's <dfn id="maximum-allowed-value-length">maximum
allowed value length</dfn>. If the attribute is omitted or parsing
its value results in an error, then there is no <a href="#maximum-allowed-value-length">maximum
allowed value length</a>.</p><h5 id="form-submission-0"><span class="secno">4.10.15.5 </span>Form submission</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><dfn id="attributes-for-form-submission">Attributes for form submission</dfn> can be specified both
on <code><a href="forms.html#the-form-element">form</a></code> elements and on <a href="forms.html#concept-submit-button" title="concept-submit-button">submit buttons</a> (elements that
represent buttons that submit forms, e.g. an <code><a href="the-input-element.html#the-input-element">input</a></code>
element whose <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is
in the <a href="number-state.html#submit-button-state" title="attr-input-type-submit">Submit Button</a>
state).
</p><p>The <a href="#attributes-for-form-submission">attributes for form submission</a> that may be
specified on <code><a href="forms.html#the-form-element">form</a></code> elements are <code title="attr-fs-action"><a href="#attr-fs-action">action</a></code>, <code title="attr-fs-enctype"><a href="#attr-fs-enctype">enctype</a></code>, <code title="attr-fs-method"><a href="#attr-fs-method">method</a></code>, <code title="attr-fs-novalidate"><a href="#attr-fs-novalidate">novalidate</a></code>, and <code title="attr-fs-target"><a href="#attr-fs-target">target</a></code>.</p><p>The corresponding <a href="#attributes-for-form-submission">attributes for form submission</a>
that may be specified on <a href="forms.html#concept-submit-button" title="concept-submit-button">submit
buttons</a> are <code title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code>, <code title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code>, <code title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code>, <code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code>, and <code title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code>. When omitted, they
default to the values given on the corresponding attributes on the
<code><a href="forms.html#the-form-element">form</a></code> element.</p><hr><p>The <dfn id="attr-fs-action" title="attr-fs-action"><code>action</code></dfn> and
<dfn id="attr-fs-formaction" title="attr-fs-formaction"><code>formaction</code></dfn>
content attributes, if specified, must have a value that is a
<a href="urls.html#valid-url">valid URL</a>.</p><p>The <dfn id="concept-fs-action" title="concept-fs-action">action</dfn> of an element is
the value of the element's <code title="attr-fs-formaction"><a href="#attr-fs-formaction">formaction</a></code> attribute, if the
element is a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit
button</a> and has such an attribute, or the value of its
<a href="#form-owner">form owner</a>'s <code title="attr-fs-action"><a href="#attr-fs-action">action</a></code>
attribute, if <em>it</em> has one, or else the empty string.</p><hr><p>The <dfn id="attr-fs-method" title="attr-fs-method"><code>method</code></dfn> and
<dfn id="attr-fs-formmethod" title="attr-fs-formmethod"><code>formmethod</code></dfn>
content attributes are <a href="common-microsyntaxes.html#enumerated-attribute" title="enumerated attribute">enumerated
attributes</a> with the following keywords and states:</p><ul><li>The keyword <dfn id="attr-fs-method-get-keyword" title="attr-fs-method-GET-keyword"><code>GET</code></dfn>, mapping
to the state <dfn id="attr-fs-method-get" title="attr-fs-method-GET">GET</dfn>, indicating
the HTTP GET method.</li>
<li>The keyword <dfn id="attr-fs-method-post-keyword" title="attr-fs-method-POST-keyword"><code>POST</code></dfn>, mapping
to the state <dfn id="attr-fs-method-post" title="attr-fs-method-POST">POST</dfn>, indicating
the HTTP POST method.</li>
<li>The keyword <dfn id="attr-fs-method-put-keyword" title="attr-fs-method-PUT-keyword"><code>PUT</code></dfn>, mapping
to the state <dfn id="attr-fs-method-put" title="attr-fs-method-PUT">PUT</dfn>, indicating
the HTTP PUT method.</li>
<li>The keyword <dfn id="attr-fs-method-delete-keyword" title="attr-fs-method-DELETE-keyword"><code>DELETE</code></dfn>, mapping
to the state <dfn id="attr-fs-method-delete" title="attr-fs-method-DELETE">DELETE</dfn>, indicating
the HTTP DELETE method.</li>
</ul><p>The <i>missing value default</i> for these attributes is the
<a href="#attr-fs-method-get" title="attr-fs-method-GET">GET</a> state.</p><p>The <dfn id="concept-fs-method" title="concept-fs-method">method</dfn> of an element is
one of those four states. If the element is a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit button</a> and has a <code title="attr-fs-formmethod"><a href="#attr-fs-formmethod">formmethod</a></code> attribute, then the
element's <a href="#concept-fs-method" title="concept-fs-method">method</a> is that
attribute's state; otherwise, it is the <a href="#form-owner">form owner</a>'s
<code title="attr-fs-method"><a href="#attr-fs-method">method</a></code> attribute's state.</p><hr><p>The <dfn id="attr-fs-enctype" title="attr-fs-enctype"><code>enctype</code></dfn> and
<dfn id="attr-fs-formenctype" title="attr-fs-formenctype"><code>formenctype</code></dfn>
content attributes are <a href="common-microsyntaxes.html#enumerated-attribute" title="enumerated attribute">enumerated
attributes</a> with the following keywords and states:</p><ul><li>The "<dfn id="attr-fs-enctype-urlencoded" title="attr-fs-enctype-urlencoded"><code>application/x-www-form-urlencoded</code></dfn>" keyword and corresponding state.</li>
<li>The "<dfn id="attr-fs-enctype-formdata" title="attr-fs-enctype-formdata"><code>multipart/form-data</code></dfn>" keyword and corresponding state.</li>
<li>The "<dfn id="attr-fs-enctype-text" title="attr-fs-enctype-text"><code>text/plain</code></dfn>" keyword and corresponding state.</li>
</ul><p>The <i>missing value default</i> for these attributes is the
<code title="attr-fs-enctype-urlencoded"><a href="#attr-fs-enctype-urlencoded">application/x-www-form-urlencoded</a></code>
state.</p><p>The <dfn id="concept-fs-enctype" title="concept-fs-enctype">enctype</dfn> of an element
is one of those three states. If the element is a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit button</a> and has a <code title="attr-fs-formenctype"><a href="#attr-fs-formenctype">formenctype</a></code> attribute, then the
element's <a href="#concept-fs-enctype" title="concept-fs-enctype">enctype</a> is that
attribute's state; otherwise, it is the <a href="#form-owner">form owner</a>'s
<code title="attr-fs-enctype"><a href="#attr-fs-enctype">enctype</a></code> attribute's state.</p><hr><p>The <dfn id="attr-fs-target" title="attr-fs-target"><code>target</code></dfn> and
<dfn id="attr-fs-formtarget" title="attr-fs-formtarget"><code>formtarget</code></dfn>
content attributes, if specified, must have values that are <a href="browsers.html#valid-browsing-context-name-or-keyword" title="valid browsing context name or keyword">valid browsing
context names or keywords</a>.</p><p>The <dfn id="concept-fs-target" title="concept-fs-target">target</dfn> of an element is
the value of the element's <code title="attr-fs-formtarget"><a href="#attr-fs-formtarget">formtarget</a></code> attribute, if the
element is a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit
button</a> and has such an attribute; or the value of its
<a href="#form-owner">form owner</a>'s <code title="attr-fs-target"><a href="#attr-fs-target">target</a></code>
attribute, if <em>it</em> has such an attribute; or, if one of the
child nodes of <a href="dom.html#the-head-element">the <code>head</code> element</a> is a
<code><a href="semantics.html#the-base-element">base</a></code> element with a <code title="attr-base-target"><a href="semantics.html#attr-base-target">target</a></code> attribute, then the value of
the <code title="attr-base-target"><a href="semantics.html#attr-base-target">target</a></code> attribute of the
first such <code><a href="semantics.html#the-base-element">base</a></code> element; or, if there is no such
element, the empty string.</p><!-- c.f. hyperlink following --><hr><p>The <dfn id="attr-fs-novalidate" title="attr-fs-novalidate"><code>novalidate</code></dfn>
and <dfn id="attr-fs-formnovalidate" title="attr-fs-formnovalidate"><code>formnovalidate</code></dfn>
content attributes are <a href="common-microsyntaxes.html#boolean-attribute" title="boolean attribute">boolean
attributes</a>. If present, they indicate that the form is not to
be validated during submission.</p><p>The <dfn id="concept-fs-novalidate" title="concept-fs-novalidate">no-validate state</dfn> of
an element is true if the element is a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit button</a> and the element's
<code title="attr-fs-formnovalidate"><a href="#attr-fs-formnovalidate">formnovalidate</a></code> attribute
is present, or if the element's <a href="#form-owner">form owner</a>'s <code title="attr-fs-novalidate"><a href="#attr-fs-novalidate">novalidate</a></code> attribute is present,
and false otherwise.</p><div class="example">
<p>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.</p>
<pre><form action="editor.cgi" method="post">
<p><label>Name: <input required name=fn></label></p>
<p><label>Essay: <textarea 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></pre>
</div><h4 id="constraints"><span class="secno">4.10.16 </span>Constraints</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h5 id="definitions"><span class="secno">4.10.16.1 </span>Definitions</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h5 id="the-constraint-validation-api"><span class="secno">4.10.16.2 </span>The <dfn>constraint validation API</dfn></h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">element</var> . <code title="dom-cva-willValidate"><a href="#dom-cva-willvalidate">willValidate</a></code></dt>
<dd>
<p>Returns true if the element will be validated when the form is submitted; false otherwise.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-cva-setCustomValidity"><a href="#dom-cva-setcustomvalidity">setCustomValidity</a></code>(<var title="">message</var>)</dt>
<dd>
<p>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.</p>
<p>If the argument is the empty string, clears the custom error.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-valueMissing"><a href="#dom-validitystate-valuemissing">valueMissing</a></code></dt>
<dd>
<p>Returns true if the element has no value but is a required field; false otherwise.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-typeMismatch"><a href="#dom-validitystate-typemismatch">typeMismatch</a></code></dt>
<dd>
<p>Returns true if the element's value is not in the correct syntax; false otherwise.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-patternMismatch"><a href="#dom-validitystate-patternmismatch">patternMismatch</a></code></dt>
<dd>
<p>Returns true if the element's value doesn't match the provided pattern; false otherwise.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-tooLong"><a href="#dom-validitystate-toolong">tooLong</a></code></dt>
<dd>
<p>Returns true if the element's value is longer than the provided maximum length; false otherwise.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-rangeUnderflow"><a href="#dom-validitystate-rangeunderflow">rangeUnderflow</a></code></dt>
<dd>
<p>Returns true if the element's value is lower than the provided minimum; false otherwise.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-rangeOverflow"><a href="#dom-validitystate-rangeoverflow">rangeOverflow</a></code></dt>
<dd>
<p>Returns true if the element's value is higher than the provided maximum; false otherwise.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-stepMismatch"><a href="#dom-validitystate-stepmismatch">stepMismatch</a></code></dt>
<dd>
<p>Returns true if the element's value doesn't fit the rules given by the <code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code> attribute; false otherwise.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-customError"><a href="#dom-validitystate-customerror">customError</a></code></dt>
<dd>
<p>Returns true if the element has a custom error; false otherwise.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-cva-validity"><a href="#dom-cva-validity">validity</a></code> . <code title="dom-validitystate-valid"><a href="#dom-validitystate-valid">valid</a></code></dt>
<dd>
<p>Returns true if the element's value has no validity problems; false otherwise.</p>
</dd>
<dt><var title="">valid</var> = <var title="">element</var> . <code title="dom-cva-checkValidatity"><a href="#dom-cva-checkvalidatity">checkValidity</a></code>()</dt>
<dd>
<p>Returns true if the element's value has no validity problems;
false otherwise. Fires an <code title="event-invalid">invalid</code> event at the element in the
latter case.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-cva-validationMessage"><a href="#dom-cva-validationmessage">validationMessage</a></code></dt>
<dd>
<p>Returns the error message that would be shown to the user if
the element was to be checked for validity.</p>
</dd>
</dl><div class="example">
<p>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 <code title="dom-cva-setCustomValidity"><a href="#dom-cva-setcustomvalidity">setCustomValidity()</a></code> method
to set an appropriate message.</p>
<pre><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 if (input.value == "...") {
input.setCustomValidity('...');
--> } else {
// input is fine -- reset the error message
input.setCustomValidity('');
}
}
</script></pre>
</div><h4 id="form-submission"><span class="secno">4.10.17 </span><dfn>Form submission</dfn></h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><i>This section is non-normative.</i></p><p>When forms are submitted, the data in the form is converted into
the form specified by the <a href="#concept-fs-enctype" title="concept-fs-enctype">enctype</a>, and then sent to the
destination specified by the <a href="#concept-fs-action" title="concept-fs-action">action</a> using the given <a href="#concept-fs-method" title="concept-fs-method">method</a>.</p><p>For example, take the following form:</p><pre><form action="/find.cgi" method=get>
<input type=text name=t>
<input type=search name=q>
<input type=submit>
</form></pre><p>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 <code title="">/find.cgi?t=cats&q=fur</code>.</p><p>On the other hand, consider this form:</p><pre><form action="/find.cgi" method=post enctype="multipart/form-data">
<input type=text name=t>
<input type=search name=q>
<input type=submit>
</form></pre><p>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:</p><pre>------kYFrd4jNJEgCervE
Content-Disposition: form-data; name="t"
cats
------kYFrd4jNJEgCervE
Content-Disposition: form-data; name="q"
fur
------kYFrd4jNJEgCervE--</pre></body></html>
--- NEW FILE: edits.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.7 Edits — HTML5</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"/><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
p + * > li, dd li { margin: 1em 0; }
dt, dfn { font-weight: bold; font-style: normal; }
dt dfn { font-style: italic; }
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
pre em { font-weight: bolder; font-style: normal; }
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead { border-bottom: solid; }
table tbody th:first-child { border-left: solid; }
table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
img.extra { float: right; }
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
pre.css:first-line { color: #AAAA50; }
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; }
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
dl.domintro dd p { margin: 0.5em 0; }
dl.switch { padding-left: 2em; }
dl.switch > dt { text-indent: -1.5em; }
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
dl.triple { padding: 0 0 0 1em; }
dl.triple dt, dl.triple dd { margin: 0; display: inline }
dl.triple dt:after { content: ':'; }
dl.triple dd:after { content: '\A'; white-space: pre; }
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
a .diff-new { border-bottom: 1px blue solid; }
h2 { page-break-before: always; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; }
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
div.head p { margin: 0; }
div.head h1 { margin: 0; }
div.head .logo { float: right; margin: 0 1em; }
div.head .logo img { border: none } /* remove border from top image */
div.head dl { margin: 1em 0; }
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
body > .toc > li > * { margin-bottom: 0.5em; }
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
.toc, .toc li { list-style: none; }
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
.brief li { margin: 0; padding: 0; }
.brief li p { margin: 0; padding: 0; }
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
.category-list li { display: inline; }
.category-list li:not(:last-child)::after { content: ', '; }
.category-list li > span, .category-list li > a { text-transform: lowercase; }
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
.XXX > :first-child { margin-top: 0; }
p .XXX { line-height: 3em; }
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
.annotation :link, .annotation :visited { color: inherit; }
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
.annotation span { border: none ! important; }
.note { color: green; background: transparent; font-family: sans-serif; }
.warning { color: red; background: transparent; }
.note, .warning { font-weight: bolder; font-style: italic; }
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
.note p:first-child, .warning p:first-child { margin-top: 0; }
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
.warning:before { font-style: normal; }
p.note:before { content: 'Note: '; }
p.warning:before { content: '\26A0 Warning! '; }
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
h4 { position: relative; z-index: 3; }
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
.element {
background: #EEEEFF;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -1.15em;
height: 2em;
width: 0.9em;
background: #EEEEFF;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
td > .example:only-child { margin: 0 0 0 0.1em; }
.tall-and-narrow {
font-size: 0.6em;
column-width: 25em;
column-gap: 1em;
-moz-column-width: 25em;
-moz-column-gap: 1em;
-webkit-column-width: 25em;
-webkit-column-gap: 1em;
}
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
ul.domTree li li { list-style: none; }
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree span { font-style: italic; font-family: serif; }
ul.domTree .t1 code { color: purple; font-weight: bold; }
ul.domTree .t2 { font-style: normal; font-family: monospace; }
ul.domTree .t2 .name { color: black; font-weight: bold; }
ul.domTree .t2 .value { color: blue; font-weight: normal; }
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
ul.domTree .t7 code, .domTree .t8 code { color: green; }
ul.domTree .t10 code { color: teal; }
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
#configUI p label { display: block; }
#configUI #updateUI, #configUI .loginUI { text-align: center; }
#configUI input[type=button] { display: block; margin: auto; }
</style><style type="text/css">
.applies thead th > * { display: block; }
.applies thead code { display: block; }
.applies tbody th { whitespace: nowrap; }
.applies td { text-align: center; }
.applies .yes { background: yellow; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
#table-example-1 caption { padding-bottom: 0.5em; }
#table-example-1 thead, #table-example-1 tbody { border: none; }
#table-example-1 th, #table-example-1 td { border: solid thin; }
#table-example-1 th { font-weight: normal; }
#table-example-1 td { border-style: none solid; vertical-align: top; }
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
#table-example-1 tbody td:first-child::after { content: leader(". "); }
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
#table-example-1 tbody td:first-child + td { width: 10em; }
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
.apple-table-examples * { font-family: "Times", serif; }
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
.apple-table-examples td { text-align: right; vertical-align: top; }
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
.apple-table-examples sup { line-height: 0; }
</style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script>
function getCookie(name) {
var params = location.search.substr(1).split("&");
for (var index = 0; index < params.length; index++) {
if (params[index] == name)
return "1";
var data = params[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
var cookies = document.cookie.split("; ");
for (var index = 0; index < cookies.length; index++) {
var data = cookies[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
return null;
}
function load(script) {
var e = document.createElement('script');
e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
document.body.appendChild(e);
}
function init() {
if (location.search == '?slow-browser')
return;
var configUI = document.createElement('div');
configUI.id = 'configUI';
document.body.appendChild(configUI);
// load('reviewer.js'); // would need cross-site XHR
if (document.getElementById('head'))
load('toc.js');
load('styler.js');
// load('updater.js'); // would need cross-site XHR
load('dfn.js');
// load('status.js'); // would need cross-site XHR
if (getCookie('profile') == '1')
document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
fixBrokenLink();
}
</script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="text-level-semantics.html" title="4.6 Text-level semantics" rel="prev">
<link href="Overview.html#contents" title="Table of contents" rel="index">
<link href="embedded-content-1.html" title="4.8 Embedded content" rel="next">
</head><body onload="fixBrokenLink(); init()"><div class="head" id="head">
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
</div><div>
<a href="text-level-semantics.html">← 4.6 Text-level semantics</a> –
<a href="Overview.html#contents">Table of contents</a> –
<a href="embedded-content-1.html">4.8 Embedded content →</a>
<ol class="toc"><li><ol><li><a href="edits.html#edits"><span class="secno">4.7 </span>Edits</a>
<ol><li><a href="edits.html#the-ins-element"><span class="secno">4.7.1 </span>The <code>ins</code> element</a></li><li><a href="edits.html#the-del-element"><span class="secno">4.7.2 </span>The <code>del</code> element</a></li><li><a href="edits.html#attributes-common-to-ins-and-del-elements"><span class="secno">4.7.3 </span>Attributes common to <code>ins</code> and <code>del</code> elements</a></li><li><a href="edits.html#edits-and-paragraphs"><span class="secno">4.7.4 </span>Edits and paragraphs</a></li><li><a href="edits.html#edits-and-lists"><span class="secno">4.7.5 </span>Edits and lists</a></li></ol></li></ol></li></ol></div>
<h3 id="edits"><span class="secno">4.7 </span>Edits</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="#the-ins-element">ins</a></code> and <code><a href="#the-del-element">del</a></code> elements represent
edits to the document.</p><h4 id="the-ins-element"><span class="secno">4.7.1 </span>The <dfn><code>ins</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dd>When the element only contains <a href="content-models.html#phrasing-content">phrasing content</a>: <a href="content-models.html#phrasing-content">phrasing content</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
<dt>Content model:</dt>
<dd><a href="content-models.html#transparent">Transparent</a>.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dd><code title="attr-mod-cite"><a href="#attr-mod-cite">cite</a></code></dd>
<dd><code title="attr-mod-datetime"><a href="#attr-mod-datetime">datetime</a></code></dd>
<dt>DOM interface:</dt>
<dd>Uses the <code><a href="#htmlmodelement">HTMLModElement</a></code> interface.</dd>
</dl><p>The <code><a href="#the-ins-element">ins</a></code> element <a href="#represents">represents</a> an addition
to the document.</p><div class="example">
<p>The following represents the addition of a single paragraph:</p>
<pre><aside>
<ins>
<p> I like fruit. </p>
</ins>
</aside></pre>
<p>As does this, because everything in the <code><a href="sections.html#the-aside-element">aside</a></code>
element here counts as <a href="content-models.html#phrasing-content">phrasing content</a> and therefore
there is just one <a href="content-models.html#paragraph">paragraph</a>:</p>
<pre><aside>
<ins>
Apples are <em>tasty</em>.
</ins>
<ins>
So are pears.
</ins>
</aside></pre>
</div><p><code><a href="#the-ins-element">ins</a></code> elements should not cross <a href="content-models.html#paragraph" title="paragraph">implied paragraph</a> boundaries.</p><div class="example">
<p>The following example represents the addition of two paragraphs,
the second of which was inserted in two parts. The first
<code><a href="#the-ins-element">ins</a></code> element in this example thus crosses a paragraph
boundary, which is considered poor form.</p>
<pre class="bad"><aside>
<!-- don't do this -->
<ins datetime="2005-03-16T00:00Z">
<p> I like fruit. </p>
Apples are <em>tasty</em>.
</ins>
<ins datetime="2007-12-19T00:00Z">
So are pears.
</ins>
</aside></pre>
<p>Here is a better way of marking this up. It uses more elements,
but none of the elements cross implied paragraph boundaries.</p>
<pre><aside>
<ins datetime="2005-03-16T00:00Z">
<p> I like fruit. </p>
</ins>
<ins datetime="2005-03-16T00:00Z">
Apples are <em>tasty</em>.
</ins>
<ins datetime="2007-12-19T00:00Z">
So are pears.
</ins>
</aside></pre>
<!-- Those dates aren't random. They're the start and end of
something. Can you guess what? -->
</div><h4 id="the-del-element"><span class="secno">4.7.2 </span>The <dfn><code>del</code></dfn> element</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="element"><dt>Categories</dt>
<dd><a href="content-models.html#flow-content">Flow content</a>.</dd>
<dd>When the element only contains <a href="content-models.html#phrasing-content">phrasing content</a>: <a href="content-models.html#phrasing-content">phrasing content</a>.</dd>
<dt>Contexts in which this element may be used:</dt>
<dd>Where <a href="content-models.html#phrasing-content">phrasing content</a> is expected.</dd>
<dt>Content model:</dt>
<dd><a href="content-models.html#transparent">Transparent</a>.</dd>
<dt>Content attributes:</dt>
<dd><a href="elements.html#global-attributes">Global attributes</a></dd>
<dd><code title="attr-mod-cite"><a href="#attr-mod-cite">cite</a></code></dd>
<dd><code title="attr-mod-datetime"><a href="#attr-mod-datetime">datetime</a></code></dd>
<dt>DOM interface:</dt>
<dd>Uses the <code><a href="#htmlmodelement">HTMLModElement</a></code> interface.</dd>
</dl><p>The <code><a href="#the-del-element">del</a></code> element <a href="#represents">represents</a> a removal
from the document.</p><p><code><a href="#the-del-element">del</a></code> elements should not cross <a href="content-models.html#paragraph" title="paragraph">implied paragraph</a> boundaries.</p><div class="example">
<p>The following shows a "to do" list where items that have been
done are crossed-off with the date and time of their
completion.</p>
<pre><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></pre>
</div><h4 id="attributes-common-to-ins-and-del-elements"><span class="secno">4.7.3 </span>Attributes common to <code><a href="#the-ins-element">ins</a></code> and <code><a href="#the-del-element">del</a></code> elements</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="attr-mod-cite" title="attr-mod-cite"><code>cite</code></dfn> 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.</p><p>If the <code title="attr-mod-cite"><a href="#attr-mod-cite">cite</a></code> attribute is
present, it must be a <a href="urls.html#valid-url">valid URL</a> that explains the
change. </p><p>The <dfn id="attr-mod-datetime" title="attr-mod-datetime"><code>datetime</code></dfn>
attribute may be used to specify the time and date of the change.</p><p>If present, the <code title="attr-mod-datetime"><a href="#attr-mod-datetime">datetime</a></code>
attribute must be a <a href="common-microsyntaxes.html#valid-global-date-and-time-string">valid global date and time string</a>
value.</p><p>The <code><a href="#the-ins-element">ins</a></code> and <code><a href="#the-del-element">del</a></code> elements implement the <code><a href="#htmlmodelement">HTMLModElement</a></code>
interface:</p><pre class="idl">interface <dfn id="htmlmodelement">HTMLModElement</dfn> : <a href="elements.html#htmlelement">HTMLElement</a> {
attribute DOMString <a href="#dom-mod-cite" title="dom-mod-cite">cite</a>;
attribute DOMString <a href="#dom-mod-datetime" title="dom-mod-datetime">dateTime</a>;
};</pre><h4 id="edits-and-paragraphs"><span class="secno">4.7.4 </span>Edits and paragraphs</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><i>This section is non-normative.</i></p><p>Since the <code><a href="#the-ins-element">ins</a></code> and <code><a href="#the-del-element">del</a></code> elements do not
affect <a href="content-models.html#paragraph" title="paragraph">paragraphing</a>, it is possible,
in some cases where paragraphs are <a href="content-models.html#paragraph" title="paragraph">implied</a> (without explicit <code><a href="grouping-content.html#the-p-element">p</a></code>
elements), for an <code><a href="#the-ins-element">ins</a></code> or <code><a href="#the-del-element">del</a></code> element to
span both an entire paragraph or other non-<a href="content-models.html#phrasing-content">phrasing
content</a> elements and part of another paragraph. For
example:</p><pre><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></pre><p>By only wrapping some paragraphs in <code><a href="grouping-content.html#the-p-element">p</a></code> 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
<code><a href="#the-ins-element">ins</a></code> or <code><a href="#the-del-element">del</a></code> element (though this is very
confusing, and not considered good practice):</p><pre class="bad"><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></pre><p>However, due to the way <a href="content-models.html#paragraph" title="paragraph">implied
paragraphs</a> 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 <code><a href="#the-ins-element">ins</a></code> or <code><a href="#the-del-element">del</a></code> element. You instead have
to use one (or two) <code><a href="grouping-content.html#the-p-element">p</a></code> element(s) and two
<code><a href="#the-ins-element">ins</a></code> or <code><a href="#the-del-element">del</a></code> elements, as for example:</p><pre><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 &lt;del&gt; element.</p>
</section></pre><p>Partly because of the confusion described above, authors are
strongly encouraged to always mark up all paragraphs with the
<code><a href="grouping-content.html#the-p-element">p</a></code> element, instead of having <code><a href="#the-ins-element">ins</a></code> or
<code><a href="#the-del-element">del</a></code> elements that cross <a href="content-models.html#paragraph" title="paragraph">implied
paragraphs</a> boundaries.</p><h4 id="edits-and-lists"><span class="secno">4.7.5 </span>Edits and lists</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><i>This section is non-normative.</i></p><p>The content models of the <code><a href="grouping-content.html#the-ol-element">ol</a></code> and <code><a href="grouping-content.html#the-ul-element">ul</a></code>
elements do not allow <code><a href="#the-ins-element">ins</a></code> and <code><a href="#the-del-element">del</a></code> elements
as children. Lists always represent all their items, including items
that would otherwise have been marked as deleted.</p><p>To indicate that an item is inserted or deleted, an
<code><a href="#the-ins-element">ins</a></code> or <code><a href="#the-del-element">del</a></code> element can be wrapped around
the contents of the <code><a href="grouping-content.html#the-li-element">li</a></code> element. To indicate that an
item has been replaced by another, a single <code><a href="grouping-content.html#the-li-element">li</a></code> element
can have one or more <code><a href="#the-del-element">del</a></code> elements followed by one or
more <code><a href="#the-ins-element">ins</a></code> elements.</p><div class="example">
<p>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.</p>
<pre><h1>Stop-ship bugs</h1>
<ol>
<li><ins datetime="2008-02-12T15:20Z"><em>Bug 225:
Rain detector doesn't work in snow</em></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"><em>Bug 230:
Water heater doesn't use renewable fuels</em></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></pre>
</div><div class="example">
<p>In the following example, a list that started with just fruit
was replaced by a list with just colors.</p>
<pre><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>
</ul></pre>
</div></body></html>
--- NEW FILE: content-models.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>3.2.5 Content models — HTML5</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"/><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
p + * > li, dd li { margin: 1em 0; }
dt, dfn { font-weight: bold; font-style: normal; }
dt dfn { font-style: italic; }
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
pre em { font-weight: bolder; font-style: normal; }
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead { border-bottom: solid; }
table tbody th:first-child { border-left: solid; }
table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
img.extra { float: right; }
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
pre.css:first-line { color: #AAAA50; }
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; }
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
dl.domintro dd p { margin: 0.5em 0; }
dl.switch { padding-left: 2em; }
dl.switch > dt { text-indent: -1.5em; }
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
dl.triple { padding: 0 0 0 1em; }
dl.triple dt, dl.triple dd { margin: 0; display: inline }
dl.triple dt:after { content: ':'; }
dl.triple dd:after { content: '\A'; white-space: pre; }
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
a .diff-new { border-bottom: 1px blue solid; }
h2 { page-break-before: always; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; }
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
div.head p { margin: 0; }
div.head h1 { margin: 0; }
div.head .logo { float: right; margin: 0 1em; }
div.head .logo img { border: none } /* remove border from top image */
div.head dl { margin: 1em 0; }
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
body > .toc > li > * { margin-bottom: 0.5em; }
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
.toc, .toc li { list-style: none; }
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
.brief li { margin: 0; padding: 0; }
.brief li p { margin: 0; padding: 0; }
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
.category-list li { display: inline; }
.category-list li:not(:last-child)::after { content: ', '; }
.category-list li > span, .category-list li > a { text-transform: lowercase; }
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
.XXX > :first-child { margin-top: 0; }
p .XXX { line-height: 3em; }
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
.annotation :link, .annotation :visited { color: inherit; }
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
.annotation span { border: none ! important; }
.note { color: green; background: transparent; font-family: sans-serif; }
.warning { color: red; background: transparent; }
.note, .warning { font-weight: bolder; font-style: italic; }
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
.note p:first-child, .warning p:first-child { margin-top: 0; }
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
.warning:before { font-style: normal; }
p.note:before { content: 'Note: '; }
p.warning:before { content: '\26A0 Warning! '; }
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
h4 { position: relative; z-index: 3; }
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
.element {
background: #EEEEFF;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -1.15em;
height: 2em;
width: 0.9em;
background: #EEEEFF;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
td > .example:only-child { margin: 0 0 0 0.1em; }
.tall-and-narrow {
font-size: 0.6em;
column-width: 25em;
column-gap: 1em;
-moz-column-width: 25em;
-moz-column-gap: 1em;
-webkit-column-width: 25em;
-webkit-column-gap: 1em;
}
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
ul.domTree li li { list-style: none; }
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree span { font-style: italic; font-family: serif; }
ul.domTree .t1 code { color: purple; font-weight: bold; }
ul.domTree .t2 { font-style: normal; font-family: monospace; }
ul.domTree .t2 .name { color: black; font-weight: bold; }
ul.domTree .t2 .value { color: blue; font-weight: normal; }
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
ul.domTree .t7 code, .domTree .t8 code { color: green; }
ul.domTree .t10 code { color: teal; }
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
#configUI p label { display: block; }
#configUI #updateUI, #configUI .loginUI { text-align: center; }
#configUI input[type=button] { display: block; margin: auto; }
</style><style type="text/css">
.applies thead th > * { display: block; }
.applies thead code { display: block; }
.applies tbody th { whitespace: nowrap; }
.applies td { text-align: center; }
.applies .yes { background: yellow; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
#table-example-1 caption { padding-bottom: 0.5em; }
#table-example-1 thead, #table-example-1 tbody { border: none; }
#table-example-1 th, #table-example-1 td { border: solid thin; }
#table-example-1 th { font-weight: normal; }
#table-example-1 td { border-style: none solid; vertical-align: top; }
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
#table-example-1 tbody td:first-child::after { content: leader(". "); }
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
#table-example-1 tbody td:first-child + td { width: 10em; }
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
.apple-table-examples * { font-family: "Times", serif; }
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
.apple-table-examples td { text-align: right; vertical-align: top; }
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
.apple-table-examples sup { line-height: 0; }
</style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script>
function getCookie(name) {
var params = location.search.substr(1).split("&");
for (var index = 0; index < params.length; index++) {
if (params[index] == name)
return "1";
var data = params[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
var cookies = document.cookie.split("; ");
for (var index = 0; index < cookies.length; index++) {
var data = cookies[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
return null;
}
function load(script) {
var e = document.createElement('script');
e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
document.body.appendChild(e);
}
function init() {
if (location.search == '?slow-browser')
return;
var configUI = document.createElement('div');
configUI.id = 'configUI';
document.body.appendChild(configUI);
// load('reviewer.js'); // would need cross-site XHR
if (document.getElementById('head'))
load('toc.js');
load('styler.js');
// load('updater.js'); // would need cross-site XHR
load('dfn.js');
// load('status.js'); // would need cross-site XHR
if (getCookie('profile') == '1')
document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
fixBrokenLink();
}
</script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="elements.html" title="3.2 Elements" rel="prev">
<link href="Overview.html#contents" title="Table of contents" rel="index">
<link href="apis-in-html-documents.html" title="3.3 APIs in HTML documents" rel="next">
</head><body onload="fixBrokenLink(); init()"><div class="head" id="head">
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
</div><div>
<a href="elements.html">← 3.2 Elements</a> –
<a href="Overview.html#contents">Table of contents</a> –
<a href="apis-in-html-documents.html">3.3 APIs in HTML documents →</a>
<ol class="toc"><li><ol><li><ol><li><a href="content-models.html#content-models"><span class="secno">3.2.5 </span>Content models</a>
<ol><li><a href="content-models.html#kinds-of-content"><span class="secno">3.2.5.1 </span>Kinds of content</a>
<ol><li><a href="content-models.html#metadata-content-0"><span class="secno">3.2.5.1.1 </span>Metadata content</a></li><li><a href="content-models.html#flow-content-0"><span class="secno">3.2.5.1.2 </span>Flow content</a></li><li><a href="content-models.html#sectioning-content-0"><span class="secno">3.2.5.1.3 </span>Sectioning content</a></li><li><a href="content-models.html#heading-content-0"><span class="secno">3.2.5.1.4 </span>Heading content</a></li><li><a href="content-models.html#phrasing-content-0"><span class="secno">3.2.5.1.5 </span>Phrasing content</a></li><li><a href="content-models.html#embedded-content-0"><span class="secno">3.2.5.1.6 </span>Embedded content</a></li><li><a href="content-models.html#interactive-content-0"><span class="secno">3.2.5.1.7 </span>Interactive content</a></li></ol></li><li><a href="content-models.html#transparent-content-models"><span class="secno">3.2.5.2 </span>Transparent content models</a></li><li><a href="content-models.html#paragraphs"><span class="secno"3.2.5.3 </span>Paragraphs</a></li></ol></li><li><a href="content-models.html#annotations-for-assistive-technology-products-aria"><span class="secno">3.2.6 </span>Annotations for assistive technology products (ARIA)</a></li></ol></li></ol></li></ol></div>
<h4 id="content-models"><span class="secno">3.2.5 </span><dfn>Content models</dfn></h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Each element defined in this specification has a content model: a
description of the element's expected contents. An <a href="infrastructure.html#html-elements" title="HTML
elements">HTML element</a> must have contents that match the
requirements described in the element's content model.</p><p class="note">As noted in the conformance and terminology
sections, for the purposes of determining if an element matches its
content model or not, <a href="infrastructure.html#text-node" title="text
node"><code>CDATASection</code> nodes in the DOM are treated as
equivalent to <code>Text</code> nodes</a>, and <a href="#entity-references">entity reference nodes are treated as if
they were expanded in place</a>.</p><p>The <a href="#space-character" title="space character">space characters</a> are
always allowed between elements. User agents represent these
characters between elements in the source markup as text nodes in
the DOM.<!-- not a conf criteria since the parser now requires this
--> Empty <a href="infrastructure.html#text-node" title="text node">text nodes</a> and <a href="infrastructure.html#text-node" title="text node">text nodes</a> consisting of just sequences of
those characters are considered <dfn id="inter-element-whitespace">inter-element
whitespace</dfn>.</p><p><a href="#inter-element-whitespace">Inter-element whitespace</a>, comment nodes, and
processing instruction nodes must be ignored when establishing
whether an element's contents match the element's content model or
not, and must be ignored when following algorithms that define
document and element semantics.</p><p>An element <var title="">A</var> is said to be <dfn id="preceded-or-followed">preceded or
followed</dfn> by a second element <var title="">B</var> if <var title="">A</var> and <var title="">B</var> have the same parent node
and there are no other element nodes or text nodes (other than
<a href="#inter-element-whitespace">inter-element whitespace</a>) between them.</p><p>Authors must not use <a href="infrastructure.html#html-elements">HTML elements</a> anywhere except
where they are explicitly allowed, as defined for each element, or
as explicitly required by other specifications. For XML compound
documents, these contexts could be inside elements from other
namespaces, if those elements are defined as providing the relevant
contexts.</p><div class="example">
<p>The Atom specification defines the Atom <code title="">content</code> element, when its <code title="">type</code> attribute has the value <code title="">xhtml</code>, as requiring that it contains a single HTML
<code><a href="grouping-content.html#the-div-element">div</a></code> element. Thus, a <code><a href="grouping-content.html#the-div-element">div</a></code> element is
allowed in that context, even though this is not explicitly
normatively stated by this specification. <a href="references.html#refsATOM">[ATOM]</a></p>
</div><p>In addition, <a href="infrastructure.html#html-elements">HTML elements</a> may be orphan nodes
(i.e. without a parent node).</p><div class="example">
<p>For example, creating a <code><a href="tabular-data.html#the-td-element">td</a></code> element and storing it
in a global variable in a script is conforming, even though
<code><a href="tabular-data.html#the-td-element">td</a></code> elements are otherwise only supposed to be used
inside <code><a href="tabular-data.html#the-tr-element">tr</a></code> elements.</p>
<pre>var data = {
name: "Banana",
cell: document.createElement('td'),
};</pre>
</div><h5 id="kinds-of-content"><span class="secno">3.2.5.1 </span>Kinds of content</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Each element in HTML falls into zero or more <dfn id="content-categories" title="content
categories">categories</dfn> that group elements with similar
characteristics together. The following broad categories are used in
this specification:</p><ul class="brief"><li><a href="#metadata-content">Metadata content</a></li>
<li><a href="#flow-content">Flow content</a></li>
<li><a href="#sectioning-content">Sectioning content</a></li>
<li><a href="#heading-content">Heading content</a></li>
<li><a href="#phrasing-content">Phrasing content</a></li>
<li><a href="#embedded-content">Embedded content</a></li>
<li><a href="#interactive-content">Interactive content</a></li>
</ul><p class="note">Some elements also fall into other categories, which
are defined in other parts of this specification.</p><p>These categories are related as follows:</p><p><object data="images/content-venn.svg" height="288" width="512"><img alt="Sectioning content, heading content, phrasing content, and
embedded content are all types of flow content. Embedded content is
also a type of phrasing content." src="images/content-venn.png"></object></p><p>In addition, certain elements are categorized as <a href="forms.html#form-associated-element" title="form-associated element">form-associated elements</a> and
further subcategorized to define their role in various form-related
processing models.</p><p>Some elements have unique requirements and do not fit into any
particular category.</p><h6 id="metadata-content-0"><span class="secno">3.2.5.1.1 </span>Metadata content</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><dfn id="metadata-content">Metadata content</dfn> is content that sets up the
presentation or behavior of the rest of the content, or that sets
up the relationship of the document with other documents, or that
conveys other "out of band" information.</p><ul class="brief category-list"><li><code><a href="semantics.html#the-base-element">base</a></code></li>
<li><code><a href="interactive-elements.html#the-command">command</a></code></li>
<li><code><a href="semantics.html#the-link-element">link</a></code></li>
<li><code><a href="semantics.html#meta">meta</a></code></li>
<li><code><a href="scripting-1.html#the-noscript-element">noscript</a></code></li>
<li><code><a href="scripting-1.html#script">script</a></code></li>
<li><code><a href="semantics.html#the-style-element">style</a></code></li>
<li><code><a href="semantics.html#the-title-element-0">title</a></code></li>
</ul><p>Elements from other namespaces whose semantics are primarily
metadata-related (e.g. RDF) are also <a href="#metadata-content">metadata
content</a>.</p><div class="example">
<p>Thus, in the XML serialization, one can use RDF, like this:</p>
<pre><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></pre>
<p>This isn't possible in the HTML serialization, however.</p>
</div><h6 id="flow-content-0"><span class="secno">3.2.5.1.2 </span>Flow content</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Most elements that are used in the body of documents and
applications are categorized as <dfn id="flow-content">flow content</dfn>.</p><ul class="brief category-list"><li><code><a href="text-level-semantics.html#the-a-element">a</a></code></li>
<li><code><a href="text-level-semantics.html#the-abbr-element">abbr</a></code></li>
<li><code><a href="sections.html#the-address-element">address</a></code></li>
<li><code><a href="the-map-element.html#the-area-element">area</a></code> (if it is a descendant of a <code><a href="the-map-element.html#the-map-element">map</a></code> element)</li>
<li><code><a href="sections.html#the-article-element">article</a></code></li>
<li><code><a href="sections.html#the-aside-element">aside</a></code></li>
<li><code><a href="video.html#audio">audio</a></code></li>
<li><code><a href="text-level-semantics.html#the-b-element">b</a></code></li>
<li><code><a href="text-level-semantics.html#the-bdo-element">bdo</a></code></li>
<li><code><a href="grouping-content.html#the-blockquote-element">blockquote</a></code></li>
<li><code><a href="grouping-content.html#the-br-element">br</a></code></li>
<li><code><a href="the-button-element.html#the-button-element">button</a></code></li>
<li><code><a href="the-canvas-element.html#the-canvas-element">canvas</a></code></li>
<li><code><a href="text-level-semantics.html#the-cite-element">cite</a></code></li>
<li><code><a href="text-level-semantics.html#the-code-element">code</a></code></li>
<li><code><a href="interactive-elements.html#the-command">command</a></code></li>
<!-- v2DATAGRID <li><code>datagrid</code></li> -->
<li><code><a href="the-button-element.html#the-datalist-element">datalist</a></code></li>
<li><code><a href="edits.html#the-del-element">del</a></code></li>
<li><code><a href="interactive-elements.html#the-details-element">details</a></code></li>
<li><code><a href="text-level-semantics.html#the-dfn-element">dfn</a></code></li>
<li><code><a href="grouping-content.html#the-div-element">div</a></code></li>
<li><code><a href="grouping-content.html#the-dl-element">dl</a></code></li>
<li><code><a href="text-level-semantics.html#the-em-element">em</a></code></li>
<li><code><a href="the-iframe-element.html#the-embed-element">embed</a></code></li>
<li><code><a href="forms.html#the-fieldset-element">fieldset</a></code></li>
<li><code><a href="embedded-content-1.html#the-figure-element">figure</a></code></li>
<li><code><a href="sections.html#the-footer-element">footer</a></code></li>
<li><code><a href="forms.html#the-form-element">form</a></code></li>
<li><code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code></li>
<li><code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code></li>
<li><code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h3</a></code></li>
<li><code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h4</a></code></li>
<li><code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h5</a></code></li>
<li><code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code></li>
<li><code><a href="sections.html#the-header-element">header</a></code></li>
<li><code><a href="sections.html#the-hgroup-element">hgroup</a></code></li>
<li><code><a href="grouping-content.html#the-hr-element">hr</a></code></li>
<li><code><a href="text-level-semantics.html#the-i-element">i</a></code></li>
<li><code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code></li>
<li><code><a href="embedded-content-1.html#the-img-element">img</a></code></li>
<li><code><a href="the-input-element.html#the-input-element">input</a></code></li>
<li><code><a href="edits.html#the-ins-element">ins</a></code></li>
<li><code><a href="text-level-semantics.html#the-kbd-element">kbd</a></code></li>
<li><code><a href="the-button-element.html#the-keygen-element">keygen</a></code></li>
<li><code><a href="forms.html#the-label-element">label</a></code></li>
<li><code><a href="semantics.html#the-link-element">link</a></code> (if the <code title="attr-itemprop"><a href="microdata.html#names:-the-itemprop-attribute">itemprop</a></code> attribute is present)</li>
<li><code><a href="the-map-element.html#the-map-element">map</a></code></li>
<li><code><a href="text-level-semantics.html#the-mark-element">mark</a></code></li>
<li><code><a href="the-map-element.html#math">math</a></code></li>
<li><code><a href="interactive-elements.html#menus">menu</a></code></li>
<li><code><a href="semantics.html#meta">meta</a></code> (if the <code title="attr-itemprop"><a href="microdata.html#names:-the-itemprop-attribute">itemprop</a></code> attribute is present)</li>
<li><code><a href="text-level-semantics.html#the-meter-element">meter</a></code></li>
<li><code><a href="sections.html#the-nav-element">nav</a></code></li>
<li><code><a href="scripting-1.html#the-noscript-element">noscript</a></code></li>
<li><code><a href="the-iframe-element.html#the-object-element">object</a></code></li>
<li><code><a href="grouping-content.html#the-ol-element">ol</a></code></li>
<li><code><a href="the-button-element.html#the-output-element">output</a></code></li>
<li><code><a href="grouping-content.html#the-p-element">p</a></code></li>
<li><code><a href="grouping-content.html#the-pre-element">pre</a></code></li>
<li><code><a href="text-level-semantics.html#the-progress-element">progress</a></code></li>
<li><code><a href="text-level-semantics.html#the-q-element">q</a></code></li>
<li><code><a href="text-level-semantics.html#the-ruby-element">ruby</a></code></li>
<li><code><a href="text-level-semantics.html#the-samp-element">samp</a></code></li>
<li><code><a href="scripting-1.html#script">script</a></code></li>
<li><code><a href="sections.html#the-section-element">section</a></code></li>
<li><code><a href="the-button-element.html#the-select-element">select</a></code></li>
<li><code><a href="text-level-semantics.html#the-small-element">small</a></code></li>
<li><code><a href="text-level-semantics.html#the-span-element">span</a></code></li>
<li><code><a href="text-level-semantics.html#the-strong-element">strong</a></code></li>
<li><code><a href="semantics.html#the-style-element">style</a></code> (if the <code title="attr-style-scoped"><a href="semantics.html#attr-style-scoped">scoped</a></code> attribute is present)</li>
<li><code><a href="text-level-semantics.html#the-sub-and-sup-elements">sub</a></code></li>
<li><code><a href="text-level-semantics.html#the-sub-and-sup-elements">sup</a></code></li>
<li><code><a href="the-map-element.html#svg">svg</a></code></li>
<li><code><a href="tabular-data.html#the-table-element">table</a></code></li>
<li><code><a href="the-button-element.html#the-textarea-element">textarea</a></code></li>
<li><code><a href="text-level-semantics.html#the-time-element">time</a></code></li>
<li><code><a href="grouping-content.html#the-ul-element">ul</a></code></li>
<li><code><a href="text-level-semantics.html#the-var-element">var</a></code></li>
<li><code><a href="video.html#video">video</a></code></li>
<li><a href="#text-content" title="text content">Text</a></li>
</ul><p>As a general rule, elements whose content model allows any
<a href="#flow-content">flow content</a> should have either at least one descendant
<a href="infrastructure.html#text-node">text node</a> that is not <a href="#inter-element-whitespace">inter-element
whitespace</a>, or at least one descendant element node that is
<a href="#embedded-content">embedded content</a>. For the purposes of this requirement,
<code><a href="edits.html#the-del-element">del</a></code> elements and their descendants must not be counted
as contributing to the ancestors of the <code><a href="edits.html#the-del-element">del</a></code>
element.</p><p>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.</p><h6 id="sectioning-content-0"><span class="secno">3.2.5.1.3 </span>Sectioning content</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><dfn id="sectioning-content">Sectioning content</dfn> is content that defines the scope
of <a href="#heading-content" title="heading content">headings</a> and <a href="sections.html#the-footer-element" title="footer">footers</a>.</p><ul class="brief category-list"><li><code><a href="sections.html#the-article-element">article</a></code></li>
<li><code><a href="sections.html#the-aside-element">aside</a></code></li>
<li><code><a href="sections.html#the-nav-element">nav</a></code></li>
<li><code><a href="sections.html#the-section-element">section</a></code></li>
</ul><p>Each <a href="#sectioning-content">sectioning content</a> element potentially has a
heading and an <a href="sections.html#outline">outline</a>. See the section on
<a href="sections.html#headings-and-sections">headings and sections</a> for further details.</p><p class="note">There are also certain elements that are <a href="sections.html#sectioning-root" title="sectioning root">sectioning roots</a>. These are distinct
from <a href="#sectioning-content">sectioning content</a>, but they can also have an
<a href="sections.html#outline">outline</a>.</p><h6 id="heading-content-0"><span class="secno">3.2.5.1.4 </span>Heading content</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><dfn id="heading-content">Heading content</dfn> defines the header of a section
(whether explicitly marked up using <a href="#sectioning-content">sectioning content</a>
elements, or implied by the heading content itself).</p><ul class="brief category-list"><li><code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code></li>
<li><code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code></li>
<li><code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h3</a></code></li>
<li><code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h4</a></code></li>
<li><code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h5</a></code></li>
<li><code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code></li>
<li><code><a href="sections.html#the-hgroup-element">hgroup</a></code></li>
</ul><h6 id="phrasing-content-0"><span class="secno">3.2.5.1.5 </span>Phrasing content</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><dfn id="phrasing-content">Phrasing content</dfn> is the text of the document, as well
as elements that mark up that text at the intra-paragraph
level. Runs of <a href="#phrasing-content">phrasing content</a> form <a href="#paragraph" title="paragraph">paragraphs</a>.</p><ul class="brief category-list"><li><code><a href="text-level-semantics.html#the-a-element">a</a></code> (if it contains only <a href="#phrasing-content">phrasing content</a>)</li>
<li><code><a href="text-level-semantics.html#the-abbr-element">abbr</a></code></li>
<li><code><a href="the-map-element.html#the-area-element">area</a></code> (if it is a descendant of a <code><a href="the-map-element.html#the-map-element">map</a></code> element)</li>
<li><code><a href="video.html#audio">audio</a></code></li>
<li><code><a href="text-level-semantics.html#the-b-element">b</a></code></li>
<li><code><a href="text-level-semantics.html#the-bdo-element">bdo</a></code></li>
<li><code><a href="grouping-content.html#the-br-element">br</a></code></li>
<li><code><a href="the-button-element.html#the-button-element">button</a></code></li>
<li><code><a href="the-canvas-element.html#the-canvas-element">canvas</a></code></li>
<li><code><a href="text-level-semantics.html#the-cite-element">cite</a></code></li>
<li><code><a href="text-level-semantics.html#the-code-element">code</a></code></li>
<li><code><a href="interactive-elements.html#the-command">command</a></code></li>
<li><code><a href="the-button-element.html#the-datalist-element">datalist</a></code></li>
<li><code><a href="edits.html#the-del-element">del</a></code> (if it contains only <a href="#phrasing-content">phrasing content</a>)</li>
<li><code><a href="text-level-semantics.html#the-dfn-element">dfn</a></code></li>
<li><code><a href="text-level-semantics.html#the-em-element">em</a></code></li>
<li><code><a href="the-iframe-element.html#the-embed-element">embed</a></code></li>
<li><code><a href="text-level-semantics.html#the-i-element">i</a></code></li>
<li><code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code></li>
<li><code><a href="embedded-content-1.html#the-img-element">img</a></code></li>
<li><code><a href="the-input-element.html#the-input-element">input</a></code></li>
<li><code><a href="edits.html#the-ins-element">ins</a></code> (if it contains only <a href="#phrasing-content">phrasing content</a>)</li>
<li><code><a href="text-level-semantics.html#the-kbd-element">kbd</a></code></li>
<li><code><a href="the-button-element.html#the-keygen-element">keygen</a></code></li>
<li><code><a href="forms.html#the-label-element">label</a></code></li>
<li><code><a href="semantics.html#the-link-element">link</a></code> (if the <code title="attr-itemprop"><a href="microdata.html#names:-the-itemprop-attribute">itemprop</a></code> attribute is present)</li>
<li><code><a href="the-map-element.html#the-map-element">map</a></code> (if it contains only <a href="#phrasing-content">phrasing content</a>)</li>
<li><code><a href="text-level-semantics.html#the-mark-element">mark</a></code></li>
<li><code><a href="the-map-element.html#math">math</a></code></li>
<li><code><a href="semantics.html#meta">meta</a></code> (if the <code title="attr-itemprop"><a href="microdata.html#names:-the-itemprop-attribute">itemprop</a></code> attribute is present)</li>
<li><code><a href="text-level-semantics.html#the-meter-element">meter</a></code></li>
<li><code><a href="scripting-1.html#the-noscript-element">noscript</a></code></li>
<li><code><a href="the-iframe-element.html#the-object-element">object</a></code></li>
<li><code><a href="the-button-element.html#the-output-element">output</a></code></li>
<li><code><a href="text-level-semantics.html#the-progress-element">progress</a></code></li>
<li><code><a href="text-level-semantics.html#the-q-element">q</a></code></li>
<li><code><a href="text-level-semantics.html#the-ruby-element">ruby</a></code></li>
<li><code><a href="text-level-semantics.html#the-samp-element">samp</a></code></li>
<li><code><a href="scripting-1.html#script">script</a></code></li>
<li><code><a href="the-button-element.html#the-select-element">select</a></code></li>
<li><code><a href="text-level-semantics.html#the-small-element">small</a></code></li>
<li><code><a href="text-level-semantics.html#the-span-element">span</a></code></li>
<li><code><a href="text-level-semantics.html#the-strong-element">strong</a></code></li>
<li><code><a href="text-level-semantics.html#the-sub-and-sup-elements">sub</a></code></li>
<li><code><a href="text-level-semantics.html#the-sub-and-sup-elements">sup</a></code></li>
<li><code><a href="the-map-element.html#svg">svg</a></code></li>
<li><code><a href="the-button-element.html#the-textarea-element">textarea</a></code></li>
<li><code><a href="text-level-semantics.html#the-time-element">time</a></code></li>
<li><code><a href="text-level-semantics.html#the-var-element">var</a></code></li>
<li><code><a href="video.html#video">video</a></code></li>
<li><a href="#text-content" title="text content">Text</a></li>
</ul><p>As a general rule, elements whose content model allows any
<a href="#phrasing-content">phrasing content</a> should have either at least one
descendant <a href="infrastructure.html#text-node">text node</a> that is not <a href="#inter-element-whitespace">inter-element
whitespace</a>, or at least one descendant element node that is
<a href="#embedded-content">embedded content</a>. For the purposes of this requirement,
nodes that are descendants of <code><a href="edits.html#the-del-element">del</a></code> elements must not be
counted as contributing to the ancestors of the <code><a href="edits.html#the-del-element">del</a></code>
element.</p><p class="note">Most elements that are categorized as phrasing
content can only contain elements that are themselves categorized as
phrasing content, not any flow content.</p><p><dfn id="text-content" title="text content">Text</dfn>, in the context of content
models, means <a href="infrastructure.html#text-node" title="text node">text nodes</a>. <a href="#text-content" title="text content">Text</a> is sometimes used as a content
model on its own, but is also <a href="#phrasing-content">phrasing content</a>, and can
be <a href="#inter-element-whitespace">inter-element whitespace</a> (if the <a href="infrastructure.html#text-node" title="text
node">text nodes</a> are empty or contain just <a href="#space-character" title="space
character">space characters</a>).</p><h6 id="embedded-content-0"><span class="secno">3.2.5.1.6 </span>Embedded content</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><dfn id="embedded-content">Embedded content</dfn> is content that imports another
resource into the document, or content from another vocabulary that
is inserted into the document.</p><ul class="brief category-list"><li><code><a href="video.html#audio">audio</a></code></li>
<li><code><a href="the-canvas-element.html#the-canvas-element">canvas</a></code></li>
<li><code><a href="the-iframe-element.html#the-embed-element">embed</a></code></li>
<li><code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code></li>
<li><code><a href="embedded-content-1.html#the-img-element">img</a></code></li>
<li><code><a href="the-map-element.html#math">math</a></code></li>
<li><code><a href="the-iframe-element.html#the-object-element">object</a></code></li>
<li><code><a href="the-map-element.html#svg">svg</a></code></li>
<li><code><a href="video.html#video">video</a></code></li>
</ul><p>Elements that are from namespaces other than the <a href="#html-namespace-0">HTML
namespace</a> and that convey content but not metadata, are
<a href="#embedded-content">embedded content</a> for the purposes of the content models
defined in this specification. (For example, MathML, or SVG.)</p><p>Some embedded content elements can have <dfn id="fallback-content">fallback
content</dfn>: content that is to be used when the external resource
cannot be used (e.g. because it is of an unsupported format). The
element definitions state what the fallback is, if any.</p><h6 id="interactive-content-0"><span class="secno">3.2.5.1.7 </span>Interactive content</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!--
TESTS:
http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A%3Cp%20tabindex%3D1%3Etest%20%3Ca%20href%3D%22%22%3E%20%3Cem%3Etest%3C/em%3E%20%3C/a%3E%0A%3Cscript%3E%0A%20function%20test%20%28e%29%20%7B%20w%28e.type%20+%20%27%20on%20%27%20+%20e.target.tagName%20+%20%27%20through%20%27%20+%20e.currentTarget.tagName%29%3B%20%7D%0A%20document.getElementsByTagName%28%27a%27%29%5B0%5D.addEventListener%28%27click%27%2C%20test%2C%20false%29%3B%0A%20document.getElementsByTagName%28%27a%27%29%5B0%5D.addEventListener%28%27DOMActivate%27%2C%20test%2C%20false%29%3B%0A%20document.getElementsByTagName%28%27p%27%29%5B0%5D.addEventListener%28%27click%27%2C%20test%2C%20false%29%3B%0A%20document.getElementsByTagName%28%27p%27%29%5B0%5D.addEventListener%28%27DOMActivate%27%2C%20test%2C%20false%29%3B%0A%3C/script%3E%0A
http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0A%3Ca%20href%3Dhttp%3A//google.com/%20target%3Da%3EA%3C/a%3E%3Ca%20href%3Dhttp%3A//yahoo.com/%20target%3Db%3EB%3C/a%3E%3Cbr%3E%0A%3Ciframe%20name%3Da%3E%3C/iframe%3E%3Ciframe%20name%3Db%3E%3C/iframe%3E%0A%3Cscript%3E%0A%20var%20a%20%3D%20document.getElementsByTagName%28%27a%27%29%5B0%5D%3B%0A%20var%20b%20%3D%20document.getElementsByTagName%28%27a%27%29%5B1%5D%3B%0A%20a.appendChild%28b%29%3B%0A%3C/script%3E
http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0A%3Cform%20action%3D%22http%3A//google.com/%22%20onsubmit%3D%22w%28%27onsubmit%27%29%22%3E%3Cem%3EA%3C/em%3E%3C/form%3E%0A%3Cscript%3E%0Adocument.getElementsByTagName%28%27form%27%29%5B0%5D.attachEvent%28%27onsubmit%27%2C%20function%20%28%29%20%7B%20w%28%27submit%20fired%27%29%20%7D%29%3B%0Adocument.getElementsByTagName%28%27form%27%29%5B0%5D.fireEvent%28%27onsubmit%27%29%3B%0A%3C/script%3E
http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0A%3Cform%20action%3D%22http%3A//google.com/%22%3EX%3C/form%3E%0A%3Cscript%3E%0Avar%20evt%20%3D%20document.createEvent%28%22Events%22%29%3B%0Aevt.initEvent%28%22submit%22%2C%20true%2C%20true%29%3B%0Adocument.getElementsByTagName%28%27form%27%29%5B0%5D.dispatchEvent%28evt%29%3B%0A%3C/script%3E
--><p><dfn id="interactive-content">Interactive content</dfn> is content that is specifically
intended for user interaction.</p><ul class="brief category-list"><li><code><a href="text-level-semantics.html#the-a-element">a</a></code></li>
<li><code><a href="video.html#audio">audio</a></code> (if the <code title="attr-media-controls"><a href="video.html#attr-media-controls">controls</a></code> attribute is present)</li>
<li><code><a href="the-button-element.html#the-button-element">button</a></code></li>
<!-- v2DATAGRID <li><code>datagrid</code></li> -->
<li><code><a href="interactive-elements.html#the-details-element">details</a></code></li>
<li><code><a href="the-iframe-element.html#the-embed-element">embed</a></code></li>
<li><code><a href="the-iframe-element.html#the-iframe-element">iframe</a></code></li>
<li><code><a href="embedded-content-1.html#the-img-element">img</a></code> (if the <code title="attr-hyperlink-usemap"><a href="the-map-element.html#attr-hyperlink-usemap">usemap</a></code> attribute is present)</li>
<li><code><a href="the-input-element.html#the-input-element">input</a></code> (if the <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is <em>not</em> in the <a href="states-of-the-type-attribute.html#hidden-state" title="attr-input-type-hidden">Hidden</a> state)</li>
<li><code><a href="the-button-element.html#the-keygen-element">keygen</a></code></li>
<li><code><a href="forms.html#the-label-element">label</a></code></li>
<li><code><a href="interactive-elements.html#menus">menu</a></code> (if the <code title="attr-menu-type"><a href="interactive-elements.html#attr-menu-type">type</a></code> attribute is in the <a href="interactive-elements.html#toolbar-state" title="toolbar state">toolbar</a> state)</li>
<li><code><a href="the-iframe-element.html#the-object-element">object</a></code> (if the <code title="attr-hyperlink-usemap"><a href="the-map-element.html#attr-hyperlink-usemap">usemap</a></code> attribute is present)<!-- see also comment in <object> section --></li>
<li><code><a href="the-button-element.html#the-select-element">select</a></code></li>
<li><code><a href="the-button-element.html#the-textarea-element">textarea</a></code></li>
<li><code><a href="video.html#video">video</a></code> (if the <code title="attr-media-controls"><a href="video.html#attr-media-controls">controls</a></code> attribute is present)</li>
</ul><p>Certain elements in HTML have an <a href="#activation-behavior">activation
behavior</a>, which means that the user can activate them. This
triggers a sequence of events dependent on the activation mechanism,
and normally culminating in a <code title="event-click">click</code>
event followed by a <code title="event-DOMActivate">DOMActivate</code> event.</p><h5 id="transparent-content-models"><span class="secno">3.2.5.2 </span>Transparent content models</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Some elements are described as <dfn id="transparent">transparent</dfn>; they have
"transparent" in the description of their content model.</p><p>When a content model includes a part that is "transparent", those
parts must not contain content that would not be conformant if all
transparent elements in the tree were replaced, in their parent
element, by the children in the "transparent" part of their content
model, retaining order.</p><div class="example">
<p>Consider the following markup fragment:</p>
<pre><p>Hello <a href="world.html"><em>wonderful</em> world</a>!</p></pre>
<p>Its DOM looks like the following:</p>
<ul class="domTree"><li class="t1"><code><a href="grouping-content.html#the-p-element">p</a></code><ul><li class="t3"><code>#text</code>: <span title="">Hello </span></li><li class="t1"><code><a href="text-level-semantics.html#the-a-element">a</a></code> <span class="t2" title=""><code class="attribute name">href</code>="<code class="attribute value">world.html</code>"</span><ul><li class="t1"><code><a href="text-level-semantics.html#the-em-element">em</a></code><ul><li class="t3"><code>#text</code>: <span title="">wonderful</span></li></ul></li><li class="t3"><code>#text</code>: <span title=""> world</span></li></ul></li><li class="t3"><code>#text</code>: <span title="">!</span></li></ul></li></ul><p>The content model of the <code><a href="text-level-semantics.html#the-a-element">a</a></code> element is
<a href="#transparent">transparent</a>. To see if its contents are conforming,
therefore, the element is replaced by its contents:</p>
<ul class="domTree"><li class="t1"><code><a href="grouping-content.html#the-p-element">p</a></code><ul><li class="t3"><code>#text</code>: <span title="">Hello </span></li><li class="t1"><code><a href="text-level-semantics.html#the-em-element">em</a></code><ul><li class="t3"><code>#text</code>: <span title="">wonderful</span></li></ul></li><li class="t3"><code>#text</code>: <span title=""> world</span></li><li class="t3"><code>#text</code>: <span title="">!</span></li></ul></li></ul><p>Since that is conforming, the contents of the <code><a href="text-level-semantics.html#the-a-element">a</a></code> are
conforming in the original fragment.</p>
</div><p>When a transparent element has no parent, then the part of its
content model that is "transparent" must instead be treated as
accepting any <a href="#flow-content">flow content</a>.</p><h5 id="paragraphs"><span class="secno">3.2.5.3 </span>Paragraphs</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p class="note">The term <a href="#paragraph">paragraph</a> as defined in this
section is distinct from (though related to) the <code><a href="grouping-content.html#the-p-element">p</a></code>
element defined later. The <a href="#paragraph">paragraph</a> concept defined
here is used to describe how to interpret documents.</p><p>A <dfn id="paragraph">paragraph</dfn> is typically a run of <a href="#phrasing-content">phrasing
content</a> that forms a block of text with one or more sentences
that discuss a particular topic, as in typography, but can also be
used for more general thematic grouping. For instance, an address is
also a paragraph, as is a part of a form, a byline, or a stanza in a
poem.</p><div class="example">
<p>In the following example, there are two paragraphs in a
section. There is also a heading, which contains phrasing content
that is not a paragraph. Note how the comments and
<a href="#inter-element-whitespace">inter-element whitespace</a> do not form paragraphs.</p>
<pre><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></pre>
</div><p>Paragraphs in <a href="#flow-content">flow content</a> are defined relative to
what the document looks like without the <code><a href="text-level-semantics.html#the-a-element">a</a></code>,
<code><a href="edits.html#the-ins-element">ins</a></code>, <code><a href="edits.html#the-del-element">del</a></code>, and <code><a href="the-map-element.html#the-map-element">map</a></code> elements
complicating matters, since those elements, with their hybrid
content models, can straddle paragraph boundaries, as shown in the
first two examples below.</p><p class="note">Generally, having elements straddle paragraph
boundaries is best avoided. Maintaining such markup can be
difficult.</p><div class="example">
<p>The following example takes the markup from the earlier example
and puts <code><a href="edits.html#the-ins-element">ins</a></code> and <code><a href="edits.html#the-del-element">del</a></code> elements around some
of the markup to show that the text was changed (though in this
case, the changes admittedly don't make much sense). Notice how
this example has exactly the same paragraphs as the previous one,
despite the <code><a href="edits.html#the-ins-element">ins</a></code> and <code><a href="edits.html#the-del-element">del</a></code> elements —
the <code><a href="edits.html#the-ins-element">ins</a></code> element straddles the heading and the first
paragraph, and the <code><a href="edits.html#the-del-element">del</a></code> element straddles the boundary
between the two paragraphs.</p>
<pre><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></pre>
</div><p>A <a href="#paragraph">paragraph</a> is also formed explicitly by
<code><a href="grouping-content.html#the-p-element">p</a></code> elements.</p><p class="note">The <code><a href="grouping-content.html#the-p-element">p</a></code> element can be used to wrap
individual paragraphs when there would otherwise not be any content
other than phrasing content to separate the paragraphs from each
other.</p><div class="example">
<p>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.</p>
<pre><aside>
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.
</aside></pre>
<p>Here is another way of marking this up, this time showing the
paragraphs explicitly, and splitting the one link element into
three:</p>
<pre><aside>
<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>
</aside></pre>
</div><div class="example">
<!-- I don't know if there's a better way to deal with this, but if
there is, let me know... -->
<p>It is possible for paragraphs to overlap when using certain
elements that define fallback content. For example, in the
following section:</p>
<pre><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></pre>
<p>There are five paragraphs:</p>
<ol class="brief"><li>The paragraph that says "You can play with my cat
simulator. <i title="">object</i> I'm quite proud of it.", where
<i title="">object</i> is the <code><a href="the-iframe-element.html#the-object-element">object</a></code> element.</li>
<li>The paragraph that says "To see the cat simulator, use one of
the following links:".</li>
<li>The paragraph that says "Download simulator file".</li>
<li>The paragraph that says "Use online simulator".</li>
<li>The paragraph that says "Alternatively, upgrade to the Mellblom Browser.".</li>
</ol><p>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.</p>
<p>To avoid this confusion, explicit <code><a href="grouping-content.html#the-p-element">p</a></code> elements can be
used.</p>
</div><h4 id="annotations-for-assistive-technology-products-aria"><span class="secno">3.2.6 </span><dfn>Annotations for assistive technology products</dfn> (ARIA)</h4><p>Authors may use the ARIA <code title="attr-aria-role">role</code>
and <code title="attr-aria-*">aria-*</code> attributes on <a href="infrastructure.html#html-elements">HTML
elements</a>, in accordance with the requirements described in
the ARIA specifications, except where these conflict with the
<span>strong native semantics</span> 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. <a href="references.html#refsARIA">[ARIA]</a></p><p>The following table defines the <span>strong native
semantics</span> that apply to <a href="infrastructure.html#html-elements">HTML
elements</a>. 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. Authors must not set the ARIA <code title="attr-aria-role">role</code> and <code title="attr-aria-*">aria-*</code> attributes in a manner that
conflicts with the semantics described in the following table. </p><table><thead><tr><th>Language feature
</th><th>Strong native semantics and implied ARIA semantics</th></tr></thead><tbody><tr><td><code><a href="text-level-semantics.html#the-a-element">a</a></code> element that represents a <a href="links.html#hyperlink">hyperlink</a>
</td><td><code title="attr-aria-role-link">link</code> role
</td></tr><tr><td><code><a href="sections.html#the-address-element">address</a></code> element
</td><td><code title="attr-aria-role-contentinfo">contentinfo</code> role
</td></tr><tr><td><code><a href="the-map-element.html#the-area-element">area</a></code> element that represents a <a href="links.html#hyperlink">hyperlink</a>
</td><td><code title="attr-aria-role-link">link</code> role
</td></tr><tr><td><code><a href="the-button-element.html#the-button-element">button</a></code> element
</td><td><code title="attr-aria-role-button">button</code> role
</td></tr><tr><td><code><a href="the-button-element.html#the-datalist-element">datalist</a></code> element
</td><td><code title="attr-aria-role-listbox">listbox</code> role, with the <code title="attr-aria-multiselectable">aria-multiselectable</code> property set to "false"
</td></tr><tr><td><code><a href="sections.html#the-footer-element">footer</a></code> element
</td><td><code title="attr-aria-role-contentinfo">contentinfo</code> role
</td></tr><tr><td><code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code> element that does not have an <code><a href="sections.html#the-hgroup-element">hgroup</a></code> ancestor
</td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="#outline-depth">outline depth</a>
</td></tr><tr><td><code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code> element that does not have an <code><a href="sections.html#the-hgroup-element">hgroup</a></code> ancestor
</td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="#outline-depth">outline depth</a>
</td></tr><tr><td><code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h3</a></code> element that does not have an <code><a href="sections.html#the-hgroup-element">hgroup</a></code> ancestor
</td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="#outline-depth">outline depth</a>
</td></tr><tr><td><code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h4</a></code> element that does not have an <code><a href="sections.html#the-hgroup-element">hgroup</a></code> ancestor
</td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="#outline-depth">outline depth</a>
</td></tr><tr><td><code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h5</a></code> element that does not have an <code><a href="sections.html#the-hgroup-element">hgroup</a></code> ancestor
</td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="#outline-depth">outline depth</a>
</td></tr><tr><td><code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code> element that does not have an <code><a href="sections.html#the-hgroup-element">hgroup</a></code> ancestor
</td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="#outline-depth">outline depth</a>
</td></tr><tr><td><code><a href="sections.html#the-hgroup-element">hgroup</a></code> element
</td><td><code title="attr-aria-role-heading">heading</code> role, with the <code title="attr-aria-level">aria-level</code> property set to the element's <a href="#outline-depth">outline depth</a>
</td></tr><tr><td><code><a href="grouping-content.html#the-hr-element">hr</a></code> element
</td><td><code title="attr-aria-role-separator">separator</code> role
</td></tr><tr><td><code><a href="embedded-content-1.html#the-img-element">img</a></code> element whose <code title="attr-img-alt"><a href="embedded-content-1.html#attr-img-alt">alt</a></code> attribute's value is empty
</td><td><code title="attr-aria-role-presentation">presentation</code> role
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="number-state.html#button-state" title="attr-input-type-button">Button</a> state
</td><td><code title="attr-aria-role-button">button</code> role
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="number-state.html#checkbox-state" title="attr-input-type-checkbox">Checkbox</a> state
</td><td><code title="attr-aria-role-checkbox">checkbox</code> role, with the <code title="attr-aria-checked">aria-checked</code> state set to "mixed" if the element's <code title="dom-input-indeterminate"><a href="#dom-input-indeterminate">indeterminate</a></code> IDL attribute is true, or "true" if the element's <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a> is true, or "false" otherwise
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="number-state.html#color-state" title="attr-input-type-color">Color</a> state
</td><td>No role
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#date-state" title="attr-input-type-date">Date</a> state
</td><td>No role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#date-and-time-state" title="attr-input-type-datetime">Date and Time</a> state
</td><td>No role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#local-date-and-time-state" title="attr-input-type-datetime-local">Local Date and Time</a> state
</td><td>No role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#e-mail-state" title="attr-input-type-email">E-mail</a> state with no <a href="#concept-input-list" title="concept-input-list">suggestions source element</a>
</td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="number-state.html#file-upload-state" title="attr-input-type-file">File Upload</a> state
</td><td><code title="attr-aria-role-button">button</code> role
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#hidden-state" title="attr-input-type-hidden">Hidden</a> state
</td><td>No role
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="number-state.html#image-button-state" title="attr-input-type-image">Image Button</a> state
</td><td><code title="attr-aria-role-button">button</code> role
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#month-state" title="attr-input-type-month">Month</a> state
</td><td>No role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="number-state.html#number-state" title="attr-input-type-number">Number</a> state
</td><td><code title="attr-aria-role-spinbutton">spinbutton</code> role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute, the <code title="attr-aria-valuemax">aria-valuemax</code> property set to the element's <a href="#concept-input-max" title="concept-input-max">maximum</a>, the <code title="attr-aria-valuemin">aria-valuemin</code> property set to the element's <a href="#concept-input-min" title="concept-input-min">minimum</a>, and, if the result of applying the <a href="#rules-for-parsing-floating-point-number-values">rules for parsing floating point number values</a> to the element's <a href="#concept-fe-value" title="concept-fe-value">value</a> is a number, with the <code title="attr-aria-valuenow">aria-valuenow</code> property set to that number
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#password-state" title="attr-input-type-password">Password</a> state
</td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="number-state.html#radio-button-state" title="attr-input-type-radio">Radio Button</a> state
</td><td><code title="attr-aria-role-radio">radio</code> role, with the <code title="attr-aria-checked">aria-checked</code> state set to "true" if the element's <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a> is true, or "false" otherwise
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="number-state.html#range-state" title="attr-input-type-range">Range</a> state
</td><td><code title="attr-aria-role-slider">slider</code> role, with the <code title="attr-aria-valuemax">aria-valuemax</code> property set to the element's <a href="#concept-input-max" title="concept-input-max">maximum</a>, the <code title="attr-aria-valuemin">aria-valuemin</code> property set to the element's <a href="#concept-input-min" title="concept-input-min">minimum</a>, and the <code title="attr-aria-valuenow">aria-valuenow</code> property set to the result of applying the <a href="#rules-for-parsing-floating-point-number-values">rules for parsing floating point number values</a> to the element's <a href="#concept-fe-value" title="concept-fe-value">value</a>, if that that results in a number, or the <a href="number-state.html#concept-input-value-default-range" title="concept-input-value-default-range">default value</a> otherwise
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="number-state.html#reset-button-state" title="attr-input-type-reset">Reset Button</a> state
</td><td><code title="attr-aria-role-button">button</code> role
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#text-state-and-search-state" title="attr-input-type-search">Search</a> state with no <a href="#concept-input-list" title="concept-input-list">suggestions source element</a>
</td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="number-state.html#submit-button-state" title="attr-input-type-submit">Submit Button</a> state
</td><td><code title="attr-aria-role-button">button</code> role
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#telephone-state" title="attr-input-type-tel">Telephone</a> state with no <a href="#concept-input-list" title="concept-input-list">suggestions source element</a>
</td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#text-state-and-search-state" title="attr-input-type-text">Text</a> state with no <a href="#concept-input-list" title="concept-input-list">suggestions source element</a>
</td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#text-state-and-search-state" title="attr-input-type-text">Text</a>, <a href="states-of-the-type-attribute.html#text-state-and-search-state" title="attr-input-type-search">Search</a>, <a href="states-of-the-type-attribute.html#telephone-state" title="attr-input-type-tel">Telephone</a>, <a href="states-of-the-type-attribute.html#url-state" title="attr-input-type-url">URL</a>, or <a href="states-of-the-type-attribute.html#e-mail-state" title="attr-input-type-email">E-mail</a> states with a <a href="#concept-input-list" title="concept-input-list">suggestions source element</a>
</td><td><code title="attr-aria-role-combobox">combobox</code> role, with the <code title="attr-aria-owns">aria-owns</code> property set to the same value as the <code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code> attribute, and the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#time-state" title="attr-input-type-time">Time</a> state
</td><td>No role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#url-state" title="attr-input-type-url">URL</a> state with no <a href="#concept-input-list" title="concept-input-list">suggestions source element</a>
</td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute
</td></tr><tr><td><code><a href="the-input-element.html#the-input-element">input</a></code> element with a <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute in the <a href="states-of-the-type-attribute.html#week-state" title="attr-input-type-week">Week</a> state
</td><td>No role, with the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> attribute
</td></tr><tr><td><code><a href="semantics.html#the-link-element">link</a></code> element that represents a <a href="links.html#hyperlink">hyperlink</a>
</td><td><code title="attr-aria-role-link">link</code> role
</td></tr><tr><td><code><a href="interactive-elements.html#menus">menu</a></code> element with a <code title="attr-menu-type"><a href="interactive-elements.html#attr-menu-type">type</a></code> attribute in the <a href="interactive-elements.html#context-menu-state" title="context menu state">context menu</a> state
</td><td>No role
</td></tr><tr><td><code><a href="interactive-elements.html#menus">menu</a></code> element with a <code title="attr-menu-type"><a href="interactive-elements.html#attr-menu-type">type</a></code> attribute in the <a href="interactive-elements.html#list-state" title="list state">list</a> state
</td><td><code title="attr-aria-role-menu">menu</code> role
</td></tr><tr><td><code><a href="interactive-elements.html#menus">menu</a></code> element with a <code title="attr-menu-type"><a href="interactive-elements.html#attr-menu-type">type</a></code> attribute in the <a href="interactive-elements.html#toolbar-state" title="toolbar state">toolbar</a> state
</td><td><code title="attr-aria-role-toolbar">toolbar</code> role
</td></tr><tr><td><code><a href="sections.html#the-nav-element">nav</a></code> element
</td><td><code title="attr-aria-role-navigation">navigation</code> role
</td></tr><tr><td><code><a href="the-button-element.html#the-option-element">option</a></code> element that is in a <a href="the-button-element.html#concept-select-option-list" title="concept-select-option-list">list of options</a> or that represents a suggestion in a <code><a href="the-button-element.html#the-datalist-element">datalist</a></code> element
</td><td><code title="attr-aria-role-option">option</code> role, with the <code title="attr-aria-selected">aria-selected</code> state set to "true" if the element's <a href="#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> is true, or "false" otherwise.
</td></tr><tr><td><code><a href="text-level-semantics.html#the-progress-element">progress</a></code> element
</td><td><code title="attr-aria-role-progressbar">progressbar</code> role, with, if the progress bar is determinate, the <code title="attr-aria-valuemax">aria-valuemax</code> property set to the maximum value of the progress bar, the <code title="attr-aria-valuemin">aria-valuemin</code> property set to zero, and the <code title="attr-aria-valuenow">aria-valuenow</code> property set to the current value of the progress bar
</td></tr><tr><td><code><a href="the-button-element.html#the-select-element">select</a></code> element with a <code title="attr-select-multiple"><a href="the-button-element.html#attr-select-multiple">multiple</a></code> attribute
</td><td><code title="attr-aria-role-listbox">listbox</code> role, with the <code title="attr-aria-multiselectable">aria-multiselectable</code> property set to "true"
</td></tr><tr><td><code><a href="the-button-element.html#the-select-element">select</a></code> element with no <code title="attr-select-multiple"><a href="the-button-element.html#attr-select-multiple">multiple</a></code> attribute
</td><td><code title="attr-aria-role-listbox">listbox</code> role, with the <code title="attr-aria-multiselectable">aria-multiselectable</code> property set to "false"
</td></tr><tr><td><code><a href="tabular-data.html#the-td-element">td</a></code> element
</td><td><code title="attr-aria-role-gridcell">gridcell</code> role, with the <code title="attr-aria-labelledby">aria-labelledby</code> property set to the value of the <code title="attr-tdth-headers"><a href="tabular-data.html#attr-tdth-headers">headers</a></code> attribute, if any
</td></tr><tr><td><code><a href="the-button-element.html#the-textarea-element">textarea</a></code> element
</td><td><code title="attr-aria-role-textbox">textbox</code> role, with the <code title="attr-aria-multiline">aria-multiline</code> property set to "true", and the <code title="title-aria-readonly">aria-readonly</code> state set to "true" if the element has a <code title="attr-textarea-readonly"><a href="the-button-element.html#attr-textarea-readonly">readonly</a></code> attribute
</td></tr><tr><td><code><a href="tabular-data.html#the-th-element">th</a></code> element that is neither a <a href="#column-header">column header</a> nor a <a href="#row-header">row header</a>
</td><td><code title="attr-aria-role-gridcell">gridcell</code> role, with the <code title="attr-aria-labelledby">aria-labelledby</code> property set to the value of the <code title="attr-tdth-headers"><a href="tabular-data.html#attr-tdth-headers">headers</a></code> attribute, if any
</td></tr><tr><td><code><a href="tabular-data.html#the-th-element">th</a></code> element that is a <a href="#column-header">column header</a>
</td><td><code title="attr-aria-role-columnheader">columnheader</code> role, with the <code title="attr-aria-labelledby">aria-labelledby</code> property set to the value of the <code title="attr-tdth-headers"><a href="tabular-data.html#attr-tdth-headers">headers</a></code> attribute, if any
</td></tr><tr><td><code><a href="tabular-data.html#the-th-element">th</a></code> element that is a <a href="#row-header">row header</a>
</td><td><code title="attr-aria-role-rowheader">rowheader</code> role, with the <code title="attr-aria-labelledby">aria-labelledby</code> property set to the value of the <code title="attr-tdth-headers"><a href="tabular-data.html#attr-tdth-headers">headers</a></code> attribute, if any
</td></tr><tr><td><code><a href="tabular-data.html#the-tr-element">tr</a></code> element
</td><td><code title="attr-aria-role-row">row</code> role
</td></tr><tr><td>An element that <a href="commands.html#concept-command" title="concept-command">defines a command</a>, whose <a href="commands.html#command-facet-type" title="command-facet-type">Type</a> facet is "checkbox", and that is a descendant of a <code><a href="interactive-elements.html#menus">menu</a></code> element whose <code title="attr-menu-type"><a href="interactive-elements.html#attr-menu-type">type</a></code> attribute in the <a href="interactive-elements.html#list-state" title="list state">list</a> state
</td><td><code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code> role, with the <code title="attr-aria-checked">aria-checked</code> state set to "true" if the command's <a href="commands.html#command-facet-checkedstate" title="command-facet-checkedstate">Checked State</a> facet is true, and "false" otherwise
</td></tr><tr><td>An element that <a href="commands.html#concept-command" title="concept-command">defines a command</a>, whose <a href="commands.html#command-facet-type" title="command-facet-type">Type</a> facet is "command", and that is a descendant of a <code><a href="interactive-elements.html#menus">menu</a></code> element whose <code title="attr-menu-type"><a href="interactive-elements.html#attr-menu-type">type</a></code> attribute in the <a href="interactive-elements.html#list-state" title="list state">list</a> state
</td><td><code title="attr-aria-role-menuitem">menuitem</code> role
</td></tr><tr><td>An element that <a href="commands.html#concept-command" title="concept-command">defines a command</a>, whose <a href="commands.html#command-facet-type" title="command-facet-type">Type</a> facet is "radio", and that is a descendant of a <code><a href="interactive-elements.html#menus">menu</a></code> element whose <code title="attr-menu-type"><a href="interactive-elements.html#attr-menu-type">type</a></code> attribute in the <a href="interactive-elements.html#list-state" title="list state">list</a> state
</td><td><code title="attr-aria-role-menuitemradio">menuitemradio</code> role, with the <code title="attr-aria-checked">aria-checked</code> state set to "true" if the command's <a href="commands.html#command-facet-checkedstate" title="command-facet-checkedstate">Checked State</a> facet is true, and "false" otherwise
</td></tr><tr><td>Elements that are <a href="association-of-controls-and-forms.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a>
</td><td>The <code title="title-aria-disabled">aria-disabled</code> state set to "true"
</td></tr><tr><td>Elements that are <a href="common-input-element-attributes.html#concept-input-required" title="concept-input-required">required</a>
</td><td>The <code title="title-aria-required">aria-required</code> state set to "true"
</td></tr></tbody></table><p>Some <a href="infrastructure.html#html-elements">HTML elements</a> have native semantics that can be
overridden. The following table lists these elements,
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 overriden, 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.</p><table><thead><tr><th>Language feature
</th><th>Default implied ARIA semantic
</th><th>Restrictions
</th></tr></thead><tbody><tr><td><code><a href="sections.html#the-article-element">article</a></code> element
</td><td><code title="attr-aria-role-article">article</code> role
</td><td>Role must be either <code title="attr-aria-role-article">article</code>, <code title="attr-aria-role-document">document</code>, <code title="attr-aria-role-application">application</code>, or <code title="attr-aria-role-main">main</code>
</td></tr><tr><td><code><a href="sections.html#the-aside-element">aside</a></code> element
</td><td><code title="attr-aria-role-note">note</code> role
</td><td>Role must be either <code title="attr-aria-role-note">note</code>, <code title="attr-aria-role-complementary">complementary</code>, or <code title="attr-aria-role-search">search</code>
</td></tr><tr><td><code><a href="sections.html#the-header-element">header</a></code> element
</td><td>No role
</td><td>If specified, role must be <code title="attr-aria-role-banner">banner</code>
</td></tr><tr><td><code><a href="grouping-content.html#the-li-element">li</a></code> element whose parent is an <code><a href="grouping-content.html#the-ol-element">ol</a></code> or <code><a href="grouping-content.html#the-ul-element">ul</a></code> element
</td><td><code title="attr-aria-role-listitem">listitem</code> role
</td><td>Role must be either <code title="attr-aria-role-listitem">listitem</code> or <code title="attr-aria-role-treeitem">treeitem</code>
</td></tr><tr><td><code><a href="grouping-content.html#the-ol-element">ol</a></code> element
</td><td><code title="attr-aria-role-list">list</code> role
</td><td>Role must be either <code title="attr-aria-role-list">list</code>, <code title="attr-aria-role-tree">tree</code>, or <code title="attr-aria-role-directory">directory</code>
</td></tr><tr><td><code><a href="the-button-element.html#the-output-element">output</a></code> element
</td><td><code title="attr-aria-role-status">status</code> role
</td><td>No restrictions
</td></tr><tr><td><code><a href="sections.html#the-section-element">section</a></code> element
</td><td><code title="attr-aria-role-region">region</code> role
</td><td>Role must be either <code title="attr-aria-role-region">region</code>, <code title="attr-aria-role-document">document</code>, <code title="attr-aria-role-application">application</code>, <code title="attr-aria-role-contentinfo">contentinfo</code>, <code title="attr-aria-role-main">main</code>, <code title="attr-aria-role-search">search</code>, <code title="attr-aria-role-alert">alert</code>, <code title="attr-aria-role-dialog">dialog</code>, <code title="attr-aria-role-alertdialog">alertdialog</code>, <code title="attr-aria-role-status">status</code>, or <code title="attr-aria-role-log">log</code>
</td></tr><tr><td><code><a href="tabular-data.html#the-table-element">table</a></code> element
</td><td><code title="attr-aria-role-grid">grid</code> role
</td><td>Role must be either <code title="attr-aria-role-grid">grid</code> or <code title="attr-aria-role-treegrid">treegrid</code>
</td></tr><tr><td><code><a href="grouping-content.html#the-ul-element">ul</a></code> element
</td><td><code title="attr-aria-role-list">list</code> role
</td><td>Role must be either <code title="attr-aria-role-list">list</code> or <code title="attr-aria-role-tree">tree</code>, or <code title="attr-aria-role-directory">directory</code>
</td></tr><tr><td><a href="dom.html#the-body-element">The body element</a>
</td><td><code title="attr-aria-role-document">document</code> role
</td><td>Role must be either <code title="attr-aria-role-document">document</code> or <code title="attr-aria-role-application">application</code>
</td></tr></tbody></table></body></html>
--- NEW FILE: states-of-the-type-attribute.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.10.5.1 States of the type attribute — HTML5</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"/><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
[...1018 lines suppressed...]
the selected airport.</p>
<pre><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></pre>
<p>If the application instead used the <code title="attr-input-type-datetime"><a href="#date-and-time-state">datetime</a></code> type, then the
user would have to work out the time-zone conversions himself,
which is clearly not a good user experience!</p>
</div></body></html>
--- NEW FILE: apis-in-html-documents.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>3.3 APIs in HTML documents — HTML5</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"/><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
p + * > li, dd li { margin: 1em 0; }
dt, dfn { font-weight: bold; font-style: normal; }
dt dfn { font-style: italic; }
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
pre em { font-weight: bolder; font-style: normal; }
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead { border-bottom: solid; }
table tbody th:first-child { border-left: solid; }
table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
img.extra { float: right; }
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
pre.css:first-line { color: #AAAA50; }
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; }
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
dl.domintro dd p { margin: 0.5em 0; }
dl.switch { padding-left: 2em; }
dl.switch > dt { text-indent: -1.5em; }
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
dl.triple { padding: 0 0 0 1em; }
dl.triple dt, dl.triple dd { margin: 0; display: inline }
dl.triple dt:after { content: ':'; }
dl.triple dd:after { content: '\A'; white-space: pre; }
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
a .diff-new { border-bottom: 1px blue solid; }
h2 { page-break-before: always; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; }
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
div.head p { margin: 0; }
div.head h1 { margin: 0; }
div.head .logo { float: right; margin: 0 1em; }
div.head .logo img { border: none } /* remove border from top image */
div.head dl { margin: 1em 0; }
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
body > .toc > li > * { margin-bottom: 0.5em; }
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
.toc, .toc li { list-style: none; }
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
.brief li { margin: 0; padding: 0; }
.brief li p { margin: 0; padding: 0; }
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
.category-list li { display: inline; }
.category-list li:not(:last-child)::after { content: ', '; }
.category-list li > span, .category-list li > a { text-transform: lowercase; }
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
.XXX > :first-child { margin-top: 0; }
p .XXX { line-height: 3em; }
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
.annotation :link, .annotation :visited { color: inherit; }
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
.annotation span { border: none ! important; }
.note { color: green; background: transparent; font-family: sans-serif; }
.warning { color: red; background: transparent; }
.note, .warning { font-weight: bolder; font-style: italic; }
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
.note p:first-child, .warning p:first-child { margin-top: 0; }
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
.warning:before { font-style: normal; }
p.note:before { content: 'Note: '; }
p.warning:before { content: '\26A0 Warning! '; }
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
h4 { position: relative; z-index: 3; }
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
.element {
background: #EEEEFF;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -1.15em;
height: 2em;
width: 0.9em;
background: #EEEEFF;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
td > .example:only-child { margin: 0 0 0 0.1em; }
.tall-and-narrow {
font-size: 0.6em;
column-width: 25em;
column-gap: 1em;
-moz-column-width: 25em;
-moz-column-gap: 1em;
-webkit-column-width: 25em;
-webkit-column-gap: 1em;
}
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
ul.domTree li li { list-style: none; }
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree span { font-style: italic; font-family: serif; }
ul.domTree .t1 code { color: purple; font-weight: bold; }
ul.domTree .t2 { font-style: normal; font-family: monospace; }
ul.domTree .t2 .name { color: black; font-weight: bold; }
ul.domTree .t2 .value { color: blue; font-weight: normal; }
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
ul.domTree .t7 code, .domTree .t8 code { color: green; }
ul.domTree .t10 code { color: teal; }
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
#configUI p label { display: block; }
#configUI #updateUI, #configUI .loginUI { text-align: center; }
#configUI input[type=button] { display: block; margin: auto; }
</style><style type="text/css">
.applies thead th > * { display: block; }
.applies thead code { display: block; }
.applies tbody th { whitespace: nowrap; }
.applies td { text-align: center; }
.applies .yes { background: yellow; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
#table-example-1 caption { padding-bottom: 0.5em; }
#table-example-1 thead, #table-example-1 tbody { border: none; }
#table-example-1 th, #table-example-1 td { border: solid thin; }
#table-example-1 th { font-weight: normal; }
#table-example-1 td { border-style: none solid; vertical-align: top; }
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
#table-example-1 tbody td:first-child::after { content: leader(". "); }
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
#table-example-1 tbody td:first-child + td { width: 10em; }
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
.apple-table-examples * { font-family: "Times", serif; }
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
.apple-table-examples td { text-align: right; vertical-align: top; }
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
.apple-table-examples sup { line-height: 0; }
</style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script>
function getCookie(name) {
var params = location.search.substr(1).split("&");
for (var index = 0; index < params.length; index++) {
if (params[index] == name)
return "1";
var data = params[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
var cookies = document.cookie.split("; ");
for (var index = 0; index < cookies.length; index++) {
var data = cookies[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
return null;
}
function load(script) {
var e = document.createElement('script');
e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
document.body.appendChild(e);
}
function init() {
if (location.search == '?slow-browser')
return;
var configUI = document.createElement('div');
configUI.id = 'configUI';
document.body.appendChild(configUI);
// load('reviewer.js'); // would need cross-site XHR
if (document.getElementById('head'))
load('toc.js');
load('styler.js');
// load('updater.js'); // would need cross-site XHR
load('dfn.js');
// load('status.js'); // would need cross-site XHR
if (getCookie('profile') == '1')
document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
fixBrokenLink();
}
</script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="content-models.html" title="3.2.5 Content models" rel="prev">
<link href="Overview.html#contents" title="Table of contents" rel="index">
<link href="semantics.html" title="4 The elements of HTML" rel="next">
</head><body onload="fixBrokenLink(); init()"><div class="head" id="head">
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
</div><div>
<a href="content-models.html">← 3.2.5 Content models</a> –
<a href="Overview.html#contents">Table of contents</a> –
<a href="semantics.html">4 The elements of HTML →</a>
<ol class="toc"><li><ol><li><a href="apis-in-html-documents.html#apis-in-html-documents"><span class="secno">3.3 </span>APIs in HTML documents</a></li><li><a href="apis-in-html-documents.html#dynamic-markup-insertion"><span class="secno">3.4 </span>Dynamic markup insertion</a>
<ol><li><a href="apis-in-html-documents.html#opening-the-input-stream"><span class="secno">3.4.1 </span>Opening the input stream</a></li><li><a href="apis-in-html-documents.html#closing-the-input-stream"><span class="secno">3.4.2 </span>Closing the input stream</a></li><li><a href="apis-in-html-documents.html#document.write"><span class="secno">3.4.3 </span><code title="dom-document-write">document.write()</code></a></li><li><a href="apis-in-html-documents.html#document.writeln"><span class="secno">3.4.4 </span><code title="dom-document-writeln">document.writeln()</code></a></li><li><a href="apis-in-html-documents.html#innerhtml"><span class="secno">3.4.5 </span><code title="dom-innerHTML">innerHTML</code></a></li><li><a href="apis-in-html-documents.html#outerhtml"><span class="secno">3.4.6 </span><code title="dom-outerHTML">outerHTML</code></a></li><li><a href="apis-in-html-documents.html#insertadjacenthtml"><span class="secno">3.4.7 </span><code title="dom-insertAdjacentHTML">insertAdjacentHTML()</cod></a></li></ol></li></ol></li></ol></div>
<h3 id="apis-in-html-documents"><span class="secno">3.3 </span>APIs in HTML documents</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>For <a href="dom.html#html-documents">HTML documents</a>, and for <a href="infrastructure.html#html-elements">HTML
elements</a> in <a href="dom.html#html-documents">HTML documents</a>, certain APIs defined
in DOM Core become case-insensitive or case-changing, as sometimes
defined in DOM Core, and as summarized below. <a href="references.html#refsDOMCORE">[DOMCORE]</a></p><p>This does not apply to <a href="dom.html#xml-documents">XML documents</a> or to elements
that are not in the <a href="#html-namespace-0">HTML namespace</a> despite being in
<a href="dom.html#html-documents">HTML documents</a>.</p><dl><dt><code title="">Element.tagName</code> and <code title="">Node.nodeName</code></dt>
<dd>
<p>These attributes must<a href="#converted-to-ascii-uppercase">converted to ASCII uppercase</a>, regardless of the case
with which they were created.</p>
</dd>
<dt><code title="">Document.createElement()</code></dt>
<dd>
<p>The canonical form of HTML markup is all-lowercase; thus, this
method will <a href="#converted-to-ascii-lowercase" title="converted to ASCII lowercase">lowercase</a>
the argument before creating the requisite element. .</p>
<p class="note">This doesn't apply to <code title="">Document.createElementNS()</code>. Thus, it is possible,
by passing this last method a tag name in the wrong case, to
create an element that claims to have the tag name of an element
defined in this specification, but doesn't support its interfaces,
because it really has another tag name not accessible from the DOM
APIs.</p>
</dd>
<dt><code title="">Element.setAttribute()</code></dt>
<dt><code title="">Element.setAttributeNode()</code></dt>
<dd>
<p>Attribute names are <a href="#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.</p>
<p class="note">This doesn't apply to <code title="">Document.setAttributeNS()</code> and <code title="">Document.setAttributeNodeNS()</code>.</p>
</dd>
<dt><code title="">Element.getAttribute()</code></dt>
<dt><code title="">Element.getAttributeNode()</code></dt>
<dd>
<p>Attribute names are <a href="#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.</p>
<p class="note">This doesn't apply to <code title="">Document.getAttributeNS()</code> and <code title="">Document.getAttributeNodeNS()</code>.</p>
</dd>
<dt><code title="">Document.getElementsByTagName()</code></dt>
<dt><code title="">Element.getElementsByTagName()</code></dt>
<dd>
<p>HTML elements match by lower-casing the argument before
comparison, elements from other namespaces are treated as in XML
(case-sensitively).</p>
<p class="note">Thus, in an <a href="dom.html#html-documents" title="HTML documents">HTML
document</a> with nodes in multiple namespaces, these methods
will effectively be both case-sensitive and case-insensitive at
the same time.</p>
</dd>
</dl><h3 id="dynamic-markup-insertion"><span class="secno">3.4 </span><dfn>Dynamic markup insertion</dfn></h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p class="note">APIs for dynamically inserting markup into the
document interact with the parser, and thus their behavior varies
depending on whether they are used with <a href="dom.html#html-documents">HTML documents</a>
(and the <a href="#html-parser">HTML parser</a>) or XHTML in <a href="dom.html#xml-documents">XML
documents</a> (and the <a href="#xml-parser">XML parser</a>).</p><h4 id="opening-the-input-stream"><span class="secno">3.4.1 </span>Opening the input stream</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="dom-document-open" title="dom-document-open"><code>open()</code></dfn>
method comes in several variants with different numbers of
arguments.</p><dl class="domintro"><dt><var title="">document</var> = <var title="">document</var> . <code title="dom-document-open"><a href="#dom-document-open">open</a></code>( [ <var title="">type</var> [, <var title="">replace</var> ] ] )</dt>
<dd>
<p>Causes the <code>Document</code> to be replaced in-place, as if
it was a new <code>Document</code> object, but reusing the
previous object, which is then returned.</p>
<p>If the <var title="">type</var> argument is omitted or has the
value "<code><a href="iana.html#text-html">text/html</a></code>", then the resulting
<code>Document</code> has an HTML parser associated with it, which
can be given data to parse using <code title="dom-document-write"><a href="#dom-document-write">document.write()</a></code>. Otherwise, all
content passed to <code title="dom-document-write"><a href="#dom-document-write">document.write()</a></code> will be parsed
as plain text.</p>
<p>If the <var title="">replace</var> argument is present and has
the value "<code title="">replace</code>", the existing entries in
the session history for the <code>Document</code> object are
removed.</p>
<p>The method has no effect if the <code>Document</code> is still
being parsed.</p>
<p>Throws an <code><a href="urls.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception if the
<code>Document</code> is an <a href="dom.html#xml-documents" title="XML documents">XML
document</a>.</p>
</dd>
<dt><var title="">window</var> = <var title="">document</var> . <code title="dom-document-open"><a href="#dom-document-open">open</a></code>( <var title="">url</var>, <var title="">name</var>, <var title="">features</var> [, <var title="">replace</var> ] )</dt>
<dd>
<p>Works like the <code title="dom-open"><a href="#dom-open">window.open()</a></code>
method.</p>
</dd>
</dl><h4 id="closing-the-input-stream"><span class="secno">3.4.2 </span>Closing the input stream</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-close"><a href="#dom-document-close">close</a></code>()</dt>
<dd>
<p>Closes the input stream that was opened by the <code title="dom-document-open"><a href="#dom-document-open">document.open()</a></code> method.</p>
<p>Throws an <code><a href="urls.html#invalid_state_err">INVALID_STATE_ERR</a></code> exception if the
<code>Document</code> is an <a href="dom.html#xml-documents" title="XML documents">XML
document</a>.</p>
</dd>
</dl><h4 id="document.write"><span class="secno">3.4.3 </span><code title="dom-document-write"><a href="#dom-document-write">document.write()</a></code></h4><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-write"><a href="#dom-document-write">write</a></code>(<var title="">text</var>...)</dt>
<dd>
<p>Adds the given string(s) to the <code>Document</code>'s input
stream. If necessary, calls the <code title="dom-document-open"><a href="#dom-document-open">open()</a></code> method implicitly
first.</p>
<p>This method throws an <code><a href="urls.html#invalid_access_err">INVALID_ACCESS_ERR</a></code> exception
when invoked on <a href="dom.html#xml-documents">XML documents</a>.</p>
</dd>
</dl><h4 id="document.writeln"><span class="secno">3.4.4 </span><code title="dom-document-writeln"><a href="#dom-document-writeln">document.writeln()</a></code></h4><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-writeln"><a href="#dom-document-writeln">writeln</a></code>(<var title="">text</var>...)</dt>
<dd>
<p>Adds the given string(s) to the <code>Document</code>'s input
stream, followed by a newline character. If necessary, calls the
<code title="dom-document-open"><a href="#dom-document-open">open()</a></code> method implicitly
first.</p>
<p>This method throws an <code><a href="urls.html#invalid_access_err">INVALID_ACCESS_ERR</a></code> exception
when invoked on <a href="dom.html#xml-documents">XML documents</a>.</p>
</dd>
</dl><h4 id="innerhtml"><span class="secno">3.4.5 </span><code title="dom-innerHTML"><a href="#dom-innerhtml">innerHTML</a></code></h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="dom-innerhtml" title="dom-innerHTML"><code>innerHTML</code></dfn> IDL
attribute represents the markup of the node's contents.</p><dl class="domintro"><dt><var title="">document</var> . <code title="dom-innerHTML"><a href="#dom-innerhtml">innerHTML</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns a fragment of HTML or XML that represents the
<code>Document</code>.</p>
<p>Can be set, to replace the <code>Document</code>'s contents
with the result of parsing the given string.</p>
<p>In the case of <a href="dom.html#xml-documents">XML documents</a>, will throw an
<code><a href="urls.html#invalid_state_err">INVALID_STATE_ERR</a></code> if the <code>Document</code> cannot
be serialized to XML, and a <code><a href="urls.html#syntax_err">SYNTAX_ERR</a></code> if the given
string is not well-formed.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-innerHTML"><a href="#dom-innerhtml">innerHTML</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns a fragment of HTML or XML that represents the element's
contents.</p>
<p>Can be set, to replace the contents of the element with nodes
parsed from the given string.</p>
<p>In the case of <a href="dom.html#xml-documents">XML documents</a>, will throw an
<code><a href="urls.html#invalid_state_err">INVALID_STATE_ERR</a></code> if the element cannot be serialized
to XML, and a <code><a href="urls.html#syntax_err">SYNTAX_ERR</a></code> if the given string is not
well-formed.</p>
</dd>
</dl><h4 id="outerhtml"><span class="secno">3.4.6 </span><code title="dom-outerHTML"><a href="#dom-outerhtml">outerHTML</a></code></h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="dom-outerhtml" title="dom-outerHTML"><code>outerHTML</code></dfn> IDL
attribute represents the markup of the element and its contents.</p><dl class="domintro"><dt><var title="">element</var> . <code title="dom-outerHTML"><a href="#dom-outerhtml">outerHTML</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns a fragment of HTML or XML that represents the element
and its contents.</p>
<p>Can be set, to replace the element with nodes parsed from the
given string.</p>
<p>In the case of <a href="dom.html#xml-documents">XML documents</a>, will throw an
<code><a href="urls.html#invalid_state_err">INVALID_STATE_ERR</a></code> if the element cannot be serialized
to XML, and a <code><a href="urls.html#syntax_err">SYNTAX_ERR</a></code> if the given string is not
well-formed.</p>
<p>Throws a <code><a href="urls.html#no_modification_allowed_err">NO_MODIFICATION_ALLOWED_ERR</a></code> exception if
the parent of the element is the <code>Document</code>
node.</p>
</dd>
</dl><h4 id="insertadjacenthtml"><span class="secno">3.4.7 </span><code title="dom-insertAdjacentHTML"><a href="#dom-insertadjacenthtml">insertAdjacentHTML()</a></code></h4><dl class="domintro"><dt><var title="">element</var> . <code title="dom-insertAdjacentHTML"><a href="#dom-insertadjacenthtml">insertAdjacentHTML</a></code>(<var title="">position</var>, <var title="">text</var>)</dt>
<dd>
<p>Parses the given string <var title="">text</var> as HTML or XML
and inserts the resulting nodes into the tree in the position
given by the <var title="">position</var> argument, as
follows:</p>
<dl><dt>"beforebegin"</dt>
<dd>Before the element itself.</dd>
<dt>"afterbegin"</dt>
<dd>Just inside the element, before its first child.</dd>
<dt>"beforeend"</dt>
<dd>Just inside the element, after its last child.</dd>
<dt>"afterend"</dt>
<dd>After the element itself.</dd>
</dl><p>Throws a <code><a href="urls.html#syntax_err">SYNTAX_ERR</a></code> exception the arguments have
invalid values (e.g., in the case of <a href="dom.html#xml-documents">XML documents</a>,
if the given string is not well-formed).</p>
<p>Throws a <code><a href="urls.html#no_modification_allowed_err">NO_MODIFICATION_ALLOWED_ERR</a></code> exception if
the given position isn't possible (e.g. inserting elements after
the root element of a <code>Document</code>).</p>
</dd>
</dl></body></html>
--- NEW FILE: the-button-element.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.10.6 The button element — HTML5</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"/><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
[...1019 lines suppressed...]
<dt><var title="">output</var> . <code title="dom-output-type"><a href="#dom-output-type">type</a></code></dt>
<dd>
<p>Returns the string "<code title="">output</code>".</p>
</dd>
</dl><div class="example">
<p>A simple calculator could use <code><a href="#the-output-element">output</a></code> for its
display of calculated results:</p>
<pre><form onsubmit="return false">
<input name=a type=number step=any> +
<input name=b type=number step=any> =
<output onforminput="value = a.value + b.value"></output>
</form></pre>
</div></body></html>
--- NEW FILE: dnd.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>7.9 Drag and drop — HTML5</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"/><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
p + * > li, dd li { margin: 1em 0; }
dt, dfn { font-weight: bold; font-style: normal; }
dt dfn { font-style: italic; }
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
pre em { font-weight: bolder; font-style: normal; }
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead { border-bottom: solid; }
table tbody th:first-child { border-left: solid; }
table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
img.extra { float: right; }
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
pre.css:first-line { color: #AAAA50; }
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; }
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
dl.domintro dd p { margin: 0.5em 0; }
dl.switch { padding-left: 2em; }
dl.switch > dt { text-indent: -1.5em; }
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
dl.triple { padding: 0 0 0 1em; }
dl.triple dt, dl.triple dd { margin: 0; display: inline }
dl.triple dt:after { content: ':'; }
dl.triple dd:after { content: '\A'; white-space: pre; }
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
a .diff-new { border-bottom: 1px blue solid; }
h2 { page-break-before: always; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; }
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
div.head p { margin: 0; }
div.head h1 { margin: 0; }
div.head .logo { float: right; margin: 0 1em; }
div.head .logo img { border: none } /* remove border from top image */
div.head dl { margin: 1em 0; }
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
body > .toc > li > * { margin-bottom: 0.5em; }
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
.toc, .toc li { list-style: none; }
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
.brief li { margin: 0; padding: 0; }
.brief li p { margin: 0; padding: 0; }
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
.category-list li { display: inline; }
.category-list li:not(:last-child)::after { content: ', '; }
.category-list li > span, .category-list li > a { text-transform: lowercase; }
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
.XXX > :first-child { margin-top: 0; }
p .XXX { line-height: 3em; }
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
.annotation :link, .annotation :visited { color: inherit; }
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
.annotation span { border: none ! important; }
.note { color: green; background: transparent; font-family: sans-serif; }
.warning { color: red; background: transparent; }
.note, .warning { font-weight: bolder; font-style: italic; }
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
.note p:first-child, .warning p:first-child { margin-top: 0; }
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
.warning:before { font-style: normal; }
p.note:before { content: 'Note: '; }
p.warning:before { content: '\26A0 Warning! '; }
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
h4 { position: relative; z-index: 3; }
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
.element {
background: #EEEEFF;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -1.15em;
height: 2em;
width: 0.9em;
background: #EEEEFF;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
td > .example:only-child { margin: 0 0 0 0.1em; }
.tall-and-narrow {
font-size: 0.6em;
column-width: 25em;
column-gap: 1em;
-moz-column-width: 25em;
-moz-column-gap: 1em;
-webkit-column-width: 25em;
-webkit-column-gap: 1em;
}
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
ul.domTree li li { list-style: none; }
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree span { font-style: italic; font-family: serif; }
ul.domTree .t1 code { color: purple; font-weight: bold; }
ul.domTree .t2 { font-style: normal; font-family: monospace; }
ul.domTree .t2 .name { color: black; font-weight: bold; }
ul.domTree .t2 .value { color: blue; font-weight: normal; }
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
ul.domTree .t7 code, .domTree .t8 code { color: green; }
ul.domTree .t10 code { color: teal; }
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
#configUI p label { display: block; }
#configUI #updateUI, #configUI .loginUI { text-align: center; }
#configUI input[type=button] { display: block; margin: auto; }
</style><style type="text/css">
.applies thead th > * { display: block; }
.applies thead code { display: block; }
.applies tbody th { whitespace: nowrap; }
.applies td { text-align: center; }
.applies .yes { background: yellow; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
#table-example-1 caption { padding-bottom: 0.5em; }
#table-example-1 thead, #table-example-1 tbody { border: none; }
#table-example-1 th, #table-example-1 td { border: solid thin; }
#table-example-1 th { font-weight: normal; }
#table-example-1 td { border-style: none solid; vertical-align: top; }
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
#table-example-1 tbody td:first-child::after { content: leader(". "); }
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
#table-example-1 tbody td:first-child + td { width: 10em; }
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
.apple-table-examples * { font-family: "Times", serif; }
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
.apple-table-examples td { text-align: right; vertical-align: top; }
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
.apple-table-examples sup { line-height: 0; }
</style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script>
function getCookie(name) {
var params = location.search.substr(1).split("&");
for (var index = 0; index < params.length; index++) {
if (params[index] == name)
return "1";
var data = params[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
var cookies = document.cookie.split("; ");
for (var index = 0; index < cookies.length; index++) {
var data = cookies[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
return null;
}
function load(script) {
var e = document.createElement('script');
e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
document.body.appendChild(e);
}
function init() {
if (location.search == '?slow-browser')
return;
var configUI = document.createElement('div');
configUI.id = 'configUI';
document.body.appendChild(configUI);
// load('reviewer.js'); // would need cross-site XHR
if (document.getElementById('head'))
load('toc.js');
load('styler.js');
// load('updater.js'); // would need cross-site XHR
load('dfn.js');
// load('status.js'); // would need cross-site XHR
if (getCookie('profile') == '1')
document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
fixBrokenLink();
}
</script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="editing.html" title="7 User Interaction" rel="prev">
<link href="Overview.html#contents" title="Table of contents" rel="index">
<link href="comms.html" title="8 Communication" rel="next">
</head><body onload="fixBrokenLink(); init()"><div class="head" id="head">
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
</div><div>
<a href="editing.html">← 7 User Interaction</a> –
<a href="Overview.html#contents">Table of contents</a> –
<a href="comms.html">8 Communication →</a>
<ol class="toc"><li><ol><li><a href="dnd.html#dnd"><span class="secno">7.9 </span>Drag and drop</a>
<ol><li><a href="dnd.html#introduction-4"><span class="secno">7.9.1 </span>Introduction</a></li><li><a href="dnd.html#the-dragevent-and-datatransfer-interfaces"><span class="secno">7.9.2 </span>The <code>DragEvent</code> and <code>DataTransfer</code> interfaces</a></li><li><a href="dnd.html#dndevents"><span class="secno">7.9.3 </span>Events fired during a drag-and-drop action</a></li><li><a href="dnd.html#the-draggable-attribute"><span class="secno">7.9.4 </span>The <code>draggable</code> attribute</a></li><li><a href="dnd.html#copy-and-paste"><span class="secno">7.9.5 </span>Copy and paste</a></li></ol></li><li><a href="dnd.html#undo"><span class="secno">7.10 </span>Undo history</a>
<ol><li><a href="dnd.html#the-undomanager-interface"><span class="secno">7.10.1 </span>The <code>UndoManager</code> interface</a></li><li><a href="dnd.html#the-undomanagerevent-interface-and-the-undo-and-redo-events"><span class="secno">7.10.2 </span>The <code>UndoManagerEvent</code> interface and the <code title="event-undo">undo</code> and <code title="event-redo">redo</code> events</a></li></ol></li><li><a href="dnd.html#editing-apis"><span class="secno">7.11 </span>Editing APIs</a></li></ol></li></ol></div>
<h3 id="dnd"><span class="secno">7.9 </span><dfn>Drag and drop</dfn></h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!-- v2 ideas for drag and drop:
* being able to animate a drop target:
> To implement this with simple interface I've proposed, events
> should be handled either by existing elements (like list
> items that compare their size and position of dragged element
> to decide whether element should be dropped before or after)
> or handled by container that would probably need to calculate
> positions of it's children and create new element to show
> drop target. Smooth Mac-like drag'n'drop can be implemented
> by animating drop target's padding/margin. So that's quite a
> bit of code that's going to be reinvented each time someone
> implements reordering.
<hyatt> :droptarget
<hyatt> or something
<hyatt> we don't support a pseudo-class for the drop target but that's a great idea
<Hixie_> yeah, thinking about that too
<Hixie_> :drop-target, :drop-target(above), :drop-target(below) and having ondragover be able to say "not on me, but next to me maybe"
* We should let drop targets communicate back to drag sources if
they want to communicate. (e.g. expose Window, and thus
postMessage(), on the dataTransfer object on drop.)
We should let drag sources provide a set of options via a
context menu when the drop happens. (So that, e.g., the source
can know whether a capabilities URI that it is passing along is
supposed to be read-write access or read-only access to the
object being dragged.)
We should let potential drop targets see the types (but not the
contents!) of dragged data so they can establish if they care
or not. (dataTransfer.hasType())
Ack: Ben Laurie (@g)
--><p>This section defines an event-based drag-and-drop mechanism.</p><p>This specification does not define exactly what a
<em>drag-and-drop operation</em> actually is.</p><p>On a visual medium with a pointing device, a drag operation could
be the default action of a <code title="event-mousedown">mousedown</code> event that is followed by a
series of <code title="event-mousemove">mousemove</code> events, and
the drop could be triggered by the mouse being released.</p><p>On media without a pointing device, the user would probably have
to explicitly indicate his intention to perform a drag-and-drop
operation, stating what he wishes to drag and what he wishes to
drop, respectively.</p><h4 id="introduction-4"><span class="secno">7.9.1 </span>Introduction</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><i>This section is non-normative.</i></p><p>To make an element draggable is simple: give the element a <code title="attr-draggable"><a href="#the-draggable-attribute">draggable</a></code> attribute, and set an event
listener for <code title="event-dragstart"><a href="#event-dragstart">dragstart</a></code> that
stores the data being dragged.</p><p>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 <code><a href="#datatransfer">DataTransfer</a></code> object and set the allowed effects
(copy, move, link, or some combination).</p><p>For example:</p><pre><p>What fruits do you like?</p>
<ol ondragstart="dragStartHandler(event)">
<li draggable data-value="fruit-apple">Apples</li>
<li draggable data-value="fruit-orange">Oranges</li>
<li draggable 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.effectAllowed = 'move'; // only allow moves
} else {
event.preventDefault(); // don't allow selection to be dragged
}
}
</script></pre><hr><p>To accept a drop, the drop target has to listen to at least three
events. First, the <code title="event-dragenter"><a href="#event-dragenter">dragenter</a></code>
event, which is used to determine whether or not the drop target is
to accept the drop. If the drop is to be accepted, then this event
has to be canceled. Second, the <code title="event-dragover"><a href="#event-dragover">dragover</a></code> event, which is used to
determine what feedback is to be shown to the user. If the event is
canceled, then the feedback (typically the cursor) is updated based
on the <code title="dom-DataTransfer-DropEffect"><a href="#dom-datatransfer-dropeffect">dropEffect</a></code>
attribute's value, as set by the event handler; otherwise, the
default behavior (typically to do nothing) is used instead. Finally,
the <code title="event-drop"><a href="#event-drop">drop</a></code> event, which allows the
actual drop to be performed. This event also needs to be canceled,
so that the <code title="dom-DataTransfer-DropEffect"><a href="#dom-datatransfer-dropeffect">dropEffect</a></code> attribute's
value can be used by the source (otherwise it's reset).</p><p>For example:</p><pre><p>Drop your favourite fruits below:</p>
<ol class="dropzone"
ondragenter="dragEnterHandler(event)"
ondragover="dragOverHandler(event)"
ondrop="dropHandler(event)">
</ol>
<script>
var internalDNDType = 'text/x-example'; // set this to something specific to your site
function dragEnterHandler(event) {
// cancel the event if the drag contains data of our type
if (event.dataTransfer.types.contains(internalDNDType))
event.preventDefault();
}
function dragOverHandler(event) {
event.dataTransfer.dropEffect = 'move';
event.preventDefault();
}
function dropHandler(event) {
// drop the data
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></pre><hr><p>To remove the original element (the one that was dragged) from
the display, the <code title="event-dragend"><a href="#event-dragend">dragend</a></code> event
can be used.</p><p>For our example here, that means updating the original markup to
handle that event:</p><pre><p>What fruits do you like?</p>
<ol ondragstart="dragStartHandler(event)" ondragend="dragEndHandler(event)">
<em>...as before...</em>
</ol>
<script>
function dragStartHandler(event) {
// <em>...as before...</em>
}
function dragEndHandler(event) {
// remove the dragged element
event.target.parentNode.removeChild(event.target);
}
</script></pre><h4 id="the-dragevent-and-datatransfer-interfaces"><span class="secno">7.9.2 </span>The <code><a href="#dragevent">DragEvent</a></code> and <code><a href="#datatransfer">DataTransfer</a></code> interfaces</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The drag-and-drop processing model involves several events. They
all use the <code><a href="#dragevent">DragEvent</a></code> interface.</p><pre class="idl">interface <dfn id="dragevent">DragEvent</dfn> : <span>MouseEvent</span> {
readonly attribute <a href="#datatransfer">DataTransfer</a> <a href="#dom-dragevent-datatransfer" title="dom-DragEvent-dataTransfer">dataTransfer</a>;
void <a href="#dom-dragevent-initdragevent" title="dom-DragEvent-initDragEvent">initDragEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in <span>AbstractView</span> viewArg, in long detailArg, in long screenXArg, in long screenYArg, in long clientXArg, in long clientYArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in unsigned short buttonArg, in EventTarget relatedTargetArg, in <a href="#datatransfer">DataTransfer</a> dataTransferArg);
};</pre><dl class="domintro"><dt><var title="">event</var> . <code title="dom-DragEvent-dataTransfer"><a href="#dom-dragevent-datatransfer">dataTransfer</a></code></dt>
<dd>
<p>Returns the <code><a href="#datatransfer">DataTransfer</a></code> object for the event.</p>
</dd>
</dl><pre class="idl">interface <dfn id="datatransfer">DataTransfer</dfn> {
attribute DOMString <a href="#dom-datatransfer-dropeffect" title="dom-DataTransfer-dropEffect">dropEffect</a>;
attribute DOMString <a href="#dom-datatransfer-effectallowed" title="dom-DataTransfer-effectAllowed">effectAllowed</a>;
readonly attribute DOMStringList <a href="#dom-datatransfer-types" title="dom-DataTransfer-types">types</a>;
void <a href="#dom-datatransfer-cleardata" title="dom-DataTransfer-clearData">clearData</a>(in optional DOMString format);
void <a href="#dom-datatransfer-setdata" title="dom-DataTransfer-setData">setData</a>(in DOMString format, in DOMString data);
DOMString <a href="#dom-datatransfer-getdata" title="dom-DataTransfer-getData">getData</a>(in DOMString format);
readonly attribute <span>FileList</span> <a href="#dom-datatransfer-files" title="dom-DataTransfer-files">files</a>;
void <a href="#dom-datatransfer-setdragimage" title="dom-DataTransfer-setDragImage">setDragImage</a>(in Element image, in long x, in long y);
void <a href="#dom-datatransfer-addelement" title="dom-DataTransfer-addElement">addElement</a>(in Element element);
};</pre><p><code><a href="#datatransfer">DataTransfer</a></code> objects can hold pieces of data, each
associated with a unique format. Formats are generally given by
<a href="infrastructure.html#mime-type" title="MIME type">MIME types</a>, with some values
special-cased for legacy reasons. For the purposes of this API,
however, the format strings are opaque, <a href="infrastructure.html#case-sensitive">case-sensitive</a>,
strings, and the empty string is a valid format string.</p><dl class="domintro"><dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-dropEffect"><a href="#dom-datatransfer-dropeffect">dropEffect</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns the kind of operation that is currently selected. If
the kind of operation isn't one of those that is allowed by the
<code title="dom-DataTransfer-effectAllowed"><a href="#dom-datatransfer-effectallowed">effectAllowed</a></code>
attribute, then the operation will fail.</p>
<p>Can be set, to change the selected operation.</p>
<p>The possible values are <code title="">none</code>, <code title="">copy</code>, <code title="">link</code>, and <code title="">move</code>.</p>
</dd>
<dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-effectAllowed"><a href="#dom-datatransfer-effectallowed">effectAllowed</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns the kinds of operations that are to be allowed.</p>
<p>Can be set, to change the allowed operations.</p>
<p>The possible values are <code title="">none</code>, <code title="">copy</code>, <code title="">copyLink</code>, <code title="">copyMove</code>, <code title="">link</code>, <code title="">linkMove</code>, <code title="">move</code>, <code title="">all</code>, and <code title="">uninitialized</code>,</p>
</dd>
<dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-types"><a href="#dom-datatransfer-types">types</a></code></dt>
<dd>
<p>Returns a <code>DOMStringList</code> listing the formats that
were set in the <code title="event-dragstart"><a href="#event-dragstart">dragstart</a></code>
event. In addition, if any files are being dragged, then one of
the types will be the string "<code title="">Files</code>".</p>
</dd>
<dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-clearData"><a href="#dom-datatransfer-cleardata">clearData</a></code>( [ <var title="">format</var> ] )</dt>
<dd>
<p>Removes the data of the specified formats. Removes all data if
the argument is omitted.</p>
</dd>
<dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-setData"><a href="#dom-datatransfer-setdata">setData</a></code>(<var title="">format</var>, <var title="">data</var>)</dt>
<dd>
<p>Adds the specified data.</p>
</dd>
<dt><var title="">data</var> = <var title="">dataTransfer</var> . <code title="dom-DataTransfer-getData"><a href="#dom-datatransfer-getdata">getData</a></code>(<var title="">format</var>)</dt>
<dd>
<p>Returns the specified data. If there is no such data, returns the empty string.</p>
</dd>
<dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-files"><a href="#dom-datatransfer-files">files</a></code></dt>
<dd>
<p>Returns a <code>FileList</code> of the files being dragged, if any.</p>
</dd>
<dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-setDragImage"><a href="#dom-datatransfer-setdragimage">setDragImage</a></code>(<var title="">element</var>, <var title="">x</var>, <var title="">y</var>)</dt>
<dd>
<p>Uses the given element to update the drag feedback, replacing any previously specified feedback.</p>
</dd>
<dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-addElement"><a href="#dom-datatransfer-addelement">addElement</a></code>(<var title="">element</var>)</dt>
<dd>
<p>Adds the given element to the list of elements used to render the drag feedback.</p>
</dd>
</dl><h4 id="dndevents"><span class="secno">7.9.3 </span>Events fired during a drag-and-drop action</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The following events are involved in the drag-and-drop
model.</p><table><thead><tr><th> Event Name </th>
<th> Target </th>
<th> Bubbles? </th>
<th> Cancelable? </th>
<th> <code title="dom-DataTransfer-dataTransfer">dataTransfer</code> </th>
<th> <code title="dom-DataTransfer-effectAllowed"><a href="#dom-datatransfer-effectallowed">effectAllowed</a></code> </th>
<th> <code title="dom-DataTransfer-dropEffect"><a href="#dom-datatransfer-dropeffect">dropEffect</a></code> </th>
<th> Default Action </th>
</tr></thead><tbody><tr><td><dfn id="event-dragstart" title="event-dragstart"><code>dragstart</code></dfn></td>
<td><a href="#source-node">Source node</a></td>
<td>✓ Bubbles</td>
<td>✓ Cancelable</td>
<td>Contains <a href="#source-node">source node</a> unless a selection is being dragged, in which case it is empty; <code title="dom-datatransfer-files"><a href="#dom-datatransfer-files">files</a></code> returns any files included in the drag operation</td>
<td><code title="">uninitialized</code></td>
<td><code title="">none</code></td>
<td>Initiate the drag-and-drop operation</td>
</tr><tr><td><dfn id="event-drag" title="event-drag"><code>drag</code></dfn></td>
<td><a href="#source-node">Source node</a></td>
<td>✓ Bubbles</td>
<td>✓ Cancelable</td>
<td>Empty</td>
<td><a href="#effectAllowed-initialization">Same as last event</a></td>
<td><code title="">none</code></td>
<td>Continue the drag-and-drop operation</td>
</tr><tr><td><dfn id="event-dragenter" title="event-dragenter"><code>dragenter</code></dfn></td>
<td><a href="#immediate-user-selection">Immediate user selection</a> or <a href="dom.html#the-body-element">the body element</a></td>
<td>✓ Bubbles</td>
<td>✓ Cancelable</td>
<td>Empty</td>
<td><a href="#effectAllowed-initialization">Same as last event</a></td>
<td><a href="#dropEffect-initialization">Based on <code>effectAllowed</code> value</a></td>
<td>Reject <a href="#immediate-user-selection">immediate user selection</a> as potential <a href="#current-target-element" title="current target element">target element</a></td>
</tr><tr><td><dfn id="event-dragleave" title="event-dragleave"><code>dragleave</code></dfn></td>
<td><a href="#current-target-element" title="current target element">Previous target element</a></td>
<td>✓ Bubbles</td>
<td>—</td>
<td>Empty</td>
<td><a href="#effectAllowed-initialization">Same as last event</a></td>
<td><code title="">none</code></td>
<td>None</td>
</tr><tr><td><dfn id="event-dragover" title="event-dragover"><code>dragover</code></dfn></td>
<td><a href="#current-target-element">Current target element</a></td>
<td>✓ Bubbles</td>
<td>✓ Cancelable</td>
<td>Empty</td>
<td><a href="#effectAllowed-initialization">Same as last event</a></td>
<td><a href="#dropEffect-initialization">Based on <code>effectAllowed</code> value</a></td>
<td>Reset the <a href="#current-drag-operation">current drag operation</a> to "none"</td>
</tr><tr><td><dfn id="event-drop" title="event-drop"><code>drop</code></dfn></td>
<td><a href="#current-target-element">Current target element</a></td>
<td>✓ Bubbles</td>
<td>✓ Cancelable</td>
<td><code title="dom-datatransfer-getdata"><a href="#dom-datatransfer-getdata">getData()</a></code> returns data set in <code title="dom-dragstart">dragstart</code> event; <code title="dom-datatransfer-files"><a href="#dom-datatransfer-files">files</a></code> returns any files included in the drag operation</td>
<td><a href="#effectAllowed-initialization">Same as last event</a></td>
<td><a href="#current-drag-operation">Current drag operation</a></td>
<td>Varies</td>
</tr><tr><td><dfn id="event-dragend" title="event-dragend"><code>dragend</code></dfn></td>
<td><a href="#source-node">Source node</a></td>
<td>✓ Bubbles</td>
<td>—</td>
<td>Empty</td>
<td><a href="#effectAllowed-initialization">Same as last event</a></td>
<td><a href="#current-drag-operation">Current drag operation</a></td>
<td>Varies</td>
</tr></tbody></table><h4 id="the-draggable-attribute"><span class="secno">7.9.4 </span>The <dfn title="attr-draggable"><code>draggable</code></dfn> attribute</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>All <a href="infrastructure.html#html-elements">HTML elements</a> may have the <code title="attr-draggable"><a href="#the-draggable-attribute">draggable</a></code> content attribute set. The
<code title="attr-draggable"><a href="#the-draggable-attribute">draggable</a></code> attribute is an
<a href="common-microsyntaxes.html#enumerated-attribute">enumerated attribute</a>. It has three states. The first
state is <i>true</i> and it has the keyword <code title="">true</code>. The second state is <i>false</i> and it has
the keyword <code title="">false</code>. The third state is
<i>auto</i>; it has no keywords but it is the <i>missing value
default</i>.</p><p>The <i>true</i> state means the element is draggable; the
<i>false</i> state means that it is not. The <i>auto</i> state
uses the default behavior of the user agent.</p><dl class="domintro"><dt><var title="">element</var> . <code title="dom-draggable"><a href="#dom-draggable">draggable</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>Returns true if the element is draggable; otherwise, returns
false.</p>
<p>Can be set, to override the default and set the <code title="attr-draggable"><a href="#the-draggable-attribute">draggable</a></code> content attribute.</p>
</dd>
</dl><h4 id="copy-and-paste"><span class="secno">7.9.5 </span>Copy and paste</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Copy-and-paste is a form of drag-and-drop: the "copy" part is
equivalent to dragging content to another application (the
"clipboard"), and the "paste" part is equivalent to dragging content
<em>from</em> another application.</p><p>Select-and-paste (a model used by mouse operations in the X
Window System) is equivalent to a drag-and-drop operation where the
source is the selection.</p><h3 id="undo"><span class="secno">7.10 </span><dfn>Undo history</dfn></h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h4 id="the-undomanager-interface"><span class="secno">7.10.1 </span>The <code><a href="#undomanager">UndoManager</a></code> interface</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>To manage <a href="#undo-object">undo object</a> entries in the <a href="#undo-transaction-history">undo
transaction history</a>, the <code><a href="#undomanager">UndoManager</a></code>
interface can be used:</p><pre class="idl">interface <dfn id="undomanager">UndoManager</dfn> {
readonly attribute unsigned long <a href="#dom-undomanager-length" title="dom-UndoManager-length">length</a>;
getter any <a href="#dom-undomanager-item" title="dom-UndoManager-item">item</a>(in unsigned long index);
readonly attribute unsigned long <a href="#dom-undomanager-position" title="dom-UndoManager-position">position</a>;
unsigned long <a href="#dom-undomanager-add" title="dom-UndoManager-add">add</a>(in any data, in DOMString title);
void <a href="#dom-undomanager-remove" title="dom-UndoManager-remove">remove</a>(in unsigned long index);
void <a href="#dom-undomanager-clearundo" title="dom-UndoManager-clearUndo">clearUndo</a>();
void <a href="#dom-undomanager-clearredo" title="dom-UndoManager-clearRedo">clearRedo</a>();
};</pre><dl class="domintro"><dt><var title="">window</var> . <code title="dom-undoManager"><a href="#dom-undomanager">undoManager</a></code></dt>
<dd>
<p>Returns the <code><a href="#undomanager">UndoManager</a></code> object.</p>
</dd>
<dt><var title="">undoManager</var> . <code title="dom-UndoManager-length"><a href="#dom-undomanager-length">length</a></code></dt>
<dd>
<p>Returns the number of entries in the undo history.</p>
</dd>
<dt><var title="">data</var> = <var title="">undoManager</var> . <code title="dom-UndoManager-item"><a href="#dom-undomanager-item">item</a></code>(<var title="">index</var>)</dt>
<dt><var title="">undoManager</var>[<var title="">index</var>]</dt>
<dd>
<p>Returns the entry with index <var title="">index</var> in the undo history.</p>
<p>Returns null if <var title="">index</var> is out of range.</p>
</dd>
<dt><var title="">undoManager</var> . <code title="dom-UndoManager-position"><a href="#dom-undomanager-position">position</a></code></dt>
<dd>
<p>Returns the number of the current entry in the undo history. (Entries at and past this point are <em>redo</em> entries.)</p>
</dd>
<dt><var title="">undoManager</var> . <code title="dom-UndoManager-add"><a href="#dom-undomanager-add">add</a></code>(<var title="">data</var>, <var title="">title</var>)</dt>
<dd>
<p>Adds the specified entry to the undo history.</p>
</dd>
<dt><var title="">undoManager</var> . <code title="dom-UndoManager-remove"><a href="#dom-undomanager-remove">remove</a></code>(<var title="">index</var>)</dt>
<dd>
<p>Removes the specified entry to the undo history.</p>
<p>Throws an <code><a href="urls.html#index_size_err">INDEX_SIZE_ERR</a></code> exception if the given index is out of range.</p>
</dd>
<dt><var title="">undoManager</var> . <code title="dom-UndoManager-clearUndo"><a href="#dom-undomanager-clearundo">clearUndo</a></code>()</dt>
<dd>
<p>Removes all entries before the current position in the undo history.</p>
</dd>
<dt><var title="">undoManager</var> . <code title="dom-UndoManager-clearRedo"><a href="#dom-undomanager-clearredo">clearRedo</a></code>()</dt>
<dd>
<p>Removes all entries at and after the current position in the undo history.</p>
</dd>
</dl><h4 id="the-undomanagerevent-interface-and-the-undo-and-redo-events"><span class="secno">7.10.2 </span>The <code><a href="#undomanagerevent">UndoManagerEvent</a></code> interface and the <code title="event-undo"><a href="#event-undo">undo</a></code> and <code title="event-redo"><a href="#event-redo">redo</a></code> events</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><pre class="idl">interface <dfn id="undomanagerevent">UndoManagerEvent</dfn> : Event {
readonly attribute any <a href="#dom-undomanagerevent-data" title="dom-UndoManagerEvent-data">data</a>;
void <a href="#dom-undomanagerevent-initundomanagerevent" title="dom-UndoManagerEvent-initUndoManagerEvent">initUndoManagerEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in any dataArg);
};</pre><dl class="domintro"><dt><var title="">event</var> . <code title="dom-UndoManagerEvent-data"><a href="#dom-undomanagerevent-data">data</a></code></dt>
<dd>
<p>Returns the data that was passed to the <code title="dom-undomanager-add"><a href="#dom-undomanager-add">add()</a></code> method.</p>
</dd>
</dl><h3 id="editing-apis"><span class="secno">7.11 </span>Editing APIs</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-execCommand"><a href="#execCommand">execCommand</a></code>(<var title="">commandId</var> [, <var title="">showUI</var> [, <var title="">value</var> ] ] )</dt>
<dd>
<p>Runs the action specified by the first argument, as described
in the list below. The second and third arguments sometimes affect
the action. (If they don't they are ignored.)</p>
</dd>
<dt><var title="">document</var> . <code title="dom-document-queryCommandEnabled"><a href="#dom-document-querycommandenabled">queryCommandEnabled</a></code>(<var title="">commandId</var>)</dt>
<dd>
<p>Returns whether the given command is enabled, as described in the list below.</p>
</dd>
<dt><var title="">document</var> . <code title="dom-document-queryCommandIndeterm"><a href="#dom-document-querycommandindeterm">queryCommandIndeterm</a></code>(<var title="">commandId</var>)</dt>
<dd>
<p>Returns whether the given command is indeterminate, as described in the list below.</p>
</dd>
<dt><var title="">document</var> . <code title="dom-document-queryCommandState"><a href="#dom-document-querycommandstate">queryCommandState</a></code>(<var title="">commandId</var>)</dt>
<dd>
<p>Returns the state of the command, as described in the list below.</p>
</dd>
<dt><var title="">document</var> . <code title="dom-document-queryCommandSupported"><a href="#dom-document-querycommandsupported">queryCommandSupported</a></code>(<var title="">commandId</var>)</dt>
<dd>
<p>Returns true if the command is supported; otherwise, returns false.</p>
</dd>
<dt><var title="">document</var> . <code title="dom-document-queryCommandValue"><a href="#dom-document-querycommandvalue">queryCommandValue</a></code>(<var title="">commandId</var>)</dt>
<dd>
<p>Returns the value of the command, as described in the list below.</p>
</dd>
</dl><p>A document is <dfn id="ready-for-editing-host-commands">ready for editing host commands</dfn> if it
has a selection that is entirely within an <a href="#editing-host">editing
host</a>, or if it has no selection but its caret is inside an
<a href="#editing-host">editing host</a>.</p><p>The possible values for <var title="">commandId</var>, and their
corresponding meanings, are as follows. </p><dl><dt><dfn id="command-bold" title="command-bold"><code>bold</code></dfn></dt>
<dd><strong>Summary</strong>: Toggles whether the selection is bold.</dd>
<dd><strong>Enabled When</strong>: The document is <a href="#ready-for-editing-host-commands">ready for
editing host commands</a>.</dd>
<dd><strong>Indeterminate When</strong>: Never.</dd>
<dd><strong>State</strong>: True if the selection, or the caret, if
there is no selection, is, or is contained within, a
<code><a href="text-level-semantics.html#the-b-element">b</a></code> element. False otherwise.</dd>
<dd><strong>Value</strong>: The string "<code title="">true</code>"
if the expression given for the "State" above is true, the string
"<code title="">false</code>" otherwise.</dd>
<dt><dfn id="command-createlink" title="command-createLink"><code>createLink</code></dfn></dt>
<dd><strong>Summary</strong>: Toggles whether the selection is a
link or not. If the second argument is true, and a link is to be
added, the user agent will ask the user for the address. Otherwise,
the third argument will be used as the address.</dd>
<dd><strong>Enabled When</strong>: The document is <a href="#ready-for-editing-host-commands">ready for
editing host commands</a>.</dd>
<dd><strong>Indeterminate When</strong>: Never.</dd>
<dd><strong>State</strong>: Always false.</dd>
<dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
<dt><dfn id="command-delete" title="command-delete"><code>delete</code></dfn></dt>
<dd><strong>Summary</strong>: Deletes the selection or the
character before the cursor.</dd>
<dd><strong>Enabled When</strong>: The document is <a href="#ready-for-editing-host-commands">ready for
editing host commands</a>.</dd>
<dd><strong>Indeterminate When</strong>: Never.</dd>
<dd><strong>State</strong>: Always false.</dd>
<dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
<dt><dfn id="command-formatblock" title="command-formatBlock"><code>formatBlock</code></dfn></dt>
<dd><strong>Summary</strong>: Wraps the selection in the element
given by the second argument. If the second argument doesn't
specify an element that is a <dfn id="formatblock-candidate"><code title="">formatBlock</code>
candidate</dfn>, does nothing.</dd>
<dd><strong>Enabled When</strong>: The document is <a href="#ready-for-editing-host-commands">ready for
editing host commands</a>.</dd>
<dd><strong>Indeterminate When</strong>: Never.</dd>
<dd><strong>State</strong>: Always false.</dd>
<dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
<dt><dfn id="command-forwarddelete" title="command-forwardDelete"><code>forwardDelete</code></dfn></dt>
<dd><strong>Summary</strong>: Deletes the selection or the
character after the cursor.</dd>
<dd><strong>Enabled When</strong>: The document is <a href="#ready-for-editing-host-commands">ready for
editing host commands</a>.</dd>
<dd><strong>Indeterminate When</strong>: Never.</dd>
<dd><strong>State</strong>: Always false.</dd>
<dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
<dt><dfn id="command-insertimage" title="command-insertImage"><code>insertImage</code></dfn></dt>
<dd><strong>Summary</strong>: Toggles whether the selection is an
image or not. If the second argument is true, and an image is to be
added, the user agent will ask the user for the address. Otherwise,
the third argument will be used as the address.</dd>
<dd><strong>Enabled When</strong>: The document is <a href="#ready-for-editing-host-commands">ready for
editing host commands</a>.</dd>
<dd><strong>Indeterminate When</strong>: Never.</dd>
<dd><strong>State</strong>: Always false.</dd>
<dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
<dt><dfn id="command-inserthtml" title="command-insertHTML"><code>insertHTML</code></dfn></dt>
<dd><strong>Summary</strong>: Replaces the selection with the value
of the third argument parsed as HTML.</dd>
<dd><strong>Enabled When</strong>: The document is <a href="#ready-for-editing-host-commands">ready for
editing host commands</a>.</dd>
<dd><strong>Indeterminate When</strong>: Never.</dd>
<dd><strong>State</strong>: Always false.</dd>
<dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
<dt><dfn id="command-insertlinebreak" title="command-insertLineBreak"><code>insertLineBreak</code></dfn></dt>
<dd><strong>Summary</strong>: Inserts a line break.</dd>
<dd><strong>Enabled When</strong>: The document is <a href="#ready-for-editing-host-commands">ready for
editing host commands</a>.</dd>
<dd><strong>Indeterminate When</strong>: Never.</dd>
<dd><strong>State</strong>: Always false.</dd>
<dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
<dt><dfn id="command-insertorderedlist" title="command-insertOrderedList"><code>insertOrderedList</code></dfn></dt>
<dd><strong>Summary</strong>: Toggles whether the selection is an ordered list.</dd>
<dd><strong>Enabled When</strong>: The document is <a href="#ready-for-editing-host-commands">ready for
editing host commands</a>.</dd>
<dd><strong>Indeterminate When</strong>: Never.</dd>
<dd><strong>State</strong>: Always false.</dd>
<dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
<dt><dfn id="command-insertunorderedlist" title="command-insertUnorderedList"><code>insertUnorderedList</code></dfn></dt>
<dd><strong>Summary</strong>: Toggles whether the selection is an unordered list.</dd>
<dd><strong>Enabled When</strong>: The document is <a href="#ready-for-editing-host-commands">ready for
editing host commands</a>.</dd>
<dd><strong>Indeterminate When</strong>: Never.</dd>
<dd><strong>State</strong>: Always false.</dd>
<dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
<dt><dfn id="command-insertparagraph" title="command-insertParagraph"><code>insertParagraph</code></dfn></dt>
<dd><strong>Summary</strong>: Inserts a paragraph break.</dd>
<dd><strong>Enabled When</strong>: The document is <a href="#ready-for-editing-host-commands">ready for
editing host commands</a>.</dd>
<dd><strong>Indeterminate When</strong>: Never.</dd>
<dd><strong>State</strong>: Always false.</dd>
<dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
<dt><dfn id="command-inserttext" title="command-insertText"><code>insertText</code></dfn></dt>
<dd><strong>Summary</strong>: Inserts the text given in the third parameter.</dd>
<dd><strong>Enabled When</strong>: The document is <a href="#ready-for-editing-host-commands">ready for
editing host commands</a>.</dd>
<dd><strong>Indeterminate When</strong>: Never.</dd>
<dd><strong>State</strong>: Always false.</dd>
<dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
<dt><dfn id="command-italic" title="command-italic"><code>italic</code></dfn></dt>
<dd><strong>Summary</strong>: Toggles whether the selection is italic.</dd>
<dd><strong>Enabled When</strong>: The document is <a href="#ready-for-editing-host-commands">ready for
editing host commands</a>.</dd>
<dd><strong>Indeterminate When</strong>: Never.</dd>
<dd><strong>State</strong>: True if the selection, or the caret, if
there is no selection, is, or is contained within, a
<code><a href="text-level-semantics.html#the-i-element">i</a></code> element. False otherwise.</dd>
<dd><strong>Value</strong>: The string "<code title="">true</code>"
if the expression given for the "State" above is true, the string
"<code title="">false</code>" otherwise.</dd>
<dt><dfn id="command-redo" title="command-redo"><code>redo</code></dfn></dt>
<dd><strong>Summary</strong>: Acts as if the user had requested a redo.</dd>
<dd><strong>Enabled When</strong>: The <a href="#undo-position">undo position</a>
is not at the end of the <a href="#undo-transaction-history">undo transaction
history</a>.</dd>
<dd><strong>Indeterminate When</strong>: Never.</dd>
<dd><strong>State</strong>: Always false.</dd>
<dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
<dt><dfn id="command-selectall" title="command-selectAll"><code>selectAll</code></dfn></dt>
<dd><strong>Summary</strong>: Selects all the editable content.</dd>
<dd><strong>Enabled When</strong>: Always.</dd>
<dd><strong>Indeterminate When</strong>: Never.</dd>
<dd><strong>State</strong>: Always false.</dd>
<dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
<dt><dfn id="command-subscript" title="command-subscript"><code>subscript</code></dfn></dt>
<dd><strong>Summary</strong>: Toggles whether the selection is subscripted.</dd>
<dd><strong>Enabled When</strong>: The document is <a href="#ready-for-editing-host-commands">ready for
editing host commands</a>.</dd>
<dd><strong>Indeterminate When</strong>: Never.</dd>
<dd><strong>State</strong>: True if the selection, or the caret, if
there is no selection, is, or is contained within, a
<code><a href="text-level-semantics.html#the-sub-and-sup-elements">sub</a></code> element. False otherwise.</dd>
<dd><strong>Value</strong>: The string "<code title="">true</code>"
if the expression given for the "State" above is true, the string
"<code title="">false</code>" otherwise.</dd>
<dt><dfn id="command-superscript" title="command-superscript"><code>superscript</code></dfn></dt>
<dd><strong>Summary</strong>: Toggles whether the selection is superscripted.</dd>
<dd><strong>Enabled When</strong>: The document is <a href="#ready-for-editing-host-commands">ready for
editing host commands</a>.</dd>
<dd><strong>Indeterminate When</strong>: Never.</dd>
<dd><strong>State</strong>: True if the selection, or the caret, if
there is no selection, is, or is contained within, a
<code><a href="text-level-semantics.html#the-sub-and-sup-elements">sup</a></code> element. False otherwise.</dd>
<dd><strong>Value</strong>: The string "<code title="">true</code>"
if the expression given for the "State" above is true, the string
"<code title="">false</code>" otherwise.</dd>
<dt><dfn id="command-undo" title="command-undo"><code>undo</code></dfn></dt>
<dd><strong>Summary</strong>: Acts as if the user had requested an undo.</dd>
<dd><strong>Enabled When</strong>: The <a href="#undo-position">undo position</a>
is not at the start of the <a href="#undo-transaction-history">undo transaction
history</a>.</dd>
<dd><strong>Indeterminate When</strong>: Never.</dd>
<dd><strong>State</strong>: Always false.</dd>
<dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
<dt><dfn id="command-unlink" title="command-unlink"><code>unlink</code></dfn></dt>
<dd><strong>Summary</strong>: Removes all links from the selection.</dd>
<dd><strong>Enabled When</strong>: The document has a selection
that is entirely within an <a href="#editing-host">editing host</a> and that
contains (either partially or completely) at least one
<code><a href="text-level-semantics.html#the-a-element">a</a></code> element that has an <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute.</dd>
<dd><strong>Indeterminate When</strong>: Never.</dd>
<dd><strong>State</strong>: Always false.</dd>
<dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
<dt><dfn id="command-unselect" title="command-unselect"><code>unselect</code></dfn></dt>
<dd><strong>Summary</strong>: Unselects everything.</dd>
<dd><strong>Enabled When</strong>: Always.</dd>
<dd><strong>Indeterminate When</strong>: Never.</dd>
<dd><strong>State</strong>: Always false.</dd>
<dd><strong>Value</strong>: Always the string "<code title="">false</code>".</dd>
</dl><!--
v2 (well, really v0):
"forecolor", "hilitecolor", "fontname", "fontsize", "justifyleft",
"justifycenter", "justifyright", "justifyfull", "indent", "outdent"
--></body></html>
--- NEW FILE: links.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>6.10 Links — HTML5</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"/><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
p + * > li, dd li { margin: 1em 0; }
dt, dfn { font-weight: bold; font-style: normal; }
dt dfn { font-style: italic; }
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
pre em { font-weight: bolder; font-style: normal; }
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead { border-bottom: solid; }
table tbody th:first-child { border-left: solid; }
table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
img.extra { float: right; }
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
pre.css:first-line { color: #AAAA50; }
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; }
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
dl.domintro dd p { margin: 0.5em 0; }
dl.switch { padding-left: 2em; }
dl.switch > dt { text-indent: -1.5em; }
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
dl.triple { padding: 0 0 0 1em; }
dl.triple dt, dl.triple dd { margin: 0; display: inline }
dl.triple dt:after { content: ':'; }
dl.triple dd:after { content: '\A'; white-space: pre; }
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
a .diff-new { border-bottom: 1px blue solid; }
h2 { page-break-before: always; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; }
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
div.head p { margin: 0; }
div.head h1 { margin: 0; }
div.head .logo { float: right; margin: 0 1em; }
div.head .logo img { border: none } /* remove border from top image */
div.head dl { margin: 1em 0; }
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
body > .toc > li > * { margin-bottom: 0.5em; }
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
.toc, .toc li { list-style: none; }
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
.brief li { margin: 0; padding: 0; }
.brief li p { margin: 0; padding: 0; }
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
.category-list li { display: inline; }
.category-list li:not(:last-child)::after { content: ', '; }
.category-list li > span, .category-list li > a { text-transform: lowercase; }
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
.XXX > :first-child { margin-top: 0; }
p .XXX { line-height: 3em; }
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
.annotation :link, .annotation :visited { color: inherit; }
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
.annotation span { border: none ! important; }
.note { color: green; background: transparent; font-family: sans-serif; }
.warning { color: red; background: transparent; }
.note, .warning { font-weight: bolder; font-style: italic; }
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
.note p:first-child, .warning p:first-child { margin-top: 0; }
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
.warning:before { font-style: normal; }
p.note:before { content: 'Note: '; }
p.warning:before { content: '\26A0 Warning! '; }
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
h4 { position: relative; z-index: 3; }
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
.element {
background: #EEEEFF;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -1.15em;
height: 2em;
width: 0.9em;
background: #EEEEFF;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
td > .example:only-child { margin: 0 0 0 0.1em; }
.tall-and-narrow {
font-size: 0.6em;
column-width: 25em;
column-gap: 1em;
-moz-column-width: 25em;
-moz-column-gap: 1em;
-webkit-column-width: 25em;
-webkit-column-gap: 1em;
}
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
ul.domTree li li { list-style: none; }
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree span { font-style: italic; font-family: serif; }
ul.domTree .t1 code { color: purple; font-weight: bold; }
ul.domTree .t2 { font-style: normal; font-family: monospace; }
ul.domTree .t2 .name { color: black; font-weight: bold; }
ul.domTree .t2 .value { color: blue; font-weight: normal; }
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
ul.domTree .t7 code, .domTree .t8 code { color: green; }
ul.domTree .t10 code { color: teal; }
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
#configUI p label { display: block; }
#configUI #updateUI, #configUI .loginUI { text-align: center; }
#configUI input[type=button] { display: block; margin: auto; }
</style><style type="text/css">
.applies thead th > * { display: block; }
.applies thead code { display: block; }
.applies tbody th { whitespace: nowrap; }
.applies td { text-align: center; }
.applies .yes { background: yellow; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
#table-example-1 caption { padding-bottom: 0.5em; }
#table-example-1 thead, #table-example-1 tbody { border: none; }
#table-example-1 th, #table-example-1 td { border: solid thin; }
#table-example-1 th { font-weight: normal; }
#table-example-1 td { border-style: none solid; vertical-align: top; }
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
#table-example-1 tbody td:first-child::after { content: leader(". "); }
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
#table-example-1 tbody td:first-child + td { width: 10em; }
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
.apple-table-examples * { font-family: "Times", serif; }
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
.apple-table-examples td { text-align: right; vertical-align: top; }
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
.apple-table-examples sup { line-height: 0; }
</style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script>
function getCookie(name) {
var params = location.search.substr(1).split("&");
for (var index = 0; index < params.length; index++) {
if (params[index] == name)
return "1";
var data = params[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
var cookies = document.cookie.split("; ");
for (var index = 0; index < cookies.length; index++) {
var data = cookies[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
return null;
}
function load(script) {
var e = document.createElement('script');
e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
document.body.appendChild(e);
}
function init() {
if (location.search == '?slow-browser')
return;
var configUI = document.createElement('div');
configUI.id = 'configUI';
document.body.appendChild(configUI);
// load('reviewer.js'); // would need cross-site XHR
if (document.getElementById('head'))
load('toc.js');
load('styler.js');
// load('updater.js'); // would need cross-site XHR
load('dfn.js');
// load('status.js'); // would need cross-site XHR
if (getCookie('profile') == '1')
document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
fixBrokenLink();
}
</script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="history.html" title="6.8 Session history and navigation" rel="prev">
<link href="Overview.html#contents" title="Table of contents" rel="index">
<link href="editing.html" title="7 User Interaction" rel="next">
</head><body onload="fixBrokenLink(); init()"><div class="head" id="head">
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
</div><div>
<a href="history.html">← 6.8 Session history and navigation</a> –
<a href="Overview.html#contents">Table of contents</a> –
<a href="editing.html">7 User Interaction →</a>
<ol class="toc"><li><ol><li><a href="links.html#links"><span class="secno">6.10 </span>Links</a>
<ol><li><a href="links.html#hyperlink-elements"><span class="secno">6.10.1 </span>Hyperlink elements</a></li><li><a href="links.html#linkTypes"><span class="secno">6.10.2 </span>Link types</a>
<ol><li><a href="links.html#link-type-alternate"><span class="secno">6.10.2.1 </span>Link type "<code>alternate</code>"</a></li><li><a href="links.html#link-type-archives"><span class="secno">6.10.2.2 </span>Link type "<code>archives</code>"</a></li><li><a href="links.html#link-type-author"><span class="secno">6.10.2.3 </span>Link type "<code>author</code>"</a></li><li><a href="links.html#link-type-bookmark"><span class="secno">6.10.2.4 </span>Link type "<code>bookmark</code>"</a></li><li><a href="links.html#link-type-external"><span class="secno">6.10.2.5 </span>Link type "<code>external</code>"</a></li><li><a href="links.html#link-type-help"><span class="secno">6.10.2.6 </span>Link type "<code>help</code>"</a></li><li><a href="links.html#rel-icon"><span class="secno">6.10.2.7 </span>Link type "<code>icon</code>"</a></li><li><a href="links.html#link-type-license"><span class="secno">6.10.2.8 </span>Link type "<code>license</code>"</a></li><li><a href="links.html#link-type-nofollow"><span class="secno>6.10.2.9 </span>Link type "<code>nofollow</code>"</a></li><li><a href="links.html#link-type-noreferrer"><span class="secno">6.10.2.10 </span>Link type "<code>noreferrer</code>"</a></li><li><a href="links.html#link-type-pingback"><span class="secno">6.10.2.11 </span>Link type "<code>pingback</code>"</a></li><li><a href="links.html#link-type-prefetch"><span class="secno">6.10.2.12 </span>Link type "<code>prefetch</code>"</a></li><li><a href="links.html#link-type-search"><span class="secno">6.10.2.13 </span>Link type "<code>search</code>"</a></li><li><a href="links.html#link-type-stylesheet"><span class="secno">6.10.2.14 </span>Link type "<code>stylesheet</code>"</a></li><li><a href="links.html#link-type-sidebar"><span class="secno">6.10.2.15 </span>Link type "<code>sidebar</code>"</a></li><li><a href="links.html#link-type-tag"><span class="secno">6.10.2.16 </span>Link type "<code>tag</code>"</a></li><li><a href="links.html#hierarchical-link-types"><span class="secno">6.10.2.17 </span>Hierarchical link types<a>
<ol><li><a href="links.html#link-type-index"><span class="secno">6.10.2.17.1 </span>Link type "<code>index</code>"</a></li><li><a href="links.html#link-type-up"><span class="secno">6.10.2.17.2 </span>Link type "<code>up</code>"</a></li></ol></li><li><a href="links.html#sequential-link-types"><span class="secno">6.10.2.18 </span>Sequential link types</a>
<ol><li><a href="links.html#link-type-first"><span class="secno">6.10.2.18.1 </span>Link type "<code>first</code>"</a></li><li><a href="links.html#link-type-last"><span class="secno">6.10.2.18.2 </span>Link type "<code>last</code>"</a></li><li><a href="links.html#link-type-next"><span class="secno">6.10.2.18.3 </span>Link type "<code>next</code>"</a></li><li><a href="links.html#link-type-prev"><span class="secno">6.10.2.18.4 </span>Link type "<code>prev</code>"</a></li></ol></li><li><a href="links.html#other-link-types"><span class="secno">6.10.2.19 </span>Other link types</a></li></ol></li></ol></li></ol></li></ol></div>
<h3 id="links"><span class="secno">6.10 </span>Links</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h4 id="hyperlink-elements"><span class="secno">6.10.1 </span>Hyperlink elements</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="text-level-semantics.html#the-a-element">a</a></code>, <code><a href="the-map-element.html#the-area-element">area</a></code>, and <code><a href="semantics.html#the-link-element">link</a></code>
elements can, in certain situations described in the definitions of
those elements, represent <dfn id="hyperlink" title="hyperlink">hyperlinks</dfn>.</p><p>The <dfn id="attr-hyperlink-href" title="attr-hyperlink-href"><code>href</code></dfn>
attribute on a hyperlink element must have a value that is a
<a href="urls.html#valid-url">valid URL</a>. This URL is the <em>destination
resource</em> of the hyperlink.</p><div class="note">
<p>The <code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">href</a></code> attribute on
<code><a href="text-level-semantics.html#the-a-element">a</a></code> and <code><a href="the-map-element.html#the-area-element">area</a></code> elements is not required; when
those elements do not have <code title="attr-hyperlink-href"><a href="#attr-hyperlink-href">href</a></code> attributes they do not
represent hyperlinks.</p>
<p>The <code title="attr-link-href"><a href="semantics.html#attr-link-href">href</a></code> attribute on the
<code><a href="semantics.html#the-link-element">link</a></code> element <em>is</em> required, but whether a
<code><a href="semantics.html#the-link-element">link</a></code> element represents a hyperlink or not depends on
the value of the <code title="attr-link-rel"><a href="semantics.html#attr-link-rel">rel</a></code> attribute
of that element.</p>
</div><p>The <dfn id="attr-hyperlink-target" title="attr-hyperlink-target"><code>target</code></dfn>
attribute, if present, must be a <a href="browsers.html#valid-browsing-context-name-or-keyword">valid browsing context name
or keyword</a>. It gives the name of the <a href="browsers.html#browsing-context">browsing
context</a> that will be used. </p><p>The <dfn id="ping" title="attr-hyperlink-ping"><code>ping</code></dfn> attribute, if
present, gives the URLs of the resources that are interested in
being notified if the user follows the hyperlink. The value must be
a <a href="common-microsyntaxes.html#set-of-space-separated-tokens">set of space-separated tokens</a>, each of which must be a
<a href="urls.html#valid-url" title="valid URL">valid URL</a>. </p><p>For <code><a href="text-level-semantics.html#the-a-element">a</a></code> and <code><a href="the-map-element.html#the-area-element">area</a></code> elements that represent
hyperlinks, the relationship between the document containing the
hyperlink and the destination resource indicated by the hyperlink is
given by the value of the element's <dfn id="attr-hyperlink-rel" title="attr-hyperlink-rel"><code>rel</code></dfn> attribute, which
must be a <a href="common-microsyntaxes.html#set-of-space-separated-tokens">set of space-separated tokens</a>. The <a href="#linkTypes">allowed values and their meanings</a> are defined
below. The <code title="attr-hyperlink-rel"><a href="#attr-hyperlink-rel">rel</a></code> 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.</p><p>The <dfn id="attr-hyperlink-media" title="attr-hyperlink-media"><code>media</code></dfn>
attribute describes for which media the target document was
designed. It is purely advisory. The value must be a <a href="common-microsyntaxes.html#valid-media-query">valid
media query</a>. The default, if the <code title="attr-hyperlink-media"><a href="#attr-hyperlink-media">media</a></code> attribute is omitted, is
"<code title="">all</code>".</p><p>The <dfn id="attr-hyperlink-hreflang" title="attr-hyperlink-hreflang"><code>hreflang</code></dfn>
attribute on hyperlink elements, if present, gives the language of
the linked resource. It is purely advisory. The value must be a
valid BCP 47 language code. <a href="references.html#refsBCP47">[BCP47]</a>
</p><p>The <dfn id="attr-hyperlink-type" title="attr-hyperlink-type"><code>type</code></dfn>
attribute, if present, gives the <a href="infrastructure.html#mime-type">MIME type</a> of the linked
resource. It is purely advisory. The value must be a <a href="infrastructure.html#valid-mime-type">valid
MIME type</a>, optionally with parameters. </p><div class="note">
<p>The <code title="attr-hyperlink-ping"><a href="#ping">ping</a></code> attribute is redundant
with pre-existing technologies like HTTP redirects and JavaScript
in allowing Web pages to track which off-site links are most
popular or allowing advertisers to track click-through rates.</p>
<p>However, the <code title="attr-hyperlink-ping"><a href="#ping">ping</a></code> attribute
provides these advantages to the user over those alternatives:</p>
<ul><li>It allows the user to see the final target URL
unobscured.</li>
<li>It allows the UA to inform the user about the out-of-band
notifications.</li>
<li>It allows the user to disable the notifications without losing
the underlying link functionality.</li>
<li>It allows the UA to optimize the use of available network
bandwidth so that the target page loads faster.</li>
</ul><p>Thus, while it is possible to track users without this feature,
authors are encouraged to use the <code title="attr-hyperlink-ping"><a href="#ping">ping</a></code> attribute so that the user
agent can make the user experience more transparent.</p>
</div><!-- resolving ping urls happens at audit time, so base URL changes
affect the values of ping attributes --><h4 id="linkTypes"><span class="secno">6.10.2 </span>Link types</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>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.</p><p>In this section, the term <i>referenced document</i> refers to
the resource identified by the element representing the link, and
the term <i>current document</i> refers to the resource within
which the element representing the link finds itself.</p><p>Except where otherwise specified, a keyword must not be specified
more than once per <code title="attr-rel-hyperlink">rel</code>
attribute.</p><p>The link types are <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a>
values.</p><p class="example">Thus, <code title="">rel="next"</code> is the
same as <code title="">rel="NEXT"</code>.</p><table><thead><tr><th rowspan="2">Link type</th>
<th colspan="2">Effect on...</th>
<th rowspan="2">Brief description</th>
</tr><tr><th><code><a href="semantics.html#the-link-element">link</a></code></th>
<th><code><a href="text-level-semantics.html#the-a-element">a</a></code> and <code><a href="the-map-element.html#the-area-element">area</a></code></th>
</tr></thead><tbody><tr><td><code title="rel-alternate"><a href="#link-type-alternate">alternate</a></code></td> <!-- second most used <link rel> value -->
<td><a href="semantics.html#hyperlink-link" title="hyperlink link">Hyperlink</a></td>
<td><a href="#hyperlink">Hyperlink</a></td>
<td>Gives alternate representations of the current document.</td>
</tr><tr><td><code title="rel-archives"><a href="#link-type-archives">archives</a></code></td>
<td><a href="semantics.html#hyperlink-link" title="hyperlink link">Hyperlink</a></td>
<td><a href="#hyperlink">Hyperlink</a></td>
<td>Provides a link to a collection of records, documents, or other materials of historical interest.</td>
</tr><tr><td><code title="rel-author"><a href="#link-type-author">author</a></code></td>
<td><a href="semantics.html#hyperlink-link" title="hyperlink link">Hyperlink</a></td>
<td><a href="#hyperlink">Hyperlink</a></td>
<td>Gives a link to the current document's author.</td>
</tr><tr><td><code title="rel-bookmark"><a href="#link-type-bookmark">bookmark</a></code></td> <!-- fourth most used <a rel> value -->
<td><em>not allowed</em></td>
<td><a href="#hyperlink">Hyperlink</a></td>
<td>Gives the permalink for the nearest ancestor section.</td>
</tr><!-- (commented out on the assumption that rel=contact is really XFN)
<tr>
<td><code title="rel-contact">contact</code></td> <!- 8th most used <a rel> value ->
<td><span title="hyperlink link">Hyperlink</span></td>
<td><span>Hyperlink</span></td>
<td>Gives a link to contact information for the current document.</td>
</tr>
--><tr><td><code title="rel-external"><a href="#link-type-external">external</a></code></td> <!-- fifth and sixth most used <a rel> value (sixth is "external nofollow") -->
<td><em>not allowed</em></td>
<td><a href="#hyperlink">Hyperlink</a></td>
<td>Indicates that the referenced document is not part of the same site as the current document.</td>
</tr><tr><td><code title="rel-first"><a href="#link-type-first">first</a></code></td>
<td><a href="semantics.html#hyperlink-link" title="hyperlink link">Hyperlink</a></td>
<td><a href="#hyperlink">Hyperlink</a></td>
<td>Indicates that the current document is a part of a series, and that the first document in the series is the referenced document.</td>
</tr><tr><td><code title="rel-help"><a href="#link-type-help">help</a></code></td>
<td><a href="semantics.html#hyperlink-link" title="hyperlink link">Hyperlink</a></td>
<td><a href="#hyperlink">Hyperlink</a></td>
<td>Provides a link to context-sensitive help.</td>
</tr><tr><td><code title="rel-icon"><a href="#rel-icon">icon</a></code></td> <!-- link rel="shortcut icon" and its ilk are the fourth, sixth, and ninth most used values -->
<td><a href="semantics.html#external-resource-link" title="external resource link">External Resource</a></td>
<td><em>not allowed</em></td>
<td>Imports an icon to represent the current document.</td>
</tr><tr><td><code title="rel-index"><a href="#link-type-index">index</a></code></td> <!-- used more than "top" and "contents" on <link> (though on <a>, "contents" wins) -->
<td><a href="semantics.html#hyperlink-link" title="hyperlink link">Hyperlink</a></td>
<td><a href="#hyperlink">Hyperlink</a></td>
<td>Gives a link to the document that provides a table of contents or index listing the current document.</td>
</tr><tr><td><code title="rel-last"><a href="#link-type-last">last</a></code></td>
<td><a href="semantics.html#hyperlink-link" title="hyperlink link">Hyperlink</a></td>
<td><a href="#hyperlink">Hyperlink</a></td>
<td>Indicates that the current document is a part of a series, and that the last document in the series is the referenced document.</td>
</tr><tr><td><code title="rel-license"><a href="#link-type-license">license</a></code></td> <!-- seventh most used <a rel> value -->
<td><a href="semantics.html#hyperlink-link" title="hyperlink link">Hyperlink</a></td>
<td><a href="#hyperlink">Hyperlink</a></td>
<td>Indicates that the main content of the current document is covered by the copyright license described by the referenced document.</td>
</tr><tr><td><code title="rel-next"><a href="#link-type-next">next</a></code></td>
<td><a href="semantics.html#hyperlink-link" title="hyperlink link">Hyperlink</a></td>
<td><a href="#hyperlink">Hyperlink</a></td>
<td>Indicates that the current document is a part of a series, and that the next document in the series is the referenced document.</td>
</tr><tr><td><code title="rel-nofollow"><a href="#link-type-nofollow">nofollow</a></code></td> <!-- most used <a rel> value (and sixth most used is "external nofollow") -->
<td><em>not allowed</em></td>
<td><a href="#hyperlink">Hyperlink</a></td>
<td>Indicates that the current document's original author or publisher does not endorse the referenced document.</td>
</tr><tr><td><code title="rel-noreferrer"><a href="#link-type-noreferrer">noreferrer</a></code></td>
<td><em>not allowed</em></td>
<td><a href="#hyperlink">Hyperlink</a></td>
<td>Requires that the user agent not send an HTTP <code title="">Referer</code> (sic) header if the user follows the hyperlink.</td>
</tr><tr><td><code title="rel-pingback"><a href="#link-type-pingback">pingback</a></code></td>
<td><a href="semantics.html#external-resource-link" title="external resource link">External Resource</a></td>
<td><em>not allowed</em></td>
<td>Gives the address of the pingback server that handles pingbacks to the current document.</td>
</tr><tr><td><code title="rel-prefetch"><a href="#link-type-prefetch">prefetch</a></code></td>
<td><a href="semantics.html#external-resource-link" title="external resource link">External Resource</a></td>
<td><em>not allowed</em></td>
<td>Specifies that the target resource should be preemptively cached.</td>
</tr><tr><td><code title="rel-prev"><a href="#link-type-prev">prev</a></code></td> <!-- prev is used more than previous -->
<td><a href="semantics.html#hyperlink-link" title="hyperlink link">Hyperlink</a></td>
<td><a href="#hyperlink">Hyperlink</a></td>
<td>Indicates that the current document is a part of a series, and that the previous document in the series is the referenced document.</td>
</tr><tr><td><code title="rel-search"><a href="#link-type-search">search</a></code></td> <!-- used quite a bit -->
<td><a href="semantics.html#hyperlink-link" title="hyperlink link">Hyperlink</a></td>
<td><a href="#hyperlink">Hyperlink</a></td>
<td>Gives a link to a resource that can be used to search through the current document and its related pages.</td>
</tr><tr><td><code title="rel-stylesheet"><a href="#link-type-stylesheet">stylesheet</a></code></td> <!-- most commonly used <link rel> value, variants came in 7th, 8th, 12th, 17th... -->
<td><a href="semantics.html#external-resource-link" title="external resource link">External Resource</a></td>
<td><em>not allowed</em></td>
<td>Imports a stylesheet.</td>
</tr><tr><td><code title="rel-sidebar"><a href="#link-type-sidebar">sidebar</a></code></td> <!-- used quite a bit -->
<td><a href="semantics.html#hyperlink-link" title="hyperlink link">Hyperlink</a></td>
<td><a href="#hyperlink">Hyperlink</a></td>
<td>Specifies that the referenced document, if retrieved, is intended to be shown in the browser's sidebar (if it has one).</td>
</tr><tr><td><code title="rel-tag"><a href="#link-type-tag">tag</a></code></td> <!-- second and third most used <a rel> value (third is technically "category tag"). -->
<td><a href="semantics.html#hyperlink-link" title="hyperlink link">Hyperlink</a></td>
<td><a href="#hyperlink">Hyperlink</a></td>
<td>Gives a tag (identified by the given address) that applies to the current document.</td>
</tr><tr><td><code title="rel-up"><a href="#link-type-up">up</a></code></td>
<td><a href="semantics.html#hyperlink-link" title="hyperlink link">Hyperlink</a></td>
<td><a href="#hyperlink">Hyperlink</a></td>
<td>Provides a link to a document giving the context for the current document.</td>
</tr></tbody></table><!-- v2 ideas:
* rel="script"
* rel="related" // see also
* http://microformats.org/wiki/rel-enclosure
--><h5 id="link-type-alternate"><span class="secno">6.10.2.1 </span>Link type "<dfn title="rel-alternate"><code>alternate</code></dfn>"</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="rel-alternate"><a href="#link-type-alternate">alternate</a></code> keyword may be
used with <code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="text-level-semantics.html#the-a-element">a</a></code>, and <code><a href="the-map-element.html#the-area-element">area</a></code>
elements. For <code><a href="semantics.html#the-link-element">link</a></code> elements, if the <code title="attr-link-rel"><a href="semantics.html#attr-link-rel">rel</a></code> attribute does not also contain the
keyword <code title="rel-stylesheet"><a href="#link-type-stylesheet">stylesheet</a></code>, it creates a
<a href="semantics.html#hyperlink-link" title="hyperlink link">hyperlink</a>; but if it
<em>does</em> also contain the keyword <code title="rel-stylesheet"><a href="#link-type-stylesheet">stylesheet</a></code>, the <code title="rel-alternate"><a href="#link-type-alternate">alternate</a></code> keyword instead modifies the
meaning of the <code title="rel-stylesheet"><a href="#link-type-stylesheet">stylesheet</a></code>
keyword in the way described for that keyword, and the rest of this
subsection doesn't apply.</p><p>The <code title="rel-alternate"><a href="#link-type-alternate">alternate</a></code> keyword
indicates that the referenced document is an alternate
representation of the current document.</p><p>The nature of the referenced document is given by the <code title="attr-hyperlink-media"><a href="#attr-hyperlink-media">media</a></code>, <code title="attr-hyperlink-hreflang"><a href="#attr-hyperlink-hreflang">hreflang</a></code>, and <code title="attr-hyperlink-type"><a href="#attr-hyperlink-type">type</a></code> attributes.</p><p>If the <code title="rel-alternate"><a href="#link-type-alternate">alternate</a></code> keyword is
used with the <code title="attr-hyperlink-media"><a href="#attr-hyperlink-media">media</a></code>
attribute, it indicates that the referenced document is intended for
use with the media specified.</p><p>If the <code title="rel-alternate"><a href="#link-type-alternate">alternate</a></code> keyword is
used with the <code title="attr-hyperlink-hreflang"><a href="#attr-hyperlink-hreflang">hreflang</a></code>
attribute, and that attribute's value differs from the <a href="infrastructure.html#root-element">root
element</a>'s <a href="elements.html#language">language</a>, it indicates that the
referenced document is a translation.</p><p>If the <code title="rel-alternate"><a href="#link-type-alternate">alternate</a></code> keyword is
used with the <code title="attr-hyperlink-type"><a href="#attr-hyperlink-type">type</a></code>
attribute, it indicates that the referenced document is a
reformulation of the current document in the specified format.</p><p>The <code title="attr-hyperlink-media"><a href="#attr-hyperlink-media">media</a></code>, <code title="attr-hyperlink-hreflang"><a href="#attr-hyperlink-hreflang">hreflang</a></code>, and <code title="attr-hyperlink-type"><a href="#attr-hyperlink-type">type</a></code> attributes can be combined
when specified with the <code title="rel-alternate"><a href="#link-type-alternate">alternate</a></code>
keyword.</p><div class="example">
<p>For example, the following link is a French translation that
uses the PDF format:</p>
<pre><link rel=alternate type=application/pdf hreflang=fr href=manual-fr></pre>
</div><p>The <code title="rel-alternate"><a href="#link-type-alternate">alternate</a></code> link
relationship is transitive — that is, if a document links to
two other documents with the link type "<code title="rel-alternate"><a href="#link-type-alternate">alternate</a></code>", 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.</p><h5 id="link-type-archives"><span class="secno">6.10.2.2 </span>Link type "<dfn title="rel-archives"><code>archives</code></dfn>"</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="rel-archives"><a href="#link-type-archives">archives</a></code> keyword may be
used with <code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="text-level-semantics.html#the-a-element">a</a></code>, and <code><a href="the-map-element.html#the-area-element">area</a></code>
elements. For <code><a href="semantics.html#the-link-element">link</a></code> elements, it creates a <a href="semantics.html#hyperlink-link" title="hyperlink link">hyperlink</a>.</p><p>The <code title="rel-archives"><a href="#link-type-archives">archives</a></code> keyword indicates
that the referenced document describes a collection of records,
documents, or other materials of historical interest.</p><p class="example">A blog's index page could link to an index of the
blog's past posts with <code title="">rel="archives"</code>.</p><h5 id="link-type-author"><span class="secno">6.10.2.3 </span>Link type "<dfn title="rel-author"><code>author</code></dfn>"</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="rel-author"><a href="#link-type-author">author</a></code> keyword may be
used with <code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="text-level-semantics.html#the-a-element">a</a></code>, and <code><a href="the-map-element.html#the-area-element">area</a></code>
elements. For <code><a href="semantics.html#the-link-element">link</a></code> elements, it creates a <a href="semantics.html#hyperlink-link" title="hyperlink link">hyperlink</a>.</p><p>For <code><a href="text-level-semantics.html#the-a-element">a</a></code> and <code><a href="the-map-element.html#the-area-element">area</a></code> elements, the <code title="rel-author"><a href="#link-type-author">author</a></code> keyword indicates that the
referenced document provides further information about the author of
the nearest <code><a href="sections.html#the-article-element">article</a></code> element ancestor of the element
defining the hyperlink, if there is one, or of the page as a whole,
otherwise.</p><p>For <code><a href="semantics.html#the-link-element">link</a></code> elements, the <code title="rel-author"><a href="#link-type-author">author</a></code> keyword indicates that the
referenced document provides further information about the author
for the page as a whole.</p><p class="note">The "referenced document" can be, and often is, a
<code title="">mailto:</code> URL giving the e-mail address of the
author. <a href="references.html#refsMAILTO">[MAILTO]</a></p><h5 id="link-type-bookmark"><span class="secno">6.10.2.4 </span>Link type "<dfn title="rel-bookmark"><code>bookmark</code></dfn>"</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="rel-bookmark"><a href="#link-type-bookmark">bookmark</a></code> keyword may be
used with <code><a href="text-level-semantics.html#the-a-element">a</a></code> and <code><a href="the-map-element.html#the-area-element">area</a></code> elements.</p><p>The <code title="rel-bookmark"><a href="#link-type-bookmark">bookmark</a></code> keyword gives a
permalink for the nearest ancestor <code><a href="sections.html#the-article-element">article</a></code> element of
the linking element in question, or of <a href="#associatedSection">the section the linking element is most
closely associated with</a>, if there are no ancestor
<code><a href="sections.html#the-article-element">article</a></code> elements.</p><div class="example">
<p>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.</p>
<pre> ...
<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>
...</pre>
</div><!-- (commented out on the assumption that rel=contact is really XFN)
<h5>Link type "<dfn title="rel-contact"><code>contact</code></dfn>"</h5>
<p>The <code title="rel-contact">contact</code> keyword may be used
with <code>link</code>, <code>a</code>, and <code>area</code>
elements. For <code>link</code> elements, it creates a <span
title="hyperlink link">hyperlink</span>.</p>
<p>For <code>a</code> and <code>area</code> elements, the <code
title="rel-contact">contact</code> keyword indicates that the
referenced document provides further contact information for the
author of the nearest <code>article</code> element ancestor of the
element defining the hyperlink, if there is one, or of the page as a
whole, otherwise.</p>
<div class="impl">
<p>User agents must treat any hyperlink in an <code>address</code>
element as having the <code title="rel-contact">contact</code> link
type specified.</p>
</div>
<p>For <code>link</code> elements, the <code
title="rel-contact">contact</code> keyword indicates that the
referenced document provides further contact information for the
page as a whole.</p>
--><h5 id="link-type-external"><span class="secno">6.10.2.5 </span>Link type "<dfn title="rel-external"><code>external</code></dfn>"</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="rel-external"><a href="#link-type-external">external</a></code> keyword may be
used with <code><a href="text-level-semantics.html#the-a-element">a</a></code> and <code><a href="the-map-element.html#the-area-element">area</a></code> elements.</p><p>The <code title="rel-external"><a href="#link-type-external">external</a></code> keyword indicates
that the link is leading to a document that is not part of the site
that the current document forms a part of.</p><h5 id="link-type-help"><span class="secno">6.10.2.6 </span>Link type "<dfn title="rel-help"><code>help</code></dfn>"</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="rel-help"><a href="#link-type-help">help</a></code> keyword may be used with
<code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="text-level-semantics.html#the-a-element">a</a></code>, and <code><a href="the-map-element.html#the-area-element">area</a></code>
elements. For <code><a href="semantics.html#the-link-element">link</a></code> elements, it creates a <a href="semantics.html#hyperlink-link" title="hyperlink link">hyperlink</a>.</p><p>For <code><a href="text-level-semantics.html#the-a-element">a</a></code> and <code><a href="the-map-element.html#the-area-element">area</a></code> elements, the <code title="rel-help"><a href="#link-type-help">help</a></code> keyword indicates that the referenced
document provides further help information for the parent of the
element defining the hyperlink, and its children.</p><div class="example">
<p>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>
<pre> <p><label> Topic: <input name=topic> <a href="help/topic.html" rel="help">(Help)</a></label></p></pre>
</div><p>For <code><a href="semantics.html#the-link-element">link</a></code> elements, the <code title="rel-help"><a href="#link-type-help">help</a></code> keyword indicates that the referenced
document provides help for the page as a whole.</p><h5 id="rel-icon"><span class="secno">6.10.2.7 </span>Link type "<dfn title="rel-icon"><code>icon</code></dfn>"</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="rel-icon"><a href="#rel-icon">icon</a></code> keyword may be used with
<code><a href="semantics.html#the-link-element">link</a></code> elements, for which it creates an <a href="semantics.html#external-resource-link" title="external resource link">external resource link</a>.</p><p>Icons could be auditory icons, visual icons, or other kinds of
icons. </p><p>The <dfn id="attr-link-sizes" title="attr-link-sizes"><code>sizes</code></dfn>
attribute gives the sizes of icons for visual media.</p><p>If specified, the attribute must have a value that is an
<a href="common-microsyntaxes.html#unordered-set-of-unique-space-separated-tokens">unordered set of unique space-separated tokens</a>. The
values must all be either <code title="attr-link-sizes-any"><a href="#attr-link-sizes-any">any</a></code> or a value that consists of
two <a href="common-microsyntaxes.html#valid-non-negative-integer" title="valid non-negative integer">valid non-negative
integers</a> that do not have a leading U+0030 DIGIT ZERO (0)
character and that are separated by a single U+0078 LATIN SMALL
LETTER X character (x).</p><p>The keywords represent icon sizes.</p><p>The <dfn id="attr-link-sizes-any" title="attr-link-sizes-any"><code>any</code></dfn> keyword
represents that the resource contains a scalable icon, e.g. as
provided by an SVG image.</p><p>The keywords specified on the <code title="attr-link-sizes"><a href="#attr-link-sizes">sizes</a></code> attribute must not represent
icon sizes that are not actually available in the linked
resource.</p><div class="example">
<p>The following snippet shows the top part of an application with
several icons.</p>
<pre><!DOCTYPE HTML>
<html>
<head>
<title>lsForums — Inbox</title>
<link rel=icon href=favicon.png sizes="16x16">
<link rel=icon href=windows.ico sizes="32x32 48x48">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="59x60">
<link rel=icon href=gnome.svg sizes="any">
<link rel=stylesheet href=lsforums.css>
<script src=lsforums.js></script>
<meta name=application-name content="lsForums">
</head>
<body>
...</pre>
</div><h5 id="link-type-license"><span class="secno">6.10.2.8 </span>Link type "<dfn title="rel-license"><code>license</code></dfn>"</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="rel-license"><a href="#link-type-license">license</a></code> keyword may be used
with <code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="text-level-semantics.html#the-a-element">a</a></code>, and <code><a href="the-map-element.html#the-area-element">area</a></code>
elements. For <code><a href="semantics.html#the-link-element">link</a></code> elements, it creates a <a href="semantics.html#hyperlink-link" title="hyperlink link">hyperlink</a>.</p><p>The <code title="rel-license"><a href="#link-type-license">license</a></code> keyword indicates
that the referenced document provides the copyright license terms
under which the main content of the current document is
provided.</p><p>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.</p><div class="example">
<p>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:</p>
<pre><!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>
<dd><img src="/pix/39627052_fd8dcd98b5.jpg">
<dt>Kissat
</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></pre>
<p>In this case the <code title="rel-license"><a href="#link-type-license">license</a></code>
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.</p>
</div><h5 id="link-type-nofollow"><span class="secno">6.10.2.9 </span>Link type "<dfn title="rel-nofollow"><code>nofollow</code></dfn>"</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="rel-nofollow"><a href="#link-type-nofollow">nofollow</a></code> keyword may be
used with <code><a href="text-level-semantics.html#the-a-element">a</a></code> and <code><a href="the-map-element.html#the-area-element">area</a></code> elements.</p><p>The <code title="rel-nofollow"><a href="#link-type-nofollow">nofollow</a></code> 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.</p><h5 id="link-type-noreferrer"><span class="secno">6.10.2.10 </span>Link type "<dfn title="rel-noreferrer"><code>noreferrer</code></dfn>"</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="rel-noreferrer"><a href="#link-type-noreferrer">noreferrer</a></code> keyword may be
used with <code><a href="text-level-semantics.html#the-a-element">a</a></code> and <code><a href="the-map-element.html#the-area-element">area</a></code> elements.</p><p>It indicates that no referrer information is to be leaked when
following the link.</p><!-- v2: Would be nice to apply this to other elements too,
e.g. letting <img> or CSS or <video> hide the referrer --><h5 id="link-type-pingback"><span class="secno">6.10.2.11 </span>Link type "<dfn title="rel-pingback"><code>pingback</code></dfn>"</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="rel-pingback"><a href="#link-type-pingback">pingback</a></code> keyword may be
used with <code><a href="semantics.html#the-link-element">link</a></code> elements, for which it creates an <a href="semantics.html#external-resource-link" title="external resource link">external resource link</a>.</p><p>For the semantics of the <code title="rel-pingback"><a href="#link-type-pingback">pingback</a></code> keyword, see the Pingback 1.0
specification. <a href="references.html#refsPINGBACK">[PINGBACK]</a></p><h5 id="link-type-prefetch"><span class="secno">6.10.2.12 </span>Link type "<dfn title="rel-prefetch"><code>prefetch</code></dfn>"</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="rel-prefetch"><a href="#link-type-prefetch">prefetch</a></code> keyword may be
used with <code><a href="semantics.html#the-link-element">link</a></code> elements, for which it creates an <a href="semantics.html#external-resource-link" title="external resource link">external resource link</a>.</p><p>The <code title="rel-prefetch"><a href="#link-type-prefetch">prefetch</a></code> 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.</p><p>There is no default type for resources given by the <code title="rel-prefetch"><a href="#link-type-prefetch">prefetch</a></code> keyword.</p><h5 id="link-type-search"><span class="secno">6.10.2.13 </span>Link type "<dfn title="rel-search"><code>search</code></dfn>"</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="rel-search"><a href="#link-type-search">search</a></code> keyword may be used
with <code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="text-level-semantics.html#the-a-element">a</a></code>, and <code><a href="the-map-element.html#the-area-element">area</a></code>
elements. For <code><a href="semantics.html#the-link-element">link</a></code> elements, it creates a <a href="semantics.html#hyperlink-link" title="hyperlink link">hyperlink</a>.</p><p>The <code title="rel-search"><a href="#link-type-search">search</a></code> keyword indicates that
the referenced document provides an interface specifically for
searching the document and its related resources.</p><p class="note">OpenSearch description documents can be used with
<code><a href="semantics.html#the-link-element">link</a></code> elements and the <code title="rel-search"><a href="#link-type-search">search</a></code> link type to enable user agents to
autodiscover search interfaces. <a href="references.html#refsOPENSEARCH">[OPENSEARCH]</a></p><h5 id="link-type-stylesheet"><span class="secno">6.10.2.14 </span>Link type "<dfn title="rel-stylesheet"><code>stylesheet</code></dfn>"</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="rel-stylesheet"><a href="#link-type-stylesheet">stylesheet</a></code> keyword may be
used with <code><a href="semantics.html#the-link-element">link</a></code> elements, for which it creates an <a href="semantics.html#external-resource-link" title="external resource link">external resource link</a> that
contributes to the <a href="semantics.html#styling">styling processing model</a>.</p><p>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.</p><p>If the <code title="rel-alternate"><a href="#link-type-alternate">alternate</a></code> keyword is
also specified on the <code><a href="semantics.html#the-link-element">link</a></code> element, then <dfn id="the-link-is-an-alternative-stylesheet">the link
is an alternative stylesheet</dfn>; in this case, the <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute must be specified on the
<code><a href="semantics.html#the-link-element">link</a></code> element, with a non-empty value.</p><p>The default type for resources given by the <code title="rel-stylesheet"><a href="#link-type-stylesheet">stylesheet</a></code> keyword is <code title="">text/css</code>.</p><h5 id="link-type-sidebar"><span class="secno">6.10.2.15 </span>Link type "<dfn title="rel-sidebar"><code>sidebar</code></dfn>"</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="rel-sidebar"><a href="#link-type-sidebar">sidebar</a></code> keyword may be used
with <code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="text-level-semantics.html#the-a-element">a</a></code>, and <code><a href="the-map-element.html#the-area-element">area</a></code>
elements. For <code><a href="semantics.html#the-link-element">link</a></code> elements, it creates a <a href="semantics.html#hyperlink-link" title="hyperlink link">hyperlink</a>.</p><p>The <code title="rel-sidebar"><a href="#link-type-sidebar">sidebar</a></code> keyword indicates
that the referenced document, if retrieved, is intended to be shown
in a <a href="browsers.html#secondary-browsing-context">secondary browsing context</a> (if possible), instead
of in the current <a href="browsers.html#browsing-context">browsing context</a>.</p><p>A <a href="#hyperlink" title="hyperlink">hyperlink element</a> with the <code title="rel-sidebar"><a href="#link-type-sidebar">sidebar</a></code> keyword specified is a <dfn id="rel-sidebar-hyperlink" title="rel-sidebar-hyperlink">sidebar hyperlink</dfn>.</p><h5 id="link-type-tag"><span class="secno">6.10.2.16 </span>Link type "<dfn title="rel-tag"><code>tag</code></dfn>"</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="rel-tag"><a href="#link-type-tag">tag</a></code> keyword may be used
with <code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="text-level-semantics.html#the-a-element">a</a></code>, and <code><a href="the-map-element.html#the-area-element">area</a></code>
elements. For <code><a href="semantics.html#the-link-element">link</a></code> elements, it creates a <a href="semantics.html#hyperlink-link" title="hyperlink link">hyperlink</a>.</p><p>The <code title="rel-tag"><a href="#link-type-tag">tag</a></code> keyword indicates that the
<em>tag</em> that the referenced document represents applies to the
current document.</p><p class="note">Since it indicates that the tag <em>applies to the
current document</em>, it would be inappropriate to use this keyword
in the markup of a <a href="commands.html#tag-cloud">tag cloud</a>, which lists
the popular tag across a set of pages.</p><h5 id="hierarchical-link-types"><span class="secno">6.10.2.17 </span>Hierarchical link types</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Some documents form part of a hierarchical structure of
documents.</p><p>A hierarchical structure of documents is one where each document
can have various subdocuments. The document of which a document is a
subdocument is said to be the document's <em>parent</em>. A document
with no parent forms the top of the hierarchy.</p><p>A document may be part of multiple hierarchies.</p><h6 id="link-type-index"><span class="secno">6.10.2.17.1 </span>Link type "<dfn title="rel-index"><code>index</code></dfn>"</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="rel-index"><a href="#link-type-index">index</a></code> keyword may be used with
<code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="text-level-semantics.html#the-a-element">a</a></code>, and <code><a href="the-map-element.html#the-area-element">area</a></code>
elements. For <code><a href="semantics.html#the-link-element">link</a></code> elements, it creates a <a href="semantics.html#hyperlink-link" title="hyperlink link">hyperlink</a>.</p><p>The <code title="rel-index"><a href="#link-type-index">index</a></code> keyword indicates that
the document is part of a hierarchical structure, and that the link
is leading to the document that is the top of the hierarchy. It
conveys more information when used with the <code title="rel-up"><a href="#link-type-up">up</a></code> keyword (q.v.).</p><h6 id="link-type-up"><span class="secno">6.10.2.17.2 </span>Link type "<dfn title="rel-up"><code>up</code></dfn>"</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="rel-up"><a href="#link-type-up">up</a></code> keyword may be used with
<code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="text-level-semantics.html#the-a-element">a</a></code>, and <code><a href="the-map-element.html#the-area-element">area</a></code>
elements. For <code><a href="semantics.html#the-link-element">link</a></code> elements, it creates a <a href="semantics.html#hyperlink-link" title="hyperlink link">hyperlink</a>.</p><p>The <code title="rel-up"><a href="#link-type-up">up</a></code> keyword indicates that the
document is part of a hierarchical structure, and that the link is
leading to a document that is an ancestor of the current
document.</p><p>The <code title="rel-up"><a href="#link-type-up">up</a></code> keyword may be repeated within
a <code title="attr-hyperlink-rel"><a href="#attr-hyperlink-rel">rel</a></code> attribute to indicate
the hierarchical distance from the current document to the
referenced document. If it occurs only once, then the link is
leading to the current document's parent; each additional occurrence
of the keyword represents one further level. If the <code title="rel-index"><a href="#link-type-index">index</a></code> keyword is also present, then the
number of <code title="rel-up"><a href="#link-type-up">up</a></code> keywords is the depth of
the current page relative to the top of the hierarchy. Only one link
is created for the set of one or more <code title="rel-up"><a href="#link-type-up">up</a></code>
keywords and, if present, the <code title="rel-index"><a href="#link-type-index">index</a></code>
keyword.</p><p>If the page is part of multiple hierarchies, then they should be
described in different <a href="content-models.html#paragraph" title="paragraph">paragraphs</a>. </p><div class="example">
<p>This can be used to mark up a navigation style sometimes known
as bread crumbs. In the following example, the current page can be
reached via two paths.</p>
<pre><nav>
<p>
<a href="/" rel="index up up up">Main</a> >
<a href="/products/" rel="up up">Products</a> >
<a href="/products/dishwashers/" rel="up">Dishwashers</a> >
<a>Second hand</a>
</p>
<p>
<a href="/" rel="index up up">Main</a> >
<a href="/second-hand/" rel="up">Second hand</a> >
<a>Dishwashers</a>
</p>
</nav></pre>
</div><p class="note">The <code title="dom-a-relList"><a href="#dom-a-rellist">relList</a></code> IDL
attribute (e.g. on the <code><a href="text-level-semantics.html#the-a-element">a</a></code> element) does not currently
represent multiple <code title="rel-up"><a href="#link-type-up">up</a></code> keywords (the
interface hides duplicates).</p><h5 id="sequential-link-types"><span class="secno">6.10.2.18 </span>Sequential link types</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Some documents form part of a sequence of documents.</p><p>A sequence of documents is one where each document can have a
<em>previous sibling</em> and a <em>next sibling</em>. A document
with no previous sibling is the start of its sequence, a document
with no next sibling is the end of its sequence.</p><p>A document may be part of multiple sequences.</p><h6 id="link-type-first"><span class="secno">6.10.2.18.1 </span>Link type "<dfn title="rel-first"><code>first</code></dfn>"</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="rel-first"><a href="#link-type-first">first</a></code> keyword may be used with
<code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="text-level-semantics.html#the-a-element">a</a></code>, and <code><a href="the-map-element.html#the-area-element">area</a></code>
elements. For <code><a href="semantics.html#the-link-element">link</a></code> elements, it creates a <a href="semantics.html#hyperlink-link" title="hyperlink link">hyperlink</a>.</p><p>The <code title="rel-first"><a href="#link-type-first">first</a></code> keyword indicates that
the document is part of a sequence, and that the link is leading to
the document that is the first logical document in the sequence.</p><h6 id="link-type-last"><span class="secno">6.10.2.18.2 </span>Link type "<dfn title="rel-last"><code>last</code></dfn>"</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="rel-last"><a href="#link-type-last">last</a></code> keyword may be used with
<code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="text-level-semantics.html#the-a-element">a</a></code>, and <code><a href="the-map-element.html#the-area-element">area</a></code>
elements. For <code><a href="semantics.html#the-link-element">link</a></code> elements, it creates a <a href="semantics.html#hyperlink-link" title="hyperlink link">hyperlink</a>.</p><p>The <code title="rel-last"><a href="#link-type-last">last</a></code> keyword indicates that the
document is part of a sequence, and that the link is leading to the
document that is the last logical document in the sequence.</p><h6 id="link-type-next"><span class="secno">6.10.2.18.3 </span>Link type "<dfn title="rel-next"><code>next</code></dfn>"</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="rel-next"><a href="#link-type-next">next</a></code> keyword may be used with
<code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="text-level-semantics.html#the-a-element">a</a></code>, and <code><a href="the-map-element.html#the-area-element">area</a></code>
elements. For <code><a href="semantics.html#the-link-element">link</a></code> elements, it creates a <a href="semantics.html#hyperlink-link" title="hyperlink link">hyperlink</a>.</p><p>The <code title="rel-next"><a href="#link-type-next">next</a></code> 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.</p><h6 id="link-type-prev"><span class="secno">6.10.2.18.4 </span>Link type "<dfn title="rel-prev"><code>prev</code></dfn>"</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code title="rel-prev"><a href="#link-type-prev">prev</a></code> keyword may be used with
<code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="text-level-semantics.html#the-a-element">a</a></code>, and <code><a href="the-map-element.html#the-area-element">area</a></code>
elements. For <code><a href="semantics.html#the-link-element">link</a></code> elements, it creates a <a href="semantics.html#hyperlink-link" title="hyperlink link">hyperlink</a>.</p><p>The <code title="rel-prev"><a href="#link-type-prev">prev</a></code> 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.</p><h5 id="other-link-types"><span class="secno">6.10.2.19 </span>Other link types</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><dfn id="concept-rel-extensions" title="concept-rel-extensions">Extensions to the predefined
set of link types</dfn> may be registered in the <a href="http://wiki.whatwg.org/wiki/RelExtensions">WHATWG Wiki
RelExtensions page</a>. <a href="references.html#refsWHATWGWIKI">[WHATWGWIKI]</a></p><p>Anyone is free to edit the WHATWG Wiki RelExtensions page at any
time to add a type. Extension types must be specified with the
following information:</p><dl><dt>Keyword</dt>
<dd><p>The actual value being defined. The value should not be
confusingly similar to any other defined value (e.g. differing only
in case).</p></dd>
<dt>Effect on... <code><a href="semantics.html#the-link-element">link</a></code></dt>
<dd>
<p>One of the following:</p>
<dl><dt>not allowed</dt>
<dd>The keyword is not allowed to be specified on
<code><a href="semantics.html#the-link-element">link</a></code> elements.</dd>
<dt>Hyperlink</dt>
<dd>The keyword may be specified on a <code><a href="semantics.html#the-link-element">link</a></code> element;
it creates a <a href="semantics.html#hyperlink-link" title="hyperlink link">hyperlink
link</a>.</dd>
<dt>External Resource</dt>
<dd>The keyword may be specified on a <code><a href="semantics.html#the-link-element">link</a></code> element;
it creates a <a href="semantics.html#external-resource-link" title="external resource link">external
resource link</a>.</dd>
</dl></dd>
<dt>Effect on... <code><a href="text-level-semantics.html#the-a-element">a</a></code> and <code><a href="the-map-element.html#the-area-element">area</a></code></dt>
<dd>
<p>One of the following:</p>
<dl><dt>not allowed</dt>
<dd>The keyword is not allowed to be specified on <code><a href="text-level-semantics.html#the-a-element">a</a></code>
and <code><a href="the-map-element.html#the-area-element">area</a></code> elements.</dd>
<dt>Hyperlink</dt>
<dd>The keyword may be specified on <code><a href="text-level-semantics.html#the-a-element">a</a></code> and
<code><a href="the-map-element.html#the-area-element">area</a></code> elements.</dd>
</dl></dd>
<dt>Brief description</dt>
<dd><p>A short non-normative description of what the keyword's
meaning is.</p></dd>
<dt>Specification</dt>
<dd><p>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.</p></dd>
<dt>Synonyms</dt>
<dd><p>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.</p></dd>
<dt>Status</dt>
<dd>
<p>One of the following:</p>
<dl><dt>Proposed</dt>
<dd>The keyword has not received wide peer review and
approval. Someone has proposed it and is, or soon will be, using
it.</dd>
<dt>Ratified</dt>
<dd>The keyword has received wide peer review and approval. It
has a specification that unambiguously defines how to handle
pages that use the keyword, including when they use it in
incorrect ways.</dd>
<dt>Discontinued</dt>
<dd>The keyword has received wide peer review and it has been
found wanting. Existing pages are using this keyword, but new
pages should avoid it. The "brief description" and
"specification" entries will give details of what authors should
use instead, if anything.</dd>
</dl><p>If a keyword is found to be redundant with existing values, it
should be removed and listed as a synonym for the existing
value.</p>
<p>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.</p>
<p>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.</p>
<p>Anyone can change the status at any time, but should only do so
in accordance with the definitions above.</p>
</dd>
</dl><p>Types defined as extensions in the <a href="http://wiki.whatwg.org/wiki/RelExtensions">WHATWG Wiki
RelExtensions page</a> with the status "proposed" or "ratified" may
be used with the <code title="">rel</code> attribute on
<code><a href="semantics.html#the-link-element">link</a></code>, <code><a href="text-level-semantics.html#the-a-element">a</a></code>, and <code><a href="the-map-element.html#the-area-element">area</a></code> elements in
accordance to the "Effect on..." field. <a href="references.html#refsWHATWGWIKI">[WHATWGWIKI]</a></p></body></html>
--- NEW FILE: number-state.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.10.5.1.13 Number state — HTML5</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"/><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
p + * > li, dd li { margin: 1em 0; }
dt, dfn { font-weight: bold; font-style: normal; }
dt dfn { font-style: italic; }
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
pre em { font-weight: bolder; font-style: normal; }
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead { border-bottom: solid; }
table tbody th:first-child { border-left: solid; }
table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
img.extra { float: right; }
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
pre.css:first-line { color: #AAAA50; }
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; }
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
dl.domintro dd p { margin: 0.5em 0; }
dl.switch { padding-left: 2em; }
dl.switch > dt { text-indent: -1.5em; }
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
dl.triple { padding: 0 0 0 1em; }
dl.triple dt, dl.triple dd { margin: 0; display: inline }
dl.triple dt:after { content: ':'; }
dl.triple dd:after { content: '\A'; white-space: pre; }
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
a .diff-new { border-bottom: 1px blue solid; }
h2 { page-break-before: always; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; }
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
div.head p { margin: 0; }
div.head h1 { margin: 0; }
div.head .logo { float: right; margin: 0 1em; }
div.head .logo img { border: none } /* remove border from top image */
div.head dl { margin: 1em 0; }
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
body > .toc > li > * { margin-bottom: 0.5em; }
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
.toc, .toc li { list-style: none; }
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
.brief li { margin: 0; padding: 0; }
.brief li p { margin: 0; padding: 0; }
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
.category-list li { display: inline; }
.category-list li:not(:last-child)::after { content: ', '; }
.category-list li > span, .category-list li > a { text-transform: lowercase; }
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
.XXX > :first-child { margin-top: 0; }
p .XXX { line-height: 3em; }
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
.annotation :link, .annotation :visited { color: inherit; }
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
.annotation span { border: none ! important; }
.note { color: green; background: transparent; font-family: sans-serif; }
.warning { color: red; background: transparent; }
.note, .warning { font-weight: bolder; font-style: italic; }
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
.note p:first-child, .warning p:first-child { margin-top: 0; }
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
.warning:before { font-style: normal; }
p.note:before { content: 'Note: '; }
p.warning:before { content: '\26A0 Warning! '; }
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
h4 { position: relative; z-index: 3; }
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
.element {
background: #EEEEFF;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -1.15em;
height: 2em;
width: 0.9em;
background: #EEEEFF;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
td > .example:only-child { margin: 0 0 0 0.1em; }
.tall-and-narrow {
font-size: 0.6em;
column-width: 25em;
column-gap: 1em;
-moz-column-width: 25em;
-moz-column-gap: 1em;
-webkit-column-width: 25em;
-webkit-column-gap: 1em;
}
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
ul.domTree li li { list-style: none; }
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree span { font-style: italic; font-family: serif; }
ul.domTree .t1 code { color: purple; font-weight: bold; }
ul.domTree .t2 { font-style: normal; font-family: monospace; }
ul.domTree .t2 .name { color: black; font-weight: bold; }
ul.domTree .t2 .value { color: blue; font-weight: normal; }
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
ul.domTree .t7 code, .domTree .t8 code { color: green; }
ul.domTree .t10 code { color: teal; }
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
#configUI p label { display: block; }
#configUI #updateUI, #configUI .loginUI { text-align: center; }
#configUI input[type=button] { display: block; margin: auto; }
</style><style type="text/css">
.applies thead th > * { display: block; }
.applies thead code { display: block; }
.applies tbody th { whitespace: nowrap; }
.applies td { text-align: center; }
.applies .yes { background: yellow; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
#table-example-1 caption { padding-bottom: 0.5em; }
#table-example-1 thead, #table-example-1 tbody { border: none; }
#table-example-1 th, #table-example-1 td { border: solid thin; }
#table-example-1 th { font-weight: normal; }
#table-example-1 td { border-style: none solid; vertical-align: top; }
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
#table-example-1 tbody td:first-child::after { content: leader(". "); }
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
#table-example-1 tbody td:first-child + td { width: 10em; }
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
.apple-table-examples * { font-family: "Times", serif; }
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
.apple-table-examples td { text-align: right; vertical-align: top; }
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
.apple-table-examples sup { line-height: 0; }
</style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script>
function getCookie(name) {
var params = location.search.substr(1).split("&");
for (var index = 0; index < params.length; index++) {
if (params[index] == name)
return "1";
var data = params[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
var cookies = document.cookie.split("; ");
for (var index = 0; index < cookies.length; index++) {
var data = cookies[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
return null;
}
function load(script) {
var e = document.createElement('script');
e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
document.body.appendChild(e);
}
function init() {
if (location.search == '?slow-browser')
return;
var configUI = document.createElement('div');
configUI.id = 'configUI';
document.body.appendChild(configUI);
// load('reviewer.js'); // would need cross-site XHR
if (document.getElementById('head'))
load('toc.js');
load('styler.js');
// load('updater.js'); // would need cross-site XHR
load('dfn.js');
// load('status.js'); // would need cross-site XHR
if (getCookie('profile') == '1')
document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
fixBrokenLink();
}
</script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="states-of-the-type-attribute.html" title="4.10.5.1 States of the type attribute" rel="prev">
<link href="Overview.html#contents" title="Table of contents" rel="index">
<link href="common-input-element-attributes.html" title="4.10.5.2 Common input element attributes" rel="next">
</head><body onload="fixBrokenLink(); init()"><div class="head" id="head">
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
</div><div>
<a href="states-of-the-type-attribute.html">← 4.10.5.1 States of the type attribute</a> –
<a href="Overview.html#contents">Table of contents</a> –
<a href="common-input-element-attributes.html">4.10.5.2 Common input element attributes →</a>
<ol class="toc"><li><ol><li><ol><li><ol><li><ol><li><a href="number-state.html#number-state"><span class="secno">4.10.5.1.13 </span>Number state</a></li><li><a href="number-state.html#range-state"><span class="secno">4.10.5.1.14 </span>Range state</a></li><li><a href="number-state.html#color-state"><span class="secno">4.10.5.1.15 </span>Color state</a></li><li><a href="number-state.html#checkbox-state"><span class="secno">4.10.5.1.16 </span>Checkbox state</a></li><li><a href="number-state.html#radio-button-state"><span class="secno">4.10.5.1.17 </span>Radio Button state</a></li><li><a href="number-state.html#file-upload-state"><span class="secno">4.10.5.1.18 </span>File Upload state</a></li><li><a href="number-state.html#submit-button-state"><span class="secno">4.10.5.1.19 </span>Submit Button state</a></li><li><a href="number-state.html#image-button-state"><span class="secno">4.10.5.1.20 </span>Image Button state</a></li><li><a href="number-state.html#reset-button-state"><span class="secno">4.10.5.1.21 <span>Reset Button state</a></li><li><a href="number-state.html#button-state"><span class="secno">4.10.5.1.22 </span>Button state</a></li></ol></li></ol></li></ol></li></ol></li></ol></div>
<h6 id="number-state"><span class="secno">4.10.5.1.13 </span><dfn title="attr-input-type-number">Number</dfn> state</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="#represents">represents</a> a control
for setting the element's <a href="#concept-fe-value" title="concept-fe-value">value</a> to a string representing a
number.</p><p>The <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, if
specified, must have a value that is a <a href="common-microsyntaxes.html#valid-floating-point-number">valid floating point
number</a>.</p><!-- ok to set out-of-range value, we never know
when we might have to represent bogus input --><p>The <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code> attribute, if
specified, must have a value that is a <a href="common-microsyntaxes.html#valid-floating-point-number">valid floating point
number</a>. The <code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>
attribute, if specified, must have a value that is a <a href="common-microsyntaxes.html#valid-floating-point-number">valid
floating point number</a>.</p><p>The <a href="#concept-input-step-default" title="concept-input-step-default">default
step</a> is 1 (allowing only integers, unless the <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code> attribute has a non-integer
value).</p><div class="bookkeeping">
<p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
attributes, IDL attributes, and methods apply to the element:
<code title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
<code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
<code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
<code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
<code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
<code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>, and
<code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code> content attributes;
<code title="dom-input-list"><a href="#dom-input-list">list</a></code>,
<code title="dom-input-value"><a href="#dom-input-value">value</a></code>,
<code title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code>, and
<code title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code> IDL attributes;
<code title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code> and
<code title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
<p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
in mode <a href="#dom-input-value-value" title="dom-input-value-value">value</a>.</p>
<p>The <code title="event-input-input"><a href="#event-input-input">input</a></code> and <code title="event-input-change"><a href="#event-input-change">change</a></code> events apply.</p>
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
<code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
<code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
<code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
<code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
<code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
<code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
<code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
<code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
<code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
<code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
<code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
<code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
<code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
<code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>, and
<code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>.</p>
<p>The following IDL attributes and methods do not apply to the
element:
<code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
<code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
<code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
<code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>, and
<code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code> IDL attributes;
<code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code> and
<code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>
</div><h6 id="range-state"><span class="secno">4.10.5.1.14 </span><dfn title="attr-input-type-range">Range</dfn> state</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="#represents">represents</a> a control
for setting the element's <a href="#concept-fe-value" title="concept-fe-value">value</a> 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 <a href="#number-state" title="attr-input-type-number">Number</a> state.</p><p>The <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, if
specified, must have a value that is a <a href="common-microsyntaxes.html#valid-floating-point-number">valid floating point
number</a>.</p><!-- ok to set out-of-range value, we never know
when we might have to represent bogus input --><p>The <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code> attribute, if
specified, must have a value that is a <a href="common-microsyntaxes.html#valid-floating-point-number">valid floating point
number</a>. The <a href="#concept-input-min-default" title="concept-input-min-default">default
minimum</a> is 0. The <code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>
attribute, if specified, must have a value that is a <a href="common-microsyntaxes.html#valid-floating-point-number">valid
floating point number</a>. The <a href="#concept-input-max-default" title="concept-input-max-default">default maximum</a> is 100.</p><p>The <dfn id="concept-input-value-default-range" title="concept-input-value-default-range">default
value</dfn> is the <a href="#concept-input-min" title="concept-input-min">minimum</a>
plus half the difference between the <a href="#concept-input-min" title="concept-input-min">minimum</a> and the <a href="#concept-input-max" title="concept-input-max">maximum</a>, unless the <a href="#concept-input-max" title="concept-input-max">maximum</a> is less than the <a href="#concept-input-min" title="concept-input-min">minimum</a>, in which case the <a href="#concept-input-value-default-range" title="concept-input-value-default-range">default value</a> is
the <a href="#concept-input-min" title="concept-input-min">minimum</a>.</p><p>The <a href="#concept-input-step-default" title="concept-input-step-default">default
step</a> is 1 (allowing only integers, unless the <code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code> attribute has a non-integer
value).</p><div class="bookkeeping">
<p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
attributes, IDL attributes, and methods apply to the element:
<code title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
<code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
<code title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
<code title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>, and
<code title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code> content attributes;
<code title="dom-input-list"><a href="#dom-input-list">list</a></code>,
<code title="dom-input-value"><a href="#dom-input-value">value</a></code>,
<code title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code>, and
<code title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code> IDL attributes;
<code title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code> and
<code title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
<p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
in mode <a href="#dom-input-value-value" title="dom-input-value-value">value</a>.</p>
<p>The <code title="event-input-input"><a href="#event-input-input">input</a></code> and <code title="event-input-change"><a href="#event-input-change">change</a></code> events apply.</p>
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
<code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
<code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
<code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
<code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
<code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
<code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
<code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
<code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
<code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
<code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
<code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
<code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
<code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
<code class="no-backref" title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>,
<code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
<code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>, and
<code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>.</p>
<p>The following IDL attributes and methods do not apply to the
element:
<code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
<code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
<code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
<code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>, and
<code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code> IDL attributes;
<code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code> and
<code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>
</div><h6 id="color-state"><span class="secno">4.10.5.1.15 </span><dfn title="attr-input-type-color">Color</dfn> state</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="#represents">represents</a> a color
well control, for setting the element's <a href="#concept-fe-value" title="concept-fe-value">value</a> to a string representing a
<a href="common-microsyntaxes.html#simple-color">simple color</a>.</p><p>The <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, if
specified, must have a value that is a <a href="common-microsyntaxes.html#valid-simple-color">valid simple
color</a>.</p><div class="bookkeeping">
<p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
attributes, IDL attributes, and methods apply to the element:
<code title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code> and
<code title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code> content attributes;
<code title="dom-input-list"><a href="#dom-input-list">list</a></code>,
<code title="dom-input-value"><a href="#dom-input-value">value</a></code>, and
<code title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code> IDL attributes.</p>
<p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
in mode <a href="#dom-input-value-value" title="dom-input-value-value">value</a>.</p>
<p>The <code title="event-input-input"><a href="#event-input-input">input</a></code> and <code title="event-input-change"><a href="#event-input-change">change</a></code> events apply.</p>
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
<code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
<code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
<code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
<code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
<code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
<code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
<code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
<code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
<code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
<code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
<code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
<code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
<code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
<code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
<code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
<code class="no-backref" title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>,
<code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
<code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
<code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>, and
<code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>.</p>
<p>The following IDL attributes and methods do not apply to the
element:
<code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
<code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
<code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
<code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
<code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>, and
<code class="no-backref" title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
<code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code>,
<code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
<code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code>, and
<code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
</div><h6 id="checkbox-state"><span class="secno">4.10.5.1.16 </span><dfn title="attr-input-type-checkbox">Checkbox</dfn> state</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="#represents">represents</a> a
two-state control that represents the element's <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a> state. If the
element's <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a> state
is true, the control represents a positive selection, and if it is
false, a negative selection. If the element's <code title="dom-input-indeterminate"><a href="#dom-input-indeterminate">indeterminate</a></code> IDL attribute
is set to true, then the control's selection should be obscured as
if the control was in a third, indeterminate, state.</p><p class="note">The control is never a true tri-state control, even
if the element's <code title="dom-input-indeterminate"><a href="#dom-input-indeterminate">indeterminate</a></code> IDL attribute
is set to true. The <code title="dom-input-indeterminate"><a href="#dom-input-indeterminate">indeterminate</a></code> IDL attribute
only gives the appearance of a third state.</p><dl class="domintro"><dt><var title="">input</var> . <code title="dom-input-indeterminate"><a href="#dom-input-indeterminate">indeterminate</a></code> [ = <var title="">value</var> ]</dt>
<dd>
<p>When set, overrides the rendering of <a href="#checkbox-state" title="attr-input-type-checkbox">checkbox</a> controls so that
the current value is not visible.</p>
</dd>
</dl><div class="bookkeeping">
<p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
attributes and IDL attributes apply to the element:
<code title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>, and
<code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code> content attributes;
<code title="dom-input-checked"><a href="#dom-input-checked">checked</a></code> and
<code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attributes.</p>
<p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
in mode <a href="#dom-input-value-default-on" title="dom-input-value-default-on">default/on</a>.</p>
<p>The <code title="event-input-change"><a href="#event-input-change">change</a></code> event applies.</p>
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
<code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
<code class="no-backref" title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
<code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
<code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
<code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
<code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
<code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
<code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
<code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
<code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
<code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
<code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
<code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
<code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
<code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
<code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
<code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
<code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
<code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>, and
<code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>.</p>
<p>The following IDL attributes and methods do not apply to the
element:
<code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
<code class="no-backref" title="dom-input-list"><a href="#dom-input-list">list</a></code>,
<code class="no-backref" title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code>,
<code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
<code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
<code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>, and
<code class="no-backref" title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
<code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code>,
<code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
<code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code>, and
<code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
<p>The <code class="no-backref" title="event-input-input"><a href="#event-input-input">input</a></code> event does not apply.</p>
</div><h6 id="radio-button-state"><span class="secno">4.10.5.1.17 </span><dfn title="attr-input-type-radio">Radio Button</dfn> state</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="#represents">represents</a> a control
that, when used in conjunction with other <code><a href="the-input-element.html#the-input-element">input</a></code>
elements, forms a <i><a href="#radio-button-group">radio button group</a></i> in which only one
control can have its <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a> state set to true. If
the element's <a href="#concept-fe-checked" title="concept-fe-checked">checkedness</a>
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.</p><p>The <dfn id="radio-button-group"><i>radio button group</i></dfn> that contains an
<code><a href="the-input-element.html#the-input-element">input</a></code> element <var title="">a</var> also contains all
the other <code><a href="the-input-element.html#the-input-element">input</a></code> elements <var title="">b</var> that
fulfill all of the following conditions:</p><ul><li>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <var title="">b</var>'s <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <a href="#radio-button-state" title="attr-input-type-radio">Radio Button</a> state.</li>
<li>Either <var title="">a</var> and <var title="">b</var> have the
same <a href="association-of-controls-and-forms.html#form-owner">form owner</a>, or they both have no <a href="association-of-controls-and-forms.html#form-owner">form
owner</a>.</li>
<li>They both have a <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code>
attribute, and the value of <var title="">a</var>'s <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code> attribute is a
<a href="infrastructure.html#compatibility-caseless">compatibility caseless</a> match for the value of <var title="">b</var>'s <code title="attr-fe-name"><a href="association-of-controls-and-forms.html#attr-fe-name">name</a></code>
attribute.</li>
</ul><p>A document must not contain an <code><a href="the-input-element.html#the-input-element">input</a></code> element whose
<i><a href="#radio-button-group">radio button group</a></i> contains only that element.</p><p class="note">If none of the radio buttons in a <a href="#radio-button-group">radio button
group</a> 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).</p><div class="bookkeeping">
<p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
attributes and IDL attributes apply to the element:
<code title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code> and
<code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code> content attributes;
<code title="dom-input-checked"><a href="#dom-input-checked">checked</a></code> and
<code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attributes.</p>
<p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
in mode <a href="#dom-input-value-default-on" title="dom-input-value-default-on">default/on</a>.</p>
<p>The <code title="event-input-change"><a href="#event-input-change">change</a></code> event applies.</p>
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
<code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
<code class="no-backref" title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
<code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
<code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
<code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
<code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
<code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
<code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
<code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
<code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
<code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
<code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
<code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
<code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
<code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
<code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
<code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
<code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
<code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>, and
<code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>.</p>
<p>The following IDL attributes and methods do not apply to the
element:
<code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
<code class="no-backref" title="dom-input-list"><a href="#dom-input-list">list</a></code>,
<code class="no-backref" title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code>,
<code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
<code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
<code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>, and
<code class="no-backref" title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
<code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code>,
<code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
<code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code>, and
<code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
<p>The <code class="no-backref" title="event-input-input"><a href="#event-input-input">input</a></code> event does not apply.</p>
</div><h6 id="file-upload-state"><span class="secno">4.10.5.1.18 </span><dfn title="attr-input-type-file">File Upload</dfn> state</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!-- v2 ideas:
* maximum height/width or required ratio for image uploads? - Leons Petrazickis
* maximum per-file upload size - Alfonso Martínez de Lizarrondo
--><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="#represents">represents</a> a list of
<dfn id="concept-input-type-file-selected" title="concept-input-type-file-selected">selected files</dfn>,
each file consisting of a file name, a file type, and a file body
(the contents of the file).</p><hr><p>The <dfn id="attr-input-accept" title="attr-input-accept"><code>accept</code></dfn>
attribute may be specified to provide user agents with a hint of
what file types the server will be able to accept.</p><p>If specified, the attribute must consist of a <a href="common-microsyntaxes.html#set-of-comma-separated-tokens">set of
comma-separated tokens</a>, each of which must be an <a href="infrastructure.html#ascii-case-insensitive">ASCII
case-insensitive</a> match for one of the following:</p><dl><dt>The string <code title="">audio/*</code></dt>
<dd>Indicates that sound files are accepted.</dd>
<dt>The string <code title="">video/*</code></dt>
<dd>Indicates that video files are accepted.</dd>
<dt>The string <code title="">image/*</code></dt>
<dd>Indicates that image files are accepted.</dd>
<dt>A <a href="infrastructure.html#valid-mime-type">valid MIME type</a>, with no parameters</dt>
<dd>Indicates that files of the specified type are accepted.</dd>
</dl><p>The tokens must not be <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a>
matches for any of the other tokens (i.e. duplicates are not
allowed). </p><div class="example">
<p>For historical reasons, the <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute prefixes the
filename with the string "<code title="">C:\fakepath\</code>". Some
legacy user agents actually included the full path (which was a
security vulnerability). As a result of this, obtaining the
filename from the <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL
attribute in a backwards-compatible way is non-trivial. The
following function extracts the filename in a suitably compatible
manner:</p>
<pre>function extractFilename(path) {<!--
if (path.substr(0, 12) == "C:\\fakepath\\")
return path.substr(12);-->
var x;
x = path.lastIndexOf('\\');
if (x >= 0) // Windows-based path
return path.substr(x+1);
x = path.lastIndexOf('/');
if (x >= 0) // Unix-based path
return path.substr(x+1);
return path; // just the filename
}</pre>
<p>This can be used as follows:</p>
<pre><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></pre>
<!-- How useful this actually is... is unclear. -->
</div><hr><div class="bookkeeping">
<p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
attributes apply to the element:
</p><p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
attributes and IDL attributes apply to the element:
<code title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
<code title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>, and
<code title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>;
<code title="dom-input-files"><a href="#dom-input-files">files</a></code> and
<code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attributes.</p>
<p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
in mode <a href="#dom-input-value-filename" title="dom-input-value-filename">filename</a>.</p>
<p>The <code title="event-input-change"><a href="#event-input-change">change</a></code> event applies.</p>
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
<code class="no-backref" title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
<code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
<code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
<code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
<code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
<code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
<code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
<code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
<code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
<code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
<code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
<code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
<code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
<code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
<code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
<code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
<code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
<code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>, and
<code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>.</p>
<p>The element's <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code>
attribute must be omitted.</p>
<p>The following IDL attributes and methods do not apply to the
element:
<code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
<code class="no-backref" title="dom-input-list"><a href="#dom-input-list">list</a></code>,
<code class="no-backref" title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code>,
<code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
<code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
<code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>, and
<code class="no-backref" title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
<code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code>,
<code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
<code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code>, and
<code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
<p>The <code class="no-backref" title="event-input-input"><a href="#event-input-input">input</a></code> event does not apply.</p>
</div><h6 id="submit-button-state"><span class="secno">4.10.5.1.19 </span><dfn title="attr-input-type-submit">Submit Button</dfn> state</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="#represents">represents</a> a button
that, when activated, submits the form. The element is a <a href="forms.html#concept-button" title="concept-button">button</a>, specifically a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit button</a>.</p><p>The <code title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>, <code title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>, <code title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>, <code title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>, and <code title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code> attributes are <a href="association-of-controls-and-forms.html#attributes-for-form-submission">attributes
for form submission</a>.</p><p class="note">The <code title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code> attribute can
be used to make submit buttons that do not trigger the constraint
validation.</p><div class="bookkeeping">
<p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
attributes and IDL attributes apply to the element:
<code title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
<code title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
<code title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
<code title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>, and
<code title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code> content attributes;
<code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute.</p>
<p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
in mode <a href="#dom-input-value-default" title="dom-input-value-default">default</a>.</p>
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
<code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
<code class="no-backref" title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
<code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
<code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
<code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
<code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
<code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
<code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
<code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
<code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
<code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
<code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
<code class="no-backref" title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>,
<code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
<code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
<code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>, and
<code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>.</p>
<p>The following IDL attributes and methods do not apply to the
element:
<code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
<code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
<code class="no-backref" title="dom-input-list"><a href="#dom-input-list">list</a></code>,
<code class="no-backref" title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code>,
<code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
<code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
<code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>, and
<code class="no-backref" title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
<code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code>,
<code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
<code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code>, and
<code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
<p>The <code class="no-backref" title="event-input-input"><a href="#event-input-input">input</a></code> and <code class="no-backref" title="event-input-change"><a href="#event-input-change">change</a></code> events do not apply.</p>
</div><h6 id="image-button-state"><span class="secno">4.10.5.1.20 </span><dfn title="attr-input-type-image">Image Button</dfn> state</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="#represents">represents</a> 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 <a href="forms.html#concept-button" title="concept-button">button</a>,
specifically a <a href="forms.html#concept-submit-button" title="concept-submit-button">submit
button</a>.</p><hr><p>The image is given by the <dfn id="attr-input-src" title="attr-input-src"><code>src</code></dfn> attribute. The <code title="attr-input-src"><a href="#attr-input-src">src</a></code> attribute must be present, and
must contain a <a href="urls.html#valid-url">valid URL</a> referencing a non-interactive,
optionally animated, image resource that is neither paged nor
scripted.</p><p>The <dfn id="attr-input-alt" title="attr-input-alt"><code>alt</code></dfn> attribute
provides the textual label for the alternative button for users and
user agents who cannot use the image. The <code title="attr-input-alt"><a href="#attr-input-alt">alt</a></code> attribute must also be present,
and must contain a non-empty string.</p><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element supports <a href="the-map-element.html#dimension-attributes">dimension
attributes</a>.</p><p>The <code title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>, <code title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>, <code title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>, <code title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>, and <code title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code> attributes are <a href="association-of-controls-and-forms.html#attributes-for-form-submission">attributes
for form submission</a>.</p><div class="bookkeeping">
<p>The following common <code><a href="the-input-element.html#the-input-element">input</a></code> element content
attributes and IDL attributes apply to the element:
<code title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
<code title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
<code title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
<code title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
<code title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
<code title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
<code title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
<code title="attr-input-src"><a href="#attr-input-src">src</a></code>, and
<code title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code> content attributes;
<code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute.</p>
<p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute is
in mode <a href="#dom-input-value-default" title="dom-input-value-default">default</a>.</p>
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
<code class="no-backref" title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
<code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
<code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
<code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
<code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
<code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
<code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
<code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
<code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
<code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
<code class="no-backref" title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>,
<code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>, and
<code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>.</p>
<p>The element's <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code>
attribute must be omitted.</p>
<p>The following IDL attributes and methods do not apply to the
element:
<code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
<code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
<code class="no-backref" title="dom-input-list"><a href="#dom-input-list">list</a></code>,
<code class="no-backref" title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code>,
<code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
<code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
<code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>, and
<code class="no-backref" title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
<code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code>,
<code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
<code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code>, and
<code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
<p>The <code class="no-backref" title="event-input-input"><a href="#event-input-input">input</a></code> and <code class="no-backref" title="event-input-change"><a href="#event-input-change">change</a></code> events do not apply.</p>
</div><p class="note">Many aspects of this state's behavior are similar to
the behavior of the <code><a href="embedded-content-1.html#the-img-element">img</a></code> element. Readers are encouraged
to read that section, where many of the same requirements are
described in more detail.</p><h6 id="reset-button-state"><span class="secno">4.10.5.1.21 </span><dfn title="attr-input-type-reset">Reset Button</dfn> state</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="#represents">represents</a> a button
that, when activated, resets the form. The element is a <a href="forms.html#concept-button" title="concept-button">button</a>.</p><div class="bookkeeping">
<p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute
applies to this element and is in mode <a href="#dom-input-value-default" title="dom-input-value-default">default</a>.</p>
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
<code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
<code class="no-backref" title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
<code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
<code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
<code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
<code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
<code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
<code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
<code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
<code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
<code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
<code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
<code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
<code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
<code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
<code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
<code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
<code class="no-backref" title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>,
<code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
<code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
<code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>, and
<code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>.</p>
<p>The following IDL attributes and methods do not apply to the
element:
<code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
<code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
<code class="no-backref" title="dom-input-list"><a href="#dom-input-list">list</a></code>,
<code class="no-backref" title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code>,
<code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
<code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
<code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>, and
<code class="no-backref" title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
<code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code>,
<code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
<code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code>, and
<code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
<p>The <code class="no-backref" title="event-input-input"><a href="#event-input-input">input</a></code> and <code class="no-backref" title="event-input-change"><a href="#event-input-change">change</a></code> events do not apply.</p>
</div><h6 id="button-state"><span class="secno">4.10.5.1.22 </span><dfn title="attr-input-type-button">Button</dfn> state</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <code><a href="the-input-element.html#the-input-element">input</a></code> element <a href="#represents">represents</a> a button
with no default behavior. The element is a <a href="forms.html#concept-button" title="concept-button">button</a>.</p><div class="bookkeeping">
<p>The <code title="dom-input-value"><a href="#dom-input-value">value</a></code> IDL attribute
applies to this element and is in mode <a href="#dom-input-value-default" title="dom-input-value-default">default</a>.</p>
<p>The following content attributes must not be specified and do not
apply to the element:
<code class="no-backref" title="attr-input-accept"><a href="#attr-input-accept">accept</a></code>,
<code class="no-backref" title="attr-input-alt"><a href="#attr-input-alt">alt</a></code>,
<code class="no-backref" title="attr-input-autocomplete"><a href="common-input-element-attributes.html#attr-input-autocomplete">autocomplete</a></code>,
<code class="no-backref" title="attr-input-checked"><a href="the-input-element.html#attr-input-checked">checked</a></code>,
<code class="no-backref" title="attr-fs-formaction"><a href="association-of-controls-and-forms.html#attr-fs-formaction">formaction</a></code>,
<code class="no-backref" title="attr-fs-formenctype"><a href="association-of-controls-and-forms.html#attr-fs-formenctype">formenctype</a></code>,
<code class="no-backref" title="attr-fs-formmethod"><a href="association-of-controls-and-forms.html#attr-fs-formmethod">formmethod</a></code>,
<code class="no-backref" title="attr-fs-formnovalidate"><a href="association-of-controls-and-forms.html#attr-fs-formnovalidate">formnovalidate</a></code>,
<code class="no-backref" title="attr-fs-formtarget"><a href="association-of-controls-and-forms.html#attr-fs-formtarget">formtarget</a></code>,
<code class="no-backref" title="attr-dim-height"><a href="the-map-element.html#attr-dim-height">height</a></code>,
<code class="no-backref" title="attr-input-list"><a href="common-input-element-attributes.html#attr-input-list">list</a></code>,
<code class="no-backref" title="attr-input-max"><a href="common-input-element-attributes.html#attr-input-max">max</a></code>,
<code class="no-backref" title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code>,
<code class="no-backref" title="attr-input-min"><a href="common-input-element-attributes.html#attr-input-min">min</a></code>,
<code class="no-backref" title="attr-input-multiple"><a href="common-input-element-attributes.html#attr-input-multiple">multiple</a></code>,
<code class="no-backref" title="attr-input-pattern"><a href="common-input-element-attributes.html#attr-input-pattern">pattern</a></code>,
<code class="no-backref" title="attr-input-placeholder"><a href="common-input-element-attributes.html#attr-input-placeholder">placeholder</a></code>,
<code class="no-backref" title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code>,
<code class="no-backref" title="attr-input-required"><a href="common-input-element-attributes.html#attr-input-required">required</a></code>,
<code class="no-backref" title="attr-input-size"><a href="common-input-element-attributes.html#attr-input-size">size</a></code>,
<code class="no-backref" title="attr-input-src"><a href="#attr-input-src">src</a></code>,
<code class="no-backref" title="attr-input-step"><a href="common-input-element-attributes.html#attr-input-step">step</a></code>, and
<code class="no-backref" title="attr-dim-width"><a href="the-map-element.html#attr-dim-width">width</a></code>.</p>
<p>The following IDL attributes and methods do not apply to the
element:
<code class="no-backref" title="dom-input-checked"><a href="#dom-input-checked">checked</a></code>,
<code class="no-backref" title="dom-input-files"><a href="#dom-input-files">files</a></code>,
<code class="no-backref" title="dom-input-list"><a href="#dom-input-list">list</a></code>,
<code class="no-backref" title="dom-input-selectedOption"><a href="#dom-input-selectedoption">selectedOption</a></code>,
<code class="no-backref" title="dom-textarea/input-selectionStart"><a href="#dom-textarea-input-selectionstart">selectionStart</a></code>,
<code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="#dom-textarea-input-selectionend">selectionEnd</a></code>,
<code class="no-backref" title="dom-input-valueAsDate"><a href="#dom-input-valueasdate">valueAsDate</a></code>, and
<code class="no-backref" title="dom-input-valueAsNumber"><a href="#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
<code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code>,
<code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
<code class="no-backref" title="dom-input-stepDown"><a href="#dom-input-stepdown">stepDown()</a></code>, and
<code class="no-backref" title="dom-input-stepUp"><a href="#dom-input-stepup">stepUp()</a></code> methods.</p>
<p>The <code class="no-backref" title="event-input-input"><a href="#event-input-input">input</a></code> and <code class="no-backref" title="event-input-change"><a href="#event-input-change">change</a></code> events do not apply.</p>
</div></body></html>
--- NEW FILE: sections.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.4 Sections — HTML5</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"/><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
[...1227 lines suppressed...]
<ol class="brief"><li>
<p>Section created for <code><a href="#the-body-element-0">body</a></code> node.</p>
<p>Associated with heading "A".</p>
<p>Also associated with paragraph "B".</p>
<p>Nested sections:</p>
<ol class="brief"><li>
<p>Section implied for first <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code> element.</p>
<p>Associated with heading "C".</p>
<p>Also associated with paragraph "D".</p>
<p>No nested sections.</p>
</li>
<li>
<p>Section implied for second <code><a href="#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code> element.</p>
<p>Associated with heading "E".</p>
<p>Also associated with paragraph "F".</p>
<p>No nested sections.</p>
</li>
</ol></li>
</ol></div></body></html>
--- NEW FILE: commands.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.11.4 Commands — HTML5</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"/><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
p + * > li, dd li { margin: 1em 0; }
dt, dfn { font-weight: bold; font-style: normal; }
dt dfn { font-style: italic; }
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
pre em { font-weight: bolder; font-style: normal; }
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead { border-bottom: solid; }
table tbody th:first-child { border-left: solid; }
table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
img.extra { float: right; }
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
pre.css:first-line { color: #AAAA50; }
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; }
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
dl.domintro dd p { margin: 0.5em 0; }
dl.switch { padding-left: 2em; }
dl.switch > dt { text-indent: -1.5em; }
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
dl.triple { padding: 0 0 0 1em; }
dl.triple dt, dl.triple dd { margin: 0; display: inline }
dl.triple dt:after { content: ':'; }
dl.triple dd:after { content: '\A'; white-space: pre; }
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
a .diff-new { border-bottom: 1px blue solid; }
h2 { page-break-before: always; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; }
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
div.head p { margin: 0; }
div.head h1 { margin: 0; }
div.head .logo { float: right; margin: 0 1em; }
div.head .logo img { border: none } /* remove border from top image */
div.head dl { margin: 1em 0; }
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
body > .toc > li > * { margin-bottom: 0.5em; }
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
.toc, .toc li { list-style: none; }
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
.brief li { margin: 0; padding: 0; }
.brief li p { margin: 0; padding: 0; }
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
.category-list li { display: inline; }
.category-list li:not(:last-child)::after { content: ', '; }
.category-list li > span, .category-list li > a { text-transform: lowercase; }
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
.XXX > :first-child { margin-top: 0; }
p .XXX { line-height: 3em; }
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
.annotation :link, .annotation :visited { color: inherit; }
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
.annotation span { border: none ! important; }
.note { color: green; background: transparent; font-family: sans-serif; }
.warning { color: red; background: transparent; }
.note, .warning { font-weight: bolder; font-style: italic; }
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
.note p:first-child, .warning p:first-child { margin-top: 0; }
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
.warning:before { font-style: normal; }
p.note:before { content: 'Note: '; }
p.warning:before { content: '\26A0 Warning! '; }
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
h4 { position: relative; z-index: 3; }
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
.element {
background: #EEEEFF;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -1.15em;
height: 2em;
width: 0.9em;
background: #EEEEFF;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
td > .example:only-child { margin: 0 0 0 0.1em; }
.tall-and-narrow {
font-size: 0.6em;
column-width: 25em;
column-gap: 1em;
-moz-column-width: 25em;
-moz-column-gap: 1em;
-webkit-column-width: 25em;
-webkit-column-gap: 1em;
}
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
ul.domTree li li { list-style: none; }
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree span { font-style: italic; font-family: serif; }
ul.domTree .t1 code { color: purple; font-weight: bold; }
ul.domTree .t2 { font-style: normal; font-family: monospace; }
ul.domTree .t2 .name { color: black; font-weight: bold; }
ul.domTree .t2 .value { color: blue; font-weight: normal; }
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
ul.domTree .t7 code, .domTree .t8 code { color: green; }
ul.domTree .t10 code { color: teal; }
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
#configUI p label { display: block; }
#configUI #updateUI, #configUI .loginUI { text-align: center; }
#configUI input[type=button] { display: block; margin: auto; }
</style><style type="text/css">
.applies thead th > * { display: block; }
.applies thead code { display: block; }
.applies tbody th { whitespace: nowrap; }
.applies td { text-align: center; }
.applies .yes { background: yellow; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
#table-example-1 caption { padding-bottom: 0.5em; }
#table-example-1 thead, #table-example-1 tbody { border: none; }
#table-example-1 th, #table-example-1 td { border: solid thin; }
#table-example-1 th { font-weight: normal; }
#table-example-1 td { border-style: none solid; vertical-align: top; }
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
#table-example-1 tbody td:first-child::after { content: leader(". "); }
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
#table-example-1 tbody td:first-child + td { width: 10em; }
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
.apple-table-examples * { font-family: "Times", serif; }
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
.apple-table-examples td { text-align: right; vertical-align: top; }
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
.apple-table-examples sup { line-height: 0; }
</style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script>
function getCookie(name) {
var params = location.search.substr(1).split("&");
for (var index = 0; index < params.length; index++) {
if (params[index] == name)
return "1";
var data = params[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
var cookies = document.cookie.split("; ");
for (var index = 0; index < cookies.length; index++) {
var data = cookies[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
return null;
}
function load(script) {
var e = document.createElement('script');
e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
document.body.appendChild(e);
}
function init() {
if (location.search == '?slow-browser')
return;
var configUI = document.createElement('div');
configUI.id = 'configUI';
document.body.appendChild(configUI);
// load('reviewer.js'); // would need cross-site XHR
if (document.getElementById('head'))
load('toc.js');
load('styler.js');
// load('updater.js'); // would need cross-site XHR
load('dfn.js');
// load('status.js'); // would need cross-site XHR
if (getCookie('profile') == '1')
document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
fixBrokenLink();
}
</script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="interactive-elements.html" title="4.11 Interactive elements" rel="prev">
<link href="Overview.html#contents" title="Table of contents" rel="index">
<link href="microdata.html" title="5 Microdata" rel="next">
</head><body onload="fixBrokenLink(); init()"><div class="head" id="head">
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
</div><div>
<a href="interactive-elements.html">← 4.11 Interactive elements</a> –
<a href="Overview.html#contents">Table of contents</a> –
<a href="microdata.html">5 Microdata →</a>
<ol class="toc"><li><ol><li><ol><li><a href="commands.html#commands"><span class="secno">4.11.4 </span>Commands</a></li></ol></li><li><a href="commands.html#common-idioms-without-dedicated-elements"><span class="secno">4.12 </span>Common idioms without dedicated elements</a>
<ol><li><a href="commands.html#tag-clouds"><span class="secno">4.12.1 </span>Tag clouds</a></li><li><a href="commands.html#conversations"><span class="secno">4.12.2 </span>Conversations</a></li><li><a href="commands.html#footnotes"><span class="secno">4.12.3 </span>Footnotes</a></li></ol></li></ol></li></ol></div>
<h4 id="commands"><span class="secno">4.11.4 </span>Commands</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A <dfn id="concept-command" title="concept-command">command</dfn> is the abstraction
behind menu items, buttons, and links.<!--v2COMMAND: 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
aspects such as the disabled state.--></p><p id="facets">Commands are defined to have the following
<dfn id="concept-facet" title="concept-facet">facets</dfn>:</p><dl><dt><dfn id="command-facet-type" title="command-facet-Type">Type</dfn></dt>
<dd>The kind of command: "command", meaning it is a normal command;
"radio", meaning that triggering the command will, amongst other
things, set the <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked
State</a> to true (and probably uncheck some other commands); or
"checkbox", meaning that triggering the command will, amongst other
things, toggle the value of the <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a>.</dd>
<dt><dfn id="command-facet-id" title="command-facet-ID">ID</dfn></dt>
<dd>The name of the command, for referring to the command from the
markup or from script. If a command has no ID, it is an
<dfn id="anonymous-command">anonymous command</dfn>.</dd>
<dt><dfn id="command-facet-label" title="command-facet-Label">Label</dfn></dt>
<dd>The name of the command as seen by the user.</dd>
<dt><dfn id="command-facet-hint" title="command-facet-Hint">Hint</dfn></dt>
<dd>A helpful or descriptive string that can be shown to the
user.</dd>
<dt><dfn id="command-facet-icon" title="command-facet-Icon">Icon</dfn></dt>
<dd>An <a href="urls.html#absolute-url">absolute URL</a> identifying a graphical image that
represents the action. A command might not have an Icon.</dd> <!--
changing base URLs might change the icon -->
<dt><dfn id="command-facet-accesskey" title="command-facet-AccessKey">Access Key</dfn></dt>
<dd>A key combination selected by the user agent that triggers the
command. A command might not have an Access Key.</dd>
<dt><dfn id="command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</dfn></dt>
<dd>Whether the command is hidden or not (basically, whether it
should be shown in menus).</dd>
<dt><dfn id="command-facet-disabledstate" title="command-facet-DisabledState">Disabled State</dfn></dt>
<dd>Whether the command is relevant and can be triggered or not.</dd>
<dt><dfn id="command-facet-checkedstate" title="command-facet-CheckedState">Checked State</dfn></dt>
<dd>Whether the command is checked or not.</dd>
<dt><dfn id="command-facet-action" title="command-facet-Action">Action</dfn></dt>
<dd>The actual effect that triggering the command will have. This
could be a scripted event handler, a <a href="urls.html#url">URL</a> to which to
<a href="#navigate">navigate</a>, or a form submission.</dd>
<!-- v2COMMAND
<dt><dfn title="command-facet-Triggers">Triggers</dfn></dt>
<dd>The list of elements that can trigger the command. The element
defining a command is always in the list of elements that can
trigger the command. For anonymous commands, only the element
defining the command is on the list, since other elements have no
way to refer to it.</dd>
-->
</dl><p>These facets are exposed on elements using the <dfn id="command-api">command
API</dfn>:</p><dl class="domintro"><dt><var title="">element</var> . <code title="dom-command-ro-commandType"><a href="#dom-command-ro-commandtype">commandType</a></code></dt>
<dd>
<p>Exposes the <a href="#command-facet-type" title="command-facet-Type">Type</a> facet of the command.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-id"><a href="#dom-id">id</a></code></dt>
<dd>
<p>Exposes the <a href="#command-facet-id" title="command-facet-ID">ID</a> facet of the command.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-command-ro-label"><a href="#dom-command-ro-label">label</a></code></dt>
<dd>
<p>Exposes the <a href="#command-facet-label" title="command-facet-Label">Label</a> facet of the command.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-title"><a href="#dom-title">title</a></code></dt>
<dd>
<p>Exposes the <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> facet of the command.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-command-ro-icon"><a href="#dom-command-ro-icon">icon</a></code></dt>
<dd>
<p>Exposes the <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> facet of the command.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-accessKeyLabel"><a href="#dom-accesskeylabel">accessKeyLabel</a></code></dt>
<dd>
<p>Exposes the <a href="#command-facet-accesskey" title="command-facet-AccessKey">Access Key</a> facet of the command.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-hidden"><a href="#dom-hidden">hidden</a></code></dt>
<dd>
<p>Exposes the <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a> facet of the command.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-command-ro-disabled"><a href="#dom-command-ro-disabled">disabled</a></code></dt>
<dd>
<p>Exposes the <a href="#command-facet-disabledstate" title="command-facet-DisabledState">Disabled State</a> facet of the command.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-command-ro-checked"><a href="#dom-command-ro-checked">checked</a></code></dt>
<dd>
<p>Exposes the <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a> facet of the command.</p>
</dd>
<dt><var title="">element</var> . <code title="dom-click"><a href="#dom-click">click</a></code>()</dt>
<dd>
<p>Triggers the <a href="#command-facet-action" title="command-facet-Action">Action</a> of the command.</p>
</dd>
<!--v2COMMAND
<dt><var title="">element</var> . <code title="dom-command-ro-triggers">triggers</code></dt>
<dd>
<p>Exposes the <span title="command-facet-Triggers">Triggers</span> facet of the command.</p>
</dd>
-->
</dl><hr><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-commands"><a href="#dom-document-commands">commands</a></code></dt>
<dd>
<p>Returns an <code><a href="urls.html#htmlcollection">HTMLCollection</a></code> of the elements in the
<code>Document</code> that define commands and have IDs.</p>
</dd>
</dl><hr><p>User agents may expose the <a href="#concept-command" title="concept-command">commands</a> whose <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a> facet is false
(visible), e.g. in the user agent's menu bar. User agents are
encouraged to do this especially for commands that have <a href="#command-facet-accesskey" title="command-facet-AccessKey">Access Keys</a>, as a way to
advertise those keys to the user.</p><h3 id="common-idioms-without-dedicated-elements"><span class="secno">4.12 </span>Common idioms without dedicated elements</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h4 id="tag-clouds"><span class="secno">4.12.1 </span>Tag clouds</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p id="tag-cloud">This specification does not define any markup
specifically for marking up lists of keywords that apply to a group
of pages (also known as <i>tag clouds</i>). In general, authors are
encouraged to either mark up such lists using <code><a href="grouping-content.html#the-ul-element">ul</a></code>
elements with explicit inline counts that are then hidden and turned
into a presentational effect using a style sheet, or to use SVG.</p><div class="example">
<p>Here, three tags are included in a short tag cloud:</p>
<pre><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></pre>
<p>The actual frequency of each tag is given using the <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> 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.</p>
<p>The <code><a href="grouping-content.html#the-ul-element">ul</a></code> element is used (rather than
<code><a href="grouping-content.html#the-ol-element">ol</a></code>) because the order is not particular important:
while the list is in fact ordered alphabetically, it would convey
the same information if ordered by, say, the length of the tag.</p>
<p>The <code title="rel-tag"><a href="links.html#link-type-tag">tag</a></code> <code title="attr-hyperlink-rel"><a href="links.html#attr-hyperlink-rel">rel</a></code>-keyword is <em>not</em> used
on these <code><a href="text-level-semantics.html#the-a-element">a</a></code> elements because they do not represent tags
that apply to the page itself; they are just part of an index
listing the tags themselves.</p>
</div><h4 id="conversations"><span class="secno">4.12.2 </span>Conversations</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!-- http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-September/022576.html --><p>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.</p><p>Instead, authors are encouraged to mark up conversations using
<code><a href="grouping-content.html#the-p-element">p</a></code> elements and punctuation. Authors who need to mark
the speaker for styling purposes are encouraged to use
<code><a href="text-level-semantics.html#the-span-element">span</a></code> or <code><a href="text-level-semantics.html#the-b-element">b</a></code>. Paragraphs with their text
wrapped in the <code><a href="text-level-semantics.html#the-i-element">i</a></code> element can be used for marking up
stage directions.</p><div class="example">
<p>This example demonstrates this using an extract from Abbot and
Costello's famous sketch, <cite>Who's on first</cite>:</p>
<pre><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.</pre>
</div><div class="example">
<p>The following extract shows how an IM conversation log could be
marked up.</p>
<pre><p> <time>14:22</time> <b>egof</b> I'm not that nerdy, I've only seen 30% of the star trek episodes
<p> <time>14:23</time> <b>kaj</b> if you know what percentage of the star trek episodes you have seen, you are inarguably nerdy
<p> <time>14:23</time> <b>egof</b> it's unarguably
<p> <time>14:23</time> <i>* kaj blinks</i>
<p> <time>14:24</time> <b>kaj</b> you are not helping your case</pre>
<!-- with thanks to http://bash.org/?854262 -->
</div><h4 id="footnotes"><span class="secno">4.12.3 </span>Footnotes</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>HTML does not have a dedicated mechanism for marking up
footnotes. Here are the recommended alternatives.</p><hr><p>For short inline annotations, the <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute should be used.</p><div class="example">
<p>In this example, two parts of a dialogue are annotated with
footnote-like content using the <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute.</p>
<pre><p> <b>Customer</b>: Hello! I wish to register a complaint. Hello. Miss?
<p> <b>Shopkeeper</b>: <strong><span title="Colloquial pronunciation of 'What do you'"</strong>
>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 <strong>title="This is, of course, a lie."</strong>>we're
closing for lunch</span>.</pre>
</div><hr><p>For longer annotations, the <code><a href="text-level-semantics.html#the-a-element">a</a></code> 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.</p><div class="example">
<p>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>
<pre><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!
<em>...</em>
<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></pre>
</div><hr><p>For side notes, longer annotations that apply to entire sections
of the text rather than just specific words or sentences, the
<code><a href="sections.html#the-aside-element">aside</a></code> element should be used.</p><div class="example">
<p>In this example, a sidebar is given after a dialogue, giving it
some context.</p>
<pre><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></pre>
</div><hr><p>For figures or tables, footnotes can be included in the relevant
<code><a href="grouping-content.html#the-dt-element">dt</a></code> or <code><a href="tabular-data.html#the-caption-element">caption</a></code> element, or in surrounding
prose.</p><div class="example">
<p>In this example, a <!-- round --> table has cells with footnotes
that are given in prose. A <code><a href="embedded-content-1.html#the-figure-element">figure</a></code> element is used to
give a single legend to the combination of the table and its
footnotes.</p>
<pre><figure>
<dt>Table 1. Alternative activities for knights.</dt>
<dd>
<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>
</dd>
</figure></pre>
</div></body></html>
--- NEW FILE: common-microsyntaxes.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>2.4 Common microsyntaxes — HTML5</title><script src="link-fixup.js"></script><link href="whatwg.css" rel="stylesheet"/><style type="text/css">
pre { margin-left: 2em; white-space: pre-wrap; }
h2 { margin: 3em 0 1em 0; }
h3 { margin: 2.5em 0 1em 0; }
h4 { margin: 2.5em 0 0.75em 0; }
h5, h6 { margin: 2.5em 0 1em; }
h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
p { margin: 1em 0; }
hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
dl, dd { margin-top: 0; margin-bottom: 0; }
dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
dt + dt { margin-top: 0; }
dd dt { margin-top: 0.25em; margin-bottom: 0; }
dd p { margin-top: 0; }
dd dl + p { margin-top: 1em; }
dd table + p { margin-top: 1em; }
p + * > li, dd li { margin: 1em 0; }
dt, dfn { font-weight: bold; font-style: normal; }
dt dfn { font-style: italic; }
pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
pre em { font-weight: bolder; font-style: normal; }
@media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
table { border-collapse: collapse; border-style: hidden hidden none hidden; }
table thead { border-bottom: solid; }
table tbody th:first-child { border-left: solid; }
table tbody th { text-align: left; }
table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
.bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
img.extra { float: right; }
pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
pre.css:first-line { color: #AAAA50; }
dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #EEFFEE; }
hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
dl.domintro dd p { margin: 0.5em 0; }
dl.switch { padding-left: 2em; }
dl.switch > dt { text-indent: -1.5em; }
dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
dl.triple { padding: 0 0 0 1em; }
dl.triple dt, dl.triple dd { margin: 0; display: inline }
dl.triple dt:after { content: ':'; }
dl.triple dd:after { content: '\A'; white-space: pre; }
.diff-old { text-decoration: line-through; color: silver; background: transparent; }
.diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
a .diff-new { border-bottom: 1px blue solid; }
h2 { page-break-before: always; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
h1 + h2, hr + h2.no-toc { page-break-before: auto; }
p > span:not([title=""]):not([class="XXX"]):not([class="impl"]), li > span:not([title=""]):not([class="XXX"]):not([class="impl"]) { border-bottom: solid #9999CC; }
div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
div.head p { margin: 0; }
div.head h1 { margin: 0; }
div.head .logo { float: right; margin: 0 1em; }
div.head .logo img { border: none } /* remove border from top image */
div.head dl { margin: 1em 0; }
div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
body > .toc > li > * { margin-bottom: 0.5em; }
body > .toc > li > * > li > * { margin-bottom: 0.25em; }
.toc, .toc li { list-style: none; }
.brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
.brief li { margin: 0; padding: 0; }
.brief li p { margin: 0; padding: 0; }
.category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
.category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
.category-list li { display: inline; }
.category-list li:not(:last-child)::after { content: ', '; }
.category-list li > span, .category-list li > a { text-transform: lowercase; }
.category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
.XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
.XXX > :first-child { margin-top: 0; }
p .XXX { line-height: 3em; }
.annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
.annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
.annotation :link, .annotation :visited { color: inherit; }
.annotation :link:hover, .annotation :visited:hover { background: transparent; }
.annotation span { border: none ! important; }
.note { color: green; background: transparent; font-family: sans-serif; }
.warning { color: red; background: transparent; }
.note, .warning { font-weight: bolder; font-style: italic; }
p.note, div.note { padding: 0.5em 2em; }
span.note { padding: 0 2em; }
.note p:first-child, .warning p:first-child { margin-top: 0; }
.note p:last-child, .warning p:last-child { margin-bottom: 0; }
.warning:before { font-style: normal; }
p.note:before { content: 'Note: '; }
p.warning:before { content: '\26A0 Warning! '; }
.bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
.bookkeeping { font-size: 0.8em; margin: 2em 0; }
.bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
h4 { position: relative; z-index: 3; }
h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
.element {
background: #EEEEFF;
color: black;
margin: 0 0 1em 0.15em;
padding: 0 1em 0.25em 0.75em;
border-left: solid #9999FF 0.25em;
position: relative;
z-index: 1;
}
.element:before {
position: absolute;
z-index: 2;
top: 0;
left: -1.15em;
height: 2em;
width: 0.9em;
background: #EEEEFF;
content: ' ';
border-style: none none solid solid;
border-color: #9999FF;
border-width: 0.25em;
}
.example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
td > .example:only-child { margin: 0 0 0 0.1em; }
.tall-and-narrow {
font-size: 0.6em;
column-width: 25em;
column-gap: 1em;
-moz-column-width: 25em;
-moz-column-gap: 1em;
-webkit-column-width: 25em;
-webkit-column-gap: 1em;
}
ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
ul.domTree li li { list-style: none; }
ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
ul.domTree span { font-style: italic; font-family: serif; }
ul.domTree .t1 code { color: purple; font-weight: bold; }
ul.domTree .t2 { font-style: normal; font-family: monospace; }
ul.domTree .t2 .name { color: black; font-weight: bold; }
ul.domTree .t2 .value { color: blue; font-weight: normal; }
ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
ul.domTree .t7 code, .domTree .t8 code { color: green; }
ul.domTree .t10 code { color: teal; }
#configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
#configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
#configUI p label { display: block; }
#configUI #updateUI, #configUI .loginUI { text-align: center; }
#configUI input[type=button] { display: block; margin: auto; }
</style><style type="text/css">
.applies thead th > * { display: block; }
.applies thead code { display: block; }
.applies tbody th { whitespace: nowrap; }
.applies td { text-align: center; }
.applies .yes { background: yellow; }
.matrix, .matrix td { border: none; text-align: right; }
.matrix { margin-left: 2em; }
.dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
.dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
.dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
#table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
#table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
#table-example-1 caption { padding-bottom: 0.5em; }
#table-example-1 thead, #table-example-1 tbody { border: none; }
#table-example-1 th, #table-example-1 td { border: solid thin; }
#table-example-1 th { font-weight: normal; }
#table-example-1 td { border-style: none solid; vertical-align: top; }
#table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
#table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
#table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
#table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
#table-example-1 tbody td:first-child::after { content: leader(". "); }
#table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
#table-example-1 tbody td:first-child + td { width: 10em; }
#table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
#table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
.apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
.apple-table-examples * { font-family: "Times", serif; }
.apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
.apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
.apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
.apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
.apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
.apple-table-examples td { text-align: right; vertical-align: top; }
.apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
.apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
.apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
.apple-table-examples sup { line-height: 0; }
</style><link href="data:text/css," rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" rel="alternate stylesheet" title="Highlight implementation requirements"><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script>
function getCookie(name) {
var params = location.search.substr(1).split("&");
for (var index = 0; index < params.length; index++) {
if (params[index] == name)
return "1";
var data = params[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
var cookies = document.cookie.split("; ");
for (var index = 0; index < cookies.length; index++) {
var data = cookies[index].split("=");
if (data[0] == name)
return unescape(data[1]);
}
return null;
}
function load(script) {
var e = document.createElement('script');
e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
document.body.appendChild(e);
}
function init() {
if (location.search == '?slow-browser')
return;
var configUI = document.createElement('div');
configUI.id = 'configUI';
document.body.appendChild(configUI);
// load('reviewer.js'); // would need cross-site XHR
if (document.getElementById('head'))
load('toc.js');
load('styler.js');
// load('updater.js'); // would need cross-site XHR
load('dfn.js');
// load('status.js'); // would need cross-site XHR
if (getCookie('profile') == '1')
document.getElementsByTagName('h2')[0].textContent += '; load: ' + (new Date() - loadTimer) + 'ms';
fixBrokenLink();
}
</script><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><link href="infrastructure.html" title="2 Common infrastructure" rel="prev">
<link href="Overview.html#contents" title="Table of contents" rel="index">
<link href="urls.html" title="2.5 URLs" rel="next">
</head><body onload="fixBrokenLink(); init()"><div class="head" id="head">
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
</div><div>
<a href="infrastructure.html">← 2 Common infrastructure</a> –
<a href="Overview.html#contents">Table of contents</a> –
<a href="urls.html">2.5 URLs →</a>
<ol class="toc"><li><ol><li><a href="common-microsyntaxes.html#common-microsyntaxes"><span class="secno">2.4 </span>Common microsyntaxes</a>
<ol><li><a href="common-microsyntaxes.html#boolean-attributes"><span class="secno">2.4.1 </span>Boolean attributes</a></li><li><a href="common-microsyntaxes.html#keywords-and-enumerated-attributes"><span class="secno">2.4.2 </span>Keywords and enumerated attributes</a></li><li><a href="common-microsyntaxes.html#numbers"><span class="secno">2.4.3 </span>Numbers</a>
<ol><li><a href="common-microsyntaxes.html#non-negative-integers"><span class="secno">2.4.3.1 </span>Non-negative integers</a></li><li><a href="common-microsyntaxes.html#signed-integers"><span class="secno">2.4.3.2 </span>Signed integers</a></li><li><a href="common-microsyntaxes.html#real-numbers"><span class="secno">2.4.3.3 </span>Real numbers</a></li><li><a href="common-microsyntaxes.html#ratios"><span class="secno">2.4.3.4 </span>Ratios</a></li><li><a href="common-microsyntaxes.html#lists-of-integers"><span class="secno">2.4.3.5 </span>Lists of integers</a></li></ol></li><li><a href="common-microsyntaxes.html#dates-and-times"><span class="secno">2.4.4 </span>Dates and times</a>
<ol><li><a href="common-microsyntaxes.html#months"><span class="secno">2.4.4.1 </span>Months</a></li><li><a href="common-microsyntaxes.html#dates"><span class="secno">2.4.4.2 </span>Dates</a></li><li><a href="common-microsyntaxes.html#times"><span class="secno">2.4.4.3 </span>Times</a></li><li><a href="common-microsyntaxes.html#local-dates-and-times"><span class="secno">2.4.4.4 </span>Local dates and times</a></li><li><a href="common-microsyntaxes.html#global-dates-and-times"><span class="secno">2.4.4.5 </span>Global dates and times</a></li><li><a href="common-microsyntaxes.html#weeks"><span class="secno">2.4.4.6 </span>Weeks</a></li><li><a href="common-microsyntaxes.html#vaguer-moments-in-time"><span class="secno">2.4.4.7 </span>Vaguer moments in time</a></li></ol></li><li><a href="common-microsyntaxes.html#colors"><span class="secno">2.4.5 </span>Colors</a></li><li><a href="common-microsyntaxes.html#space-separated-tokens"><span class="secno">2.4.6 </span>Space-separated tokens</a></li><li><a href="ommon-microsyntaxes.html#comma-separated-tokens"><span class="secno">2.4.7 </span>Comma-separated tokens</a></li><li><a href="common-microsyntaxes.html#syntax-references"><span class="secno">2.4.8 </span>References</a></li><li><a href="common-microsyntaxes.html#mq"><span class="secno">2.4.9 </span>Media queries</a></li></ol></li></ol></li></ol></div>
<h3 id="common-microsyntaxes"><span class="secno">2.4 </span>Common microsyntaxes</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>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.</p><h4 id="boolean-attributes"><span class="secno">2.4.1 </span>Boolean attributes</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A number of attributes are <dfn id="boolean-attribute" title="boolean attribute">boolean
attributes</dfn>. The presence of a boolean attribute on an element
represents the true value, and the absence of the attribute
represents the false value.</p><p>If the attribute is present, its value must either be the empty
string or a value that is an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a>
match for the attribute's canonical name, with no leading or
trailing whitespace.</p><p class="note">The values "true" and "false" are not allowed on
boolean attributes. To represent a false value, the attribute has to
be omitted altogether.</p><h4 id="keywords-and-enumerated-attributes"><span class="secno">2.4.2 </span>Keywords and enumerated attributes</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>Some attributes are defined as taking one of a finite set of
keywords. Such attributes are called <dfn id="enumerated-attribute" title="enumerated
attribute">enumerated attributes</dfn>. The keywords are each
defined to map to a particular <em>state</em> (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 <i>invalid value default</i>, the second
is the <i>missing value default</i>.</p><p>If an enumerated attribute is specified, the attribute's value
must be an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for one of the
given keywords that are not said to be non-conforming, with no
leading or trailing whitespace.</p><p>When the attribute is specified, if its value is an <a href="infrastructure.html#ascii-case-insensitive">ASCII
case-insensitive</a> 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 <i>invalid value default</i>, then the attribute
represents that state. Otherwise, if the attribute value matches
none of the keywords but there is a <i>missing value default</i>
state defined, then <em>that</em> is the state represented by the
attribute. Otherwise, there is no default, and invalid values must
be ignored.</p><p>When the attribute is <em>not</em> specified, if there is a
<i>missing value default</i> 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.</p><p class="note">The empty string can be a valid keyword.</p><h4 id="numbers"><span class="secno">2.4.3 </span>Numbers</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><h5 id="non-negative-integers"><span class="secno">2.4.3.1 </span>Non-negative integers</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A string is a <dfn id="valid-non-negative-integer">valid non-negative integer</dfn> if it
consists of one or more characters in the range U+0030 DIGIT ZERO
(0) to U+0039 DIGIT NINE (9).</p><p>A <a href="#valid-non-negative-integer">valid non-negative integer</a> represents the number
that is represented in base ten by that string of digits.</p><h5 id="signed-integers"><span class="secno">2.4.3.2 </span>Signed integers</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A string is a <dfn id="valid-integer">valid integer</dfn> if it consists of one or
more characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT
NINE (9), optionally prefixed with a U+002D HYPHEN-MINUS character
(-).</p><p>A <a href="#valid-integer">valid integer</a> without a U+002D HYPHEN-MINUS (-)
prefix represents the number that is represented in base ten by that
string of digits. A <a href="#valid-integer">valid integer</a> <em>with</em> a
U+002D HYPHEN-MINUS (-) prefix represents the number represented in
base ten by the string of digits that follows the U+002D
HYPHEN-MINUS, subtracted from zero.</p><h5 id="real-numbers"><span class="secno">2.4.3.3 </span>Real numbers</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A string is a <dfn id="valid-floating-point-number">valid floating point number</dfn> if it
consists of:</p><ol class="brief"><li>Optionally, a U+002D HYPHEN-MINUS character (-).</li>
<li>A series of one or more characters in the range U+0030 DIGIT
ZERO (0) to U+0039 DIGIT NINE (9).</li>
<li>Optionally:
<ol><li>A single U+002E FULL STOP character (.).</li>
<li>A series of one or more characters in the range U+0030 DIGIT
ZERO (0) to U+0039 DIGIT NINE (9).</li>
</ol></li>
<li>Optionally:
<ol><li>Either a U+0065 LATIN SMALL LETTER E character (e) or a
U+0045 LATIN CAPITAL LETTER E character (E).</li>
<li>Optionally, a U+002D HYPHEN-MINUS character (-) or U+002B
PLUS SIGN character (+).</li>
<li>A series of one or more characters in the range U+0030 DIGIT
ZERO (0) to U+0039 DIGIT NINE (9).</li>
</ol></li>
</ol><p>A <a href="#valid-floating-point-number">valid floating point number</a> represents the number
obtained by multiplying the significand by ten raised to the power
of the exponent, where the significand is the first number,
interpreted as base ten (including the decimal point and the number
after the decimal point, if any, and interpreting the significand as
a negative number if the whole string starts with a U+002D
HYPHEN-MINUS character (-) and the number is not zero), and where
the exponent is the number after the E, if any (interpreted as a
negative number if there is a U+002D HYPHEN-MINUS character (-)
between the E and the number and the number is not zero, or else
ignoring a U+002B PLUS SIGN character (+) between the E and the
number if there is one). If there is no E, then the exponent is
treated as zero.</p><p class="note">The Infinity and Not-a-Number (NaN) values are not
<a href="#valid-floating-point-number" title="valid floating point number">valid floating point
numbers</a>.</p><h5 id="ratios"><span class="secno">2.4.3.4 </span>Ratios</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p class="note">The algorithms described in this section are used by
the <code><a href="text-level-semantics.html#the-progress-element">progress</a></code> and <code><a href="text-level-semantics.html#the-meter-element">meter</a></code> elements.</p><p>A <dfn id="valid-denominator-punctuation-character">valid denominator punctuation character</dfn> is one of
the characters from the table below. There is <dfn id="values-associated-with-denominator-punctuation-characters" title="values
associated with denominator punctuation characters">a value
associated with each denominator punctuation character</dfn>, as
shown in the table below.</p><table><thead><tr><th colspan="2">Denominator Punctuation Character</th>
<th>Value</th>
</tr></thead><tbody><tr><td>U+0025 PERCENT SIGN</td>
<td>%</td>
<td>100</td>
</tr><tr><td>U+066A ARABIC PERCENT SIGN</td>
<td>٪</td>
<td>100</td>
</tr><tr><td>U+FE6A SMALL PERCENT SIGN</td>
<td>﹪</td>
<td>100</td>
</tr><tr><td>U+FF05 FULLWIDTH PERCENT SIGN</td>
<td>％</td>
<td>100</td>
</tr><tr><td>U+2030 PER MILLE SIGN</td>
<td>‰</td>
<td>1000</td>
</tr><tr><td>U+2031 PER TEN THOUSAND SIGN</td>
<td>‱</td>
<td>10000</td>
</tr></tbody></table><h5 id="lists-of-integers"><span class="secno">2.4.3.5 </span>Lists of integers</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A <dfn id="valid-list-of-integers">valid list of integers</dfn> is a number of <a href="#valid-integer" title="valid integer">valid integers</a> separated by U+002C
COMMA characters, with no other characters (e.g. no <a href="#space-character" title="space character">space characters</a>). In addition, there
might be restrictions on the number of integers that can be given,
or on the range of values allowed.</p><h4 id="dates-and-times"><span class="secno">2.4.4 </span>Dates and times</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>In the algorithms below, the <dfn id="number-of-days-in-month-month-of-year-year">number of days in month <var title="">month</var> of year <var title="">year</var></dfn> is:
<em>31</em> if <var title="">month</var> is 1, 3, 5, 7, 8, 10, or
12; <em>30</em> if <var title="">month</var> is 4, 6, 9, or 11;
<em>29</em> if <var title="">month</var> is 2 and <var title="">year</var> is a number divisible by 400, or if <var title="">year</var> is a number divisible by 4 but not by 100; and
<em>28</em> otherwise. This takes into account leap years in the
Gregorian calendar. <a href="references.html#refsGREGORIAN">[GREGORIAN]</a></p><p>The <dfn id="concept-datetime-digit" title="concept-datetime-digit">digits</dfn> in the date
and time syntaxes defined in this section must be characters in the
range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), used to
express numbers in base ten.</p><h5 id="months"><span class="secno">2.4.4.1 </span>Months</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A <dfn id="concept-month" title="concept-month">month</dfn> consists of a specific
proleptic Gregorian date with no time-zone information and no date
information beyond a year and a month. <a href="references.html#refsGREGORIAN">[GREGORIAN]</a></p><p>A string is a <dfn id="valid-month-string">valid month string</dfn> representing a year
<var title="">year</var> and month <var title="">month</var> if it
consists of the following components in the given order:</p><ol><li>Four or more <a href="#concept-datetime-digit" title="concept-datetime-digit">digits</a>, representing <var title="">year</var>, where <var title="">year</var> > 0</li>
<li>A U+002D HYPHEN-MINUS character (-)</li>
<li>Two <a href="#concept-datetime-digit" title="concept-datetime-digit">digits</a>,
representing the month <var title="">month</var>, in the range
1 ≤ <var title="">month</var> ≤ 12</li>
</ol><h5 id="dates"><span class="secno">2.4.4.2 </span>Dates</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A <dfn id="concept-date" title="concept-date">date</dfn> consists of a specific
proleptic Gregorian date with no time-zone information, consisting
of a year, a month, and a day. <a href="references.html#refsGREGORIAN">[GREGORIAN]</a></p><p>A string is a <dfn id="valid-date-string">valid date string</dfn> representing a year
<var title="">year</var>, month <var title="">month</var>, and day
<var title="">day</var> if it consists of the following components
in the given order:</p><ol><li>A <a href="#valid-month-string">valid month string</a>, representing <var title="">year</var> and <var title="">month</var></li>
<li>A U+002D HYPHEN-MINUS character (-)</li>
<li>Two <a href="#concept-datetime-digit" title="concept-datetime-digit">digits</a>,
representing <var title="">day</var>, in the range
1 ≤ <var title="">day</var> ≤ <var title="">maxday</var> where <var title="">maxday</var> is the <a href="#number-of-days-in-month-month-of-year-year" title="number of days in month month of year year">number of days
in the month <var title="">month</var> and year <var title="">year</var></a></li>
</ol><h5 id="times"><span class="secno">2.4.4.3 </span>Times</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A <dfn id="concept-time" title="concept-time">time</dfn> consists of a specific
time with no time-zone information, consisting of an hour, a minute,
a second, and a fraction of a second.</p><p>A string is a <dfn id="valid-time-string">valid time string</dfn> representing an hour
<var title="">hour</var>, a minute <var title="">minute</var>, and a
second <var title="">second</var> if it consists of the following
components in the given order:</p><ol><li>Two <a href="#concept-datetime-digit" title="concept-datetime-digit">digits</a>,
representing <var title="">hour</var>, in the range
0 ≤ <var title="">hour</var> ≤ 23</li>
<li>A U+003A COLON character (:)</li>
<li>Two <a href="#concept-datetime-digit" title="concept-datetime-digit">digits</a>,
representing <var title="">minute</var>, in the range
0 ≤ <var title="">minute</var> ≤ 59</li>
<li>Optionally (required if <var title="">second</var> is
non-zero):
<ol><li>A U+003A COLON character (:)</li>
<li>Two <a href="#concept-datetime-digit" title="concept-datetime-digit">digits</a>,
representing the integer part of <var title="">second</var>, in
the range 0 ≤ <var title="">s</var> ≤ 59</li>
<li>Optionally (required if <var title="">second</var> is not an
integer):
<ol><li>A 002E FULL STOP character (.)</li>
<li>One or more <a href="#concept-datetime-digit" title="concept-datetime-digit">digits</a>, representing the
fractional part of <var title="">second</var></li>
</ol></li>
</ol></li>
</ol><p class="note">The <var title="">second</var> component cannot be
60 or 61; leap seconds cannot be represented.</p><h5 id="local-dates-and-times"><span class="secno">2.4.4.4 </span>Local dates and times</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A <dfn id="concept-datetime-local" title="concept-datetime-local">local date and time</dfn>
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. <a href="references.html#refsGREGORIAN">[GREGORIAN]</a></p><p>A string is a <dfn id="valid-local-date-and-time-string">valid local date and time string</dfn>
representing a date and time if it consists of the following
components in the given order:</p><ol><li>A <a href="#valid-date-string">valid date string</a> representing the date.</li>
<li>A U+0054 LATIN CAPITAL LETTER T character (T).</li>
<li>A <a href="#valid-time-string">valid time string</a> representing the time.</li>
</ol><h5 id="global-dates-and-times"><span class="secno">2.4.4.5 </span>Global dates and times</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A <dfn id="concept-datetime" title="concept-datetime">global date and time</dfn>
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. <a href="references.html#refsGREGORIAN">[GREGORIAN]</a></p><p>A string is a <dfn id="valid-global-date-and-time-string">valid global date and time string</dfn>
representing a date, time, and a time-zone offset if it consists of
the following components in the given order:</p><ol><li>A <a href="#valid-date-string">valid date string</a> representing the date</li>
<li>A U+0054 LATIN CAPITAL LETTER T character (T)</li>
<li>A <a href="#valid-time-string">valid time string</a> representing the time</li>
<li>Either:
<ul><li>A U+005A LATIN CAPITAL LETTER Z character (Z), allowed only
if the time zone is UTC</li>
<li>Or:
<ol><li>Either a U+002B PLUS SIGN character (+) or a U+002D
HYPHEN-MINUS character (-), representing the sign of the
time-zone offset</li>
<li>Two <a href="#concept-datetime-digit" title="concept-datetime-digit">digits</a>,
representing the hours component <var title="">hour</var> of
the time-zone offset, in the range 0 ≤ <var title="">hour</var> ≤ 23</li>
<li>A U+003A COLON character (:)</li>
<li>Two <a href="#concept-datetime-digit" title="concept-datetime-digit">digits</a>,
representing the minutes component <var title="">minute</var>
of the time-zone offset, in the range 0 ≤ <var title="">minute</var> ≤ 59</li>
</ol></li>
</ul></li>
</ol><p class="note">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.</p><div class="example">
<p>The following are some examples of dates written as <a href="#valid-global-date-and-time-string" title="valid global date and time string">valid global date and
time strings</a>.</p>
<dl><dt>"<code>0037-12-13T00:00Z</code>"</dt>
<dd>Midnight UTC on the birthday of Nero (the Roman Emperor).</dd>
<dt>"<code>1979-10-14T12:00:00.001-04:00</code>"</dt>
<dd>One millisecond after noon on October 14th 1979, in the time
zone in use on the east coast of the USA during daylight saving
time.</dd>
<dt>"<code>8592-01-01T02:09+02:09</code>"</dt>
<dd>Midnight UTC on the 1st of January, 8592. The time zone
associated with that time is two hours and nine minutes ahead of
UTC, which is not currently a real time zone, but is nonetheless
allowed.</dd>
</dl><p>Several things are notable about these dates:</p>
<ul><li>Years with fewer than four digits have to be
zero-padded. The date "37-12-13" would not be a valid date.</li>
<li>To unambiguously identify a moment in time prior to the
introduction of the Gregorian calendar, the date has to be first
converted to the Gregorian calendar from the calendar in use at
the time (e.g. from the Julian calendar). The date of Nero's birth
is the 15th of December 37, in the Julian Calendar, which is the
13th of December 37 in the proleptic Gregorian Calendar.</li> <!--
This might not be true. I can't find a reference that gives his
birthday with an explicit statement about the calendar being
used. However, it seems unlikely that it would be given in the
Gregorian calendar, so I assume sites use the Julian one. -->
<li>The time and time-zone offset components are not optional.</li>
<li>Dates before the year one can't be represented as a datetime
in this version of HTML.</li>
<li>Time-zone offsets differ based on daylight savings time.</li>
</ul></div><h5 id="weeks"><span class="secno">2.4.4.6 </span>Weeks</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A <dfn id="concept-week" title="concept-week">week</dfn> 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. <a href="references.html#refsGREGORIAN">[GREGORIAN]</a></p><p>A week-year with a number <var title="">year</var> has 53 weeks
if it corresponds to either a year <var title="">year</var> in the
proleptic Gregorian calendar that has a Thursday as its first day
(January 1st), or a year <var title="">year</var> in the proleptic
Gregorian calendar that has a Wednesday as its first day (January
1st) and where <var title="">year</var> is a number divisible by
400, or a number divisible by 4 but not by 100. All other week-years
have 52 weeks.</p><p>The <dfn id="week-number-of-the-last-day">week number of the last day</dfn> 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.</p><p class="note">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 <var title="">y</var> is the week that contains the first Thursday of
the Gregorian year <var title="">y</var>.</p><p>A string is a <dfn id="valid-week-string">valid week string</dfn> representing a
week-year <var title="">year</var> and week <var title="">week</var>
if it consists of the following components in the given order:</p><ol><li>Four or more <a href="#concept-datetime-digit" title="concept-datetime-digit">digits</a>, representing <var title="">year</var>, where <var title="">year</var> > 0</li>
<li>A U+002D HYPHEN-MINUS character (-)</li>
<li>A U+0057 LATIN CAPITAL LETTER W character (W)</li>
<li>Two <a href="#concept-datetime-digit" title="concept-datetime-digit">digits</a>,
representing the week <var title="">week</var>, in the range
1 ≤ <var title="">week</var> ≤ <var title="">maxweek</var>, where <var title="">maxweek</var> is the
<a href="#week-number-of-the-last-day">week number of the last day</a> of week-year <var title="">year</var></li>
</ol><h5 id="vaguer-moments-in-time"><span class="secno">2.4.4.7 </span>Vaguer moments in time</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A string is a <dfn id="valid-date-or-time-string">valid date or time string</dfn> if it is also
one of the following:</p><ul><li>A <a href="#valid-date-string">valid date string</a>.</li>
<li>A <a href="#valid-time-string">valid time string</a>.</li>
<li>A <a href="#valid-global-date-and-time-string">valid global date and time string</a>.</li>
</ul><p>A string is a <dfn id="valid-date-or-time-string-in-content">valid date or time string in content</dfn> if
it consists of zero or more <a href="#white_space">White_Space</a> characters,
followed by a <a href="#valid-date-or-time-string">valid date or time string</a>, followed by
zero or more further <a href="#white_space">White_Space</a> characters.</p><hr><p>A string is a <dfn id="valid-date-string-with-optional-time">valid date string with optional time</dfn> if
it is also one of the following:</p><ul><li>A <a href="#valid-date-string">valid date string</a>.</li>
<li>A <a href="#valid-global-date-and-time-string">valid global date and time string</a>.</li>
</ul><p>A string is a <dfn id="valid-date-string-in-content-with-optional-time">valid date string in content with optional
time</dfn> if it consists of zero or more <a href="#white_space">White_Space</a>
characters, followed by a <a href="#valid-date-string-with-optional-time">valid date string with optional
time</a>, followed by zero or more further
<a href="#white_space">White_Space</a> characters.</p><h4 id="colors"><span class="secno">2.4.5 </span>Colors</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A <dfn id="simple-color">simple color</dfn> 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. <a href="references.html#refsSRGB">[SRGB]</a></p><p>A string is a <dfn id="valid-simple-color">valid simple color</dfn> if it is exactly
seven characters long, and the first character is a U+0023 NUMBER
SIGN character (#), and the remaining six characters are all in the
range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0041 LATIN
CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F, U+0061 LATIN
SMALL LETTER A to U+0066 LATIN SMALL LETTER F, with the first two
digits representing the red component, the middle two digits
representing the green component, and the last two digits
representing the blue component, in hexadecimal.</p><p>A string is a <dfn id="valid-lowercase-simple-color">valid lowercase simple color</dfn> if it is a
<a href="#valid-simple-color">valid simple color</a> and doesn't use any characters in
the range U+0041 LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL
LETTER F.</p><hr><p class="note">The <a href="the-canvas-element.html#canvas-context-2d" title="canvas-context-2d">2D graphics
context</a> has a separate color syntax that also handles
opacity.</p><h4 id="space-separated-tokens"><span class="secno">2.4.6 </span>Space-separated tokens</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A <dfn id="set-of-space-separated-tokens">set of space-separated tokens</dfn> is a string containing
zero or more words separated by one or more <a href="#space-character" title="space
character">space characters</a>, where words consist of any
string of one or more characters, none of which are <a href="#space-character" title="space character">space characters</a>.</p><p>A string containing a <a href="#set-of-space-separated-tokens">set of space-separated tokens</a>
may have leading or trailing <a href="#space-character" title="space character">space
characters</a>.</p><p>An <dfn id="unordered-set-of-unique-space-separated-tokens">unordered set of unique space-separated tokens</dfn> is a
<a href="#set-of-space-separated-tokens">set of space-separated tokens</a> where none of the words
are duplicated.</p><p>An <dfn id="ordered-set-of-unique-space-separated-tokens">ordered set of unique space-separated tokens</dfn> is a
<a href="#set-of-space-separated-tokens">set of space-separated tokens</a> where none of the words
are duplicated but where the order of the tokens is meaningful.</p><p><a href="#set-of-space-separated-tokens" title="set of space-separated tokens">Sets of
space-separated tokens</a> 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.</p><h4 id="comma-separated-tokens"><span class="secno">2.4.7 </span>Comma-separated tokens</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A <dfn id="set-of-comma-separated-tokens">set of comma-separated tokens</dfn> is a string containing
zero or more tokens each separated from the next by a single U+002C
COMMA character (,), where tokens consist of any string of zero or
more characters, neither beginning nor ending with <a href="#space-character" title="space character">space characters</a>, nor containing any
U+002C COMMA characters (,), and optionally surrounded by <a href="#space-character" title="space character">space characters</a>.</p><p class="example">For instance, the string "<code title=""> a ,b,,d d </code>" 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.</p><p><a href="#set-of-comma-separated-tokens" title="set of comma-separated tokens">Sets of
comma-separated tokens</a> 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.</p><h4 id="syntax-references"><span class="secno">2.4.8 </span>References</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A <dfn id="valid-hash-name-reference">valid hash-name reference</dfn> to an element of type <var title="">type</var> is a string consisting of a U+0023 NUMBER SIGN
character (#) followed by a string which exactly matches the value
of the <code title="">name</code> attribute of an element in the
document with type <var title="">type</var>.</p><h4 id="mq"><span class="secno">2.4.9 </span>Media queries</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A string is a <dfn id="valid-media-query">valid media query</dfn> if it matches the
<code title="">media_query_list</code> production of the Media
Queries specification. <a href="references.html#refsMQ">[MQ]</a></p><p>A string <dfn id="matches-the-environment">matches the environment</dfn> of a view if it is
the empty string, a string consisting of only <a href="#space-character" title="space
character">space characters</a>, or is a media query that matches
that view's environment according to the definitions given in the
Media Queries specification. <a href="references.html#refsMQ">[MQ]</a></p></body></html>
Received on Friday, 1 January 2010 04:51:38 UTC