html5/spec apis-in-html-documents.html,NONE,1.1 association-of-controls-and-forms.html,NONE,1.1 commands.html,NONE,1.1 common-dom-interfaces.html,NONE,1.1 common-input-element-attributes.html,NONE,1.1 common-microsyntaxes.html,NONE,1.1 content-models.html,NONE,1.1 converting-html-to-other-formats.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 fetching-resources.html,NONE,1.1 grouping-content.html,NONE,1.1 links.html,NONE,1.1 namespaces.html,NONE,1.1 number-state.html,NONE,1.1 origin-0.html,NONE,1.1 parsing.html,NONE,1.1 rendering.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-end.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 tokenization.html,NONE,1.1 urls.html,NONE,1.1

Update of /sources/public/html5/spec
In directory hutz:/tmp/cvs-serv29645

Added Files:
	apis-in-html-documents.html 
	association-of-controls-and-forms.html commands.html 
	common-dom-interfaces.html 
	common-input-element-attributes.html common-microsyntaxes.html 
	content-models.html converting-html-to-other-formats.html 
	dnd.html edits.html elements.html embedded-content-1.html 
	fetching-resources.html grouping-content.html links.html 
	namespaces.html number-state.html origin-0.html parsing.html 
	rendering.html scripting-1.html sections.html 
	states-of-the-type-attribute.html the-button-element.html 
	the-end.html the-iframe-element.html the-input-element.html 
	the-map-element.html timers.html tokenization.html urls.html 
Log Message:
Remove the experimental timed tracks stuff from the W3C copy, by request of the chairs.

[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><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; }
[...1164 lines suppressed...]
 &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.11 The map element &#8212; HTML5 </title><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, table tbody { 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: #DDFFDD; }
   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; }

   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; }

   body.dfnEnabled dfn { cursor: pointer; }
   .dfnPanel {
     display: inline;
     position: absolute;
     z-index: 10;
     height: auto;
     width: auto;
     padding: 0.5em 0.75em;
     font: small sans-serif, Droid Sans Fallback;
     background: #DDDDDD;
     color: black;
     border: outset 0.2em;
   }
   .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
   .dfnPanel :link, .dfnPanel :visited { color: black; }
   .dfnPanel p { font-weight: bolder; }
   .dfnPanel * + p { margin-top: 0.25em; }
   .dfnPanel li { list-style-position: inside; }

   #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; }

   .details-example img { vertical-align: top; }

   #named-character-references-table {
     font-size: 0.6em;
     column-width: 28em;
     column-gap: 1em;
     -moz-column-width: 28em;
     -moz-column-gap: 1em;
     -webkit-column-width: 28em;
     -webkit-column-gap: 1em;
   }
   #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
   #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; }

  </style><style type="text/css">
   .domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
  </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%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%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script type="text/javascript">
   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'); // doesn't support split-out specs, but, oh well.
     // 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">
  <script src="link-fixup.js"></script>
  <link href="the-canvas-element.html" title="4.8.10 The canvas element" rel="prev">
  <link href="spec.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.10 The canvas element</a> &#8211;
   <a href="spec.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.11 </span>The <code>map</code> element</a></li><li><a href="the-map-element.html#the-area-element"><span class="secno">4.8.12 </span>The <code>area</code> element</a></li><li><a href="the-map-element.html#image-maps"><span class="secno">4.8.13 </span>Image maps</a>
      <ol><li><a href="the-map-element.html#authoring"><span class="secno">4.8.13.1 </span>Authoring</a></li><li><a href="the-map-element.html#processing-model"><span class="secno">4.8.13.2 </span>Processing model</a></li></ol></li><li><a href="the-map-element.html#mathml"><span class="secno">4.8.14 </span>MathML</a></li><li><a href="the-map-element.html#svg-0"><span class="secno">4.8.15 </span>SVG</a></li><li><a href="the-map-element.html#dimension-attributes"><span class="secno">4.8.16 </span>Dimension attributes</a></li></ol></li></ol></li></ol></div>

  <h4 id="the-map-element"><span class="secno">4.8.11 </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="common-dom-interfaces.html#htmlcollection">HTMLCollection</a> <a href="#dom-map-areas" title="dom-map-areas">areas</a>;
  readonly attribute <a href="common-dom-interfaces.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="rendering.html#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="common-microsyntaxes.html#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="common-dom-interfaces.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="common-dom-interfaces.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><div class="impl">

  <p>The <dfn id="dom-map-areas" title="dom-map-areas"><code>areas</code></dfn> attribute
  must return an <code><a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a></code> rooted at the
  <code><a href="#the-map-element">map</a></code> element, whose filter matches only
  <code><a href="#the-area-element">area</a></code> elements.</p>

  <p>The <dfn id="dom-map-images" title="dom-map-images"><code>images</code></dfn>
  attribute must return an <code><a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a></code> rooted at the
  <code><a href="infrastructure.html#document">Document</a></code> node, whose filter matches only
  <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 are
  associated with this <code><a href="#the-map-element">map</a></code> element according to the
  <a href="#image-map">image map</a> processing model.</p>

  <p>The IDL attribute <dfn id="dom-map-name" title="dom-map-name"><code>name</code></dfn> must
  <a href="common-dom-interfaces.html#reflect">reflect</a> the content attribute of the same name.</p>

  </div><h4 id="the-area-element"><span class="secno">4.8.12 </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-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-rel" title="dom-area-rel">rel</a>;
  readonly attribute <a href="common-dom-interfaces.html#domtokenlist">DOMTokenList</a> <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="rendering.html#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. <span class="impl">Some of the keywords
  are non-conforming, as noted in the last column.</span></p><table><thead><tr><th>State
     </th><th>Keywords
     </th><th class="impl">Notes
   </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><td class="impl">
    </td></tr><tr><td class="impl"><dfn id="attr-area-shape-keyword-circ" title="attr-area-shape-keyword-circ"><code>circ</code></dfn>
     </td><td class="impl">Non-conforming
    </td></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><td class="impl">
    </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><td class="impl">
    </td></tr><tr><td class="impl"><dfn id="attr-area-shape-keyword-polygon" title="attr-area-shape-keyword-polygon"><code>polygon</code></dfn>
     </td><td class="impl">Non-conforming
    </td></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><td class="impl">
    </td></tr><tr><td class="impl"><dfn id="attr-area-shape-keyword-rectangle" title="attr-area-shape-keyword-rectangle"><code>rectangle</code></dfn>
     </td><td class="impl">Non-conforming
  </td></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. <span class="impl">The processing for this attribute is
  described as part of the <a href="#image-map">image map</a> processing
  model.</span></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><div class="impl">

  <p>When user agents allow users to <a href="links.html#following-hyperlinks" title="following
  hyperlinks">follow hyperlinks</a> created using the
  <code><a href="#the-area-element">area</a></code> element, as described in the next section, the
  <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code>,
  <code title="attr-hyperlink-target"><a href="links.html#attr-hyperlink-target">target</a></code>
  attributes decide how the
  link is followed. The <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 may be used to
  indicate to the user the likely nature of the target resource before
  the user follows the link.</p>

  </div><p>The <code title="attr-hyperlink-target"><a href="links.html#attr-hyperlink-target">target</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><div class="impl">

  <p>The <a href="content-models.html#activation-behavior">activation behavior</a> of <code><a href="#the-area-element">area</a></code>
  elements is to run the following steps:</p>

  <ol><li><p>If the <code title="event-DOMActivate"><a href="infrastructure.html#event-domactivate">DOMActivate</a></code>
   event in question is not <a href="infrastructure.html#concept-events-trusted" title="concept-events-trusted">trusted</a> (i.e. a <code title="dom-click"><a href="editing.html#dom-click">click()</a></code> method call was the reason for the
   event being dispatched), and the <code><a href="#the-area-element">area</a></code> element's <code title="attr-hyperlink-target"><a href="links.html#attr-hyperlink-target">target</a></code> attribute is such that
   applying <a href="browsers.html#the-rules-for-choosing-a-browsing-context-given-a-browsing-context-name">the rules for choosing a browsing context given a
   browsing context name</a>, using the value of the <code title="attr-hyperlink-target"><a href="links.html#attr-hyperlink-target">target</a></code> attribute as the
   browsing context name, would result in there not being a chosen
   browsing context, then raise an <code><a href="common-dom-interfaces.html#invalid_access_err">INVALID_ACCESS_ERR</a></code>
   exception and abort these steps.</p></li>

   <li>Otherwise, the user agent must <a href="links.html#following-hyperlinks" title="following
   hyperlinks">follow the hyperlink</a> defined by the
   <code><a href="#the-area-element">area</a></code> element, if any.</li>

  </ol><p>The IDL attributes <dfn id="dom-area-alt" title="dom-area-alt"><code>alt</code></dfn>, <dfn id="dom-area-coords" title="dom-area-coords"><code>coords</code></dfn>, <dfn id="dom-area-href" title="dom-area-href"><code>href</code></dfn>, <dfn id="dom-area-target" title="dom-area-target"><code>target</code></dfn>,
  <dfn id="dom-area-rel" title="dom-area-rel"><code>rel</code></dfn>, <dfn id="dom-area-media" title="dom-area-media"><code>media</code></dfn>, <dfn id="dom-area-hreflang" title="dom-area-hreflang"><code>hreflang</code></dfn>, and <dfn id="dom-area-type" title="dom-area-type"><code>type</code></dfn>, each must
  <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the same
  name.</p>

  <p>The IDL attribute <dfn id="dom-area-shape" title="dom-area-shape"><code>shape</code></dfn> must
  <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-area-shape"><a href="#attr-area-shape">shape</a></code>
  content attribute, <a href="common-dom-interfaces.html#limited-to-only-known-values">limited to only known values</a>.</p>

  <p>The IDL attribute <dfn id="dom-area-rellist" title="dom-area-rellist"><code>relList</code></dfn> must
  <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-hyperlink-rel"><a href="links.html#attr-hyperlink-rel">rel</a></code>
  content attribute.</p>

  <p>The <code><a href="#the-area-element">area</a></code> element also supports the complement of
  <a href="urls.html#url-decomposition-idl-attributes">URL decomposition IDL attributes</a>, <dfn id="dom-area-protocol" title="dom-area-protocol"><code>protocol</code></dfn>, <dfn id="dom-area-host" title="dom-area-host"><code>host</code></dfn>, <dfn id="dom-area-port" title="dom-area-port"><code>port</code></dfn>, <dfn id="dom-area-hostname" title="dom-area-hostname"><code>hostname</code></dfn>, <dfn id="dom-area-pathname" title="dom-area-pathname"><code>pathname</code></dfn>, <dfn id="dom-area-search" title="dom-area-search"><code>search</code></dfn>, and <dfn id="dom-area-hash" title="dom-area-hash"><code>hash</code></dfn>. These must follow the
  rules given for URL decomposition IDL attributes, with the <a href="urls.html#concept-uda-input" title="concept-uda-input">input</a> being the result of <a href="urls.html#resolve-a-url" title="resolve a url">resolving</a> the element's <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute relative to the
  element, if there is such an attribute and resolving it is
  successful, or the empty string otherwise; and the <a href="urls.html#concept-uda-setter" title="concept-uda-setter">common setter action</a> being the
  same as setting the element's <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute to the new output
  value.</p>

  </div><h4 id="image-maps"><span class="secno">4.8.13 </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
  --><div class="impl">

  <h5 id="authoring"><span class="secno">4.8.13.1 </span>Authoring</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p>

  </div><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="http://dev.w3.org/html5/spec/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><div class="impl">

  <h5 id="processing-model"><span class="secno">4.8.13.2 </span>Processing model</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p>

  <p>If 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 has a <code title="attr-hyperlink-usemap"><a href="#attr-hyperlink-usemap">usemap</a></code> attribute specified,
  user agents must process it as follows:</p>

  <ol><li><p>First, <a href="common-microsyntaxes.html#rules-for-parsing-a-hash-name-reference">rules for parsing a hash-name reference</a>
   to a <code><a href="#the-map-element">map</a></code> element must be followed. This will return
   either an element (the <var title="">map</var>) or null.</p></li>

   <li><p>If that returned null, then abort these steps. The image is
   not associated with an image map after all.</p></li>

   <li><p>Otherwise, the user agent must collect all the
   <code><a href="#the-area-element">area</a></code> elements that are descendants of the <var title="">map</var>. Let those be the <var title="">areas</var>.</p></li>

  </ol><p>Having obtained the list of <code><a href="#the-area-element">area</a></code> elements that form
  the image map (the <var title="">areas</var>), interactive user
  agents must process the list in one of two ways.</p>

  <p>If the user agent intends to show the text that the
  <code><a href="embedded-content-1.html#the-img-element">img</a></code> element represents, then it must use the following
  steps.</p>

  <p class="note">In user agents that do not support images, or that
  have images disabled, <code><a href="the-iframe-element.html#the-object-element">object</a></code> elements cannot represent
  images, and thus this section never applies (the <a href="content-models.html#fallback-content">fallback
  content</a> is shown instead). The following steps therefore only
  apply to <code><a href="embedded-content-1.html#the-img-element">img</a></code> elements.</p>

  <ol><li><p>Remove all the <code><a href="#the-area-element">area</a></code> elements in <var title="">areas</var> that have no <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute.</p></li>

   <li><p>Remove all the <code><a href="#the-area-element">area</a></code> elements in <var title="">areas</var> that have no <code title="attr-area-alt"><a href="#attr-area-alt">alt</a></code> attribute, or whose <code title="attr-area-alt"><a href="#attr-area-alt">alt</a></code> attribute's value is the empty
   string, <em>if</em> there is another <code><a href="#the-area-element">area</a></code> element in
   <var title="">areas</var> with the same value in the <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute and with a
   non-empty <code title="attr-area-alt"><a href="#attr-area-alt">alt</a></code> attribute.</p></li>

   <li><p>Each remaining <code><a href="#the-area-element">area</a></code> element in <var title="">areas</var> represents a <a href="links.html#hyperlink">hyperlink</a>. Those
   hyperlinks should all be made available to the user in a manner
   associated with the text of the <code><a href="embedded-content-1.html#the-img-element">img</a></code>.</p>

   <p>In this context, user agents may represent <code><a href="#the-area-element">area</a></code> and
   <code><a href="embedded-content-1.html#the-img-element">img</a></code> elements with no specified <code title="">alt</code> attributes, or whose <code title="">alt</code>
   attributes are the empty string or some other non-visible text, in
   a user-agent-defined fashion intended to indicate the lack of
   suitable author-provided text.</p></li>

  </ol><p>If the user agent intends to show the image and allow interaction
  with the image to select hyperlinks, then the image must be
  associated with a set of layered shapes, taken from the
  <code><a href="#the-area-element">area</a></code> elements in <var title="">areas</var>, in reverse
  tree order (so the last specified <code><a href="#the-area-element">area</a></code> element in the
  <var title="">map</var> is the bottom-most shape, and the first
  element in the <var title="">map</var>, in tree order, is the
  top-most shape).</p>

  <p>Each <code><a href="#the-area-element">area</a></code> element in <var title="">areas</var> must
  be processed as follows to obtain a shape to layer onto the
  image:</p>

  <ol><li><p>Find the state that the element's <code title="attr-area-shape"><a href="#attr-area-shape">shape</a></code> attribute represents.</p></li>

   <li><p>Use the <a href="common-microsyntaxes.html#rules-for-parsing-a-list-of-integers">rules for parsing a list of integers</a> to
   parse the element's <code title="attr-area-coords"><a href="#attr-area-coords">coords</a></code>
   attribute, if it is present, and let the result be the <var title="">coords</var> list. If the attribute is absent, let the
   <var title="">coords</var> list be the empty list.</p></li>

   <li><p>If the number of items in the <var title="">coords</var>
   list is less than the minimum number given for the
   <code><a href="#the-area-element">area</a></code> element's current state, as per the following
   table, then the shape is empty; abort these steps.</p>
    <table><thead><tr><th>State
       </th><th>Minimum number of items
     </th></tr></thead><tbody><tr><td><a href="#attr-area-shape-circle" title="attr-area-shape-circle">Circle state</a>
       </td><td>3
      </td></tr><tr><td><a href="#attr-area-shape-default" title="attr-area-shape-default">Default state</a>
       </td><td>0
      </td></tr><tr><td><a href="#attr-area-shape-poly" title="attr-area-shape-poly">Polygon state</a>
       </td><td>6
      </td></tr><tr><td><a href="#attr-area-shape-rect" title="attr-area-shape-rect">Rectangle state</a>
       </td><td>4
    </td></tr></tbody></table></li>

   <li><p>Check for excess items in the <var title="">coords</var>
   list as per the entry in the following list corresponding to the
   <code title="attr-area-shape"><a href="#attr-area-shape">shape</a></code> attribute's state:</p>
    <dl class="switch"><dt><a href="#attr-area-shape-circle" title="attr-area-shape-circle">Circle state</a></dt>
     <dd>Drop any items in the list beyond the third.</dd>
     <dt><a href="#attr-area-shape-default" title="attr-area-shape-default">Default state</a></dt>
     <dd>Drop all items in the list.</dd>
     <dt><a href="#attr-area-shape-poly" title="attr-area-shape-poly">Polygon state</a></dt>
     <dd>Drop the last item if there's an odd number of items.</dd>
     <dt><a href="#attr-area-shape-rect" title="attr-area-shape-rect">Rectangle state</a></dt>
     <dd>Drop any items in the list beyond the fourth.</dd>
    </dl></li>

   <li><p>If the <code title="attr-area-shape"><a href="#attr-area-shape">shape</a></code> attribute
   represents the <a href="#attr-area-shape-rect" title="attr-area-shape-rect">rectangle
   state</a>, and the first number in the list is numerically less
   than the third number in the list, then swap those two numbers
   around.</p></li>

   <li><p>If the <code title="attr-area-shape"><a href="#attr-area-shape">shape</a></code> attribute
   represents the <a href="#attr-area-shape-rect" title="attr-area-shape-rect">rectangle
   state</a>, and the second number in the list is numerically less
   than the fourth number in the list, then swap those two numbers
   around.</p></li>

   <li><p>If the <code title="attr-area-shape"><a href="#attr-area-shape">shape</a></code> attribute
   represents the <a href="#attr-area-shape-circle" title="attr-area-shape-circle">circle
   state</a>, and the third number in the list is less than or
   equal to zero, then the shape is empty; abort these steps.</p></li>

   <li><p>Now, the shape represented by the element is the one
   described for the entry in the list below corresponding to the
   state of the <code title="attr-area-shape"><a href="#attr-area-shape">shape</a></code>
   attribute:</p>

    <dl class="switch"><dt><a href="#attr-area-shape-circle" title="attr-area-shape-circle">Circle state</a></dt>
     <dd>
      <p>Let <var title="">x</var> be the first number in <var title="">coords</var>, <var title="">y</var> be the second
      number, and <var title="">r</var> be the third number.</p>
      <p>The shape is a circle whose center is <var title="">x</var>
      CSS pixels from the left edge of the image and <var title="">x</var> CSS pixels from the top edge of the image, and
      whose radius is <var title="">r</var> pixels.</p>
     </dd>

     <dt><a href="#attr-area-shape-default" title="attr-area-shape-default">Default state</a></dt>
     <dd>
      <p>The shape is a rectangle that exactly covers the entire
      image.</p>
     </dd>

     <dt><a href="#attr-area-shape-poly" title="attr-area-shape-poly">Polygon state</a></dt>
     <dd>

      <p>Let <var title="">x<sub title=""><var title="">i</var></sub></var> be the <span title="">(2<var title="">i</var>)</span>th entry in <var title="">coords</var>,
      and <var title="">y<sub title=""><var title="">i</var></sub></var> be the <span title="">(2<var title="">i</var>+1)</span>th entry in <var title="">coords</var>
      (the first entry in <var title="">coords</var> being the one
      with index 0).</p>

      <p>Let <var title="">the coordinates</var> be (<var title="">x<sub title=""><var title="">i</var></sub></var>, <var title="">y<sub title=""><var title="">i</var></sub></var>),
      interpreted in CSS pixels measured from the top left of the
      image, for all integer values of <var title="">i</var> from 0 to
      <span title="">(<var title="">N</var>/2)-1</span>, where <var title="">N</var> is the number of items in <var title="">coords</var>.</p>

      <p>The shape is a polygon whose vertices are given by <var title="">the coordinates</var>, and whose interior is
      established using the even-odd rule. <a href="references.html#refsGRAPHICS">[GRAPHICS]</a></p>

      <!--
        browsers implement the even-odd rule / even winding rule:
        http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A%3Cimg%20usemap%3D%22%23x%22%20src%3D%22/resources/images/sample%22%3E%0A%3Cmap%20name%3D%22x%22%3E%0A%20%20%3Carea%20shape%3Dpolygon%20coords%3D%220%2C0%200%2C100%20100%2C100%20100%2C2%201%2C2%202%2C1%202%2C99%2099%2C99%2099%2C0%22%20href%3Da%3E%0A%3C/map%3E%0A
       -->

     </dd>

     <dt><a href="#attr-area-shape-rect" title="attr-area-shape-rect">Rectangle state</a></dt>

     <dd>

      <p>Let <var title="">x<sub title="">1</sub></var> be the first
      number in <var title="">coords</var>, <var title="">y<sub title="">1</sub></var> be the second number, <var title="">x<sub title="">2</sub></var> be the third number, and <var title="">y<sub title="">2</sub></var> be the fourth number.</p>

      <p>The shape is a rectangle whose top-left corner is given by
      the coordinate (<var title="">x<sub title="">1</sub></var>, <var title="">y<sub title="">1</sub></var>) and whose bottom right
      corner is given by the coordinate (<var title="">x<sub title="">2</sub></var>, <var title="">y<sub title="">2</sub></var>), those coordinates being interpreted as
      CSS pixels from the top left corner of the image.</p>

     </dd>

    </dl><p>For historical reasons, the coordinates must be interpreted
    relative to the <em>displayed</em> image, even if it stretched
    using CSS or the image element's <code title="">width</code> and
    <code title="">height</code> attributes.</p>

   </li>

  </ol><p>Mouse clicks on an image associated with a set of layered shapes
  per the above algorithm must be dispatched to the top-most shape
  covering the point that the pointing device indicated (if any), and
  then, must be dispatched again (with a new <code><a href="infrastructure.html#event">Event</a></code>
  object) to the image element itself. User agents may also allow
  individual <code><a href="#the-area-element">area</a></code> elements representing <a href="links.html#hyperlink" title="hyperlink">hyperlinks</a> to be selected and activated
  (e.g. using a keyboard); events from this are not also propagated to
  the image.</p>

  <p class="note">Because a <code><a href="#the-map-element">map</a></code> element (and its
  <code><a href="#the-area-element">area</a></code> elements) can be associated with multiple
  <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, it is possible
  for an <code><a href="#the-area-element">area</a></code> element to correspond to multiple focusable
  areas of the document.</p>

  <p>Image maps are <a href="infrastructure.html#live">live</a>; if the DOM is mutated, then the
  user agent must act as if it had rerun the algorithms for image
  maps.</p>

  </div><h4 id="mathml"><span class="secno">4.8.14 </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="namespaces.html#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><div class="impl">

  <!-- apparently we get to define error handling, so: -->

  <p>User agents must handle text other than <a href="content-models.html#inter-element-whitespace">inter-element
  whitespace</a> found in MathML elements whose content models do
  not allow straight text by pretending for the purposes of MathML
  content models, layout, and rendering that that text is actually
  wrapped in an <code title="">mtext</code> element in the
  <a href="namespaces.html#mathml-namespace">MathML namespace</a>. (Such text is not, however,
  conforming.)</p>

  <p>User agents must act as if any MathML element whose contents does
  not match the element's content model was replaced, for the purposes
  of MathML layout and rendering, by an <code title="">merror</code>
  element in the <a href="namespaces.html#mathml-namespace">MathML namespace</a> containing some
  appropriate error message.</p>

  <p>To enable authors to use MathML tools that only accept MathML in
  its XML form, interactive HTML user agents are encouraged to provide
  a way to export any MathML fragment as an XML namespace-well-formed
  XML fragment.</p>

  </div><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.15 </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="namespaces.html#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><div class="impl">

  <p>To enable authors to use SVG tools that only accept SVG in its
  XML form, interactive HTML user agents are encouraged to provide a
  way to export any SVG fragment as an XML namespace-well-formed XML
  fragment.</p>

  </div><p>When the SVG <code>foreignObject</code> element contains elements
  from the <a href="namespaces.html#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="namespaces.html#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.16 </span><dfn>Dimension attributes</dfn></h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p><span class="impl"><strong>Author requirements</strong>:</span>
  The <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><div class="impl">

  <p><strong>User agent requirements</strong>: User agents are
  expected to use these attributes <a href="rendering.html#dimRendering">as hints
  for the rendering</a>.</p>

  <p>The <dfn id="dom-dim-width" title="dom-dim-width"><code>width</code></dfn> and <dfn id="dom-dim-height" title="dom-dim-height"><code>height</code></dfn> IDL attributes on
  the <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>,
  and <code><a href="video.html#video">video</a></code> elements must <a href="common-dom-interfaces.html#reflect">reflect</a> the
  respective content attributes of the same name.</p>

  </div></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.2 The iframe element &#8212; HTML5 </title><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; }
[...1985 lines suppressed...]
   <pre>&lt;!DOCTYPE HTML&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
  &lt;title&gt;O3D test page&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;p&gt;
   &lt;object type="application/vnd.o3d.auto"&gt;
    <strong>&lt;param name="o3d_features" value="FloatingPointTextures"&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;script src="o3dtest.js"&gt;&lt;/script&gt;
  &lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;</pre>

  </div></body></html>
--- NEW FILE: converting-html-to-other-formats.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.15 Converting HTML to other formats &#8212; HTML5 </title><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, table tbody { 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: #DDFFDD; }
   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; }

   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; }

   body.dfnEnabled dfn { cursor: pointer; }
   .dfnPanel {
     display: inline;
     position: absolute;
     z-index: 10;
     height: auto;
     width: auto;
     padding: 0.5em 0.75em;
     font: small sans-serif, Droid Sans Fallback;
     background: #DDDDDD;
     color: black;
     border: outset 0.2em;
   }
   .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
   .dfnPanel :link, .dfnPanel :visited { color: black; }
   .dfnPanel p { font-weight: bolder; }
   .dfnPanel * + p { margin-top: 0.25em; }
   .dfnPanel li { list-style-position: inside; }

   #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; }

   .details-example img { vertical-align: top; }

   #named-character-references-table {
     font-size: 0.6em;
     column-width: 28em;
     column-gap: 1em;
     -moz-column-width: 28em;
     -moz-column-gap: 1em;
     -webkit-column-width: 28em;
     -webkit-column-gap: 1em;
   }
   #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
   #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; }

  </style><style type="text/css">
   .domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
  </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%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%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script type="text/javascript">
   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'); // doesn't support split-out specs, but, oh well.
     // 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">
  <script src="link-fixup.js"></script>
  <link href="links.html" title="4.12 Links" rel="prev">
  <link href="spec.html#contents" title="Table of contents" rel="index">
  <link href="browsers.html" title="5 Loading Web pages" 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="links.html">&#8592; 4.12 Links</a> &#8211;
   <a href="spec.html#contents">Table of contents</a> &#8211;
   <a href="browsers.html">5 Loading Web pages &#8594;</a>
  <ol class="toc"><li><ol><li><a href="converting-html-to-other-formats.html#converting-html-to-other-formats"><span class="secno">4.15 </span>Converting HTML to other formats</a>
    <ol><li><a href="converting-html-to-other-formats.html#atom"><span class="secno">4.15.1 </span>Atom</a></li></ol></li></ol></li></ol></div>

  <div class="impl">

  <h3 id="converting-html-to-other-formats"><span class="secno">4.15 </span>Converting HTML to other formats</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p>


  <h4 id="atom"><span class="secno">4.15.1 </span>Atom</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/86">ISSUE-86</a> (atom-id-stability) blocks progress to Last Call</span></p>

  <p>Given a <code><a href="infrastructure.html#document">Document</a></code> <var title="">source</var>, a user
  agent may run the following algorithm to <dfn id="extracting-atom" title="extracting
  Atom">extract an Atom feed</dfn>. This is not the only algorithm
  that can be used for this purpose; for instance, a user agent might
  instead use the hAtom algorithm. <a href="references.html#refsHATOM">[HATOM]</a></p>

  <ol><li><p>If the <code><a href="infrastructure.html#document">Document</a></code> <var title="">source</var> does
   not contain any <code><a href="sections.html#the-article-element">article</a></code> elements, then return nothing
   and abort these steps. This algorithm can only be used with
   documents that contain distinct articles.</p>

   </li><li><p>Let <var title="">R</var> be an empty <a href="dom.html#xml-documents" title="XML
   documents">XML</a> <code><a href="infrastructure.html#document">Document</a></code> object whose <a href="dom.html#the-document-s-address" title="the document's address">address</a> is user-agent
   defined.</p></li>

   <li><p>Append a <code title="">feed</code> element in the
   <a href="#atom-namespace">Atom namespace</a> to <var title="">R</var>.</p></li>

   <li>

    <p>For each <code><a href="semantics.html#meta">meta</a></code> element with a <code title="attr-meta-name"><a href="semantics.html#attr-meta-name">name</a></code> attribute and a <code title="attr-meta-content"><a href="semantics.html#attr-meta-content">content</a></code> attribute and whose <code title="attr-meta-name"><a href="semantics.html#attr-meta-name">name</a></code> attribute's value is <code title="meta-author"><a href="semantics.html#meta-author">author</a></code>, run the following substeps:</p>

    <ol><li><p>Append an <code title="">author</code> element in the
     <a href="#atom-namespace">Atom namespace</a> to the root element of <var title="">R</var>.</p></li>

     <li><p>Append a <code title="">name</code> element in the
     <a href="#atom-namespace">Atom namespace</a> to the element created in the
     previous step.</p>

     </li><li><p>Append a text node whose data is the value of the
     <code><a href="semantics.html#meta">meta</a></code> element's <code title="attr-meta-content"><a href="semantics.html#attr-meta-content">content</a></code> attribute to the element
     created in the previous step.</p></li>

    </ol><!-- could use vCards instead, and get <atom:email> and <atom:uri>
    elements out of this instead of just <atom:name> --></li>

   <li>

    <p>If there is a <code><a href="semantics.html#the-link-element">link</a></code> element whose <code title="attr-link-rel"><a href="semantics.html#attr-link-rel">rel</a></code> attribute's value includes the
    keyword <code title="rel-icon"><a href="links.html#rel-icon">icon</a></code>, and that element also
    has an <code title="attr-link-href"><a href="semantics.html#attr-link-href">href</a></code> attribute whose
    value successfully <a href="urls.html#resolve-a-url" title="resolve a url">resolves</a>
    relative to the <code><a href="semantics.html#the-link-element">link</a></code> element, then append an <code title="">icon</code> element in the <a href="#atom-namespace">Atom namespace</a> to
    the root element of <var title="">R</var> whose contents is a text
    node with its data set to the <a href="urls.html#absolute-url">absolute URL</a> resulting
    from <a href="urls.html#resolve-a-url" title="resolve a url">resolving</a> the value of the
    <code title="attr-link-href"><a href="semantics.html#attr-link-href">href</a></code> attribute.</p>

    <!-- could check ratio, could check type... -->

   </li>

   <li>

    <p>Append an <code title="">id</code> element in the <a href="#atom-namespace">Atom
    namespace</a> to the root element of <var title="">R</var>
    whose contents is a text node with its data set to <a href="dom.html#the-document-s-current-address">the
    document's current address</a>.</p>

   </li>

   <li>

    <p>Optionally: Let <var title="">x</var> be a <code title="">link</code> element in the <a href="#atom-namespace">Atom
    namespace</a>. Add a <code title="">rel</code> attribute whose
    value is the string "<code title="">self</code>" to <var title="">x</var>. Append a text node with its data set to the
    (user-agent-defined) <a href="dom.html#the-document-s-address" title="the document's
    address">address</a> of <var title="">R</var> to <var title="">x</var>. Append <var title="">x</var> to the root element
    of <var title="">R</var>.</p>

    <p class="note">This step would be skipped when the document <var title="">R</var> has no convenient <a href="dom.html#the-document-s-address" title="the document's
    address">address</a>. The presence of the <code title="">rel="self"</code> link is a "should"-level requirement in
    the Atom specification.</p>

   </li>

   <li>

    <p>Let <var title="">x</var> be a <code title="">link</code>
    element in the <a href="#atom-namespace">Atom namespace</a>. Add a <code title="">rel</code> attribute whose value is the string "<code title="">alternate</code>" to <var title="">x</var>. If the
    document being converted is an <a href="dom.html#html-documents" title="HTML documents">HTML
    document</a>, add a <code title="">type</code> attribute whose
    value is the string "<code><a href="iana.html#text-html">text/html</a></code>" to <var title="">x</var>. Otherwise, the document being converted is an
    <a href="dom.html#xml-documents" title="XML documents">XML document</a>; add a <code title="">type</code> attribute whose value is the string
    "<code><a href="iana.html#application-xhtml-xml">application/xhtml+xml</a></code>" to <var title="">x</var>. Append a text node with its data set to
    <a href="dom.html#the-document-s-current-address">the document's current address</a> to <var title="">x</var>. Append <var title="">x</var> to the root element
    of <var title="">R</var>.</p>

   </li>

   <li><p>Let <var title="">subheading text</var> be the empty
   string.</p></li>

   <li><p>Let <var title="">heading</var> be the first element of
   <a href="content-models.html#heading-content">heading content</a> whose nearest ancestor of
   <a href="content-models.html#sectioning-content">sectioning content</a> is <a href="dom.html#the-body-element">the body
   element</a>, if any, or null if there is none.</p></li>

   <li>

    <p>Take the appropriate action from the following list, as
    determined by the type of the <var title="">heading</var>
    element:</p>

    <dl><dt>If <var title="">heading</var> is null</dt>

     <dd>

      <p>Let <var title="">heading text</var> be the
      <code><a href="infrastructure.html#textcontent">textContent</a></code> of <a href="dom.html#the-title-element">the <code>title</code>
      element</a>, if there is one, or the empty string
      otherwise.</p>

     </dd>

     <dt>If <var title="">heading</var> is a <code><a href="sections.html#the-hgroup-element">hgroup</a></code> element</dt>

     <dd>

      <p>If <var title="">heading</var> contains no child
      <code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>&#8211;<code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code> elements, let <var title="">heading text</var> be the empty string.</p>

      <p>Otherwise, let <var title="">headings list</var> be a list of
      all the <code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>&#8211;<code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code> element children
      of <var title="">heading</var>, sorted first by descending
      <a href="sections.html#rank">rank</a> and then in <a href="infrastructure.html#tree-order">tree order</a> (so
      <code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>s first, then <code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code>s, etc, with each
      group in the order they appear in the document). Then, let <var title="">heading text</var> be the <code><a href="infrastructure.html#textcontent">textContent</a></code> of
      the first entry in <var title="">headings list</var>, and if
      there are multiple entries, let <var title="">subheading
      text</var> be the <code><a href="infrastructure.html#textcontent">textContent</a></code> of the second entry
      in <var title="">headings list</var>.</p>

     </dd>

     <dt>If <var title="">heading</var> is an <code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>&#8211;<code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code> element</dt>

     <dd>

      <p>Let <var title="">heading text</var> be the
      <code><a href="infrastructure.html#textcontent">textContent</a></code> of <var title="">heading</var>.</p>

     </dd>

    </dl></li>

   <li>

    <p>Append a <code title="">title</code> element in the <a href="#atom-namespace">Atom
    namespace</a> to the root element of <var title="">R</var>
    whose contents is a text node with its data set to <var title="">heading text</var>.</p>

   </li>

   <li>

    <p>If <var title="">subheading text</var> is not the empty string,
    append a <code title="">subtitle</code> element in the <a href="#atom-namespace">Atom
    namespace</a> to the root element of <var title="">R</var>
    whose contents is a text node with its data set to <var title="">subheading text</var>.</p>

   </li>

   <li><p>Let <var title="">global update date</var> have no
   value.</p></li>

   <li>

    <p>For each <code><a href="sections.html#the-article-element">article</a></code> element <var title="">article</var> that does not have an ancestor
    <code><a href="sections.html#the-article-element">article</a></code> element, run the following steps:</p>

    <ol><li><p>Let <var title="">E</var> be an <code title="">entry</code> element in the <a href="#atom-namespace">Atom namespace</a>,
     and append <var title="">E</var> to the root element of <var title="">R</var>.</p></li>

     <li><p>Let <var title="">heading</var> be the first element of
     <a href="content-models.html#heading-content">heading content</a> whose nearest ancestor of
     <a href="content-models.html#sectioning-content">sectioning content</a> is <var title="">article</var>,
     if any, or null if there is none.</p></li>

     <li>

      <p>Take the appropriate action from the following list, as
      determined by the type of the <var title="">heading</var>
      element:</p>

      <dl><dt>If <var title="">heading</var> is null</dt>

       <dd>

        <p>Let <var title="">heading text</var> be the empty
        string.</p>

       </dd>

       <dt>If <var title="">heading</var> is a <code><a href="sections.html#the-hgroup-element">hgroup</a></code> element</dt>

       <dd>

        <p>If <var title="">heading</var> contains no child
        <code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>&#8211;<code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code> elements, let <var title="">heading text</var> be the empty string.</p>

        <p>Otherwise, let <var title="">headings list</var> be a list
        of all the <code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>&#8211;<code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code> element
        children of <var title="">heading</var>, sorted first by
        descending <a href="sections.html#rank">rank</a> and then in <a href="infrastructure.html#tree-order">tree
        order</a> (so <code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>s first, then
        <code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h2</a></code>s, etc, with each group in the order they
        appear in the document). Then, let <var title="">heading
        text</var> be the <code><a href="infrastructure.html#textcontent">textContent</a></code> of the first entry
        in <var title="">headings list</var>.</p>

       </dd>

       <dt>If <var title="">heading</var> is an <code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>&#8211;<code><a href="sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code> element</dt>

       <dd>

        <p>Let <var title="">heading text</var> be the
        <code><a href="infrastructure.html#textcontent">textContent</a></code> of <var title="">heading</var>.</p>

       </dd>

      </dl></li>

     <li>

      <p>Append a <code title="">title</code> element in the
      <a href="#atom-namespace">Atom namespace</a> to <var title="">E</var> whose
      contents is a text node with its data set to <var title="">heading text</var>.</p>

     </li>

     <!-- <atom:author> is required either at the feed level (above)
     or the entry level (here) but we don't provide it -->

     <li>

      <p>Clone <var title="">article</var> and its descendants into an
      environment that has <a href="webappapis.html#concept-bc-noscript" title="concept-bc-noscript">scripting
      disabled</a>, has no <a href="infrastructure.html#plugin" title="plugin">plugins</a>, and
      fails any attempt to <a href="fetching-resources.html#fetch" title="fetch">fetch</a> any
      resources. Let <var title="">cloned article</var> be the
      resulting clone <code><a href="sections.html#the-article-element">article</a></code> element.</p>

     </li>

     <li>

      <p>Remove from the subtree rooted at <var title="">cloned
      article</var> any <code><a href="sections.html#the-article-element">article</a></code> elements other than the
      <var title="">cloned article</var> itself, any
      <code><a href="sections.html#the-header-element">header</a></code>, <code><a href="sections.html#the-footer-element">footer</a></code>, or <code><a href="sections.html#the-nav-element">nav</a></code>
      elements whose nearest ancestor of <a href="content-models.html#sectioning-content">sectioning
      content</a> is the <var title="">cloned article</var>, and
      the first element of <a href="content-models.html#heading-content">heading content</a> whose nearest
      ancestor of <a href="content-models.html#sectioning-content">sectioning content</a> is the <var title="">cloned article</var>, if any.</p>

     </li>

     <li>

      <p>If <var title="">cloned article</var> contains any
      <code><a href="edits.html#the-ins-element">ins</a></code> or <code><a href="edits.html#the-del-element">del</a></code> elements with <code title="attr-mod-datetime"><a href="edits.html#attr-mod-datetime">datetime</a></code> attributes whose
      values <a href="common-microsyntaxes.html#parse-a-global-date-and-time-string" title="parse a global date and time string">parse
      as global date and time strings</a> without errors, then let
      <var title="">update date</var> be the value of the <code title="attr-mod-datetime"><a href="edits.html#attr-mod-datetime">datetime</a></code> attribute that parses
      to the newest <a href="common-microsyntaxes.html#concept-datetime" title="concept-datetime">global date and
      time</a>.</p>

      <p>Otherwise, let <var title="">update date</var> have no
      value.</p>

      <p class="note">This value is used below; it is calculated here
      because in certain cases the next step mutates the <var title="">cloned article</var>.</p>

     </li>

     <li>

      <p>If the document being converted is an <a href="dom.html#html-documents" title="HTML
      documents">HTML document</a>, then: Let <var title="">x</var>
      be a <code title="">content</code> element in the <a href="#atom-namespace">Atom
      namespace</a>. Add a <code title="">type</code> attribute
      whose value is the string "<code title="">html</code>" to <var title="">x</var>. Append a text node with its data set to the
      result of running the <a href="the-end.html#html-fragment-serialization-algorithm">HTML fragment serialization
      algorithm</a> on <var title="">cloned article</var> to <var title="">x</var>. Append <var title="">x</var> to <var title="">E</var>.</p>

      <p>Otherwise, the document being converted is an <a href="dom.html#xml-documents" title="XML documents">XML document</a>: Let <var title="">x</var> be a <code title="">content</code> element in
      the <a href="#atom-namespace">Atom namespace</a>. Add a <code title="">type</code> attribute whose value is the string "<code title="">xml</code>" to <var title="">x</var>. Append a
      <code><a href="grouping-content.html#the-div-element">div</a></code> element to <var title="">x</var>. Move all the
      child nodes of the <var title="">cloned article</var> node to
      that <code><a href="grouping-content.html#the-div-element">div</a></code> element, preserving their relative
      order. Append <var title="">x</var> to <var title="">E</var>.</p>

     </li>

     <li>

      <p>Establish the value of <var title="">id</var> and <var title="">has-alternate</var> from the first of the following to
      apply:</p>

      <dl><dt>If the <var title="">article</var> node has a descendant
       <code><a href="text-level-semantics.html#the-a-element">a</a></code> or <code><a href="the-map-element.html#the-area-element">area</a></code> element with an <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute that
       successfully <a href="urls.html#resolve-a-url" title="resolve a url">resolves</a>
       relative to that descendant and a <code title="attr-hyperlink-rel"><a href="links.html#attr-hyperlink-rel">rel</a></code> attribute whose value
       includes the <code title="rel-bookmark"><a href="links.html#link-type-bookmark">bookmark</a></code>
       keyword</dt>

       <dd>Let <var title="">id</var> be the <a href="urls.html#absolute-url">absolute URL</a>
       resulting from <a href="urls.html#resolve-a-url" title="resolve a url">resolving</a> the
       value of the <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code>
       attribute of the first such <code><a href="text-level-semantics.html#the-a-element">a</a></code> or <code><a href="the-map-element.html#the-area-element">area</a></code>
       element, relative to the element. Let <var title="">has-alternate</var> be true.</dd>

       <dt>If the <var title="">article</var> node has an <code title="attr-id"><a href="elements.html#the-id-attribute">id</a></code> attribute</dt>

       <dd>Let <var title="">id</var> be <a href="dom.html#the-document-s-current-address">the document's current
       address</a>, with the fragment identifier (if any) removed,
       and with a new fragment identifier specified, consisting of the
       value of the <var title="">article</var> element's <code title="attr-id"><a href="elements.html#the-id-attribute">id</a></code> attribute. Let <var title="">has-alternate</var> be false.</dd>

       <dt>Otherwise</dt>

       <dd>Let <var title="">id</var> be a user-agent-defined
       undereferenceable yet globally unique <a href="urls.html#valid-url" title="valid
       URL">valid</a> <a href="urls.html#absolute-url">absolute URL</a>. The same
       <a href="urls.html#absolute-url">absolute URL</a> should be generated for each run of
       this algorithm when given the same input. Let <var title="">has-alternate</var> be false.</dd>

      </dl></li>

     <li>

      <p>Append an <code title="">id</code> element in the <a href="#atom-namespace">Atom
      namespace</a> to <var title="">E</var> whose contents is a
      text node with its data set to <var title="">id</var>.</p>

     </li>

     <li>

      <p>If <var title="">has-alternate</var> is true: Let <var title="">x</var> be a <code title="">link</code> element in the
      <a href="#atom-namespace">Atom namespace</a>. Add a <code title="">rel</code>
      attribute whose value is the string "<code title="">alternate</code>" to <var title="">x</var>. Append a
      text node with its data set to <var title="">id</var> to <var title="">x</var>. Append <var title="">x</var> to <var title="">E</var>.</p>

     </li>

     <li>

      <p>If <var title="">article</var> has a <code><a href="text-level-semantics.html#the-time-element">time</a></code>
      element descendant that has a <code title="attr-time-pubdate"><a href="text-level-semantics.html#attr-time-pubdate">pubdate</a></code> attribute and whose
      nearest ancestor <code><a href="sections.html#the-article-element">article</a></code> element is <var title="">article</var>, and the first such element's <a href="text-level-semantics.html#concept-time-date" title="concept-time-date">date</a> is not unknown, then run
      the following substeps, with <var title="">e</var> being the
      first such element:</p>

      <ol><li><p>Let <var title="">datetime</var> be a <a href="common-microsyntaxes.html#concept-datetime" title="concept-datetime">global date and time</a> whose date
       component is the <a href="text-level-semantics.html#concept-time-date" title="concept-time-date">date</a> of
       <var title="">e</var>.</p></li>

       <li><p>If <var title="">e</var>'s <a href="text-level-semantics.html#concept-time-time" title="concept-time-time">time</a> and <a href="text-level-semantics.html#concept-time-timezone" title="concept-time-timezone">time-zone offset</a> are not
       unknown, then let <var title="">datetime</var>'s time and
       time-zone offset components be the <a href="text-level-semantics.html#concept-time-time" title="concept-time-time">time</a> and <a href="text-level-semantics.html#concept-time-timezone" title="concept-time-timezone">time-zone offset</a> of <var title="">e</var>. Otherwise, let them be midnight and no offset
       respectively ("<code title="">00:00Z</code>").</p></li>

       <li><p>Let <var title="">publication date</var> be the
       <a href="common-microsyntaxes.html#best-representation-of-the-global-date-and-time-string">best representation of the global date and time
       string</a> <var title="">datetime</var>.</p></li>

      </ol><p>Otherwise, let <var title="">publication date</var> have no
      value.</p>

     </li>

     <li>

      <p>If <var title="">update date</var> has no value but <var title="">publication date</var> does, then let <var title="">update date</var> have the value of <var title="">publication date</var>.</p>

      <p>Otherwise, if <var title="">publication date</var> has no
      value but <var title="">update date</var> does, then let <var title="">publication date</var> have the value of <var title="">update date</var>.</p>

     </li>

     <li>

      <p>If <var title="">update date</var> has a value, and <var title="">global update date</var> has no value or is less recent
      than <var title="">update date</var>, then let <var title="">global update date</var> have the value of <var title="">update date</var>.</p>

     </li>

     <li>

      <p>If <var title="">publication date</var> and <var title="">update date</var> both still have no value, then let
      them both value a value that is a <a href="common-microsyntaxes.html#valid-global-date-and-time-string">valid global date and
      time string</a> representing the <a href="common-microsyntaxes.html#concept-datetime" title="concept-datetime">global date and time</a> of the
      moment that this algorithm was invoked.</p>

     </li>

     <li>

      <p>Append an <code title="">published</code> element in the
      <a href="#atom-namespace">Atom namespace</a> to <var title="">E</var> whose
      contents is a text node with its data set to <var title="">publication date</var>.</p>

     </li>

     <li>

      <p>Append an <code title="">updated</code> element in the
      <a href="#atom-namespace">Atom namespace</a> to <var title="">E</var> whose
      contents is a text node with its data set to <var title="">update date</var>.</p>

     </li>

    </ol></li>

   <li>

    <p>If <var title="">global update date</var> has no value, then
    let it have a value that is a <a href="common-microsyntaxes.html#valid-global-date-and-time-string">valid global date and time
    string</a> representing the <a href="common-microsyntaxes.html#concept-datetime" title="concept-datetime">global date and time</a> of the date
    and time of the <code><a href="infrastructure.html#document">Document</a></code>'s source file's last
    modification, if it is known, or else of the moment that this
    algorithm was invoked.</p>

   </li>

   <li>

    <p>Insert an <code title="">updated</code> element in the
    <a href="#atom-namespace">Atom namespace</a> into the root element of <var title="">R</var> before the first <code title="">entry</code> in
    the <a href="#atom-namespace">Atom namespace</a> whose contents is a text node with
    its data set to <var title="">global update date</var>.</p>

   </li>

   <li><p>Return the Atom document <var title="">R</var>.</p></li>

  </ol><p class="note">The above algorithm does not guarantee that the
  output will be a conforming Atom feed. In particular, if
  insufficient information is provided in the document (e.g. if the
  document does not have any <code title="">&lt;meta name="author"
  content="..."&gt;</code> elements), then the output will not be
  conforming.</p>

  <p>The <dfn id="atom-namespace">Atom namespace</dfn> is: <code>http://www.w3.org/2005/Atom</code></p>



  </div></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.18 Association of controls and forms &#8212; HTML5 </title><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; }
[...1816 lines suppressed...]

  </div><div class="impl">

  <h4 id="event-dispatch"><span class="secno">4.10.23 </span>Event dispatch</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p>

  <p>When the user agent is to <dfn id="broadcast-forminput-events">broadcast <code title="event-forminput">forminput</code> events</dfn> or
  <dfn id="broadcast-formchange-events">broadcast <code title="event-formchange">formchange</code>
  events</dfn> from a <code><a href="forms.html#the-form-element">form</a></code> element <var title="">form</var>, it must run the following steps:</p>

  <ol><li><p>Let <var title="">controls</var> be a list of all the <a href="forms.html#category-reset" title="category-reset">resettable elements</a> whose <a href="#form-owner">form
   owner</a> is <var title="">form</var>.</p></li>

   <li>If the user agent was to <a href="#broadcast-forminput-events">broadcast <code title="event-forminput">forminput</code> events</a>, let <var title="">event name</var> be <code title="event-forminput">forminput</code>. Otherwise the user agent
   was to <a href="#broadcast-formchange-events">broadcast <code title="event-formchange">formchange</code> events</a>; let <var title="">event name</var> be <code title="event-formchange">formchange</code>.</li>

   <li><p>For each element in <var title="">controls</var>, in
   <a href="infrastructure.html#tree-order">tree order</a>, <a href="webappapis.html#fire-a-simple-event">fire a simple event</a> named
   <var title="">event name</var> at the element.</p></li>

  </ol></div></body></html>
--- NEW FILE: the-end.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>8.2.6 The end &#8212; HTML5 </title><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; }
[...1066 lines suppressed...]

   <li>

    <p>Start the parser and let it run until it has consumed all the
    characters just inserted into the input stream.</p>

   </li>

   <li>

    <p>If there is a <var title="">context</var> element, return the
    child nodes of <var title="">root</var>, in <a href="infrastructure.html#tree-order">tree
    order</a>.</p>

    <p>Otherwise, return the children of the <code><a href="infrastructure.html#document">Document</a></code>
    object, in <a href="infrastructure.html#tree-order">tree order</a>.</p>

   </li>

  </ol></div></body></html>
--- NEW FILE: common-dom-interfaces.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.7 Common DOM interfaces &#8212; HTML5 </title><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; }
[...1342 lines suppressed...]
   <li value="82"><dfn id="serialize_err"><code>SERIALIZE_ERR</code></dfn></li> <!-- actually defined in dom3ls -->
  </ol><div class="impl">

  <h4 id="garbage-collection"><span class="secno">2.7.9 </span>Garbage collection</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p>

  <p>There is an <dfn id="implied-strong-reference">implied strong reference</dfn> from any IDL
  attribute that returns a pre-existing object to that object.</p>

  <div class="example">

   <p>For example, the <code>document.location</code> attribute means
   that there is a strong reference from a <code><a href="infrastructure.html#document">Document</a></code>
   object to its <code><a href="history.html#location">Location</a></code> object. Similarly, there is
   always a strong reference from a <code><a href="infrastructure.html#document">Document</a></code> to any
   descendant nodes, and from any node to its owner
   <code><a href="infrastructure.html#document">Document</a></code>.</p>

  </div>

  </div></body></html>
--- NEW FILE: parsing.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>8.2 Parsing HTML documents &#8212; HTML5 </title><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; }
[...1578 lines suppressed...]
  whose end tag has not yet been seen. It is used to make form
  controls associate with forms in the face of dramatically bad
  markup, for historical reasons.</p>


  <h5 id="other-parsing-state-flags"><span class="secno">8.2.3.5 </span>Other parsing state flags</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p>

  <p>The <dfn id="scripting-flag">scripting flag</dfn> is set to "enabled" if <a href="webappapis.html#concept-n-script" title="concept-n-script">scripting was enabled</a> for the
  <code><a href="infrastructure.html#document">Document</a></code> with which the parser is associated when the
  parser was created, and "disabled" otherwise.</p>

  <p class="note">The <a href="#scripting-flag">scripting flag</a> can be enabled even
  when the parser was originally created for the <a href="the-end.html#html-fragment-parsing-algorithm">HTML fragment
  parsing algorithm</a>, even though <code><a href="scripting-1.html#script">script</a></code> elements
  don't execute in that case.</p>

  <p>The <dfn id="frameset-ok-flag">frameset-ok flag</dfn> is set to "ok" when the parser is
  created. It is set to "not ok" after certain tokens are seen.</p>

  </div></body></html>
--- NEW FILE: fetching-resources.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.6 Fetching resources &#8212; HTML5 </title><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, table tbody { 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: #DDFFDD; }
   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; }

   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; }

   body.dfnEnabled dfn { cursor: pointer; }
   .dfnPanel {
     display: inline;
     position: absolute;
     z-index: 10;
     height: auto;
     width: auto;
     padding: 0.5em 0.75em;
     font: small sans-serif, Droid Sans Fallback;
     background: #DDDDDD;
     color: black;
     border: outset 0.2em;
   }
   .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
   .dfnPanel :link, .dfnPanel :visited { color: black; }
   .dfnPanel p { font-weight: bolder; }
   .dfnPanel * + p { margin-top: 0.25em; }
   .dfnPanel li { list-style-position: inside; }

   #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; }

   .details-example img { vertical-align: top; }

   #named-character-references-table {
     font-size: 0.6em;
     column-width: 28em;
     column-gap: 1em;
     -moz-column-width: 28em;
     -moz-column-gap: 1em;
     -webkit-column-width: 28em;
     -webkit-column-gap: 1em;
   }
   #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
   #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; }

  </style><style type="text/css">
   .domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
  </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%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%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script type="text/javascript">
   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'); // doesn't support split-out specs, but, oh well.
     // 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">
  <script src="link-fixup.js"></script>
  <link href="urls.html" title="2.5 URLs" rel="prev">
  <link href="spec.html#contents" title="Table of contents" rel="index">
  <link href="common-dom-interfaces.html" title="2.7 Common DOM interfaces" 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="urls.html">&#8592; 2.5 URLs</a> &#8211;
   <a href="spec.html#contents">Table of contents</a> &#8211;
   <a href="common-dom-interfaces.html">2.7 Common DOM interfaces &#8594;</a>
  <ol class="toc"><li><ol><li><a href="fetching-resources.html#fetching-resources"><span class="secno">2.6 </span>Fetching resources</a>
    <ol><li><a href="fetching-resources.html#concept-http-equivalent"><span class="secno">2.6.1 </span>Protocol concepts</a></li><li><a href="fetching-resources.html#encrypted-http-and-related-security-concerns"><span class="secno">2.6.2 </span>Encrypted HTTP and related security concerns</a></li><li><a href="fetching-resources.html#content-type-sniffing"><span class="secno">2.6.3 </span>Determining the type of a resource</a></li></ol></li></ol></li></ol></div>

  <div class="impl">

  <h3 id="fetching-resources"><span class="secno">2.6 </span>Fetching resources</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p>

  <p>When a user agent is to <dfn id="fetch">fetch</dfn> a resource or
  <a href="urls.html#url">URL</a>, optionally from an origin <i title="">origin</i>,
  and optionally with a <i>synchronous flag</i> and/or a <i>manual
  redirect flag</i>, the following steps must be run. (When a
  <em>URL</em> is to be fetched, the URL identifies a resource to be
  obtained.)</p>

  <!-- if invoked with the synchronous flag, make sure to release the
  storage mutex first -->

  <!-- synchronous flag is only used by sync-XHR, for legacy reasons;
  don't use it in new features! -->

  <ol><li>

    <p>Generate the <i>address of the resource from which Request-URIs
    are obtained</i> as required by HTTP for the <code title="http-referer">Referer</code> (sic) header from <a href="dom.html#the-document-s-current-address">the
    document's current address</a> of the appropriate
    <code><a href="infrastructure.html#document">Document</a></code> as given by the following list. <a href="references.html#refsHTTP">[HTTP]</a></p>

    <dl class="switch"><dt>When <a href="history.html#navigate" title="navigate">navigating</a></dt>

     <dd>The <a href="browsers.html#active-document">active document</a> of the <a href="history.html#source-browsing-context">source browsing
     context</a>.</dd>

     <dt>When fetching resources for an element</dt>

     <dd>The element's <code><a href="infrastructure.html#document">Document</a></code>.</dd>

     <dt>When fetching resources in response to a call to an API</dt>

     <dd>The <a href="browsers.html#entry-script">entry script</a>'s <a href="webappapis.html#script-s-document" title="script's
     document">document</a>.</dd>

    </dl><p>Remove any <a href="urls.html#url-fragment" title="url-fragment">&lt;fragment&gt;</a>
    component from the generated <i>address of the resource from which
    Request-URIs are obtained</i>.</p> <!-- RFC2616 says "The URI MUST
    NOT include a fragment." (section 14.36) -->

    <p>If the <a href="origin-0.html#origin">origin</a> of the appropriate
    <code><a href="infrastructure.html#document">Document</a></code> is not a scheme/host/port tuple, then the
    <code title="http-referer">Referer</code> (sic) header must be
    omitted, regardless of its value.</p>

   </li>

   <li><p>If the algorithm was not invoked with the <i>synchronous
   flag</i>, perform the remaining steps asynchronously.</p></li>

   <li>

    <p>This is the <i>main step</i>.</p>

    <p>If the resource is identified by an <a href="urls.html#absolute-url">absolute URL</a>,
    and the resource is to be obtained using an idempotent action
    (such as an HTTP GET <a href="#concept-http-equivalent-get" title="concept-http-equivalent-get">or
    equivalent</a>), and it is already being downloaded for other
    reasons (e.g. another invocation of this algorithm), and this
    request would be identical to the previous one (e.g. same <code title="http-accept">Accept</code> and <code title="http-origin">Origin</code> headers), and the user agent is
    configured such that it is to reuse the data from the existing
    download instead of initiating a new one, then use the results of
    the existing download instead of starting a new one.</p>

    <p>Otherwise, at a time convenient to the user and the user agent,
    download (or otherwise obtain) the resource, applying the
    semantics of the relevant specifications (e.g. performing an HTTP
    GET or POST operation, or reading the file from disk, <a href="webappapis.html#concept-js-deref" title="concept-js-deref">dereferencing <span title="javascript
    protocol"><code title="">javascript:</code> URLs</span></a>,
    etc).</p>

    <p>For the purposes of the <code title="http-referer">Referer</code> (sic) header, use the
    <i>address of the resource from which Request-URIs are
    obtained</i> generated in the earlier step.</p>

    <p>For the purposes of the <code title="http-origin">Origin</code>
    header, if the <a href="#fetch" title="fetch">fetching algorithm</a> was
    explicitly initiated from an <i title="">origin</i>, then <i title="">the origin that initiated the HTTP request</i> is <i title="">origin</i>. Otherwise, this is <i title="">a request from
    a "privacy-sensitive" context</i>. <a href="references.html#refsORIGIN">[ORIGIN]</a></p>

    <p>If the resource is identified by the <a href="urls.html#url">URL</a>
    <dfn id="about:blank"><code>about:blank</code></dfn>, then the resource is
    immediately available and consists of the empty string, with no
    metadata.</p>

   </li>

   <li>

    <p>If there are cookies to be set, then the user agent must run
    the following substeps:</p>

    <ol><li><p>Wait until ownership of the <a href="webappapis.html#storage-mutex">storage mutex</a> can
     be taken by this instance of the <a href="#fetch" title="fetch">fetching</a> algorithm.</p></li>

     <li><p>Take ownership of the <a href="webappapis.html#storage-mutex">storage mutex</a>.</p></li>

     <li><p>Update the cookies. <a href="references.html#refsCOOKIES">[COOKIES]</a></p></li>

     <li><p>Release the <a href="webappapis.html#storage-mutex">storage mutex</a> so that it is once
     again free.</p></li>

    </ol></li>

   <li>

    <p>If the fetched resource is an HTTP redirect <a href="#concept-http-equivalent-codes" title="concept-http-equivalent-codes">or equivalent</a>,
    then:</p>

    <dl class="switch"><dt>If the <i>manual redirect flag</i> is set</dt>

     <dd>

      <p>Continue, using the fetched resource (the redirect) as the
      result of the algorithm.</p>

     </dd>

     <dt>Otherwise</dt>

     <dd>

      <p>First, apply any relevant requirements for redirects (such as
      showing any appropriate prompts). Then, redo <i>main step</i>,
      but using the target of the redirect as the resource to fetch,
      rather than the original resource.</p>

      <p class="note">The HTTP specification requires that 301, 302,
      and 307 redirects, when applied to methods other than the safe
      methods, not be followed without user confirmation. That would
      be an appropriate prompt for the purposes of the requirement in
      the paragraph above. <a href="references.html#refsHTTP">[HTTP]</a></p>

     </dd>

    </dl></li>

   <li>

    <p>If the algorithm was not invoked with the <i>synchronous
    flag</i>: When the resource is available, or if there is an error
    of some description, <a href="webappapis.html#queue-a-task">queue a task</a> that uses the
    resource as appropriate. If the resource can be processed
    incrementally, as, for instance, with a progressively interlaced
    JPEG or an HTML file, additional tasks may be queued to process
    the data as it is downloaded. The <a href="webappapis.html#task-source">task source</a> for
    these <a href="webappapis.html#concept-task" title="concept-task">tasks</a> is the
    <a href="webappapis.html#networking-task-source">networking task source</a>.</p>

    <p>Otherwise, return the resource or error information to the
    calling algorithm.</p>

   </li>

  </ol><p>If the user agent can determine the actual length of the resource
  being <a href="#fetch" title="fetch">fetched</a> for an instance of this
  algorithm, and if that length is finite, then that length is the
  file's <dfn id="concept-fetch-total" title="concept-fetch-total">size</dfn>. Otherwise, the
  subject of the algorithm (that is, the resource being fetched) has
  no known <a href="#concept-fetch-total" title="concept-fetch-total">size</a>. (For
  example, the HTTP <code title="http-content-length">Content-Length</code> header might
  provide this information.)</p>

  <p>The user agent must also keep track of the <dfn id="concept-fetch-loaded" title="concept-fetch-loaded">number of bytes downloaded</dfn> for
  each instance of this algorithm. This number must exclude any
  out-of-band metadata, such as HTTP headers.</p>

  <p class="note">The <a href="offline.html#application-cache">application cache</a> processing model
  introduces some <a href="offline.html#changesToNetworkingModel">changes to the
  networking model</a> to handle the returning of cached
  resources.</p>

  <p class="note">The <a href="history.html#navigate" title="navigate">navigation</a>
  processing model handles redirects itself, overriding the
  redirection handling that would be done by the fetching
  algorithm.</p>

  <p class="note">Whether the <a href="#content-type-sniffing">type
  sniffing rules</a> apply to the fetched resource depends on the
  algorithm that invokes the rules &#8212; they are not always
  applicable.</p>


  <h4 id="concept-http-equivalent"><span class="secno">2.6.1 </span>Protocol concepts</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p>

  <p>User agents can implement a variety of transfer protocols, but
  this specification mostly defines behavior in terms of HTTP. <a href="references.html#refsHTTP">[HTTP]</a></p>

  <p>The <dfn id="concept-http-equivalent-get" title="concept-http-equivalent-get">HTTP GET
  method</dfn> is equivalent to the default retrieval action of the
  protocol. For example, RETR in FTP. Such actions are idempotent and
  safe, in HTTP terms.</p>

  <p>The <dfn id="concept-http-equivalent-codes" title="concept-http-equivalent-codes">HTTP response
  codes</dfn> are equivalent to statuses in other protocols that have
  the same basic meanings. For example, a "file not found" error is
  equivalent to a 404 code, a server error is equivalent to a 5xx
  code, and so on.</p>

  <p>The <dfn id="concept-http-equivalent-headers" title="concept-http-equivalent-headers">HTTP
  headers</dfn> are equivalent to fields in other protocols that have
  the same basic meaning. For example, the HTTP authentication
  headers are equivalent to the authentication aspects of the FTP
  protocol.</p>


  <h4 id="encrypted-http-and-related-security-concerns"><span class="secno">2.6.2 </span>Encrypted HTTP and related security concerns</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p>

  <p>Anything in this specification that refers to HTTP also applies
  to HTTP-over-TLS, as represented by <a href="urls.html#url" title="url">URLs</a>
  representing the <code title="">https</code> scheme.</p>

  <p class="warning">User agents should report certificate errors to
  the user and must either refuse to download resources sent with
  erroneous certificates or must act as if such resources were in fact
  served with no encryption.</p>

  <p>User agents should warn the user that there is a potential
  problem whenever the user visits a page that the user has previously
  visited, if the page uses less secure encryption on the second
  visit.</p>

  <p>Not doing so can result in users not noticing man-in-the-middle
  attacks.</p>

  <div class="example">

   <p>If a user connects to a server with a self-signed certificate,
   the user agent could allow the connection but just act as if there
   had been no encryption. If the user agent instead allowed the user
   to override the problem and then displayed the page as if it was
   fully and safely encrypted, the user could be easily tricked into
   accepting man-in-the-middle connections.</p>

   <p>If a user connects to a server with full encryption, but the
   page then refers to an external resource that has an expired
   certificate, then the user agent will act as if the resource was
   unavailable, possibly also reporting the problem to the user. If
   the user agent instead allowed the resource to be used, then an
   attacker could just look for "secure" sites that used resources
   from a different host and only apply man-in-the-middle attacks to
   that host, for example taking over scripts in the page.</p>

   <p>If a user bookmarks a site that uses a CA-signed certificate,
   and then later revisits that site directly but the site has started
   using a self-signed certificate, the user agent could warn the user
   that a man-in-the-middle attack is likely underway, instead of
   simply acting as if the page was not encrypted.</p>

  </div>


  <h4 id="content-type-sniffing"><span class="secno">2.6.3 </span>Determining the type of a resource</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p>

  <p>The <dfn id="content-type" title="Content-Type">Content-Type metadata</dfn> of a
  resource must be obtained and interpreted in a manner consistent
  with the requirements of the Content-Type Processing Model
  specification. <a href="references.html#refsMIMESNIFF">[MIMESNIFF]</a></p>

  <p>The <dfn id="content-type-sniffing-0" title="Content-Type sniffing">sniffed type of a
  resource</dfn> must be found in a manner consistent with the
  requirements given in the Content-Type Processing Model
  specification for finding the <i>sniffed-type</i> of the relevant
  sequence of octets. <a href="references.html#refsMIMESNIFF">[MIMESNIFF]</a></p>

  <p>The <dfn id="content-type-sniffing:-image" title="Content-Type sniffing: image">rules for sniffing
  images specifically</dfn> and the <dfn id="content-type-sniffing:-text-or-binary" title="Content-Type sniffing:
  text or binary">rules for distingushing if a resource is text or
  binary</dfn> are also defined in the Content-Type Processing Model
  specification. Both sets of rules return a <a href="infrastructure.html#mime-type">MIME type</a> as
  their result. <a href="references.html#refsMIMESNIFF">[MIMESNIFF]</a></p>

  <p class="warning">It is imperative that the rules in the
  Content-Type Processing Model specification be followed
  exactly. When a user agent uses different heuristics for content
  type detection than the server expects, security problems can
  occur. For more details, see the Content-Type Processing Model
  specification. <a href="references.html#refsMIMESNIFF">[MIMESNIFF]</a></p>

  <p>The <dfn id="algorithm-for-extracting-an-encoding-from-a-content-type">algorithm for extracting an encoding from a
  Content-Type</dfn>, given a string <var title="">s</var>, is as
  follows. It either returns an encoding or nothing.</p>

  <ol><li><p>Find the first seven characters in <var title="">s</var>
   that are an <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the word
   "<code title="">charset</code>".  If no such match is found, return
   nothing.</p></li>

   <li><p>Skip any U+0009, U+000A, U+000C, U+000D, or U+0020
   characters that immediately follow the word "<code title="">charset</code>" (there might not be any).</p></li>

   <li><p>If the next character is not a U+003D EQUALS SIGN ('='),
   return nothing and abort these steps.</p></li>

   <li><p>Skip any U+0009, U+000A, U+000C, U+000D, or U+0020
   characters that immediately follow the equals sign (there might not
   be any).</p></li>

   <li>

    <p>Process the next character as follows:</p>

    <dl class="switch"><dt>If it is a U+0022 QUOTATION MARK ('"') and there is a later U+0022 QUOTATION MARK ('"') in <var title="">s</var></dt>
     <dt>If it is a U+0027 APOSTROPHE ("'") and there is a later U+0027 APOSTROPHE ("'") in <var title="">s</var></dt>
     <dd>Return the encoding corresponding to the string between this character and the next earliest occurrence of this character.</dd>

     <dt>If it is an unmatched U+0022 QUOTATION MARK ('"')</dt>
     <dt>If it is an unmatched U+0027 APOSTROPHE ("'")</dt>
     <dt>If there is no next character</dt>
     <dd>Return nothing.</dd>

     <dt>Otherwise</dt>
     <dd>Return the encoding corresponding to the string from this
     character to the first U+0009, U+000A, U+000C, U+000D, U+0020, or
     U+003B character or the end of <var title="">s</var>, whichever
     comes first.</dd>

    </dl></li>

  </ol><p class="note">This requirement is a <a href="introduction.html#willful-violation">willful violation</a>
  of the HTTP specification, motivated by the need for backwards
  compatibility with legacy content. <a href="references.html#refsHTTP">[HTTP]</a></p>

  </div></body></html>
--- NEW FILE: origin-0.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>5.3 Origin &#8212; HTML5 </title><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, table tbody { 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: #DDFFDD; }
   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; }

   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; }

   body.dfnEnabled dfn { cursor: pointer; }
   .dfnPanel {
     display: inline;
     position: absolute;
     z-index: 10;
     height: auto;
     width: auto;
     padding: 0.5em 0.75em;
     font: small sans-serif, Droid Sans Fallback;
     background: #DDDDDD;
     color: black;
     border: outset 0.2em;
   }
   .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
   .dfnPanel :link, .dfnPanel :visited { color: black; }
   .dfnPanel p { font-weight: bolder; }
   .dfnPanel * + p { margin-top: 0.25em; }
   .dfnPanel li { list-style-position: inside; }

   #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; }

   .details-example img { vertical-align: top; }

   #named-character-references-table {
     font-size: 0.6em;
     column-width: 28em;
     column-gap: 1em;
     -moz-column-width: 28em;
     -moz-column-gap: 1em;
     -webkit-column-width: 28em;
     -webkit-column-gap: 1em;
   }
   #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
   #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; }

  </style><style type="text/css">
   .domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
  </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%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%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script type="text/javascript">
   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'); // doesn't support split-out specs, but, oh well.
     // 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">
  <script src="link-fixup.js"></script>
  <link href="browsers.html" title="5 Loading Web pages" rel="prev">
  <link href="spec.html#contents" title="Table of contents" rel="index">
  <link href="history.html" title="5.4 Session history and navigation" 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; 5 Loading Web pages</a> &#8211;
   <a href="spec.html#contents">Table of contents</a> &#8211;
   <a href="history.html">5.4 Session history and navigation &#8594;</a>
  <ol class="toc"><li><ol><li><a href="origin-0.html#origin-0"><span class="secno">5.3 </span>Origin</a>
    <ol><li><a href="origin-0.html#relaxing-the-same-origin-restriction"><span class="secno">5.3.1 </span>Relaxing the same-origin restriction</a></li></ol></li></ol></li></ol></div>

  <h3 id="origin-0"><span class="secno">5.3 </span>Origin</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><!-- Hallowed are the Ori --><p>The <dfn id="origin">origin</dfn> of a resource and the <dfn id="effective-script-origin">effective script
  origin</dfn> of a resource are both either opaque identifiers or
  tuples consisting of a scheme component, a host component, a port
  component, and optionally extra data.</p><p class="note">The extra data could include the certificate of the
  site when using encrypted connections, to ensure that if the site's
  secure certificate changes, the origin is considered to change as
  well.</p><div class="impl">

  <p>These characteristics are defined as follows:</p>

  <dl><dt>For URLs</dt>

   <dd>

    <p>The <a href="#origin">origin</a> and <a href="#effective-script-origin">effective script
    origin</a> of the <a href="urls.html#url">URL</a> is whatever is returned by
    the following algorithm:</p>

    <ol><li><p>Let <var title="">url</var> be the <a href="urls.html#url">URL</a> for
     which the <a href="#origin">origin</a> is being determined.</p></li>

     <li><p><a href="urls.html#parse-a-url" title="parse a url">Parse</a> <var title="">url</var>.</p></li>

     <li><p>If <var title="">url</var> identifies a resource that is
     its own trust domain (e.g. it identifies an e-mail on an IMAP
     server or a post on an NNTP server) then return a globally unique
     identifier specific to the resource identified by <var title="">url</var>, so that if this algorithm is invoked again
     for <a href="urls.html#url" title="URL">URLs</a> that identify the same resource,
     the same identifier will be returned.</p></li>

     <li><p>If <var title="">url</var> does not use a server-based
     naming authority, or if parsing <var title="">url</var> failed,
     or if <var title="">url</var> is not an <a href="urls.html#absolute-url">absolute
     URL</a>, then return a new globally unique
     identifier.</p></li>

     <li><p>Let <var title="">scheme</var> be the <a href="urls.html#url-scheme" title="url-scheme">&lt;scheme&gt;</a> component of <var title="">url</var>, <a href="infrastructure.html#converted-to-ascii-lowercase">converted to ASCII lowercase</a>.</p></li>

     <li><p>If the UA doesn't support the protocol given by <var title="">scheme</var>, then return a new globally unique
     identifier.</p></li>

     <li><p>If <var title="">scheme</var> is "<code title="">file</code>", then the user agent may return a
     UA-specific value.</p></li>

     <li><p>Let <var title="">host</var> be the <a href="urls.html#url-host" title="url-host">&lt;host&gt;</a> component of <var title="">url</var>.</p></li>

     <li>

      <p>Apply the IDNA ToASCII algorithm to <var title="">host</var>,
      with both the AllowUnassigned and UseSTD3ASCIIRules flags
      set. Let <var title="">host</var> be the result of the ToASCII
      algorithm.</p>

      <p>If ToASCII fails to convert one of the components of the
      string, e.g. because it is too long or because it contains
      invalid characters, then return a new globally unique
      identifier. <a href="references.html#refsRFC3490">[RFC3490]</a></p>

     </li>

     <li><p>Let <var title="">host</var> be the result of converting
     <var title="">host</var> <a href="infrastructure.html#converted-to-ascii-lowercase" title="converted to ASCII lowercase">to
     ASCII lowercase</a>.</p></li>

     <li><p>If there is no <a href="urls.html#url-port" title="url-port">&lt;port&gt;</a>
     component, then let <var title="">port</var> be the default port
     for the protocol given by <var title="">scheme</var>. Otherwise,
     let <var title="">port</var> be the <a href="urls.html#url-port" title="url-port">&lt;port&gt;</a> component of <var title="">url</var>.</p></li>

     <li><p>Return the tuple (<var title="">scheme</var>, <var title="">host</var>, <var title="">port</var>).</p></li>

    </ol><p>In addition, if the <a href="urls.html#url">URL</a> is in fact associated with
    a <code><a href="infrastructure.html#document">Document</a></code> object that was created by parsing the
    resource obtained from fetching <a href="urls.html#url">URL</a>, and this was
    done over a secure connection, then the server's secure
    certificate may be added to the origin as additional data.</p>

   </dd>

   <dt>For scripts</dt>

   <dd>

    <p>The <a href="#origin">origin</a> and <a href="#effective-script-origin">effective script
    origin</a> of a script are determined from another resource,
    called the <i>owner</i>:</p>

    <dl class="switch"><dt>If a script is in a <code><a href="scripting-1.html#script">script</a></code> element</dt>

     <dd>The owner is the <code><a href="infrastructure.html#document">Document</a></code> to which the
     <code><a href="scripting-1.html#script">script</a></code> element belongs.</dd>


     <dt>If a script is in an <a href="webappapis.html#event-handler-content-attributes" title="event handler content
     attributes">event handler content attribute</a></dt>

     <dd>The owner is the <code><a href="infrastructure.html#document">Document</a></code> to which the
     attribute node belongs.</dd>


     <dt>If a script is a function or other code reference created by
     another script</dt>

     <dd>The owner is the script that created it.</dd>


     <dt>If a script is a <a href="webappapis.html#javascript-protocol" title="javascript protocol"><code title="">javascript:</code> URL</a> that was returned as the
     location of an HTTP redirect (<a href="fetching-resources.html#concept-http-equivalent-codes" title="concept-http-equivalent-codes">or equivalent</a> in
     other protocols)</dt>

     <dd>The owner is the <a href="urls.html#url">URL</a> that redirected to the
     <a href="webappapis.html#javascript-protocol" title="javascript protocol"><code title="">javascript:</code> URL</a>.</dd>


     <dt>If a script is a <a href="webappapis.html#javascript-protocol" title="javascript protocol"><code title="">javascript:</code> URL</a> in an attribute</dt>

     <dd>The owner is the <code><a href="infrastructure.html#document">Document</a></code> of the element on
     which the attribute is found.</dd>


     <dt>If a script is a <a href="webappapis.html#javascript-protocol" title="javascript protocol"><code title="">javascript:</code> URL</a> in a style sheet</dt>

     <dd>The owner is the <a href="urls.html#url">URL</a> of the style sheet.</dd>


     <dt>If a script is a <a href="webappapis.html#javascript-protocol" title="javascript protocol"><code title="">javascript:</code> URL</a> to which a <a href="browsers.html#browsing-context">browsing
     context</a> is being <a href="history.html#navigate" title="navigate">navigated</a>,
     the URL having been provided by the user (e.g. by using a
     <i>bookmarklet</i>)</dt>

     <dd>The owner is the <code><a href="infrastructure.html#document">Document</a></code> of the <a href="browsers.html#browsing-context">browsing
     context</a>'s <a href="browsers.html#active-document">active document</a>.</dd>


     <dt>If a script is a <a href="webappapis.html#javascript-protocol" title="javascript protocol"><code title="">javascript:</code> URL</a> to which a <a href="browsers.html#browsing-context">browsing
     context</a> is being <a href="history.html#navigate" title="navigate">navigated</a>,
     the URL having been declared in markup</dt>

     <dd>The owner is the <code><a href="infrastructure.html#document">Document</a></code> of the element
     (e.g. an <code><a href="text-level-semantics.html#the-a-element">a</a></code> or <code><a href="the-map-element.html#the-area-element">area</a></code> element) that
     declared the URL.</dd>


     <dt>If a script is a <a href="webappapis.html#javascript-protocol" title="javascript protocol"><code title="">javascript:</code> URL</a> to which a <a href="browsers.html#browsing-context">browsing
     context</a> is being <a href="history.html#navigate" title="navigate">navigated</a>,
     the URL having been provided by script</dt>

     <dd>The owner is the script that provided the URL.</dd>

    </dl><p>The <a href="#origin">origin</a> of the script is then equal to the
    <a href="#origin">origin</a> of the owner, and the <a href="#effective-script-origin">effective script
    origin</a> of the script is equal to the <a href="#effective-script-origin">effective script
    origin</a> of the owner.</p>

   </dd>

   <dt>For <code><a href="infrastructure.html#document">Document</a></code> objects and images</dt>

   <dd>

    <dl class="switch"><dt id="sandboxOrigin">If a <code><a href="infrastructure.html#document">Document</a></code> is in a
     <a href="browsers.html#browsing-context">browsing context</a> whose <a href="the-iframe-element.html#sandboxed-origin-browsing-context-flag">sandboxed origin
     browsing context flag</a> was set when the
     <code><a href="infrastructure.html#document">Document</a></code> was created</dt>

     <dt>If a <code><a href="infrastructure.html#document">Document</a></code> was generated from a resource
     labeled as <code><a href="iana.html#text-html-sandboxed">text/html-sandboxed</a></code></dt>

     <dd>The <a href="#origin">origin</a> is a globally unique identifier
     assigned when the <code><a href="infrastructure.html#document">Document</a></code> is created.</dd>


     <dt>If a <code><a href="infrastructure.html#document">Document</a></code> or image was returned by the
     <code>XMLHttpRequest</code> API</dt>

     <dd>The <a href="#origin">origin</a> is equal to the <span>XMLHttpRequest
     origin</span> of the <code>XMLHttpRequest</code> object. <a href="references.html#refsXHR">[XHR]</a></dd>


     <dt>If a <code><a href="infrastructure.html#document">Document</a></code> or image was generated from a
     <a href="webappapis.html#javascript-protocol" title="javascript protocol"><code>javascript:</code>
     URL</a></dt>

     <dd>The <a href="#origin">origin</a> is equal to the <a href="#origin">origin</a>
     of the script of that <a href="webappapis.html#javascript-protocol" title="javascript
     protocol"><code>javascript:</code> URL</a>.</dd>


     <dt>If a <code><a href="infrastructure.html#document">Document</a></code> or image was served over the
     network and has an address that uses a URL scheme with a
     server-based naming authority</dt>

     <dd>The <a href="#origin">origin</a> is the <a href="#origin">origin</a> of the
     <a href="dom.html#the-document-s-address" title="the document's address">address</a> of the
     <code><a href="infrastructure.html#document">Document</a></code> or the <a href="urls.html#url">URL</a> of the image, as
     appropriate.</dd>


     <dt>If a <code><a href="infrastructure.html#document">Document</a></code> or image was generated from a
     <code title="">data:</code> URL that was returned as the location
     of an HTTP redirect (<a href="fetching-resources.html#concept-http-equivalent-codes" title="concept-http-equivalent-codes">or equivalent</a> in
     other protocols)</dt>

     <dd>The <a href="#origin">origin</a> is the <a href="#origin">origin</a> of the
     <a href="urls.html#url">URL</a> that redirected to the <code title="">data:</code> URL.</dd>


     <dt>If a <code><a href="infrastructure.html#document">Document</a></code> or image was generated from a
     <code title="">data:</code> URL found in another
     <code><a href="infrastructure.html#document">Document</a></code> or in a script</dt>

     <dd>The <a href="#origin">origin</a> is the <a href="#origin">origin</a> of the
     <code><a href="infrastructure.html#document">Document</a></code> or script that initiated the <a href="history.html#navigate" title="navigate">navigation</a> to that <a href="urls.html#url">URL</a>.</dd>


     <dt>If a <code><a href="infrastructure.html#document">Document</a></code> has the <a href="dom.html#the-document-s-address" title="the
     document's address">address</a>
     "<code><a href="fetching-resources.html#about:blank">about:blank</a></code>"</dt>

     <dd>The <a href="#origin">origin</a> of the <code><a href="infrastructure.html#document">Document</a></code> is <a href="browsers.html#about-blank-origin">the <span>origin</span> it was
     assigned when its browsing context was created</a>.</dd>


     <dt>If a <code><a href="infrastructure.html#document">Document</a></code> is <a href="the-iframe-element.html#an-iframe-srcdoc-document">an <code>iframe</code> <code title="attr-iframe-srcdoc">srcdoc</code> document</a></dt>

     <dd>The <a href="#origin">origin</a> of the <code><a href="infrastructure.html#document">Document</a></code> is the
     <a href="#origin">origin</a> of the <code><a href="infrastructure.html#document">Document</a></code>'s <a href="browsers.html#browsing-context">browsing
     context</a>'s <a href="browsers.html#browsing-context-container">browsing context container</a>'s
     <code><a href="infrastructure.html#document">Document</a></code>.</dd>


     <dt>If a <code><a href="infrastructure.html#document">Document</a></code> or image was obtained in some
     other manner (e.g. a <code title="">data:</code> URL typed in by
     the user, a <code><a href="infrastructure.html#document">Document</a></code> created using the <code title="dom-DOMImplementation-createDocument"><a href="infrastructure.html#dom-domimplementation-createdocument">createDocument()</a></code>
     API, etc)</dt>

     <dd>The <a href="#origin">origin</a> is a globally unique identifier
     assigned when the <code><a href="infrastructure.html#document">Document</a></code> or image is created.</dd>

    </dl><p>When a <code><a href="infrastructure.html#document">Document</a></code> is created, its <a href="#effective-script-origin">effective
    script origin</a> is initialized to the <a href="#origin">origin</a> of
    the <code><a href="infrastructure.html#document">Document</a></code>. However, the <code title="dom-document-domain"><a href="#dom-document-domain">document.domain</a></code> attribute can
    be used to change it.</p>

   </dd>

   <dt>For <code><a href="video.html#audio">audio</a></code> and <code><a href="video.html#video">video</a></code> elements</dt>

   <dd>

    <p>If value of the <a href="video.html#media-element">media element</a>'s <code title="dom-media-currentSrc"><a href="video.html#dom-media-currentsrc">currentSrc</a></code> attribute is the
    empty string, the <a href="#origin">origin</a> is the same as the
    <a href="#origin">origin</a> of the element's <code><a href="infrastructure.html#document">Document</a></code>'s
    <a href="#origin">origin</a>.</p>

    <p>Otherwise, the <a href="#origin">origin</a> is equal to the
    <a href="#origin">origin</a> of the <a href="urls.html#absolute-url">absolute URL</a> given by the
    <a href="video.html#media-element">media element</a>'s <code title="dom-media-currentSrc"><a href="video.html#dom-media-currentsrc">currentSrc</a></code> attribute.</p>

   </dd>

  </dl><p>The <dfn id="unicode-serialization-of-an-origin">Unicode serialization of an origin</dfn> is the string
  obtained by applying the following algorithm to the given
  <a href="#origin">origin</a>:</p>

  <ol><li><p>If the <a href="#origin">origin</a> in question is not a
   scheme/host/port tuple, then return the literal string "<code title="">null</code>" and abort these steps.</p></li>

   <li><p>Otherwise, let <var title="">result</var> be the scheme part
   of the <a href="#origin">origin</a> tuple.</p></li>

   <li><p>Append the string "<code title="">://</code>" to <var title="">result</var>.</p></li>

   <li><p>Apply the IDNA ToUnicode algorithm to each component of the
   host part of the <a href="#origin">origin</a> tuple, and append the results
   &#8212; each component, in the same order, separated by U+002E FULL
   STOP characters (.) &#8212; to <var title="">result</var>. <a href="references.html#refsRFC3490">[RFC3490]</a></p></li>

   <li><p>If the port part of the <a href="#origin">origin</a> tuple gives a port
   that is different from the default port for the protocol given by
   the scheme part of the <a href="#origin">origin</a> tuple, then append a
   U+003A COLON character (:) and the given port, in base ten, to
   <var title="">result</var>.</p></li>

   <li><p>Return <var title="">result</var>.</p></li>

  </ol><p>The <dfn id="ascii-serialization-of-an-origin">ASCII serialization of an origin</dfn> is the string
  obtained by applying the following algorithm to the given
  <a href="#origin">origin</a>:</p>

  <ol><li><p>If the <a href="#origin">origin</a> in question is not a
   scheme/host/port tuple, then return the literal string "<code title="">null</code>" and abort these steps.</p></li>

   <li><p>Otherwise, let <var title="">result</var> be the scheme part
   of the <a href="#origin">origin</a> tuple.</p></li>

   <li><p>Append the string "<code title="">://</code>" to <var title="">result</var>.</p></li>

   <li>

    <p>Apply the IDNA ToASCII algorithm the host part of the
    <a href="#origin">origin</a> tuple, with both the AllowUnassigned and
    UseSTD3ASCIIRules flags set, and append the results <var title="">result</var>.</p>

    <p>If ToASCII fails to convert one of the components of the
    string, e.g. because it is too long or because it contains invalid
    characters, then return the empty string and abort these steps. <a href="references.html#refsRFC3490">[RFC3490]</a></p>

   </li>

   <li><p>If the port part of the <a href="#origin">origin</a> tuple gives a port
   that is different from the default port for the protocol given by
   the scheme part of the <a href="#origin">origin</a> tuple, then append a
   U+003A COLON character (:) and the given port, in base ten, to
   <var title="">result</var>.</p></li>

   <li><p>Return <var title="">result</var>.</p></li>

  </ol><p>Two <a href="#origin" title="origin">origins</a> are said to be the
  <dfn id="same-origin">same origin</dfn> if the following algorithm returns true:</p>

  <ol><li><p>Let <var title="">A</var> be the first <a href="#origin">origin</a>
   being compared, and <var title="">B</var> be the second
   <a href="#origin">origin</a> being compared.</p></li>

   <li><p>If <var title="">A</var> and <var title="">B</var> are both
   opaque identifiers, and their value is equal, then return
   true.</p></li>

   <li><p>Otherwise, if either <var title="">A</var> or <var title="">B</var> or both are opaque identifiers, return
   false.</p></li>

   <li><p>If <var title="">A</var> and <var title="">B</var> have
   scheme components that are not identical, return false.</p></li>

   <li><p>If <var title="">A</var> and <var title="">B</var> have host
   components that are not identical, return false.</p></li>

   <li><p>If <var title="">A</var> and <var title="">B</var> have port
   components that are not identical, return false.</p></li>

   <li><p>If either <var title="">A</var> or <var title="">B</var>
   have additional data, but that data is not identical for both,
   return false.</p></li>

   <li><p>Return true.</p></li>

  </ol></div><h4 id="relaxing-the-same-origin-restriction"><span class="secno">5.3.1 </span>Relaxing the same-origin restriction</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-domain"><a href="#dom-document-domain">domain</a></code> [ = <var title="">domain</var> ]</dt>

   <dd>

    <p>Returns the current domain used for security checks.</p>

    <p>Can be set to a value that removes subdomains, to change the
    <a href="#effective-script-origin">effective script origin</a> to allow pages on other
    subdomains of the same domain (if they do the same thing) to
    access each other.</p>

   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-document-domain" title="dom-document-domain"><code>domain</code></dfn>
  attribute on <code><a href="infrastructure.html#document">Document</a></code> objects must be initialized to
  <a href="#the-document-s-domain">the document's domain</a>, if it has one, and the empty
  string otherwise. If the value is an IPv6 address, then the square
  brackets from the host portion of the <a href="urls.html#url-host" title="url-host">&lt;host&gt;</a> component must be omitted from
  the attribute's value.</p>

  <p>On getting, the attribute must return its current
  value, unless the document was created by
  <code>XMLHttpRequest</code>, in which case it must throw an
  <code><a href="common-dom-interfaces.html#invalid_access_err">INVALID_ACCESS_ERR</a></code> exception.</p>

  <p>On setting, the user agent must run the following algorithm:</p>

  <ol><li>

    <p>If the document was created by <code>XMLHttpRequest</code>,
    throw an <code><a href="common-dom-interfaces.html#invalid_access_err">INVALID_ACCESS_ERR</a></code> exception and abort these
    steps.</p>

   </li>

   <li>

    <p>If the new value is an IP address, let <var title="">new
    value</var> be the new value. Otherwise, apply the IDNA ToASCII
    algorithm to the new value, with both the AllowUnassigned and
    UseSTD3ASCIIRules flags set, and let <var title="">new value</var>
    be the result of the ToASCII algorithm.</p>

    <p>If ToASCII fails to convert one of the components of the
    string, e.g. because it is too long or because it contains invalid
    characters, then throw a <code><a href="common-dom-interfaces.html#security_err">SECURITY_ERR</a></code> exception and abort
    these steps. <a href="references.html#refsRFC3490">[RFC3490]</a></p>

   </li>

   <li>

    <p>If <var title="">new value</var> is not exactly equal to the
    current value of the <code title="dom-document-domain"><a href="#dom-document-domain">document.domain</a></code> attribute, then
    run these substeps:</p>

    <ol><li>

      <p>If the current value is an IP address, throw a
      <code><a href="common-dom-interfaces.html#security_err">SECURITY_ERR</a></code> exception and abort these steps.</p>

     </li>

     <li>

      <p>If <var title="">new value</var>, prefixed by a U+002E FULL
      STOP (.), does not exactly match the end of the current value,
      throw a <code><a href="common-dom-interfaces.html#security_err">SECURITY_ERR</a></code> exception and abort these
      steps.</p>

     </li>

     <li>

      <p>If <var title="">new value</var> matches a suffix in the
      Public Suffix List, or, if <var title="">new value</var>,
      prefixed by a U+002E FULL STOP (.), matches the end of a
      suffix in the Public Suffix List, then throw a
      <code><a href="common-dom-interfaces.html#security_err">SECURITY_ERR</a></code> exception and abort these steps. <a href="references.html#refsPSL">[PSL]</a></p>

      <p>Suffixes must be compared after applying the IDNA ToASCII
      algorithm to them, with both the AllowUnassigned and
      UseSTD3ASCIIRules flags set, in an <a href="infrastructure.html#ascii-case-insensitive">ASCII
      case-insensitive</a> manner. <a href="references.html#refsRFC3490">[RFC3490]</a></p>

     </li>

    </ol></li>

   <li><p>Release the <a href="webappapis.html#storage-mutex">storage mutex</a>.</p></li>

   <li>

    <p>Set the attribute's value to <var title="">new value</var>.</p>

   </li>

   <li>

    <p>Set the host part of the <a href="#effective-script-origin">effective script origin</a>
    tuple of the <code><a href="infrastructure.html#document">Document</a></code> to <var title="">new
    value</var>.</p>

   </li>

   <li>

    <p>Set the port part of the <a href="#effective-script-origin">effective script origin</a>
    tuple of the <code><a href="infrastructure.html#document">Document</a></code> to "manual override" (a value
    that, for the purposes of <a href="#same-origin" title="same origin">comparing
    origins</a>, is identical to "manual override" but not
    identical to any other value).</p>

   </li>

  </ol><p>The <dfn id="the-document-s-domain" title="the document's domain">domain</dfn> of a
  <code><a href="infrastructure.html#document">Document</a></code> is the host part of the document's
  <a href="#origin">origin</a>, if that is a scheme/host/port tuple. If it
  isn't, then the document does not have a domain.</p>

  </div><p class="note">The <code title="dom-document-domain"><a href="#dom-document-domain">domain</a></code>
  attribute is used to enable pages on different hosts of a domain to
  access each others' DOMs.</p><p class="warning">Do not use the <code title="dom-document-domain"><a href="#dom-document-domain">document.domain</a></code> attribute when
  using shared hosting. If an untrusted third party is able to host an
  HTTP server at the same IP address but on a different port, then the
  same-origin protection that normally protects two different sites on
  the same host will fail, as the ports are ignored when comparing
  origins after the <code title="dom-document-domain"><a href="#dom-document-domain">document.domain</a></code> attribute has
  been used.</p></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.7.2 Common input element attributes &#8212; HTML5 </title><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; }
[...1157 lines suppressed...]
   applies, <a href="association-of-controls-and-forms.html#broadcast-forminput-events">broadcast <code title="event-forminput">forminput</code> events</a> at the
   <code><a href="the-input-element.html#the-input-element">input</a></code> element's <a href="association-of-controls-and-forms.html#form-owner">form owner</a>.</li>

   <li>If the <code title="event-input-change"><a href="#event-input-change">change</a></code> event
   applies, <a href="webappapis.html#queue-a-task">queue a task</a> to <a href="webappapis.html#fire-a-simple-event">fire a simple
   event</a> that bubbles named <code title="event-change">change</code> at the <code><a href="the-input-element.html#the-input-element">input</a></code>
   element.</li>

   <li>If the <code title="event-input-change"><a href="#event-input-change">change</a></code> event
   applies, <a href="association-of-controls-and-forms.html#broadcast-formchange-events">broadcast <code title="event-formchange">formchange</code> events</a> at the
   <code><a href="the-input-element.html#the-input-element">input</a></code> element's <a href="association-of-controls-and-forms.html#form-owner">form owner</a>.</li>

  </ol><p class="note">In addition, when the <code title="event-input-change"><a href="#event-input-change">change</a></code> event applies, <code title="event-change">change</code> events can also be fired as part
  of the element's <a href="content-models.html#activation-behavior">activation behavior</a> and as part of the
  <a href="editing.html#unfocusing-steps">unfocusing steps</a>.</p>

  <p>The <a href="webappapis.html#task-source">task source</a> for these <a href="webappapis.html#concept-task" title="concept-task">tasks</a> is the <a href="webappapis.html#user-interaction-task-source">user interaction task
  source</a>.</p>

  </div></body></html>
--- NEW FILE: embedded-content-1.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.8 Embedded content &#8212; HTML5 </title><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; }
[...1483 lines suppressed...]
   element that contains a <code><a href="grouping-content.html#the-figcaption-element">figcaption</a></code> element that
   contains content other than <a href="content-models.html#inter-element-whitespace">inter-element whitespace</a>
   (as <a href="#unknown-images">described above</a>).</li>

   <!-- the following are additional entries not included in the
   aforementioned list, as they apply only to conformance checkers -->

   <li>The conformance checker has been configured to assume that the
   document is an e-mail or document intended for a specific person
   who is known to be able to view images.</li>

   <li>The document has a <code><a href="semantics.html#meta">meta</a></code> element with a <code title="attr-meta-name"><a href="semantics.html#attr-meta-name">name</a></code> attribute whose value is an
   <a href="infrastructure.html#ascii-case-insensitive">ASCII case-insensitive</a> match for the string "<code title="meta-generator"><a href="semantics.html#meta-generator">generator</a></code>". (This case does not
   represent a case where the document is conforming, only that the
   generator could not determine appropriate alternative text &#8212;
   validators are required to not show an error in this case to
   discourage markup generators from including bogus alternative text
   purely in an attempt to silence validators.)</li>

  </ul></div></body></html>
--- NEW FILE: the-input-element.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.10.7 The input element &#8212; HTML5 </title><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; }
[...1541 lines suppressed...]
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-input-maxlength"><a href="common-input-element-attributes.html#attr-input-maxlength">maxlength</a></code> content attribute,
  <a href="common-dom-interfaces.html#limited-to-only-non-negative-numbers">limited to only non-negative numbers</a>. The <dfn id="dom-input-readonly" title="dom-input-readOnly"><code>readOnly</code></dfn> IDL attribute
  must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-input-readonly"><a href="common-input-element-attributes.html#attr-input-readonly">readonly</a></code> content attribute. The
  <dfn id="dom-input-defaultchecked" title="dom-input-defaultChecked"><code>defaultChecked</code></dfn>
  IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-input-checked"><a href="#attr-input-checked">checked</a></code> content attribute. The
  <dfn id="dom-input-defaultvalue" title="dom-input-defaultValue"><code>defaultValue</code></dfn>
  IDL attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the <code title="attr-input-value"><a href="#attr-input-value">value</a></code> content attribute.</p>

  <p>The <code title="dom-cva-willValidate"><a href="association-of-controls-and-forms.html#dom-cva-willvalidate">willValidate</a></code>, <code title="dom-cva-validity"><a href="association-of-controls-and-forms.html#dom-cva-validity">validity</a></code>, and <code title="dom-cva-validationMessage"><a href="association-of-controls-and-forms.html#dom-cva-validationmessage">validationMessage</a></code>
  attributes, and the <code title="dom-cva-checkValidatity"><a href="association-of-controls-and-forms.html#dom-cva-checkvalidatity">checkValidity()</a></code> and <code title="dom-cva-setCustomValidity"><a href="association-of-controls-and-forms.html#dom-cva-setcustomvalidity">setCustomValidity()</a></code>
  methods, are part of the <a href="association-of-controls-and-forms.html#the-constraint-validation-api">constraint validation API</a>. The
  <code title="dom-lfe-labels"><a href="forms.html#dom-lfe-labels">labels</a></code> attribute provides a list
  of the element's <code><a href="forms.html#the-label-element">label</a></code>s. The <code title="dom-textarea/input-select"><a href="editing.html#dom-textarea-input-select">select()</a></code>, <code title="dom-textarea/input-selectionStart"><a href="editing.html#dom-textarea-input-selectionstart">selectionStart</a></code>,
  <code title="dom-textarea/input-selectionEnd"><a href="editing.html#dom-textarea-input-selectionend">selectionEnd</a></code>,
  and <code title="dom-textarea/input-setSelectionRange"><a href="editing.html#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>
  methods and attributes expose the element's text selection. The
  <code title="dom-fe-autofocus"><a href="association-of-controls-and-forms.html#dom-fe-autofocus">autofocus</a></code>, <code title="dom-fe-disabled"><a href="association-of-controls-and-forms.html#dom-fe-disabled">disabled</a></code>, <code title="dom-fae-form"><a href="association-of-controls-and-forms.html#dom-fae-form">form</a></code>, and <code title="dom-fe-name"><a href="association-of-controls-and-forms.html#dom-fe-name">name</a></code> IDL attributes are part of the
  element's forms API.</p>

  </div></body></html>
--- NEW FILE: rendering.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>10 Rendering &#8212; HTML5 </title><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; }
[...2513 lines suppressed...]



  <h3 id="print-media"><span class="secno">10.7 </span>Print media</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p>

  <p>User agents are expected to allow the user to request the
  opportunity to <dfn id="obtain-a-physical-form">obtain a physical form</dfn> (or a
  representation of a physical form) of a <code><a href="infrastructure.html#document">Document</a></code>. For
  example, selecting the option to print a page or convert it to PDF
  format.</p>

  <p>When the user actually <a href="#obtain-a-physical-form" title="obtain a physical
  form">obtains a physical form</a> (or a representation of a
  physical form) of a <code><a href="infrastructure.html#document">Document</a></code>, the user agent is
  expected to create a new rendering of the <code><a href="infrastructure.html#document">Document</a></code> for
  the print media.</p>



  </div></body></html>
--- NEW FILE: grouping-content.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.5 Grouping content &#8212; HTML5 </title><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; }
[...1167 lines suppressed...]
   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.2 Timers &#8212; HTML5 </title><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; }
[...1358 lines suppressed...]

    <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.
    
    <a href="references.html#refsWEBSTORAGE">[WEBSTORAGE]</a>
    
    </p>

   </dd>

  </dl><div class="impl">

   <p>The <dfn id="dom-navigator-yieldforstorageupdates" title="dom-navigator-yieldForStorageUpdates"><code>yieldForStorageUpdates()</code></dfn>
   method, when invoked, must, if the <a href="webappapis.html#storage-mutex">storage mutex</a> is
   owned by the <a href="webappapis.html#event-loop">event loop</a> of the <a href="webappapis.html#concept-task" title="concept-task">task</a> that resulted in the method being
   called, release the <a href="webappapis.html#storage-mutex">storage mutex</a> so that it is once
   again free. Otherwise, it must do nothing.</p>

  </div></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><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; }
[...1052 lines suppressed...]


   <dt>Content attributes</dt>

   <dd>A normative list of attributes that may be specified on the
   element (except where otherwise disallowed).</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="rendering.html#represents">represents</a>, along with any additional normative
  conformance criteria that may apply to authors<span class="impl" title=""> and implementations</span>. Examples are sometimes
  also included.</p><h5 id="attributes"><span class="secno">3.2.4.1 </span>Attributes</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p id="attribute-text">Except where otherwise specified, attributes
  on <a href="infrastructure.html#html-elements">HTML elements</a> may have any string value, including
  the empty string. Except where explicitly stated, there is no
  restriction on what text can be specified in such attributes.</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><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, table tbody { 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: #DDFFDD; }
   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; }

   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; }

   body.dfnEnabled dfn { cursor: pointer; }
   .dfnPanel {
     display: inline;
     position: absolute;
     z-index: 10;
     height: auto;
     width: auto;
     padding: 0.5em 0.75em;
     font: small sans-serif, Droid Sans Fallback;
     background: #DDDDDD;
     color: black;
     border: outset 0.2em;
   }
   .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
   .dfnPanel :link, .dfnPanel :visited { color: black; }
   .dfnPanel p { font-weight: bolder; }
   .dfnPanel * + p { margin-top: 0.25em; }
   .dfnPanel li { list-style-position: inside; }

   #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; }

   .details-example img { vertical-align: top; }

   #named-character-references-table {
     font-size: 0.6em;
     column-width: 28em;
     column-gap: 1em;
     -moz-column-width: 28em;
     -moz-column-gap: 1em;
     -webkit-column-width: 28em;
     -webkit-column-gap: 1em;
   }
   #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
   #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; }

  </style><style type="text/css">
   .domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
  </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%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%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script type="text/javascript">
   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'); // doesn't support split-out specs, but, oh well.
     // 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">
  <script src="link-fixup.js"></script>
  <link href="common-microsyntaxes.html" title="2.4 Common microsyntaxes" rel="prev">
  <link href="spec.html#contents" title="Table of contents" rel="index">
  <link href="fetching-resources.html" title="2.6 Fetching resources" 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="spec.html#contents">Table of contents</a> &#8211;
   <a href="fetching-resources.html">2.6 Fetching resources &#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#dynamic-changes-to-base-urls"><span class="secno">2.5.2 </span>Dynamic changes to base URLs</a></li><li><a href="urls.html#interfaces-for-url-manipulation"><span class="secno">2.5.3 </span>Interfaces for URL manipulation</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><!-- see also: svn diff -r3244:3245 source --><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 at least one of
  the following conditions holds:</p><ul><li><p>The <a href="#url">URL</a> is a valid URI reference <a href="references.html#refsRFC3986">[RFC3986]</a>.</p></li>

   <li><p>The <a href="#url">URL</a> is a valid IRI reference and it has no
   query component. <a href="references.html#refsRFC3987">[RFC3987]</a></p></li>

   <li><p>The <a href="#url">URL</a> is a valid IRI reference and its query
   component contains no unescaped non-ASCII characters. <a href="references.html#refsRFC3987">[RFC3987]</a></p></li>

   <li><p>The <a href="#url">URL</a> is a valid IRI reference and the <a href="dom.html#document-s-character-encoding" title="document's character encoding">character encoding</a> of
   the URL's <code><a href="infrastructure.html#document">Document</a></code> is UTF-8 or UTF-16. <a href="references.html#refsRFC3987">[RFC3987]</a></p></li>

  </ul><p>A string is a <dfn id="valid-non-empty-url">valid non-empty URL</dfn> if it is a
  <a href="#valid-url">valid URL</a> but it is not the empty string.</p><p>A string is a <dfn id="valid-url-potentially-surrounded-by-spaces">valid URL potentially surrounded by
  spaces</dfn> if, after <a href="common-microsyntaxes.html#strip-leading-and-trailing-whitespace" title="strip leading and trailing
  whitespace">stripping leading and trailing whitespace</a> from
  it, it is a <a href="#valid-url">valid URL</a>.</p><p>A string is a <dfn id="valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by
  spaces</dfn> if, after <a href="common-microsyntaxes.html#strip-leading-and-trailing-whitespace" title="strip leading and trailing
  whitespace">stripping leading and trailing whitespace</a> from
  it, it is a <a href="#valid-non-empty-url">valid non-empty URL</a>.</p><div class="impl">

  <p>To <dfn id="parse-a-url">parse a URL</dfn> <var title="">url</var> into its
  component parts, the user agent must use the <span class="XXX">parse
  an address</span> algorithm defined by the IRI specification. <a href="references.html#refsRFC3987">[RFC3987]</a></p>

  <p>Parsing a URL can fail. If it does not, then it results in the
  following components, again as defined by the IRI specification:</p>

  <ul class="brief"><li><dfn id="url-scheme" title="url-scheme">&lt;scheme&gt;</dfn></li>
   <li><dfn id="url-host" title="url-host">&lt;host&gt;</dfn></li>
   <li><dfn id="url-port" title="url-port">&lt;port&gt;</dfn></li>
   <li><dfn id="url-hostport" title="url-hostport">&lt;hostport&gt;</dfn></li>
   <li><dfn id="url-path" title="url-path">&lt;path&gt;</dfn></li>
   <li><dfn id="url-query" title="url-query">&lt;query&gt;</dfn></li>
   <li><dfn id="url-fragment" title="url-fragment">&lt;fragment&gt;</dfn></li>
   <li><dfn id="url-host-specific" title="url-host-specific">&lt;host-specific&gt;</dfn></li>
  </ul><hr><p>To <dfn id="resolve-a-url">resolve a URL</dfn> to an <a href="#absolute-url">absolute URL</a>
  relative to either another <a href="#absolute-url">absolute URL</a> or an element,
  the user agent must use the following steps. Resolving a URL can
  result in an error, in which case the URL is not resolvable.</p>

  <ol><li><p>Let <var title="">url</var> be the <a href="#url">URL</a> being
   resolved.</p></li>

   <li>

    <p>Let <var title="">encoding</var> be determined as follows:</p>

    <dl class="switch"><dt>If the URL had a character encoding defined when the URL was
     created or defined</dt>

     <dd>The URL character encoding is as defined.</dd>

     <dt>If the URL came from a script (e.g. as an argument to a
     method)</dt>

     <dd>The URL character encoding is the <a href="webappapis.html#script-s-url-character-encoding">script's URL character
     encoding</a>.</dd>

     <dt>If the URL came from a DOM node (e.g. from an element)</dt>

     <dd>The node has a <code><a href="infrastructure.html#document">Document</a></code>, and the URL character
     encoding is the <a href="dom.html#document-s-character-encoding">document's character encoding</a>.</dd>

    </dl></li>

   <li><p>If <var title="">encoding</var> is a UTF-16 encoding, then
   change the value of <var title="">encoding</var> to UTF-8.</p></li>

   <li>

    <p>If the algorithm was invoked with an <a href="#absolute-url">absolute URL</a>
    to use as the base URL, let <var title="">base</var> be that
    <a href="#absolute-url">absolute URL</a>.</p>

    <p>Otherwise, let <var title="">base</var> be the <i>base URI of
    the element</i>, as defined by the XML Base specification, with
    <i>the base URI of the document entity</i> being defined as the
    <a href="#document-base-url">document base URL</a> of the <code><a href="infrastructure.html#document">Document</a></code> that
    owns the element. <a href="references.html#refsXMLBASE">[XMLBASE]</a></p>

    <p>For the purposes of the XML Base specification, user agents
    must act as if all <code><a href="infrastructure.html#document">Document</a></code> objects represented XML
    documents.</p>

    <p class="note">It is possible for <code title="attr-xml-base"><a href="elements.html#the-xml:base-attribute-xml-only">xml:base</a></code> attributes to be present
    even in HTML fragments, as such attributes can be added
    dynamically using script. (Such scripts would not be conforming,
    however, as <code title="attr-xml-base"><a href="elements.html#the-xml:base-attribute-xml-only">xml:base</a></code> attributes
    are not allowed in <a href="dom.html#html-documents">HTML documents</a>.)</p>

    <p>The <dfn id="document-base-url">document base URL</dfn> of a <code><a href="infrastructure.html#document">Document</a></code>
    object is the <a href="#absolute-url">absolute URL</a> obtained by running these
    substeps:</p>

    <ol><li><p>Let <var title="">fallback base url</var> be <a href="dom.html#the-document-s-address">the
     document's address</a>.</p></li>

     <li>

      <!-- http://www.hixie.ch/tests/adhoc/html/navigation/javascript-url/ -->

      <!-- this should be tested in the case of a browsing context that
      was navigated to about:blank after having been elsewhere, as
      opposed to the about:blank used at the time of the browsing
      context's creation. -->

      <p>If <var title="">fallback base url</var> is
      <code><a href="fetching-resources.html#about:blank">about:blank</a></code>, and the <code><a href="infrastructure.html#document">Document</a></code>'s
      <a href="browsers.html#browsing-context">browsing context</a> has a <a href="browsers.html#creator-browsing-context">creator browsing
      context</a>, then let <var title="">fallback base url</var>
      be the <a href="#document-base-url">document base URL</a> of the <a href="browsers.html#creator-document">creator
      <code>Document</code></a> instead.</p>

     </li>

     <li><p>If there is no <code><a href="semantics.html#the-base-element">base</a></code> element that is both a
     child of <a href="dom.html#the-head-element">the <code>head</code> element</a> and has an
     <code title="attr-base-href"><a href="semantics.html#attr-base-href">href</a></code> attribute, then the
     <a href="#document-base-url">document base URL</a> is <var title="">fallback base
     url</var>.</p></li>

     <li><p>Otherwise, let <var title="">url</var> be the value of the
     <code title="attr-base-href"><a href="semantics.html#attr-base-href">href</a></code> attribute of the first
     such element.</p></li>

     <li><p><a href="#resolve-a-url" title="resolve a URL">Resolve</a> <var title="">url</var> relative to <var title="">fallback base
     url</var> (thus, the <code><a href="semantics.html#the-base-element">base</a></code> <code title="attr-base-href"><a href="semantics.html#attr-base-href">href</a></code> attribute isn't affected by
     <code title="attr-xml-base"><a href="elements.html#the-xml:base-attribute-xml-only">xml:base</a></code> attributes).</p></li>

     <li><p>The <a href="#document-base-url">document base URL</a> is the result of the
     previous step if it was successful; otherwise it is <var title="">fallback base url</var>.</p></li>

    </ol></li>

   <li><p>Return the result of applying the <span class="XXX">resolve
   an address</span> algorithm defined by the IRI specification to
   resolve <var title="">url</var> relative to <var title="">base</var> using encoding <var title="">encoding</var>. <a href="references.html#refsRFC3987">[RFC3987]</a></p></li>

  </ol></div><p>A <a href="#url">URL</a> is an <dfn id="absolute-url">absolute URL</dfn> if <a href="#resolve-a-url" title="resolve a url">resolving</a> it results in the same output
  regardless of what it is resolved relative to, and that output is
  not a failure.</p><p>An <a href="#absolute-url">absolute URL</a> is a <dfn id="hierarchical-url">hierarchical URL</dfn> if,
  when <a href="#resolve-a-url" title="resolve a url">resolved</a> and then <a href="#parse-a-url" title="parse a url">parsed</a>, there is a character immediately
  after the <a href="#url-scheme" title="url-scheme">&lt;scheme&gt;</a> component
  and it is a U+002F SOLIDUS character (/).</p><p>An <a href="#absolute-url">absolute URL</a> is an <dfn id="authority-based-url">authority-based URL</dfn>
  if, when <a href="#resolve-a-url" title="resolve a url">resolved</a> and then <a href="#parse-a-url" title="parse a url">parsed</a>, there are two characters
  immediately after the <a href="#url-scheme" title="url-scheme">&lt;scheme&gt;</a>
  component and they are both U+002F SOLIDUS characters (//).</p><hr><p>This specification defines the URL
  <dfn id="about:legacy-compat"><code>about:legacy-compat</code></dfn> as a reserved, though
  unresolvable, <code title="">about:</code> URI, for use in <a href="syntax.html#syntax-doctype" title="syntax-doctype">DOCTYPE</a>s in <a href="dom.html#html-documents">HTML
  documents</a> when needed for compatibility with XML tools. <a href="references.html#refsABOUT">[ABOUT]</a></p><p>This specification defines the URL
  <dfn id="about:srcdoc"><code>about:srcdoc</code></dfn> as a reserved, though
  unresolvable, <code title="">about:</code> URI, that is used as
  <a href="dom.html#the-document-s-address">the document's address</a> of <a href="the-iframe-element.html#an-iframe-srcdoc-document" title="an iframe srcdoc
  document"><code>iframe</code> <code title="attr-iframe-srcdoc">srcdoc</code> documents</a>. <a href="references.html#refsABOUT">[ABOUT]</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><div class="impl">

  <h4 id="dynamic-changes-to-base-urls"><span class="secno">2.5.2 </span>Dynamic changes to base URLs</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p>

  <p>When an <code title="attr-xml-base"><a href="elements.html#the-xml:base-attribute-xml-only">xml:base</a></code> attribute
  changes, the attribute's element, and all descendant elements, are
  <a href="#affected-by-a-base-url-change">affected by a base URL change</a>.</p>

  <p>When a document's <a href="#document-base-url">document base URL</a> changes, all
  elements in that document are <a href="#affected-by-a-base-url-change">affected by a base URL
  change</a>.</p>

  <p>When an element is moved from one document to another, if the two
  documents have different <a href="#document-base-url" title="document base URL">base
  URLs</a>, then that element and all its descendants are
  <a href="#affected-by-a-base-url-change">affected by a base URL change</a>.</p>

  <p>When an element is <dfn id="affected-by-a-base-url-change">affected by a base URL change</dfn>, it
  must act as described in the following list:</p>

  <dl class="switch"><dt>If the element is a <a href="links.html#hyperlink" title="hyperlink">hyperlink
   element</a></dt>

   <dd>

    <p>If the <a href="#absolute-url">absolute URL</a> identified by the hyperlink is
    being shown to the user, or if any data derived from that URL is
    affecting the display, then the <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute should be <a href="#resolve-a-url" title="resolve a url">re-resolved</a> relative to the element
    and the UI updated appropriately.</p>

    <p class="example">For example, the CSS <code title="selector-link"><a href="links.html#selector-link">:link</a></code>/<code title="selector-visited"><a href="links.html#selector-visited">:visited</a></code> pseudo-classes might have
    been affected.</p>


   </dd>

   <dt>If the element is a <code><a href="text-level-semantics.html#the-q-element">q</a></code>, <code><a href="grouping-content.html#the-blockquote-element">blockquote</a></code>,
   <code><a href="sections.html#the-section-element">section</a></code>, <code><a href="sections.html#the-article-element">article</a></code>, <code><a href="edits.html#the-ins-element">ins</a></code>, or
   <code><a href="edits.html#the-del-element">del</a></code> element with a <code title="">cite</code>
   attribute</dt>

   <dd>

    <p>If the <a href="#absolute-url">absolute URL</a> identified by the <code title="">cite</code> attribute is being shown to the user, or if
    any data derived from that URL is affecting the display, then the
    <a href="#url">URL</a> should be <a href="#resolve-a-url" title="resolve a
    url">re-resolved</a> relative to the element and the UI updated
    appropriately.</p>

   </dd>

   <dt>Otherwise</dt>

   <dd>

    <p>The element is not directly affected.</p>

    <p class="example">Changing the base URL doesn't affect the image
    displayed by <code><a href="embedded-content-1.html#the-img-element">img</a></code> elements, although subsequent
    accesses of the <code title="dom-img-src"><a href="embedded-content-1.html#dom-img-src">src</a></code> IDL attribute
    from script will return a new <a href="#absolute-url">absolute URL</a> that might
    no longer correspond to the image being shown.</p>

   </dd>

  </dl></div><h4 id="interfaces-for-url-manipulation"><span class="secno">2.5.3 </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="impl">

  <hr><p>The attributes defined to be URL decomposition IDL attributes must
  act as described for the attributes with the same corresponding
  names in this section.</p>

  <p>In addition, an interface with a complement of URL decomposition IDL
  attributes will define an <dfn id="concept-uda-input" title="concept-uda-input">input</dfn>, which is a <a href="#url">URL</a>
  that the attributes act on, and a <dfn id="concept-uda-setter" title="concept-uda-setter">common setter action</dfn>, which is a
  set of steps invoked when any of the attributes' setters are
  invoked.</p>

  <p>The seven URL decomposition IDL attributes have similar
  requirements.</p>

  <p>On getting, if the <a href="#concept-uda-input" title="concept-uda-input">input</a>
  is an <a href="#absolute-url">absolute URL</a> that fulfills the condition given in
  the "getter condition" column corresponding to the attribute in the
  table below, the user agent must return the part of the <a href="#concept-uda-input" title="concept-uda-input">input</a> URL given in the "component"
  column, with any prefixes specified in the "prefix" column
  appropriately added to the start of the string and any suffixes
  specified in the "suffix" column appropriately added to the end of
  the string. Otherwise, the attribute must return the empty
  string.</p>

  <p>On setting, the new value must first be mutated as described by
  the "setter preprocessor" column, then mutated by %-escaping any
  characters in the new value that are not valid in the relevant
  component as given by the "component" column. Then, if the <a href="#concept-uda-input" title="concept-uda-input">input</a> is an <a href="#absolute-url">absolute
  URL</a> and the resulting new value fulfills the condition given
  in the "setter condition" column, the user agent must make a new
  string <var title="">output</var> by replacing the component of the
  URL given by the "component" column in the <a href="#concept-uda-input" title="concept-uda-input">input</a> URL with the new value;
  otherwise, the user agent must let <var title="">output</var> be
  equal to the <a href="#concept-uda-input" title="concept-uda-input">input</a>. Finally,
  the user agent must invoke the <a href="#concept-uda-setter" title="concept-uda-setter">common setter action</a> with the
  value of <var title="">output</var>.</p>

  <p>When replacing a component in the URL, if the component is part
  of an optional group in the URL syntax consisting of a character
  followed by the component, the component (including its prefix
  character) must be included even if the new value is the empty
  string.</p>

  <p class="note">The previous paragraph applies in particular to the
  "<code title="">:</code>" before a &lt;port&gt; component, the "<code title="">?</code>" before a &lt;query&gt; component, and the "<code title="">#</code>" before a &lt;fragment&gt; component.</p>

  <p>For the purposes of the above definitions, URLs must be parsed
  using the <a href="#parse-a-url" title="parse a URL">URL parsing rules</a> defined
  in this specification.</p>

  <table><thead><tr><th>Attribute
     </th><th>Component
     </th><th>Getter Condition
     </th><th>Prefix
     </th><th>Suffix
     </th><th>Setter Preprocessor
     </th><th>Setter Condition
   </th></tr></thead><tbody><tr><td><dfn id="dom-uda-protocol" title="dom-uda-protocol"><code>protocol</code></dfn>
     </td><td><a href="#url-scheme" title="url-scheme">&lt;scheme&gt;</a>
     </td><td>&#8212;
     </td><td>&#8212;
     </td><td>U+003A COLON (:)
     </td><td>Remove all trailing U+003A COLON characters (:)
     </td><td>The new value is not the empty string
    </td></tr><tr><td><dfn id="dom-uda-host" title="dom-uda-host"><code>host</code></dfn>
     </td><td><a href="#url-hostport" title="url-hostport">&lt;hostport&gt;</a>
     </td><td><a href="#concept-uda-input" title="concept-uda-input">input</a> is an <a href="#authority-based-url">authority-based URL</a>
     </td><td>&#8212;
     </td><td>&#8212;
     </td><td>&#8212;
     </td><td>The new value is not the empty string and <a href="#concept-uda-input" title="concept-uda-input">input</a> is an <a href="#authority-based-url">authority-based URL</a>
    </td></tr><tr><td><dfn id="dom-uda-hostname" title="dom-uda-hostname"><code>hostname</code></dfn>
     </td><td><a href="#url-host" title="url-host">&lt;host&gt;</a>
     </td><td><a href="#concept-uda-input" title="concept-uda-input">input</a> is an <a href="#authority-based-url">authority-based URL</a>
     </td><td>&#8212;
     </td><td>&#8212;
     </td><td>Remove all leading U+002F SOLIDUS characters (/)
     </td><td>The new value is not the empty string and <a href="#concept-uda-input" title="concept-uda-input">input</a> is an <a href="#authority-based-url">authority-based URL</a>
    </td></tr><tr><td><dfn id="dom-uda-port" title="dom-uda-port"><code>port</code></dfn>
     </td><td><a href="#url-port" title="url-port">&lt;port&gt;</a>
     </td><td><a href="#concept-uda-input" title="concept-uda-input">input</a> is an <a href="#authority-based-url">authority-based URL</a>, and contained a <a href="#url-port" title="url-port">&lt;port&gt;</a> component (possibly an empty one)
     </td><td>&#8212;
     </td><td>&#8212;
     </td><td>Remove all characters in the new value from the first that is not in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), if any.
         Remove any leading U+0030 DIGIT ZERO characters (0) in the new value.
         If the resulting string is empty, set it to a single U+0030 DIGIT ZERO character (0).
     </td><td><a href="#concept-uda-input" title="concept-uda-input">input</a> is an <a href="#authority-based-url">authority-based URL</a>,
         and the new value, when interpretted as a base-ten integer, is less than or equal to 65535
    </td></tr><tr><td><dfn id="dom-uda-pathname" title="dom-uda-pathname"><code>pathname</code></dfn>
     </td><td><a href="#url-path" title="url-path">&lt;path&gt;</a>
     </td><td><a href="#concept-uda-input" title="concept-uda-input">input</a> is a <a href="#hierarchical-url">hierarchical URL</a>
     </td><td>&#8212;
     </td><td>&#8212;
     </td><td>If it has no leading U+002F SOLIDUS character (/), prepend a U+002F SOLIDUS character (/) to the new value
     </td><td><a href="#concept-uda-input" title="concept-uda-input">input</a> is hierarchical
    </td></tr><tr><td><dfn id="dom-uda-search" title="dom-uda-search"><code>search</code></dfn>
     </td><td><a href="#url-query" title="url-query">&lt;query&gt;</a>
     </td><td><a href="#concept-uda-input" title="concept-uda-input">input</a> is a <a href="#hierarchical-url">hierarchical URL</a>, and contained a <a href="#url-query" title="url-query">&lt;query&gt;</a> component (possibly an empty one)
     </td><td>U+003F QUESTION MARK (?)
     </td><td>&#8212;
     </td><td>Remove one leading U+003F QUESTION MARK character (?), if any
     </td><td><a href="#concept-uda-input" title="concept-uda-input">input</a> is a <a href="#hierarchical-url">hierarchical URL</a>
    </td></tr><tr><td><dfn id="dom-uda-hash" title="dom-uda-hash"><code>hash</code></dfn>
     </td><td><a href="#url-fragment" title="url-fragment">&lt;fragment&gt;</a>
     </td><td><a href="#concept-uda-input" title="concept-uda-input">input</a> contained a non-empty <a href="#url-fragment" title="url-fragment">&lt;fragment&gt;</a> component
     </td><td>U+0023 NUMBER SIGN (#)
     </td><td>&#8212;
     </td><td>Remove one leading U+0023 NUMBER SIGN character (#), if any
     </td><td>&#8212;
  </td></tr></tbody></table><!--
  http://www.hixie.ch/tests/adhoc/dom/level0/location/components/
  http://lxr.mozilla.org/seamonkey/source/dom/src/base/nsLocation.cpp
  http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/ref_h-l.htm#84722
--></div><div class="example">

   <p>The table below demonstrates how the getter <span class="impl">condition</span> for <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.
           <span class="impl">The question mark in the resulting value is the prefix.</span>
     </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></body></html>
--- NEW FILE: tokenization.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>8.2.4 Tokenization &#8212; HTML5 </title><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; }
[...6016 lines suppressed...]
    mode</a>.</p>
   </dd>

   <dt>An end-of-file token</dt>
   <dd>
    <p><a href="the-end.html#stop-parsing">Stop parsing</a>.</p>
   </dd>

   <dt>A start tag whose tag name is "noframes"</dt>
   <dd>
    <p>Process the token <a href="parsing.html#using-the-rules-for">using the rules for</a> the "<a href="#parsing-main-inhead" title="insertion mode: in head">in head</a>" <a href="parsing.html#insertion-mode">insertion
    mode</a>.</p>
   </dd>

   <dt>Anything else</dt>
   <dd>
    <p><a href="parsing.html#parse-error">Parse error</a>. Ignore the token.</p>
   </dd>

  </dl></div></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><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, table tbody { 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: #DDFFDD; }
   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; }

   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; }

   body.dfnEnabled dfn { cursor: pointer; }
   .dfnPanel {
     display: inline;
     position: absolute;
     z-index: 10;
     height: auto;
     width: auto;
     padding: 0.5em 0.75em;
     font: small sans-serif, Droid Sans Fallback;
     background: #DDDDDD;
     color: black;
     border: outset 0.2em;
   }
   .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
   .dfnPanel :link, .dfnPanel :visited { color: black; }
   .dfnPanel p { font-weight: bolder; }
   .dfnPanel * + p { margin-top: 0.25em; }
   .dfnPanel li { list-style-position: inside; }

   #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; }

   .details-example img { vertical-align: top; }

   #named-character-references-table {
     font-size: 0.6em;
     column-width: 28em;
     column-gap: 1em;
     -moz-column-width: 28em;
     -moz-column-gap: 1em;
     -webkit-column-width: 28em;
     -webkit-column-gap: 1em;
   }
   #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
   #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; }

  </style><style type="text/css">
   .domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
  </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%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%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script type="text/javascript">
   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'); // doesn't support split-out specs, but, oh well.
     // 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">
  <script src="link-fixup.js"></script>
  <link href="text-level-semantics.html" title="4.6 Text-level semantics" rel="prev">
  <link href="spec.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="spec.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="rendering.html#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="rendering.html#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-potentially-surrounded-by-spaces">valid URL potentially surrounded by
  spaces</a> that explains the change. <span class="impl">To obtain
  the corresponding citation link, the value of the attribute must be
  <a href="urls.html#resolve-a-url" title="resolve a url">resolved</a> relative to the
  element. User agents should allow users to follow such citation
  links.</span></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><div class="impl">

  <p>User agents must parse the <code title="attr-mod-datetime"><a href="#attr-mod-datetime">datetime</a></code> attribute according to the
  <a href="common-microsyntaxes.html#parse-a-global-date-and-time-string">parse a global date and time string</a> algorithm. If that
  doesn't return a time, then the modification has no associated
  timestamp (the value is non-conforming; it is not a <a href="common-microsyntaxes.html#valid-global-date-and-time-string">valid
  global date and time string</a>). Otherwise, the modification is
  marked as having been made at the given datetime. User agents should
  use the associated time-zone offset information to determine which
  time zone to present the given datetime in.</p>

  </div><p>The <code><a href="#the-ins-element">ins</a></code> and <code><a href="#the-del-element">del</a></code> elements <span class="impl">must</span> 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><div class="impl">

  <p>The <dfn id="dom-mod-cite" title="dom-mod-cite"><code>cite</code></dfn> IDL
  attribute must <a href="common-dom-interfaces.html#reflect">reflect</a> the element's <code title="attr-mod-cite"><a href="#attr-mod-cite">cite</a></code> content attribute. The <dfn id="dom-mod-datetime" title="dom-mod-datetime"><code>dateTime</code></dfn> IDL attribute
  must <a href="common-dom-interfaces.html#reflect">reflect</a> the element's <code title="attr-mod-datetime"><a href="#attr-mod-datetime">datetime</a></code> content attribute.</p>

  </div><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;/li&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><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; }
[...1111 lines suppressed...]
     </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><div class="impl">

  <p>User agents may apply different defaults than those described in
  this section in order to expose the semantics of <a href="infrastructure.html#html-elements">HTML
  elements</a> in a manner more fine-grained than possible with the
  above definitions.</p>

  <p>Conformance checkers are encouraged to phrase errors such that
  authors are encouraged to use more appropriate elements rather than
  remove accessibility annotations. For example, if an <code><a href="text-level-semantics.html#the-a-element">a</a></code>
  element is marked as having the <code title="attr-aria-role-button">button</code> role, a conformance
  checker could say "Either a <code><a href="the-button-element.html#the-button-element">button</a></code> element or an
  <code><a href="the-input-element.html#the-input-element">input</a></code> element is required when using the <code title="attr-aria-role-button">button</code> role" rather than "The
  <code title="attr-aria-role-button">button</code> role cannot be
  used with <code><a href="text-level-semantics.html#the-a-element">a</a></code> elements".</p>

  </div></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.7.1 States of the type attribute &#8212; HTML5 </title><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; }
[...1585 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><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; }
[...1194 lines suppressed...]

     </dd>

     <dt>If <var title="">position</var> is an <a href="infrastructure.html#ascii-case-insensitive">ASCII
     case-insensitive</a> match for the string "afterend"</dt>

     <dd>

      <p>Insert all the <var title="">new children</var> nodes
      immediately after <var title="">target</var>.</p>

     </dd>

    </dl><p>The <var title="">new children</var> nodes must be inserted in
    a manner that preserves their order and fires mutation events as
    if a <code><a href="infrastructure.html#documentfragment">DocumentFragment</a></code> containing the <var title="">new children</var> had been inserted.</p>

   </li>

  </ol></div></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.8 The button element &#8212; HTML5 </title><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; }
[...2198 lines suppressed...]
  <a href="association-of-controls-and-forms.html#form-owner">form owner</a>.</p><div class="impl">

  <p>The <dfn id="dom-meter-min" title="dom-meter-min"><code>min</code></dfn>, <dfn id="dom-meter-max" title="dom-meter-max"><code>max</code></dfn>, <dfn id="dom-meter-value" title="dom-meter-value"><code>value</code></dfn>, <dfn id="dom-meter-low" title="dom-meter-low"><code>low</code></dfn>, <dfn id="dom-meter-high" title="dom-meter-high"><code>high</code></dfn>, and <dfn id="dom-meter-optimum" title="dom-meter-optimum"><code>optimum</code></dfn> IDL attributes
  must <a href="common-dom-interfaces.html#reflect">reflect</a> the respective content attributes of the
  same name. When the relevant content attributes are absent, the IDL
  attributes must return zero.</p>

  <p>The <code title="dom-lfe-labels"><a href="forms.html#dom-lfe-labels">labels</a></code> attribute provides
  a list of the element's <code><a href="forms.html#the-label-element">label</a></code>s. The <code title="dom-fae-form"><a href="association-of-controls-and-forms.html#dom-fae-form">form</a></code> IDL attribute is part of the
  element's forms API.</p>

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

   <p>The following example shows how a gauge could fall back to
   localized or pretty-printed text.</p>

   <pre>&lt;p&gt;Disk usage: &lt;meter min=0 value=170261928 max=233257824&gt;170&#8201;261&#8201;928 bytes used
out of 233&#8201;257&#8201;824 bytes available&lt;/meter&gt;&lt;/p&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><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; }
[...2242 lines suppressed...]
   to the list of commands should use the syntax <code><var title="">vendorID</var>-<var title="">customCommandID</var></code>
   so as to prevent clashes between extensions from different vendors
   and future additions to this specification.</dd>
   <dd class="impl"><strong>Enabled When</strong>: UA-defined.</dd>
   <dd class="impl"><strong>Indeterminate When</strong>: UA-defined.</dd>
   <dd class="impl"><strong>State</strong>: UA-defined.</dd>
   <dd class="impl"><strong>Value</strong>: UA-defined.</dd>

   <dt class="impl">Anything else</dt>
   <dd class="impl"><strong>Action</strong>: User agents must do nothing.</dd>
   <dd class="impl"><strong>Enabled When</strong>: Never.</dd>
   <dd class="impl"><strong>Indeterminate When</strong>: Never.</dd>
   <dd class="impl"><strong>State</strong>: Always false.</dd>
   <dd class="impl"><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>4.12 Links &#8212; HTML5 </title><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; }
[...1699 lines suppressed...]

     <li><code><a href="the-button-element.html#the-textarea-element">textarea</a></code> elements that do not have a <code title="attr-textarea-readonly"><a href="the-button-element.html#attr-textarea-readonly">readonly</a></code> attribute, and
     that are not <a href="association-of-controls-and-forms.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a></li>

     <li>any element that is <a href="editing.html#editable">editable</a></li>

    </ul><p>The <code title="selector-read-only"><a href="#selector-read-only">:read-only</a></code>
    pseudo-class must match all other <a href="infrastructure.html#html-elements">HTML elements</a>.</p>

   </dd>

  </dl><p class="note">Another section of this specification defines the
  <i><a href="history.html#target-element">target element</a></i> used with the <code title="selector-target">:target</code> pseudo-class.</p>

  <p class="note">This specification does not define when an element
  matches the <code title="selector-hover">:hover</code>, <code title="selector-focus">:focus</code>, or <code title="selector-lang()">:lang()</code> dynamic pseudo-classes, as
  those are all defined in sufficient detail in a language-agnostic
  fashion in the Selectors specification. <a href="references.html#refsSELECTORS">[SELECTORS]</a></p>

  </div></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.7.1.13 Number state &#8212; HTML5 </title><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; }
[...1419 lines suppressed...]
   <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="common-input-element-attributes.html#dom-input-checked">checked</a></code>,
   <code class="no-backref" title="dom-input-files"><a href="common-input-element-attributes.html#dom-input-files">files</a></code>,
   <code class="no-backref" title="dom-input-list"><a href="common-input-element-attributes.html#dom-input-list">list</a></code>,
   <code class="no-backref" title="dom-input-selectedOption"><a href="common-input-element-attributes.html#dom-input-selectedoption">selectedOption</a></code>,
   <code class="no-backref" title="dom-textarea/input-selectionStart"><a href="editing.html#dom-textarea-input-selectionstart">selectionStart</a></code>,
   <code class="no-backref" title="dom-textarea/input-selectionEnd"><a href="editing.html#dom-textarea-input-selectionend">selectionEnd</a></code>,
   <code class="no-backref" title="dom-input-valueAsDate"><a href="common-input-element-attributes.html#dom-input-valueasdate">valueAsDate</a></code>, and
   <code class="no-backref" title="dom-input-valueAsNumber"><a href="common-input-element-attributes.html#dom-input-valueasnumber">valueAsNumber</a></code> IDL attributes;
   <code class="no-backref" title="dom-textarea/input-select"><a href="editing.html#dom-textarea-input-select">select()</a></code>,
   <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="editing.html#dom-textarea-input-setselectionrange">setSelectionRange()</a></code>,
   <code class="no-backref" title="dom-input-stepDown"><a href="common-input-element-attributes.html#dom-input-stepdown">stepDown()</a></code>, and
   <code class="no-backref" title="dom-input-stepUp"><a href="common-input-element-attributes.html#dom-input-stepup">stepUp()</a></code> methods.</p>

   <p>The <code class="no-backref" title="event-input-input"><a href="common-input-element-attributes.html#event-input-input">input</a></code> and <code class="no-backref" title="event-input-change"><a href="common-input-element-attributes.html#event-input-change">change</a></code> events do not apply.</p>

  </div></body></html>
--- NEW FILE: sections.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.4 Sections &#8212; HTML5 </title><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; }
[...1630 lines suppressed...]
      node = node.firstChild;
      continue start;
    }
    while (node) {
      exit(node);
      if (node.nextSibling) {
        node = node.nextSibling;
        continue start;
      }
      if (node == root)
        node = null;
      else
        node = node.parentNode;
    }
  }
}</pre>

  </div>

  </div></body></html>
--- NEW FILE: namespaces.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.8 Namespaces &#8212; HTML5 </title><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, table tbody { 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: #DDFFDD; }
   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; }

   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; }

   body.dfnEnabled dfn { cursor: pointer; }
   .dfnPanel {
     display: inline;
     position: absolute;
     z-index: 10;
     height: auto;
     width: auto;
     padding: 0.5em 0.75em;
     font: small sans-serif, Droid Sans Fallback;
     background: #DDDDDD;
     color: black;
     border: outset 0.2em;
   }
   .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
   .dfnPanel :link, .dfnPanel :visited { color: black; }
   .dfnPanel p { font-weight: bolder; }
   .dfnPanel * + p { margin-top: 0.25em; }
   .dfnPanel li { list-style-position: inside; }

   #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; }

   .details-example img { vertical-align: top; }

   #named-character-references-table {
     font-size: 0.6em;
     column-width: 28em;
     column-gap: 1em;
     -moz-column-width: 28em;
     -moz-column-gap: 1em;
     -webkit-column-width: 28em;
     -webkit-column-gap: 1em;
   }
   #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
   #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; }

  </style><style type="text/css">
   .domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
  </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%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%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script type="text/javascript">
   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'); // doesn't support split-out specs, but, oh well.
     // 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">
  <script src="link-fixup.js"></script>
  <link href="common-dom-interfaces.html" title="2.7 Common DOM interfaces" rel="prev">
  <link href="spec.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-dom-interfaces.html">&#8592; 2.7 Common DOM interfaces</a> &#8211;
   <a href="spec.html#contents">Table of contents</a> &#8211;
   <a href="dom.html">3 Semantics, structure, and APIs of HTML documents &#8594;</a>
  </div>

  <h3 id="namespaces"><span class="secno">2.8 </span>Namespaces</h3><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>The <dfn id="html-namespace-0">HTML namespace</dfn> is: <code>http://www.w3.org/1999/xhtml</code></p><p>The <dfn id="mathml-namespace">MathML namespace</dfn> is: <code>http://www.w3.org/1998/Math/MathML</code></p><p>The <dfn id="svg-namespace">SVG namespace</dfn> is: <code>http://www.w3.org/2000/svg</code></p><p>The <dfn id="xlink-namespace">XLink namespace</dfn> is: <code>http://www.w3.org/1999/xlink</code></p><p>The <dfn id="xml-namespace">XML namespace</dfn> is: <code>http://www.w3.org/XML/1998/namespace</code></p><p>The <dfn id="xmlns-namespace">XMLNS namespace</dfn> is: <code>http://www.w3.org/2000/xmlns/</code></p><hr><p>Data mining tools and other user agents that perform operations
  on content without running scripts, evaluating CSS or XPath
  expressions, or otherwise exposing the resulting DOM to arbitrary
  content, may "support namespaces" by just asserting that their DOM
  node analogues are in certain namespaces, without actually exposing
  the above strings.</p></body></html>
--- NEW FILE: commands.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>4.11.5 Commands &#8212; HTML5 </title><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, table tbody { 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: #DDFFDD; }
   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; }

   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; }

   body.dfnEnabled dfn { cursor: pointer; }
   .dfnPanel {
     display: inline;
     position: absolute;
     z-index: 10;
     height: auto;
     width: auto;
     padding: 0.5em 0.75em;
     font: small sans-serif, Droid Sans Fallback;
     background: #DDDDDD;
     color: black;
     border: outset 0.2em;
   }
   .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
   .dfnPanel :link, .dfnPanel :visited { color: black; }
   .dfnPanel p { font-weight: bolder; }
   .dfnPanel * + p { margin-top: 0.25em; }
   .dfnPanel li { list-style-position: inside; }

   #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; }

   .details-example img { vertical-align: top; }

   #named-character-references-table {
     font-size: 0.6em;
     column-width: 28em;
     column-gap: 1em;
     -moz-column-width: 28em;
     -moz-column-gap: 1em;
     -webkit-column-width: 28em;
     -webkit-column-gap: 1em;
   }
   #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
   #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; }

  </style><style type="text/css">
   .domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
  </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%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%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><script type="text/javascript">
   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'); // doesn't support split-out specs, but, oh well.
     // 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">
  <script src="link-fixup.js"></script>
  <link href="interactive-elements.html" title="4.11 Interactive elements" rel="prev">
  <link href="spec.html#contents" title="Table of contents" rel="index">
  <link href="links.html" title="4.12 Links" rel="next">
  </head><body onload="fixBrokenLink(); init()"><div class="head" id="head">
   <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
   <h1>HTML5</h1>
   </div><div>
   <a href="interactive-elements.html">&#8592; 4.11 Interactive elements</a> &#8211;
   <a href="spec.html#contents">Table of contents</a> &#8211;
   <a href="links.html">4.12 Links &#8594;</a>
  <ol class="toc"><li><ol><li><ol><li><a href="commands.html#commands"><span class="secno">4.11.5 </span>Commands</a>
      <ol><li><a href="commands.html#using-the-a-element-to-define-a-command"><span class="secno">4.11.5.1 </span>Using the <code>a</code> element to define a command</a></li><li><a href="commands.html#using-the-button-element-to-define-a-command"><span class="secno">4.11.5.2 </span>Using the <code>button</code> element to define a command</a></li><li><a href="commands.html#using-the-input-element-to-define-a-command"><span class="secno">4.11.5.3 </span>Using the <code>input</code> element to define a command</a></li><li><a href="commands.html#using-the-option-element-to-define-a-command"><span class="secno">4.11.5.4 </span>Using the <code>option</code> element to define a command</a></li><li><a href="commands.html#using-the-command-element-to-define-a-command"><span class="secno">4.11.5.5 </span>Using the <code>command</code> element to define
  a command</a></li><li><a href="commands.html#using-the-accesskey-attribute-on-a-label-element-to-define-a-command"><span class="secno">4.11.5.6 </span>Using the <code title="attr-accesskey">accesskey</code> attribute on a <code>label</code> element to define a command</a></li><li><a href="commands.html#using-the-accesskey-attribute-on-a-legend-element-to-define-a-command"><span class="secno">4.11.5.7 </span>Using the <code title="attr-accesskey">accesskey</code> attribute on a <code>legend</code> element to define a command</a></li><li><a href="commands.html#using-the-accesskey-attribute-to-define-a-command-on-other-elements"><span class="secno">4.11.5.8 </span>Using the <code title="attr-accesskey">accesskey</code> attribute to define a command on other elements</a></li></ol></li></ol></li></ol></li></ol></div>

  <h4 id="commands"><span class="secno">4.11.5 </span>Commands</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A <dfn id="concept-command" title="concept-command">command</dfn> is the abstraction
  behind menu items, buttons, and links.<!--v2COMMAND: Once a command
  is defined, other parts of the interface can refer to the same
  command, allowing many access points to a single feature to share
  aspects such as the disabled state.--></p><p id="facets">Commands are defined to have the following
  <dfn id="concept-facet" title="concept-facet">facets</dfn>:</p><dl><dt><dfn id="command-facet-type" title="command-facet-Type">Type</dfn></dt>

   <dd>The kind of command: "command", meaning it is a normal command;
   "radio", meaning that triggering the command will, amongst other
   things, set the <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked
   State</a> to true (and probably uncheck some other commands); or
   "checkbox", meaning that triggering the command will, amongst other
   things, toggle the value of the <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a>.</dd>

   <dt><dfn id="command-facet-id" title="command-facet-ID">ID</dfn></dt>

   <dd>The name of the command, for referring to the command from the
   markup or from script. If a command has no ID, it is an
   <dfn id="anonymous-command">anonymous command</dfn>.</dd>

   <dt><dfn id="command-facet-label" title="command-facet-Label">Label</dfn></dt>

   <dd>The name of the command as seen by the user.</dd>

   <dt><dfn id="command-facet-hint" title="command-facet-Hint">Hint</dfn></dt>

   <dd>A helpful or descriptive string that can be shown to the
   user.</dd>

   <dt><dfn id="command-facet-icon" title="command-facet-Icon">Icon</dfn></dt>

   <dd>An <a href="urls.html#absolute-url">absolute URL</a> identifying a graphical image that
   represents the action. A command might not have an Icon.</dd> <!--
   changing base URLs might change the icon -->

   <dt><dfn id="command-facet-accesskey" title="command-facet-AccessKey">Access Key</dfn></dt>

   <dd>A key combination selected by the user agent that triggers the
   command. A command might not have an Access Key.</dd>

   <dt><dfn id="command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</dfn></dt>

   <dd>Whether the command is hidden or not (basically, whether it
   should be shown in menus).</dd>

   <dt><dfn id="command-facet-disabledstate" title="command-facet-DisabledState">Disabled State</dfn></dt>

   <dd>Whether the command is relevant and can be triggered or not.</dd>

   <dt><dfn id="command-facet-checkedstate" title="command-facet-CheckedState">Checked State</dfn></dt>

   <dd>Whether the command is checked or not.</dd>

   <dt><dfn id="command-facet-action" title="command-facet-Action">Action</dfn></dt>

   <dd>The actual effect that triggering the command will have. This
   could be a scripted event handler, a <a href="urls.html#url">URL</a> to which to
   <a href="history.html#navigate">navigate</a>, or a form submission.</dd>

<!-- v2COMMAND
   <dt><dfn title="command-facet-Triggers">Triggers</dfn></dt>

   <dd>The list of elements that can trigger the command. The element
   defining a command is always in the list of elements that can
   trigger the command. For anonymous commands, only the element
   defining the command is on the list, since other elements have no
   way to refer to it.</dd>
-->

  </dl><p>These facets are exposed on elements using the <dfn id="command-api">command
  API</dfn>:</p><dl class="domintro"><dt><var title="">element</var> . <code title="dom-command-ro-commandType"><a href="#dom-command-ro-commandtype">commandType</a></code></dt>

   <dd>

    <p>Exposes the <a href="#command-facet-type" title="command-facet-Type">Type</a> facet of the command.</p>

   </dd>

   <dt><var title="">element</var> . <code title="dom-id"><a href="elements.html#dom-id">id</a></code></dt>

   <dd>

    <p>Exposes the <a href="#command-facet-id" title="command-facet-ID">ID</a> facet of the command.</p>

   </dd>

   <dt><var title="">element</var> . <code title="dom-command-ro-label"><a href="#dom-command-ro-label">label</a></code></dt>

   <dd>

    <p>Exposes the <a href="#command-facet-label" title="command-facet-Label">Label</a> facet of the command.</p>

   </dd>

   <dt><var title="">element</var> . <code title="dom-title"><a href="elements.html#dom-title">title</a></code></dt>

   <dd>

    <p>Exposes the <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> facet of the command.</p>

   </dd>

   <dt><var title="">element</var> . <code title="dom-command-ro-icon"><a href="#dom-command-ro-icon">icon</a></code></dt>

   <dd>

    <p>Exposes the <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> facet of the command.</p>

   </dd>

   <dt><var title="">element</var> . <code title="dom-accessKeyLabel"><a href="editing.html#dom-accesskeylabel">accessKeyLabel</a></code></dt>

   <dd>

    <p>Exposes the <a href="#command-facet-accesskey" title="command-facet-AccessKey">Access Key</a> facet of the command.</p>

   </dd>

   <dt><var title="">element</var> . <code title="dom-hidden"><a href="editing.html#dom-hidden">hidden</a></code></dt>

   <dd>

    <p>Exposes the <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a> facet of the command.</p>

   </dd>

   <dt><var title="">element</var> . <code title="dom-command-ro-disabled"><a href="#dom-command-ro-disabled">disabled</a></code></dt>

   <dd>

    <p>Exposes the <a href="#command-facet-disabledstate" title="command-facet-DisabledState">Disabled State</a> facet of the command.</p>

   </dd>

   <dt><var title="">element</var> . <code title="dom-command-ro-checked"><a href="#dom-command-ro-checked">checked</a></code></dt>

   <dd>

    <p>Exposes the <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a> facet of the command.</p>

   </dd>

   <dt><var title="">element</var> . <code title="dom-click"><a href="editing.html#dom-click">click</a></code>()</dt>

   <dd>

    <p>Triggers the <a href="#command-facet-action" title="command-facet-Action">Action</a> of the command.</p>

   </dd>

<!--v2COMMAND
   <dt><var title="">element</var> . <code title="dom-command-ro-triggers">triggers</code></dt>

   <dd>

    <p>Exposes the <span title="command-facet-Triggers">Triggers</span> facet of the command.</p>

   </dd>
-->

  </dl><div class="impl">

  <p>The <dfn id="dom-command-ro-commandtype" title="dom-command-ro-commandType"><code>commandType</code></dfn>
  attribute must return a string whose value is either "<code title="">command</code>", "<code title="">radio</code>", or "<code title="">checkbox</code>", depending on whether the <a href="#command-facet-type" title="command-facet-Type">Type</a> of the command defined by the
  element is "command", "radio", or "checkbox" respectively. If the
  element does not define a command, it must return null.</p>

  <p>The <dfn id="dom-command-ro-label" title="dom-command-ro-label"><code>label</code></dfn>
  attribute must return the command's <a href="#command-facet-label" title="command-facet-Label">Label</a>, or null if the element
  does not define a command or does not specify a <a href="#command-facet-label" title="command-facet-Label">Label</a>. This attribute will be
  shadowed by the <code title="">label</code> IDL attribute on
  various elements.</p>

  <p>The <dfn id="dom-command-ro-icon" title="dom-command-ro-icon"><code>icon</code></dfn>
  attribute must return the <a href="urls.html#absolute-url">absolute URL</a> of the command's
  <a href="#command-facet-icon" title="command-facet-Icon">Icon</a>. If the element does
  not specify an icon, or if the element does not define a command,
  then the attribute must return null. This attribute will be shadowed
  by the <code title="dom-command-icon"><a href="interactive-elements.html#dom-command-icon">icon</a></code> IDL attribute on
  <code><a href="interactive-elements.html#the-command">command</a></code> elements.</p>

  <p>The <dfn id="dom-command-ro-disabled" title="dom-command-ro-disabled"><code>disabled</code></dfn>
  attribute must return true if the command's <a href="#command-facet-disabledstate" title="command-facet-DisabledState">Disabled State</a> is that
  the command is disabled, and false if the command is not
  disabled. This attribute is not affected by the command's <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a>. If the
  element does not define a command, the attribute must return
  false. This attribute will be shadowed by the <code title="">disabled</code> IDL attribute on various elements.</p>

  <p>The <dfn id="dom-command-ro-checked" title="dom-command-ro-checked"><code>checked</code></dfn> attribute
  must return true if the command's <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a> is that the
  command is checked, and false if it is that the command is not
  checked. If the element does not define a command, the attribute
  must return false. This attribute will be shadowed by the <code title="">checked</code> IDL attribute on <code><a href="the-input-element.html#the-input-element">input</a></code> and
  <code><a href="interactive-elements.html#the-command">command</a></code> elements.</p>

<!--v2COMMAND
  <p>The <dfn
  title="dom-command-ro-triggers"><code>triggers</code></dfn>
  attribute must return a list containing the elements that can
  trigger the command (the command's <span
  title="command-facet-Triggers">Triggers</span>). The list must be
  <span>live</span>. The same object must be returned each time. While
  the element does not define a command, the list must be empty.</p>
-->

  <p class="note">The <a href="#command-facet-id" title="command-facet-ID">ID</a> facet
  is exposed by the <code title="dom-id"><a href="elements.html#dom-id">id</a></code> IDL attribute,
  the <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> facet is exposed by
  the <code title="dom-title"><a href="elements.html#dom-title">title</a></code> IDL attribute, the <a href="#command-facet-accesskey" title="command-facet-AccessKey">AccessKey</a> facet is exposed by
  the <code title="dom-accessKeyLabel"><a href="editing.html#dom-accesskeylabel">accessKeyLabel</a></code> IDL
  attribute, and the <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden
  State</a> facet is exposed by the <code title="dom-hidden"><a href="editing.html#dom-hidden">hidden</a></code> IDL attribute.</p>

  </div><hr><dl class="domintro"><dt><var title="">document</var> . <code title="dom-document-commands"><a href="#dom-document-commands">commands</a></code></dt>
   <dd>
    <p>Returns an <code><a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a></code> of the elements in the
    <code><a href="infrastructure.html#document">Document</a></code> that define commands and have IDs.</p>
   </dd>

  </dl><div class="impl">

  <p>The <dfn id="dom-document-commands" title="dom-document-commands"><code>commands</code></dfn> attribute
  of the document's <code><a href="dom.html#htmldocument">HTMLDocument</a></code> interface must return an
  <code><a href="common-dom-interfaces.html#htmlcollection">HTMLCollection</a></code> rooted at the <code><a href="infrastructure.html#document">Document</a></code>
  node, whose filter matches only elements that <a href="#concept-command" title="concept-command">define commands</a> and have <a href="#command-facet-id" title="command-facet-ID">IDs</a>.</p>

  </div><hr><p>User agents may expose the <a href="#concept-command" title="concept-command">commands</a> whose <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a> facet is false
  (visible), e.g. in the user agent's menu bar. User agents are
  encouraged to do this especially for commands that have <a href="#command-facet-accesskey" title="command-facet-AccessKey">Access Keys</a>, as a way to
  advertise those keys to the user.</p><div class="impl">

  <h5 id="using-the-a-element-to-define-a-command"><span class="secno">4.11.5.1 </span><dfn title="a-command">Using the <code>a</code> element to define a command</dfn></h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p>

  <p>An <code><a href="text-level-semantics.html#the-a-element">a</a></code> element with an <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute <a href="#concept-command" title="concept-command">defines a command</a>.</p>

  <p>The <a href="#command-facet-type" title="command-facet-Type">Type</a> of the command
  is "command".</p>

  <p>The <a href="#command-facet-id" title="command-facet-ID">ID</a> of the command is
  the value of the <code title="attr-id"><a href="elements.html#the-id-attribute">id</a></code> attribute of the
  element, if the attribute is present and not empty. Otherwise the
  command is an <a href="#anonymous-command">anonymous command</a>.</p>

  <p>The <a href="#command-facet-label" title="command-facet-Label">Label</a> of the command
  is the string given by the element's <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL
  attribute.</p>

  <p>The <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> of the command
  is the value of the <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute
  of the element. If the attribute is not present, the <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> is the empty string.</p>

  <p>The <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> of the command
  is the <a href="urls.html#absolute-url">absolute URL</a> obtained from <a href="urls.html#resolve-a-url" title="resolve
  a url">resolving</a> the value of the <code title="attr-img-src"><a href="embedded-content-1.html#attr-img-src">src</a></code> attribute of the first
  <code><a href="embedded-content-1.html#the-img-element">img</a></code> element descendant of the element, relative to that
  element, if there is such an element and resolving its attribute is
  successful. Otherwise, there is no <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> for the command.</p>

  <p>The <a href="#command-facet-accesskey" title="command-facet-AccessKey">AccessKey</a> of the
  command is the element's <a href="editing.html#assigned-access-key">assigned access key</a>, if
  any.</p>

  <p>The <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a>
  of the command is true (hidden) if the element has a <code title="attr-hidden"><a href="editing.html#the-hidden-attribute">hidden</a></code> attribute, and false
  otherwise.</p>

  <p>The <a href="#command-facet-disabledstate" title="command-facet-DisabledState">Disabled
  State</a> facet of the command is always false. (The command is
  always enabled.)</p>

  <p>The <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a>
  of the command is always false. (The command is never checked.)</p>

  <p>The <a href="#command-facet-action" title="command-facet-Action">Action</a> of the
  command is to <a href="webappapis.html#fire-a-click-event" title="fire a click event">fire a <code title="event-click">click</code> event</a> at the element.</p>


  <h5 id="using-the-button-element-to-define-a-command"><span class="secno">4.11.5.2 </span><dfn title="button-command">Using the <code>button</code> element to define a command</dfn></h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p>

  <p>A <code><a href="the-button-element.html#the-button-element">button</a></code> element always <a href="#concept-command" title="concept-command">defines a command</a>.</p>

  <p>The <a href="#command-facet-type" title="command-facet-Type">Type</a>, <a href="#command-facet-id" title="command-facet-ID">ID</a>, <a href="#command-facet-label" title="command-facet-Label">Label</a>, <a href="#command-facet-hint" title="command-facet-Hint">Hint</a>, <a href="#command-facet-icon" title="command-facet-Icon">Icon</a>, <a href="#command-facet-accesskey" title="command-facet-AccessKey">Access Key</a>, <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a>, <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a>, and <a href="#command-facet-action" title="command-facet-Action">Action</a> facets of the command are
  determined <a href="#using-the-a-element-to-define-a-command" title="a-command">as for <code>a</code>
  elements</a> (see the previous section).</p>

  <p>The <a href="#command-facet-disabledstate" title="command-facet-DisabledState">Disabled
  State</a> of the command mirrors the <a href="association-of-controls-and-forms.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a> state of the button.</p>


  <h5 id="using-the-input-element-to-define-a-command"><span class="secno">4.11.5.3 </span><dfn title="input-command">Using the <code>input</code> element to define a command</dfn></h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p>

  <p>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 one of the <a href="number-state.html#submit-button-state" title="attr-input-type-submit">Submit Button</a>, <a href="number-state.html#reset-button-state" title="attr-input-type-reset">Reset Button</a>, <a href="number-state.html#image-button-state" title="attr-input-type-image">Image Button</a>, <a href="number-state.html#button-state" title="attr-input-type-button">Button</a>, <a href="number-state.html#radio-button-state" title="attr-input-type-radio">Radio Button</a>, or <a href="number-state.html#checkbox-state" title="attr-input-type-checkbox">Checkbox</a> states <a href="#concept-command" title="concept-command">defines a command</a>.</p>

  <p>The <a href="#command-facet-type" title="command-facet-Type">Type</a> of the command
  is "radio" if the <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code>
  attribute is in the <code title="attr-input-type-radio"><a href="number-state.html#radio-button-state">Radio
  Button</a></code> state, "checkbox" if the <code title="attr-input-type"><a href="the-input-element.html#attr-input-type">type</a></code> attribute is in the <code title="attr-input-type-checkbox"><a href="number-state.html#checkbox-state">Checkbox</a></code> state, and
  "command" otherwise.</p>

  <p>The <a href="#command-facet-id" title="command-facet-ID">ID</a> of the command is
  the value of the <code title="attr-id"><a href="elements.html#the-id-attribute">id</a></code> attribute of the
  element, if the attribute is present and not empty. Otherwise the
  command is an <a href="#anonymous-command">anonymous command</a>.</p>

  <p>The <a href="#command-facet-label" title="command-facet-Label">Label</a> of the command
  depends on the Type of the command:</p>

  <p>If the <a href="#command-facet-type" title="command-facet-Type">Type</a> is "command",
  then it is the string given by the <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code> attribute, if any, and a
  UA-dependent, locale-dependent value that the UA uses to label the
  button itself if the attribute is absent.</p>

  <p>Otherwise, the <a href="#command-facet-type" title="command-facet-Type">Type</a> is
  "radio" or "checkbox". If the element is a <a href="forms.html#labeled-control">labeled
  control</a>, the <code><a href="infrastructure.html#textcontent">textContent</a></code> of the first
  <code><a href="forms.html#the-label-element">label</a></code> element in <a href="infrastructure.html#tree-order">tree order</a> whose
  <a href="forms.html#labeled-control">labeled control</a> is the element in question is the <a href="#command-facet-label" title="command-facet-Label">Label</a> (in DOM terms, this is the
  string given by <code><var title="">element</var>.labels[0].textContent</code>). Otherwise,
  the value of the <code title="attr-input-value"><a href="the-input-element.html#attr-input-value">value</a></code>
  attribute, if present, is the <a href="#command-facet-label" title="command-facet-Label">Label</a>. Otherwise, the <a href="#command-facet-label" title="command-facet-Label">Label</a> is the empty string.</p>

  <p>The <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> of the command
  is the value of the <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute
  of the <code><a href="the-input-element.html#the-input-element">input</a></code> element. If the attribute is not present, the
  <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> is the empty
  string.</p>

  <p>If the element's <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, and the element has a <code title="attr-img-src"><a href="embedded-content-1.html#attr-img-src">src</a></code> attribute, and that attribute's
  value can be successfully <a href="urls.html#resolve-a-url" title="resolve a
  url">resolved</a> relative to the element, then the <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> of the command is the
  <a href="urls.html#absolute-url">absolute URL</a> obtained from resolving that attribute
  that way. Otherwise, there is no <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> for the command.</p>

  <p>The <a href="#command-facet-accesskey" title="command-facet-AccessKey">AccessKey</a> of the
  command is the element's <a href="editing.html#assigned-access-key">assigned access key</a>, if
  any.</p>

  <p>The <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a>
  of the command is true (hidden) if the element has a <code title="attr-hidden"><a href="editing.html#the-hidden-attribute">hidden</a></code> attribute, and false
  otherwise.</p>

  <p>The <a href="#command-facet-disabledstate" title="command-facet-DisabledState">Disabled
  State</a> of the command mirrors the <a href="association-of-controls-and-forms.html#concept-fe-disabled" title="concept-fe-disabled">disabled</a> state of the
  control.</p>

  <p>The <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a>
  of the command is true if the command is of <a href="#command-facet-type" title="command-facet-Type">Type</a> "radio" or "checkbox" and the
  element is <a href="association-of-controls-and-forms.html#concept-fe-checked" title="concept-fe-checked">checked</a>
  attribute, and false otherwise.</p>

  <p>The <a href="#command-facet-action" title="command-facet-Action">Action</a> of the
  command, if the element has a defined <a href="content-models.html#activation-behavior">activation
  behavior</a>, is to <a href="content-models.html#run-synthetic-click-activation-steps">run synthetic click activation
  steps</a> on the element. Otherwise, it is just to <a href="webappapis.html#fire-a-click-event">fire a
  <code title="event-click">click</code> event</a> at the
  element.</p>


  <h5 id="using-the-option-element-to-define-a-command"><span class="secno">4.11.5.4 </span><dfn title="option-command">Using the <code>option</code> element to define a command</dfn></h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p>

  <p>An <code><a href="the-button-element.html#the-option-element">option</a></code> element with an ancestor
  <code><a href="the-button-element.html#the-select-element">select</a></code> element and either no <code title="attr-option-value"><a href="the-button-element.html#attr-option-value">value</a></code> attribute or a <code title="attr-option-value"><a href="the-button-element.html#attr-option-value">value</a></code> attribute that is not the
  empty string <a href="#concept-command" title="concept-command">defines a
  command</a>.</p>

  <p>The <a href="#command-facet-type" title="command-facet-Type">Type</a> of the command
  is "radio" if the <code><a href="the-button-element.html#the-option-element">option</a></code>'s nearest ancestor
  <code><a href="the-button-element.html#the-select-element">select</a></code> element has no <code title="attr-select-multiple"><a href="the-button-element.html#attr-select-multiple">multiple</a></code> attribute, and
  "checkbox" if it does.</p>

  <p>The <a href="#command-facet-id" title="command-facet-ID">ID</a> of the command is
  the value of the <code title="attr-id"><a href="elements.html#the-id-attribute">id</a></code> attribute of the
  element, if the attribute is present and not empty. Otherwise the
  command is an <a href="#anonymous-command">anonymous command</a>.</p>

  <p>The <a href="#command-facet-label" title="command-facet-Label">Label</a> of the command
  is the value of the <code><a href="the-button-element.html#the-option-element">option</a></code> element's <code title="attr-option-label"><a href="the-button-element.html#attr-option-label">label</a></code> attribute, if there is one,
  or the value of the <code><a href="the-button-element.html#the-option-element">option</a></code> element's
  <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL attribute if there isn't.</p>

  <p>The <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> of the command
  is the string given by the element's <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute, if any, and the empty
  string if the attribute is absent.</p>

  <p>There is no <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> for the
  command.</p>

  <p>The <a href="#command-facet-accesskey" title="command-facet-AccessKey">AccessKey</a> of the
  command is the element's <a href="editing.html#assigned-access-key">assigned access key</a>, if
  any.</p>

  <p>The <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a>
  of the command is true (hidden) if the element has a <code title="attr-hidden"><a href="editing.html#the-hidden-attribute">hidden</a></code> attribute, and false
  otherwise.</p>

  <p>The <a href="#command-facet-disabledstate" title="command-facet-DisabledState">Disabled
  State</a> of the command is true (disabled) if the element is
  <a href="the-button-element.html#concept-option-disabled" title="concept-option-disabled">disabled</a> or if its
  nearest ancestor <code><a href="the-button-element.html#the-select-element">select</a></code> element is <a href="the-button-element.html#concept-option-disabled" title="concept-option-disabled">disabled</a>, and false
  otherwise.</p>

  <p>The <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a>
  of the command is true (checked) if the element's <a href="the-button-element.html#concept-option-selectedness" title="concept-option-selectedness">selectedness</a> is true, and
  false otherwise.</p>

  <p>The <a href="#command-facet-action" title="command-facet-Action">Action</a> of the
  command depends on its <a href="#command-facet-type" title="command-facet-Type">Type</a>. If the command is of <a href="#command-facet-type" title="command-facet-Type">Type</a> "radio" then it must <a href="the-button-element.html#concept-select-pick" title="concept-select-pick">pick</a> the <code><a href="the-button-element.html#the-option-element">option</a></code>
  element. Otherwise, it must <a href="the-button-element.html#concept-select-toggle" title="concept-select-toggle">toggle</a> the <code><a href="the-button-element.html#the-option-element">option</a></code>
  element.</p>


  <h5 id="using-the-command-element-to-define-a-command"><span class="secno">4.11.5.5 </span>Using the <dfn title="command-element"><code>command</code></dfn> element to define
  a command</h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p>

  <p>A <code><a href="interactive-elements.html#the-command">command</a></code> element <a href="#concept-command" title="concept-command">defines a command</a>.</p>

  <p>The <a href="#command-facet-type" title="command-facet-Type">Type</a> of the command
  is "radio" if the <code><a href="interactive-elements.html#the-command">command</a></code>'s <code title="attr-command-type"><a href="interactive-elements.html#attr-command-type">type</a></code> attribute is
  "<code>radio</code>", "checkbox" if the attribute's value is
  "<code>checkbox</code>", and "command" otherwise.</p>

  <p>The <a href="#command-facet-id" title="command-facet-ID">ID</a> of the command is
  the value of the <code title="attr-id"><a href="elements.html#the-id-attribute">id</a></code> attribute of the
  element, if the attribute is present and not empty. Otherwise the
  command is an <a href="#anonymous-command">anonymous command</a>.</p>

  <p>The <a href="#command-facet-label" title="command-facet-Label">Label</a> of the command
  is the value of the element's <code title="attr-command-label"><a href="interactive-elements.html#attr-command-label">label</a></code> attribute, if there is one,
  or the empty string if it doesn't.</p>

  <p>The <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> of the command
  is the string given by the element's <code title="attr-command-title"><a href="interactive-elements.html#attr-command-title">title</a></code> attribute, if any, and the
  empty string if the attribute is absent.</p>

  <p>The <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> for the command
  is the <a href="urls.html#absolute-url">absolute URL</a> obtained from <a href="urls.html#resolve-a-url" title="resolve
  a url">resolving</a> the value of the element's <code title="attr-command-icon"><a href="interactive-elements.html#attr-command-icon">icon</a></code> attribute, relative to the
  element, if it has such an attribute and resolving it is
  successful. Otherwise, there is no <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> for the command.</p>

  <p>The <a href="#command-facet-accesskey" title="command-facet-AccessKey">AccessKey</a> of the
  command is the element's <a href="editing.html#assigned-access-key">assigned access key</a>, if
  any.</p>

  <p>The <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a>
  of the command is true (hidden) if the element has a <code title="attr-hidden"><a href="editing.html#the-hidden-attribute">hidden</a></code> attribute, and false
  otherwise.</p>

  <p>The <a href="#command-facet-disabledstate" title="command-facet-DisabledState">Disabled
  State</a> of the command is true (disabled) if the element has a
  <code title="attr-command-disabled"><a href="interactive-elements.html#attr-command-disabled">disabled</a></code> attribute, and
  false otherwise.</p>

  <p>The <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a>
  of the command is true (checked) if the element has a <code title="attr-command-checked"><a href="interactive-elements.html#attr-command-checked">checked</a></code> attribute, and false
  otherwise.</p>

  <p>The <a href="#command-facet-action" title="command-facet-Action">Action</a> of the
  command, if the element has a defined <a href="content-models.html#activation-behavior">activation
  behavior</a>, is to <a href="content-models.html#run-synthetic-click-activation-steps">run synthetic click activation
  steps</a> on the element. Otherwise, it is just to <a href="webappapis.html#fire-a-click-event">fire a
  <code title="event-click">click</code> event</a> at the
  element.</p>





  <h5 id="using-the-accesskey-attribute-on-a-label-element-to-define-a-command"><span class="secno">4.11.5.6 </span><dfn title="label-command">Using the <code title="attr-accesskey">accesskey</code> attribute on a <code>label</code> element to define a command</dfn></h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p>

  <p>A <code><a href="forms.html#the-label-element">label</a></code> element that has an <a href="editing.html#assigned-access-key">assigned access
  key</a> and a <a href="forms.html#labeled-control">labeled control</a> and whose
  <a href="forms.html#labeled-control">labeled control</a> <a href="#concept-command" title="concept-command">defines a
  command</a>, itself <a href="#concept-command" title="concept-command">defines a
  command</a>.</p>

  <p>The <a href="#command-facet-type" title="command-facet-Type">Type</a> of the command
  is "command".</p>

  <p>The <a href="#command-facet-id" title="command-facet-ID">ID</a> of the command is
  the value of the <code title="attr-id"><a href="elements.html#the-id-attribute">id</a></code> attribute of the
  element, if the attribute is present and not empty. Otherwise the
  command is an <a href="#anonymous-command">anonymous command</a>.</p>

  <p>The <a href="#command-facet-label" title="command-facet-Label">Label</a> of the command
  is the string given by the element's <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL
  attribute.</p>

  <p>The <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> of the command
  is the value of the <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute
  of the element.</p>

  <p>There is no <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> for the
  command.</p>

  <p>The <a href="#command-facet-accesskey" title="command-facet-AccessKey">AccessKey</a> of the
  command is the element's <a href="editing.html#assigned-access-key">assigned access key</a>.</p>

  <p>The <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a>,
  <a href="#command-facet-disabledstate" title="command-facet-DisabledState">Disabled State</a>, and
  <a href="#command-facet-action" title="command-facet-Action">Action</a> facets of the
  command are the same as the respective facets of the element's
  <a href="forms.html#labeled-control">labeled control</a>.</p>

  <p>The <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a>
  of the command is always false. (The command is never checked.)</p>



  <h5 id="using-the-accesskey-attribute-on-a-legend-element-to-define-a-command"><span class="secno">4.11.5.7 </span><dfn title="legend-command">Using the <code title="attr-accesskey">accesskey</code> attribute on a <code>legend</code> element to define a command</dfn></h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p>

  <p>A <code><a href="forms.html#the-legend-element">legend</a></code> element that has an <a href="editing.html#assigned-access-key">assigned access
  key</a> and is a child of a <code><a href="forms.html#the-fieldset-element">fieldset</a></code> element that
  has a descendant that is not a descendant of the <code><a href="forms.html#the-legend-element">legend</a></code>
  element and is neither a <code><a href="forms.html#the-label-element">label</a></code> element nor a
  <code><a href="forms.html#the-legend-element">legend</a></code> element but that <a href="#concept-command" title="concept-command">defines a command</a>, itself <a href="#concept-command" title="concept-command">defines a command</a>.</p>

  <p>The <a href="#command-facet-type" title="command-facet-Type">Type</a> of the command
  is "command".</p>

  <p>The <a href="#command-facet-id" title="command-facet-ID">ID</a> of the command is
  the value of the <code title="attr-id"><a href="elements.html#the-id-attribute">id</a></code> attribute of the
  element, if the attribute is present and not empty. Otherwise the
  command is an <a href="#anonymous-command">anonymous command</a>.</p>

  <p>The <a href="#command-facet-label" title="command-facet-Label">Label</a> of the command
  is the string given by the element's <code><a href="infrastructure.html#textcontent">textContent</a></code> IDL
  attribute.</p>

  <p>The <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> of the command
  is the value of the <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute
  of the element.</p>

  <p>There is no <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> for the
  command.</p>

  <p>The <a href="#command-facet-accesskey" title="command-facet-AccessKey">AccessKey</a> of the
  command is the element's <a href="editing.html#assigned-access-key">assigned access key</a>.</p>

  <p>The <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a>,
  <a href="#command-facet-disabledstate" title="command-facet-DisabledState">Disabled State</a>, and
  <a href="#command-facet-action" title="command-facet-Action">Action</a> facets of the
  command are the same as the respective facets of the first element
  in <a href="infrastructure.html#tree-order">tree order</a> that is a descendant of the parent of the
  <code><a href="forms.html#the-legend-element">legend</a></code> element that <a href="#concept-command" title="concept-command">defines a command</a> but is not a
  descendant of the <code><a href="forms.html#the-legend-element">legend</a></code> element and is neither a
  <code><a href="forms.html#the-label-element">label</a></code> nor a <code><a href="forms.html#the-legend-element">legend</a></code> element.</p>

  <p>The <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a>
  of the command is always false. (The command is never checked.)</p>



  <h5 id="using-the-accesskey-attribute-to-define-a-command-on-other-elements"><span class="secno">4.11.5.8 </span><dfn title="accesskey-command">Using the <code title="attr-accesskey">accesskey</code> attribute to define a command on other elements</dfn></h5><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p>

  <p>An element that has an <a href="editing.html#assigned-access-key">assigned access key</a> <a href="#concept-command" title="concept-command">defines a command</a>.</p>

  <p>If one of the other sections that define elements that <a href="#concept-command" title="concept-command">define commands</a> define that this
  element <a href="#concept-command" title="concept-command">defines a command</a>, then
  that section applies to this element, and this section does
  not. Otherwise, this section applies to that element.</p>

  <p>The <a href="#command-facet-type" title="command-facet-Type">Type</a> of the command
  is "command".</p>

  <p>The <a href="#command-facet-id" title="command-facet-ID">ID</a> of the command is
  the value of the <code title="attr-id"><a href="elements.html#the-id-attribute">id</a></code> attribute of the
  element, if the attribute is present and not empty. Otherwise the
  command is an <a href="#anonymous-command">anonymous command</a>.</p>

  <p>The <a href="#command-facet-label" title="command-facet-Label">Label</a> of the command
  depends on the element. If the element is a <a href="forms.html#labeled-control">labeled
  control</a>, the <code><a href="infrastructure.html#textcontent">textContent</a></code> of the first
  <code><a href="forms.html#the-label-element">label</a></code> element in <a href="infrastructure.html#tree-order">tree order</a> whose
  <a href="forms.html#labeled-control">labeled control</a> is the element in question is the <a href="#command-facet-label" title="command-facet-Label">Label</a> (in DOM terms, this is the
  string given by <code><var title="">element</var>.labels[0].textContent</code>). Otherwise, the
  <a href="#command-facet-label" title="command-facet-Label">Label</a> is the
  <code><a href="infrastructure.html#textcontent">textContent</a></code> of the element itself.</p>

  <p>The <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> of the command
  is the value of the <code title="attr-title"><a href="elements.html#the-title-attribute">title</a></code> attribute
  of the element. If the attribute is not present, the <a href="#command-facet-hint" title="command-facet-Hint">Hint</a> is the empty string.</p>

  <p>There is no <a href="#command-facet-icon" title="command-facet-Icon">Icon</a> for the
  command.</p>

  <p>The <a href="#command-facet-accesskey" title="command-facet-AccessKey">AccessKey</a> of the
  command is the element's <a href="editing.html#assigned-access-key">assigned access key</a>.</p>

  <p>The <a href="#command-facet-hiddenstate" title="command-facet-HiddenState">Hidden State</a>
  of the command is true (hidden) if the element has a <code title="attr-hidden"><a href="editing.html#the-hidden-attribute">hidden</a></code> attribute, and false
  otherwise.</p>

  <p>The <a href="#command-facet-disabledstate" title="command-facet-DisabledState">Disabled
  State</a> facet of the command is always false. (The command is
  always enabled.)</p>

  <p>The <a href="#command-facet-checkedstate" title="command-facet-CheckedState">Checked State</a>
  of the command is always false. (The command is never checked.)</p>

  <p>The <a href="#command-facet-action" title="command-facet-Action">Action</a> of the
  command is to run the following steps:</p>

  <ol><li>If the element is <a href="editing.html#focusable">focusable</a>, run the
   <a href="editing.html#focusing-steps">focusing steps</a> for the element.</li>

   <li>If the element has a defined <a href="content-models.html#activation-behavior">activation behavior</a>,
   <a href="content-models.html#run-synthetic-click-activation-steps">run synthetic click activation steps</a> on the
   element.</li>

   <li>Otherwise, if the element does not have a defined
   <a href="content-models.html#activation-behavior">activation behavior</a>, <a href="webappapis.html#fire-a-click-event">fire a <code title="event-click">click</code> event</a> at the element.</li>

  </ol></div></body></html>
--- NEW FILE: common-microsyntaxes.html ---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE html>
<!-- when publishing, change bits marked ZZZ --><html lang="en-US-x-Hixie" class="split chapter"><head><title>2.4 Common microsyntaxes &#8212; HTML5 </title><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; }
[...2188 lines suppressed...]
   is a <a href="infrastructure.html#case-sensitive">case-sensitive</a> match for <var title="">s</var> or
   a <code title="">name</code> attribute whose value is a
   <a href="infrastructure.html#compatibility-caseless">compatibility caseless</a> match for <var title="">s</var>.</p></li>

   <!--
   IE is also doing case-insensitive id="" matching.
   Tests:
   http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cmap%20name%3D%22T%26eacute%3B%26%23x01F1%3B%26%23x2075%3B%22%3E%3Carea%20href%3D%22%2F%22%20shape%3Drect%20coords%3D0%2C0%2C200%2C200%3E%3C%2Fmap%3E%0A%3Cimg%20usemap%3D%22%23t%26Eacute%3BDZ5%22%20src%3Dimage%3E
   ...except that doesn't explain why this fails:
   http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cmap%20name%3D%22T%26eacute%3B%26%23x01F1%3B%26%23x2075%3B%26%23xFB01%3B%22%3E%3Carea%20href%3D%22%2F%22%20shape%3Drect%20coords%3D0%2C0%2C200%2C200%3E%3C%2Fmap%3E%0A%3Cimg%20usemap%3D%22%23t%26Eacute%3BDZ5F%26%23x0131%3B%26%23x0307%3B%22%20src%3Dimage%3E
   maybe they just don't know about combining dot above?
   -->

  </ol></div><h4 id="mq"><span class="secno">2.4.10 </span>Media queries</h4><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i></p><p>A string is a <dfn id="valid-media-query">valid media query</dfn> if it matches the
  <code title="">media_query_list</code> production of the Media
  Queries specification. <a href="references.html#refsMQ">[MQ]</a></p><p>A string <dfn id="matches-the-environment">matches the environment</dfn> of the user if it is
  the empty string, a string consisting of only <a href="#space-character" title="space
  character">space characters</a>, or is a media query that matches
  the user's environment according to the definitions given in the
  Media Queries specification. <a href="references.html#refsMQ">[MQ]</a></p></body></html>

Received on Friday, 14 May 2010 10:12:44 UTC