W3C home > Mailing lists > Public > public-html-commits@w3.org > January 2010

html5/spec-author-view apis-in-html-documents.html,NONE,1.1 association-of-controls-and-forms.html,NONE,1.1 commands.html,NONE,1.1 common-input-element-attributes.html,NONE,1.1 common-microsyntaxes.html,NONE,1.1 content-models.html,NONE,1.1 dnd.html,NONE,1.1 edits.html,NONE,1.1 elements.html,NONE,1.1 embedded-content-1.html,NONE,1.1 grouping-content.html,NONE,1.1 links.html,NONE,1.1 number-state.html,NONE,1.1 scripting-1.html,NONE,1.1 sections.html,NONE,1.1 states-of-the-type-attribute.html,NONE,1.1 the-button-element.html,NONE,1.1 the-iframe-element.html,NONE,1.1 the-input-element.html,NONE,1.1 the-map-element.html,NONE,1.1 timers.html,NONE,1.1 urls.html,NONE,1.1

From: Michael Smith via cvs-syncmail <cvsmail@w3.org>
Date: Fri, 01 Jan 2010 04:51:37 +0000
To: Message-Id: <E1NQZU9-00066h-BP@lionel-hutz.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 &#8212; 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">&#8592; 4 The elements of HTML</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="sections.html">4.4 Sections &#8594;</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>&lt;script src="game-engine.js"&gt;&lt;/script&gt;
&lt;script type="text/x-game-map"&gt;
........U.........e
o............A....e
.....A.....AAA....e
.A..AAA...AAAAA...e
&lt;/script&gt;</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>&lt;script&gt;
 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;
 }
&lt;/script&gt;
&lt;form name="pricecalc" onsubmit="return false"&gt;
 &lt;fieldset&gt;
  &lt;legend&gt;Work out the price of your car&lt;/legend&gt;
  &lt;p&gt;Base cost: &#163;52000.&lt;/p&gt;
  &lt;p&gt;Select additional options:&lt;/p&gt;
  &lt;ul&gt;
   &lt;li&gt;&lt;label&gt;&lt;input type=checkbox name=brakes&gt; Ceramic brakes (&#163;1000)&lt;/label&gt;&lt;/li&gt;
   &lt;li&gt;&lt;label&gt;&lt;input type=checkbox name=radio&gt; Satellite radio (&#163;2500)&lt;/label&gt;&lt;/li&gt;
   &lt;li&gt;&lt;label&gt;&lt;input type=checkbox name=turbo&gt; Turbo charger (&#163;5000)&lt;/label&gt;&lt;/li&gt;
   &lt;li&gt;&lt;label&gt;&lt;input type=checkbox name=sticker&gt; "XZ" sticker (&#163;250)&lt;/label&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;Total: &#163;&lt;output name=result onformchange="calculate(form)"&gt;&lt;/output&gt;&lt;/p&gt;
 &lt;/fieldset&gt;
 &lt;script&gt;
  document.forms.pricecalc.dispatchFormChange();
 &lt;/script&gt;
&lt;/form&gt;</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 ] "--&gt;" data1 ) [ escape ]
escape        = "&lt;!--" data2 *( script-start data3 script-end data2 )

data1         = &lt;any string that doesn't contain a substring that matches not-data1&gt;
not-data1     = <!-- script-end / -->"&lt;!--"             <!-- the script-end is redundant here since it would close the element -->

data2         = &lt;any string that doesn't contain a substring that matches not-data2&gt;
not-data2     = <!-- script-end / -->script-start / "--&gt;"  <!-- the script-end is redundant here since it would close the element -->

data3         = &lt;any string that doesn't contain a substring that matches not-data3&gt;
not-data3     = script-end / "--&gt;"

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 (&lt;)
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 (&gt;)</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>&lt;script src="cool-effects.js"&gt;
 // create new instances using:
 //    var e = new Effect();
 // start the effect using .play, stop using .stop:
 //    e.play();
 //    e.stop();
&lt;/script&gt;</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>&lt;form action="calcSquare.php"&gt;
 &lt;p&gt;
  &lt;label for=x&gt;Number&lt;/label&gt;:
  &lt;input id="x" name="x" type="number"&gt;
 &lt;/p&gt;
 &lt;script&gt;
  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;
  };
 &lt;/script&gt;
 &lt;noscript&gt;
  &lt;input type=submit value="Calculate Square"&gt;
 &lt;/noscript&gt;
&lt;/form&gt;</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>&lt;form action="calcSquare.php"&gt;
 &lt;p&gt;
  &lt;label for=x&gt;Number&lt;/label&gt;:
  &lt;input id="x" name="x" type="number"&gt;
 &lt;/p&gt;
 <strong>&lt;input id="submit" type=submit value="Calculate Square"&gt;</strong>
 &lt;script&gt;
  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>
 &lt;/script&gt;
&lt;/form&gt;</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 &#8212; 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">&#8592; 4.8.11 The canvas element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="tabular-data.html">4.9 Tabular data &#8594;</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>&lt;p&gt;
 Please select a shape:
 &lt;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."&gt;
 &lt;map name="shapes"&gt;
  &lt;area shape=rect coords="50,50,100,100"&gt; &lt;!-- the hole in the red box --&gt;
  &lt;area shape=rect coords="25,25,125,125" href="red.html" alt="Red box."&gt;
  &lt;area shape=circle coords="200,75,50" href="green.html" alt="Green circle."&gt;
  &lt;area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle."&gt;
  &lt;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."&gt;
 &lt;/map&gt;
&lt;/p&gt;</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>&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;The quadratic formula&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;h1&gt;The quadratic formula&lt;/h1&gt;
  &lt;p&gt;
   &lt;math&gt;
    &lt;mi&gt;x&lt;/mi&gt;
    &lt;mo&gt;=&lt;/mo&gt;
    &lt;mfrac&gt;
     &lt;mrow&gt;
      &lt;mo form="prefix"&gt;&#8722;&lt;/mo&gt; &lt;mi&gt;b&lt;/mi&gt;
      &lt;mo&gt;&#177;&lt;/mo&gt;
      &lt;msqrt&gt;
       &lt;msup&gt; &lt;mi&gt;b&lt;/mi&gt; &lt;mn&gt;2&lt;/mn&gt; &lt;/msup&gt;
       &lt;mo&gt;&#8722;&lt;/mo&gt;
       &lt;mn&gt;4&lt;/mn&gt; &lt;mo&gt;&#8290;&lt;/mo&gt; &lt;mi&gt;a&lt;/mi&gt; &lt;mo&gt;&#8290;&lt;/mo&gt; &lt;mi&gt;c&lt;/mi&gt;
      &lt;/msqrt&gt;
     &lt;/mrow&gt;
     &lt;mrow&gt;
      &lt;mn&gt;2&lt;/mn&gt; &lt;mo&gt;&#8290;&lt;/mo&gt; &lt;mi&gt;a&lt;/mi&gt;
     &lt;/mrow&gt;
    &lt;/mfrac&gt;
   &lt;/math&gt;
  &lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</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 &#8804;
             <var title="">specified height</var> * <var title="">target ratio</var> &#8804;
             <var title="">specified width</var> + 0.5</span></li>

   <li><span title=""><var title="">specified height</var> - 0.5 &#8804;
             <var title="">specified width</var> / <var title="">target ratio</var> &#8804;
             <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 &#8212; 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">&#8592; 4.8 Embedded content</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="video.html">4.8.7 The video element &#8594;</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>&lt;p&gt;We're not scared of you! Here is your content, unedited:&lt;/p&gt;
&lt;iframe sandbox src="getusercontent.cgi?id=12193"&gt;&lt;/iframe&gt;</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>&lt;iframe sandbox="allow-same-origin allow-forms allow-scripts"
        src="http://maps.example.com/embedded.html"&gt;&lt;/iframe&gt;</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>&lt;nav&gt;&lt;iframe seamless src="nav.include.html"&gt;&lt;/iframe&gt;&lt;/nav&gt;</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>&lt;iframe src="http://ads.example.com/?customerid=923513721&amp;amp;format=banner"
        width="468" height="60"&gt;&lt;/iframe&gt;</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>&lt;embed src="catgame.swf"&gt;</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>&lt;embed src="catgame.swf" quality="high"&gt;</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>&lt;object data="catgame.swf"&gt;
 &lt;param name="quality" value="high"&gt;
&lt;/object&gt;</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>&lt;figure&gt;
 &lt;dd&gt;
  &lt;object type="application/x-java-applet"&gt;
   &lt;param name="code" value="MyJavaClass"&gt;
   &lt;p&gt;You do not have Java available, or it is disabled.&lt;/p&gt;
  &lt;/object&gt;
 &lt;/dd&gt;
 &lt;dt&gt;My Java Clock&lt;/dt&gt;
&lt;/figure&gt;</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>&lt;figure&gt;
 &lt;dd&gt;&lt;object data="clock.html"&gt;&lt;/object&gt;
 &lt;dt&gt;My HTML Clock
&lt;/figure&gt;</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>&lt;!DOCTYPE HTML&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
  &lt;title&gt;Flash test page&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;p&gt;
   &lt;object type="application/x-shockwave-flash"&gt;
    <strong>&lt;param name=movie value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"&gt;</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.
   &lt;/object&gt; 
  &lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</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 &#8212; 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">&#8592; 4.10.5.1.13 Number state</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="the-button-element.html">4.10.6 The button element &#8594;</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.2.6 </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> attribute</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>&lt;p&gt;&lt;label&gt;Account: &lt;input type="text" name="ac" autocomplete="off"&gt;&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;PIN: &lt;input type="password" name="pin" autocomplete="off"&gt;&lt;/label&gt;&lt;/p&gt;</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>&lt;label&gt;Homepage: &lt;input name=hp type=url list=hpurls&gt;&lt;/label&gt;
&lt;datalist id=hpurls&gt;
 &lt;option value="http://www.google.com/" label="Google"&gt;
 &lt;option value="http://www.reddit.com/" label="Reddit"&gt;
&lt;/datalist&gt;</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>&lt;form action="products.cgi" method=post enctype="multipart/formdata"&gt;
 &lt;table&gt;
  &lt;tr&gt; &lt;th&gt; Product ID &lt;th&gt; Product name &lt;th&gt; Price &lt;th&gt; Action
  &lt;tr&gt;
   &lt;td&gt; &lt;input readonly name="1.pid" value="H412"&gt;
   &lt;td&gt; &lt;input required name="1.pname" value="Floor lamp Ulke"&gt;
   &lt;td&gt; $&lt;input required type=number min=0 step=0.01 name="1.pprice" value="49.99"&gt;
   &lt;td&gt; &lt;button formnovalidate name="action" value="delete:1"&gt;Delete&lt;/button&gt;
  &lt;tr&gt;
   &lt;td&gt; &lt;input readonly name="2.pid" value="FG28"&gt;
   &lt;td&gt; &lt;input required name="2.pname" value="Table lamp Ulke"&gt;
   &lt;td&gt; $&lt;input required type=number min=0 step=0.01 name="2.pprice" value="24.99"&gt;
   &lt;td&gt; &lt;button formnovalidate name="action" value="delete:2"&gt;Delete&lt;/button&gt;
  &lt;tr&gt;
   &lt;td&gt; &lt;input required name="3.pid" value="" pattern="[A-Z0-9]+"&gt;
   &lt;td&gt; &lt;input required name="3.pname" value=""&gt;
   &lt;td&gt; $&lt;input required type=number min=0 step=0.01 name="3.pprice" value=""&gt;
   &lt;td&gt; &lt;button formnovalidate name="action" value="delete:3"&gt;Delete&lt;/button&gt;
 &lt;/table&gt;
 &lt;p&gt; &lt;button formnovalidate name="action" value="add"&gt;Add&lt;/button&gt; &lt;/p&gt;
 &lt;p&gt; &lt;button name="action" value="update"&gt;Save&lt;/button&gt; &lt;/p&gt;
&lt;/form&gt;</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>&lt;h1&gt;Create new account&lt;/h1&gt;
&lt;form action="/newaccount" method=post&gt;
 &lt;p&gt;
  &lt;label for="username"&gt;E-mail address:&lt;/label&gt;
  &lt;input id="username" type=email required name=un&gt;
 &lt;p&gt;
  &lt;label for="password1"&gt;Password:&lt;/label&gt;
  &lt;input id="password1" type=password required name=up&gt;
 &lt;p&gt;
  &lt;label for="password2"&gt;Confirm password:&lt;/label&gt;
  &lt;input id="password2" type=password onforminput="setCustomValidity(value != password1.value ? 'Passwords do not match.' : '')"&gt;
 &lt;p&gt;
  &lt;input type=submit value="Create account"&gt;
&lt;/form&gt;</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>&lt;label&gt;Cc: &lt;input type=email multiple name=cc&gt;&lt;/label&gt;</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>&lt;label&gt;Attachments: &lt;input type=file multiple name=att&gt;&lt;/label&gt;</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? &lt;input name=status maxlength=140&gt;</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>&lt;label&gt; Part number:
 &lt;input pattern="[0-9][A-Z]{3}" name="part"
        title="A part number is a digit followed by three uppercase letters."/&gt;
&lt;/label&gt;</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>&lt;input name=bday type=date max="1979-12-31"&gt;</pre>

  </div><div class="example">

   <p>The following number control limits input to whole numbers
   greater than zero:</p>

   <pre>&lt;input name=quantity required type=number min=1 value=1&gt;</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>&lt;input name=opacity type=range min=0 max=1 step=0.00392156863&gt;</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>&lt;input name=favtime type=time step=any&gt;</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>&lt;fieldset&gt;
 &lt;legend&gt;Mail Account&lt;/legend&gt;
 &lt;p&gt;&lt;label&gt;Name: &lt;input type="text" name="fullname" placeholder="John Ratzenberger"&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Address: &lt;input type="email" name="address" placeholder="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">&#8592; 4.4 Sections</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="text-level-semantics.html">4.6 Text-level semantics &#8594;</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#the-dl-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>&lt;p&gt;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.&lt;/p&gt;</pre>
   <pre>&lt;fieldset&gt;
 &lt;legend&gt;Personal information&lt;/legend&gt;
 &lt;p&gt;
   &lt;label&gt;Name: &lt;input name="n"&gt;&lt;/label&gt;
   &lt;label&gt;&lt;input name="anon" type="checkbox"&gt; Hide from other users&lt;/label&gt;
 &lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Address: &lt;textarea name="a"&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;</pre>
   <pre>&lt;p&gt;There was once an example from Femley,&lt;br&gt;
Whose markup was of dubious quality.&lt;br&gt;
The validator complained,&lt;br&gt;
So the author was pained,&lt;br&gt;
To move the error from the markup to the rhyming.&lt;/p&gt;</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>&lt;section&gt;
 &lt;!-- ... --&gt;
 &lt;p&gt;Last modified: 2001-04-23&lt;/p&gt;
 &lt;p&gt;Author: http://quotes.example.org/s/sonnet130.html"&gt;
  &lt;p&gt;My mistress' eyes are nothing like the sun,&lt;br&gt;
  Coral is far more red, than her lips red,&lt;br&gt;
  ...</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>&lt;p&gt;I have lived in the following countries (given in the order of when
I first lived there):&lt;/p&gt;
&lt;ol&gt;
 &lt;li&gt;Switzerland
 &lt;li&gt;United Kingdom
 &lt;li&gt;United States
 &lt;li&gt;Norway
&lt;/ol&gt;</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>&lt;p&gt;I have lived in the following countries (given in the order of when
I first lived there):&lt;/p&gt;
&lt;ol&gt;
 &lt;li&gt;United Kingdom
 &lt;li&gt;Switzerland
 &lt;li&gt;United States
 &lt;li&gt;Norway
&lt;/ol&gt;</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 &#8212; 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>&lt;p&gt;I have lived in the following countries:&lt;/p&gt;
&lt;ul&gt;
 &lt;li&gt;Norway
 &lt;li&gt;Switzerland
 &lt;li&gt;United Kingdom
 &lt;li&gt;United States
&lt;/ul&gt;</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>&lt;p&gt;I have lived in the following countries:&lt;/p&gt;
&lt;ul&gt;
 &lt;li&gt;Switzerland
 &lt;li&gt;Norway
 &lt;li&gt;United Kingdom
 &lt;li&gt;United States
&lt;/ul&gt;</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>&lt;figure&gt;
 &lt;dt&gt;The top 10 movies of all time&lt;/dt&gt;
 &lt;dd&gt;
  &lt;ol&gt;
   &lt;li value="10"&gt;&lt;cite&gt;Josie and the Pussycats&lt;/cite&gt;, 2001&lt;/li&gt;
   &lt;li value="9"&gt;&lt;cite lang="sh"&gt;&#1062;&#1088;&#1085;&#1072; &#1084;&#1072;&#1095;&#1082;&#1072;, &#1073;&#1077;&#1083;&#1080; &#1084;&#1072;&#1095;&#1086;&#1088;&lt;/cite&gt;, 1998&lt;/li&gt;
   &lt;li value="8"&gt;&lt;cite&gt;A Bug's Life&lt;/cite&gt;, 1998&lt;/li&gt;
   &lt;li value="7"&gt;&lt;cite&gt;Toy Story&lt;/cite&gt;, 1995&lt;/li&gt;
   &lt;li value="6"&gt;&lt;cite&gt;Monsters, Inc&lt;/cite&gt;, 2001&lt;/li&gt;
   &lt;li value="5"&gt;&lt;cite&gt;Cars&lt;/cite&gt;, 2006&lt;/li&gt;
   &lt;li value="4"&gt;&lt;cite&gt;Toy Story 2&lt;/cite&gt;, 1999&lt;/li&gt;
   &lt;li value="3"&gt;&lt;cite&gt;Finding Nemo&lt;/cite&gt;, 2003&lt;/li&gt;
   &lt;li value="2"&gt;&lt;cite&gt;The Incredibles&lt;/cite&gt;, 2004&lt;/li&gt;
   &lt;li value="1"&gt;&lt;cite&gt;Ratatouille&lt;/cite&gt;, 2007&lt;/li&gt;
  &lt;/ol&gt;
 &lt;dd&gt;
&lt;/figure&gt;</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>&lt;figure&gt;
 &lt;dt&gt;The top 10 movies of all time&lt;/dt&gt;
 &lt;dd&gt;
  &lt;ol reversed&gt;
   &lt;li&gt;&lt;cite&gt;Josie and the Pussycats&lt;/cite&gt;, 2001&lt;/li&gt;
   &lt;li&gt;&lt;cite lang="sh"&gt;&#1062;&#1088;&#1085;&#1072; &#1084;&#1072;&#1095;&#1082;&#1072;, &#1073;&#1077;&#1083;&#1080; &#1084;&#1072;&#1095;&#1086;&#1088;&lt;/cite&gt;, 1998&lt;/li&gt;
   &lt;li&gt;&lt;cite&gt;A Bug's Life&lt;/cite&gt;, 1998&lt;/li&gt;
   &lt;li&gt;&lt;cite&gt;Toy Story&lt;/cite&gt;, 1995&lt;/li&gt;
   &lt;li&gt;&lt;cite&gt;Monsters, Inc&lt;/cite&gt;, 2001&lt;/li&gt;
   &lt;li&gt;&lt;cite&gt;Cars&lt;/cite&gt;, 2006&lt;/li&gt;
   &lt;li&gt;&lt;cite&gt;Toy Story 2&lt;/cite&gt;, 1999&lt;/li&gt;
   &lt;li&gt;&lt;cite&gt;Finding Nemo&lt;/cite&gt;, 2003&lt;/li&gt;
   &lt;li&gt;&lt;cite&gt;The Incredibles&lt;/cite&gt;, 2004&lt;/li&gt;
   &lt;li&gt;&lt;cite&gt;Ratatouille&lt;/cite&gt;, 2007&lt;/li&gt;
  &lt;/ol&gt;
 &lt;/dd&gt;
&lt;/figure&gt;</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>&lt;dl&gt;
 &lt;dt&gt; Authors
 &lt;dd&gt; John
 &lt;dd&gt; Luke
 &lt;dt&gt; Editor
 &lt;dd&gt; Frank
&lt;/dl&gt;</pre>
  </div><div class="example">
   <p>In the following example, one definition is linked to two
   terms.</p>
   <pre>&lt;dl&gt;
 &lt;dt lang="en-US"&gt; &lt;dfn&gt;color&lt;/dfn&gt; &lt;/dt&gt;
 &lt;dt lang="en-GB"&gt; &lt;dfn&gt;colour&lt;/dfn&gt; &lt;/dt&gt;
 &lt;dd&gt; 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. &lt;/dd&gt;
&lt;/dl&gt;</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>&lt;dl&gt;
 &lt;dt&gt; Last modified time &lt;/dt&gt;
 &lt;dd&gt; 2004-12-23T23:33Z &lt;/dd&gt;
 &lt;dt&gt; Recommended update interval &lt;/dt&gt;
 &lt;dd&gt; 60s &lt;/dd&gt;
 &lt;dt&gt; Authors &lt;/dt&gt;
 &lt;dt&gt; Editors &lt;/dt&gt;
 &lt;dd&gt; Robert Rothman &lt;/dd&gt;
 &lt;dd&gt; Daniel Jackson &lt;/dd&gt;
&lt;/dl&gt;</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>&lt;p&gt;Determine the victory points as follows (use the
first matching case):&lt;/p&gt;
&lt;dl&gt;
 &lt;dt&gt; If you have exactly five gold coins &lt;/dt&gt;
 &lt;dd&gt; You get five victory points &lt;/dd&gt;
 &lt;dt&gt; If you have one or more gold coins, and you have one or more silver coins &lt;/dt&gt;
 &lt;dd&gt; You get two victory points &lt;/dd&gt;
 &lt;dt&gt; If you have one or more silver coins &lt;/dt&gt;
 &lt;dd&gt; You get one victory point &lt;/dd&gt;
 &lt;dt&gt; Otherwise &lt;/dt&gt;
 &lt;dd&gt; You get no victory points &lt;/dd&gt;
&lt;/dl&gt;</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>&lt;dl&gt;
 &lt;dt&gt;&lt;dfn&gt;Apartment&lt;/dfn&gt;, n.&lt;/dt&gt;
 &lt;dd&gt;An execution context grouping one or more threads with one or
 more COM objects.&lt;/dd&gt;
 &lt;dt&gt;&lt;dfn&gt;Flat&lt;/dfn&gt;, n.&lt;/dt&gt;
 &lt;dd&gt;A deflated tire.&lt;/dd&gt;
 &lt;dt&gt;&lt;dfn&gt;Home&lt;/dfn&gt;, n.&lt;/dt&gt;
 &lt;dd&gt;The user's login directory.&lt;/dd&gt;
&lt;/dl&gt;</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>&lt;dl&gt;
 &lt;dt&gt;&lt;dfn&gt;happiness&lt;/dfn&gt;&lt;/dt&gt;
 &lt;dd class="pronunciation"&gt;/'h&#230; p. nes/&lt;/dd&gt;
 &lt;dd class="part-of-speech"&gt;&lt;i&gt;&lt;abbr&gt;n.&lt;/abbr&gt;&lt;/i&gt;&lt;/dd&gt;
 &lt;dd&gt;The state of being happy.&lt;/dd&gt;
 &lt;dd&gt;Good fortune; success. &lt;q&gt;Oh &lt;b&gt;happiness&lt;/b&gt;! It worked!&lt;/q&gt;&lt;/dd&gt;
 &lt;dt&gt;&lt;dfn&gt;rejoice&lt;/dfn&gt;&lt;/dt&gt;
 &lt;dd class="pronunciation"&gt;/ri jois'/&lt;/dd&gt;
 &lt;dd&gt;&lt;i class="part-of-speech"&gt;&lt;abbr&gt;v.intr.&lt;/abbr&gt;&lt;/i&gt; To be delighted oneself.&lt;/dd&gt;
 &lt;dd&gt;&lt;i class="part-of-speech"&gt;&lt;abbr&gt;v.tr.&lt;/abbr&gt;&lt;/i&gt; To cause one to be delighted.&lt;/dd&gt;
&lt;/dl&gt;</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>&lt;article lang="en-US"&gt;
 &lt;h1&gt;My use of language and my cats&lt;/h1&gt;
 &lt;p&gt;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.&lt;/p&gt;
 &lt;div lang="en-GB"&gt;
  &lt;p&gt;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.&lt;/p&gt;
  &lt;p&gt;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"...&lt;/p&gt;
 &lt;/div&gt;
 &lt;p&gt;I should say "sidewalk" and "apartment" and "color"!&lt;/p&gt;
&lt;/article&gt;</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 &#8212; 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">&#8592; 6 Web browsers</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="offline.html">6.7 Offline Web applications &#8594;</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 &#8212; 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">&#8592; 3 Semantics, structure, and APIs of HTML documents</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="content-models.html">3.2.5 Content models &#8594;</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">&lt;!DOCTYPE HTML&gt;
&lt;html lang="en-GB"&gt;
 &lt;head&gt; &lt;title&gt; Demonstration &lt;/title&gt; &lt;/head&gt;
 &lt;body&gt;
  &lt;table&gt;
   &lt;tr&gt; &lt;td&gt; My favourite animal is the cat. &lt;/td&gt; &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;
     &#8212;&lt;a href="http://example.org/~ernest/"&gt;&lt;cite&gt;Ernest&lt;/cite&gt;&lt;/a&gt;,
     in an essay from 1992
    &lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;
 &lt;/body&gt;
&lt;/html&gt;</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>&lt;!DOCTYPE HTML&gt;
&lt;html lang="en-GB"&gt;
 &lt;head&gt; &lt;title&gt; Demonstration &lt;/title&gt; &lt;/head&gt;
 &lt;body&gt;
  &lt;blockquote&gt;
   &lt;p&gt; My favourite animal is the cat. &lt;/p&gt;
  &lt;/blockquote&gt;
  &lt;p&gt;
   &#8212;&lt;a href="http://example.org/~ernest/"&gt;Ernest&lt;/a&gt;,
   in an essay from 1992
  &lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</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">&lt;body&gt;
 &lt;h1&gt;ABC Company&lt;/h1&gt;
 &lt;h2&gt;Leading the way in widget design since 1432&lt;/h2&gt;
 ...</pre>

   <p>The <code><a href="sections.html#the-hgroup-element">hgroup</a></code> element is intended for these kinds of
   situations:</p>

   <pre>&lt;body&gt;
 &lt;hgroup&gt;
  &lt;h1&gt;ABC Company&lt;/h1&gt;
  &lt;h2&gt;Leading the way in widget design since 1432&lt;/h2&gt;
 &lt;/hgroup&gt;
 ...</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">&lt;label&gt;Carpet: &lt;input type="carpet" name="c" texture="deep pile"&gt;&lt;/label&gt;</pre>

   <p>Here would be an alternative and correct way to mark this up:</p>

   <pre>&lt;label&gt;Carpet: &lt;input type="text" class="carpet" name="c" data-texture="deep pile"&gt;&lt;/label&gt;</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">&lt;p&gt;My logs show that there was some interest in &lt;abbr title="Hypertext
Transport Protocol"&gt;HTTP&lt;/abbr&gt; today.&lt;/p&gt;</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>&lt;p&gt;My sweat suit is &lt;span style="color: green; background:
transparent"&gt;green&lt;/span&gt; and my eyes are &lt;span style="color: blue;
background: transparent"&gt;blue&lt;/span&gt;.&lt;/p&gt;</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>&lt;ol&gt;
 &lt;li data-length="2m11s"&gt;Beyond The Sea&lt;/li&gt;
 ...
&lt;/ol&gt;</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>&lt;div class="spaceship" data-id="92432"
     data-weapons="laser 2" data-shields="50%"
     data-x="30" data-y="10" data-z="90"&gt;
 &lt;button class="fire"
         onclick="spaceships[this.parentNode.dataset.id].fire()"&gt;
  Fire
 &lt;/button&gt;
&lt;/div&gt;</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 &#8212; 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">&#8592; 2.4 Common microsyntaxes</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="dom.html">3 Semantics, structure, and APIs of HTML documents &#8594;</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 class="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">&lt;query&gt;</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">&lt;query&gt;</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">&lt;query&gt;</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">&lt;fragment&gt;</a> component is not part of the <a href="#url-query" title="url-query">&lt;query&gt;</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&lt;any&gt; <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>&lt;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"&gt;</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') &amp;&amp; // checking the 'class' attribute
      node.dataset.x == x &amp;&amp; // 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 &lt; 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 &#8212; 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">&#8592; 4.10.6 The button element</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="interactive-elements.html">4.11 Interactive elements &#8594;</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>&lt;input maxlength="256" name="q" value="" autofocus&gt;
&lt;input type="submit" value="Search"&gt;</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>&lt;form action="editor.cgi" method="post"&gt;
 &lt;p&gt;&lt;label&gt;Name: &lt;input required name=fn&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Essay: &lt;textarea name=essay&gt;&lt;/textarea&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;input type=submit name=submit value="Submit essay"&gt;&lt;/p&gt;
 &lt;p&gt;&lt;input type=submit formnovalidate name=save value="Save essay"&gt;&lt;/p&gt;
 &lt;p&gt;&lt;input type=submit formnovalidate name=cancel value="Cancel"&gt;&lt;/p&gt;
&lt;/form&gt;</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>&lt;label&gt;Feeling: &lt;input name=f type="text" oninput="check(this)"&gt;&lt;/label&gt;
&lt;script&gt;
 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('');
   }
 }
&lt;/script&gt;</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>&lt;form action="/find.cgi" method=get&gt;
 &lt;input type=text name=t&gt;
 &lt;input type=search name=q&gt;
 &lt;input type=submit&gt;
&lt;/form&gt;</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&amp;q=fur</code>.</p><p>On the other hand, consider this form:</p><pre>&lt;form action="/find.cgi" method=post enctype="multipart/form-data"&gt;
 &lt;input type=text name=t&gt;
 &lt;input type=search name=q&gt;
 &lt;input type=submit&gt;
&lt;/form&gt;</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 &#8212; 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">&#8592; 4.6 Text-level semantics</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="embedded-content-1.html">4.8 Embedded content &#8594;</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>&lt;aside&gt;
 &lt;ins&gt;
  &lt;p&gt; I like fruit. &lt;/p&gt;
 &lt;/ins&gt;
&lt;/aside&gt;</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>&lt;aside&gt;
 &lt;ins&gt;
  Apples are &lt;em&gt;tasty&lt;/em&gt;.
 &lt;/ins&gt;
 &lt;ins&gt;
  So are pears.
 &lt;/ins&gt;
&lt;/aside&gt;</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">&lt;aside&gt;
 &lt;!-- don't do this --&gt;
 &lt;ins datetime="2005-03-16T00:00Z"&gt;
  &lt;p&gt; I like fruit. &lt;/p&gt;
  Apples are &lt;em&gt;tasty&lt;/em&gt;.
 &lt;/ins&gt;
 &lt;ins datetime="2007-12-19T00:00Z"&gt;
  So are pears.
 &lt;/ins&gt;
&lt;/aside&gt;</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>&lt;aside&gt;
 &lt;ins datetime="2005-03-16T00:00Z"&gt;
  &lt;p&gt; I like fruit. &lt;/p&gt;
 &lt;/ins&gt;
 &lt;ins datetime="2005-03-16T00:00Z"&gt;
  Apples are &lt;em&gt;tasty&lt;/em&gt;.
 &lt;/ins&gt;
 &lt;ins datetime="2007-12-19T00:00Z"&gt;
  So are pears.
 &lt;/ins&gt;
&lt;/aside&gt;</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>&lt;h1&gt;To Do&lt;/h1&gt;
&lt;ul&gt;
 &lt;li&gt;Empty the dishwasher&lt;/li&gt;
 &lt;li&gt;&lt;del datetime="2009-10-11T01:25-07:00"&gt;Watch Walter Lewin's lectures&lt;/del&gt;&lt;/li&gt;
 &lt;li&gt;&lt;del datetime="2009-10-10T23:38-07:00"&gt;Download more tracks&lt;/del&gt;&lt;/li&gt;
 &lt;li&gt;Buy a printer&lt;/li&gt;
&lt;/ul&gt;</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>&lt;section&gt;
 &lt;ins&gt;
  &lt;p&gt;
   This is a paragraph that was inserted.
  &lt;/p&gt;
  This is another paragraph whose first sentence was inserted
  at the same time as the paragraph above.
 &lt;/ins&gt;
 This is a second sentence, which was there all along.
&lt;/section&gt;</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">&lt;section&gt;
 This is the first paragraph. &lt;ins&gt;This sentence was
 inserted.
 &lt;p&gt;This second paragraph was inserted.&lt;/p&gt;
 This sentence was inserted too.&lt;/ins&gt; This is the
 third paragraph in this example.
 &lt;!-- (don't do this) --&gt;
&lt;/section&gt;</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>&lt;section&gt;
 &lt;p&gt;This is the first paragraph. &lt;del&gt;This sentence was
 deleted.&lt;/del&gt;&lt;/p&gt;
 &lt;p&gt;&lt;del&gt;This sentence was deleted too.&lt;/del&gt; That
 sentence needed a separate &amp;lt;del&amp;gt; element.&lt;/p&gt;
&lt;/section&gt;</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>&lt;h1&gt;Stop-ship bugs&lt;/h1&gt;
&lt;ol&gt;
 &lt;li&gt;&lt;ins datetime="2008-02-12T15:20Z"&gt;<em>Bug 225:
 Rain detector doesn't work in snow</em>&lt;/ins&gt;&lt;/li&gt;
 &lt;li&gt;&lt;del datetime="2008-03-01T20:22Z"&gt;&lt;ins datetime="2008-02-14T12:02Z"&gt;Bug 228:
 Water buffer overflows in April&lt;/ins&gt;&lt;/del&gt;&lt;/li&gt;
 &lt;li&gt;&lt;ins datetime="2008-02-16T13:50Z"&gt;<em>Bug 230:
 Water heater doesn't use renewable fuels</em>&lt;/ins&gt;&lt;/li&gt;
 &lt;li&gt;&lt;del datetime="2008-02-20T21:15Z"&gt;&lt;ins datetime="2008-02-16T14:25Z"&gt;Bug 232:
 Carbon dioxide emissions detected after startup&lt;/ins&gt;&lt;/del&gt;&lt;/li&gt;
&lt;/ol&gt;</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>&lt;h1&gt;List of &lt;del&gt;fruits&lt;/del&gt;&lt;ins&gt;colors&lt;/ins&gt;&lt;/h1&gt;
&lt;ul&gt;
 &lt;li&gt;&lt;del&gt;Lime&lt;/del&gt;&lt;ins&gt;Green&lt;/ins&gt;&lt;/li&gt;
 &lt;li&gt;&lt;del&gt;Apple&lt;/del&gt;&lt;/li&gt;
 &lt;li&gt;Orange&lt;/li&gt;
 &lt;li&gt;&lt;del&gt;Pear&lt;/del&gt;&lt;/li&gt;
 &lt;li&gt;&lt;ins&gt;Teal&lt;/ins&gt;&lt;/li&gt;
 &lt;li&gt;&lt;del&gt;Lemon&lt;/del&gt;&lt;ins&gt;Yellow&lt;/ins&gt;&lt;/li&gt;
 &lt;li&gt;Olive&lt;/li&gt;
 &lt;li&gt;&lt;ins&gt;Purple&lt;/ins&gt;
&lt;/ul&gt;</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 &#8212; 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">&#8592; 3.2 Elements</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="apis-in-html-documents.html">3.3 APIs in HTML documents &#8594;</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>&lt;html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:r="http://www.w3.org/1999/02/22-rdf-syntax-ns#"&gt;
 &lt;head&gt;
  &lt;title&gt;Hedral's Home Page&lt;/title&gt;
  &lt;r:RDF&gt;
   &lt;Person xmlns="http://www.w3.org/2000/10/swap/pim/contact#"
           r:about="http://hedral.example.com/#"&gt;
    &lt;fullName&gt;Cat Hedral&lt;/fullName&gt;
    &lt;mailbox r:resource="mailto: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>&lt;p&gt;Hello &lt;a href="world.html"&gt;&lt;em&gt;wonderful&lt;/em&gt; world&lt;/a&gt;!&lt;/p&gt;</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>&lt;section&gt;
  &lt;h1&gt;Example of paragraphs&lt;/h1&gt;
  This is the &lt;em&gt;first&lt;/em&gt; paragraph in this example.
  &lt;p&gt;This is the second.&lt;/p&gt;
  &lt;!-- This is not a paragraph. --&gt;
&lt;/section&gt;</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 &#8212;
   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>&lt;section&gt;
  &lt;ins&gt;&lt;h1&gt;Example of paragraphs&lt;/h1&gt;
  This is the &lt;em&gt;first&lt;/em&gt; paragraph in&lt;/ins&gt; this example&lt;del&gt;.
  &lt;p&gt;This is the second.&lt;/p&gt;&lt;/del&gt;
  &lt;!-- This is not a paragraph. --&gt;
&lt;/section&gt;</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>&lt;aside&gt;
 Welcome!
 &lt;a href="about.html"&gt;
  This is home of...
  &lt;h1&gt;The Falcons!&lt;/h1&gt;
  The Lockheed Martin multirole jet fighter aircraft!
 &lt;/a&gt;
 This page discusses the F-16 Fighting Falcon's innermost secrets.
&lt;/aside&gt;</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>&lt;aside&gt;
 &lt;p&gt;Welcome! &lt;a href="about.html"&gt;This is home of...&lt;/a&gt;&lt;/p&gt;
 &lt;h1&gt;&lt;a href="about.html"&gt;The Falcons!&lt;/a&gt;&lt;/h1&gt;
 &lt;p&gt;&lt;a href="about.html"&gt;The Lockheed Martin multirole jet
 fighter aircraft!&lt;/a&gt; This page discusses the F-16 Fighting
 Falcon's innermost secrets.&lt;/p&gt;
&lt;/aside&gt;</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>&lt;section&gt;
 &lt;h1&gt;My Cats&lt;/h1&gt;
 You can play with my cat simulator.
 &lt;object data="cats.sim"&gt;
  To see the cat simulator, use one of the following links:
  &lt;ul&gt;
   &lt;li&gt;&lt;a href="cats.sim"&gt;Download simulator file&lt;/a&gt;
   &lt;li&gt;&lt;a href="http://sims.example.com/watch?v=LYds5xY4INU"&gt;Use online simulator&lt;/a&gt;
  &lt;/ul&gt;
  Alternatively, upgrade to the Mellblom Browser.
 &lt;/object&gt;
 I'm quite proud of it.
&lt;/section&gt;</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 &#8212; 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>&lt;fieldset&gt;
 &lt;legend&gt;Destination&lt;/legend&gt;
 &lt;p&gt;&lt;label&gt;Airport: &lt;input type=text name=to list=airports&gt;&lt;/label&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;Departure time: &lt;input type=datetime-local name=totime step=3600&gt;&lt;/label&gt;&lt;/p&gt;
&lt;/fieldset&gt;
&lt;datalist id=airports&gt;
 &lt;option value=ATL label="Atlanta"&gt;
 &lt;option value=MEM label="Memphis"&gt;
 &lt;option value=LHR label="London Heathrow"&gt;
 &lt;option value=LAX label="Los Angeles"&gt;
 &lt;option value=FRA label="Frankfurt"&gt;
&lt;/datalist&gt;</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 &#8212; 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">&#8592; 3.2.5 Content models</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="semantics.html">4 The elements of HTML &#8594;</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()</code></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 &#8212; 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>&lt;form onsubmit="return false"&gt;
 &lt;input name=a type=number step=any&gt; +
 &lt;input name=b type=number step=any&gt; =
 &lt;output onforminput="value = a.value + b.value"&gt;&lt;/output&gt;
&lt;/form&gt;</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 &#8212; 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">&#8592; 7 User Interaction</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="comms.html">8 Communication &#8594;</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>&lt;p&gt;What fruits do you like?&lt;/p&gt;
&lt;ol ondragstart="dragStartHandler(event)"&gt;
 &lt;li draggable data-value="fruit-apple"&gt;Apples&lt;/li&gt;
 &lt;li draggable data-value="fruit-orange"&gt;Oranges&lt;/li&gt;
 &lt;li draggable data-value="fruit-pear"&gt;Pears&lt;/li&gt;
&lt;/ol&gt;
&lt;script&gt;
  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
    }
  }
&lt;/script&gt;</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>&lt;p&gt;Drop your favourite fruits below:&lt;/p&gt;
&lt;ol class="dropzone"
    ondragenter="dragEnterHandler(event)"
    ondragover="dragOverHandler(event)"
    ondrop="dropHandler(event)"&gt;
&lt;/ol&gt;
&lt;script&gt;
  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);
  }
&lt;/script&gt;</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>&lt;p&gt;What fruits do you like?&lt;/p&gt;
&lt;ol ondragstart="dragStartHandler(event)" ondragend="dragEndHandler(event)"&gt;
 <em>...as before...</em>
&lt;/ol&gt;
&lt;script&gt;
  function dragStartHandler(event) {
    // <em>...as before...</em>
  }
  function dragEndHandler(event) {
    // remove the dragged element
    event.target.parentNode.removeChild(event.target);
  }
&lt;/script&gt;</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>&#10003; Bubbles</td>
     <td>&#10003; 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>&#10003; Bubbles</td>
     <td>&#10003; 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>&#10003; Bubbles</td>
     <td>&#10003; 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>&#10003; Bubbles</td>
     <td>&#8212;</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>&#10003; Bubbles</td>
     <td>&#10003; 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>&#10003; Bubbles</td>
     <td>&#10003; 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>&#10003; Bubbles</td>
     <td>&#8212;</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 &#8212; 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">&#8592; 6.8 Session history and navigation</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="editing.html">7 User Interaction &#8594;</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>&lt;link rel=alternate type=application/pdf hreflang=fr href=manual-fr&gt;</pre>

  </div><p>The <code title="rel-alternate"><a href="#link-type-alternate">alternate</a></code> link
  relationship is transitive &#8212; 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> ...
 &lt;body&gt;
  &lt;h1&gt;Example of permalinks&lt;/h1&gt;
  &lt;div id="a"&gt;
   &lt;h2&gt;First example&lt;/h2&gt;
   &lt;p&gt;&lt;a href="a.html" rel="bookmark"&gt;This&lt;/a&gt; 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.&lt;/p&gt;
  &lt;/div&gt;
  &lt;h2&gt;Second example&lt;/h2&gt;
  &lt;article id="b"&gt;
   &lt;p&gt;&lt;a href="b.html" rel="bookmark"&gt;This&lt;/a&gt; permalink applies to
   the outer ARTICLE element (which could be, e.g., a blog post).&lt;/p&gt;
   &lt;article id="c"&gt;
    &lt;p&gt;&lt;a href="c.html" rel="bookmark"&gt;This&lt;/a&gt; permalink applies to
    the inner ARTICLE element (which could be, e.g., a blog comment).&lt;/p&gt;
   &lt;/article&gt;
  &lt;/article&gt;
 &lt;/body&gt;
 ...</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> &lt;p&gt;&lt;label&gt; Topic: &lt;input name=topic&gt; &lt;a href="help/topic.html" rel="help"&gt;(Help)&lt;/a&gt;&lt;/label&gt;&lt;/p&gt;</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>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;lsForums &#8212; Inbox&lt;/title&gt;
  &lt;link rel=icon href=favicon.png sizes="16x16"&gt;
  &lt;link rel=icon href=windows.ico sizes="32x32 48x48"&gt;
  &lt;link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768"&gt;
  &lt;link rel=icon href=iphone.png sizes="59x60"&gt;
  &lt;link rel=icon href=gnome.svg sizes="any"&gt;
  &lt;link rel=stylesheet href=lsforums.css&gt;
  &lt;script src=lsforums.js&gt;&lt;/script&gt;
  &lt;meta name=application-name content="lsForums"&gt;
 &lt;/head&gt;
 &lt;body&gt;
  ...</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>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;Exampl Pictures: Kissat&lt;/title&gt;
  &lt;link rel="stylesheet" href="/style/default"&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;h1&gt;Kissat&lt;/h1&gt;
  &lt;nav&gt;
   &lt;a href="../"&gt;Return to photo index&lt;/a&gt;
  &lt;/nav&gt;
  &lt;figure&gt;
   &lt;dd&gt;&lt;img src="/pix/39627052_fd8dcd98b5.jpg"&gt;
   &lt;dt&gt;Kissat
  &lt;/figure&gt;
  &lt;p&gt;One of them has six toes!&lt;/p&gt;
  &lt;p&gt;&lt;small&gt;&lt;a rel="license" href="http://www.opensource.org/licenses/mit-license.php"&gt;MIT Licensed&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
  &lt;footer&gt;
   &lt;a href="/"&gt;Home&lt;/a&gt; | &lt;a href="../"&gt;Photo index&lt;/a&gt;
   &lt;p&gt;&lt;small&gt;&#169; copyright 2009 Exampl Pictures. All Rights Reserved.&lt;/small&gt;&lt;/p&gt;
  &lt;/footer&gt;
 &lt;/body&gt;
&lt;/html&gt;</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>&lt;nav&gt;
 &lt;p&gt;
  &lt;a href="/" rel="index up up up"&gt;Main&lt;/a&gt; &gt;
  &lt;a href="/products/" rel="up up"&gt;Products&lt;/a&gt; &gt;
  &lt;a href="/products/dishwashers/" rel="up"&gt;Dishwashers&lt;/a&gt; &gt;
  &lt;a&gt;Second hand&lt;/a&gt;
 &lt;/p&gt;
 &lt;p&gt;
  &lt;a href="/" rel="index up up"&gt;Main&lt;/a&gt; &gt;
  &lt;a href="/second-hand/" rel="up"&gt;Second hand&lt;/a&gt; &gt;
  &lt;a&gt;Dishwashers&lt;/a&gt;
 &lt;/p&gt;
&lt;/nav&gt;</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 &#8212; 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">&#8592; 4.10.5.1 States of the type attribute</a> &#8211;
   <a href="Overview.html#contents">Table of contents</a> &#8211;
   <a href="common-input-element-attributes.html">4.10.5.2 Common input element attributes &#8594;</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&iacute;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 &gt;= 0) // Windows-based path
    return path.substr(x+1);
  x = path.lastIndexOf('/');
  if (x &gt;= 0) // Unix-based path
    return path.substr(x+1);
  return path; // just the filename
}</pre>

   <p>This can be used as follows:</p>

   <pre>&lt;p&gt;&lt;input type=file name=image onchange="updateFilename(this.value)"&gt;&lt;/p&gt;
&lt;p&gt;The name of the file you picked is: &lt;span id="filename"&gt;(none)&lt;/span&gt;&lt;/p&gt;
&lt;script&gt;
 function updateFilename(path) {
   var name = extractFilename(path);
   document.getElementById('filename').textContent = name;
 }
&lt;/script&gt;</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-ele